:root{color-scheme:light;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: one column on a phone with the tabs at the thumb; two columns and top tabs from 900px.
   The interface is drawn in ink. Colour is kept for the four paths and for status, nothing else. */
:root {
  --bg: #f1f3f6; --surface: #ffffff; --sunken: #e9edf1; --line: #d2d9e0; --line-soft: #e4e8ed;
  --ink: #0f1720; --ink-2: #3f4b58; --ink-3: #5b6774; --inv: #ffffff;
  --p-a: #eb6834; --p-b: #2a78d6; --p-c: #eda100; --p-d: #1baf7a;
  --good: #0ca30c; --warn: #fab219; --crit: #d03b3b;
  --good-ink: #0a6b0a; --warn-ink: #7a5200; --crit-ink: #b22b2b;
  --good-bg: #e1f3e1; --warn-bg: #fdefc8; --crit-bg: #f8dddd; --quiet-bg: #e9edf1;
  --shade: rgba(8, 12, 16, 0.5);
  --font: "IBM Plex Sans", "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", Roboto, sans-serif;
  --font-tight: "IBM Plex Sans Condensed", "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 6px; --gut: 16px; --tabbar: 58px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1116; --surface: #161d24; --sunken: #212b35; --line: #313d49; --line-soft: #242e39;
    --ink: #e9eef3; --ink-2: #b6c1cc; --ink-3: #8d9aa7; --inv: #0c1116;
    --p-a: #d95926; --p-b: #3987e5; --p-c: #c98500; --p-d: #199e70;
    --good-ink: #5fd35f; --warn-ink: #fab219; --crit-ink: #ff8f8f;
    --good-bg: #12301a; --warn-bg: #3a2d08; --crit-bg: #3f1b1b; --quiet-bg: #212b35;
    --shade: rgba(0, 0, 0, 0.62);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1116; --surface: #161d24; --sunken: #212b35; --line: #313d49; --line-soft: #242e39;
  --ink: #e9eef3; --ink-2: #b6c1cc; --ink-3: #8d9aa7; --inv: #0c1116;
  --p-a: #d95926; --p-b: #3987e5; --p-c: #c98500; --p-d: #199e70;
  --good-ink: #5fd35f; --warn-ink: #fab219; --crit-ink: #ff8f8f;
  --good-bg: #12301a; --warn-bg: #3a2d08; --crit-bg: #3f1b1b; --quiet-bg: #212b35;
  --shade: rgba(0, 0, 0, 0.62);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--font); margin: 0; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { flex: none; display: block; }

/* ---- frame */
.app { min-height: 100%; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 20px); }
.top { background: var(--bg); }
.top-in { max-width: 1160px; margin: 0 auto; padding: 10px var(--gut) 6px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-name { font: 600 19px/1 var(--font-tight); letter-spacing: 0.01em; }
.brand-date { font: 400 12px/1 var(--font-mono); color: var(--ink-3); margin-left: 4px; white-space: nowrap; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sync { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12.5px; white-space: nowrap; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.sync[data-state="good"] .sync-dot { background: var(--good); }
.sync[data-state="warn"] .sync-dot { background: var(--warn); }
.sync[data-state="crit"] .sync-dot { background: var(--crit); }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); flex: none; }
.iconbtn:hover { background: var(--sunken); }
.view { max-width: 1160px; margin: 0 auto; padding-inline: var(--gut); padding-block: 6px 24px; }
.boot { max-width: 46ch; padding-block: 24px; display: grid; gap: 10px; }
.boot h1 { font: 600 24px/1.2 var(--font-tight); }
/* the screens before the app has started: set up, open with the passphrase, or use on this device only */
.app.is-boot .tabs, .app.is-boot .top-right, .app.is-boot .brand-date { display: none; }
.app.is-boot { padding-bottom: 32px; }
.boot-card { max-width: 460px; margin: 18px auto 0; gap: 14px; }
.boot-title { font: 600 22px/1.2 var(--font-tight); }
.boot-lead { color: var(--ink-2); }
.boot-pass { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.boot-pass strong { font: 500 15px/1.4 var(--font-mono); color: var(--ink); user-select: all; }
.field > .textlink { justify-self: start; font-size: 13px; color: var(--ink-2); }
.boot-card .btnrow { margin-top: 2px; }
.boot-card input[type="file"] { padding: 9px 10px; font-size: 14px; }

.tabs-top { display: none; }
.tabs-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tabbar); padding: 6px 2px; border: 0; background: transparent; color: var(--ink-3); font: 500 11px/1.15 var(--font); min-width: 0; }
.tab-ic { position: relative; display: grid; place-items: center; width: 46px; height: 28px; border-radius: 999px; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .tab-ic { background: var(--ink); color: var(--inv); }
.tab-label { white-space: nowrap; }
.tab-badge { position: absolute; top: -3px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--crit); color: #ffffff; font: 600 10px/16px var(--font); text-align: center; }

@media (min-width: 900px) {
  .app { padding-bottom: 32px; }
  .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; border-bottom: 1px solid var(--line); }
  .top-in { padding-block: 8px; }
  .tabs-bottom { display: none; }
  .tabs-top { display: flex; gap: 2px; margin-left: 20px; }
  .tabs-top .tab { flex-direction: row; gap: 7px; min-height: 40px; padding: 0 12px 0 6px; font-size: 14px; border-radius: 999px; }
  .tabs-top .tab-ic { width: 32px; height: 28px; }
  .tabs-top .tab:hover { background: var(--sunken); }
  .tabs-top .tab[aria-current="page"] { background: var(--ink); color: var(--inv); }
  .tabs-top .tab[aria-current="page"] .tab-ic { background: transparent; }
  .view { padding-block: 18px 32px; }
}

