/* World: an evening air bulletin. Fog-pale ground, pine ink, sulfur for risk. One column, phone first. */
:root{
  --bg:#e9eeea; --panel:#f6f8f6; --ink:#14201c; --soft:#44554f; --line:#c9d3cd;
  --clear:#2c6e6b; --clear-bg:#d3e3df; --poss:#8a6a00; --poss-bg:#efe2a8; --likely:#8f3b0a; --likely-bg:#f0c9a6;
  --sulfur:#d4ae12; --lid:#3d4fa8; --focus:#1d4ed8;
  --display:"Bricolage Grotesque","Schibsted Grotesk",system-ui,sans-serif; --body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1613; --panel:#161f1b; --ink:#e8eeea; --soft:#a3b3ac; --line:#2b3a34;
  --clear:#7cc5bd; --clear-bg:#1c3532; --poss:#e3c02a; --poss-bg:#3a3210; --likely:#f0975a; --likely-bg:#44230f;
  --sulfur:#e3c02a; --lid:#93a2f2; --focus:#9db7ff; color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--body);caret-color:var(--likely);
  padding:env(safe-area-inset-top,0) max(18px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
::selection{background:var(--sulfur);color:#14201c}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:4px}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
p{margin:0}
main,.top{max-width:560px;margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:18px;top:12px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:5}

.top{display:flex;justify-content:space-between;align-items:center;padding-block:16px 6px}
.mark{display:flex;align-items:center;gap:8px;font:700 17px var(--display);letter-spacing:-.01em}
.mark svg{width:24px;height:24px;color:var(--poss)}
.toplink{font-weight:600;font-size:15px;padding:8px 2px}

/* tonight */
.tonight{padding-block:26px 8px}
.when{color:var(--soft);font-size:15.5px;margin-top:10px}
#answer{display:block}
#verdict{color:var(--ink);font-size:clamp(2.5rem,12.5vw,4rem);line-height:.98;font-weight:800;letter-spacing:-.035em;margin-block:0 14px}
.tonight[data-level="likely"] #answer{color:var(--likely)}
.tonight[data-level="possible"] #answer{color:var(--poss)}
.tonight[data-level="unlikely"] #answer{color:var(--clear)}
.why{font-size:19px;line-height:1.4;max-width:30ch}
.strip{margin:26px 0 0}
.scroller{overflow-x:auto;overflow-y:hidden;margin-inline:calc(-1*max(18px,env(safe-area-inset-left,0px)));padding-inline:max(18px,env(safe-area-inset-left,0px));scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.scroller::-webkit-scrollbar{height:6px}.scroller::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.strip svg{display:block;max-width:none;touch-action:pan-x pan-y}
.capline{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-top:10px}
.capline figcaption{margin-top:0;flex:1}
button.ghost.small{width:auto;min-height:40px;margin-top:0;padding:0 14px;font-size:14.5px;white-space:nowrap;flex:none}
.s-day{font:600 12.5px var(--body);fill:var(--soft)}
.s-selg{pointer-events:none}.s-sel{stroke:var(--soft);stroke-width:2}.s-seltag{fill:var(--soft)}.s-seltxt{font:600 11.5px var(--body);fill:var(--bg)}
.s-col[aria-pressed="true"] .hit{fill:var(--ink);fill-opacity:.1}
.capline{flex-wrap:wrap}
.strip figcaption.readout.on{flex:1 1 100%;min-height:0;color:var(--ink);border-radius:12px;padding:12px 14px 13px;background:var(--clear-bg)}
.strip figcaption.readout.on.possible{background:var(--poss-bg)}.strip figcaption.readout.on.likely{background:var(--likely-bg)}
.readout .r-time{display:block;font:700 16.5px var(--display);margin-bottom:8px}
.readout dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0;font-size:15px}
.readout dt{color:var(--soft)}.readout dd{margin:0;font-weight:600}
.capline:has(.readout.on) #tonow{margin-left:auto}
.s-col.past{opacity:.5}
.s-now{stroke:var(--ink);stroke-width:2}
.s-nowtag{fill:var(--ink)}.s-nowtxt{font:600 11.5px var(--body);fill:var(--bg)}
.s-rep{fill:var(--ink)}.s-repn{font:700 10px var(--body);fill:var(--bg)}
.k-rep{width:11px;height:11px;border-radius:50%;background:var(--ink)}
.strip figcaption{min-height:3em;margin-top:10px;font-size:15.5px;color:var(--soft)}
.strip figcaption b{color:var(--ink);font-weight:600}
.key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;padding:0;font-size:13.5px;color:var(--soft)}
.key li{display:flex;align-items:center;gap:6px}
.key i{display:inline-block}.k-risk{width:10px;height:14px;border-radius:2px;background:var(--poss)}.k-lid{width:16px;height:0;border-top:2.5px solid var(--lid)}
.key svg{width:14px;height:14px}
.s-hour{font:500 12.5px var(--body);fill:var(--soft);font-variant-numeric:tabular-nums}
.s-mph{font:600 12px var(--body);fill:var(--ink);font-variant-numeric:tabular-nums}
.s-lidlab{font:600 12px var(--body);fill:var(--lid)}
.s-col{cursor:pointer}.s-col .hit{fill:transparent}.s-col[aria-pressed="true"] .hit{fill:var(--ink);fill-opacity:.07}
.s-lid{fill:none;stroke:var(--lid);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.s-lidfill{fill:var(--lid);fill-opacity:.09}
@media (prefers-reduced-motion:no-preference){
  .s-lid.draw{animation:draw 1.4s cubic-bezier(.16,1,.3,1) both}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  .s-bar{transform-box:fill-box;transform-origin:bottom;animation:rise .9s cubic-bezier(.16,1,.3,1) both}
  @keyframes rise{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
}
.live{margin-top:14px;font-weight:600;padding:10px 14px;border-radius:10px;background:var(--likely-bg);color:var(--likely)}

section{padding-block:34px 0}
h2{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:12px}
h3{font-size:1.1rem;font-weight:700;margin:22px 0 8px}
.lead{color:var(--soft);max-width:38ch}

/* next nights and past nights share one row grammar */
.days,.pastlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.days li,.pastlist li{display:grid;grid-template-columns:5.2em 1fr;gap:2px 14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.d-date{font-weight:600;font-variant-numeric:tabular-nums}.d-date small{display:block;font-weight:400;color:var(--soft);font-size:14px}
.d-main{min-width:0}
.pill{display:inline-block;font:600 14px var(--body);padding:3px 10px;border-radius:99px;white-space:nowrap}
.pill.likely{background:var(--likely-bg);color:var(--likely)}.pill.possible{background:var(--poss-bg);color:var(--poss)}.pill.unlikely{background:var(--clear-bg);color:var(--clear)}
.d-text{display:block;margin-top:5px;font-size:15.5px;color:var(--soft)}
.mini{display:flex;gap:2px;margin-top:9px;height:8px}.mini i{flex:1;border-radius:2px;background:var(--line)}
.rep{display:block;margin-top:6px;font-size:15px;font-weight:600}
.rep.none{font-weight:400;color:var(--soft)}
.rep svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}

/* report */
.report{scroll-margin-top:10px}
form{margin-top:18px;display:grid;gap:20px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend,.field label{font-weight:600;padding:0;margin-bottom:8px;display:block}
.field label small{font-weight:400;color:var(--soft);font-size:14px;margin-left:4px}
.seg{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.seg input,.chips input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 2px 9px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel);font-size:12.5px;color:var(--soft);cursor:pointer;min-height:58px;justify-content:center}
.seg b{font:700 20px var(--display);color:var(--ink);line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{display:inline-block;padding:10px 15px;border:1.5px solid var(--line);border-radius:99px;background:var(--panel);font-size:15.5px;cursor:pointer;min-height:44px}
.seg input:checked+span,.chips input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.seg input:checked+span b{color:var(--bg)}
.seg input:focus-visible+span,.chips input:focus-visible+span{outline:2.5px solid var(--focus);outline-offset:3px}
@media (hover:hover){.seg span:hover,.chips span:hover{border-color:var(--soft)}}
input[type=text],textarea{width:100%;font:inherit;color:inherit;background:var(--panel);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;min-height:48px;resize:vertical}
input[type=text]::placeholder,textarea::placeholder{color:var(--soft);opacity:.85}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
button{font:600 17px var(--body);cursor:pointer;border-radius:12px;min-height:54px;padding:0 22px;border:0;background:var(--ink);color:var(--bg);transition:transform .15s cubic-bezier(.16,1,.3,1)}
button:active{transform:scale(.98)}
button[disabled]{opacity:.55;cursor:progress}
button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);min-height:48px;margin-top:16px;width:100%}
.err{color:var(--likely);font-weight:600}
.done{margin-top:18px}
.done p{margin-top:8px;color:var(--soft)}
.call{display:flex;flex-direction:column;gap:2px;margin:16px 0 4px;padding:16px 18px;border-radius:14px;background:var(--ink);color:var(--bg);text-decoration:none}
.call span{font-size:14.5px;opacity:.8}.call b{font:800 30px var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.say q{color:var(--ink);font-style:italic}

.about p{max-width:60ch;margin-top:10px}
.about ul{padding-left:20px;margin:0;max-width:60ch;display:grid;gap:8px}
.fine{font-size:14px;color:var(--soft);margin-top:22px!important}

@media (min-width:700px){
  body{font-size:18px}
  main,.top{max-width:620px}
  .tonight{padding-top:44px}
}

.s-col:focus,.s-col:focus-visible{outline:none}