/* ============================================================
   Blackbird Flightdeck — design system + components
   Brand: terracotta #C75527 · cream #F3F1EF · EB Garamond + Roboto
   ============================================================ */
@import url('fonts.css');

:root{
  --clay:#C75527;
  --clay-dark:#A8431C;
  --clay-soft:rgba(199,85,39,.10);
  --clay-line:rgba(199,85,39,.28);
  --cream:#F3F1EF;
  --cream-2:#EBE7E1;
  --paper:#FFFFFF;
  --ink:#1A1714;
  --ink-2:#4A4239;
  --ink-soft:#6B6258;
  --ink-faint:#9A9183;
  --line:rgba(26,23,20,.10);
  --line-2:rgba(26,23,20,.06);
  --sage:#6E7B52;
  --sage-soft:rgba(110,123,82,.14);
  --amber:#C98A2B;
  --amber-soft:rgba(201,138,43,.14);
  --rust:#B23B2E;
  --rust-soft:rgba(178,59,46,.12);
  --teal:#3C7A86;
  --shadow:0 1px 2px rgba(26,23,20,.04), 0 8px 28px rgba(26,23,20,.06);
  --shadow-lg:0 24px 60px rgba(26,23,20,.18);
  --serif:'EB Garamond', Garamond, 'Adobe Garamond Pro', Georgia, serif;
  --sans:'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --r:14px;
  --nav-w:228px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--clay-soft)}

.serif{font-family:var(--serif)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ── APP SHELL ─────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--nav-w) 1fr;grid-template-rows:auto 1fr;min-height:100vh;
     grid-template-areas:"top top" "nav main"}

/* Topbar */
.top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:16px;
     padding:0 22px;height:60px;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top-left{display:flex;align-items:center;gap:16px;min-width:0}
.brand-mark{display:flex;align-items:center;gap:11px}
.brand-mark img{height:24px;width:auto;display:block}
.brand-divider{width:1px;height:26px;background:var(--line)}
.estate-tag{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.estate-tag .e-name{font-family:var(--serif);font-size:17px;color:var(--ink);letter-spacing:.01em}
.estate-tag .e-sub{font-size:11px;color:var(--ink-faint);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{display:flex;align-items:center;gap:14px}
.status-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--sage);
             background:var(--sage-soft);padding:5px 11px;border-radius:30px;letter-spacing:.02em}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 0 rgba(110,123,82,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(110,123,82,.45)}70%{box-shadow:0 0 0 7px rgba(110,123,82,0)}100%{box-shadow:0 0 0 0 rgba(110,123,82,0)}}
.top-meta{font-size:11.5px;color:var(--ink-faint);text-align:right;line-height:1.3}
.owner{display:flex;align-items:center;gap:9px}
.owner-av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:var(--serif);
          font-size:13px;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.btn-ask{display:inline-flex;align-items:center;gap:8px;background:var(--clay);color:#fff;font-weight:500;font-size:12.5px;
         padding:8px 14px;border-radius:30px;letter-spacing:.02em;transition:background .15s,transform .15s}
.btn-ask:hover{background:var(--clay-dark);transform:translateY(-1px)}
.btn-ask svg{width:15px;height:15px}

/* Sidebar */
.nav{grid-area:nav;background:var(--paper);border-right:1px solid var(--line);padding:16px 12px;
     display:flex;flex-direction:column;gap:3px;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
.nav-section{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
             padding:14px 12px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--ink-soft);
          font-size:13px;font-weight:500;transition:background .14s,color .14s;position:relative;text-decoration:none}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.85}