/* ---- type and small parts */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.num .unit { font-size: 0.74em; font-weight: 500; margin-left: 1px; color: var(--ink-2); }
.eyebrow { font: 500 12.5px/1.3 var(--font); color: var(--ink-3); }
.hint { font-size: 13px; color: var(--ink-3); }
.note { font-size: 14px; color: var(--ink-2); max-width: 68ch; }
.note-mine { border-left: 0; padding: 8px 10px; background: var(--sunken); border-radius: 4px; }
.strong { font-weight: 600; }
.empty { color: var(--ink-3); font-size: 14px; padding-block: 6px; max-width: 60ch; }
.kdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 6px; vertical-align: baseline; }
.kline { display: inline-block; width: 16px; height: 3px; border-radius: 2px; flex: none; }
.cellname { display: inline-flex; align-items: center; min-width: 0; }
.cellname .kdot { margin-right: 7px; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font: 500 12px/1.4 var(--font); white-space: nowrap; flex: none; background: var(--quiet-bg); color: var(--ink); }
.pill .ic { color: var(--ink-3); }
.pill-good { background: var(--good-bg); } .pill-good .ic { color: var(--good-ink); }
.pill-warn { background: var(--warn-bg); } .pill-warn .ic { color: var(--warn-ink); }
.pill-crit { background: var(--crit-bg); } .pill-crit .ic { color: var(--crit-ink); }
.tag { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: 4px; font: 500 12px/1.5 var(--font); color: var(--ink-2); white-space: nowrap; }
.tag-proposed { border-style: dashed; border-color: var(--ink-3); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: 500 14px/1.2 var(--font); text-decoration: none; }
.btn:hover { border-color: var(--ink-3); }
.btn-solid { background: var(--ink); color: var(--inv); border-color: var(--ink); }
.btn-solid:hover { border-color: var(--ink); opacity: 0.9; }
.btn-quiet { background: transparent; }
.btn-small { min-height: 30px; padding: 0 8px; font-size: 12.5px; }
.btn[data-armed] { border-color: var(--crit); color: var(--crit-ink); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.linkbtn { background: none; border: 0; padding: 6px 0; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.extlink { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; text-underline-offset: 3px; min-height: 40px; }

.seg { display: flex; padding: 3px; background: var(--sunken); border-radius: 6px; gap: 2px; max-width: 100%; }
.seg-btn { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); font: 500 13px/1.15 var(--font); }
.seg-btn[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

.chips { display: flex; gap: 8px; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 13px/1.2 var(--font); white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--inv); border-color: var(--ink); }

.search { position: relative; display: flex; align-items: center; }
.search .ic { position: absolute; left: 10px; color: var(--ink-3); pointer-events: none; }
.search-input { width: 100%; min-height: 42px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 16px; }
.input, .select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 16px; }
textarea.input { resize: vertical; line-height: 1.4; }
.field { display: grid; gap: 4px; min-width: 0; }
.field-label { font: 500 13px/1.3 var(--font); color: var(--ink-2); }
.field-hint { font-size: 12.5px; color: var(--ink-3); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.input[type="date"] { min-width: 0; max-width: 100%; }
.formerr { color: var(--crit-ink); font-size: 13.5px; font-weight: 500; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; min-height: 32px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.checks { display: grid; gap: 2px; max-height: 190px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; }
.radios { display: grid; gap: 6px; }
.radio { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; }
.radio input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ink); }
.radio-text { display: inline-flex; align-items: center; flex: 1; min-width: 0; font-weight: 500; }
.radio-num { font: 500 14px var(--font-tight); }
.radio:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; align-content: start; }
.fold::details-content { min-width: 0; }
.card-title { font: 600 15px/1.3 var(--font-tight); letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px; }
.card-count, .fold-count, .lgroup-count { font: 400 12.5px/1 var(--font-mono); color: var(--ink-3); }
.fold > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-sum { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.fold-sum .ic { margin-left: auto; color: var(--ink-3); transition: transform 0.15s; }
.fold[open] > .fold-sum .ic { transform: rotate(180deg); }
.linkrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 8px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; text-align: left; font-size: 14px; color: var(--ink); }
.linkrow .ic { color: var(--ink-3); }
.pagehead { display: grid; gap: 4px; margin-bottom: 14px; }
.pagehead-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.page-title { font: 600 25px/1.15 var(--font-tight); text-wrap: balance; }
.page-sub { color: var(--ink-2); font-size: 14px; max-width: 66ch; }
.colwrap { display: grid; gap: 14px; align-content: start; min-width: 0; }
.twocol { display: grid; gap: 14px; }
@media (min-width: 900px) { .twocol { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
@media (max-width: 899px) {
  .twocol-mix { display: flex; flex-direction: column; }
  .twocol-mix > .colwrap { display: contents; }
  .fo-1 { order: 1; } .fo-2 { order: 2; } .fo-3 { order: 3; } .fo-4 { order: 4; } .fo-5 { order: 5; } .fo-6 { order: 6; } .fo-7 { order: 7; }
}
.fold-inline { border-top: 1px solid var(--line-soft); }
.fold-inline > .fold-sum { min-height: 44px; }
.fold-label { font-weight: 500; font-size: 14px; }

/* ---- the four paths as bars */
.prows { display: grid; gap: 11px; }
.prow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.prow-name { display: inline-flex; align-items: baseline; min-width: 0; font-weight: 500; }
.prow-name .kdot { align-self: center; }
.prow-label { min-width: 0; }
.prow-lead { margin-left: 8px; padding: 0 6px; border: 1px solid var(--ink); border-radius: 999px; font: 500 11px/16px var(--font); white-space: nowrap; }
.prow-warn { margin-left: 8px; padding: 0 6px; border-radius: 999px; background: var(--crit-bg); font: 500 11px/17px var(--font); white-space: nowrap; }
.prow-nums { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.prow-val { font: 600 17px/1.2 var(--font-tight); }
.prow-delta { font: 500 12px/1 var(--font-mono); color: var(--ink-3); }
.prow-track { position: relative; height: 12px; margin-top: 5px; background: var(--sunken); border-radius: 0 4px 4px 0; }
.prow-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; transition: width 0.12s linear; }
.prow-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); transition: left 0.12s linear; }
.prow.is-out .prow-fill { opacity: 0.35; }
.prows-compact { gap: 7px; }
.prows-compact .prow-val { font-size: 15px; }
.prows-compact .prow-name { font-size: 13.5px; }
.prows-compact .prow-track { height: 7px; margin-top: 3px; }

