/* ---------- presenter bar: the demo's own controls, kept quiet and out of the product ---------- */
:root { --presenter-h: 50px; }
.presenter { position: sticky; top: 0; z-index: 50; box-sizing: border-box; height: var(--presenter-h); display: flex; align-items: center; gap: var(--s3); padding: 8px var(--s4); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--separator); font: var(--t-footnote); }
.presenter-mark { display: flex; align-items: center; gap: 8px; color: var(--ink-2); margin-right: auto; }
.presenter-mark i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed var(--ink-3); }
@media (max-width: 600px) { .presenter .seg, .pm-farm { display: none; } .presenter { gap: var(--s2); } }
.presenter select { background: var(--fill); border: 0; border-radius: 8px; padding: 6px 10px; font: var(--t-footnote); }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fill-strong); }
.seg button { padding: 5px 12px; border-radius: 7px; font: var(--t-footnote); font-weight: 600; color: var(--ink-2); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--touch); padding: 0 20px; border-radius: var(--r-control); border: 2px solid var(--obj); font: var(--t-headline); white-space: nowrap; box-shadow: var(--press-shadow); transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--press-down); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface-raised); }
.btn-secondary:hover { background: var(--tag); }
.btn-plain { min-height: 32px; padding: 0 4px; border: 0; box-shadow: none; color: var(--ink-2); font: var(--t-subhead); font-weight: 650; text-decoration: underline; text-decoration-color: var(--separator-strong); text-underline-offset: 3px; }
.btn-plain:hover { color: var(--ink); }
.btn-lg { min-height: 52px; padding: 0 22px; border-radius: 12px; }

/* ---------- source mark: who or what says so ---------- */
.src { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; }
.src-person { box-shadow: inset 0 0 0 1.6px var(--ink-2); }
.src-sensor { background: var(--ink-2); }
.src-snowball { box-shadow: inset 0 0 0 1.6px var(--accent); background: radial-gradient(circle, var(--accent) 0 1.4px, transparent 1.6px); }
.src-stale { box-shadow: inset 0 0 0 1.6px var(--orange); background: transparent; }

/* ---------- ear tag: a cow's identity, as the farm reads it ---------- */
.eartag { --s: 36px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: calc(var(--s) * 1.1); background: var(--tag-yellow); color: var(--tag-ink); border-radius: 44% 44% 16% 16% / 36% 36% 14% 14%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); }
.eartag::before { content: ""; position: absolute; top: 9%; left: 50%; width: 15%; height: 13%; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, 0.26); }
.eartag b { font: 800 calc(var(--s) * 0.29) / 1 var(--font); letter-spacing: -0.02em; margin-top: 18%; font-variant-numeric: tabular-nums; }
.eartag.lg { --s: 64px; }
.eartag.xl { --s: 96px; }

/* ---------- chips: state in a word ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--r-control); font: var(--t-caption); letter-spacing: var(--caps); text-transform: uppercase; white-space: nowrap; }
.chip-red { background: var(--red-soft); color: var(--red); }
.chip-orange { background: var(--orange-soft); color: var(--orange); }
.chip-green { background: var(--green-soft); color: var(--green); }
.chip-blue { background: var(--blue-soft); color: var(--blue); }
.chip-neutral { background: var(--fill-strong); color: var(--ink-2); }
.chip-red { box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- sections and grouped lists ---------- */
.section { display: grid; gap: var(--s3); align-content: start; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 0 var(--s1); }
.section-head h2 { font: var(--t-caption); font-size: 0.8125rem; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-2); }
.section-head p { font: var(--t-subhead); color: var(--ink-2); }
.group { background: var(--surface); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--separator-strong); overflow: hidden; }
.group > * + * { box-shadow: inset 0 1px 0 var(--separator); }

.row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 60px; padding: 10px var(--s4); text-align: left; transition: background var(--fast) var(--ease); }
button.row:hover, a.row:hover { background: var(--fill); }
button.row:active, a.row:active { background: var(--fill-strong); }
.row-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--fill-strong); color: var(--ink-2); }
.row-icon.tone-red { background: var(--red-soft); color: var(--red); }
.row-icon.tone-orange { background: var(--orange-soft); color: var(--orange); }
.row-icon.tone-green { background: var(--green-soft); color: var(--green); }
.row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.row-title { font: var(--t-headline); }
.row.quiet .row-title { font: var(--t-callout); }
.row-sub { display: block; font: var(--t-subhead); color: var(--ink-2); }
.row-sub .src { margin-right: 6px; }
.row-trail { flex: none; display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); font: var(--t-subhead); }
.chev { color: var(--ink-3); }

/* ---------- the brief: one sentence that says how the farm is ---------- */
.brief { display: flex; gap: var(--s4); align-items: flex-start; }
.brief-mark { flex: none; margin-top: 3px; color: var(--accent); }
.brief-mark.stale { color: var(--orange); }
.brief p { font: 500 1.25rem/1.45 var(--font); letter-spacing: -0.01em; max-width: 46ch; text-wrap: pretty; }
.brief p b { font-weight: 700; }
.brief .asof { display: block; margin-top: 6px; font: var(--t-footnote); color: var(--ink-3); }

/* ---------- decision card ---------- */
.decision { background: var(--surface-raised); border-radius: var(--r-card); border: 2px solid var(--obj); box-shadow: var(--lift); padding: var(--s5); display: grid; gap: var(--s4); }
.decision-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.decision h3 { font: var(--t-title2); letter-spacing: -0.02em; text-wrap: balance; }
.decision-body { font: var(--t-callout); color: var(--ink-2); max-width: 58ch; }
.decision-rec { display: grid; gap: 4px; padding: var(--s3) var(--s4); border-radius: var(--r-control); background: var(--accent-soft); border-left: 4px solid var(--accent); }
.decision-rec small { font: var(--t-caption); color: var(--accent-deep); letter-spacing: var(--caps); text-transform: uppercase; }
.decision-rec p { font: var(--t-callout); }
.decision-evidence { display: flex; flex-wrap: wrap; gap: 6px 14px; font: var(--t-footnote); color: var(--ink-2); }
.decision-evidence span { display: inline-flex; align-items: center; gap: 6px; }
.decision-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.decision-actions .btn-plain { margin-left: auto; }
.decision.resolved { box-shadow: 0 0 0 1px var(--separator); }

