/* CSJ9 investor portal (Phase 2) — loaded by investor_portal/portal/base_portal.html only.
 *
 * Source of truth: docs/design/investor-portal/handoff.md (§ Shell, § Components, § Phone) and the
 * inline styles of its *.dc.html files. Builds on users/static/users/client.css: every colour is a
 * client.css token, light/dark come from its html[data-theme] + prefers-color-scheme blocks, and
 * existing classes (.c-subnav, .c-notice, .c-empty, .c-tag, .c-table, .c-summary, .c-btn, .c-field,
 * .c-range, .c-section-head) are reused as they are. Only the new pieces live here.
 * Lime: wordmark, focus halo, dark-theme links, search-hit underline. No yellow, no shadows. Radius 2px.
 */

/* the one new token (handoff § Tokens) */
:root { --scrim: rgba(19, 32, 26, 0.45); }
:root[data-theme="dark"] { --scrim: rgba(0, 0, 0, 0.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --scrim: rgba(0, 0, 0, 0.6); }
}

/* ------------------------------------------------------------- sub-nav */
/* Desktop: .c-subnav metrics; current link ink with an ink underline, the others muted. */
.ip-subnav .c-subnav__link, .ip-subnav .c-subnav__link:hover { color: var(--muted); }
.ip-subnav .c-subnav__link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.ip-soon { margin-left: 6px; vertical-align: middle; }