.nav-item .badge{margin-left:auto;background:var(--rust);color:#fff;font-size:10px;font-weight:600;min-width:18px;height:18px;
                 border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav-item:hover{background:var(--cream);color:var(--ink)}
.nav-item.active{background:var(--clay-soft);color:var(--clay-dark)}
.nav-item.active svg{opacity:1;color:var(--clay)}
.nav-spacer{flex:1}
.nav-foot{padding:12px;border-top:1px solid var(--line);margin-top:8px}
.nav-foot .pwr{font-size:10.5px;color:var(--ink-faint);line-height:1.5}
.nav-foot .pwr b{color:var(--ink-soft);font-weight:600}

/* Main */
.main{grid-area:main;padding:26px 30px 40px;max-width:1180px;width:100%}
.view-head{margin-bottom:20px}
.view-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:7px}
.view-title{font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--ink);letter-spacing:.01em}
.view-desc{color:var(--ink-soft);font-size:13.5px;max-width:640px;margin-top:8px;line-height:1.6}

/* ── PRIMITIVES ────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-h h3{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.card-h h3 b{color:var(--clay);font-weight:600}
.card-h .h-action{font-size:11.5px;color:var(--ink-faint)}

.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-21{grid-template-columns:2fr 1fr}
.g-12{grid-template-columns:1fr 2fr}
.span-2{grid-column:span 2}

/* KPI tiles */
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow)}
.kpi .k-lab{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.kpi .k-val{font-family:var(--serif);font-size:30px;line-height:1;color:var(--ink)}
.kpi .k-val small{font-size:15px;color:var(--ink-faint);font-family:var(--sans);margin-left:3px}
.kpi .k-delta{font-size:11px;margin-top:8px;display:inline-flex;align-items:center;gap:5px}
.k-delta.good{color:var(--sage)} .k-delta.warn{color:var(--amber)} .k-delta.bad{color:var(--rust)} .k-delta.mut{color:var(--ink-faint)}
.kpi.accent{background:linear-gradient(160deg,#fff, #fff 55%, var(--clay-soft));border-color:var(--clay-line)}

/* Chart svg helpers */
.cx{width:100%;height:auto;display:block;overflow:visible}
.cx-axis{font-family:var(--sans);font-size:9px;fill:var(--ink-faint)}
.cx-gauge{width:150px;height:86px;display:block;margin:0 auto}
.cx-gauge-val{font-family:var(--serif);font-size:21px;fill:var(--ink)}
.cx-gauge-lab{font-family:var(--sans);font-size:9px;letter-spacing:.06em;fill:var(--ink-faint);text-transform:uppercase}
.cx-ring{display:block}
.cx-ring-val{font-family:var(--serif);font-size:15px;fill:var(--ink)}

/* Meter */
.mtr{display:block;height:6px;background:var(--cream-2);border-radius:4px;overflow:hidden}
.mtr-fill{display:block;height:100%;border-radius:4px;transition:width .8s cubic-bezier(.2,.7,.2,1)}

/* Rows (circuits, soil, valves, devices) */
.row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:none}
.row .r-name{font-size:13px;color:var(--ink);min-width:130px;display:flex;align-items:center;gap:8px}
.row .r-meter{flex:1}
.row .r-val{font-size:12px;color:var(--ink-soft);min-width:62px;text-align:right;font-variant-numeric:tabular-nums}
.dotc{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dotc.ok{background:var(--sage)} .dotc.warn{background:var(--amber)} .dotc.bad{background:var(--rust)}
.dotc.solar{background:var(--teal)} .dotc.idle{background:var(--ink-faint)}

/* Log / feed items */
.feed-item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.feed-item:last-child{border-bottom:none}
.feed-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px}
.feed-dot.ok{background:var(--sage)} .feed-dot.warn{background:var(--amber)} .feed-dot.bad{background:var(--rust)} .feed-dot.info{background:var(--teal)}
.feed-msg{font-size:13px;color:var(--ink);line-height:1.45}
.feed-meta{font-size:11px;color:var(--ink-faint);margin-top:2px;font-variant-numeric:tabular-nums}

/* Pills / tags */
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--cream);border:1px solid var(--line);
      border-radius:30px;padding:3px 10px;font-size:11px;color:var(--ink-soft)}