/* ---------- pulse: the farm's vital signs ---------- */
.pulse-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: var(--s3); width: 100%; min-height: 72px; padding: 12px var(--s4); text-align: left; transition: background var(--fast) var(--ease); }
.pulse-row:hover { background: var(--fill); }
.pulse-label { font: var(--t-subhead); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.pulse-value { font: 700 1.3125rem/1.2 var(--font); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.pulse-value small { font: var(--t-subhead); color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.pulse-note { font: var(--t-footnote); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.pulse-note .up { color: var(--green); }
.pulse-note .down { color: var(--red); }
.pulse-note .warn { color: var(--orange); }
.spark, .spark-slot { width: 84px; height: 30px; overflow: visible; }
.spark path.line { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: var(--fill-strong); stroke: none; }
.spark circle { fill: var(--ink); }

/* ---------- history rows ---------- */
.trail-lead { flex: none; display: flex; align-items: center; gap: 8px; min-width: 56px; font: var(--t-footnote); color: var(--ink-2); }


/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 120px; z-index: 80; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 14px 20px; border-radius: var(--r-control); background: var(--ink); color: var(--bg); font: var(--t-headline); box-shadow: var(--float); animation: stamp-in 360ms var(--stamp) both; }
@keyframes stamp-in { from { opacity: 0; transform: translate(-50%, 0) scale(1.12) rotate(-1.5deg); } }

/* ---------- empty and calm states ---------- */
.calm { display: grid; gap: 6px; padding: var(--s6) var(--s5); text-align: center; color: var(--ink-2); font: var(--t-callout); }
.calm strong { color: var(--ink); font: var(--t-headline); }

/* ---------- page head extras ---------- */
.back { display: inline-flex; align-items: center; gap: 2px; margin-left: -6px; margin-bottom: var(--s2); padding: 4px 6px; border-radius: 8px; font: var(--t-callout); font-weight: 600; color: var(--ink-2); width: fit-content; }
.back:hover { color: var(--ink); background: var(--fill); }
.lede { font: 450 1.125rem/1.5 var(--font); color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }

/* ---------- product segmented control (larger than the presenter's) ---------- */
.seg-product { width: fit-content; max-width: 100%; overflow-x: auto; }
.seg-product button { padding: 7px 14px; font: var(--t-subhead); font-weight: 600; white-space: nowrap; }
.seg-product button[aria-checked="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* ---------- panels: a card with its own padding for charts, forms and facts ---------- */
.panel { background: var(--surface); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--separator-strong); padding: var(--s5); display: grid; gap: var(--s4); }
.panel-title { font: var(--t-title3); }
.panel-note { font: var(--t-footnote); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }

/* ---------- big number ---------- */
.stat { display: grid; gap: 4px; }
.stat-value { font: 750 3rem/1 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-value small { font: 600 1.125rem/1 var(--font); color: var(--ink-2); margin-left: 6px; letter-spacing: 0; }
.stat-label { font: var(--t-callout); color: var(--ink-2); }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--s8); }

/* ---------- vertical bars ---------- */
.bars { display: grid; gap: 8px; }
.bars-plot { position: relative; height: 180px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; border-bottom: 1px solid var(--separator-strong); }
.bar-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.bar { width: min(100%, 44px); border-radius: 2px 2px 0 0; background: var(--fill-strong); transition: height var(--slow) var(--ease-out); }
.bar.latest { background: var(--ink); }
.bar.over { background: var(--red); }
.bar.pending { height: 36px; background: transparent; border: 1.5px dashed var(--separator-strong); }
.bars.compact .bars-plot { height: 140px; }
.bar-val { font: var(--t-caption); color: var(--ink-2); white-space: nowrap; }
.phone .bars-plot, .phone .bars-axis { gap: 4px; }
.bars-axis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; font: var(--t-caption); color: var(--ink-3); text-align: center; }
.bars-line { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--red); z-index: 1; pointer-events: none; }
.bars-line span { position: absolute; right: 0; top: -20px; font: var(--t-caption); color: var(--red); background: var(--surface); padding: 0 4px; }

