/* Flora Forecast app styles. Tokens first (MASTER_PLAN §4.1–4.3), then components. Dark only in Build 1. */
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* colour (§4.1) */
  --bg:#131313;
  --surface:#1a1a1b;
  --rule:#2a2a2a;
  --rule-2:#3a3a3a;
  --rule-strong:#f2f2f2;
  --input-line:#6f6f6f;
  --fg:#f2f2f2;
  --body:#e6e6e6;
  --dek:#c9c9c9;
  --meta:#9a9a9a;
  --sky-top:#1e1a33;
  --sky-mid:#171622;
  --iso:rgba(167,139,250,.22);
  --violet:#a78bfa;
  --beta-line:rgba(167,139,250,.55);
  --beta-text:#c9b8ff;
  --high:#ff8a3d;
  --med:#ffd23f;
  --low:#9a9a9a;
  --action:#a3e635;
  --on-action:#131313;
  --temp-cold:#6aa8ff;
  --temp-mid:#cfcfcf;
  --temp-warm:#ffb36b;
  --water:#6aa8ff;
  --scrim:rgba(0,0,0,.6);
  --track:#262626;
  --seg-fill:#262626;

  /* type families (§4.2) */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* type scale, 390 values; the ≥840 block below swaps them */
  --fs-temp-hi:96px;
  --fs-temp-lo:40px;
  --fs-h1:30px;
  --fs-h2:22px;
  --fs-title:19px;
  --fs-lede:18px;
  --fs-action:20px;
  --fs-ui:15px;
  --fs-input:16px;
  --fs-small:13px;
  --fs-tab:13px;
  --fs-caps:11px;
  --fs-fig:13px;
  --fs-fig-sm:11px;

  /* spacing (§4.3) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; --s9:64px;
  --gutter:20px;
  --max:1180px;

  /* radii: only these */
  --r-pill:999px;
  --r-sheet:16px;
  --r-tag:3px;

  /* sizes */
  --tabbar-h:56px;
  --bar-h:52px;
  --row-min:48px;
  --btn-min:44px;
  --btn-primary:48px;

  color-scheme:dark;
}
@media (min-width:760px){:root{--gutter:28px}}
@media (min-width:840px){
  :root{
    --fs-temp-hi:152px;
    --fs-temp-lo:56px;
    --fs-h1:44px;
    --fs-h2:26px;
    --fs-lede:19px;
    --fs-action:22px;
    --fs-tab:15px;
    --fs-caps:12px;
    --fs-fig-sm:11.5px;
  }
}
/* tokens end */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);overscroll-behavior-y:contain;scroll-padding-bottom:calc(var(--tabbar-h) + 16px)}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--body);font-family:var(--sans);font-weight:500;font-size:var(--fs-ui);line-height:1.4;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,ul,ol,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
i,em,cite,var,dfn,address{font-style:normal}
img,svg{display:block}
img{max-width:100%}
a{color:var(--violet);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;text-align:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}
[hidden]{display:none!important}
table{border-collapse:collapse;border-spacing:0}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* iPhone standalone: keep the masthead and bars clear of the status bar / notch (0 in a desktop browser) */
.view{padding-top:env(safe-area-inset-top);padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
.ico{flex:none}

/* ---------- nameplate (C1): official cube + wordmark PNGs, violet FORECAST desk on side rules ---------- */
.np{display:inline-flex;flex-direction:column;align-items:stretch;gap:8px;color:inherit;text-decoration:none}
.np-top{display:flex;align-items:center;justify-content:center;gap:10px}
.np-cube{height:32px;width:auto}
.np-word{height:21px;width:auto}
.np-desk{display:flex;align-items:center;gap:12px;padding-left:.42em;font-family:var(--sans);font-weight:700;font-size:var(--fs-caps);line-height:1;letter-spacing:.42em;color:var(--violet);white-space:nowrap}
.np-desk::before,.np-desk::after{content:"";flex:1 1 0;min-width:14px;height:1px;background:var(--rule-2)}
/* Footer nameplate: every footer text is 12 px or more (QC E29), the desk included; cube and wordmark keep the
   full nameplate's 32:21 ratio at a size that balances a 12 px desk. */
.np-small{gap:8px}
.np-small .np-top{gap:9px}
.np-small .np-cube{height:28px}
.np-small .np-word{height:18.5px}
.np-small .np-desk{font-size:12px;gap:10px}
@media (min-width:840px){.np-full .np-cube{height:46px}.np-full .np-word{height:34px}.np-full .np-top{gap:14px}.np-full{gap:10px}}

/* ---------- masthead, grow line, state line ---------- */
.mast{text-align:center}
.mast-in{display:flex;flex-direction:column;align-items:center;gap:12px;padding-block:20px 12px}
.navrow{display:none}
.growline{border-top:1px solid var(--rule)}
.growline-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.grow-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:0;padding-right:4px;color:var(--fg);font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1.2}
.grow-btn .grow-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow-btn .ico{color:var(--meta)}
.updated{flex:none;font-family:var(--mono);font-weight:500;font-size:12px;line-height:1;color:var(--meta);white-space:nowrap}
.tz-line{padding-bottom:10px;font-size:13px;line-height:1.45;color:var(--meta)}
.state-line{border-top:1px solid var(--rule)}
.state-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding-block:4px}
.state-row+.state-row{border-top:1px solid var(--rule)}
.state-row p{font-size:13px;line-height:1.45;color:var(--dek)}
.state-row .btn-text{flex:none}
@media (min-width:840px){
  .mast-in{padding-block:28px 0;gap:18px}
  .navrow{display:flex;justify-content:center;gap:32px}
  .navrow a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-weight:600;font-size:var(--fs-tab);line-height:1;color:var(--meta)}
  .navrow a.on{color:var(--fg)}
  .navrow a.on::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--violet)}
  .growline-in{justify-content:center;gap:28px}
  .tz-line{text-align:center}
}
@media (max-height:479px) and (orientation:landscape){.mast .np{display:none}.mast-in{padding-block:8px}}