.pill.clay{background:var(--clay-soft);border-color:var(--clay-line);color:var(--clay-dark)}
.tag-row{display:flex;flex-wrap:wrap;gap:6px}

/* Callout (insight / incident) */
.callout{border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:1.55}
.callout .c-lab{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.callout.clay{background:var(--clay-soft);border-left:3px solid var(--clay)}
.callout.clay .c-lab{color:var(--clay-dark)}
.callout.warn{background:var(--amber-soft);border-left:3px solid var(--amber)}
.callout.warn .c-lab{color:var(--amber)}
.callout.sage{background:var(--sage-soft);border-left:3px solid var(--sage)}
.callout.sage .c-lab{color:var(--sage)}
.callout.ink{background:#211D18;border-left:3px solid var(--clay);color:#E9E2D7}
.callout.ink .c-lab{color:var(--clay)}
.callout.ink .c-body{color:#C9C0B2}

/* Block heatmap */
.heat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.heat-cell{border-radius:10px;padding:12px;text-align:center;border:1px solid transparent}
.heat-cell .h-blk{font-size:10.5px;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase}
.heat-cell .h-lab{font-family:var(--serif);font-size:19px;margin:2px 0}
.heat-cell .h-idx{font-size:10.5px;color:var(--ink-faint)}
.heat-cell.low{background:var(--sage-soft);border-color:rgba(110,123,82,.3)} .heat-cell.low .h-lab{color:var(--sage)}
.heat-cell.mod{background:var(--amber-soft);border-color:rgba(201,138,43,.3)} .heat-cell.mod .h-lab{color:var(--amber)}
.heat-cell.high{background:var(--rust-soft);border-color:rgba(178,59,46,.3)} .heat-cell.high .h-lab{color:var(--rust)}

/* Estate block map (SVG container) */
.map-wrap{position:relative;background:linear-gradient(150deg,#EFEAE2,#F6F3EE);border:1px solid var(--line);border-radius:var(--r);padding:6px}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--ink-soft);margin-top:8px;padding:0 6px 4px}
.map-legend span{display:inline-flex;align-items:center;gap:6px}

/* Alerts */
.alert{display:flex;gap:13px;padding:15px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow);align-items:flex-start}
.alert + .alert{margin-top:11px}
.alert-sev{width:4px;align-self:stretch;border-radius:4px;flex-shrink:0}
.alert-sev.high{background:var(--rust)} .alert-sev.med{background:var(--amber)} .alert-sev.low{background:var(--teal)} .alert-sev.info{background:var(--ink-faint)}
.alert-body{flex:1;min-width:0}
.alert-title{font-size:14px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.alert-detail{font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.5}
.alert-foot{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.alert-meta{font-size:11px;color:var(--ink-faint)}
.sev-tag{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:20px}
.sev-tag.high{background:var(--rust-soft);color:var(--rust)} .sev-tag.med{background:var(--amber-soft);color:var(--amber)}
.sev-tag.low{background:rgba(60,122,134,.12);color:var(--teal)} .sev-tag.info{background:var(--cream-2);color:var(--ink-soft)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:9px;transition:.14s;border:1px solid transparent}
.btn-primary{background:var(--clay);color:#fff} .btn-primary:hover{background:var(--clay-dark)}
.btn-ghost{background:var(--cream);border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink-faint)}
.btn-quiet{color:var(--ink-faint);padding:7px 8px} .btn-quiet:hover{color:var(--ink)}
.btn:disabled{opacity:.5;cursor:default}

/* Rules toggle */
.rule{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow)}
.rule + .rule{margin-top:11px}
.rule-body{flex:1}
.rule-name{font-size:14px;font-weight:500;color:var(--ink)}
.rule-desc{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.5}
.switch{position:relative;width:42px;height:24px;border-radius:30px;background:var(--cream-2);flex-shrink:0;transition:background .18s;border:1px solid var(--line)}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s}
.switch.on{background:var(--clay);border-color:var(--clay)}
.switch.on::after{transform:translateX(18px)}

/* Device table */
.dtable{width:100%;border-collapse:collapse;font-size:12.5px}
.dtable th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;padding:0 10px 10px;border-bottom:1px solid var(--line)}
.dtable td{padding:11px 10px;border-bottom:1px solid var(--line-2);color:var(--ink)}
.dtable tr:last-child td{border-bottom:none}
.dtable .d-name{font-weight:500;display:flex;align-items:center;gap:9px}
.sig{display:inline-block;width:46px;height:6px;border-radius:4px;background:var(--cream-2);overflow:hidden;vertical-align:middle}
.sig i{display:block;height:100%;background:var(--sage)}
.st-online{display:inline-flex;align-items:center;gap:6px;color:var(--sage);font-size:12px}

/* ── ASK RIP slide-over ────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(26,23,20,.34);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
.scrim.show{opacity:1;pointer-events:auto}
.ask{position:fixed;top:0;right:0;height:100vh;width:390px;max-width:92vw;background:var(--cream);border-left:1px solid var(--line);
     box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);z-index:61;display:flex;flex-direction:column}
.ask.show{transform:translateX(0)}
.ask-top{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.ask-av{width:34px;height:34px;border-radius:50%;background:var(--clay);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ask-av img{width:20px;height:20px;filter:brightness(0) invert(1)}
.ask-id{line-height:1.2}
.ask-id .a-name{font-family:var(--serif);font-size:16px;color:var(--ink)}
.ask-id .a-sub{font-size:10.5px;color:var(--ink-faint);letter-spacing:.02em}
.ask-close{margin-left:auto;color:var(--ink-faint);font-size:20px;width:30px;height:30px;border-radius:8px}
.ask-close:hover{background:var(--cream);color:var(--ink)}
.ask-log{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:86%;padding:11px 13px;border-radius:14px;font-size:13px;line-height:1.5}
.msg.rip{background:var(--paper);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px;color:var(--ink)}
.msg.rip b{color:var(--clay-dark)}
.msg.me{background:var(--ink);color:var(--cream);align-self:flex-end;border-bottom-right-radius:4px}
.ask-sugs{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px}
.sug{font-size:11.5px;color:var(--clay-dark);background:var(--clay-soft);border:1px solid var(--clay-line);
     border-radius:30px;padding:6px 11px;transition:.14s;text-align:left}
.sug:hover{background:var(--clay);color:#fff}
.ask-input{display:flex;gap:9px;padding:14px 16px;border-top:1px solid var(--line);background:var(--paper)}
.ask-input input{flex:1;border:1px solid var(--line);background:var(--cream);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13px;color:var(--ink);outline:none}
.ask-input input:focus{border-color:var(--clay-line)}
.ask-send{background:var(--clay);color:#fff;border-radius:10px;width:40px;display:flex;align-items:center;justify-content:center}
.ask-send:hover{background:var(--clay-dark)}
.ask-send svg{width:16px;height:16px}
.typing{display:inline-flex;gap:3px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-faint);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* Overview hero strip */
.hero{position:relative;overflow:hidden;border-radius:var(--r);background:#211D18;color:#EDE6DA;padding:24px 26px;box-shadow:var(--shadow);border:1px solid #2C2620}
.hero::after{content:'';position:absolute;right:-60px;top:-60px;width:320px;height:320px;
  background:radial-gradient(circle,rgba(199,85,39,.30),transparent 70%);pointer-events:none}
.hero-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:9px;position:relative}
.hero h2{font-family:var(--serif);font-size:30px;line-height:1.08;position:relative}
.hero p{font-size:13px;color:#BDB3A4;max-width:520px;margin-top:8px;line-height:1.6;position:relative}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;position:relative}
.hf .hf-v{font-family:var(--serif);font-size:21px;color:#EDE6DA}
.hf .hf-l{font-size:10.5px;color:#8E8576;letter-spacing:.04em;margin-top:2px}

.fade{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.sitefoot{grid-area:main;display:none}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:1fr}
  .g-21,.g-12{grid-template-columns:1fr}
  .span-2{grid-column:auto}
}
@media(max-width:860px){
  .app{grid-template-columns:1fr;grid-template-areas:"top" "nav" "main"}
  .nav{position:static;height:auto;flex-direction:row;overflow-x:auto;gap:4px;border-right:none;border-bottom:1px solid var(--line)}
  .nav-section,.nav-spacer,.nav-foot{display:none}
  .nav-item{white-space:nowrap}
  .nav-item .badge{margin-left:6px}
  .main{padding:20px 16px 36px}
  .estate-tag .e-sub{display:none}
  .top-meta{display:none}
}
@media(max-width:560px){
  .g-2,.g-4{grid-template-columns:1fr}
  .view-title,.hero h2{font-size:25px}
  .btn-ask span{display:none}
}

/* ── Ask Rip — live-Claude markdown answer formatting ──────
   Not part of the prototype: scoped to the chat bubble (.msg.rip) so no other
   surface is affected. Renders bold, code, headings, bullet lists, and tables
   returned by the real Ask Rip service in the estate palette. */
.msg.rip .ask-h{font-weight:600;color:var(--clay-dark);margin:7px 0 3px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.msg.rip p{margin:0 0 8px}
.msg.rip p:last-child{margin-bottom:0}
.msg.rip ul{margin:4px 0 8px;padding-left:18px}
.msg.rip li{margin:2px 0}
.msg.rip code{background:var(--cream-2);border-radius:4px;padding:1px 5px;font-size:12px}
.msg.rip .ask-tbl{border-collapse:collapse;width:100%;margin:6px 0;font-size:12px}
.msg.rip .ask-tbl th,.msg.rip .ask-tbl td{border:1px solid var(--line);padding:5px 8px;text-align:left}
.msg.rip .ask-tbl th{background:var(--cream);font-weight:600;color:var(--ink-soft)}

/* Heatmap cell for a block whose soil probe has no current reading (offline). */
.heat-cell.nodata{background:var(--cream-2);border-color:var(--line)}
.heat-cell.nodata .h-lab{color:var(--ink-faint)}

/* ── Weather page — per-station metric grid ──────────────── */
.wx-station{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper)}
.wx-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:12px}
.wx-blk{font-size:10.5px;color:var(--clay-dark);background:var(--clay-soft);border:1px solid var(--clay-line);border-radius:20px;padding:2px 8px}
.wx-seen{margin-left:auto;font-size:11px;color:var(--ink-faint)}
.wx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.wx-cell{background:var(--cream);border-radius:9px;padding:9px 10px}
.wx-v{font-family:var(--serif);font-size:17px;color:var(--ink);line-height:1.15}
.wx-l{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px}
@media(max-width:640px){.wx-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Soil profile — per-probe depth ladder ───────────────── */
.soil-probe{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper)}
.soil-phead{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:10px}
.soil-avg{margin-left:auto;font-size:11.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.soil-phead .wx-seen{margin-left:10px}
.soil-depth{padding:8px 0;border-bottom:1px solid var(--line-2)}
.soil-depth:last-child{border-bottom:none}
.sd-top{display:flex;align-items:center;gap:11px}
.sd-lab{min-width:62px;font-size:12px;color:var(--ink)}
.sd-meter{flex:1}
.sd-moist{min-width:44px;text-align:right;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.sd-sub{font-size:10.5px;color:var(--ink-faint);margin-top:4px;margin-left:73px}

/* Weather trend mini-chart axes + station card polish */
.wx-station{box-shadow:var(--shadow)}
.wx-area{font-size:10.5px;color:var(--ink-faint);margin-left:2px}
.cx-xaxis{font-family:var(--sans);font-size:11px;fill:var(--ink-faint)}
.cx-yaxis{font-family:var(--sans);font-size:11px;fill:var(--ink-faint)}

/* Co-brand: Blackbird Vineyards × Emergent (customer × vendor) in the topbar */
.brand-x{color:var(--ink-faint);font-size:14px;line-height:1;font-weight:300}
/* Emergent wordmark sits inside a swoosh, so bump it a touch to visually match
   the Blackbird wordmark's cap height. Higher specificity beats .brand-mark img. */
.brand-mark img.brand-emergent{height:30px;width:auto;display:block}

/* "Powered by Emergent" link (sidebar footer + login footer) */
.pwr-link{color:inherit;text-decoration:none}
.pwr-link:hover{color:var(--clay)}

/* Spring-tank trend legend (toggle series) */
.tank-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tank-legend .lg{user-select:none;-webkit-user-select:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);background:var(--cream);border:1px solid var(--line);border-radius:30px;padding:4px 11px;transition:.14s}
.tank-legend .lg i{width:9px;height:9px;border-radius:50%;display:inline-block}
.tank-legend .lg.off{opacity:.42;text-decoration:line-through}
.tank-legend .lg:hover{border-color:var(--ink-faint)}

/* Automation Rules toggles are illustrative in live mode — grayed + inert */
.switch.disabled{opacity:.4;pointer-events:none;cursor:default}

/* Fuel/tank fill bar — slimmer and rounder than the inline .mtr meter, with
   quarter gridlines so a glance reads roughly how full the tank is. */
.fuel-bar{position:relative;height:11px;border-radius:7px;background:var(--cream-2);overflow:hidden}
.fuel-bar i{display:block;height:100%;border-radius:7px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.fuel-bar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),rgba(26,23,20,.13) calc(25% - 1px),rgba(26,23,20,.13) 25%)}

/* Crosshair-tooltip charts (battery SOC, diesel trend) */
.soc-wrap,.cx-wrap{position:relative}
.soc-tip,.cx-tip{position:absolute;transform:translate(-50%,calc(-100% - 9px));pointer-events:none;opacity:0;transition:opacity .1s;
  background:var(--ink);color:var(--cream);border-radius:7px;padding:5px 9px;font-size:11.5px;line-height:1.35;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:5;text-align:center}
.soc-tip .soc-tip-d,.cx-tip .cx-tip-d{display:block;color:var(--cream-2,#e7ded1);font-size:10.5px}
.soc-tip b,.cx-tip b{font-size:13px}

/* Weather metric picker (chart header) */
.wx-select{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);background:var(--cream);
  border:1px solid var(--line);border-radius:30px;padding:5px 10px;cursor:pointer;transition:.14s}
.wx-select:hover{border-color:var(--ink-faint);color:var(--ink)}
.wx-select:focus{outline:none;border-color:var(--clay-line)}

/* 10-day forecast strip (Open-Meteo prediction) */
.fc-strip{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}
.fc-tile{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:9px 5px;
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:border-color .14s}
.fc-tile:hover{border-color:var(--ink-faint)}
.fc-tile.fc-today{background:var(--clay-soft);border-color:var(--clay-line)}
.fc-day{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);line-height:1}
.fc-date{font-size:9.5px;color:var(--ink-faint);line-height:1}
.fc-icon{width:26px;height:26px;display:block;margin:2px 0}
.fc-temp{font-family:var(--serif);font-size:15px;color:var(--ink);line-height:1}
.fc-temp span{font-family:var(--sans);font-size:11px;color:var(--ink-faint);margin-left:4px}
.fc-precip{font-size:10px;font-weight:600;color:var(--teal);line-height:1.2;text-align:center}
.fc-precip.dry{color:var(--ink-faint);font-weight:400}
.fc-precip i{display:block;font-style:normal;font-size:9px;font-weight:400;color:var(--ink-faint)}
@media (max-width:1100px){.fc-strip{grid-template-columns:repeat(5,1fr)}}

/* Multi-series crosshair tooltip (station trend, tank trend) */
.cx-tip-multi{white-space:nowrap;text-align:left;padding:7px 10px}
.cx-tip-multi .cx-row{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.5}
.cx-tip-multi .cx-row i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.cx-tip-multi .cx-row b{margin-left:auto;padding-left:12px;font-size:11.5px}

/* Estate roll-up card sits first in the station grid, subtly set apart */
.wx-station.wx-estate{background:linear-gradient(160deg,var(--paper),var(--paper) 60%,var(--clay-soft));
  border-color:var(--clay-line)}
.wx-how{font-style:normal;text-transform:none;letter-spacing:0;color:var(--clay);font-weight:600}


/* ===== Asset detail pages: click-through affordance ======================
   Anything that already represents one asset becomes its own link. At rest it
   looks exactly as before — the only change is on hover: a small lift and a
   chevron that fades in on the right. No new nav entries, no extra chrome. */
.is-link{cursor:pointer;position:relative;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.is-link:hover{transform:translateY(-2px);border-color:var(--clay-line);box-shadow:0 6px 18px rgba(60,40,28,.10)}
.is-link:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.is-link::after{content:'\203A';position:absolute;top:12px;right:14px;font-size:17px;line-height:1;
  color:var(--clay);opacity:0;transform:translateX(-3px);transition:opacity .14s ease,transform .14s ease;pointer-events:none}
.is-link:hover::after{opacity:1;transform:translateX(0)}
/* Table rows can't take a transform or a positioned ::after cleanly — they get
   a tint plus a chevron on the last cell instead. */
tr.is-link{cursor:pointer}
tr.is-link:hover td{background:var(--clay-soft)}
tr.is-link td:last-child{position:relative}
tr.is-link td:last-child::after{content:'\203A';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--clay);font-size:15px;opacity:0;transition:opacity .14s ease}
tr.is-link:hover td:last-child::after{opacity:1}

/* Breadcrumb back to the section the asset lives in */
.crumb{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-faint);margin-bottom:10px}
.crumb a{color:var(--clay);cursor:pointer;font-weight:500}
.crumb a:hover{text-decoration:underline}
.crumb span::before{content:'/';margin-right:9px;color:var(--line)}

/* Range selector above the asset trend charts */
.asset-range{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.range-tabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper)}
.range-tabs button{border:none;background:transparent;padding:5px 14px;font:inherit;font-size:11.5px;
  color:var(--ink-soft);cursor:pointer;transition:background .12s ease,color .12s ease}
.range-tabs button+button{border-left:1px solid var(--line)}
.range-tabs button:hover{background:var(--cream-2)}
.range-tabs button.active{background:var(--clay);color:#fff}

/* Overview "Spring reserves": the card had spare height, so the rows breathe,
   the meter is thicker, and % full sits above the gallons. Whole row links to
   the tank's detail page. */
.tank-row{padding:13px 0}
.tank-row .mtr{height:10px;border-radius:5px}
.tank-row .mtr-fill{border-radius:5px}
.tank-row .r-val{min-width:78px;display:flex;flex-direction:column;align-items:flex-end;
  gap:1px;line-height:1.25;text-align:right}
.tank-row .r-val b{font-size:14.5px;font-weight:600}
.tank-row .r-val span{font-size:11px;color:var(--ink-faint)}
/* A row can't lift like a card — it gets a tint and an inset chevron instead. */
.tank-row.is-link{margin:0 -8px;padding-left:8px;padding-right:22px;border-radius:8px}
.tank-row.is-link:hover{transform:none;box-shadow:none;background:var(--clay-soft);
  border-bottom-color:var(--line-2)}
.tank-row.is-link::after{top:50%;right:7px;transform:translateY(-50%) translateX(-3px)}
.tank-row.is-link:hover::after{transform:translateY(-50%) translateX(0)}