/* ---------- horizontal breakdown ---------- */
.breakdown { display: grid; gap: 10px; }
.bd-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr minmax(44px, auto); align-items: center; gap: var(--s3); font: var(--t-subhead); }
.bd-label { color: var(--ink); }
.bd-track { height: 10px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.bd-fill { display: block; height: 100%; border-radius: 5px; background: var(--ink-2); transition: width var(--slow) var(--ease-out); }
.bd-fill.muted { background: var(--ink-3); }
.bd-fill.red { background: var(--red); }
.bd-n { text-align: right; color: var(--ink-2); }
.bd-total { padding-top: 8px; border-top: 1px solid var(--separator); font-weight: 650; }
.bd-total .bd-n { color: var(--ink); }

/* ---------- form field ---------- */
.field { display: grid; gap: 6px; }
.field label { font: var(--t-subhead); font-weight: 600; }
.field textarea { resize: vertical; min-height: 64px; padding: 10px 12px; border-radius: var(--r-control); border: 1px solid var(--separator-strong); background: var(--surface-raised); font: var(--t-body); }
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field small { font: var(--t-footnote); color: var(--ink-2); }

/* ---------- facts ---------- */
.facts { display: grid; margin: 0; }
.facts div { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: var(--s3); padding: 12px 0; border-top: 1px solid var(--separator); }
.facts div:first-child { border-top: 0; padding-top: 0; }
.facts dt { font: var(--t-subhead); color: var(--ink-2); }
.facts dd { margin: 0; font: var(--t-callout); display: flex; align-items: baseline; gap: 8px; }
.facts dd .src { transform: translateY(-1px); }

/* ---------- record hero ---------- */
.hero { display: flex; align-items: center; gap: var(--s5); }
.hero-main { display: grid; gap: 6px; }
.hero-main h1 { font: var(--t-large); letter-spacing: -0.028em; }
.hero-main p { font: var(--t-callout); color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.phone .two { grid-template-columns: 1fr; }
.phone .stat-value { font-size: 2.4rem; }
.phone .bd-row { grid-template-columns: minmax(96px, 130px) 1fr 36px; }
.phone .facts div { grid-template-columns: 110px 1fr; }

.lede.ink, .decision-body.ink { color: var(--ink); }
.decision-evidence.stacked { display: grid; gap: 8px; }
.decision-top.wrap { flex-wrap: wrap; }
.panel-note .down, .stat .down { color: var(--red); }
.record-id { font: 500 0.875rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- dot plot ---------- */
.dots { display: grid; gap: 8px; }
.dots-plot { position: relative; height: 160px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--separator-strong); }
.dot-col { position: relative; }
.dot { position: absolute; left: 50%; width: 14px; height: 14px; margin: 0 0 -7px -7px; border-radius: 50%; background: var(--ink-3); transition: bottom var(--slow) var(--ease-out); }
.dot.latest { background: var(--ink); box-shadow: 0 0 0 4px var(--fill-strong); }
.dot.over { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.dot.pending { background: transparent; border: 1.5px dashed var(--separator-strong); }
.dot-val { position: absolute; left: 0; right: 0; text-align: center; font: var(--t-caption); color: var(--ink-2); }

/* Grid and flex children may shrink below their content; wide parts scroll inside themselves. */
.stack > *, .stack-lg > *, .panel > *, .two > *, .today > * { min-width: 0; }
.stat-row > * { min-width: 0; }

/* ---------- steps ---------- */
.steps { display: grid; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); padding-bottom: var(--s5); }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--separator-strong); }
.step:last-child::before { display: none; }
.step.done::before { background: var(--green); }
.step-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--separator-strong); color: #fff; }
.step.done .step-dot { background: var(--green); box-shadow: none; }
.step.now .step-dot { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-soft); }
.step-body { display: grid; gap: 3px; padding-top: 3px; }
.step-head { display: flex; align-items: baseline; gap: 10px; font: var(--t-headline); }
.step-head span { font: var(--t-footnote); color: var(--ink-2); }
.step.later .step-head, .step.later .step-text { color: var(--ink-3); }
.step-text { font: var(--t-callout); }

/* ---------- progress ---------- */
.progress { height: 8px; border-radius: 4px; background: var(--fill-strong); overflow: hidden; }
.progress-fill { display: block; height: 100%; border-radius: 4px; background: var(--green); transition: width var(--slow) var(--ease-out); }
.progress-fill.orange { background: var(--orange); }

.stat-value.sm { font-size: 1.75rem; }
.stat-value.muted, .money-amt.muted { color: var(--ink-2); }
.money-amt { font: 650 1rem/1 var(--font); color: var(--ink); }
.pulse-note .up, .panel-note .up, .stat .up { color: var(--green); }

/* ---------- demo-only controls ---------- */
.sample-controls { display: grid; gap: 10px; padding: var(--s4); border-radius: var(--r-card); border: 1.5px dashed var(--separator-strong); }
.sample-controls p { display: flex; align-items: center; gap: 8px; font: var(--t-footnote); color: var(--ink-2); }
.sample-controls p span { width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed var(--ink-3); }
.sample-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sample-actions button { min-height: 36px; padding: 0 14px; border-radius: 9px; background: var(--fill); font: var(--t-subhead); font-weight: 600; }
.sample-actions button:hover { background: var(--fill-strong); }

.needs { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; font: var(--t-callout); }

/* ---------- the barn plan ---------- */
.plan-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 1000px) { .plan-row { grid-template-columns: 1fr; } }
.plan { position: relative; aspect-ratio: 5 / 3; border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--separator); overflow: hidden;
  background-image: linear-gradient(var(--fill) 1px, transparent 1px), linear-gradient(90deg, var(--fill) 1px, transparent 1px); background-size: 5% 8.333%; }
.plan.editing { cursor: crosshair; box-shadow: 0 0 0 2px var(--accent); }
.plan-passage { position: absolute; left: 3%; right: 3%; top: 44%; height: 14%; border-radius: 10px; background: var(--fill-strong); display: grid; place-items: center; }
.plan-passage span { font: var(--t-caption); color: var(--ink-3); letter-spacing: 0.04em; }
.plan-north { position: absolute; right: 12px; bottom: 10px; font: var(--t-caption); color: var(--ink-3); }
.zone { position: absolute; display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-raised); box-shadow: 0 0 0 1.5px var(--separator-strong); text-align: left; transition: left var(--slow) var(--ease-out), top var(--slow) var(--ease-out), box-shadow var(--fast) var(--ease); overflow: hidden; }
.zone:hover:not(:disabled) { box-shadow: 0 0 0 1.5px var(--ink-2); }
.zone:disabled { cursor: default; }
.zone.selected { box-shadow: 0 0 0 2.5px var(--ink), var(--lift); z-index: 2; }
.zone.tone-orange { background: color-mix(in srgb, var(--orange-soft) 60%, var(--surface-raised)); }
.zone small { font: var(--t-caption); color: var(--ink-2); }
.zone b { font: var(--t-headline); }
.zone span { font: var(--t-footnote); color: var(--ink-2); }
.zone .cam { position: absolute; right: 8px; top: 8px; color: var(--ink-3); }
.phone .zone { padding: 6px 8px; border-radius: 9px; }
.phone .zone b { font: var(--t-footnote); font-weight: 650; }
.phone .zone span, .phone .zone small { display: none; }
.claims { display: grid; gap: 10px; }
.claims p { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: baseline; font: var(--t-callout); }
.claims time { font: var(--t-footnote); color: var(--ink-2); }
.nudge { display: flex; gap: 6px; }
.nudge .btn { min-width: 44px; padding: 0; }
.input { height: 44px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--separator-strong); background: var(--surface-raised); font: var(--t-body); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- camera ---------- */
.camera { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: #0d0c0a; aspect-ratio: 4 / 3; }
.camera img { width: 100%; height: 100%; object-fit: cover; }
.camera figcaption { position: absolute; left: 12px; bottom: 12px; }
.camera-tag { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; font: var(--t-caption); backdrop-filter: blur(6px); }
.camera-empty { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; color: rgba(255, 255, 255, 0.55); font: var(--t-subhead); }

/* ---------- weather ---------- */
.hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); text-align: center; }
.hours div { display: grid; gap: 4px; padding: 10px 0; border-radius: 12px; background: var(--fill); }
.hours span { font: var(--t-footnote); color: var(--ink-2); }
.hours b { font: 700 1.25rem/1 var(--font); }
.hours small { font: var(--t-caption); color: var(--ink-3); }
.hours small.wet { color: var(--blue); }
.phone .hours { grid-template-columns: repeat(3, 1fr); }