/* Phone (< 600px): one 52px disclosure row; the open list holds 48px links. */
.ip-subnav-phone { display: none; border-bottom: 1px solid var(--rule); }
.ip-subnav-phone__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px;
  padding: 0 20px; cursor: pointer; list-style: none; color: var(--ink);
}
.ip-subnav-phone__row::-webkit-details-marker { display: none; }
.ip-subnav-phone__lead { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ip-subnav-phone__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.ip-subnav-phone__current { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-subnav-phone__toggle { font-family: var(--font-mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.ip-subnav-phone__opened, .ip-subnav-phone[open] .ip-subnav-phone__closed { display: none; }
.ip-subnav-phone[open] .ip-subnav-phone__opened { display: inline; }
.ip-subnav-phone__list {
  border-top: 1px solid var(--rule); display: flex; flex-direction: column; padding: 4px 0 8px;
}
.ip-subnav-phone__link, .ip-subnav-phone__link:hover {
  color: var(--muted); text-decoration: none; min-height: 48px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 20px; font-size: 16px;
}
.ip-subnav-phone__link[aria-current="page"] { color: var(--ink); font-weight: 500; }
.ip-subnav-phone__dot { width: 6px; height: 6px; background: var(--ink); display: block; }
@media (max-width: 599.98px) {
  .ip-subnav { display: none; }
  .ip-subnav-phone { display: block; }
}

/* ------------------------------------------------- preview-as banner
 * Not drawn in the handoff (GTP-only tool): the .c-notice pattern in a shell-width row. */
.ip-preview { padding: 16px clamp(20px, 5cqi, 40px) 0; }
.ip-preview__inner {
  max-width: var(--shell-max); margin: 0 auto; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
}
.ip-preview__inner + .ip-preview__inner { margin-top: 8px; }
.ip-preview__note { color: var(--muted); }
.ip-preview__form { margin: 0; }
.ip-preview__stop { min-height: 44px; }

/* ------------------------------------------------------------ main + page head */
.c-main--portal {
  max-width: var(--shell-max); margin: 0 auto; box-sizing: border-box; gap: clamp(36px, 5cqi, 56px);
}
.c-main--portal .c-head { gap: 12px; }
.c-main--portal .c-title-row__h1 {
  font-size: clamp(36px, 4.8cqi, 52px); line-height: 1.08; max-width: 20em; text-wrap: balance;
}
.ip-head__label {    /* mono section label, drawn above the h1 */
  order: -1; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.ip-head__sub { margin: 0; font-size: 18px; color: var(--muted); max-width: 44em; text-wrap: pretty; }
.ip-head__notice { margin-top: 12px; max-width: 56em; }
.ip-link {           /* "All figures →", "Go to your dashboard →" */
  font-size: 16px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center;
  align-self: flex-start;
}
.ip-back { font-size: 15px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.ip-caption { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* Split layout (access denied, step-up): 1px ink rule, lead column + form column. */
.c-main--split {
  flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 28px 48px;
  padding-top: clamp(40px, 7cqi, 88px);
}
.c-main--split::before {
  content: ""; flex: 1 0 100%; border-top: 1px solid var(--ink); margin-bottom: -4px;   /* 24px to the columns */
}
.c-main--split .c-head { flex: 1 1 320px; min-width: 0; gap: 16px; }
.c-main--split .c-title-row__h1 { font-size: clamp(34px, 4.4cqi, 44px); line-height: 1.1; }
.ip-split { display: flex; flex-wrap: wrap; gap: 28px 48px; border-top: 1px solid var(--ink); padding-top: 24px; }
.ip-split__lead { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ip-split__side { flex: 1 1 360px; max-width: 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ip-split__text { margin: 0; text-wrap: pretty; }
.ip-split__h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.6cqi, 40px);
  line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance;
}
.ip-split__sub { margin: 0; color: var(--muted); max-width: 30em; text-wrap: pretty; }

/* ------------------------------------------------------------- KPI grid (.c-summary pattern) */
.ip-kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 22cqi, 260px), 1fr));
  column-gap: 24px; border-top: 2px solid var(--ink);
}
.ip-kpi { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); min-width: 0; display: flex; flex-direction: column; }
.ip-kpi__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.ip-kpi__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(20px, 2.4cqi, 26px);
  line-height: 1.3; margin-top: 6px; white-space: nowrap;
}
.ip-kpi__value--none { color: var(--muted); }
.ip-kpi__last { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
.ip-kpi__note { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.ip-kpi__stale {     /* hollow square + "Not updated since …" */
  display: flex; align-items: flex-start; gap: 7px; margin-top: 6px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: var(--ink);
}
.ip-kpi__stale::before {
  content: ""; flex: 0 0 7px; height: 7px; margin-top: 4px; box-sizing: border-box;
  border: 1px solid var(--ink); display: block;
}
.ip-kpi__head { position: relative; display: flex; align-items: center; gap: 6px; }
.ip-kpi__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-top: 6px; }
.ip-kpi__row .ip-kpi__value { margin-top: 0; }
.ip-kpi__change { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; cursor: help; }
.ip-kpi__change--neg { color: var(--negative); }
.ip-help {   /* (i) next to a KPI label; its text opens on hover, focus or tap */
  flex: 0 0 auto; width: 15px; height: 15px; padding: 0; border: 1px solid var(--tag-border); border-radius: 50%;
  background: none; color: var(--muted); font-family: var(--font-mono); font-size: 10px; line-height: 13px;
  text-align: center; cursor: help;
}
.ip-help:hover, .ip-help[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.ip-help__pop {
  display: none; position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: min(300px, 80vw);
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--ink); border-radius: 2px;
  font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.ip-help:hover + .ip-help__pop, .ip-help:focus-visible + .ip-help__pop,
.ip-help[aria-expanded="true"] + .ip-help__pop { display: block; }
.ip-spark { position: relative; height: 32px; margin-top: 14px; cursor: crosshair; touch-action: pan-y; }
.ip-spark:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ip-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ip-spark__bar { fill: var(--tag-border); shape-rendering: crispEdges; }
.ip-spark__bar--neg { fill: var(--negative); }
.ip-spark__bar--now { fill: var(--ink); }
.ip-spark__bar--hot { fill: var(--ink-2); }
/* running total: --muted at .14 reads in both themes (handoff PerformanceMonthDaily, 2026-11-01: the old
 * --tag-border fill was lost on the dark page) */
.ip-spark__area { fill: var(--muted); fill-opacity: .14; stroke: var(--muted); stroke-opacity: .6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ip-spark__zero { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.ip-spark__tip {
  position: absolute; bottom: calc(100% + 6px); z-index: 4; white-space: nowrap;
  padding: 4px 8px; background: var(--btn-bg); color: var(--btn-fg); border-radius: 2px;
  font-family: var(--font-mono); font-size: 12px; pointer-events: none;
}
.ip-spark__axis {
  display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); margin-top: 4px;
}
/* ------------------------------------------------------------- CSJ9 month, day by day (handoff PerformanceMonthDaily.dc.html) */
.ip-md { grid-column: 1 / -1; }
.ip-md__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ip-md__total { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ip-md__total .ip-kpi__row { margin-top: 0; }
.ip-md__suffix { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ip-md__chart { position: relative; height: 120px; margin-top: 18px; cursor: crosshair; touch-action: pan-y; }
.ip-md__chart:focus { outline: none; }
.ip-md__chart:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ip-md__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ip-md__zero { position: absolute; left: 0; height: 1px; background: var(--muted); }
.ip-md__bar { position: absolute; background: var(--tag-border); }
.ip-md__bar--pos { min-height: 1.5px; }
.ip-md__bar--neg { background: var(--negative); min-height: 1.5px; margin-top: 1px; }
.ip-md__bar--flat { height: 3px; margin-top: -1px; background: var(--ink-2); }
.ip-md__bar--fut { height: 1px; }
.ip-md__bar--now { background: var(--ink); }
.ip-md__bar--hot:not(.ip-md__bar--now) { background: var(--ink-2); }
.ip-md__axis {
  position: relative; height: 16px; margin-top: 5px; font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.ip-md__axis span { position: absolute; top: 0; transform: translateX(-50%); }
@media (max-width: 599.98px) {
  .ip-md__head { flex-direction: column; gap: 0; }
  .ip-md__total { align-items: flex-start; text-align: left; margin-top: 6px; }
  .ip-md__chart { height: 96px; }
  .ip-md__minor { display: none; }
}
/* ------------------------------------------------------------- commit heatmap (handoff OperationsHeatmap.dc.html)
 * Green ramp chosen in review (2026-10-29): a deliberate exception to "lime only on wordmark / focus / links". */
.ip-heat {
  --hm-0: var(--rule);
  --hm-1: color-mix(in oklch, var(--link) 28%, var(--rule));
  --hm-2: color-mix(in oklch, var(--link) 52%, var(--rule));
  --hm-3: color-mix(in oklch, var(--link) 76%, var(--rule));
  --hm-4: var(--link);
  display: flex; flex-direction: column; gap: 10px; width: max-content; max-width: 100%;
  margin: 24px 0 8px;
}
.ip-heat[data-ramp="ink"] { --hm-1: var(--tag-border); --hm-2: var(--muted); --hm-3: var(--ink-2); --hm-4: var(--ink); }
.ip-heat__grid { display: grid; grid-template-columns: 28px max-content; column-gap: 6px; row-gap: 6px; }
.ip-heat__months { display: grid; grid-template-columns: repeat(var(--weeks), 12px); column-gap: 3px; }
.ip-heat__months span, .ip-heat__wd span, .ip-heat__legend {
  font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--muted); white-space: nowrap;
}
.ip-heat__wd { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); row-gap: 3px; align-items: center; }
.ip-heat__days {
  display: grid; grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; grid-auto-flow: column; gap: 3px;
  position: relative; cursor: crosshair; touch-action: pan-y; border-radius: 2px;
}
.ip-heat__days:focus { outline: none; }
.ip-heat__days:focus-visible { box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-mid), 0 0 0 7px var(--lime); }
.ip-heat__day { display: block; width: 12px; height: 12px; border-radius: 2px; background: var(--hm-0); }
.ip-heat__day--1 { background: var(--hm-1); }
.ip-heat__day--2 { background: var(--hm-2); }
.ip-heat__day--3 { background: var(--hm-3); }
.ip-heat__day--4 { background: var(--hm-4); }
.ip-heat__day--future { background: transparent; }
.ip-heat__day--on { outline: 1px solid var(--ink); outline-offset: 1px; }
.ip-heat__tip {
  position: absolute; z-index: 4; white-space: nowrap; padding: 4px 8px; background: var(--btn-bg); color: var(--btn-fg);
  border-radius: 2px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; pointer-events: none;
  transform: translate(-50%, calc(-100% - 6px));
}
.ip-heat__tip--start { transform: translate(-10px, calc(-100% - 6px)); }
.ip-heat__tip--end { transform: translate(calc(-100% + 10px), calc(-100% - 6px)); }
.ip-heat__legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding-left: 34px; line-height: 1.4; }
.ip-heat__scale { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ip-heat__scale .ip-heat__day { margin: 0 -3px 0 0; }
.ip-heat__scale .ip-heat__day:last-of-type { margin-right: 0; }
.ip-heat--narrow { display: none; }
@media (max-width: 599px) {
  .ip-heat--wide { display: none; }
  .ip-heat--narrow { display: flex; width: 100%; }
  .ip-heat--narrow .ip-heat__grid { grid-template-columns: 28px minmax(0, 1fr); }
  .ip-heat--narrow .ip-heat__months { grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); }
  .ip-heat--narrow .ip-heat__days {
    grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-columns: auto;
  }
  .ip-heat--narrow .ip-heat__days .ip-heat__day { width: auto; height: auto; aspect-ratio: 1; }
  .ip-heat--narrow .ip-heat__scale .ip-heat__day { width: 10px; height: 10px; }
  .ip-heat--narrow .ip-heat__legend { gap: 6px 16px; }
}

.ip-block-foot { margin: 12px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ip-block-sub { margin: 6px 0 0; font-size: 16px; color: var(--muted); max-width: 46em; text-wrap: pretty; }
.ip-block-sub + .ip-kpis { margin-top: 20px; }

/* ------------------------------------------------------------- Level 2 badge (CSS lock) */
.ip-l2 { align-items: center; gap: 6px; padding: 1px 6px; white-space: nowrap; }   /* with .c-tag */
.ip-lock { position: relative; width: 8px; height: 10px; display: inline-block; flex: 0 0 8px; color: inherit; }
.ip-lock::before {   /* shackle */
  content: ""; position: absolute; left: 1px; top: 0; width: 6px; height: 6px; box-sizing: border-box;
  border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0;
}
.ip-lock::after {    /* body */
  content: ""; position: absolute; left: 0; bottom: 0; width: 8px; height: 6px;
  background: currentColor; border-radius: 1px;
}

/* ------------------------------------------------------------- filter row (.c-range buttons) */
.ip-filters { display: flex; flex-direction: column; gap: 2px; }
.ip-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.ip-filter__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); min-width: 76px;
}
.ip-filter .c-range { flex-wrap: wrap; }
.ip-filter .c-range__btn { white-space: nowrap; }

/* ------------------------------------------------------------- data tables (.c-table) */
.c-table--docs { --c-cols: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, .6fr) 92px; }
.c-table--ops  { --c-cols: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) 64px 64px; }
.ip-table .c-table__row { font-family: var(--font-body); }
.ip-table .ip-num { font-family: var(--font-mono); font-size: 14px; }
.ip-table__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.ip-table__title a, .ip-table__title a:hover { color: var(--ink); text-decoration: none; text-wrap: pretty; }
.ip-table__soft { color: var(--muted); font-size: 15px; }
.ip-table__action { font-size: 15px; font-weight: 500; justify-self: end; min-height: 44px; display: inline-flex; align-items: center; }
.ip-stack { display: none; border-top: 2px solid var(--ink); }
.ip-stack__row {
  padding: 12px 0; border-bottom: 1px solid var(--rule); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start;
}
.ip-stack__meta {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
@media (max-width: 599.98px) {
  .ip-table { display: none; }
  .ip-stack { display: block; }
}

/* ------------------------------------------------------------- progress bar */
.ip-progress { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 10px; }
.ip-progress__track { height: 4px; background: var(--rule); display: block; }
.ip-progress__fill { height: 4px; background: var(--ink); display: block; }
.ip-progress__pct { font-family: var(--font-mono); font-size: 14px; text-align: right; }

/* ------------------------------------------------------------- code input
 * Six 48×56 boxes drawn over one inputmode="numeric" autocomplete="one-time-code" input.
 * Without JS the input is a plain 6-digit field and the boxes stay hidden; portal.js adds .ip-code--js. */
.ip-code { position: relative; display: inline-flex; max-width: 100%; }
.ip-code__input { width: 12em; max-width: 100%; letter-spacing: 0.2em; }
.ip-code__boxes { display: none; gap: 8px; }
.ip-code__box {
  width: 48px; height: 56px; box-sizing: border-box; border: 1px solid var(--field-border); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 24px;
  background: var(--bg); color: var(--ink);
}
.ip-code--js .ip-code__boxes { display: flex; }
.ip-code--js .ip-code__input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0;
  font-size: 16px; caret-color: transparent; color: transparent; background: transparent;
}
.c-root .ip-code--js .ip-code__input:focus-visible { box-shadow: none; }   /* the active box carries the ring */
.ip-code--js:focus-within .ip-code__box[data-active] {
  box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-mid), 0 0 0 7px var(--lime);
}
.ip-code--error .ip-code__box { border-color: var(--error); }
.ip-code__error { font-size: 15px; color: var(--error); }
@media (max-width: 389.98px) {   /* six boxes + gaps need 328px: shrink the gap, then the boxes */
  .ip-code__boxes { gap: 4px; }
  .ip-code__box { width: 44px; }
}