/* ---------- tab bar (C11): text only ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--surface);border-top:1px solid var(--rule)}
.tabs a{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;font-size:var(--fs-tab);line-height:1;color:var(--meta)}
.tabs a.on{color:var(--fg)}
.tabs a.on::before{content:"";position:absolute;top:-1px;left:50%;width:32px;margin-left:-16px;height:2px;background:var(--violet)}
@media (min-width:840px){.tabs{display:none}.view{padding-bottom:0}}

/* ---------- plain 52 px bar (Journal, Grows, detail screens) ---------- */
.bar{border-bottom:1px solid var(--rule)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--bar-h)}
.bar-title{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;color:var(--fg)}
.bar-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-6px;padding-right:8px;font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);color:var(--fg)}
.bar-back .ico{color:var(--violet)}
.bar-right{display:flex;align-items:center;gap:8px;min-width:0}
.bar-nav{display:none}
@media (min-width:840px){.bar-nav{display:block;border-top:1px solid var(--rule)}.bar-nav .navrow{justify-content:flex-start}}

/* ---------- buttons (C9) ---------- */
.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--btn-primary);padding:0 28px;border-radius:var(--r-pill);background:var(--action);color:var(--on-action);font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1;text-align:center}
.btn-primary:active{background:#93d12c}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-min);padding:0 18px;border:1px solid var(--rule-2);border-radius:var(--r-pill);color:var(--fg);font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1;text-align:center;white-space:nowrap}
.btn-outline:active{background:var(--seg-fill)}
.btn-text{display:inline-flex;align-items:center;gap:6px;min-height:var(--btn-min);padding:0 2px;color:var(--violet);font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1;white-space:nowrap}
.btn-text:active{color:var(--fg)}
@media (hover:hover){.btn-outline:hover{border-color:var(--meta)}.btn-text:hover{text-decoration:underline;text-underline-offset:3px}.grow-btn:hover .grow-name{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--meta)}}