/* ---------- line chart ---------- */
.lc { margin: 0; display: grid; gap: 6px; }
.lc svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.lc svg:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 4px; border-radius: 8px; }
.lc-read { font: var(--t-subhead); font-weight: 600; color: var(--ink-2); min-height: 1.4em; }
.lc-tick line { stroke: var(--separator); stroke-width: 1; }
.lc text { font-size: 12px; }
.lc-tick text { fill: var(--ink-3); font-family: var(--font); font-weight: 600; text-anchor: end; font-variant-numeric: tabular-nums; }
.lc-ref line { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.lc-ref text { fill: var(--ink-2); font-family: var(--font); font-weight: 600; text-anchor: end; }
.lc-area { fill: var(--accent-soft); }
.lc-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lc-pt { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.lc-x { fill: var(--ink-3); font-family: var(--font); font-weight: 600; text-anchor: middle; }
.lc-cursor line { stroke: var(--ink-2); stroke-width: 1; }
.lc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }

/* ---------- a compact readings table: the source is said once, above it ---------- */
.readings { width: 100%; border-collapse: collapse; font: var(--t-callout); font-variant-numeric: tabular-nums; }
.readings th { font: var(--t-caption); color: var(--ink-3); text-align: right; padding: 0 0 8px; }
.readings th:first-child, .readings td:first-child { text-align: left; }
.readings td { padding: 9px 0; border-top: 1px solid var(--separator); text-align: right; }
.readings td.up { color: var(--green); }
.readings td.down { color: var(--red); }
.readings tr.latest td { font-weight: 650; }

/* ---------- Snowball's reading of a number ---------- */
.insight { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: var(--s4) var(--s5); border-radius: var(--r-card); background: var(--surface-raised); border: 2px solid var(--obj); box-shadow: var(--lift); }
.insight .ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); background: #211d15; color: #e8a22b; }
.insight p { font: 480 1.0625rem/1.5 var(--font); }
.insight small { display: block; margin-top: 6px; font: var(--t-footnote); color: var(--ink-2); }
.drivers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--separator); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 0 0 1px var(--separator); }
.drivers a, .drivers div { display: grid; gap: 3px; padding: var(--s4); background: var(--surface); }
.drivers a:hover { background: color-mix(in srgb, var(--surface) 92%, var(--ink)); }
.drivers small { font: var(--t-footnote); color: var(--ink-2); }
.drivers b { font: 700 1.25rem/1.2 var(--font); font-variant-numeric: tabular-nums; }
.drivers span { font: var(--t-footnote); color: var(--ink-2); }
.phone .drivers { grid-template-columns: 1fr; }

/* ---------- Snowball: its mark, and its conversation ---------- */
.snow-mark.lg { width: 48px; height: 48px; }
.snow-mark.stale { color: var(--orange); }
/* Snowball's mark is the same in every light: ink square, marigold spark. */
.snow-mark { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); background: #211d15; color: #e8a22b; box-shadow: var(--stamp-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ask { display: grid; gap: var(--s3); }
.ask-thread { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.ask-thread li { display: grid; gap: var(--s3); }
.ask-q { justify-self: end; max-width: 80%; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--fill-strong); font: var(--t-callout); }
.ask-a { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.ask-a > div { display: grid; gap: 10px; }
.ask-a p { font: 460 1.0625rem/1.5 var(--font); max-width: 62ch; }
.ask-src { display: flex; flex-wrap: wrap; gap: 6px 14px; font: var(--t-footnote) !important; color: var(--ink-2); }
.ask-src span { display: inline-flex; align-items: center; gap: 6px; }
.ask-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ask-chip { flex: none; padding: 8px 14px; border-radius: var(--r-control); background: var(--surface); box-shadow: 0 0 0 1.5px var(--separator-strong); font: var(--t-subhead); font-weight: 560; white-space: nowrap; }
.ask-chip:hover { background: var(--fill); }
.ask-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: var(--r-card); background: var(--surface-raised); border: 2px solid var(--obj); box-shadow: var(--lift); }
.ask-bar input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font: var(--t-body); }
.ask-bar input:focus { outline: none; }
.ask-mic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink-2); }
.ask-mic:hover { background: var(--fill); color: var(--ink); }

/* The desktop dock: Snowball is always one line away, at the foot of every page. */
.ask-dock { position: sticky; bottom: 0; z-index: 20; padding: var(--s3) var(--s10) var(--s4); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--separator-strong); }
.ask-dock-inner { max-width: 1040px; margin: 0 auto; display: grid; gap: var(--s3); }
.ask-dock .ask-thread { max-height: 46vh; overflow-y: auto; padding: var(--s4); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--separator), var(--float); }
.ask-dock-close { justify-self: end; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--separator), var(--lift); }

/* the board's paper grain */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); background-attachment: fixed; }
.kicker, .page-head .kicker { font: var(--t-caption) !important; font-size: 0.8125rem !important; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-2) !important; }
.voice, .page-head h1.voice, .phone .page-head h1.voice { font-family: var(--serif); font-weight: 600; letter-spacing: -0.025em; }

/* ---------- compact decisions (phone): the ask and the action first, the reasoning one tap away ---------- */
.decision.compact { gap: var(--s3); padding: var(--s4); }
.decision.compact h3 { font: var(--t-title3); font-size: 1.25rem; }
.decision-why summary { cursor: pointer; font: var(--t-subhead); font-weight: 650; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 6px; }
.decision-why summary::-webkit-details-marker { display: none; }
.decision-why summary::after { content: "▸"; transition: transform var(--fast) var(--ease); }
.decision-why[open] summary::after { transform: rotate(90deg); }
.decision-why[open] { display: grid; gap: var(--s3); }

