/* Pathway view (v2 shell). Layout helpers only: components are ds.css classes, colours are tokens.
   No literal colour, size, radius or shadow lives here (npm run lint:theme public/portal/pathway.css).
   Chart internals: CF.chart (cashflow.js, owned by lane L5) draws .cf-chart / .cf-legend / .cf-tip with
   --cf-* variables; they are bound to the ds tokens on .pw-page so charts follow light and dark. */

.pw-page { min-width: 0; }

/* ---- CF.chart internals, bound to ds tokens ---------------------------------------------------- */
.pw-page {
  --cf-surface: var(--bg-elevated);
  --cf-surface-2: var(--bg-sunken);
  --cf-ink: var(--text);
  --cf-ink-2: var(--text-muted);
  --cf-ink-3: var(--text-subtle);
  --cf-grid: var(--border);
  --cf-axis: var(--border-strong);
  --cf-border: var(--border-strong);
  --cf-accent: var(--chart-1);
  --cf-grey-1: var(--chart-g1);
  --cf-grey-2: var(--chart-g2);
  --cf-grey-3: var(--chart-g3);
  --cf-pos: var(--positive);
  --cf-neg: var(--danger);
}
.pw-page .cf-chart { position: relative; width: 100%; }
.pw-page .cf-chart svg { display: block; width: 100%; overflow: visible; }
.pw-page .cf-chart text { font-family: inherit; font-size: var(--text-xs); fill: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pw-page .cf-chart text.lbl { fill: var(--text); font-weight: var(--weight-semi); }
.pw-page .cf-chart text.unit { font-size: var(--text-xs); }
.pw-page .cf-chart .grid { stroke: var(--border); stroke-width: 1; }
.pw-page .cf-chart .zero { stroke: var(--border-strong); stroke-width: 1.5; }
.pw-page .cf-chart .hit { fill: transparent; }
.pw-page .cf-chart .cross { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.pw-page .cf-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.pw-page .cf-legend i { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-1); border-radius: 2px; vertical-align: -1px; }
.pw-page .cf-legend i.line { width: 14px; height: 3px; vertical-align: 3px; }
.pw-page .cf-source { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-subtle); }
.pw-page .cf-tip {
  position: absolute; z-index: var(--z-dropdown); display: none; pointer-events: none;
  min-width: 150px; max-width: 260px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text); box-shadow: var(--elev-2); font-size: var(--text-sm);
}
.pw-page .cf-tip b { display: block; margin-bottom: var(--space-1); font-weight: var(--weight-semi); }
.pw-page .cf-tip .row { display: flex; justify-content: space-between; gap: var(--space-3); line-height: var(--leading-normal); font-variant-numeric: tabular-nums; }
.pw-page .cf-tip .row i { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-1); border-radius: 2px; }
.pw-page .cf-tip .tot { margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px solid var(--border); font-weight: var(--weight-semi); }

/* ---- Page frame -------------------------------------------------------------------------------- */
.pw-page .ds-statrow > div > small { display: block; margin-top: 2px; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-subtle); }
.pw-page .ds-statrow dd { overflow-wrap: anywhere; }

