/* ============================================================
   Wattle — "Ledger" · motion v2: slower, smoother, phosphor
   An instrument panel, not a postcard. Charcoal ground, one
   typeface at two extremes, every number in tabular mono, colour
   reserved for state. Cards are a hairline and a flat surface.
   Motion only where it carries information.

   Token NAMES are unchanged from the previous system on purpose:
   every page's inline styles reference them, so redefining the
   values here re-skins the whole site in one file. The semantic
   accents (sage/gold/clay/sky/rose) now map onto the state palette.
   ============================================================ */

@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/inter-500.woff2') format('woff2'); }

:root{
  --font-display:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',Consolas,'Liberation Mono',monospace;

  /* Ledger: the dark default. */
  --bg:#0b0d10;
  --bg-deep:#07080a;
  --surface:#121518;
  --surface-2:#181c20;
  --line:#272d34;
  --line-soft:#1d2228;

  --ink:#eef0f2;
  --ink-2:#9aa3ad;
  --ink-3:#7c8792;

  /* semantic accents → state palette */
  --ok:#4fc26b;   --sage:#4fc26b;  --sage-deep:#7bd68f;
  --watch:#f0b23f; --gold:#f0b23f;  --gold-deep:#f6c866;
  --alert:#ef5a55;
  --clay:#f2895b;
  --sky:#5aa9f5;
  --rose:#e97a90;

  --shadow-sm:0 1px 0 rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 20px 60px rgba(0,0,0,.5);

  /* legacy names still read by page-level styles; neutralised here */
  --hero-ink:var(--ink); --hero-ink-2:var(--ink-2); --hero-shadow:none;
  --nav-bg:rgba(11,13,16,.78);
  --glass:var(--surface-2); --glass-line:var(--line); --glass-line-soft:var(--line-soft);
  --glass-hover:#1f252b; --glass-shine:transparent;
  --auth-card-bg:var(--surface);
  --sheen:transparent; --glass-opacity:100%; --aurora:0;
  --sky-1:var(--bg); --sky-2:var(--bg); --sky-3:var(--bg);
  --hill-far:var(--bg); --hill-mid:var(--bg); --hill-near:var(--bg); --ground:var(--bg); --ground-deep:var(--bg);
  --tree:var(--bg); --shed:var(--bg); --shed-roof:var(--bg); --shed-side:var(--bg); --grass:var(--bg);

  --radius:12px;
  --radius-sm:8px;
  --maxw:1280px;
  --ease:cubic-bezier(.19,1,.22,1);
  --dur:1.1s; --dur-slow:1.6s; --stagger:90ms;
  --spring:linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077 20.4%, 1.121, 1.149 24.3%, 1.159, 1.163 27%, 1.154, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  color-scheme:dark;
}

/* Paper: the same system in daylight. */
html[data-theme="paper"]{
  --bg:#f6f7f8; --bg-deep:#eceef1; --surface:#ffffff; --surface-2:#f1f3f5;
  --line:#d9dee4; --line-soft:#e7eaee;
  --ink:#111417; --ink-2:#5b6672; --ink-3:#6b7681;
  --ok:#1f9d45; --sage:#1f9d45; --sage-deep:#187a36;
  --watch:#c78a12; --gold:#c78a12; --gold-deep:#a37209;
  --alert:#d63b36; --clay:#d2622e; --sky:#1f78d1; --rose:#c94d68;
  --shadow-sm:0 1px 0 rgba(20,24,30,.06); --shadow-md:0 8px 24px rgba(20,24,30,.08); --shadow-lg:0 20px 60px rgba(20,24,30,.12);
  --nav-bg:rgba(246,247,248,.82); --glass-hover:#e9ecef;
  color-scheme:light;
}

/* Easter: Paper's daylight instrument panel re-toned for spring — pastel lilac ground,
   the same state palette rotated toward bloom hues at matched lightness, so a shed that
   is ok/watch/alert reads exactly as clearly as it does in Ledger or Paper. Nothing about
   the layout changes; the only extra is a soft, non-informational colour wash behind the
   hero banner, the one place this site already allows a flourish that carries no state. */
html[data-theme="easter"]{
  --bg:#faf5fb; --bg-deep:#f1e7ef; --surface:#ffffff; --surface-2:#f7eef6;
  --line:#e6d8e4; --line-soft:#f0e6ee;
  --ink:#2e2438; --ink-2:#6e5f7a; --ink-3:#8f8299;
  --ok:#2f9d68; --sage:#2f9d68; --sage-deep:#217a4f;
  --watch:#c68a17; --gold:#c68a17; --gold-deep:#9c6c10;
  --alert:#d6473f; --clay:#d97a3f; --sky:#3f79d6; --rose:#cf5f8a;
  --shadow-sm:0 1px 0 rgba(70,40,70,.07); --shadow-md:0 8px 24px rgba(70,40,70,.09); --shadow-lg:0 20px 60px rgba(70,40,70,.13);
  --nav-bg:rgba(250,245,251,.82); --glass-hover:#f1e4ef;
  color-scheme:light;
}
html[data-theme="easter"] .hero{
  background:
    radial-gradient(ellipse 900px 280px at 12% -12%, color-mix(in srgb, var(--rose) 20%, transparent), transparent 62%),
    radial-gradient(ellipse 760px 260px at 92% -18%, color-mix(in srgb, var(--sky) 16%, transparent), transparent 62%),
    radial-gradient(ellipse 620px 220px at 50% 105%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 65%);
}