/* ---------- vitals as tiles (phone) ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--separator-strong); }
.tile:active { background: var(--tag); }
.tile-label { font: var(--t-footnote); color: var(--ink-2); }
.tile-value { font: 800 1.375rem/1.15 var(--font); letter-spacing: -0.02em; }
.tile-note { display: flex; align-items: center; gap: 6px; font: var(--t-footnote); font-size: 0.8125rem; color: var(--ink-2); }
.tile-note.up { color: var(--green); } .tile-note.down { color: var(--red); } .tile-note.warn { color: var(--orange); }
.tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- milk holds ---------- */
.hold-row { align-items: center; gap: var(--s4); padding-block: 14px; flex-wrap: wrap; }
.hold-row .row-main { gap: 3px; }
.hold-left { flex: none; display: grid; justify-items: end; gap: 2px; padding: 8px 12px; border-radius: var(--r-control); background: var(--red-soft); color: var(--red); }
.hold-left b { font: 800 1.25rem/1 var(--font); }
.hold-left small { font: var(--t-footnote); color: var(--red); }
select.input { appearance: auto; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Today's big line: the farm's facts, in Snowball's voice */
.today-head { gap: 10px; }
.today-line { font: 600 2.25rem/1.18 var(--serif) !important; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance; }
.today-line b { font-weight: 700; }
.phone .today-line { font-size: 1.625rem !important; }
.rail .ask, .rail .ask-bar, .rail .ask-thread { min-width: 0; max-width: 100%; }
.rail .ask-bar .btn { padding: 0 14px; }
.rail .ask-chip { white-space: normal; text-align: left; max-width: 100%; }
.rail .ask-chips { overflow: visible; }

.ev-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--separator-strong); text-underline-offset: 3px; }
.ev-link:hover { color: var(--ink); }

/* ---------- Find ---------- */
.kbd { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--fill-strong); font: var(--t-caption); color: var(--ink-3); }
.find-scrim { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; background: rgba(21, 19, 14, 0.4); }
.find { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--surface-raised); border: 2px solid var(--obj); box-shadow: var(--float); overflow: hidden; animation: stamp-in 260ms var(--stamp) both; }
@keyframes stamp-in { from { opacity: 0; transform: scale(1.04); } }
.find-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--separator); color: var(--ink-2); }
.find-bar input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 1.25rem/1.3 var(--font); color: var(--ink); }
.find-bar input:focus { outline: none; }
.find-bar kbd { font: var(--t-caption); color: var(--ink-3); }
.find-list { overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.find-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: var(--r-control); text-align: left; }
.find-item:hover, .find-item:focus { background: var(--fill-strong); outline: none; }
.find-kind { font: var(--t-caption); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.find-hint, .find-none { padding: 18px; font: var(--t-callout); color: var(--ink-2); }

/* the phone index: one row per topic, the number on the right */
.index { display: grid; gap: 10px; }
.irow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 14px; }
.irow + .irow { border-top: 1px solid var(--separator); }
.irow:active { background: var(--fill); }
.irow-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.irow-label { font: 650 1rem/1.25 var(--font); }
.irow-note { display: flex; align-items: center; gap: 6px; font: 500 0.8125rem/1.3 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.irow-note.red, .irow-note.down { color: var(--red); } .irow-note.warn { color: var(--orange); } .irow-note.up { color: var(--green); }
.irow-value { flex: none; font: 800 1.25rem/1 var(--font); letter-spacing: -0.02em; text-align: right; }
.irow-value small { display: block; margin-top: 3px; font: 600 0.6875rem/1 var(--font); letter-spacing: 0; color: var(--ink-2); }
.irow .chev { color: var(--ink-3); }
.panel.compact { padding: 14px; gap: 10px; }
.panel.compact .bars-plot { height: 64px; gap: 4px; }
.panel.compact .bars-axis { gap: 4px; font-size: 0.625rem; }
.panel.compact .bar-val { display: none; }
.panel.compact .stat-value { font-size: 2rem; }
.bare > .section > .section-head { display: none; }

/* a cow's record */
.cow-today .dots-plot { height: 110px; }
.cow-temp { display: grid; gap: 6px; }
.cow-hold { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-control); background: var(--red-soft); border: 1.5px solid var(--red); color: var(--red); }
.cow-hold span { flex: 1; display: grid; gap: 2px; }
.cow-hold b { font: var(--t-headline); }
.cow-hold small { font: var(--t-footnote); color: var(--ink-2); }
.phone .hero { gap: var(--s3); }
.phone .hero .eartag { --s: 56px; }
.phone .hero-main h1 { font: 800 1.75rem/1.05 var(--font); }
.phone .hero-main p { font-size: 0.9375rem; }
.phone .facts { grid-template-columns: 1fr 1fr; gap: 0 14px; }
.phone .facts div { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
.phone .facts div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.phone .facts dd { font-size: 0.9375rem; }
.phone .panel { padding: var(--s4); }
.quiet-line { padding: 14px 16px; font: var(--t-subhead); color: var(--ink-3); }

/* what Snowball may do: each kind of work on its own trust ladder */
.pause-bar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-card); background: var(--surface); border: 1.5px solid var(--separator-strong); }
.pause-bar p { flex: 1; font: var(--t-subhead); color: var(--ink-2); }
.pause-bar b { color: var(--ink); }
.pause-bar.on { background: var(--accent-soft); border-color: var(--accent); }
.perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.perm { align-content: start; }
.perm { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-card); background: var(--surface-raised); border: 1.5px solid var(--separator-strong); }
.perm.paused { opacity: 0.7; }
.perm.blocked { background: transparent; border-style: dashed; }
.perm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.perm-head h3 { font: var(--t-headline); font-size: 1.125rem; text-wrap: balance; }
.perm-touches { font: var(--t-subhead); color: var(--ink-2); margin-top: -6px; }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.ladder li { padding: 7px 4px 6px; text-align: center; font: var(--t-caption); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); background: var(--fill); border-radius: 2px; }
.ladder li.past { background: var(--fill-strong); color: var(--ink-2); }
.ladder li.now { background: var(--ink); color: var(--bg); }
.perm-record { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: var(--t-footnote); color: var(--ink-2); }
.perm-record > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.perm-record b { color: var(--ink); }
.rec-dots { display: inline-flex; gap: 3px; }
.rec-dots i { width: 7px; height: 14px; border-radius: 1px; background: var(--green); }
.rec-dots i.miss { background: var(--red); }
.perm-offer { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-control); background: var(--accent-soft); border-left: 4px solid var(--accent); }
.perm-offer p { font: var(--t-callout); }
.perm-note { display: flex; align-items: center; gap: 8px; font: var(--t-footnote); color: var(--ink-2); }
.perm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--separator); font: var(--t-footnote); color: var(--ink-2); }
@media (max-width: 600px) { .pause-bar { flex-wrap: wrap; } .pause-bar .btn { width: 100%; } }