/* ------------------------------------------------------------- step-up form */
.ip-stepup__form { display: flex; flex-direction: column; gap: 22px; }
.ip-stepup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ip-stepup__caption { margin: 0; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------- empty block (.c-empty, no top gap) */
.ip-empty { margin: 0; }

/* ------------------------------------------------------------- operating manual */
.ip-manual { display: grid; grid-template-columns: clamp(220px, 22cqi, 272px) minmax(0, 1fr); gap: clamp(32px, 5cqi, 72px); align-items: start; }
.ip-manual__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ip-tree { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: 8px; }
.ip-tree__section {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px;
  padding: 2px 0; background: transparent; border: 0; font: inherit; font-size: 15px; line-height: 1.35;
  color: var(--ink); cursor: pointer; text-align: left;
}
.ip-tree__arrow { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ip-tree__children { display: flex; flex-direction: column; padding-left: 14px; margin: 0 0 6px 2px; border-left: 1px solid var(--rule); }
.ip-tree__page, .ip-tree__page:hover {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 0; font-size: 15px;
  line-height: 1.35; color: var(--muted); text-decoration: none;
}
.ip-tree__page[aria-current="page"] { color: var(--ink); font-weight: 500; }
.ip-tree__page[aria-current="page"]::before { content: ""; width: 6px; height: 6px; background: var(--ink); flex: 0 0 6px; display: block; }
.ip-hit { color: var(--ink); background: var(--chart-fill); box-shadow: inset 0 -2px 0 var(--lime); padding: 0 2px; }
.ip-doc { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 72ch; }
.ip-doc__crumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.ip-doc__h1 {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.6cqi, 48px);
  line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance;
}
.ip-doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
/* rendered markdown */
.ip-md { display: flex; flex-direction: column; gap: 18px; }
.ip-md > * { margin: 0; }
.ip-md p { font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.ip-md h2 { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; }
.ip-md h3 { margin-top: 6px; font-size: 18px; font-weight: 500; }
.ip-md ul, .ip-md ol { padding-left: 22px; font-size: 17px; line-height: 1.6; }
.ip-md li { padding-left: 4px; margin-top: 6px; }
.ip-md table { border-collapse: collapse; width: 100%; }
.ip-md th {
  text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--tag-border); font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400;
}
.ip-md td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; vertical-align: top; }
.ip-md code { font-family: var(--font-mono); font-size: 14px; background: var(--panel); padding: 1px 5px; border-radius: 2px; }
.ip-md pre {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.65; background: var(--panel);
  border-top: 1px solid var(--rule); padding: 14px 16px; overflow-x: auto; white-space: pre;
}
.ip-md pre code { background: transparent; padding: 0; }
.ip-callout { display: flex; flex-direction: column; gap: 4px; }   /* with .c-notice; --important = --negative rule */
.ip-callout--important { border-top-color: var(--negative); }
.ip-callout__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.ip-callout p { margin: 0; font-size: 16px; line-height: 1.6; }