/* ---------- level marks, BETA ---------- */
.lv2{color:var(--high)}.lv1{color:var(--med)}.lv0{color:var(--low)}
.meter{display:inline-flex;gap:3px;flex:none}
.meter i{display:block;width:18px;height:6px;background:var(--rule-2)}
.meter.lv2 i.on{background:var(--high)}.meter.lv1 i.on{background:var(--med)}.meter.lv0 i.on{background:var(--low)}
.lvw{font-family:var(--sans);font-weight:700}
.lvc{font-family:var(--mono);font-weight:500;font-size:var(--fs-fig-sm);line-height:1.2;letter-spacing:.04em;white-space:nowrap}
.beta{display:inline-block;vertical-align:.2em;margin-left:3px;padding:2px 5px 1px;border:1px solid var(--beta-line);border-radius:var(--r-tag);font-family:var(--sans);font-weight:700;font-size:10px;line-height:1.2;letter-spacing:.1em;color:var(--beta-text);white-space:nowrap}
.rname .beta{margin-left:8px}   /* inline-flex drops the space before the tag, so the margin is the whole gap */
.stale-word{color:var(--meta)}

/* ---------- sky panel (Today hero) ---------- */
.sky{position:relative;overflow:hidden;background-color:var(--bg);background-image:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--bg) 100%);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sky svg.isobars{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.sky-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px;padding-bottom:28px}
.wx{position:relative;margin-inline:calc(-1 * var(--gutter));padding:16px var(--gutter) 0}
.wx>:not(canvas):not(.pause){position:relative;z-index:1}
.wx>.pause{z-index:2}
.day-line{max-width:calc(100% - 88px);font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.3;color:var(--meta)}
.pause{position:absolute;top:9px;right:calc(var(--gutter) - 10px);display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;font-family:var(--sans);font-weight:500;font-size:13px;line-height:1;color:var(--meta)}
.wx-row{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:18px;row-gap:12px;margin-top:13px}
/* High and tonight's low on one baseline (FE1). Inline-blocks sit on their last line (CSS 2.1), so the two caption
   lines over tonight's number ("Tonight" / "around 3 am") use the room beside the big high and add no height. */
.temps{display:block;margin-bottom:-7px;line-height:0}
.temp-hi{display:inline-block;vertical-align:baseline;margin-right:14px;font-family:var(--serif);font-weight:400;font-size:var(--fs-temp-hi);line-height:.8;letter-spacing:-.04em;color:var(--fg);white-space:nowrap}
.tonight{display:inline-block;vertical-align:baseline;margin-top:-6px}   /* the captions use the room the big glyph already takes above its box */
.tn-label,.tn-at{display:block;font-family:var(--sans);font-size:var(--fs-small);line-height:1.2;white-space:nowrap}
.tn-label{font-weight:600;color:var(--dek)}
.tn-at{margin-bottom:4px;font-weight:500;color:var(--meta)}
.temp-lo{display:block;font-family:var(--serif);font-weight:400;font-size:var(--fs-temp-lo);line-height:1;color:var(--meta);white-space:nowrap}
@media (max-width:359px){.temp-hi{margin-right:10px}.temp-lo{font-size:34px}}
.facts{flex:1 1 auto;min-width:0;padding-bottom:0;font-family:var(--mono);font-weight:500;font-size:var(--fs-fig);line-height:1.3;color:var(--dek)}
.facts-now{display:block;margin-bottom:4px;color:var(--body)}
.facts-day{display:flex;flex-direction:column;gap:1px}
.facts.has-now{flex-basis:100%}
.facts.has-now .facts-day{flex-direction:row;flex-wrap:wrap;gap:2px 18px}
.facts-day span{white-space:nowrap}
.loading-line{margin-top:12px;font-size:13px;line-height:1.45;color:var(--dek)}