/* a line on its scale */
.scale { display: grid; gap: 8px; margin: 0; padding-top: 22px; }
.scale-track { position: relative; height: 12px; border-radius: 2px; background: var(--fill-strong); }
.scale-over { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 0 2px 2px 0; background: var(--red-soft); background: repeating-linear-gradient(135deg, var(--red-soft) 0 5px, transparent 5px 9px); }
.scale-line { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); }
.scale-line small { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font: 750 0.8125rem/1 var(--font); white-space: nowrap; }
.scale-mark { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--green); }
.scale-mark small { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font: 650 0.75rem/1 var(--font); color: var(--green); white-space: nowrap; }
.scale-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink-3); border: 1.5px solid var(--surface-raised); }
.scale-dot.latest { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--ink); }
.scale-dot.over { background: var(--red); }
.scale figcaption { display: flex; justify-content: space-between; gap: 10px; font: 600 0.75rem/1.2 var(--font); color: var(--ink-3); }
.scale:has(.scale-mark) figcaption { margin-top: 12px; }
.scale-legend { display: inline-flex; font: 600 0.8125rem/1.2 var(--font); align-items: center; gap: 6px; color: var(--ink-2); }
.scale-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }

/* setup: four doors, each with its answer */
.setup-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.setup-door { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-card); background: var(--surface-raised); border: 1.5px solid var(--separator-strong); transition: border-color var(--fast) var(--ease); }
.setup-door:hover { border-color: var(--obj); }
.setup-door h2 { font: var(--t-title3); }
.setup-door p { font: var(--t-subhead); color: var(--ink-2); }
.door-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-control); border: 1.5px solid var(--separator-strong); color: var(--ink-2); }
.door-flag { justify-self: start; margin-top: 4px; padding: 5px 9px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--accent-deep); font: 700 0.8125rem/1.2 var(--font); }
.door-flag.quiet { background: var(--fill); color: var(--ink-2); }

/* a line Snowball judges by */
.lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.line-card { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--r-card); background: var(--surface-raised); border: 1.5px solid var(--separator-strong); }
.line-card.default { border-color: var(--accent); }
.line-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.line-head h3 { font: var(--t-headline); font-size: 1.125rem; }
.line-head b { font: 800 1.375rem/1 var(--font); letter-spacing: -0.02em; }
.line-says { font: var(--t-callout); color: var(--ink-2); }
.line-from { display: flex; align-items: center; gap: 7px; font: var(--t-footnote); color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--separator); }
.line-missing { display: flex; align-items: center; gap: 7px; font: var(--t-footnote); color: var(--ink-3); }
.line-ask { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-control); background: var(--accent-soft); }
.line-ask p { font: var(--t-subhead); }
.line-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.line-choices .btn { min-height: 40px; padding: 0 14px; font-size: 0.9375rem; }