/* phone index bar + drawer over the scrim */
.ip-drawer-bar {
  display: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px;
  background: var(--panel); border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; width: 100%;
}
.ip-drawer-bar__lead { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ip-drawer-bar__current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.ip-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 41; width: 86%; box-sizing: border-box;
  background: var(--bg); border-right: 1px solid var(--rule); padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
}
.ip-scrim[hidden], .ip-drawer[hidden] { display: none; }
.ip-drawer__head { display: flex; justify-content: space-between; align-items: center; }
.ip-drawer__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.ip-drawer__close {
  background: transparent; border: 0; min-height: 44px; padding: 0; font: inherit; font-size: 15px;
  font-weight: 500; color: var(--link); cursor: pointer;
}
@media (max-width: 599.98px) {
  .ip-manual { display: flex; flex-direction: column; gap: 24px; }   /* bar / drawer rules: Manual (Task 8) block */
}

/* ------------------------------------------------------------- Overview (Task 4)
 * Dashboard tiles A-D: a 2-up grid that drops to 1 column on narrow screens (and always on phone). */
.ip-kpi__value--neg { color: var(--negative); }
.ip-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(40px, 6cqi, 56px) 56px;
}
.ip-tile { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ip-tile__more { font-size: 15px; font-weight: 500; white-space: nowrap; }
.ip-tile__sub { margin: 0; font-size: 15px; color: var(--muted); }
.ip-tile__company { display: flex; flex-direction: column; gap: 8px; }
.ip-tile__company-name { font-size: 16px; font-weight: 500; }
/* three compact figures in a row (label, value, "Last month …") */
.ip-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; border-top: 2px solid var(--ink); }
.ip-mini__cell { padding: 12px 0 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.ip-mini__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ip-mini__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(17px, 2cqi, 22px);
  line-height: 1.3; margin-top: 6px; white-space: nowrap;
}
.ip-mini__value.ip-kpi__value--none { color: var(--muted); }
.ip-mini__value.ip-kpi__value--neg { color: var(--negative); }
.ip-mini__last { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
/* project rows: name + "company · due", 88px bar, % */
.ip-plist { display: flex; flex-direction: column; }
.ip-plist__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 88px 44px; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.ip-plist__main { min-width: 0; }
.ip-plist__name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-plist__meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
/* document / manual rows: title + date, then meta line + Level 2 badge */
.ip-rows { border-top: 2px solid var(--ink); }
.ip-row, .ip-row:hover {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink);
}
.ip-row:hover .ip-row__title { text-decoration: underline; text-underline-offset: 4px; }
.ip-row__title { font-size: 16px; min-width: 0; text-wrap: pretty; }
.ip-row__date { font-family: var(--font-mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.ip-row__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
@media (max-width: 599.98px) {
  .ip-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- Performance (Task 5) */
/* One .ip-block per company: ink hairline + serif h2, subtitle, KPI grid (.ip-kpis above), mono footer. */
.ip-block { display: flex; flex-direction: column; }
.ip-block__head { border-top: 1px solid var(--ink); padding-top: 14px; }
/* collapsible section heads (GTP 2026-10-29): the whole title is the button; a chevron turns when closed */
.ip-fold {
  display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.ip-fold:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-mid), 0 0 0 7px var(--lime); border-radius: 2px; }
.ip-fold__icon {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: -4px; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease;
}
.ip-fold:hover .ip-fold__icon { border-color: var(--ink); }
.ip-fold[aria-expanded="false"] .ip-fold__icon { transform: rotate(-45deg); margin-top: 0; }
.ip-block__body[hidden] { display: none; }
.ip-ops__goal-head { align-items: flex-start; }
.ip-ops__goal-head .ip-ops__goal-name { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; text-transform: none; }
.ip-ops__goal-head .ip-help { margin-top: 3px; }
.ip-help__pop .ip-ops__goal-target, .ip-help__pop .ip-ops__goal-due { display: block; color: var(--ink); }
.ip-help__pop .ip-ops__goal-due { margin-top: 6px; color: var(--muted); }
.ip-block__h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3cqi, 30px); line-height: 1.2;
}
.ip-perf-notice { max-width: 56em; }

