/* shared by /desk and /sim: the dashboard's look (headline numbers, cards, small charts) */
:root{ --up:#3E5B45; --watch:#A9782A; --down:#8B2020; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --up:#8DB396; --watch:#D3A55A; --down:#CE6A5E; } }
:root[data-theme="dark"]{ --up:#8DB396; --watch:#D3A55A; --down:#CE6A5E; }

/* phase II: the page sits blurred behind a panel until data-phase="2" comes off <body> */
:root{--veil:rgba(244,236,216,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--veil:rgba(29,27,24,.55)}}
:root[data-theme="dark"]{--veil:rgba(29,27,24,.55)}
.gate{display:none}
body.gated .page{filter:blur(7px);pointer-events:none;user-select:none}
body.gated .gate{display:grid;position:fixed;inset:0;z-index:15;place-items:center;padding:var(--gutter);background:var(--veil)}
.gate-card{max-width:30rem;width:100%;border:1px solid var(--rule);border-radius:var(--r-card);background-color:var(--paper);background-image:var(--grain);padding:clamp(24px,4vw,40px);display:grid;gap:16px;box-shadow:0 30px 80px -30px rgba(43,41,36,.35)}
.gate-card h2{font-size:clamp(1.7rem,3.4vw,2.2rem);letter-spacing:-.04em;line-height:1.05}
.gate-card p{color:var(--ink-2)}
.gate-card .when{font-family:var(--fell);font-style:italic;font-size:1.15rem;color:var(--oxblood)}
.gate-card .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.crumb{font-family:var(--fell);font-style:italic;color:var(--ink-2);font-size:1.1rem;margin-left:14px;margin-right:auto}
.page{display:grid;gap:clamp(20px,2.4vw,28px);padding-block:clamp(36px,5vw,64px) clamp(64px,8vw,96px)}
.page-head{display:grid;gap:12px;max-width:44em}
.page-head h1{font-size:var(--t-h2);letter-spacing:-.038em;line-height:1.04}
.page-head p{color:var(--ink-2)}
.status{font-size:var(--t-small);color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 4px color-mix(in srgb,var(--up) 22%,transparent);display:inline-block;flex:none}
.dot.off{background:var(--ink-3);box-shadow:none}
.dot.sample{background:var(--watch);box-shadow:0 0 0 4px color-mix(in srgb,var(--watch) 22%,transparent)}

.card{border:1px solid var(--rule);border-radius:var(--r-card);background:color-mix(in srgb,var(--paper-2) 84%,transparent);padding:clamp(18px,2.4vw,28px);min-width:0;display:grid;gap:18px;align-content:start}
.card h2{font-size:var(--t-h3);letter-spacing:-.02em}
.card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.card-head p,.note{font-size:var(--t-small);color:var(--ink-3)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:var(--r-card);background:color-mix(in srgb,var(--paper-2) 84%,transparent);overflow:hidden}
.kpi{padding:clamp(18px,2.4vw,28px);display:grid;gap:6px;align-content:start;min-width:0}
.kpi + .kpi{border-left:1px solid var(--rule)}
.kpi .k{font-size:var(--t-small);color:var(--ink-2)}
.kpi .v{font-size:clamp(1.7rem,3.2vw,2.6rem);letter-spacing:-.045em;line-height:1.05;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi.lead .v{color:var(--up)}
.kpi .h{font-size:var(--t-micro);color:var(--ink-3)}
.none,.kpi .v.none{color:var(--ink-3)}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi:nth-child(3){border-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--rule)}}
@media (max-width:480px){.kpis{grid-template-columns:1fr}.kpi + .kpi{border-left:0;border-top:1px solid var(--rule)}}

.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,28px)}
@media (max-width:860px){.row{grid-template-columns:1fr}}

.lines{margin:0;display:grid}
.lines div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-top:1px solid var(--rule);font-size:.95rem}
.lines div:first-child{border-top:0}
.lines dt{color:var(--ink-2)}
.lines dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}

table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:10px 8px;border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left}
th{font-weight:500;color:var(--ink-3);font-size:var(--t-micro)}
td.empty{text-align:left;color:var(--ink-3)}
.scroll{overflow-x:auto}

svg.chart{display:block;width:100%;height:auto}
svg.chart .grid{stroke:var(--rule);stroke-dasharray:2 4}
svg.chart .ax{fill:var(--ink-3);font:12px var(--sans);font-variant-numeric:tabular-nums}

.seg{display:inline-flex;justify-self:start;border:1px solid var(--rule);border-radius:999px;padding:3px;gap:2px}
.seg button{font:500 var(--t-micro) var(--sans);color:var(--ink-2);background:transparent;border:0;border-radius:999px;padding:6px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.field{display:grid;gap:8px}
.field label,.field .lab{font-size:var(--t-small);color:var(--ink-2);display:flex;justify-content:space-between;gap:12px}
.field label b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.money{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);padding:8px 14px}
.money:focus-within{border-color:var(--oxblood);box-shadow:0 0 0 3px var(--oxblood-soft)}
.money input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:500 1.4rem var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding:2px 0}
.money span{color:var(--ink-2);font-weight:500}
input[type=range]{width:100%;accent-color:var(--oxblood)}
.big{display:grid;gap:4px}
.big b{font-size:clamp(2rem,4vw,3rem);font-weight:500;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--up)}
.big span{font-size:var(--t-small);color:var(--ink-2)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:var(--t-micro);border:1px solid var(--rule);border-radius:999px;padding:3px 10px;color:var(--ink-2)}