.pw-settings { padding: 0 0 var(--space-2); }
.pw-ctl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); align-items: end; }
@media (min-width: 768px) { .pw-ctl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-4); } }
.pw-ctl-row .ds-seg { display: flex; width: 100%; }
.pw-ctl-row .ds-seg-item { flex: 1 1 0; padding: 0 var(--space-2); }
.pw-ents { margin: 0 0 var(--space-2); }
.pw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (min-width: 768px) { .pw-chips .ds-chip { min-height: var(--control-h-sm); } }
.pw-saved { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
@media (min-width: 768px) { .pw-saved { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pw-saved .pw-psave { grid-column: 1 / -1; margin-top: 0; } }
.pw-inline { display: flex; gap: var(--space-2); align-items: stretch; }
.pw-inline .ds-select, .pw-inline .ds-input { flex: 1 1 auto; min-width: 0; width: auto; }
.pw-inline .ds-btn { flex: none; }
.pw-delp-ask { align-items: center; flex-wrap: wrap; }
.pw-delp-q { flex: 1 1 14rem; font-size: var(--text-sm); color: var(--text); }

.pw-record { margin-top: var(--space-3); }
.pw-chips .ds-chip[aria-pressed="true"] .ds-chip-count { color: var(--text-muted); }
.pw-main { min-width: 0; }
.pw-main .ds-section:first-child { margin-top: 0; }
.pw-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.pw-chip { cursor: default; white-space: normal; max-width: 100%; line-height: var(--leading-snug); }
.pw-chip:hover { background: transparent; color: var(--text-muted); }
.pw-chip b { margin-right: var(--space-1); color: var(--text); font-weight: var(--weight-bold); }
.pw-fig { margin-top: var(--space-5); }
.pw-fig .cf-chart { margin-top: var(--space-2); }
.pw-table-toggle { margin-top: var(--space-3); }
.pw-table-toggle summary { cursor: pointer; display: inline-flex; align-items: center; min-height: var(--control-h-sm); }
.pw-table-toggle .ds-table-scroll { margin-top: var(--space-2); max-height: 420px; overflow-y: auto; }
.pw-below { margin-top: var(--space-6); }
.pw-assets-head { margin-top: var(--space-5); }
.pw-assets-note { margin: 0 0 var(--space-3); }
.pw-subsec { margin-top: var(--space-6); }
.pw-src { margin-top: var(--space-6); }

/* ---- Side panel: levers ------------------------------------------------------------------------ */
.pw-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pw-side-head .ds-section-title { margin: 0; }
.pw-side-hint { margin: var(--space-1) 0 var(--space-3); }
@media (min-width: 1024px) {
  .pw-side {
    position: sticky;
    top: calc(var(--nav-height, 100px) + var(--space-3));
    align-self: start;
    max-height: calc(100dvh - var(--nav-height, 100px) - var(--space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px var(--space-2) 6rem 2px;   /* bottom padding = about one lever row, so the last row never sits under the fade */
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--space-2);
  }
  .pw-side .pw-group-btn, .pw-side .pw-lever { scroll-snap-align: start; }
  /* Edge fade while there is more below (pathway.js toggles .has-more). */
  .pw-side.has-more { mask-image: linear-gradient(to bottom, currentColor calc(100% - var(--space-7)), transparent); -webkit-mask-image: linear-gradient(to bottom, currentColor calc(100% - var(--space-7)), transparent); }
}
.pw-group-btn { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h-sm); padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.pw-group-btn:hover { color: var(--text); }
.pw-group-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-group-btn .pw-chev { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.pw-group-btn[aria-expanded="true"] .pw-chev { transform: rotate(90deg); }
.pw-group .ds-panel-sec-head { margin-bottom: 0; }
.pw-count { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-normal); letter-spacing: 0; text-transform: none; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

.pw-lever { position: relative; padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.pw-lever:last-child { border-bottom: 0; }
.pw-lever.is-excluded .pw-name { color: var(--text-subtle); }
.pw-lever.is-drag { background: rgba(var(--ink), 0.05); }
.pw-lever.is-over { box-shadow: inset 0 2px 0 var(--accent); }
.pw-l1 { display: flex; align-items: center; gap: var(--space-1); }
.pw-grip { flex: none; width: 14px; color: var(--text-subtle); font-size: var(--text-xs); letter-spacing: -2px; line-height: 1; cursor: grab; user-select: none; }
@media (pointer: coarse) { .pw-grip { display: none; } }
.pw-en {
  position: relative; display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0;
  min-height: var(--tap-min); cursor: pointer; font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--text);
}
/* The real checkbox covers the whole label (so it is a full-size target and keeps native a11y); the switch is drawn beside it. */
.pw-en input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pw-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: var(--radius-pill); background: rgba(var(--ink), 0.5); transition: background var(--dur-fast) var(--ease-out); }
.pw-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-elevated); transition: transform var(--dur-fast) var(--ease-out); }
.pw-en input:checked + .pw-sw { background: var(--text); }
.pw-en input:checked + .pw-sw::after { transform: translateX(14px); }
.pw-en input:focus-visible + .pw-sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-en input:disabled { cursor: not-allowed; }
.pw-en input:disabled + .pw-sw { background: rgba(var(--ink), 0.2); }
.pw-name { min-width: 0; line-height: var(--leading-tight); overflow-wrap: anywhere; }
.pw-arrows { display: flex; flex: none; }
@media (max-width: 1023px) { .pw-arrows .ds-iconbtn { width: var(--tap-min); height: var(--tap-min); } }

.pw-l2, .pw-l3, .pw-lever > .pw-more { margin-left: calc(14px + var(--space-1) + 34px + var(--space-2)); }
@media (pointer: coarse) { .pw-l2, .pw-l3, .pw-lever > .pw-more { margin-left: calc(34px + var(--space-1) + var(--space-2)); } }
.pw-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.pw-l2 .ds-select { flex: 0 0 9rem; width: 9rem; }
.pw-eff { font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-l3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-subtle); }
.pw-l3 .ds-status { font-size: var(--text-xs); white-space: normal; }
.pw-fixed { font-size: var(--text-xs); color: var(--text-subtle); }
.pw-basis { cursor: default; }
.pw-basis:hover { background: transparent; color: var(--text-subtle); }