/* ── base ────────────────────────────────────────── */
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01","tnum";
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:500; letter-spacing:-.025em; }
button, input, select, textarea{ font:inherit; }
::selection{ background:color-mix(in srgb, var(--sky) 35%, transparent); }
:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; border-radius:4px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.mono, .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ── nav ─────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--nav-bg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{ display:flex; align-items:center; gap:14px; height:56px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mark{
  width:28px; height:28px; border-radius:7px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:13px; letter-spacing:-.04em;
}
.brand .mark svg{ display:none; }
.brand .mark::before{ content:"W"; }
.brand b{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.brand small{ display:none; }
.nav-spacer{ flex:1; }
.tabs{ display:flex; gap:2px; margin-left:8px; }
.tab{
  position:relative; padding:8px 11px; border-radius:6px; font-size:13px; font-weight:500; color:var(--ink-2);
  white-space:nowrap; transition:color .35s var(--ease), background .35s var(--ease);
}
.tab:hover{ color:var(--ink); background:var(--surface-2); }
.tab.on{ color:var(--ink); }
.tab.on::after{ content:""; position:absolute; left:11px; right:11px; bottom:-15px; height:2px; background:var(--ink); border-radius:1px; }
.tab[hidden]{ display:none; }
/* tabs in named groups: live readings, the day's work, the record, the assistant */
.tgrp{ display:flex; align-items:center; gap:2px; padding-left:10px; margin-left:6px; border-left:1px solid var(--line-soft); }
.tgrp:first-child{ padding-left:0; margin-left:0; border-left:none; }
.tgrp small{ font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:800; color:var(--ink-3); margin-right:5px; }
@media (max-width:1320px){ .tgrp small{ display:none; } .tgrp{ padding-left:6px; margin-left:4px; } }
.chip{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 10px; border-radius:6px;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line-soft); white-space:nowrap;
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); }
.chip svg{ width:14px; height:14px; }
.chip-live i{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%, transparent); animation:livePulse 1.8s ease-out infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%, transparent); } 100%{ box-shadow:0 0 0 8px transparent; } }
.btn{
  font-size:13px; font-weight:500; cursor:pointer; height:32px; padding:0 12px; border-radius:6px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover{ background:var(--glass-hover); border-color:var(--line); }
.btn-ghost{ border-color:transparent; background:transparent; }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-k kbd{ font:inherit; font-family:var(--font-mono); font-size:10.5px; margin-left:6px; padding:1px 5px; border-radius:4px; border:1px solid var(--line); color:var(--ink-3); }
.ibtn{
  width:32px; height:32px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto; cursor:pointer; color:var(--ink-2);
  background:transparent; border:1px solid transparent; transition:background .35s var(--ease), color .35s var(--ease);
}
.ibtn svg{ width:16px; height:16px; }
.ibtn:hover{ background:var(--surface-2); color:var(--ink); }
.pn{ display:flex; align-items:center; gap:4px; }
.pn span{ font-size:13px; font-weight:500; min-width:58px; text-align:center; }
.me{ position:relative; }
.avatar-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  background:var(--surface-2); color:var(--ink); font-size:11px; font-weight:600; letter-spacing:.02em;
}
.avatar-btn:hover{ background:var(--glass-hover); }
.me-menu{
  position:absolute; right:0; top:40px; min-width:200px; padding:6px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .35s var(--ease), transform .45s var(--ease); z-index:80;
}
.me.open .me-menu{ opacity:1; transform:none; pointer-events:auto; }
.me-who{ padding:8px 10px 10px; border-bottom:1px solid var(--line-soft); margin-bottom:4px; font-size:12px; }
.me-who b{ display:block; font-size:13px; font-weight:600; } .me-who span{ color:var(--ink-3); text-transform:capitalize; }
.me-item{ width:100%; text-align:left; font-size:13px; padding:8px 10px; border:none; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer; }
.me-item:hover{ background:var(--surface-2); }
.chip-count{ display:none; }
@media (min-width:1300px){ .chip-count{ display:inline-flex; } }
@media (max-width:1180px){ .nav #wxChip{ display:none; } .tab{ padding:8px 9px; font-size:12.5px; } }
@media (max-width:1120px){ .nav-in{ overflow-x:auto; scrollbar-width:none; } .nav-in::-webkit-scrollbar{ display:none; } }
@media (max-width:900px){
  .nav .chip-live{ display:none; }
  .nav-in{ overflow-x:auto; scrollbar-width:none; }
  .nav-in::-webkit-scrollbar{ display:none; }
  .nav .brand{ flex:0 0 auto; }
  .tabs{ margin-left:0; }
}

/* ── page header (was the cinematic hero) ───────── */
.hero{
  position:relative; display:block; min-height:0; overflow:visible;
  background:none; padding:clamp(40px,6vw,72px) 0 8px;
}
.hero-video, .scroll-cue, .layer, .cloud, .bird, .motes, .grain, [data-yard], .yard{ display:none !important; }
.hero::after{ content:none; }
.hero-in{ position:relative; z-index:1; text-align:left; max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px); width:100%; }
.hero .kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px;
}
.hero h1{
  font-size:clamp(40px,7vw,88px); line-height:.94; letter-spacing:-.045em; font-weight:500;
  color:var(--ink); text-wrap:balance; max-width:14ch;
}
.hero-em, em.hero-em{ font-style:normal; color:var(--ink-3); }
.hero .sub{ margin:18px 0 0; font-size:clamp(14px,1.5vw,17px); color:var(--ink-2); max-width:60ch; line-height:1.6; }
.brief{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.brief span{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); padding:5px 9px; border-radius:6px;
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.brief span::first-letter{ text-transform:uppercase; }
.hero .pill-row{ justify-content:flex-start; }
.hero h1.rise .w{ display:inline-block; animation:wordRise 1.3s var(--ease) both; animation-delay:calc(var(--i, 0) * .11s); }
@keyframes wordRise{ from{ opacity:0; transform:translateY(.25em); } to{ opacity:1; transform:none; } }

/* entrances */
@keyframes fade-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.animate-fade-rise{ animation:fade-rise var(--dur) var(--ease) both; }
.animate-fade-rise-delay{ animation:fade-rise var(--dur) var(--ease) .18s both; }
.animate-fade-rise-delay-2{ animation:fade-rise var(--dur) var(--ease) .36s both; }
/* No clip-path here: a box clipped to nothing has no intersection, so the observer that
   reveals it never fires and the page stays blank. Opacity, lift and a phosphor tint only. */
.rv{ opacity:0; transform:translateY(14px); filter:saturate(.7) brightness(1.15); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease); transition-delay:calc(var(--i, 0) * var(--stagger)); }
.rv.in{ opacity:1; transform:none; filter:none; }
.rv-d1{ transition-delay:.12s; } .rv-d2{ transition-delay:.24s; } .rv-d3{ transition-delay:.36s; } .rv-d4{ transition-delay:.48s; } .rv-d5{ transition-delay:.6s; }

/* ── sections & type ─────────────────────────────── */
section{ padding:clamp(28px,4vw,48px) 0; }
main > section:first-child{ padding-top:20px; }
.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; margin-bottom:8px;
}
.sec-h{ font-size:clamp(20px,2.6vw,28px); letter-spacing:-.03em; margin-bottom:6px; }
.sec-p{ color:var(--ink-2); font-size:14px; line-height:1.6; max-width:64ch; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }

/* ── bento ───────────────────────────────────────── */
.bento{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:12px; }
.b-3{ grid-column:span 3; } .b-4{ grid-column:span 4; } .b-5{ grid-column:span 5; } .b-6{ grid-column:span 6; }
.b-7{ grid-column:span 7; } .b-8{ grid-column:span 8; } .b-9{ grid-column:span 9; } .b-12{ grid-column:span 12; }
.tile{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:18px 20px; min-width:0; display:flex; flex-direction:column; gap:14px;
}
.tile-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.tile-h .eyebrow{ margin:0; }
.tile-meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); }
@media (max-width:1000px){ .b-3,.b-4,.b-5{ grid-column:span 6; } .b-7,.b-8,.b-9{ grid-column:span 12; } }
@media (max-width:640px){ .bento > *{ grid-column:span 12 !important; } }