/* ---- today */
.today { display: flex; flex-direction: column; gap: 14px; }
.today > .colwrap { display: contents; }
.hero { order: 1; } #paths-chart { order: 2; } #paths-home { order: 3; } #paths-goals { order: 4; } .card-flip { order: 5; } #paths-years { order: 6; }
@media (min-width: 900px) {
  .today { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .today > .colwrap { display: grid; }
}
.hero { padding: 16px; gap: 12px; }
.hero-line { font: 600 30px/1.1 var(--font-tight); letter-spacing: -0.005em; text-wrap: balance; }
.hero-sub { color: var(--ink-2); font-size: 14px; max-width: 62ch; }
.hero-notes { display: grid; }
.goal { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.goal:first-of-type { border-top: 0; padding-top: 0; }
.goal-title { font-weight: 600; }
.goal-line { font-size: 14px; }
.meter { height: 8px; background: var(--sunken); border-radius: 0 4px 4px 0; overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.goal-measure { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.softgoals { display: grid; border-top: 1px solid var(--line-soft); }
.softgoals li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.softgoals li:last-child { border-bottom: 0; padding-bottom: 0; }
.softgoals-due { color: var(--ink-3); white-space: nowrap; font: 400 12.5px/1.6 var(--font-mono); }
.frow, .crow, .irow, .nrow, .decrow, .fliprow, .voirow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; text-align: left; color: var(--ink); min-width: 0; }
.frow > .ic, .crow > .ic:last-child, .irow > .ic, .nrow > .ic, .decrow > .ic { color: var(--ink-3); }
.frow-main, .irow-main, .nrow-main, .decrow-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.frow-title, .irow-title, .nrow-title, .decrow-title { font-weight: 500; }
.frow-sub, .irow-when, .nrow-sub, .decrow-sub, .irow-wait { font-size: 13px; color: var(--ink-3); }
.irow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.decrow-why { font-size: 13.5px; color: var(--ink-2); }
.crow { padding: 8px 0; font-size: 14px; }
.crow-icon, .irow-icon { color: var(--ink-3); flex: none; }
.crow-text { flex: 1; min-width: 0; }
.irow.is-done .irow-title { color: var(--ink-3); }
.logrow { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.logrow-date { font: 400 12px/1.4 var(--font-mono); color: var(--ink-3); }
.logrow-text { font-size: 14px; }
.logrow-effect { font-size: 13px; color: var(--ink-2); }
.nrow-val { display: grid; justify-items: end; gap: 1px; flex: none; text-align: right; }
.nrow-val .num { font: 600 15px/1.3 var(--font-tight); }
.nrow-range { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* ---- what if */
.wi { display: block; }
.wi-sum { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; margin-inline: calc(var(--gut) * -1); padding: 8px var(--gut) 10px; background: var(--bg); border-bottom: 1px solid var(--line); display: grid; gap: 5px; }
.wi-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.wi-headline { font: 600 20px/1.15 var(--font-tight); text-wrap: balance; min-width: 0; }
.wi-reset { min-height: 32px; padding: 0 10px; font-size: 13px; flex: none; }
.wi-sub { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); margin-bottom: 2px; }
.wi-sum .prows-compact { gap: 5px; }
.wi-sum .prows-compact .prow-top { line-height: 18px; }
.wi-sum .prows-compact .prow-name { font-size: 13px; }
.wi-sum .prows-compact .prow-val { font-size: 14.5px; line-height: 18px; }
.wi-sum .prows-compact .prow-track { height: 5px; margin-top: 2px; }
.wi-sum .prows-compact .prow-mark { top: -2px; bottom: -2px; }
.wi-sum .prows-compact .prow-lead, .wi-sum .prows-compact .prow-warn { font-size: 10.5px; line-height: 14px; }
.wi-side { display: none; }
.wi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--ink); border-radius: var(--r); }
.wi-actions .btn { min-height: 38px; }
.wi-count { font-weight: 500; flex: 1 0 100%; }
.wi-actions .btn { flex: 1 1 auto; }
.wi-main { display: grid; gap: 12px; padding-top: 12px; min-width: 0; }
.wi-pane { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 900px) {
  .wi { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
  .wi-sum { order: 2; top: calc(env(safe-area-inset-top, 0px) + 72px); margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); gap: 8px; }
  .wi-main { order: 1; padding-top: 0; }
  .wi-headline { font-size: 26px; }
  .wi-sub { font-size: 13.5px; }
  .wi-sum .prows-compact { gap: 10px; }
  .wi-sum .prows-compact .prow-name { font-size: 14.5px; }
  .wi-sum .prows-compact .prow-val { font-size: 16.5px; }
  .wi-sum .prows-compact .prow-track { height: 10px; margin-top: 4px; }
  .wi-side { display: grid; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
  .wi-side .lc-frame { border: 0; padding: 0; }
  .wi-side.is-dup { display: none; }
  .chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
}
.lgroup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 14px 6px; }
.lgroup-main { padding-top: 12px; }
.lgroup-title { font: 600 15px/1.3 var(--font-tight); letter-spacing: 0.01em; }
.lgroup > summary { list-style: none; cursor: pointer; }
.lgroup > summary::-webkit-details-marker { display: none; }
.lgroup-sum { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.lgroup-sum .ic { margin-left: auto; color: var(--ink-3); transition: transform 0.15s; }
.lgroup[open] > .lgroup-sum .ic { transform: rotate(180deg); }
.lever { padding: 12px 0 9px; border-top: 1px solid var(--line-soft); }
.lgroup-main .lever:first-of-type { border-top: 0; }
.lever.is-focus { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 2px; }
.lever-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lever-name { font-weight: 500; min-width: 0; padding-top: 6px; line-height: 1.35; }
.lever-val, .lever-type { flex: none; min-width: 84px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: 600 17px/1.2 var(--font-tight); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lever-type { width: 128px; font-size: 16px; }
.lever.is-changed .lever-val { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lever-ctl { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.lever-ctl-switch { gap: 12px; min-height: 36px; }
.stepbtn { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.lever-slide { position: relative; flex: 1; min-width: 0; height: 36px; }
.lever-track { position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; background: var(--sunken); border-radius: 4px; }
.lt-band { position: absolute; top: 0; bottom: 0; background: var(--line); }
.lt-zone { position: absolute; top: 0; bottom: 0; opacity: 0.5; }
.lt-zone-lo { border-radius: 4px 0 0 4px; }
.lt-zone-hi { border-radius: 0 4px 4px 0; }
.lt-base { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink-3); border-radius: 1px; }
.lt-flip { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.range { position: absolute; inset: 0; width: 100%; height: 36px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.range::-webkit-slider-runnable-track { height: 36px; background: transparent; border: 0; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: 5px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--ink); }
.range::-moz-range-track { height: 36px; background: transparent; border: 0; }
.range::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--ink); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px var(--line); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px var(--line); }
.switch { position: relative; width: 56px; height: 32px; flex: none; border: 1px solid var(--ink-3); border-radius: 999px; background: var(--sunken); padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-3); transition: transform 0.12s; }
.switch[aria-checked="true"] { background: var(--ink); border-color: var(--ink); }
.switch[aria-checked="true"]::after { background: var(--inv); transform: translateX(24px); }
.switch-hint { font-size: 13px; color: var(--ink-3); }
.lever-foot { display: grid; gap: 0; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.lever-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.lever-range { min-width: 0; }
.lever-flip { color: var(--ink-2); line-height: 1.35; }
.lever-flip .kdot { width: 8px; height: 8px; margin: 0 4px 0 1px; }
.lever-flip.is-quiet { color: var(--ink-3); }
.lever-foot-btns { display: flex; gap: 14px; flex: none; margin-left: auto; }
.lever-foot-btns .linkbtn { font-size: 12.5px; white-space: nowrap; }
.pane-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pane-controls .seg { flex: 1 1 100%; }
.pane-title { font: 600 16px/1.3 var(--font-tight); }
.pane-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pane-row .select { width: auto; max-width: 60%; }
.saved { display: grid; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.saved-list { display: grid; gap: 10px; }
.saved-name { font-weight: 600; }
.saved-result { display: flex; align-items: center; font-size: 14px; }
.saved-what, .saved-when { font-size: 13px; color: var(--ink-3); }
.saved-btns { display: flex; gap: 8px; }
.changes { display: grid; }
.changes li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.changes-val { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---- charts */
.lc { display: grid; gap: 8px; min-width: 0; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); }
.lc-key { display: inline-flex; align-items: center; gap: 6px; }
.lc-frame { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 0 2px; overflow: hidden; }
.lc-svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.lc-svg:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.lc-grid { stroke: var(--line-soft); stroke-width: 1; }
.lc-axis { stroke: var(--line); stroke-width: 1; }
.lc-tick, .lc-unit { fill: var(--ink-3); font: 400 11px var(--font-mono); }
.lc-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-dot { stroke: var(--surface); stroke-width: 2; }
.lc-end { fill: var(--ink-2); font: 500 12px var(--font); font-variant-numeric: tabular-nums; }
.lc-leader { stroke: var(--ink-3); stroke-width: 1; }
.lc-cross-line { stroke: var(--ink-3); stroke-width: 1; }
.lc-goal { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.lc-goal-label { fill: var(--ink-2); font: 500 11px var(--font); }
.lc-tip { position: absolute; z-index: 2; min-width: 150px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--ink-3); border-radius: 4px; font-size: 13px; pointer-events: none; display: grid; gap: 3px; }
.lc-tip-head { font: 500 12px var(--font-mono); color: var(--ink-3); }
.lc-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.lc-tip-row strong { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 56px; }
.lc-tip-row span:last-child { color: var(--ink-2); }
.spark { display: block; width: 100%; max-width: 520px; height: auto; }
.spark-line { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.spark-target { stroke: var(--ink-3); stroke-width: 1; }
.sparkwrap { min-width: 0; }
.rbar { position: relative; display: block; height: 14px; margin-top: 4px; width: 100%; }
.rbar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line-soft); }
.rbar-band { position: absolute; top: 4px; height: 6px; background: var(--line); border-radius: 2px; }
.rbar-zone { position: absolute; top: 4px; height: 6px; opacity: 0.55; }
.rbar-flip { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.rbar-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); border: 2px solid var(--surface); }

/* ---- tables */
.tablewrap { overflow-x: auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 9px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-soft); }
.table thead th { border-top: 0; font: 500 12.5px/1.3 var(--font); color: var(--ink-2); vertical-align: bottom; }
.table tbody th { font-weight: 500; }
.table .numcell { text-align: right; white-space: nowrap; }
.table thead .numcell { white-space: normal; min-width: 76px; }
.table .notecell { color: var(--ink-3); font-size: 13px; }
.table td .num { font-weight: 600; }
.table-goals th, .table-goals td { padding: 9px 6px; }
.table-goals th:first-child { padding-left: 10px; }
.table-goals th:last-child, .table-goals td:last-child { padding-right: 10px; }
.table-years tbody th { white-space: nowrap; }
.goalhead-target, .goalhead-date { display: block; white-space: nowrap; }
.goalhead-date { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.met, .short { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.is-met .met { color: var(--good-ink); font-weight: 500; }
.is-neg .num { color: var(--crit-ink); }

/* ---- flip points */
.fliprow, .voirow { display: grid; gap: 4px; padding: 12px 0; }
.fliprow-top, .voirow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fliprow-title, .voirow-title { font-weight: 500; min-width: 0; }
.fliprow-at .num, .voirow-val .num { font: 600 16px/1.2 var(--font-tight); }
.fliprow-sub, .voirow-sub { font-size: 13px; color: var(--ink-3); }
.fliprow-sub .kdot, .frow-sub .kdot, .setrow-to .kdot, .dec-lead .kdot, .goal-line .kdot, .saved-result .kdot { width: 8px; height: 8px; margin: 0 5px 0 1px; }
.plainlist { display: grid; }
.setrow { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.setrow-items { display: flex; flex-wrap: wrap; gap: 6px; }
.setrow-item { padding: 2px 8px; background: var(--sunken); border-radius: 4px; font-size: 13px; }
.setrow-to { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; }
.setrow-to .kdot { margin-left: 5px; }
.prefrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.prefrow-name { display: inline-flex; align-items: center; font-weight: 500; }
.prefrow-val .num { font: 600 16px/1.2 var(--font-tight); }
.prefrow-sub { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); }
.simrow { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.simrow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 500; }
.simrow-share { font: 600 16px/1.2 var(--font-tight); font-variant-numeric: tabular-nums; }
.simrow-track { height: 10px; background: var(--sunken); border-radius: 0 4px 4px 0; }
.simrow-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.simrow-range { display: grid; gap: 3px; }
.ival { position: relative; display: block; height: 10px; }
.ival::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--line-soft); }
.ival-band { position: absolute; top: 2px; height: 6px; border-radius: 3px; opacity: 0.55; }
.ival-mid { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.simrow-text { font-size: 12.5px; color: var(--ink-3); }

/* ---- dates and decisions */
.dates-body, .numbers-body, .numlists { display: grid; gap: 14px; min-width: 0; }
.dates > .seg, .numbers > .seg { margin-bottom: 14px; }
.numbers-body > .search, .numbers-body > .chips { margin-bottom: -4px; }
.dec { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.dec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dec-title { font: 600 16px/1.3 var(--font-tight); }
.dec-q { font-size: 14px; color: var(--ink-2); }
.dec-when, .dec-wait { font-size: 13px; color: var(--ink-3); }
.dec-lead { font-size: 14px; display: flex; align-items: center; }
/* the figures of one disagreement share a column as wide as the longest of them, so none is broken across lines */
.conflict { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.conflict-title { font-weight: 600; }
.conflict-title, .conflict > .btnrow { grid-column: 1 / -1; }
.conflict-line { display: contents; font-size: 14px; }
.conflict-val { font: 600 15px/1.4 var(--font-tight); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 40px; }
.conflict-what { font-size: 14px; }
.conflict-what { display: grid; gap: 1px; color: var(--ink-2); }
.conflict-src { font-size: 12.5px; color: var(--ink-3); }
.mlist { display: grid; }
.mrow { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.mrow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mrow-date { font-weight: 500; }
.mrow-val { font: 600 16px/1.2 var(--font-tight); }
.mrow-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mrow-note { font-size: 13px; color: var(--ink-3); min-width: 0; }

/* ---- panels over the page */
.sheet { position: fixed; inset: 0; width: 100%; max-width: 100%; max-height: 90%; margin: auto 0 0; padding: 0; border: 0; border-radius: 12px 12px 0 0; background: var(--surface); color: var(--ink); overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: var(--shade); }
@media (min-width: 700px) { .sheet { width: 600px; max-height: 86%; margin: auto; border-radius: 8px; border: 1px solid var(--line); } }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 10px 12px 16px; border-bottom: 1px solid var(--line-soft); flex: none; }
.sheet-title { font: 600 19px/1.2 var(--font-tight); text-wrap: balance; padding-top: 8px; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 16px 18px; display: grid; gap: 12px; align-content: start; flex: 1 1 auto; min-height: 0; }
.sheet-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-soft); flex: none; }
.box { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r); min-width: 0; }
.box-title { font: 600 14px/1.3 var(--font-tight); letter-spacing: 0.01em; }
.box > .btn, .card > .btn { justify-self: start; }
.box-sub { font: 600 13.5px/1.3 var(--font); margin-top: 4px; }
.box > .irow:first-of-type, .box > .nrow:first-of-type, .box > .logrow:first-of-type { border-top: 0; padding-top: 0; }
.box p .kdot { width: 8px; height: 8px; margin: 0 5px 0 2px; }
.bigval { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bigval-num { font: 600 32px/1.1 var(--font-tight); }
.bigval-range { color: var(--ink-3); font-size: 14px; }
.usedin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; }
.callout { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: var(--warn-bg); border-radius: 4px; font-size: 13.5px; }
.callout .ic { color: var(--warn-ink); margin-top: 2px; }
.evi { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.box > .evi:first-of-type { border-top: 0; padding-top: 0; }
.evi-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.evi-claim { font-weight: 500; }
.evi-src, .evi-meta { font-size: 13px; color: var(--ink-3); }
.evi-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.evi-btns .btn { min-height: 34px; padding: 0 10px; font-size: 13px; }
.evi-for { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 13px; }
.evi-for .linkbtn { font-size: 13px; padding: 2px 0; }
.question { font: 500 16px/1.4 var(--font); }
.when { font-size: 14px; color: var(--ink-2); }
.copyarea { font: 400 12px/1.4 var(--font-mono); }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 6px; background: var(--ink); color: var(--inv); font-size: 14px; }
.toast-btn { border: 0; background: transparent; color: var(--inv); font: 600 14px var(--font); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; white-space: nowrap; }
@media (min-width: 900px) { .toast { bottom: 24px; } }

@media (prefers-reduced-motion: reduce) { .prow-fill, .prow-mark, .switch::after, .fold-sum .ic, .lgroup-sum .ic { transition: none; } }

/* ---- assets */
.assets { display: flex; flex-direction: column; gap: 14px; }
.assets > .colwrap { display: contents; }
#assets-hero, #assets-quick, #assets-sheetgap { order: 1; } #assets-mix { order: 2; } #assets-spread { order: 3; } #hold-stocks { order: 4; } #hold-dh { order: 5; } #hold-cash { order: 6; } #hold-loan { order: 7; } #hold-other { order: 8; } #assets-track { order: 9; } #hold-alongside { order: 10; }
@media (min-width: 900px) {
  .assets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; }
  .assets > .colwrap { display: grid; }
}
.ahero { gap: 12px; }
.ahero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ahero-num { font: 600 46px/1 var(--font-tight); letter-spacing: -0.01em; }
.ahero-num .unit { font-size: 0.6em; margin-left: 2px; }
.ahero-sub { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; margin-top: -4px; }
.ahero-gap { font-size: 14.5px; max-width: 60ch; }
.fxbox { display: grid; gap: 6px; }
.fxbox .hint strong { color: var(--ink); font-weight: 600; }
.seg-mini { padding: 2px; flex: none; }
.seg-mini .seg-btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; flex: 0 0 auto; }
.goalbar { display: grid; gap: 5px; }
.goalbar-track { position: relative; height: 14px; background: var(--sunken); border-radius: 0 4px 4px 0; }
.goalbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 0 4px 4px 0; }
.goalbar-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
.goalbar-tick-soft { background: var(--ink-3); top: -2px; bottom: -2px; }
.goalbar-labels { display: flex; justify-content: space-between; gap: 12px; font: 500 12.5px/1.3 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.goalbar-marks { display: inline-flex; gap: 10px; color: var(--ink-3); }
.goalbar-end { color: var(--ink); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { display: grid; gap: 3px; align-content: start; padding: 10px 12px; background: var(--sunken); border-radius: var(--r); min-width: 0; }
.tile-label { font: 500 12px/1.3 var(--font); color: var(--ink-3); }
.tile-main { font: 600 18px/1.2 var(--font-tight); font-variant-numeric: tabular-nums; }
.tile-main .chg { font: inherit; color: var(--ink); }
.tile-sub { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fresh { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.fresh-text { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-2); min-width: 0; }
.fresh-text .ic { color: var(--ink-3); margin-top: 1px; }
.fresh-actions { display: flex; gap: 8px; }
.fresh-actions .btn { min-height: 40px; font-size: 14px; white-space: nowrap; }
.fresh-actions .btn-refresh { flex: 1 1 auto; }
.fresh-note { display: flex; align-items: flex-start; gap: 6px; margin-top: -2px; }
.fresh-note.is-warn { color: var(--ink-2); }
.fresh-note.is-warn .ic { color: var(--warn-ink); margin-top: 1px; }
.btn-refresh.is-busy:disabled { opacity: 0.8; }
.btn-refresh.is-busy .ic { animation: turn 1.2s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-refresh.is-busy .ic { animation: none; } }
@media (min-width: 640px) {
  .fresh { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .fresh-actions .btn { min-height: 36px; font-size: 13.5px; }
  .fresh-actions .btn-refresh { flex: none; }
}
.chg { display: inline-flex; align-items: baseline; gap: 3px; font: 500 12.5px/1.3 var(--font); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.chg-arrow { font-size: 0.68em; line-height: 1; transform: translateY(-1px); }
.chg-up .chg-arrow { color: var(--good-ink); }
.chg-down .chg-arrow { color: var(--crit-ink); }
.chg-none { color: var(--ink-3); }

.stack { display: flex; gap: 2px; height: 18px; }
.stack-seg { min-width: 3px; flex-basis: 0; }
.stack-seg:first-child { border-radius: 4px 0 0 4px; }
.stack-seg:last-child { border-radius: 0 4px 4px 0; }
.stack-legend { display: grid; }
.stack-key { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 38px; align-items: baseline; gap: 0 4px; width: 100%; min-height: 38px; padding: 6px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; text-align: left; color: var(--ink); }
.stack-key:first-child { border-top: 0; }
.stack-key .kdot { align-self: center; }
.stack-name { font-weight: 500; }
.stack-val .num { font: 600 15px/1.3 var(--font-tight); }
.stack-share { text-align: right; font: 400 12.5px/1.3 var(--font-mono); color: var(--ink-3); }

.card-hold { gap: 0; padding-bottom: 8px; }
.hold-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.hold-head .card-title .kdot { margin-right: 2px; }
.hold-total { display: inline-flex; align-items: baseline; gap: 8px; }
.hold-total .num { font: 600 17px/1.2 var(--font-tight); }
.hold-share { font: 400 12.5px/1 var(--font-mono); color: var(--ink-3); }
.hold-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0 10px; }
.card-hold > .callout { margin-bottom: 4px; }
.card-hold > .hint { padding: 8px 0 4px; }
.card-hold > .btn { margin: 10px 0 6px; }
.hrow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 9px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; text-align: left; color: var(--ink); min-width: 0; }
.hrow > .ic { color: var(--ink-3); }
.hrow-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.hrow-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow-sym { margin-left: 7px; font: 400 11.5px/1 var(--font-mono); color: var(--ink-3); }
.hrow-sub { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hrow-qty.is-derived { border-bottom: 1px dotted var(--ink-3); }
.hrow-flag { margin-left: 3px; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--ink); font: 500 11px/17px var(--font); display: inline-block; }
.hrow-val { display: grid; justify-items: end; gap: 2px; flex: none; text-align: right; }
.hrow-val .num { font: 600 15.5px/1.3 var(--font-tight); }
.hrow-add { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.hrow.is-empty .hrow-name { color: var(--ink-2); }
.fold-inline > .hint { padding-bottom: 6px; }
.statrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.box-title + .statrow { border-top: 0; padding-top: 0; }
.statrow-label { display: grid; gap: 1px; min-width: 0; font-size: 14px; }
.statrow-note { font-size: 12.5px; color: var(--ink-3); }
.statrow-val { display: grid; justify-items: end; gap: 1px; flex: none; }
.statrow-val .chg { font-size: 15px; font-weight: 600; color: var(--ink); }
.statrow-krw { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.addform { display: grid; gap: 12px; }
.table-prices th, .table-prices td { padding: 7px 8px; }
.table .is-old { color: var(--warn-ink); font-weight: 500; }
.track-frame { padding: 4px 0 0; border: 0; }
.track-line { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.track-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.track-dot-small { fill: var(--ink); }
.track-target { stroke: var(--ink); stroke-width: 1.5; }
.track-floor { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.track-floor-label { fill: var(--ink-3); }
.track-need { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }

/* ---- what if, the road to the target */
.wi-modebar { margin-bottom: 10px; }
.paths-head { margin-bottom: 14px; }
@media (min-width: 900px) { .wi-modebar .seg, .paths-head .seg { display: inline-flex; } .wi-modebar .seg-btn, .paths-head .seg-btn { flex: 0 0 auto; padding: 0 18px; } }
.wi-goalnum { font: inherit; }
.wi-headline-on { font-weight: 500; color: var(--ink-2); font-size: 0.72em; }
.goalbar-compact .goalbar-track { height: 8px; }
.goalbar-compact .goalbar-labels { font-size: 11.5px; }
.goalbar-fill.is-now { background: var(--ink); border-radius: 0; }
.goalbar-fill.is-end { background: var(--ink-3); opacity: 0.55; left: auto; }
.goalbar-fill.is-ahead { background: var(--ink-3); opacity: 0.55; }
.goalbar-fill.is-end.is-down { background: var(--crit); opacity: 1; }
.wi-sum.is-met .goalbar-fill.is-end { background: var(--good); opacity: 1; }
.lt-flip.is-soft { background: var(--ink-3); top: -4px; bottom: -4px; }
.wi-side-body { min-width: 0; }
.bridge { display: grid; gap: 9px; min-width: 0; }
.bridge-row { display: grid; gap: 3px; min-width: 0; }
.bridge-head { height: 14px; }
.bridge-head .bridge-text { display: none; }
.bridge-text { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.bridge-label { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; min-width: 0; font-size: 14px; font-weight: 500; }
.bridge-note { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.bridge-amt { font: 600 14.5px/1.3 var(--font-tight); flex: none; }
.bridge-amt-total { font-size: 16px; }
.bridge-row.is-total .bridge-label { font-weight: 600; }
.bridge-track { position: relative; height: 12px; }
.bridge-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-soft); }
.bridge-bar { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; }
.bridge-bar.is-up { background: var(--p-b); }
.bridge-bar.is-down { background: var(--p-a); }
.bridge-total { position: absolute; top: -1px; bottom: -1px; width: 4px; margin-left: -2px; background: var(--ink); border-radius: 2px; }
.bridge-mark { position: absolute; top: -6px; bottom: -6px; width: 1px; background: var(--ink); }
.bridge-mark.is-soft { background: var(--ink-3); opacity: 0.7; }
.bridge-marklabel { position: absolute; top: 0; transform: translateX(-50%); font: 500 11px/14px var(--font); color: var(--ink-2); white-space: nowrap; }
.bridge-marklabel:last-child { transform: translateX(-78%); color: var(--ink); font-weight: 600; }
.bridge-marklabel:first-child:not(:last-child) { transform: translateX(-88%); }
.rangeplot { position: relative; height: 34px; }
.rangeplot::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--line-soft); }
.rangeplot-band { position: absolute; top: 18px; height: 12px; background: var(--line); border-radius: 3px; }
.rangeplot-mid { position: absolute; top: 14px; height: 20px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }
.rangeplot .bridge-mark { top: 14px; bottom: 0; }
.rangeplot-label { position: absolute; top: 0; transform: translateX(-78%); font: 600 11px/14px var(--font); white-space: nowrap; }
.minibar { display: inline-block; vertical-align: middle; width: 44px; height: 6px; margin-left: 7px; background: var(--sunken); border-radius: 0 3px 3px 0; overflow: hidden; }
.minibar-fill { display: block; height: 100%; background: var(--ink); }
.minibar-fill.is-now { background: var(--ink-3); }
.table-mix th, .table-mix td { padding: 8px 6px; }
.table-mix th:first-child { padding-left: 10px; }
.table-mix td:last-child { padding-right: 10px; }
.bridge-table { border: 0; }
.fold > .tablewrap { margin-top: 10px; }
@media (min-width: 900px) {
  .ahero-num { font-size: 54px; }
  .wi-sum-goal .goalbar-compact .goalbar-track { height: 12px; }
  .wi-sum-goal .goalbar-compact .goalbar-labels { font-size: 12.5px; }
  .wi-goal .wi-side { display: grid; }
}
.hrow-chg { display: block; min-height: 16px; }
.hrow-c, .hrow-headrow { display: none; }
.bridge-nil { position: absolute; top: 3px; bottom: 3px; width: 1px; background: var(--ink-3); }
@media (max-width: 520px) { .table-mix .minibar { display: none; } }
@media (min-width: 900px) {
  .hrow-wide { display: grid; grid-template-columns: minmax(0, 1fr) 84px 76px 76px 82px 16px; column-gap: 8px; min-height: 50px; }
  .hrow-wide .hrow-chg { display: none; }
  .hrow-wide .hrow-c { display: block; text-align: right; }
  .hrow-wide .hrow-c .chg { justify-content: flex-end; font-size: 13px; }
  .hrow-headrow { display: grid; grid-template-columns: minmax(0, 1fr) 84px 76px 76px 82px 16px; column-gap: 8px; padding: 0 0 6px; font: 500 12px/1.3 var(--font); color: var(--ink-3); }
  .hrow-headrow .hrow-val, .hrow-headrow .hrow-c { display: block; text-align: right; }
  #hold-stocks .hold-tools { display: none; }
  .hrow-wide .hrow-sym { max-width: 100%; }
}
@media (min-width: 1040px) {
  .wi-goal .lgroup-main, .wi-goal #goal-more[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; }
  .wi-goal .lgroup-main > .lgroup-title, .wi-goal #goal-more > summary { grid-column: 1 / -1; }
  .wi-goal .lgroup-main .lever:nth-of-type(2) { border-top: 0; }
}
.hrow-co { margin-left: 3px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.hrow-headrow { margin-top: 8px; }
.table .datecell { white-space: nowrap; }

/* ---- where the shares are */
.spread { display: grid; }
.spread-row { border-top: 1px solid var(--line-soft); }
.spread-row:first-child { border-top: 0; }
.spread-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2em 16px; column-gap: 10px; row-gap: 6px; align-items: baseline; padding: 10px 0; cursor: pointer; list-style: none; }
.spread-sum::-webkit-details-marker { display: none; }
.spread-name { font-weight: 500; min-width: 0; }
.spread-val { font-variant-numeric: tabular-nums; text-align: right; }
.spread-share { font: 600 15px/1.2 var(--font-tight); font-variant-numeric: tabular-nums; text-align: right; }
.spread-sum > .ic { color: var(--ink-3); align-self: center; transition: transform 0.15s; }
.spread-row[open] > .spread-sum > .ic { transform: rotate(180deg); }
.spread-bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 8px; }
.spread-fill { height: 8px; border-radius: 0 4px 4px 0; background: var(--ink-2); min-width: 3px; }
.spread-fill:first-child { border-radius: 4px; }
.spread-fill.is-rest { background: var(--line); }
.spread-fill:first-child:not(:last-child) { border-radius: 4px 0 0 4px; }
.spread-fill:last-child:not(:first-child) { border-radius: 0 4px 4px 0; }
.spread-in { display: grid; padding: 0 0 10px; }
.spread-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2em 16px; column-gap: 10px; align-items: baseline; padding: 6px 0; border: 0; background: transparent; text-align: left; font-size: 13.5px; color: var(--ink-2); }
.spread-line:hover .spread-line-name { text-decoration: underline; text-underline-offset: 2px; }
.spread-line-name { min-width: 0; overflow-wrap: anywhere; }
.spread-line-val, .spread-line-share { font-variant-numeric: tabular-nums; text-align: right; }
.spread-in > .hint { padding-top: 4px; }
#assets-spread > .hint { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .spread-sum > .ic { transition: none; } }

/* ---- cash by currency */
.cashcur { display: grid; gap: 8px; margin: 10px 0 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.cashcur > .btn { justify-self: start; }
.table-cashcur th, .table-cashcur td { padding-top: 7px; padding-bottom: 7px; }
.cashcur-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); color: var(--ink); font-size: 13.5px; }
.cashcur-note .ic { color: var(--warn-ink); margin-top: 2px; }
.textlink { padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.seg .seg-btn:disabled { opacity: 0.45; cursor: default; }

/* ---- as is, what if: the switch on Assets and Paths, and the comparison */
.modebar { margin-bottom: 12px; }
.seg-mode { padding: 4px; }
.seg-mode .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; font-size: 15px; font-weight: 600; }
.seg-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink); color: var(--inv); font: 600 12px/20px var(--font); font-variant-numeric: tabular-nums; }
.pathbar { display: grid; gap: 10px; margin-bottom: 12px; }
.pathbar .modebar { margin: 0; }
.datebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.datebar-label { font-weight: 500; }
.datebar .select { width: auto; min-height: 38px; padding-top: 4px; padding-bottom: 4px; font-weight: 600; }
.backbar { margin-bottom: 10px; }
@media (min-width: 900px) {
  .modebar .seg { display: inline-flex; }
  .seg-mode .seg-btn { flex: 0 0 auto; min-width: 140px; }
  .pathbar { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
  .datebar { justify-content: flex-end; }
}
.cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cmp-cell { display: grid; gap: 2px; align-content: start; padding: 8px 10px; border-radius: var(--r); background: var(--sunken); min-width: 0; }
.cmp-cell.is-main { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
.cmp-label { font: 500 12px/1.3 var(--font); color: var(--ink-3); }
.cmp-num { font: 600 19px/1.15 var(--font-tight); font-variant-numeric: tabular-nums; }
.cmp-gap { display: block; min-height: 22px; }
.cmp-gap .chg { font: 600 15px/1.45 var(--font-tight); color: var(--ink); white-space: nowrap; }
.cmp-gap .chg-flat { font-weight: 400; font-size: 13px; color: var(--ink-3); }
.cmp-title { font-size: 16px; }
.cmp-table { width: 100%; }
.cmp-table th, .cmp-table td { padding: 5px 0 5px 8px; vertical-align: baseline; }
.cmp-table th:first-child { padding-left: 0; }
.cmp-table thead th { font: 500 12px/1.3 var(--font); color: var(--ink-3); border-bottom: 1px solid var(--line); }
.cmp-table tbody th { font-weight: 500; font-size: 13.5px; }
.cmp-table .cellname { align-items: baseline; }
.cmp-table .cellname .kdot { flex: none; transform: translateY(-1px); }
.cmp-name { min-width: 0; }
.cmp-table .cmp-num { font-size: 14.5px; }
.cmp-table .cmp-main { font-weight: 700; }
.cmp-table .cmp-gap .chg { font-size: 13px; }
.cmp-table tr.is-out .cmp-main { color: var(--ink-3); font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px; }
.cmp-table tr.is-out .cmp-gap { visibility: hidden; }
.cmp-out { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.cmp-out .ic { color: var(--warn-ink); margin-top: 1px; }
.cmp-table .prow-lead, .cmp-table .prow-warn { margin-left: 2px; }
@media (min-width: 900px) { .cmp-num { font-size: 22px; } .cmp-table .cmp-num { font-size: 16px; } .cmp-table tbody th { font-size: 14.5px; } .cmp-title { font-size: 18px; } }
.lc-mark { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.lc-mark-label { fill: var(--ink); font: 600 11px var(--font); }
.lc-ghost { stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.6; }
.lc-svg { cursor: pointer; }
.table-years tr.is-marked th, .table-years tr.is-marked td { background: var(--sunken); font-weight: 600; }
.wi-years { min-width: 0; }

/* ---- buying a home */
.home-head { display: grid; gap: 10px; }
#home-where .seg-btn { min-height: 40px; line-height: 1.15; }
#home-sum .statrow-val { font: 600 14.5px/1.3 var(--font-tight); font-variant-numeric: tabular-nums; text-align: right; }
.home-place { display: grid; gap: 12px; }

/* ---- paths: rows that open a path, the date line, the home card */
.prow-btn { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.prow-track { display: block; }
.prow-nums .ic { color: var(--ink-3); align-self: center; margin-left: -2px; }
.datebar-short { display: none; }
.datebar .select { flex: 0 1 auto; min-width: 0; }
@media (max-width: 599px) { .datebar-long { display: none; } .datebar-short { display: inline; } .datebar { flex-wrap: nowrap; gap: 8px; } .datebar .select { padding-left: 8px; padding-right: 4px; } }
.homechg { font: 600 15px/1.3 var(--font-tight); color: var(--ink); }
#paths-home .frow:first-of-type { border-top: 0; }
#paths-home .chg-flat { font-size: 13px; color: var(--ink-3); }
#wi-home .lever-flip.is-quiet { display: none; }
#home-sum .box-sub { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
#home-sum .box-title + .box-sub { margin-top: 0; padding-top: 0; border-top: 0; }
#home-sum .box-sub + .statrow { border-top: 0; padding-top: 0; }

/* ---- adding: the quick buttons under the total, the list to pick a stock from, many counts at once */
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick .btn { flex: 1 1 auto; min-height: 44px; }
.picks { display: grid; border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; text-align: left; color: var(--ink); }
.pick:first-child { border-top: 0; }
.pick:hover { background: var(--sunken); }
.pick > .ic { color: var(--ink-3); }
.pick-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pick-name { font-weight: 500; }
.pick-sub { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pick-other .pick-name, .pick-more .pick-name { font-weight: 500; color: var(--ink-2); }
.picks > .hint { padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.picked { padding: 10px 12px; background: var(--sunken); border-radius: var(--r); }
.picked-name { font: 600 16px/1.3 var(--font-tight); }
.picked-sub { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.addform > .textlink { justify-self: start; font-size: 13.5px; color: var(--ink-2); }
.fold-body { padding: 4px 0 10px; }
.input[type="search"] { -webkit-appearance: none; appearance: none; }
.fillrow { display: grid; grid-template-columns: minmax(0, 1fr) 88px 104px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.box-title + .fillrow, .hint + .fillrow { border-top: 0; }
.fillrow-name { display: grid; gap: 1px; min-width: 0; }
.fillrow-title { font-weight: 500; font-size: 14px; }
.fillrow-sub { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fillrow .input { min-height: 40px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.extlink { justify-self: start; }