.pw-more { margin-top: var(--space-1); }
.pw-more > summary { display: flex; align-items: center; min-height: var(--control-h-sm); cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--text-muted); }
.pw-more > summary:hover { color: var(--text); }
.pw-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); margin-top: var(--space-2); }
.pw-edit .ds-field { margin-bottom: var(--space-2); }
.pw-edit .pw-wide { grid-column: 1 / -1; }
.pw-edit-wide { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.pw-num { font-variant-numeric: tabular-nums; }
.pw-note { margin: var(--space-1) 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-muted); }
.pw-meta { margin: var(--space-1) 0; font-size: var(--text-xs); color: var(--text-subtle); }
.pw-del { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.pw-addbox { margin-top: 0; }

/* ---- Assets table ------------------------------------------------------------------------------ */
.pw-atable td { vertical-align: middle; }
.pw-atable td:first-child { min-width: 13rem; }
.pw-atable th { white-space: normal; vertical-align: bottom; }
.pw-atable td.ds-num .ds-inline { min-width: 5.5rem; width: 100%; justify-content: flex-end; }
.pw-atable th[aria-sort] { padding: 0 var(--space-3); }
/* Right-aligned numbers sit inside a .ds-inline (space-2 padding + 1px border); give every numeric header and cell the same inset so header text lines up with the digits. */
.pw-atable th.ds-num, .pw-atable td.ds-num { padding-right: calc(var(--space-3) + var(--space-2) + 1px); }
.pw-atable th[aria-sort] > button { padding: var(--space-2) 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: left; }
.pw-atable th.ds-num > button { text-align: right; }
.pw-atable th[aria-sort]:hover { color: var(--text); }
.pw-atable th[aria-sort="ascending"], .pw-atable th[aria-sort="descending"] { color: var(--text); }
.pw-atable th[aria-sort="ascending"] > button::after { content: " \2191"; }
.pw-atable th[aria-sort="descending"] > button::after { content: " \2193"; }
.pw-atable td.ds-num { font-size: var(--text-md); }
.pw-atable tr.ds-total td { border-top: 1px solid var(--hairline-strong); border-bottom: 0; font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; }
.pw-name-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pw-name-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-name-btn .pw-chev { flex: none; color: var(--text-subtle); transition: transform var(--dur-fast) var(--ease-out); }
.pw-name-btn[aria-expanded="true"] .pw-chev { transform: rotate(90deg); }
.pw-atable .ds-cell-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-left: calc(14px + var(--space-1)); }
.pw-detail td { background: rgba(var(--ink), 0.03); }
.pw-checkrow { margin-top: var(--space-3); }
.pw-ctl-row .pw-checkrow { grid-column: 1 / -1; }

/* ---- Phone: every target 44px, nothing wider than the screen ---------------------------------- */
/* Baseline bars are context: pale, so the pathway bars lead (chart rule 1). */
.pw-page #pw-ch-net rect[data-s^="Baseline"] { opacity: 0.5; }
.pw-page #pw-ch-net .cf-legend span:first-child i { opacity: 0.5; }

@media (max-width: 767px) {
  .pw-atable th[aria-sort] > button { min-width: var(--tap-min); }
  .pw-group-btn { min-height: var(--tap-min); }
  .pw-page .ds-btn, .pw-page .ds-btn-sm, .pw-page .ds-seg-item, .pw-page .ds-link { min-height: var(--tap-min); }
  .pw-page .ds-link { display: inline-flex; align-items: center; }
  .pw-more > summary, .pw-table-toggle summary { min-height: var(--tap-min); }
  .pw-atable th[aria-sort] > button, .pw-name-btn { min-height: var(--tap-min); }
  .pw-atable .ds-inline { min-height: var(--tap-min); }
  .pw-atable .ds-inline-input { min-height: var(--tap-min); }
  .pw-l2 .ds-select { flex: 1 1 8rem; width: auto; }
  .pw-inline { flex-wrap: wrap; }
  .pw-inline .ds-select, .pw-inline .ds-input { flex: 1 1 100%; }
}

/* One button size on this page (13px): keeps the page to the type scale's five sizes plus the shell's two. */
.pw-page .ds-btn { font-size: var(--text-sm); }
@media (max-width: 767px) { .pw-page .ds-seg-item { min-width: var(--tap-min); } }