/* brief (C2) */
.brief-col{display:flex;flex-direction:column;min-width:0}
.brief{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.level-line{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:4px;min-height:20px;font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1.3;color:var(--fg)}
.level-line .meter{margin-right:2px}
.level-line .rname{display:inline-flex;align-items:center}
.wline,.window{font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1.4;color:var(--violet)}
.wline{margin-top:2px}
.why .beta{margin-left:0}   /* the word "beta" inside a sentence: plain spaces on both sides set the gaps */
.headline{margin-top:6px;max-width:22ch;font-family:var(--serif);font-weight:500;font-size:var(--fs-h1);line-height:1.1;letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.why{margin-top:6px;max-width:40ch;font-family:var(--serif);font-weight:400;font-size:var(--fs-lede);line-height:1.45;color:var(--body);text-wrap:pretty}
.why .btn-text{min-height:0;font-size:var(--fs-ui);vertical-align:baseline}
.strain-line,.meta-line{margin-top:6px;max-width:52ch;font-family:var(--sans);font-weight:500;font-size:var(--fs-small);line-height:1.45;color:var(--dek)}
.meta-line{color:var(--meta)}
.actby{margin-top:12px;font-family:var(--sans);font-weight:700;font-size:var(--fs-small);line-height:1.4;color:var(--violet)}
.action{margin-top:2px;max-width:34ch;font-family:var(--serif);font-weight:500;font-size:var(--fs-action);line-height:1.3;color:var(--fg)}
.brief .btn-primary,.brief .done-row{margin-top:12px}
.done-row{display:flex;align-items:center;gap:16px;width:100%}
.done-chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--btn-min);padding:0 18px;border:1px solid var(--rule-2);border-radius:var(--r-pill);font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1;color:var(--fg)}
.done-chip .ico{color:var(--violet)}

/* rows under the brief: rating, pistils, since yesterday, install */
.ruled{border-top:1px solid var(--rule);margin-top:20px;padding-top:14px}
.ruled+.ruled{margin-top:14px}
.ask{font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1.4;color:var(--fg)}
.ask .beta{vertical-align:.15em}
.btn-row{display:flex;gap:8px;margin-top:10px}
.rating .btn-row .btn-outline{flex:1 1 0;min-width:0;padding:0 8px}
.saved{display:flex;align-items:center;gap:16px;font-size:var(--fs-small);color:var(--dek)}
.pistils .btn-row{flex-wrap:wrap;align-items:center}
.since p{font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--dek)}
.since p+p{margin-top:4px}
.install-row p{font-size:var(--fs-ui);color:var(--fg)}

@media (min-width:840px){
  .sky-in{grid-template-columns:5fr 7fr;column-gap:56px;padding-bottom:0}
  .wx{margin-inline:0;padding:52px 0 56px;display:flex;flex-direction:column;justify-content:center}
  .pause{top:42px;right:-10px}
  .brief-col{padding-block:52px 56px;justify-content:center}
  .wx-row{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;row-gap:26px;margin-top:22px}
  .temps{margin-bottom:-12px}
  .facts,.facts.has-now{flex:none;min-width:0;padding-bottom:0}
  .facts-day{flex-direction:row;flex-wrap:wrap;gap:2px 18px}
  .headline{margin-top:10px}
  .why{margin-top:12px}
  .actby{margin-top:20px}
  .brief .btn-primary,.brief .done-row{width:auto;margin-top:18px}
  .rating .btn-row .btn-outline{flex:0 0 auto;padding:0 20px}
}

/* ---------- sections ---------- */
.sec{margin-top:36px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--rule-strong)}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:var(--fs-h2);line-height:1.2;color:var(--fg)}
.sec-head .btn-text{min-height:32px;font-size:13px}
.sec-note{margin-top:12px;font-size:var(--fs-small);line-height:1.45;color:var(--meta)}
.sec-note+.credit{margin-top:2px}
.credit{font-size:var(--fs-small);line-height:1.45;color:var(--meta)}
.credit a{color:var(--violet)}
.credit p+p{margin-top:4px}   /* FE2: CAMS lines under the weather credit */
.risks-sec .credit{margin-top:14px}