/* ---------- Now and cases ---------- */
.now-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: var(--s8) var(--s6); align-items: start; }
@media (max-width: 1080px) { .now-layout { grid-template-columns: 1fr; } }
.subject { display: inline-flex; align-items: center; gap: 8px; font: 650 0.9375rem/1 var(--font); color: var(--ink); }
a.subject:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.subject .eartag { --s: 30px; }
.subject .avatar { width: 26px; height: 26px; }
.subject .snow-mark { width: 26px; height: 26px; }
.subject-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-control); border: 1.5px solid var(--separator-strong); color: var(--ink-2); }
.case-card { display: grid; gap: 12px; padding: var(--s5); border-radius: var(--r-card); background: var(--surface-raised); border: 2px solid var(--obj); box-shadow: var(--lift); }
.case-card.v-quiet { border: 1.5px solid var(--separator-strong); box-shadow: none; padding: var(--s4); gap: 10px; }
.case-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-due { font: 750 0.875rem/1 var(--font); color: var(--orange); }
.case-card h3 { font: var(--t-title3); font-size: 1.375rem; letter-spacing: -0.015em; text-wrap: balance; }
.case-card.v-quiet h3, .case-card.v-phone h3 { font-size: 1.1875rem; }
.case-card.v-phone { padding: var(--s4); }
.case-card.v-quiet .btn { min-height: 40px; }
.case-answer { font: var(--t-callout); color: var(--ink-2); max-width: 62ch; }
.stage-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; max-width: 560px; }
.stage-track li { padding: 6px 4px 5px; border-radius: 2px; background: var(--fill); text-align: center; font: var(--t-caption); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.stage-track li.past { background: var(--fill-strong); color: var(--ink-2); }
.stage-track li.now { background: var(--ink); color: var(--bg); }
.stage-track.compact { flex: none; width: 64px; gap: 2px; }
.stage-track.compact li { height: 6px; padding: 0; }
.case-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px 10px 16px; }
.case-row + .case-row { border-top: 1px solid var(--separator); }
.case-row:hover { background: var(--fill); }
.case-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.case-row-main b { font: 650 1rem/1.3 var(--font); }
.case-row-main small { font: var(--t-footnote); color: var(--ink-2); }
.case-row .chev { color: var(--ink-3); }
.farm-map { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--bg-deep); border: 1.5px solid var(--separator-strong); overflow: hidden; }
.fm-passage { position: absolute; left: 3%; right: 3%; top: 44%; height: 14%; background: var(--fill); border-radius: 2px; }
.fm-zone { position: absolute; display: grid; align-content: start; gap: 3px; padding: 8px 10px; border-radius: var(--r-control); background: var(--surface); border: 1.5px solid var(--separator-strong); overflow: hidden; }
.fm-zone b { font: 700 0.8125rem/1.15 var(--font); }
.fm-zone small { font: 500 0.75rem/1.25 var(--font); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-zone.busy { border: 2px solid var(--obj); }
.fm-zone.hot { background: var(--orange-soft); border-color: var(--orange); }
.fm-count { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 750 0.75rem/1 var(--font); }
.fm-zone.hot .fm-count { background: var(--orange); color: #fff; }
.snow-now { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-card); border: 2px dotted var(--ink-3); }
.snow-now-head { display: flex; align-items: center; gap: 10px; font: var(--t-headline); }
.snow-now ul { display: grid; gap: 8px; }
.snow-now li { display: grid; gap: 1px; padding-left: 36px; }
.snow-now li a { font: var(--t-callout); }
.snow-now li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.snow-now li small { font: var(--t-footnote); color: var(--ink-3); }
.snow-now > .btn-plain { justify-self: start; margin-left: 32px; }
.case-page .page-head { gap: 12px; }
.case-page .page-head h1 { font: var(--t-title1); letter-spacing: -0.025em; }
.case-lede { font: 500 1.375rem/1.4 var(--serif); letter-spacing: -0.01em; max-width: 36ch; }
.ball { font: 700 0.875rem/1 var(--font); color: var(--ink-2); }
.ball.you { color: var(--orange); }
.timeline { display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-bottom: 16px; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--separator-strong); }
.tl-dot { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--separator-strong); background: var(--surface); color: var(--bg); }
.timeline li.done .tl-dot { background: var(--ink); border-color: var(--ink); }
.timeline li.now .tl-dot { border-color: var(--accent); background: var(--accent-soft); }
.timeline p { display: flex; align-items: baseline; gap: 10px; font: var(--t-headline); font-size: 1rem; }
.timeline p .num { font: var(--t-footnote); color: var(--ink-3); }
.timeline .tl-text { font: var(--t-callout); font-weight: 440; color: var(--ink-2); gap: 7px; align-items: center; }
.snow-part { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); border: 2px dotted var(--ink-3); }
.snow-part b { font: var(--t-headline); }
.snow-part p { font: var(--t-callout); color: var(--ink-2); margin: 2px 0 6px; }
.record-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-card); background: var(--surface-raised); border: 1.5px solid var(--separator-strong); }
.record-link > span:nth-child(2) { flex: 1; font: var(--t-subhead); color: var(--ink-2); }
.hold-clock b { font: 800 2.5rem/1 var(--font); letter-spacing: -0.03em; color: var(--red); }
.farm-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--s6) var(--s5); align-items: start; }
.tab { position: relative; }
.tab-count { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font: 700 0.6875rem/1 var(--font); }
.tabbar { grid-template-columns: repeat(3, 1fr) !important; }
.phone .setup-doors { gap: 10px; }
.phone .setup-door { grid-template-columns: 32px 1fr; column-gap: 12px; row-gap: 3px; padding: 12px 14px; }
.phone .setup-door > :not(.door-icon):not(.snow-mark) { grid-column: 2; }
.phone .setup-door .door-icon, .phone .setup-door .snow-mark { grid-row: 1 / span 3; }
.phone .setup-door h2 { font-size: 1.0625rem; }
.phone .setup-door p { font-size: 0.875rem; }
.phone .door-flag { margin-top: 2px; padding: 3px 7px; font-size: 0.75rem; }

/* live: exact and relative time, drawn on the farm's clock */
.case-due.late, .case-when.late b { color: var(--red); }
.case-when { flex: none; display: grid; justify-items: end; gap: 2px; }
.case-when b { font: 800 1.25rem/1 var(--font); letter-spacing: -0.02em; }
.case-when small { font: 600 0.75rem/1 var(--font); color: var(--ink-3); }
.case-status { display: flex; align-items: baseline; gap: 12px; }
.case-status b { font: 800 2rem/1 var(--font); letter-spacing: -0.03em; color: var(--green); }
.case-status span { font: 650 1rem/1 var(--font); color: var(--ink-3); }
.case-status.late b { color: var(--red); }
.live-track { display: grid; gap: 8px; margin: 0; padding: 26px 0 0; }
.lt-bar { position: relative; height: 10px; border-radius: 2px; background: var(--fill-strong); }
.lt-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px 0 0 2px; background: var(--ink); }
.live-track.late .lt-fill { background: var(--red); }
.lt-step { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface-raised); border: 2.5px solid var(--ink); }
.lt-now { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--accent); }
.lt-now small { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font: 750 0.75rem/1 var(--font); color: var(--accent-deep); white-space: nowrap; }
.lt-due { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--red); }
.live-track figcaption { display: flex; justify-content: space-between; font: 500 0.8125rem/1 var(--font); color: var(--ink-2); }
.live-track figcaption b { font-weight: 750; color: var(--ink); margin-right: 4px; }
.case-cause { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-control); border: 1.5px solid var(--separator-strong); background: var(--surface); }
.case-cause small { font: var(--t-caption); letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-3); }
.case-cause span { flex: 1; font: var(--t-callout); }
.case-predict { display: flex; gap: 10px; align-items: flex-start; font: var(--t-callout); color: var(--ink-2); }
.case-predict svg { flex: none; margin-top: 3px; color: var(--accent-deep); }
.phone .case-page .page-head h1 { font-size: 1.5rem; }
.phone .case-status b { font-size: 1.625rem; }
.phone .stage-track li { font-size: 0.625rem; padding: 5px 2px 4px; }
.phone .case-lede { font-size: 1.1875rem; }
.phone .case-page { gap: var(--s4); }
.phone .case-page .two { gap: var(--s4); }
.case-status.soon b { color: var(--orange); }