/* ------------------------------------------------------------- Operations (Task 6)
 * Reuses .c-table, .c-range, .c-tag, .c-empty, .ip-progress*. Desktop = one 8-column grid; below 600px each row
 * becomes a stacked block: name + status, company · due, goal, progress, tasks. */
.ip-ops .ip-block__body { display: flex; flex-direction: column; gap: 16px; }
.ip-ops .ip-block-sub { margin-bottom: 4px; }
.ip-ops__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.ip-ops__filter-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ip-ops__table { --c-cols: minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.75fr) minmax(0, 0.75fr); }
.ip-ops__table .c-table__row { font-size: 16px; }
.ip-ops__name { min-width: 0; font-family: var(--font-body); text-wrap: pretty; }
.ip-ops__co { font-family: var(--font-body); font-size: 15px; color: var(--muted); }
.ip-ops__total .ip-ops__co { font-weight: 400; }
.ip-ops__status { display: flex; }
.ip-ops__goal { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; text-wrap: pretty; }
.ip-ops__goal-target { font-size: 13px; color: var(--muted); white-space: pre-line; }
.ip-ops__goal-due { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ip-ops__status .c-tag { white-space: nowrap; }
.ip-ops__due { font-size: 14px; }
.ip-ops__n { font-size: 15px; }
.ip-ops__n--prev { color: var(--muted); }
.ip-ops__total .ip-ops__n--prev { color: inherit; }
.ip-ops__lbl { display: none; }
@media (max-width: 599px) {
  .ip-ops__table { border-top: 2px solid var(--ink); }
  .ip-ops__table .c-table__head { display: none; }
  .ip-ops__table .c-table__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 0; }
  .ip-ops__table .c-table__row::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
  .ip-ops__name { order: 1; flex: 1 1 0; font-size: 16px; font-weight: 500; }
  .ip-ops__status { order: 2; }
  .ip-ops__co, .ip-ops__due { font-family: var(--font-mono); font-size: 12px; }
  .ip-ops__co { order: 4; }
  .ip-ops__due { order: 5; color: var(--muted); }
  .ip-ops__due::before { content: "· "; }
  .ip-ops__due .ip-ops__lbl { display: inline; }
  .ip-ops__goal { order: 6; flex: 0 0 100%; }
  .ip-ops__progress { order: 6; flex: 0 0 100%; }
  .ip-ops__n { order: 7; text-align: left; font-size: 13px; }
  .ip-ops__n--prev { order: 8; }
  .ip-ops__lbl { display: inline; }
  .ip-ops__blank { display: none; }
  .ip-ops__total { border-bottom: 2px solid var(--ink); padding: 14px 0; }
  .ip-ops__total .ip-ops__n { color: inherit; }
  .ip-ops__total .ip-ops__n--prev { color: var(--muted); }
  .ip-ops__total .ip-ops__co { order: 2; }
  .ip-ops__total::after { display: none; }
}