/* the twelve, as a strip */
.strip{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:6px; }
.strip a{
  display:flex; flex-direction:column; gap:6px; padding:10px 8px 9px; border-radius:8px;
  background:var(--surface-2); border:1px solid transparent; min-width:0;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.strip a:hover{ border-color:var(--line); transform:translateY(-1px); }
.strip .s-id{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.strip .s-d{ font-family:var(--font-mono); font-size:15px; font-weight:500; letter-spacing:-.02em; color:var(--ink); }
.strip .s-d.warn{ color:var(--watch); } .strip .s-d.bad{ color:var(--alert); } .strip .s-d.good{ color:var(--ok); }
.strip .s-bar{ height:3px; border-radius:2px; background:var(--line-soft); position:relative; overflow:hidden; }
.strip .s-bar i{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--ink-3); transform:translateX(-50%); }
.strip .s-bar b{ position:absolute; top:0; bottom:0; background:var(--tone, var(--ok)); border-radius:2px; }
.strip .s-sub{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3); white-space:nowrap; display:flex; align-items:center; gap:4px; }
.strip .s-h{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--clay); flex:none; }
@media (max-width:900px){ .strip{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
@media (max-width:480px){ .strip{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.kv{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:14px 20px; }
.kv .k{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
.kv .v{ font-family:var(--font-mono); font-size:22px; font-weight:500; letter-spacing:-.03em; margin-top:4px; line-height:1; }
.kv .v small{ font-size:12px; color:var(--ink-3); margin-left:5px; letter-spacing:0; }

/* ── stat band ───────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.bento > .stats{ grid-column:span 12; }
/* Attention is a feed, not a column: it scrolls inside a tile the height of the strip
   beside it, so a long night never pushes the rest of the board down the page. */
.bento > #attentionSec{ max-height:100%; }
#attentionSec .acts{ overflow:auto; max-height:236px; padding-right:6px; margin-right:-6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  mask-image:linear-gradient(#000 88%, transparent); -webkit-mask-image:linear-gradient(#000 88%, transparent); }
#attentionSec .acts::-webkit-scrollbar{ width:6px; } #attentionSec .acts::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.stat{
  position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:16px 18px; min-width:0; transition:border-color .35s var(--ease);
}
.stat:hover{ border-color:var(--line); }
.stat .n{ display:inline-block; font-family:var(--font-mono); font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-.035em; line-height:1; }
.stat .l{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:10px; }
.stat .sub{ font-size:12px; color:var(--ink-2); margin-top:4px; }
.stat .n.changed{ animation:numPop 1.45s var(--ease); color:var(--gold); }
/* A number still resolving glows phosphor green; it settles to ink when it lands. */
.decoding{ color:var(--ok) !important; text-shadow:0 0 14px color-mix(in srgb, var(--ok) 55%, transparent); transition:color .6s var(--ease), text-shadow .6s var(--ease); }
.tab-badge.soft{ background:var(--watch); color:#1a1200; }
.tab-badge{ display:inline-block; min-width:16px; padding:0 5px; margin-left:6px; border-radius:999px; background:var(--alert); color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center; vertical-align:1px; font-variant-numeric:tabular-nums; }
/* Opacity and blend mode are set per theme in ui.js (ambient()) — rain wants a faint
   phosphor screen-blend, sakura and the light motes want to read as themselves. */
.hero-ambient{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.hero .hero-in{ position:relative; z-index:1; }
@keyframes numPop{ 0%{ transform:scale(1); } 30%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

/* ── shed cards ──────────────────────────────────── */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.card{
  position:relative; display:block; overflow:hidden; min-width:0;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:border-color .35s var(--ease), transform .45s var(--ease);
}
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--accent, var(--ok)); opacity:.9; }
.card::after{ content:none; }
.card:hover{ border-color:var(--line); transform:translateY(-2px); }
.card-in{ position:relative; padding:16px 16px 14px; }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.card h3{ font-size:15px; font-weight:600; letter-spacing:-.02em; }
.card .age{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  padding:3px 7px; border-radius:5px; background:var(--surface-2); white-space:nowrap;
}
.card .chick{ display:none; }
.card .big{ display:flex; align-items:baseline; gap:10px; margin-top:14px; }
.card .big b{ font-family:var(--font-mono); font-size:32px; font-weight:500; letter-spacing:-.04em; line-height:1; }
.card .big .drift{ font-family:var(--font-mono); font-size:13px; color:var(--ink-3); }
.card .big .drift.good{ color:var(--ok); } .card .big .drift.warn{ color:var(--watch); } .card .big .drift.bad{ color:var(--alert); }
.rows{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; }
.row .k{ color:var(--ink-3); }
.row .v{ font-family:var(--font-mono); font-weight:500; }
.row .v small{ font-size:10.5px; color:var(--ink-3); margin-left:5px; font-weight:400; }
.row .v.warn{ color:var(--watch); } .row .v.bad{ color:var(--alert); } .row .v.good{ color:var(--ok); }
.tscale{ position:relative; height:3px; border-radius:2px; margin:2px 0 6px; background:var(--line-soft); }
.tscale .tset{ position:absolute; top:-3px; left:50%; width:1px; height:9px; background:var(--ink-3); transform:translateX(-50%); }
.tscale .needle{
  position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--needle, var(--ink)); border:2px solid var(--surface); transform:translate(-50%,-50%);
  animation:needleIn 1.4s var(--ease) both;
}
@keyframes needleIn{ from{ left:50%; } }
.wbar{ height:3px; border-radius:2px; overflow:hidden; margin:2px 0 6px; background:var(--line-soft); }
.wbar i{ display:block; height:100%; background:var(--sky); animation:wbarGrow 1.6s var(--ease) both; }
.wbar.over i{ background:var(--watch); }
@keyframes wbarGrow{ from{ width:0; } }
.fanrow{ display:flex; align-items:center; gap:8px; margin-top:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.fanrow .fan{ width:14px; height:14px; flex:0 0 auto; }
.fanrow .fan .ring{ fill:none; stroke:var(--line); stroke-width:1.4; }
.fanrow .fan .bl{ fill:var(--ink-3); opacity:.6; transform-box:fill-box; transform-origin:center; }
.fanrow .fan .hub{ fill:var(--ink-2); }
.fanrow .fan.lit .bl{ fill:var(--sky); opacity:1; animation:fanSpin linear infinite; animation-duration:inherit; }
.fanrow .fan.lit .ring{ stroke:var(--sky); }
@keyframes fanSpin{ to{ transform:rotate(360deg); } }
.fanrow .sp{ margin-left:auto; text-transform:uppercase; letter-spacing:.06em; font-size:10px; }
.fanrow .sp.on{ color:var(--ok); } .fanrow .sp.off{ color:var(--ink-3); }
.card .flag{
  display:inline-block; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 7px; border-radius:5px; margin-top:8px; background:color-mix(in srgb, var(--watch) 16%, transparent); color:var(--watch);
}
.card.ghost{ opacity:.6; }
.card.ghost::before{ background:repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 12px); }
.card.ghost .flag.ghost{ background:var(--surface-2); color:var(--ink-2); }
.spark{ margin-top:12px; height:32px; }
.spark svg{ width:100%; height:100%; overflow:visible; }
.go{ margin-top:12px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); transition:color .35s var(--ease); }
.card:hover .go{ color:var(--ink); }
@media (hover:none){ .card:hover{ transform:none; } }

/* ── panels, attention, log ──────────────────────── */
.panel{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px 20px; min-width:0; }
.panel h3{ font-size:14px; font-weight:600; letter-spacing:-.01em; margin-bottom:12px; }
.two{ display:grid; grid-template-columns:1.55fr 1fr; gap:12px; }
.two > *{ min-width:0; }
@media (max-width:900px){ .two{ grid-template-columns:1fr; } }

.acts{ display:flex; flex-direction:column; gap:0; }
.act{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start; }
.act:last-child{ border-bottom:none; }
.act .badge{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; margin-top:6px; background:var(--ok); display:block; }
.act .badge svg{ display:none; }
.act.high .badge{ background:var(--alert); box-shadow:0 0 0 3px color-mix(in srgb, var(--alert) 18%, transparent); }
.act > span:not(.badge){ min-width:0; }
.act b{ display:block; font-size:13px; font-weight:600; letter-spacing:-.01em; }
.act b + span, .act span span{ display:block; font-size:12px; color:var(--ink-2); line-height:1.55; margin-top:2px; }
a.act{ margin:0 -8px; padding:11px 8px; border-radius:6px; transition:background .35s var(--ease); }
a.act:hover{ background:var(--surface-2); }
a.act .go-arrow{ margin-left:auto; align-self:center; color:var(--ink-3); font-size:14px; opacity:0; transition:opacity .15s; }
a.act:hover .go-arrow{ opacity:1; }
.all-clear{ display:flex; align-items:center; gap:10px; padding:8px 0; color:var(--ink-2); font-size:13px; }
.all-clear .chick{ display:none; }
.all-clear::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); }
.bento .acts .act:first-child{ padding-top:0; }

.log p{ margin:0 0 10px; padding-left:12px; border-left:2px solid var(--line); font-size:12.5px; line-height:1.55; color:var(--ink-2); }
.log p:last-child{ margin-bottom:0; }
.log .ts{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); margin-bottom:2px; }
.log p.alert{ border-left-color:var(--alert); } .log p.alert .ts{ color:var(--alert); }
.log p.warn{ border-left-color:var(--watch); } .log p.warn .ts{ color:var(--watch); }
.log-cols{ columns:2 320px; column-gap:24px; }
.log-cols p{ break-inside:avoid; }