/* hourly strip (C3) */
.hours{position:relative;margin-top:12px}
.hours-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.hours-scroll::-webkit-scrollbar{display:none}
.hours-track{position:relative}
.hours-track .snap{position:absolute;top:0;width:1px;height:1px;scroll-snap-align:start}
.hours svg{overflow:visible}
.h-night{fill:#191820}
.h-lab{font-family:var(--mono);font-weight:500;font-size:11px;fill:var(--meta)}
.h-temp{font-family:var(--mono);font-weight:500;font-size:11px;fill:var(--dek)}
.h-line{fill:none;stroke:var(--fg);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.h-wet{fill:var(--water);fill-opacity:.28}
.h-rain{fill:var(--water)}
.h-gust{font-family:var(--mono);font-weight:500;font-size:11px;fill:var(--fg)}
.h-base{stroke:var(--rule-2);stroke-width:1}
.h-bracket{fill:none;stroke-width:1.5}
.h-bracket.lv2{stroke:var(--high)}.h-bracket.lv1{stroke:var(--med)}
.h-brlabel{position:absolute;top:0;display:flex;align-items:center;font-family:var(--sans);font-weight:600;font-size:12px;line-height:1;white-space:nowrap}
.h-brlabel .beta{margin-left:6px;font-size:9px;padding:1px 4px 0}
.h-brwhen{margin-left:6px;font-weight:500;color:var(--dek)}
.h-band{fill-opacity:.1}.h-band.lv2{fill:var(--high)}.h-band.lv1{fill:var(--med)}   /* FE2: every Medium/High hours window */
.h-temp.ext{fill:var(--fg)}   /* the strip's low and high */
.h-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:12px;line-height:1.4;color:var(--meta)}
.h-key{display:inline-flex;align-items:center;gap:6px}
.h-key i{display:inline-block;width:10px;height:10px;background:var(--water)}
.h-key i.wet{background:rgba(106,168,255,.28)}
.h-key i.ln{height:2px;background:var(--fg)}
.data-table{width:100%;margin-top:12px;font-family:var(--mono);font-weight:500;font-size:12px;line-height:1.3;color:var(--dek);font-variant-numeric:tabular-nums}
.data-table th{padding:8px 8px 8px 0;text-align:left;font-family:var(--sans);font-weight:600;font-size:12px;color:var(--meta);border-bottom:1px solid var(--rule-2)}
.data-table td{padding:7px 8px 7px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.data-table td:first-child,.data-table th:first-child{color:var(--fg)}
.table-scroll{overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
/* ≥840 the 48 h fit the column (today.js sizes the hours); the box still clips and scrolls inside the column, so a
   strip never runs past the section rule (round 3 design P1-2) */
@media (min-width:840px){.hours-scroll{overflow-x:auto;overflow-y:hidden;margin-inline:0;padding-inline:0;scroll-padding-inline:0}}

/* week table (C4) */
table.week{width:100%;margin-top:4px;table-layout:fixed}
.week-row{border-bottom:1px solid var(--rule);cursor:pointer}
.week-row td{padding:12px 0;vertical-align:middle}
.week-row .c-day{width:96px;padding-left:10px;border-left:2px solid transparent}
.week-row.sel .c-day{border-left-color:var(--violet)}
.week-row.sel{background:rgba(167,139,250,.06)}
.c-day a{display:block;color:var(--fg)}
.c-day .dn{display:block;font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.25;color:var(--fg);white-space:nowrap}
.c-day .dd{display:block;margin-top:1px;font-family:var(--mono);font-weight:500;font-size:var(--fs-fig-sm);line-height:1.2;color:var(--meta)}
.week-row.sel .c-day .dd{color:var(--violet)}
.c-lo,.c-hi{font-family:var(--mono);font-weight:500;font-size:var(--fs-fig);line-height:1;white-space:nowrap}
.week-row .c-lo{width:50px;padding-right:10px;text-align:right;color:var(--meta)}
.week-row .c-hi{width:50px;padding-left:10px;text-align:left;color:var(--fg)}
.track{position:relative;height:6px;border-radius:var(--r-tag);background:var(--track)}
.range-bar{position:absolute;top:0;height:6px;border-radius:var(--r-tag)}
.today-dot{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--fg);border:2px solid var(--bg)}
/* top risk + its hours (FE1): a column from 600 px (name over hours); under 600 px a second line under the numbers */
.week-row .c-risk{padding-left:20px;font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.3;color:var(--dek)}
.wk-name,.wk-when{display:block}
.wk-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-when{margin-top:1px;font-size:13px;color:var(--meta)}
.c-risk .beta{font-size:9px;padding:1px 4px 0;margin-left:2px}
.week-row .c-lvl{width:46px;text-align:right}
@media (min-width:600px){.week-row .c-risk{width:34%}.week-row .c-day{width:120px}}
@media (max-width:599px){
  /* each row is a grid: day name | low | bar | high | level, then the date with the risk line beside it */
  table.week,table.week>tbody{display:block}
  .week-row{display:grid;grid-template-columns:96px 50px minmax(0,1fr) 50px 46px;grid-template-rows:12px 23px auto 12px;align-items:center}
  .week-row td{display:block;padding:0}
  .week-row .c-day{grid-row:1 / -1;grid-column:1;align-self:stretch;width:auto;padding:12px 0 12px 10px}
  .week-row .c-lo{grid-row:2;grid-column:2;width:auto;padding-right:10px}
  .week-row .c-bar{grid-row:2;grid-column:3}
  .week-row .c-hi{grid-row:2;grid-column:4;width:auto;padding-left:10px}
  .week-row .c-lvl{grid-row:2;grid-column:5;width:auto}
  .week-row .c-risk{grid-row:3;grid-column:2 / -1;align-self:start;padding:0;font-size:13px;line-height:1.3}
  .week-row .c-risk:empty{display:none}
  .wk-name,.wk-when{display:inline-block;max-width:100%;margin-top:0;vertical-align:baseline}
  .wk-name{margin-right:12px;overflow:visible;font-weight:600}
  .wk-when{white-space:normal}
}
@media (max-width:359px){.week-row{grid-template-columns:86px 42px minmax(0,1fr) 42px 40px}.week-row .c-day{padding-left:8px}.week-row .c-lo{padding-right:8px}.week-row .c-hi{padding-left:8px}}

/* every risk (C5) */
.risks{display:grid;grid-template-columns:minmax(0,1fr);column-gap:36px;margin-top:4px}
.risk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:3px;align-items:baseline;padding-block:13px 14px;border-top:1px solid var(--rule)}
.risk-row .rname{font-family:var(--serif);font-weight:500;font-size:var(--fs-title);line-height:1.3;color:var(--fg)}
.risk-row .rwhy{grid-column:1;font-size:13.5px;line-height:1.45;color:var(--meta)}
.risk-row .lvc{grid-row:1;grid-column:2;align-self:center}
a.risk-row{color:inherit}
@media (hover:hover){a.risk-row:hover .rname{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
@media (min-width:760px){.risks.two{grid-template-columns:1fr 1fr}}

/* week + every risk at ≥840: 7fr / 5fr */
.lower{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:840px){
  .lower{grid-template-columns:7fr 5fr;column-gap:56px;align-items:start}
  .lower .risks.two{grid-template-columns:minmax(0,1fr)}
}

/* ---------- day sheet / pane (T2) ---------- */
.day-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.day-title h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;color:var(--fg)}
.day-title .dd{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--meta)}
.day-lead{margin-top:10px}
.day-lead .level-line{margin-bottom:4px}
.day-lead p{font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--body)}
.day-lead .wline{margin:0 0 2px;font-family:var(--sans);font-size:var(--fs-ui);line-height:1.4;color:var(--violet)}   /* window line violet, as on Today and Alert detail (§4.1) */
.day-strip{margin-top:16px}
.numbers{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.numbers li{font-family:var(--mono);font-weight:500;font-size:var(--fs-fig);line-height:1.35;color:var(--dek)}
.day-pane{padding-top:10px;border-top:1px solid var(--rule-strong)}
.day-pane .risks{margin-top:12px}
.day-pane .credit,.sheet-day .credit{margin-top:14px}
.open-alert{margin-top:6px}

/* ---------- alert detail (T3/T4) ---------- */
.adetail{padding-top:20px}
.alevel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.alevel .rname{display:inline-flex;align-items:center;font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.15;color:var(--fg)}
.alevel .rname .beta{margin-left:10px}
.adetail .wline{margin-top:8px}
.ahead{margin-top:6px;font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--fg);text-wrap:balance}
.driver{margin-top:24px}
.driver h2,.why-sec h2{font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1.4;color:var(--fg)}
.driver .chart{width:100%;max-width:100%;height:auto;margin-top:12px;overflow:visible}
.driver-note{margin-top:8px;font-size:var(--fs-small);line-height:1.45;color:var(--meta)}
.driver-peak{margin-top:4px;font-family:var(--mono);font-weight:500;font-size:var(--fs-fig);color:var(--dek)}
.chart .c-bar{fill:#8a8a8a}
.chart.lv2 .c-over{fill:var(--high)}.chart.lv1 .c-over{fill:var(--med)}
.chart .c-line{fill:none;stroke:var(--fg);stroke-width:1.5;stroke-linejoin:round}
.chart .c-thr{stroke:var(--meta);stroke-width:1;stroke-dasharray:4 4}
.chart .c-thr-t{font-family:var(--mono);font-weight:500;font-size:11px;fill:var(--dek)}
.chart .c-base{stroke:var(--rule-2);stroke-width:1}
.chart .c-lab{font-family:var(--mono);font-weight:500;font-size:11px;fill:var(--meta)}
.chart .c-sub{font-family:var(--mono);font-weight:500;font-size:11px;fill:var(--dek)}
.chart .c-val{font-family:var(--mono);font-weight:500;font-size:11px;fill:var(--fg)}
.chart .c-tick{stroke:var(--fg);stroke-width:1.5}
.chart .c-night{fill:#1a1922}
.chart .c-bracket{fill:none;stroke:var(--high);stroke-width:1.5}
.chart .c-wet{fill:var(--water)}
.chart .c-dry{fill:var(--track)}
.chart .c-use{fill:var(--dek)}
.chart .c-rain{fill:var(--water)}
.why-sec{margin-top:28px;padding-top:12px;border-top:1px solid var(--rule)}
.why-lines{margin-top:8px}
.why-lines li{font-family:var(--serif);font-weight:400;font-size:var(--fs-lede);line-height:1.5;color:var(--body)}
.why-lines li+li{margin-top:6px}
.dothis{margin-top:24px;padding-block:14px 18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dothis .actby{margin-top:0}
.dothis .btn-primary,.dothis .done-row{margin-top:14px}
.copy-row{margin-top:8px}
.adetail .rating{margin-top:20px}
.data-line{margin-top:20px}
.data-line p{font-size:var(--fs-small);line-height:1.45;color:var(--meta)}
.data-line p+p{margin-top:4px}
.adetail-grid{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:36px}
@media (min-width:840px){
  .adetail{padding-top:36px}
  .adetail-grid{grid-template-columns:7fr 5fr;column-gap:56px;align-items:start}
  .adetail-side{position:sticky;top:24px}
  .dothis{margin-top:0}
  .dothis .btn-primary,.dothis .done-row{width:auto}
}

/* ---------- journal (J1) ---------- */
.jcol{max-width:calc(760px + 2 * var(--gutter))}
.jgrow{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:0;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--dek)}
.jgrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jgrow .ico{color:var(--meta)}
.jbar-title{display:flex;align-items:center;gap:12px;min-width:0}
.prompt{margin-top:16px;padding-block:14px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.prompt .btn-row{flex-wrap:wrap}
.outcome{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:12px}
.outcome-row p{font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);color:var(--fg)}
.composer{margin-top:16px}
.composer label{display:block;font-family:var(--sans);font-weight:600;font-size:var(--fs-small);color:var(--dek)}
.composer textarea{display:block;width:100%;min-height:112px;margin-top:6px;padding:12px 14px;border:1px solid var(--input-line);border-radius:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:500;font-size:var(--fs-input);line-height:1.45;resize:vertical}
.composer textarea::placeholder{color:var(--meta)}
.sheet .composer{margin-top:4px}
.sheet .composer textarea{background:var(--surface)}
.composer .btn-primary{margin-top:12px}
.jday{margin-top:28px}
.jday h2{padding-bottom:6px;border-bottom:1px solid var(--rule-strong);font-family:var(--serif);font-weight:500;font-size:var(--fs-title);line-height:1.3;color:var(--fg)}
.jentry{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding-block:12px;border-bottom:1px solid var(--rule)}
.jentry time{font-family:var(--mono);font-weight:500;font-size:12px;line-height:1.5;color:var(--meta);white-space:nowrap}
.jentry .jtext{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.45;color:var(--body)}
.jentry .jtag{font-family:var(--sans);font-weight:600;font-size:12px;line-height:1.5;color:var(--meta)}
.jentry .jdel{grid-column:2;justify-self:start;min-height:32px;font-size:13px}
.jempty{margin-top:28px;font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--dek)}
@media (min-width:840px){.jentry{grid-template-columns:72px minmax(0,1fr) auto}}

/* ---------- empty Today (T0) ---------- */
.first{padding-block:40px 56px;text-align:center}
.first h1{font-family:var(--serif);font-weight:500;font-size:var(--fs-h1);line-height:1.1;color:var(--fg)}
.first p{max-width:34ch;margin:12px auto 0;font-family:var(--serif);font-size:var(--fs-lede);line-height:1.5;color:var(--body)}
.first .btn-primary{max-width:320px;margin:24px auto 0}
.first .btn-text{margin-top:8px}

/* ---------- footer (F1) ---------- */
.footer{margin-top:56px;border-top:1px solid var(--rule)}
.footer-in{display:flex;flex-direction:column;align-items:center;padding-block:28px 40px;text-align:center}
.footer .np{margin-bottom:16px}
.footer p{max-width:62ch;font-family:var(--sans);font-weight:500;font-size:12.5px;line-height:1.6;color:var(--meta)}
.footer p+p,.footer .credit+p{margin-top:6px}
.footer .credit{font-size:12.5px}
.footer a{color:var(--dek);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--rule-2)}
.foot-links{display:flex;justify-content:center;gap:20px;margin-top:10px}
.footer .foot-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:13px;text-decoration:none;color:var(--dek)}