/* the lock screen: a Live Activity and notifications that act */
.lock-screen { background: radial-gradient(120% 80% at 30% 0%, #3a2e1a 0%, #15130e 60%) !important; color: #f5efe2; }
.lock { display: grid; gap: 10px; align-content: start; height: 100%; overflow-y: auto; padding: 70px 12px 24px; }
.lock-time { display: grid; justify-items: center; gap: 2px; margin-bottom: 18px; }
.lock-time small { font: 600 1.0625rem/1 var(--font); opacity: 0.85; }
.lock-time b { font: 700 5rem/1 var(--font); letter-spacing: -0.04em; }
.la, .note { display: grid; gap: 8px; padding: 14px 16px; border-radius: 22px; background: rgba(28, 25, 19, 0.72); backdrop-filter: blur(20px); color: #f5efe2; }
.la-top, .note-top { display: flex; align-items: center; gap: 8px; font: 650 0.8125rem/1 var(--font); color: rgba(245, 239, 226, 0.75); }
.la-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #211d15; color: #e8a22b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.la-top b { margin-left: auto; font: 800 1.625rem/1 var(--font); letter-spacing: -0.03em; color: #7fd49b; }
.la-top b.soon { color: #f0b04a; } .la-top b.late { color: #f08a78; }
.la-title { font: 700 1.0625rem/1.25 var(--font); }
.la-track { position: relative; height: 6px; border-radius: 3px; background: rgba(245, 239, 226, 0.18); }
.la-track span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: #e8a22b; }
.la-track i { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #f5efe2; }
.la-foot { display: flex; justify-content: space-between; font: 600 0.75rem/1 var(--font); color: rgba(245, 239, 226, 0.7); }
.note { border-radius: 20px; gap: 4px; }
.note-top small { margin-left: auto; font-weight: 500; }
.note b { font: 700 0.9375rem/1.3 var(--font); }
.note p { font: 450 0.875rem/1.35 var(--font); color: rgba(245, 239, 226, 0.82); }
.note-actions { display: flex; gap: 6px; margin-top: 6px; }
.note-actions button { flex: 1; text-align: center; min-height: 36px; border-radius: 12px; background: rgba(245, 239, 226, 0.14); color: #f5efe2; font: 650 0.875rem/1 var(--font); }
.note-actions button:first-child { background: #e8a22b; color: #211d15; }
.lock-calm { text-align: center; font: 500 0.9375rem/1.4 var(--font); opacity: 0.8; padding: 20px; }

/* offline: work keeps going, saved here, sent on return */
.offline-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--s4); padding: 10px 14px; border-radius: var(--r-control); background: var(--ink); color: var(--bg); font: var(--t-subhead); }
.offline-bar b { font-weight: 750; }
.offline-bar span { opacity: 0.85; }
.station ~ .offline-bar, body > #app > .offline-bar { margin: 0; border-radius: 0; }
.seg-toggle { padding: 5px 12px; border-radius: var(--r-control); background: var(--fill-strong); font: var(--t-footnote); font-weight: 600; color: var(--ink-2); }
.seg-toggle.on { background: var(--ink); color: var(--bg); }

/* depth records */
.big-read { font: 800 3rem/1 var(--font); letter-spacing: -0.03em; }
.pickup-now { display: flex; align-items: baseline; gap: 12px; }
.pickup-now b { font: 800 2.25rem/1 var(--font); letter-spacing: -0.03em; }
.pickup-now span { font: 700 1.125rem/1 var(--font); color: var(--green); }
.late-text { color: var(--red) !important; font-weight: 700; }
.ok-text { color: var(--green); font-weight: 700; }
.fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.robot-card { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-card); background: var(--surface-raised); border: 1.5px solid var(--separator-strong); }
.robot-card.out { border: 2px solid var(--red); background: var(--red-soft); }
.robot-head { display: flex; justify-content: space-between; font: var(--t-headline); }
.robot-head span { font: 700 0.8125rem/1.6 var(--font); text-transform: uppercase; letter-spacing: var(--caps); }
.robot-big { font: 800 2rem/1 var(--font); letter-spacing: -0.03em; display: grid; gap: 4px; }
.robot-big small { font: 500 0.75rem/1 var(--font); color: var(--ink-2); letter-spacing: 0; }
.robot-bar { height: 6px; border-radius: 2px; background: var(--fill-strong); } .robot-bar span { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.robot-stat { font: var(--t-footnote); color: var(--ink-2); } .robot-stat b { color: var(--ink); }
.pens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.pen-intake { font: 700 0.875rem/1 var(--font); color: var(--ink-2); } .pen-intake.warn { color: var(--orange); }
.ration { display: grid; gap: 10px; margin-top: 4px; }
.ration-row { display: grid; grid-template-columns: 100px 1fr 76px; gap: 10px; align-items: center; font: var(--t-footnote); }
.ration-row .num { text-align: right; font-weight: 700; } .ration-row small { color: var(--ink-3); font-weight: 500; }
.ration-track { position: relative; display: block; height: 12px; }
.ration-track i { display: block; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.ration-track i.r-plan { border: 1.5px dashed var(--ink-3); }
.ration-track i.r-loaded { top: 3px; bottom: 3px; background: var(--ink); } .ration-track i.r-loaded.off { background: var(--red); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.kpi-val { font: 800 2rem/1 var(--font); letter-spacing: -0.03em; } .kpi-val small { font-size: 0.875rem; color: var(--ink-2); }
.more-link { justify-self: start; font: var(--t-subhead); font-weight: 650; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--separator-strong); text-underline-offset: 3px; }
.pdoors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdoors a { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-card); border: 1.5px solid var(--separator-strong); background: var(--surface); }
.pdoors a:last-child { border: 2px dotted var(--ink-3); background: transparent; }
.pdoors b { font: 800 1.375rem/1 var(--font); letter-spacing: -0.02em; }
.pdoors span { font: 600 0.8125rem/1.25 var(--font); color: var(--ink-2); }
.queue { display: grid; gap: 8px; }
.queue-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 14px 10px 16px; border-radius: var(--r-card); background: var(--surface-raised); border: 1.5px solid var(--separator-strong); text-align: left; transition: border-color var(--fast) var(--ease); }
.queue-row:hover { border-color: var(--obj); }
.queue-row .chev { color: var(--ink-3); }