:root {
  color-scheme: light;
  --bg: #f4f4f2;
  --surface: #fcfcfb;
  --raised: #ffffff;
  --line: #e6e5e1;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #84837e;
  --accent: #2a78d6;
  --accent-ink: #1c5cab;
  --accent-soft: #e3eefc;
  --bad: #d93a39;
  --bad-soft: #fde8e8;
  --good: #0a7d2c;
  --good-soft: #e3f4e7;
  --warn: #a86e00;
  --warn-soft: #fbf0d6;
  --r: 12px;
  --gap: 12px;
  --pad: 16px;
  --top-h: 56px;
  --bottom-h: 0px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111110;
    --surface: #1a1a19;
    --raised: #21211f;
    --line: #2e2e2b;
    --text: #f0efec;
    --text-2: #c3c2b7;
    --muted: #8f8e88;
    --accent: #3987e5;
    --accent-ink: #86b6ef;
    --accent-soft: #1b2c44;
    --bad: #e66767;
    --bad-soft: #3a1d1d;
    --good: #4cb562;
    --good-soft: #17301d;
    --warn: #eda100;
    --warn-soft: #3a2e10;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111110; --surface: #1a1a19; --raised: #21211f; --line: #2e2e2b;
  --text: #f0efec; --text-2: #c3c2b7; --muted: #8f8e88;
  --accent: #3987e5; --accent-ink: #86b6ef; --accent-soft: #1b2c44;
  --bad: #e66767; --bad-soft: #3a1d1d; --good: #4cb562; --good-soft: #17301d; --warn: #eda100; --warn-soft: #3a2e10;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text); font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom));
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.hide { display: none !important; }
.wrap { max-width: 1320px; margin: 0 auto; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 0 var(--pad); height: var(--top-h); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .02em; flex-shrink: 0; }
.brand-t { display: flex; flex-direction: column; min-width: 0; }
.brand-t b { font-size: 15px; font-weight: 650; white-space: nowrap; }
.brand-t small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.nav a:hover { background: var(--bg); color: var(--text); }
.nav a.on { background: var(--accent-soft); color: var(--accent-ink); }
.nav svg { width: 16px; height: 16px; }

/* ---------- filters ---------- */
.filters { position: sticky; top: var(--top-h); z-index: 15; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.filters-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px var(--pad) 4px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.chips::-webkit-scrollbar { display: none; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.chip:hover { color: var(--text); }
.chip.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.dims { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.custom { display: flex; gap: 4px; align-items: center; color: var(--muted); }
select, input[type=date], input[type=search], input[type=number] {
  font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; height: 34px;
}
select { padding-right: 26px; max-width: 170px; }
select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.filter-btn { display: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
.filter-btn.act { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.range { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad) 8px; color: var(--muted); font-size: 12px; }
.range b { color: var(--text-2); font-weight: 500; }
.range a { color: var(--accent-ink); }

/* ---------- layout ---------- */
.view { max-width: 1320px; margin: 0 auto; padding: var(--pad); }
.loading { padding: 60px 0; text-align: center; color: var(--muted); }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.ph h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.ph .sub { color: var(--muted); font-size: 13px; margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ph .sub a { color: var(--accent-ink); }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.back:hover { color: var(--text); }
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-h h2 { margin: 0; font-size: 14px; font-weight: 600; }
.card-h small { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 6px; }
.card-h a.more { color: var(--accent-ink); font-size: 13px; white-space: nowrap; }
.empty { color: var(--muted); padding: 14px 0; font-size: 13px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; min-width: 0; }
.kpi span { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { display: block; font-size: clamp(18px, 2.1vw, 24px); font-weight: 650; margin: 2px 0 1px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi i { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.up { color: var(--good) !important; } .down { color: var(--bad) !important; }

/* ---------- chart ---------- */
.chart { position: relative; height: 230px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .ax { fill: var(--muted); font-size: 11px; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .bar { fill: var(--accent); }
.chart .bar.dim { opacity: .35; }
.chart .tg { stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .tgl { fill: var(--text-2); font-size: 11px; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:hover + .hl, .chart .hl { pointer-events: none; }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 12px; margin-top: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); margin-right: 5px; vertical-align: -1px; }
.legend i.dim { opacity: .35; } .legend i.ln { height: 0; border-top: 2px dashed var(--text-2); background: none; border-radius: 0; }

/* ---------- bar lists ---------- */
.bars { display: flex; flex-direction: column; gap: 2px; }
.bars .row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 6px; margin: 0 -6px; border-radius: 6px; }
.bars a.row:hover { background: var(--bg); }
.bars .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13px; }
.bars .tr { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bars .fl { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.bars .fl.bad { background: var(--bad); }
.bars .v { font-size: 13px; text-align: right; min-width: 64px; }

/* ---------- tables ---------- */
.tools { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.tools input[type=search] { flex: 1 1 220px; height: 36px; }
.tools .sort { display: none; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 6px 11px; font-size: 13px; cursor: pointer; color: var(--text-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.tblw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
table.t { border-collapse: separate; border-spacing: 0; width: 100%; }
.t th, .t td { padding: 9px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.t th { color: var(--muted); font-weight: 500; font-size: 12px; cursor: pointer; user-select: none; background: var(--surface); position: sticky; top: 0; }
.t th:hover { color: var(--text); }
.t th.s::after { content: " ↓"; } .t th.s.asc::after { content: " ↑"; }
.t th.l, .t td.l { text-align: left; }
.t td:first-child, .t th:first-child { padding-left: 0; }
.t td:last-child, .t th:last-child { padding-right: 0; }
.t td.nm { font-weight: 550; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.t td .s2 { display: block; color: var(--muted); font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.t tbody tr { cursor: default; }
.t tbody tr.go { cursor: pointer; }
.t tbody tr.go:hover td { background: var(--bg); }
.t tfoot td { font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; }
.t .dl { font-size: 12px; margin-left: 4px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--bg); color: var(--text-2); white-space: nowrap; }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.meter { display: inline-block; width: 56px; height: 6px; background: var(--bg); border-radius: 3px; vertical-align: middle; margin-right: 6px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); }
.meter > i.ok { background: var(--good); }
.btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 500; }
.btn:hover { background: var(--bg); }
.btn.pri { background: var(--accent); color: #fff; border-color: var(--accent); }
.more-row { text-align: center; margin-top: 10px; }

/* ---------- salary settings ---------- */
details.set summary { cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
details.set summary::-webkit-details-marker { display: none; }
details.set summary::after { content: "Edit ▾"; color: var(--accent-ink); font-weight: 400; font-size: 13px; }
details.set[open] summary::after { content: "Close ▴"; }
.setg { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; margin-top: 12px; }
.setg label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.setg input, .setg select { width: 84px; height: 30px; font-size: 13px; padding: 3px 6px; }
.setg .two { display: flex; gap: 4px; }
.note { background: var(--accent-soft); border-color: transparent; color: var(--text); font-size: 13px; }

/* ---------- bottom nav (phone) ---------- */
.bottom { display: none; }

/* ---------- filter sheet (phone) ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sheet-card { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 16px 16px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; max-height: 85vh; overflow: auto; }
.sheet-h { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.sheet-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.sheet-card select, .sheet-card input { max-width: none; width: 100%; height: 42px; font-size: 16px; }
.sheet-a { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 4px; }
.sheet-a .btn { height: 44px; }
.x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); padding: 4px 8px; }

.tip { position: fixed; pointer-events: none; z-index: 60; background: var(--text); color: var(--surface); padding: 7px 10px; border-radius: 8px; font-size: 12px; line-height: 1.45; max-width: 240px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c8, .c7, .c6, .c5, .c4 { grid-column: span 12; }
  .grid .c6.pair { grid-column: span 6; }
  .dims select { max-width: 140px; }
  .nav a span { display: none; }
  .nav a { padding: 8px 10px; }
}
@media (max-width: 860px) {
  .dims { display: none; }
  .filter-btn { display: inline-block; }
  .t .p3 { display: none; }
}
@media (max-width: 720px) {
  :root { --pad: 12px; --gap: 10px; --top-h: 52px; --bottom-h: 62px; }
  .nav { display: none; }
  .brand-t b { font-size: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 19px; }
  .grid .c6.pair { grid-column: span 12; }
  .card { padding: 12px; border-radius: 10px; }
  .ph h1 { font-size: 20px; }
  .chart { height: 200px; }
  .bars .row { grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; }

  .bottom {
    display: grid; grid-template-columns: repeat(7, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--line); height: calc(var(--bottom-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 500; min-width: 0; }
  .bottom a svg { width: 21px; height: 21px; }
  .bottom a.on { color: var(--accent); }

  /* tables become cards */
  .tblw { margin: 0; padding: 0; overflow: visible; }
  .tools .sort { display: inline-flex; gap: 6px; }
  .tools .sort select { max-width: 160px; }
  .t thead { display: none; }
  .t, .t tbody, .t tfoot { display: block; }
  .t tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .t tbody tr.go:hover td { background: none; }
  .t tbody tr.go:active { background: var(--bg); }
  .t td { border: 0; padding: 0 !important; text-align: left !important; white-space: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .t td::before { content: attr(data-l); display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
  .t td.nm { grid-column: 1 / -1; font-size: 14.5px; max-width: none; white-space: nowrap; }
  .t td.nm::before { display: none; }
  .t td.nm .s2 { white-space: nowrap; }
  .t .p2 { display: none; }
  .t tfoot tr { background: var(--bg); border-radius: 8px; padding: 10px; margin-top: 8px; border: 0; }
  .t tfoot td:empty { display: none; }
}
@media (max-width: 380px) {
  .t tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { padding: 6px 10px; }
}
@media (hover: none) { .nav a:not(.on):hover, .bars a.row:hover { background: none; } }

/* ---------- trends additions ---------- */
.kpi { position: relative; overflow: hidden; }
.kd { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-height: 18px; }
.kd .vs { color: var(--muted); }
.spark { display: block; width: 100%; height: 22px; margin-top: 6px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.pace { color: var(--text-2); font-size: 13px; margin: 0 0 var(--gap); line-height: 1.5; }
.pace b { color: var(--text); font-weight: 600; }
.pace.sub2 { color: var(--muted); font-size: 12.5px; margin-top: calc(-1 * var(--gap) + 8px); }
.chart.sm { height: 180px; }
.chart.lg { height: 280px; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .ln.cur { stroke: var(--accent); }
.chart .ln.prev { stroke: var(--muted); stroke-dasharray: 5 5; }
.chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.chart .xh { stroke: var(--text-2); stroke-width: 1; pointer-events: none; }
.legend i.ln { width: 16px; border-top-color: var(--muted); }
.seg.scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg.scroll::-webkit-scrollbar { display: none; }
.seg button { white-space: nowrap; }
.card-h { flex-wrap: wrap; }
.mini-h { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.inl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
details.data { margin-top: 10px; }
details.data summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; }
details.data .tools { margin-top: 10px; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
#movers { gap: 18px; }
#movers .row .v.up, #movers .row .v.down { font-weight: 600; }
@media (max-width: 720px) {
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .chart.lg { height: 230px; }
  .card-h .seg { width: 100%; }
  .pace { font-size: 12.5px; }
}

/* =====================================================================
   PHONE PASS — tuned for 375–440px (iPhone 15 Pro 393, 17 Pro Max 440)
   ===================================================================== */
.pace .ph-s { display: none; }
.sectabs { display: none; }
@media (max-width: 720px) { .top, .filters { transition: transform .22s ease; will-change: transform; } }
@media (max-width: 720px) {
  :root { --pad: 12px; --gap: 8px; --top-h: 46px; --bottom-h: 56px; }
  body { font-size: 14px; }
  /* chrome hides while scrolling down */
  body.bars-off .top { transform: translateY(-100%); }
  body.bars-off .filters { transform: translateY(calc(-1 * (var(--top-h) + var(--fh, 80px)))); }
  .top { padding-top: env(safe-area-inset-top); }
  .top-in { height: var(--top-h); padding: 0 var(--pad); }
  .logo { width: 28px; height: 28px; border-radius: 7px; font-size: 11px; }
  .brand { gap: 8px; }
  .brand-t b { font-size: 14px; }
  .brand-t small { font-size: 11px; }
  .filters { top: calc(var(--top-h) + env(safe-area-inset-top)); }
  .filters-in { padding: 7px var(--pad) 3px; gap: 8px; }
  .chip, .filter-btn { padding: 5px 11px; font-size: 13px; min-height: 32px; }
  .range { padding: 0 var(--pad) 6px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .range .ph-h { display: none; }

  /* page heading */
  .view { padding: 10px var(--pad) 16px; }
  .ph { margin: 0 0 10px; }
  .ph h1 { font-size: 19px; }
  .ph .sub { font-size: 12.5px; margin-top: 2px; gap: 4px 6px; line-height: 1.45; }
  .back { margin-bottom: 2px; font-size: 12.5px; }

  /* KPI: hero first card, compact 2-col rest */
  .kpis { gap: 8px; margin-bottom: 8px; }
  .kpi { padding: 9px 11px 8px; border-radius: 10px; }
  .kpi span { font-size: 11.5px; }
  .kpi b { font-size: 18px; margin: 1px 0 0; }
  .kpi .kd { gap: 4px; min-height: 16px; flex-wrap: nowrap; overflow: hidden; }
  .kpi i { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .kpi .vs { display: none; }
  .spark { height: 16px; margin-top: 4px; }
  .kpi:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 42%; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; }
  .kpi:first-child span { grid-column: 1; }
  .kpi:first-child b { grid-column: 1; font-size: 26px; }
  .kpi:first-child .kd { grid-column: 1; }
  .kpi:first-child .vs { display: inline; }
  .kpi:first-child .spark { grid-column: 2; grid-row: 1 / span 3; height: 46px; margin: 0; }
  .kpi:last-child:nth-child(even) { grid-column: 1 / -1; }
  .pace { font-size: 12px; margin-bottom: 8px; line-height: 1.45; }
  .pace .ph-l { display: none; } .pace .ph-s { display: inline; }
  .pace.sub2 { margin-top: 0; font-size: 11.5px; }

  /* cards + charts */
  .card { padding: 11px 12px; border-radius: 10px; }
  .card-h { margin-bottom: 8px; gap: 6px; }
  .card-h h2 { font-size: 13.5px; }
  .chart { height: 170px; }
  .chart.lg { height: 200px; }
  .chart.sm { height: 150px; }
  .chart .ax { font-size: 10px; }
  .legend { font-size: 11px; gap: 10px; margin-top: 4px; }
  .bars .row { padding: 6px 4px; margin: 0 -4px; gap: 8px; }
  .bars .nm, .bars .v { font-size: 13px; }

  /* section tabs on role pages */
  .sectabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px 0 8px; position: sticky; top: calc(var(--top-h) + var(--fh, 80px) + env(safe-area-inset-top)); z-index: 10; background: var(--bg); padding: 4px 0; transition: top .22s ease; }
  body.bars-off .sectabs { top: 0; }
  .sectabs::-webkit-scrollbar { display: none; }
  .sectabs button { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; white-space: nowrap; min-height: 32px; }
  .sectabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .grid.tabbed > [data-tab]:not(.tab-on) { display: none; }

  /* tables as dense cards */
  .tools { gap: 6px; margin-bottom: 6px; }
  .tools input[type=search] { height: 38px; font-size: 16px; flex-basis: 100%; }
  .tools .sort select, .tools .sort .btn { height: 32px; font-size: 13px; padding: 4px 8px; }
  .t tr { padding: 9px 0; gap: 3px 10px; }
  .t td { font-size: 13.5px; line-height: 1.3; }
  .t td::before { font-size: 10.5px; margin-bottom: 1px; }
  .t td.nm { font-size: 14px; margin-bottom: 3px; }
  .t td.nm .s2 { font-size: 11.5px; }
  .t .pill { font-size: 11px; padding: 1px 7px; }
  .meter { width: 36px; }
  .more-row .btn { width: 100%; height: 40px; }

  /* bottom nav: frosted, active pill */
  .bottom { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
  .bottom a { gap: 2px; font-size: 10px; letter-spacing: -.01em; position: relative; }
  .bottom a svg { width: 22px; height: 22px; padding: 1px; }
  .bottom a.on svg { background: var(--accent-soft); border-radius: 8px; width: 40px; padding: 1px 9px; }

  /* sheet + inputs: 16px stops iOS zoom-on-focus */
  input, select, textarea { font-size: 16px !important; }
  .setg input, .setg select { height: 34px; width: 92px; }
  .facts { font-size: 13px; }
  #movers .row { grid-template-columns: minmax(0,1fr) auto !important; }
  #movers .row .v:last-child { display: none; }
}
@media (min-width: 420px) and (max-width: 720px) {
  /* Pro Max / Plus widths: a bit more air */
  :root { --pad: 14px; }
  .kpi b { font-size: 19px; }
  .kpi:first-child b { font-size: 28px; }
}
@media (max-width: 380px) {
  .kpi:first-child b { font-size: 23px; }
  .bottom a { font-size: 9.5px; }
}
@media (display-mode: standalone) {
  .top { padding-top: env(safe-area-inset-top); }
}

/* =====================================================================
   PHONE PASS 2 — from the six-lens audit (touch, iOS, roles, visual)
   ===================================================================== */
/* contrast tokens (WCAG AA for small text on the light surface) + shared track/fill tokens */
:root { --muted: #6e6d68; --bad: #c62f2e; --warn: #8a5a00; --accent: #1f6fd1; --accent-fill: var(--accent); --track: #ecebe7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #3987e5; --accent-fill: #2b72cc; --track: #2a2a28; --muted: #9a9993; } }
:root[data-theme="dark"] { --accent-fill: #2b72cc; --track: #2a2a28; --muted: #9a9993; }
html { -webkit-tap-highlight-color: transparent; }
a, button, select, .chip, .t tr.go, .bars a.row { touch-action: manipulation; }
.logo, .btn.pri { background: var(--accent-fill); }
.btn.pri { border-color: var(--accent-fill); }
.bars .tr, .meter { background: var(--track); }
.pill { background: var(--track); }
.pill.info { background: var(--accent-soft); color: var(--accent-ink); }
button.pill { border: 0; font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; line-height: 1.5; }
.chip.on { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.ph-only { display: none !important; }
.empty { text-align: center; padding: 18px 8px; }
.spark .sa { fill: var(--accent); opacity: .12; stroke: none; }
.kpi:first-child .spark polyline { stroke-width: 2; }

/* header meta = tap to refresh */
.top-in { gap: 14px; }
.meta { border: 0; background: none; color: var(--muted); font: inherit; font-size: 11.5px; padding: 4px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.meta.warn { color: var(--warn); background: var(--warn-soft); }
@media (hover: hover) { .meta:hover { color: var(--text); background: var(--bg); } }
.brand-t small { display: none; }

/* page head with "my page" star */
.ph { flex-wrap: nowrap; align-items: flex-start; }
.ph-t { min-width: 0; }
.mebtn { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; min-height: 36px; }
.mebtn svg { width: 16px; height: 16px; }
.mebtn.on { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.mebtn.on svg { fill: currentColor; }

/* bar list rows: name + value on one line, thin bar under (all sizes) */
.bars .row.bl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm v" "tr tr"; row-gap: 5px; }
.bars .row.bl .nm { grid-area: nm; }
.bars .row.bl .v { grid-area: v; font-weight: 600; }
.bars .row.bl .tr { grid-area: tr; height: 5px; }
.bars .row.more-r { color: var(--accent-ink); }
.bars .row.more-r .nm { color: var(--accent-ink); font-weight: 500; }
.bars div.row.more-r { opacity: .7; color: var(--text-2); }
.bars .row.idl, .bars .row.mv { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.bars .row.mv { grid-template-columns: minmax(0, 1fr) auto auto; }
.bars .row .nm .s2 { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.bars .row .v.pc { min-width: 48px; color: var(--muted); font-weight: 400; }
.bars .dl { font-size: 11px; margin-left: 4px; font-weight: 500; }

/* sorted column highlight + tidy numeric cells */
.t td:not(.l) { white-space: nowrap; }
.t td .dl { margin-left: 3px; }

/* skeleton */
.skel .sk, .kpi.sk { background: var(--track); border-color: transparent; animation: skp 1.2s ease-in-out infinite alternate; }
.sk-h1 { height: 24px; width: 40%; border-radius: 6px; margin: 4px 0 8px; }
.sk-sub { height: 14px; width: 60%; border-radius: 6px; margin-bottom: 14px; }
.kpi.sk { height: 86px; }
.sk-chart { height: 230px; }
@keyframes skp { from { opacity: .55; } to { opacity: 1; } }

/* toast */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom-h) + 16px + env(safe-area-inset-bottom)); z-index: 70; background: var(--text); color: var(--surface); padding: 9px 14px; border-radius: 999px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: calc(100% - 32px); text-align: center; }

/* filters sheet: scroll lock, safe dvh, period grid, open animation */
.lock, .lock body { overflow: hidden; }
.sheet-card { max-height: 85vh; max-height: 85dvh; overscroll-behavior: contain; animation: sheetup .22s cubic-bezier(.2,.8,.2,1); }
.sheet-bg { touch-action: none; animation: fadein .2s; }
@keyframes sheetup { from { transform: translateY(100%); } }
@keyframes fadein { from { opacity: 0; } }
.x { min-width: 44px; min-height: 44px; }
.sheet-l { font-size: 12px; color: var(--muted); margin-bottom: -4px; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pgrid .chip { min-height: 40px; padding: 6px 4px; text-align: center; }
.m-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-card input[type=date] { -webkit-appearance: none; appearance: none; display: block; text-align: left; }
@media (prefers-reduced-motion: reduce) { .sheet-card, .sheet-bg, .skel .sk, .kpi.sk { animation: none; } }

/* range line: dates + filter + visible clear */
.range { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.range .rf { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#clr { font-weight: 600; color: var(--accent-ink); }

/* hover only where a mouse exists; press feedback on touch */
@media (hover: none) {
  .nav a:not(.on):hover, .chip:not(.on):hover, .btn:not(.pri):hover { background: inherit; color: inherit; }
  .chip.on:hover { background: var(--accent-soft); color: var(--accent-ink); }
  .btn.pri:hover { background: var(--accent-fill); color: #fff; }
  .t tbody tr.go:hover td { background: none; }
  .chip:active, .btn:active, .sectabs button:active, .bottom a:active, .mebtn:active, .meta:active { opacity: .65; }
  .t tbody tr.go:active td, .bars a.row:active { background: var(--bg); }
}

/* landscape notch / Dynamic Island */
.top-in, .filters-in, .range, .view { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }

@media (max-width: 720px) {
  .ph-only { display: initial !important; }
  .ph-hide, .pace .ph-h, .ph .sub .ph-h, .range .ph-h, .sub2.ph-h { display: none !important; }
  span.pill.ph-only, .t td.nm .s2 .ph-only { display: inline-block !important; margin-right: 5px; vertical-align: 1px; }
  .kmore.ph-only { display: block !important; width: 100%; margin: 0 0 var(--gap); height: 40px; color: var(--accent-ink); }

  /* header: brand + refresh meta on one row */
  .meta { margin-left: auto; max-width: 52%; font-size: 11px; }
  .brand-t b { font-size: 14.5px; }

  /* solid sticky bars are cheaper than blur on iPhone; bars animate only on phones */
  .filters { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bottom { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .bottom a span { font-size: 10.5px; }

  /* period chips: fade edge + bigger targets */
  .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
  .chip { min-height: 36px; position: relative; }
  .range { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .range b, #clr { flex: none; }
  #clr { padding: 6px 0; }

  /* home: hero + 4 tiles, rest behind "More numbers"; "Needs a load" before the chart */
  .fold .kpi:nth-child(n+6) { display: none; }
  .fold.all .kpi:nth-child(n+6) { display: block; }
  .fold .kpi:last-child:nth-child(even) { grid-column: auto; }
  .fold.all .kpi:last-child:nth-child(even) { grid-column: 1 / -1; }
  .kpi:not(:first-child) .spark { display: none; }
  .grid > .idle-card { order: -1; }

  /* bars on phones: separators + taller rows */
  .bars { gap: 0; }
  .bars .row + .row { border-top: 1px solid var(--line); }
  .bars a.row { min-height: 44px; }
  .bars .row.bl { padding: 8px 4px; }
  .bars .row.mv .v.pc { display: none; }
  .bars .row.mv { grid-template-columns: minmax(0, 1fr) auto !important; }

  /* section tabs: full-bleed scroller with fade */
  .sectabs { margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 6px var(--pad); scroll-padding-inline: var(--pad); transition: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .sectabs button { min-height: 36px; }
  .sectabs button.on { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
  body.bars-off .sectabs { box-shadow: 0 1px 0 var(--line); }
  .seg.scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .seg button { min-height: 36px; }

  /* cards: sorted value always visible, a › on tappable rows, 3 stats per row at every width */
  .t tr { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 3px 8px; }
  .t td.sk.p2, .t td.sk.p3 { display: block; }
  .t td.sk:not(.nm) { color: var(--accent-ink); }
  .t td .dl { font-size: 10.5px; margin-left: 2px; }
  .t tbody tr.go { position: relative; padding-right: 18px; }
  .t tbody tr.go::after { content: '›'; position: absolute; right: 2px; top: 10px; color: var(--muted); font-size: 18px; line-height: 1; }
  .t td.sk.nk { display: none !important; }
  .t td.nm .s2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tools .sort { flex: 1 1 100%; }
  .tools .sort select { flex: 1; max-width: none; }
  .tools .sort select, .tools .sort .dir { height: 36px; }
  .tools .sort .dir { min-width: 76px; font-size: 13px; }
  .back { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; }
  .mebtn span { display: none; }
  .mebtn { padding: 6px 9px; }
  .meter { width: 44px; height: 5px; border-radius: 3px; }
  .note { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .t td { font-size: 13px; }
  .meta { max-width: 44%; }
}

/* review fixes: desktop chips wrap instead of clipping; fades never hide the last chip/tab */
@media (min-width: 861px) {
  .filters-in { flex-wrap: wrap; }
  .chips { flex-wrap: wrap; overflow: visible; }
  .dims { margin-left: auto; }
}
@media (max-width: 720px) {
  .chips::after { content: ""; flex: 0 0 20px; }
  .sectabs::after, .seg.scroll::after { content: ""; flex: 0 0 18px; }
  .seg.scroll { display: flex; }
}