/* ------------------------------------------------------------- Documents (Task 7)
 * List reuses .ip-filters/.ip-filter, .c-table--docs, .ip-table (hidden < 600px) and .ip-stack (title + Download,
 * meta line with the Level 2 badge). Detail: tags in the head, facts row, description, actions. */
.ip-docs { display: flex; flex-direction: column; gap: 16px; }
.ip-docs .c-table__head .num { text-align: right; }
.ip-stack__title { color: var(--ink); text-decoration: none; font-size: 16px; text-wrap: pretty; }
.ip-stack__action { margin-top: -10px; }
.ip-doc__tags { display: flex; gap: 8px; flex-wrap: wrap; order: -1; }
.ip-doc__back { align-self: flex-start; margin: -12px 0 -20px; }
.ip-doc__facts {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 22cqi, 260px), 1fr));
  gap: 16px; border-top: 2px solid var(--ink); padding-top: 14px;
}
.ip-doc__facts dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ip-doc__facts dd { margin: 4px 0 0; font-family: var(--font-mono); font-size: 16px; }
.ip-doc__body { display: flex; flex-direction: column; gap: 16px; max-width: 44em; }
.ip-doc__h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.ip-doc__text { margin: 0; text-wrap: pretty; }
.ip-doc__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------- Manual (Task 8)
 * Sidebar search, <details> tree, results list, phone drawer behaviour. Base manual rules are above. */