/* ---------- sheet (C7) ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim)}
.scrim-pop{background:transparent}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:calc(100% - 40px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain;padding:0 max(var(--gutter),env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));background:var(--surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0;transform:translateY(0);transition:transform 240ms cubic-bezier(.2,.8,.25,1)}
.sheet.sheet-in{transform:translateY(100%);transition:none}
.sheet.sheet-out{transform:translateY(100%);transition:transform 200ms cubic-bezier(.4,0,1,1)}
.sheet:focus,.sheet:focus-visible{outline:none}   /* the dialog box takes focus on open; its controls keep the lime ring */
.grabber{display:block;width:36px;height:4px;margin:8px auto 0;border-radius:var(--r-pill);background:var(--rule-2)}
.sheet-head{display:flex;align-items:center;gap:12px;min-height:48px}
.sheet-close{margin-left:-2px}
.sheet-title{flex:1;min-width:0;padding-right:56px;text-align:center;font-family:var(--sans);font-weight:600;font-size:var(--fs-ui);line-height:1.3;color:var(--fg)}
.sheet-body{padding-top:4px}
.sheet.sheet-pop{position:absolute;left:auto;right:auto;bottom:auto;width:360px;max-height:none;padding:0 16px 12px;border:1px solid var(--rule-2);border-radius:0;transform:none;transition:none}
.sheet-pop .sheet-title{padding-right:0;text-align:left}
@media (min-width:840px){
  .sheet:not(.sheet-pop){left:50%;right:auto;width:min(560px,100%);transform:translate(-50%,0);padding-inline:28px}
  .sheet.sheet-in:not(.sheet-pop),.sheet.sheet-out:not(.sheet-pop){transform:translate(-50%,100%)}
}
@media (prefers-reduced-motion:reduce){.sheet,.sheet.sheet-out{transition:none}}
html.has-sheet{overflow:hidden}

/* grow switcher (T5) */
.sw-list{border-top:1px solid var(--rule)}
.sw-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;min-height:64px;padding-block:10px;border-bottom:1px solid var(--rule);text-align:left}
.sw-check{color:var(--violet)}
.sw-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.sw-name{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-weight:500;font-size:var(--fs-title);line-height:1.3;color:var(--fg)}
.sw-ex{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--meta)}
.sw-sub{font-size:var(--fs-small);line-height:1.4;color:var(--meta)}
.sw-row .lvw{font-size:13px}
.sw-add{margin-top:8px}

/* ---------- QC only: hide text and borders so glass pixels can be compared (P1-4) ---------- */
body.qc-notext *{color:transparent!important;border-color:transparent!important;text-decoration-color:transparent!important;outline-color:transparent!important;caret-color:transparent!important}
body.qc-notext svg text{fill:transparent!important}