/* ── skeletons ───────────────────────────────────── */
.sk{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); min-height:96px; }
.sk::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ink) 5%, transparent) 50%, transparent 80%); transform:translateX(-100%); animation:skShine 1.4s ease-in-out infinite; }
.sk.card-sk{ min-height:300px; } .sk.map-sk{ min-height:260px; }
@keyframes skShine{ to{ transform:translateX(100%); } }

/* ── ticker ──────────────────────────────────────── */
.ticker{ position:relative; z-index:6; height:36px; display:flex; align-items:center; overflow:hidden; background:var(--bg-deep); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.ticker-tag{ flex:0 0 auto; height:100%; display:flex; align-items:center; gap:8px; padding:0 14px 0 clamp(16px,4vw,40px); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); background:var(--bg-deep); z-index:2; }
.ticker-tag i{ width:6px; height:6px; border-radius:50%; background:var(--ok); animation:livePulse 1.8s ease-out infinite; }
.ticker-view{ flex:1; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker-track{ display:inline-flex; white-space:nowrap; animation:tickerRun var(--dur, 60s) linear infinite; will-change:transform; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes tickerRun{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tk{ display:inline-flex; align-items:center; gap:8px; padding:0 18px; font-family:var(--font-mono); font-size:12px; color:var(--ink-2); border-right:1px solid var(--line-soft); }
.tk b{ color:var(--ink); font-weight:500; }
.tk .tkl{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.tk.warn .tkl, .tk.warn b{ color:var(--watch); } .tk.bad .tkl, .tk.bad b{ color:var(--alert); } .tk.good .tkl{ color:var(--ok); }
@media (max-width:760px){ .ticker{ height:32px; } .tk{ padding:0 12px; font-size:11.5px; } }

/* ── the farm from above ─────────────────────────── */
.farmmap{ position:relative; }
.fm-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.fm-legend{ display:flex; gap:12px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.fm-legend i{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.fm-stage{ position:relative; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line-soft); background:var(--surface-2); }
.fm-stage svg{ display:block; width:100%; height:auto; font-family:var(--font-body); }
.fm-ground{ fill:var(--surface-2); }
.fm-road{ stroke:var(--line); stroke-width:1.5; stroke-dasharray:6 8; opacity:.6; }
.fm-shed{ --st:var(--ok); cursor:pointer; outline:none; transform-box:fill-box; transform-origin:center; transition:transform .45s var(--ease); }
.fm-shed.st-warn{ --st:var(--watch); } .fm-shed.st-alert{ --st:var(--alert); } .fm-shed.st-excluded{ --st:var(--ink-3); }
.fm-shed:hover, .fm-shed:focus-visible{ transform:scale(1.03); }
.fm-body{ fill:var(--surface); stroke:color-mix(in srgb, var(--st) 55%, var(--line)); stroke-width:1.2; transition:fill .2s; }
.fm-shed:hover .fm-body{ fill:color-mix(in srgb, var(--st) 10%, var(--surface)); }
.fm-glow{ fill:none; stroke:var(--st); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.fm-shed.st-alert .fm-glow{ animation:fmPulse 1.6s ease-in-out infinite; }
.fm-shed.st-warn .fm-glow{ animation:fmPulse 3.4s ease-in-out infinite; }
@keyframes fmPulse{ 0%,100%{ opacity:0; } 50%{ opacity:.7; } }
.fm-ridge{ stroke:var(--line); stroke-width:1; }
.fm-inlet{ fill:var(--sky); opacity:.3; }
.fm-shed.on .fm-inlet{ animation:fmBreathe var(--cycle, 5s) ease-in-out infinite; }
@keyframes fmBreathe{ 0%,100%{ opacity:.18; } 50%{ opacity:.9; } }
.fm-fan .ring{ fill:var(--bg-deep); stroke:var(--line); stroke-width:1; }
.fm-fan .bl{ fill:var(--ink-3); opacity:0; transform-box:fill-box; transform-origin:center; }
.fm-fan .hub{ fill:var(--ink-2); }
.fm-fan.lit .bl{ fill:var(--sky); opacity:1; animation:fanSpin linear infinite; animation-duration:inherit; }
.fm-fan.lit .ring{ stroke:color-mix(in srgb, var(--sky) 55%, var(--line)); }
.fm-num{ font-family:var(--font-mono); font-size:20px; font-weight:500; fill:var(--ink); }
.fm-day{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; fill:var(--ink-3); }
.fm-temp{ font-family:var(--font-mono); font-size:14px; font-weight:500; fill:var(--ink); }
.fm-drift{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; fill:var(--st); }
.fm-sub{ font-family:var(--font-mono); font-size:9.5px; fill:var(--ink-3); }
.fm-wtrack{ fill:var(--line-soft); }
.fm-wfill{ fill:var(--sky); transform-box:fill-box; transform-origin:left center; animation:barGrowX 1.8s var(--ease) both; animation-delay:calc(var(--k, 0) * 90ms + .3s); }
@keyframes barGrowX{ from{ transform:scaleX(0); } }
.fm-compact .fm-num{ font-size:17px; } .fm-compact .fm-temp{ font-size:12.5px; } .fm-compact .fm-day{ font-size:8px; }
.fm-shed{ animation:fmDrop 1.1s var(--ease) backwards; animation-delay:calc(var(--k, 0) * 80ms); }
@keyframes fmDrop{ from{ opacity:0; transform:translateY(-6px); } }
.fm.settled .fm-shed, .fm.settled .fm-wfill{ animation:none; }
.fm-tip, .ch-tip{
  position:absolute; left:0; top:0; z-index:5; pointer-events:none; min-width:180px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:9px 12px; font-size:12px;
  opacity:0; transition:opacity .35s var(--ease);
}
.fm-tip.show{ opacity:1; }
.fm-tip b{ display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; }
.fm-tip .r{ display:flex; justify-content:space-between; gap:16px; color:var(--ink-2); padding:2px 0; }
.fm-tip .r span:last-child{ color:var(--ink); font-family:var(--font-mono); }
@media (max-width:760px){ .fm-legend{ display:none; } }

/* ── command palette ─────────────────────────────── */
.pal-wrap{ position:fixed; inset:0; z-index:130; display:grid; place-items:start center; padding:min(14vh,120px) 14px 0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.pal-wrap.show{ opacity:1; pointer-events:auto; }
.pal{ width:min(620px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; transform:translateY(-6px); transition:transform .45s var(--ease); }
.pal-wrap.show .pal{ transform:none; }
.pal input{ width:100%; border:none; outline:none; background:transparent; color:var(--ink); font-size:15px; padding:16px 18px; border-bottom:1px solid var(--line-soft); }
.pal input::placeholder{ color:var(--ink-3); }
.pal-list{ max-height:min(52vh, 420px); overflow:auto; padding:6px; }
.pal-k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:10px 10px 4px; }
.pal-i{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px; }
.pal-i.on, .pal-i:hover{ background:var(--surface-2); }
.pal-i .ic{ width:24px; height:24px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto; background:color-mix(in srgb, var(--tone, var(--sage)) 16%, transparent); color:var(--tone, var(--sage)); font-size:11px; }
.pal-i .lb{ font-weight:500; }
.pal-i .ht{ margin-left:auto; color:var(--ink-3); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; }
.pal-foot{ display:flex; gap:14px; padding:8px 14px; border-top:1px solid var(--line-soft); font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); }
.pal-foot kbd{ font:inherit; padding:1px 5px; margin-right:2px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); color:var(--ink-2); }
@media (max-width:760px){ .pal-foot{ display:none; } }

/* ── toasts ──────────────────────────────────────── */
.toasts{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:140; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 14px; font-size:13px; font-weight:500; box-shadow:var(--shadow-md); opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.toast.show{ opacity:1; transform:none; }
.toast.good{ border-color:var(--ok); } .toast.bad{ border-color:var(--alert); }

/* ── look picker ─────────────────────────────────── */
.theme-pop{ position:fixed; top:64px; right:clamp(14px,3vw,38px); z-index:90; width:min(320px, calc(100vw - 28px)); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:12px; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .35s var(--ease), transform .45s var(--ease); }
.theme-pop.show{ opacity:1; transform:none; pointer-events:auto; }
.theme-pop-h{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:2px 2px 10px; }
.theme-pop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.theme-card{ text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px; background:var(--surface-2); color:var(--ink); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:10px; transition:border-color .35s var(--ease); }
.theme-card:hover{ border-color:var(--line); }
.theme-card.on{ border-color:var(--ink); }
.theme-strip{ display:block; height:18px; border-radius:5px; border:1px solid var(--line-soft); }
.theme-name{ font-size:13px; font-weight:600; }
.theme-note{ font-size:11px; color:var(--ink-3); margin-top:-3px; }

/* ── chick (kept for pages that still call it) ───── */
.chick{ display:none; }
/* Any brand mark that used to hold the chick becomes the monogram, so no page keeps a hollow circle. */
/* Specific enough to beat a page-level .auth-brand .mark that lands later in the cascade. */
span.mark:has(> svg.chick){ display:grid !important; place-items:center; background:var(--ink) !important; color:var(--bg); border-radius:10px !important; font-weight:700; font-size:16px; line-height:1; }
span.mark:has(> svg.chick)::before{ content:"W"; }

/* ── charts ──────────────────────────────────────── */
.band-ok{ fill:var(--ok); opacity:.1; }
.band-warn{ fill:var(--watch); opacity:.1; }
.line-target{ stroke:var(--ok); stroke-width:1; stroke-dasharray:3 3; fill:none; opacity:.8; }
.line-temp{ stroke:var(--clay); stroke-width:1.8; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.range-temp{ fill:var(--clay); opacity:.1; }
.line-water{ stroke:var(--sky); stroke-width:1.8; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.area-water{ fill:var(--sky); opacity:.1; }
.line-mort{ stroke:var(--rose); stroke-width:1.8; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.area-mort{ fill:var(--rose); opacity:.1; }
.dot-bad{ fill:var(--alert); }
.dot-now{ fill:var(--surface); stroke-width:2; }
.axis{ stroke:var(--line); stroke-width:1; }
.axis-t{ font-family:var(--font-mono); font-size:8.5px; fill:var(--ink-3); }
.chart{ position:relative; }
.chart svg{ cursor:crosshair; }
.chart .xh{ stroke:var(--ink-3); stroke-width:1; stroke-dasharray:2 3; opacity:0; pointer-events:none; }
.chart .xh-dot{ fill:var(--ink); stroke:var(--surface); stroke-width:2; opacity:0; pointer-events:none; }
.chart.hover .xh, .chart.hover .xh-dot{ opacity:1; }
.ch-tip{ top:24px; white-space:nowrap; font-size:11.5px; }
.chart.hover .ch-tip{ opacity:1; }
.ch-tip b{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; }
.ch-tip span{ display:flex; justify-content:space-between; gap:14px; color:var(--ink-2); }
.ch-tip span em{ font-style:normal; font-family:var(--font-mono); color:var(--ink); }

/* ── shed page: vitals, rings, equipment, switcher ── */
.vitals{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.vital{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); min-width:0; }
.vital.gauge{ text-align:center; padding:16px 12px 14px; position:relative; overflow:hidden; }
.vital.gauge::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--vc, transparent); }
.vital.gauge.good{ --vc:var(--ok); } .vital.gauge.warn{ --vc:var(--watch); } .vital.gauge.bad{ --vc:var(--alert); }
.ring-wrap{ position:relative; width:96px; height:96px; margin:0 auto 6px; }
.ring{ width:100%; height:100%; display:block; overflow:visible; }
.ring circle{ fill:none; stroke-linecap:round; }
.ring-track{ stroke:var(--line-soft); }
.ring-band{ stroke:color-mix(in srgb, var(--ok) 22%, transparent); stroke-linecap:butt; }
.ring-arc{ stroke:var(--c); animation:ringIn 2s var(--ease) both; }
@keyframes ringIn{ from{ stroke-dasharray:0 1000; } }
.ring-val{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring-val b{ font-family:var(--font-mono); font-size:20px; font-weight:500; letter-spacing:-.03em; line-height:1; }
.ring-val small{ display:block; font-family:var(--font-mono); font-size:9.5px; color:var(--ink-3); margin-top:3px; }
.vital .l{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.vital .s{ font-size:12px; color:var(--ink-2); margin-top:4px; }

.equip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.eq{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:14px 15px 13px; display:flex; flex-direction:column; gap:8px; position:relative; --eqc:var(--sky); min-width:0; }
.eq.on{ border-color:color-mix(in srgb, var(--eqc) 35%, var(--line-soft)); }
.eq-h{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; }
.eq-h .ico{ width:24px; height:24px; border-radius:6px; display:grid; place-items:center; background:color-mix(in srgb, var(--eqc) 16%, transparent); color:var(--eqc); flex:0 0 auto; }
.eq-h .ico svg{ width:14px; height:14px; }
.eq-h .ico .fan .ring{ fill:none; stroke:currentColor; stroke-width:1.4; opacity:.5; }
.eq-h .ico .fan .bl{ fill:currentColor; opacity:.5; transform-box:fill-box; transform-origin:center; }
.eq-h .ico .fan.lit .bl{ opacity:1; animation:fanSpin linear infinite; animation-duration:inherit; }
.eq-h .ico .fan .hub{ fill:currentColor; }
.eq-h .st{ margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:2px 7px; border-radius:5px; background:var(--surface-2); }
.eq.on .eq-h .st{ color:var(--eqc); background:color-mix(in srgb, var(--eqc) 14%, transparent); }
.eq-n{ font-family:var(--font-mono); font-size:22px; font-weight:500; letter-spacing:-.03em; line-height:1; }
.eq-n small{ font-size:11px; color:var(--ink-3); margin-left:4px; letter-spacing:0; }
.eq-s{ font-size:11.5px; color:var(--ink-3); }
.pips{ display:flex; gap:4px; flex-wrap:wrap; }
.pips i{ width:10px; height:10px; border-radius:2px; background:var(--line-soft); }
.pips i.lit{ background:var(--eqc); }
.sens{ display:flex; gap:6px; align-items:flex-end; height:48px; margin-top:2px; }
.sens b{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; font-family:var(--font-mono); font-size:10px; color:var(--ink-2); height:100%; }
.sens b i{ display:block; width:100%; border-radius:3px 3px 1px 1px; background:var(--clay); opacity:.85; animation:barGrowY 1.4s var(--ease) both; transform-origin:bottom; }
.sens b.hot i{ background:var(--alert); }
@keyframes barGrowY{ from{ transform:scaleY(0); } }

.switcher{ position:sticky; top:56px; z-index:55; background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); }
.switcher-in{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:8px clamp(16px,4vw,40px); max-width:var(--maxw); margin:0 auto; align-items:center; }
.switcher-in::-webkit-scrollbar{ display:none; }
.sw-lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-right:6px; white-space:nowrap; }
.sw{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; border:1px solid transparent; font-family:var(--font-mono); font-size:12px; color:var(--ink-2); white-space:nowrap; --st:var(--ok); transition:background .35s var(--ease), color .35s var(--ease); }
.sw i{ width:6px; height:6px; border-radius:50%; background:var(--st); }
.sw:hover{ background:var(--surface-2); color:var(--ink); }
.sw.on{ background:var(--ink); color:var(--bg); }
.sw.st-warn{ --st:var(--watch); } .sw.st-alert{ --st:var(--alert); } .sw.st-excluded{ --st:var(--ink-3); }

table.tl{ font-family:var(--font-mono); font-size:12px; }
table.tl thead th{ position:sticky; top:0; background:var(--surface); z-index:1; font-weight:500; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; }
table.tl td.cool{ color:var(--sky); }
table.tl td.bad{ color:var(--alert); }
table.tl tr.today td{ background:var(--surface-2); }
.tl-wrap{ overflow:auto; }

/* ── welfare cards ───────────────────────────────── */
.welfare-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.welfare-card{ position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px; min-width:0; }
.welfare-card::before{ content:none; }
.welfare-h{ display:flex; align-items:center; gap:9px; }
.welfare-h .ico{ width:26px; height:26px; border-radius:6px; flex:0 0 auto; display:grid; place-items:center; background:color-mix(in srgb, var(--accent, var(--sky)) 16%, transparent); color:var(--accent, var(--sky)); }
.welfare-h .ico svg{ width:14px; height:14px; }
.welfare-h b{ font-size:13px; font-weight:600; }
.welfare-now{ font-family:var(--font-mono); font-size:26px; font-weight:500; letter-spacing:-.03em; margin-top:12px; line-height:1; }
.welfare-now small{ font-size:12px; color:var(--ink-3); margin-left:5px; }
.welfare-sub{ font-size:12px; color:var(--ink-2); margin-top:5px; line-height:1.5; }
.welfare-sub.ok{ color:var(--ok); } .welfare-sub.warn{ color:var(--watch); } .welfare-sub.bad{ color:var(--alert); }
.welfare-form, .mon-form{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
.welfare-form input, .mon-form input[type="number"], .mon-form input[type="text"], .field input, .field select, .field textarea{
  flex:1 1 84px; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:6px; color:var(--ink);
  padding:8px 10px; font-size:13px; font-family:var(--font-mono);
}
.welfare-form input::placeholder, .mon-form input::placeholder{ color:var(--ink-3); }
.welfare-form input[type="date"]{ flex-basis:100%; }
.welfare-form input:focus, .mon-form input:focus, .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3px color-mix(in srgb, var(--sky) 20%, transparent); }
.welfare-form button, .mon-form button, .fault-fix, .form-btn, .litter-row button{
  font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; border:1px solid var(--line); border-radius:6px; padding:8px 12px;
  color:var(--ink); background:var(--surface-2); transition:background .35s var(--ease), border-color .35s var(--ease);
}
.welfare-form button:hover, .mon-form button:hover, .fault-fix:hover, .form-btn:hover, .litter-row button:hover{ background:var(--glass-hover); border-color:var(--ink-3); }
.mon-form button:disabled, .fault-fix:disabled{ opacity:.5; cursor:default; }
.welfare-hist{ margin-top:12px; display:flex; flex-direction:column; gap:2px; max-height:118px; overflow:auto; }
.welfare-hist .r{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--ink-2); padding:5px 0; border-bottom:1px solid var(--line-soft); }
.welfare-hist .r:last-child{ border-bottom:none; }
.welfare-hist .r b{ color:var(--ink); font-family:var(--font-mono); font-weight:500; }
.welfare-empty, .mon-empty{ font-size:12px; color:var(--ink-3); margin-top:12px; }
.litter-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; padding:7px 0; border-bottom:1px solid var(--line-soft); }
.litter-row:last-child{ border-bottom:none; }
.litter-row.done{ opacity:.5; }
.litter-row.done .lt-date{ text-decoration:line-through; }
.litter-row .lt-note{ color:var(--ink-2); font-size:11px; }

/* ── daily monitoring tiles ──────────────────────── */
.mon-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.mon{ position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:8px; --mc:var(--sage); min-width:0; }
.mon::after{ content:none; }
.mon.warn{ border-color:color-mix(in srgb, var(--watch) 40%, var(--line-soft)); }
.mon.bad{ border-color:color-mix(in srgb, var(--alert) 45%, var(--line-soft)); }
.mon-h{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.mon-h .ico{ width:26px; height:26px; border-radius:6px; display:grid; place-items:center; font-size:13px; background:color-mix(in srgb, var(--mc) 16%, transparent); flex:0 0 auto; }
.mon-pill{ margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:5px; }
.mon-pill.ok{ background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); }
.mon-pill.warn{ background:color-mix(in srgb, var(--watch) 16%, transparent); color:var(--watch); }
.mon-pill.bad{ background:color-mix(in srgb, var(--alert) 16%, transparent); color:var(--alert); }
.mon-now{ font-family:var(--font-mono); font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1; }
.mon-now small{ font-size:12px; color:var(--ink-3); margin-left:5px; letter-spacing:0; }
.mon-sub{ font-size:12px; color:var(--ink-2); line-height:1.5; min-height:17px; }
.mon-spark{ height:36px; margin-top:2px; display:flex; align-items:center; }
.mon-spark svg{ width:100%; height:100%; overflow:visible; }
.line-mon{ stroke:var(--mc); stroke-width:1.8; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.area-mon{ fill:var(--mc); opacity:.1; }
.mon-ok{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2); flex:1 1 100%; }
.mon-ok input{ width:auto; flex:none; }

/* ── standing faults ─────────────────────────────── */
.fault{ display:flex; align-items:flex-start; gap:12px; margin-top:14px; padding:14px 16px; border-radius:var(--radius); border:1px solid color-mix(in srgb, var(--alert) 45%, var(--line-soft)); background:color-mix(in srgb, var(--alert) 6%, var(--surface)); }
.fault-ico{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; margin-top:7px; background:var(--alert); font-size:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--alert) 18%, transparent); }
.fault-body{ flex:1; min-width:0; }
.fault-body b{ display:block; font-size:13px; font-weight:600; margin-bottom:3px; }
.fault-body span{ font-size:12.5px; color:var(--ink-2); line-height:1.55; }
@media (max-width:560px){ .fault{ flex-wrap:wrap; } .fault-fix{ width:100%; } }

/* ── climate wall & one shed's night ─────────────── */
.cw-stage{ position:relative; border-radius:var(--radius-sm); padding:12px 14px 6px; border:1px solid var(--line-soft); background:var(--surface-2); }
.bento .cw-stage{ border:none; background:transparent; padding:0; }
.cw{ display:block; width:100%; height:auto; font-family:var(--font-mono); overflow:visible; }
.cw-cell{ stroke:var(--bg); stroke-width:1; cursor:pointer; transition:filter .35s var(--ease); animation:cwIn .9s var(--ease) backwards; }
.cw-cell:hover{ filter:brightness(1.15); stroke:var(--ink-2); }
.cw-cell.none{ fill:transparent !important; stroke-dasharray:2 3; stroke:var(--line); }
@keyframes cwIn{ from{ opacity:0; } }
.cw-val{ font-size:9.5px; fill:color-mix(in srgb, var(--ink) 80%, transparent); pointer-events:none; }
.cw-shed{ font-size:11px; fill:var(--ink-2); }
.cw-time{ font-size:9px; fill:var(--ink-3); }
.cw-day{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; fill:var(--ink-3); }
.cw-daybreak{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; }
.cw-vent{ fill:var(--gold); }
.cw-heat{ fill:var(--clay); }
.cw-empty{ font-size:13px; color:var(--ink-3); padding:16px 2px; }
.cw-legend{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.cw-scale{ display:flex; align-items:center; gap:7px; }
.cw-scale i{ display:block; width:70px; height:6px; border-radius:3px; background:linear-gradient(90deg, var(--sky), color-mix(in oklab, var(--sky) 25%, var(--surface)), color-mix(in oklab, var(--ok) 30%, var(--surface)), color-mix(in oklab, var(--alert) 30%, var(--surface)), var(--alert)); }
.cw-legend .m{ display:inline-flex; align-items:center; gap:5px; }
.cw-legend .m i{ display:block; width:3px; height:11px; border-radius:2px; background:var(--gold); }
.cw-legend .m.heat i{ width:7px; height:7px; border-radius:50%; background:var(--clay); }
.rb{ display:block; width:100%; height:auto; font-family:var(--font-mono); overflow:visible; }
.rb-grid{ stroke:var(--line-soft); stroke-width:1; }
.rb-ax, .rb-time{ font-size:9px; fill:var(--ink-3); }
.rb-gap{ opacity:.2; } .rb-gap.cold{ fill:var(--sky); } .rb-gap.warm{ fill:var(--alert); }
.rb-set{ fill:none; stroke:var(--ok); stroke-width:1.2; stroke-dasharray:4 3; }
.rb-out{ fill:none; stroke:var(--ink-3); stroke-width:1.2; opacity:.6; }
.rb-temp{ fill:none; stroke:var(--clay); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.rb-dot{ fill:var(--surface); stroke:var(--clay); stroke-width:2; }
.rb-dot.bad{ stroke:var(--sky); r:4; }
.rb-vent{ stroke:var(--gold); stroke-width:1.2; stroke-dasharray:3 3; }
.rb-venttx{ font-size:8.5px; fill:var(--gold); }
.rb-heat{ fill:var(--clay); }
.rb-key{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.rb-key span{ display:inline-flex; align-items:center; gap:6px; }
.rb-key span::before{ content:""; width:14px; height:2px; border-radius:2px; background:currentColor; }
.rb-key .k-temp::before{ background:var(--clay); } .rb-key .k-set::before{ background:repeating-linear-gradient(90deg, var(--ok) 0 4px, transparent 4px 7px); }
.rb-key .k-out::before{ background:var(--ink-3); } .rb-key .k-vent::before{ background:var(--gold); width:3px; height:11px; }
.rb-key .k-heat::before{ background:var(--clay); width:7px; height:7px; border-radius:50%; }

/* ── clock: punch ring, today, week ──────────────── */
.punch{ position:relative; width:200px; height:200px; margin:0 auto; }
.punch .pring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.punch .pr-track{ fill:none; stroke:var(--line-soft); stroke-width:4; }
.punch .pr-arc{ fill:none; stroke:var(--ok); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset 1s linear, stroke .3s; }
.punch.on .pr-arc{ stroke:var(--gold); }
.punch .punch-btn{ position:absolute; inset:14px; border-radius:50%; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; box-shadow:none; }
.punch .punch-btn small{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.punch .punch-btn .tm{ font-family:var(--font-mono); font-size:28px; font-weight:500; letter-spacing:-.03em; line-height:1; }
.punch .punch-btn .tm.small{ font-size:22px; }
.today-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-top:22px; width:100%; max-width:760px; }
.ts-tile{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:12px 14px; text-align:left; }
.ts-tile .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.ts-tile .v{ font-family:var(--font-mono); font-size:18px; font-weight:500; margin-top:4px; letter-spacing:-.02em; }
.ts-tile .v small{ font-size:11px; color:var(--ink-3); margin-left:4px; }
.ts-tile.hot .v{ color:var(--watch); }
.week{ display:flex; gap:5px; align-items:flex-end; height:70px; margin:8px 0 14px; }
.week b{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; height:100%; font-family:var(--font-mono); font-size:10px; color:var(--ink-3); }
.week b i{ display:block; width:100%; border-radius:3px 3px 1px 1px; min-height:3px; transform-origin:bottom; animation:barGrowY 1.45s var(--ease) both; background:var(--ok); opacity:.8; }
.week b.today i{ background:var(--gold); opacity:1; }
.week b.zero i{ background:var(--line-soft); }
.week b span{ font-size:10px; color:var(--ink-2); }

/* ── team: faces, presence, heat ─────────────────── */
.avatar{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:11.5px; color:#fff; background:var(--av, var(--sage)); flex:0 0 auto; position:relative; box-shadow:0 0 0 2px var(--surface); }
.avatar.on::after{ content:""; position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:var(--ok); border:2px solid var(--surface); }
.crew{ display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--line-soft); }
.crew .faces{ display:flex; }
.crew .faces .avatar{ margin-left:-8px; } .crew .faces .avatar:first-child{ margin-left:0; }
.crew .sum{ font-size:12.5px; color:var(--ink-2); } .crew .sum b{ color:var(--ink); }
.heat{ display:flex; gap:3px; margin-top:6px; }
.heat i{ flex:1; height:10px; border-radius:2px; background:color-mix(in srgb, var(--sage) calc(var(--h, 0) * 1%), var(--line-soft)); }
.heat i.today{ outline:1px solid var(--gold); outline-offset:1px; }
.seen{ height:3px; border-radius:2px; background:var(--line-soft); margin-top:8px; overflow:hidden; }
.seen i{ display:block; height:100%; background:var(--sage); animation:wbarGrow 1.6s var(--ease) both; }

/* ── footer ──────────────────────────────────────── */
footer{ border-top:1px solid var(--line-soft); padding:28px 0 60px; text-align:left; font-size:12px; color:var(--ink-3); line-height:1.7; }
.foot-in{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand .mark{ width:24px; height:24px; border-radius:6px; display:grid; place-items:center; background:var(--ink); color:var(--bg); font-weight:700; font-size:11px; }
.foot-brand .mark svg{ display:none; } .foot-brand .mark::before{ content:"W"; }
.foot-brand b{ display:block; font-size:13px; font-weight:600; color:var(--ink); }
.foot-brand span{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
.foot-links{ display:flex; gap:2px; margin-left:auto; }
.foot-links a{ font-size:12.5px; color:var(--ink-2); padding:6px 10px; border-radius:6px; }
.foot-links a:hover{ background:var(--surface-2); color:var(--ink); }
.foot-note{ flex-basis:100%; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); }
@media (max-width:760px){ .foot-links{ margin-left:0; } }

/* ── page transitions & progress ─────────────────── */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .35s ease-out both; }
::view-transition-new(root){ animation:vtIn .5s ease-out both; }
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; } }
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:200; pointer-events:none; transform-origin:0 50%; transform:scaleX(0); background:var(--ink); opacity:.5; }
@supports (animation-timeline: scroll()){ .scroll-progress{ animation:progressGrow linear both; animation-timeline:scroll(root); } }
@keyframes progressGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* staggered entrances, kept short */
.vital.gauge, .eq, .ts-tile, .welfare-card, .job-card, .staff-row, .mon, .act, .log p{ animation:tileIn 1s var(--ease) backwards; animation-delay:calc(var(--k, 0) * 70ms); }
@keyframes tileIn{ from{ opacity:0; transform:translateY(6px); } }
.vitals > :nth-child(2), .equip-grid > :nth-child(2), .mon-grid > :nth-child(2), #actions > :nth-child(2), #log > :nth-child(2){ --k:1; }
.vitals > :nth-child(3), .equip-grid > :nth-child(3), .mon-grid > :nth-child(3), #actions > :nth-child(3), #log > :nth-child(3){ --k:2; }
.vitals > :nth-child(4), .equip-grid > :nth-child(4), .mon-grid > :nth-child(4), #actions > :nth-child(4), #log > :nth-child(4){ --k:3; }
.vitals > :nth-child(5), .equip-grid > :nth-child(5), .mon-grid > :nth-child(5), #actions > :nth-child(5), #log > :nth-child(5){ --k:4; }
.vitals > :nth-child(6), .equip-grid > :nth-child(6), .mon-grid > :nth-child(6), #actions > :nth-child(6), #log > :nth-child(6){ --k:5; }
table.tl tbody tr{ animation:rowIn .8s var(--ease) backwards; animation-delay:calc(var(--r, 0) * 40ms); }
@keyframes rowIn{ from{ opacity:0; } }

/* ── small screens ───────────────────────────────── */
@media (max-width:760px){
  .hero{ padding-top:28px; }
  section{ padding:22px 0; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat{ padding:14px 15px; }
  .grid{ grid-template-columns:1fr; gap:10px; }
  .panel, .tile{ padding:16px; }
  footer{ padding-bottom:40px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rv{ opacity:1; transform:none; }
  .ticker-track{ animation:none; }
}