/* TradeLog theme layer — loaded AFTER app.css; app.css stays the structural base.
   Visual identity (our own): light by default, warm paper neutrals with one indigo accent; flat surfaces with hairline borders,
   modest 8–10px corners, sentence-case labels, no gradients or glows. Colour roles: indigo = brand + every interactive element,
   green / red = gain / loss ONLY (always with a sign or a word), amber = warnings. Dark keeps the same roles on charcoal. */

:root {
  --r-card: 10px; --r-sm: 6px; --r: 8px;
  --bg: #F6F5F2; --bg2: #EEEDE9; --panel: #FFFFFF; --panel-hover: #F1F0EC; --side: #EFEEEA;
  --fg: #1D1D1B; --fg2: #4A4A46; --muted: #64645E; --line: #E2E0DA; --line2: #CBC8C0; --rule: #D9D6CE;
  --accent: var(--sk-l, #3949AB); --on-accent: var(--sk-on-l, #FFFFFF);
  --accent-bg: color-mix(in srgb, var(--accent) 9%, transparent); --accent-bg2: color-mix(in srgb, var(--accent) 20%, transparent);
  --gain: #16703F; --gain-bg: rgba(22, 112, 63, .10); --loss: #B3261E; --loss-bg: rgba(179, 38, 30, .09);
  --warn: #7C5100; --warn-bg: rgba(124, 81, 0, .10);
  --shadow-card: none;
  --ramp-1: var(--accent); --ramp-2: color-mix(in srgb, var(--accent) 72%, #fff); --ramp-3: color-mix(in srgb, var(--accent) 48%, #fff);
  --ramp-4: color-mix(in srgb, var(--accent) 30%, #fff); --ramp-5: color-mix(in srgb, var(--accent) 16%, #fff);
}
:root[data-theme=dark] {
  --bg: #151517; --bg2: #1F1F22; --panel: #1C1C1F; --panel-hover: #252528; --side: #121214;
  --fg: #ECECEA; --fg2: #B8B8B3; --muted: #9A9A94; --line: #2C2C30; --line2: #3C3C42; --rule: #35353A;
  --accent: var(--sk-d, #8E9EFF); --on-accent: var(--sk-on-d, #14161F);
  --accent-bg: color-mix(in srgb, var(--accent) 12%, transparent); --accent-bg2: color-mix(in srgb, var(--accent) 24%, transparent);
  --gain: #52C48C; --gain-bg: rgba(82, 196, 140, .12); --loss: #F0807A; --loss-bg: rgba(240, 128, 122, .12);
  --warn: #E0A23A; --warn-bg: rgba(224, 162, 58, .12);
  --shadow-card: none;
  --ramp-2: color-mix(in srgb, var(--accent) 76%, var(--bg)); --ramp-3: color-mix(in srgb, var(--accent) 52%, var(--bg));
  --ramp-4: color-mix(in srgb, var(--accent) 34%, var(--bg)); --ramp-5: color-mix(in srgb, var(--accent) 22%, var(--bg));
}

/* surfaces: flat, hairline-bordered */
.panel, .hero, .heropanel, .filters, .trustbar, .notice, .expander, .tile, .mcard, .card-row, .auth-card, .dialog, .toast, .wb-item, .strip ul {
  background: var(--panel); border-radius: var(--r-card); box-shadow: none;
}
.notice.pending { background: var(--accent-bg); } .notice.warn { background: var(--warn-bg); } .notice.err { background: var(--loss-bg); }
main { padding-top: 10px; }
.page-head h1 { font-family: var(--font-sans); font-weight: 650; }
.page-head .sub { font-size: 13px; }
a { color: var(--accent); }

/* sidebar */
.sidebar { background: var(--side); }
.brand .word { letter-spacing: -.02em; }
.search input, .jump { border-radius: var(--r-sm); background: var(--bg2); border: 1px solid var(--line2); color: var(--fg); }
.jump { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; color: var(--muted); text-align: left; }
.jump:hover { border-color: var(--accent); color: var(--fg); }
kbd { font: 500 10.5px/1 var(--font-mono); padding: 3px 5px; border: 1px solid var(--line2); border-radius: 5px; color: var(--muted); background: var(--bg); margin-left: auto; }
.nav-group { margin-top: 10px; }
.nav-group > h3, .nav-group > button.gh { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fg); padding: 8px 8px 6px; text-align: left; }
.nav-group > button.gh .gi { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent-bg); color: var(--accent); flex: none; }
.nav-group > button.gh .gn { flex: 1; }
.nav-group > button.gh .chev { font-size: 9px; color: var(--muted); transition: transform .15s; }
.nav-group > button.gh:hover .gn { color: var(--accent); }
.nav-group.closed > button.gh .chev { transform: rotate(-90deg); }
.nav-group.closed > .nav:not(.active) { display: none; }
.nav { position: relative; border-radius: var(--r-sm); font-weight: 450; font-size: 13.5px; color: var(--fg2); padding: 6px 10px 6px 20px; margin-left: 20px; }
.nav::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.nav:hover { background: var(--bg2); color: var(--fg); text-decoration: none; }
.nav.tier1 { font-weight: 450; }
.nav.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; box-shadow: none; }
.nav.active::before { width: 3px; left: -1px; background: var(--accent); border-radius: 2px; }
.nav-foot .nav { margin-left: 0; padding-left: 10px; } .nav-foot .nav::before { display: none; }
.nav-more { font-size: 12px; color: var(--muted); padding: 2px 10px; }

/* buttons + inputs */
.btn { border-radius: var(--r-sm); background: var(--bg2); }
.btn:hover { border-color: var(--accent); background: var(--panel-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 600; }
.btn.primary:hover { background: var(--accent); filter: brightness(1.1); }
.btn.secondary, .btn.ghost { background: transparent; }
.field input, .field select, .field textarea, .tsort select, .filters input, .filters select { background: var(--bg2); border-radius: var(--r-sm); border-color: var(--line2); }
:focus-visible { outline-color: var(--accent); }
.seg { border-radius: var(--r-sm); background: var(--bg2); }
.seg button.on { background: var(--accent-bg); color: var(--accent); }
.chip { background: var(--bg2); }
.chip.accent { background: var(--accent-bg); color: var(--accent); }

/* micro-labels */
.hp-label, .divider b, .ins-prio, .ins-reclbl, .kpi-l { letter-spacing: 0; font-size: 12.5px; font-weight: 600; text-transform: none; color: var(--muted); }
.divider span { background: var(--rule); }

/* tables: header band, tighter rows, visible separators */
.tbl th { background: var(--bg2); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg2); padding: 9px 10px; }
.tbl td { padding: 7px 10px; border-bottom: 1px solid var(--rule); }
.tbl tbody tr:hover td { background: var(--panel-hover); }
.tbl tr.group th { background: var(--bg2); letter-spacing: 0; }
.tbl tr.total-row td { background: var(--bg2); border-top: 2px solid var(--rule); }
.table-wrap, .scroll-x { border-radius: var(--r-card); }

/* dashboard: hero + KPI tiles */
.heropanel { grid-template-columns: minmax(0, 1fr); padding: 20px 22px; gap: 18px; box-shadow: none; }
@media (min-width: 900px) { .heropanel { grid-template-columns: minmax(0, 1fr); } }
.hp-value { font-size: 34px; font-weight: 600; }
.hp-metrics { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.hp-m, a.kpi { display: block; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; color: inherit; text-decoration: none;
  background: var(--panel); box-shadow: none; transition: border-color .15s; }
a.kpi:hover { border-color: var(--accent); text-decoration: none; }
.hp-m dt, .kpi-l { display: block; margin-bottom: 4px; }
.hp-m dd { font-size: 22px; font-weight: 600; }
.kpi-more { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
a.kpi:hover .kpi-more { color: var(--accent); }

/* workbench / insight rows */
.wb-item { border-left-width: 3px; }

/* command palette */
.pal-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(20, 20, 22, .5); display: grid; justify-items: center; align-content: start; padding: 12vh 16px 0; backdrop-filter: blur(2px); }
.pal { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-card);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .35); overflow: hidden; }
.pal input { width: 100%; height: 48px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); font-size: 15px; outline: none; }
.pal ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.pal li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--fg2); }
.pal li .g { margin-left: auto; font-size: 12px; color: var(--muted); }
.pal li.on { background: var(--accent-bg); color: var(--accent); }
.pal .empty-pal { padding: 16px; color: var(--muted); font-size: 13.5px; }
.pal-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }

/* phone */
@media (max-width: 768px) {
  .mobilebar, .bottomnav { background: var(--panel); }
  .hp-value { font-size: 30px; }
  .hp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-m dd { font-size: 17px; }
}
.kpi-v { font-size: 22px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) { .kpi-v { font-size: 17px; } .kpi-more { display: none; } }

/* plain controls inside pages (journal, cash check, tax losses) get the same field look */
.page input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .page select {
  height: 36px; padding: 0 10px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--bg2); color: var(--fg); }
.page input[type=file] { color: var(--fg2); font-size: 13px; }
.page input[type=file]::file-selector-button { height: 32px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--bg2); color: var(--fg); cursor: pointer; }
.page input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.page .btn:not(.primary):not(.ghost):not(.secondary):not(.danger) { background: var(--accent-bg); border-color: var(--accent-bg2); color: var(--accent); font-weight: 600; }
.page .btn:disabled { background: var(--bg2); color: var(--muted); border-color: var(--line); }
.jump { background: transparent; border-style: dashed; height: 32px; font-size: 13px; }
.journal .panel { padding: 10px 14px; margin: 8px 0; }


/* ── accent skins (Appearance dialog). Gain/loss colours NEVER change with the skin. ── */
:root[data-skin=terminal] { --sk-d: #F59E0B; --sk-l: #B45309; }
:root[data-skin=tape]     { --sk-d: #38BDF8; --sk-l: #0369A1; }
:root[data-skin=sapphire] { --sk-d: #6C8CFF; --sk-l: #2F4FD0; }
:root[data-skin=aurora]   { --sk-d: #E879F9; --sk-l: #A21CAF; }
:root[data-skin=lime]     { --sk-d: #A3E635; --sk-l: #4D7C0F; }
:root[data-skin=rose]     { --sk-d: #F472B6; --sk-l: #BE185D; }
:root[data-skin=ember]    { --sk-d: #FB923C; --sk-l: #C2410C; }
:root[data-skin=custom]   { --sk-d: var(--sk-custom, #8E9EFF); --sk-l: color-mix(in srgb, var(--sk-custom, #3949AB) 68%, #000); }

/* ── panel style: flat (default) or soft (a faint shadow) ── */
:root[data-panel=soft] .panel, :root[data-panel=soft] .heropanel, :root[data-panel=soft] a.kpi, :root[data-panel=soft] .trustbar, :root[data-panel=soft] .filters {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10); }

/* ── density ── */
:root[data-density=comfortable] .tbl td { padding: 11px 12px; }
:root[data-density=comfortable] .tbl th { padding: 12px; }
:root[data-density=comfortable] .nav { padding: 8px 12px; }
:root[data-density=comfortable] .page { gap: 20px; }
:root[data-density=compact] .page { gap: 14px; }
:root[data-density=compact] .tbl td { padding: 7px 10px; }
:root[data-density=compact] .tbl th { padding: 9px 10px; }

/* ── appearance dialog ── */
.ap { width: min(560px, 100%); max-height: 86vh; overflow: auto; padding: 20px; display: grid; gap: 16px; }
.ap h2 { font-size: 17px; }
.ap h3 { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.ap-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg2); color: var(--fg2); cursor: pointer; }
.ap-pill.on { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.ap-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.ap .hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.ap input[type=color] { width: 40px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--line2); background: var(--bg2); }

/* dismiss (✕) on the status strip and the running-job banner */
.close-x { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 6px 8px; border-radius: 6px; min-width: 32px; min-height: 32px; }
.close-x:hover, .close-x:focus-visible { color: var(--fg); background: var(--line2, rgba(128,128,128,.15)); }
.jobbanner .job .close-x { margin-left: 4px; }

/* panels may shrink and wrap their text on phones */
.panel { min-width: 0; overflow-wrap: anywhere; }

/* labels read in sentence case everywhere: no tracked all-caps micro-labels */
.divider b, .ins-prio, .ins-reclbl, .hp-label, .mh-l, .ms-l, .filters .filterlabel, .scard-l, .section-sub.accent, .grp-name, .mgroup-n, .dd-kpis dt,
.tl-label, .cal-hdr, .wk-label, .tier-label, .acard-k, .sect-k, .optcard-k, .jobscard-h, .ltprow.hdr, .discrow.hdr, .ggroup-t, .gtrow.hdr, .tm-cells dt,
.grp-kind, .tbl th { text-transform: none; letter-spacing: 0; }
.sev { text-transform: capitalize; letter-spacing: 0; }
.mh-l, .ms-l, .scard-l, .dd-kpis dt, .tm-cells dt, .wk-label, .acard-k, .grp-kind { font-size: 12px; }

/* dashboard hero: value history with a range picker, and metric tiles with an icon and a chevron */
.hp-history { position: relative; margin-top: 6px; }
.hp-ranges { width: fit-content; margin-left: auto; display: flex; gap: 2px; background: var(--bg2); border-radius: var(--r-sm); padding: 2px; z-index: 1; }
.hp-ranges button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.hp-ranges button:hover { color: var(--fg); }
.hp-ranges button.on { background: var(--panel); color: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.hp-main { position: relative; }
a.kpi { display: flex; align-items: flex-start; gap: 12px; }
.kpi-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-bg); color: var(--accent); }
.kpi-ic.gain { background: var(--gain-bg); color: var(--gain); } .kpi-ic.loss { background: var(--loss-bg); color: var(--loss); }
.kpi-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kpi-v { display: block; }
.kpi-go { flex: none; align-self: center; color: var(--muted); font-size: 22px; line-height: 1; }
a.kpi:hover .kpi-go { color: var(--accent); }
@media (max-width: 768px) { .hp-ranges { max-width: 100%; overflow-x: auto; } .kpi-ic { display: none; } .kpi-go { display: none; } }

/* polish: hero numbers in the sans face (tabular figures keep columns aligned), tiles keep their own height, chips breathe */
.hp-value, .hp-delta, .kpi-v, .hp-line .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.hp-value { font-size: 38px; letter-spacing: -.025em; }
.hp-delta { font-size: 14px; font-weight: 600; }
.hp-metrics { align-items: start; }
a.kpi { padding: 14px 16px; }
a.kpi .note { font-size: 12px; line-height: 1.45; }
.kpi-v { font-size: 24px; margin: 2px 0 2px; }
.heropanel { border-radius: 14px; }
.hp-ranges button { padding: 5px 11px; }
.nav-group > button.gh .chev { font-size: 10px; }

/* severity: a bar down the left edge plus a faint wash of the same colour, so a High row is seen before it is read */
.ins, .wb-item { border-left-width: 5px; }
.ins.dot-err, .wb-item.tone-err { background: linear-gradient(90deg, var(--loss-bg), transparent 55%), var(--panel); }
.ins.dot-warn, .wb-item.tone-warn { background: linear-gradient(90deg, var(--warn-bg), transparent 55%), var(--panel); }
.ins.dot-ok { background: linear-gradient(90deg, var(--gain-bg), transparent 55%), var(--panel); }
.ins-prio.high, .ins-prio.medium, .ins-prio.low { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.ins-prio.high { background: var(--loss-bg); color: var(--loss); }
.ins-prio.medium { background: var(--warn-bg); color: var(--warn); }
.ins-prio.low { background: var(--gain-bg); color: var(--gain); }

/* status strip as chips, a real refresh button; greeting header */
.trustbar { gap: 6px 10px; }
.trustbar .chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.trustbar .chip.neutral, .page-head.greet .chip.neutral { background: var(--bg2); color: var(--fg2); }
.refresh-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.refresh-btn .ri { display: inline-block; font-size: 14px; line-height: 1; }
.refresh-btn .ri.spin { animation: tl-spin 1s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .refresh-btn .ri.spin { animation: none; } }
.page-head.greet h1 { font-size: 28px; letter-spacing: -.02em; }
.page-head.greet .page-actions .chip { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; }

/* C. portfolio summary hierarchy: value → change → return chips */
.hp-label { font-size: 13px; }
.hp-value { font-size: 40px; line-height: 1.1; margin: 2px 0 6px; }
.hp-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hp-delta { font-size: 16px; font-weight: 600; }
.hp-inv { font-size: 13.5px; color: var(--muted); }
.hp-inv .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--fg2); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pchip { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); white-space: nowrap; }
.pchip .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.pchip.bench { background: var(--bg2); color: var(--fg2); font-weight: 500; }
.pchip.bench .pl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pchip .g, .pchip .num.g { color: var(--gain); } .pchip .l, .pchip .num.l { color: var(--loss); }
@media (max-width: 768px) { .hp-value { font-size: 32px; } .pchip { white-space: normal; } }

/* D. KPI cards: one height per row, label → value → detail, the warning pinned to the bottom */
.hp-metrics { align-items: stretch; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.kpi { min-height: 132px; }
.kpi-body { align-self: stretch; }
.kpi-l { margin: 0; }
a.kpi .note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
a.kpi .chip.warn { margin-top: auto; align-self: flex-start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.kpi .kpi-body > .note:last-child { margin-bottom: 0; }
@media (max-width: 768px) { a.kpi { min-height: 0; padding: 12px; } }

/* E. Action Center tiers */
.ac-rows { display: grid; gap: 18px; }
.aclevel { display: grid; gap: 8px; }
.aclevel-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; color: var(--fg); }
.aclevel-h .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.lv-critical .aclevel-h .dot { background: var(--loss); } .lv-warning .aclevel-h .dot { background: var(--warn); } .lv-info .aclevel-h .dot { background: var(--accent); }
.lv-critical .aclevel-h { color: var(--loss); } .lv-warning .aclevel-h { color: var(--warn); }
.aclevel-n { font-size: 12px; font-weight: 600; padding: 0 8px; border-radius: 999px; background: var(--bg2); color: var(--fg2); font-family: var(--font-sans); }
.aclevel-sub { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.lv-info .ins, .lv-info .wb-item { border-left-color: var(--accent); background: var(--panel); }
.wb-acts { display: flex; gap: 8px; flex: none; }
@media (max-width: 768px) { .wb-acts { width: 100%; } .wb-acts .btn { flex: 1; } }

/* B. freshness chip: a dot plus the state in words (colour is never the only signal) */
.trustbar .chip.fresh { display: inline-flex; align-items: center; gap: 6px; }
.trustbar .chip.fresh .dot { width: 7px; height: 7px; }

/* A. sidebar: a little less air between groups, rows stay 32px+ tall */
.nav-group { margin-top: 6px; }
.nav-group > button.gh { padding: 6px 8px 4px; }
.nav { padding-top: 5px; padding-bottom: 5px; }
.nav-group > button.gh:focus-visible, .nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* F. tables: slightly tighter rows, figures right-aligned in tabular numerals */
.tbl th, .tbl td { padding: 7px 10px; }
.tbl th { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--fg2); }
.tbl { font-size: 14px; }
.tbl td.n, .tbl th.n { font-variant-numeric: tabular-nums; }
.tbl td.n { font-family: var(--font-sans); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.total-row td { font-family: var(--font-sans); }

/* D (revised after a browser check): the amount gets the card's full width — icon and label sit on a row above it, so a figure like
   ₹1,39,72,475.00 is never cut off */
a.kpi { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.kpi-top { display: flex; align-items: center; gap: 8px; }
.kpi-top .kpi-l { flex: 1; min-width: 0; margin: 0; }
.kpi-ic { width: 26px; height: 26px; border-radius: 7px; }
.kpi-ic svg { width: 15px; height: 15px; }
.kpi-go { align-self: auto; font-size: 20px; }
.kpi-v { overflow: visible; text-overflow: clip; font-size: clamp(18px, 1.7vw, 24px); margin: 4px 0 0; white-space: nowrap; }
.kpi-body { display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; align-self: stretch; }
a.kpi .chip.warn { margin-top: auto; }
a.kpi .kpi-body { margin-bottom: 6px; }
@media (max-width: 768px) { .kpi-ic, .kpi-go { display: grid; } .kpi-ic { width: 22px; height: 22px; } .kpi-go { display: block; font-size: 18px; } .kpi-v { font-size: 18px; } }

/* acknowledge on insights */
.ins-acts { display: flex; gap: 8px; align-items: center; flex: none; }
.ins-ack { color: var(--muted); }
.ins-ack:hover { color: var(--fg); }
.acked { font-size: 13px; color: var(--muted); }
.acked > summary { cursor: pointer; padding: 4px 0; font-weight: 600; }
.acked ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.acked li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 10px; border: 1px dashed var(--line2); border-radius: var(--r-sm); }
.acked-t { color: var(--fg2); }
@media (max-width: 768px) { .ins-acts { width: 100%; } .ins-acts .btn { flex: 1; } }

/* Settings → Security status: label left, value right, note after it */
.sec-security .kvlist .kv > b { margin-left: auto; }
.sec-security .kvlist .kv > b + span { min-width: 9.5em; text-align: right; }
.sec-security .panel + .panel { margin-top: 12px; }

/* free-text card values (audit messages, broker lists) wrap; only figures stay on one line */
.mrow.wide .mv, .mcard-t.wrap { white-space: normal; overflow-wrap: anywhere; }

/* Strategy Breakdown at ≤1440px: secondary columns fold away behind one button */
.sb-cols { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.stack2 { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.stack2 small { font-size: 11.5px; opacity: .85; }
@media (min-width: 481px) and (max-width: 1100px) { :root[data-density=compact] .tbl td, :root[data-density=compact] .tbl th { padding-left: 7px; padding-right: 7px; } }
.grp-strategy .grp-name, .grp-direct .grp-name, .grp-none .grp-name { font-size: 14.5px; }   /* stays one step above a stock symbol now that table text is 14px */