.ip-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ip-search { margin: 0; }
.ip-tree__group > summary { list-style: none; }
.ip-tree__group > summary::-webkit-details-marker { display: none; }
.ip-tree__group:not([open]) > summary .ip-tree__arrow { transform: rotate(-90deg); }
.ip-tree__section .ip-lock { margin-left: auto; margin-right: 6px; }
.ip-tree__page .ip-lock { margin-left: auto; }
.ip-tree__none { margin: 0; font-size: 15px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; }
.ip-results { border-top: 2px solid var(--ink); }
.ip-results--none { padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 16px; }
.ip-result { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.ip-result__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ip-result__title { font-size: 17px; font-weight: 500; }
.ip-result__path { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ip-result__snippet { font-size: 15px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.ip-md { overflow-wrap: anywhere; }
/* the bar and drawer only exist for phone + JS; without JS the tree stays above the page */
@media (max-width: 599.98px) {
  .ip-manual > .ip-manual__side { display: flex; }
  .ip-drawer-bar { display: none; }
  .ip-js .ip-manual > .ip-manual__side { display: none; }
  .ip-js .ip-drawer-bar { display: flex; }
}
@media (min-width: 600px) {
  .ip-scrim, .ip-drawer { display: none !important; }
}
html.ip-drawer-open { overflow: hidden; }

/* ------------------------------------------------------------- Auth (Task 9)
 * Signed-out shell (portal/auth_base.html: sign in, expired, 2FA challenge, enrolment) and the step-up
 * extras. Auth.dc.html / States.dc.html "expired" / Documents.dc.html "Level 2 step-up". The split layout
 * (.c-main--split, .ip-split__side) is the access-denied one above. */
.ip-auth-lang { gap: 6px; }
.ip-auth-lang__on { color: var(--on-dark); }
.ip-auth__side { gap: 22px; }
.ip-auth__form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.ip-auth__actions, .ip-auth__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ip-auth__actions { padding-top: 4px; }
.ip-auth__tools { gap: 12px; }
.ip-auth__tool { min-height: 44px; padding: 0 18px; }
.ip-auth__hint { font-size: 14px; color: var(--muted); }
.ip-auth__whoami { margin: 0; font-size: 14px; color: var(--muted); }
.ip-auth__linkbtn {   /* "Not you?" — a logout POST drawn as a link */
  background: transparent; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; min-height: 24px;
}
.ip-auth__linkbtn:hover { color: var(--link-hover); }
.ip-auth__continue { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.c-btn--primary:disabled, .c-btn--primary:disabled:hover { background: var(--rule); color: var(--muted); cursor: not-allowed; }

/* enrolment: "Step n of 3" label + three 3px bars */
.ip-steps { order: -1; display: flex; flex-direction: column; gap: 10px; }
.ip-steps__label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.ip-steps__bars { max-width: 320px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ip-steps__bar { height: 3px; background: var(--rule); display: block; }
.ip-steps__bar--on { background: var(--ink); }

/* step 1: the QR code (on a white plate in both themes so phones can read it) + the key as text */
.ip-qr {
  width: 184px; height: 184px; box-sizing: border-box; border: 1px solid var(--tag-border);
  background: var(--on-dark); padding: 4px;
}
.ip-qr svg { display: block; width: 100%; height: 100%; }
.ip-key {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border-top: 2px solid var(--ink); padding: 12px 16px;
}
.ip-key__text { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.ip-key__copy {
  background: transparent; border: 0; padding: 0; min-height: 44px; font: inherit; font-size: 15px;
  font-weight: 500; color: var(--link); cursor: pointer; white-space: nowrap;
}

/* step 3: the ten recovery codes, the "I've saved these" box */
.ip-codes { background: var(--panel); border-top: 2px solid var(--ink); padding: 16px; }
.ip-codes__list {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px; font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums;
}
.ip-codes__item { display: flex; gap: 10px; }
.ip-codes__n { color: var(--muted); }
.ip-check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; cursor: pointer; min-height: 44px; }
.ip-check__box {
  appearance: none; -webkit-appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0;
  box-sizing: border-box; border: 1px solid var(--field-border); border-radius: 2px; background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ip-check__box:checked { background: var(--ink); border-color: var(--ink); }
.ip-check__box:checked::after { content: "✓"; color: var(--bg); font-size: 15px; line-height: 1; }

/* step-up: back link and badge sit in the lead column above the h1 */
.ip-stepup__back { order: -3; margin-bottom: -4px; }
.ip-stepup__badge { order: -2; }