/* Market Weather: bright forecast-chart styling. Radar ramp, NDFD-style map, NWS hazard colours, SPC risk scale. */
:root {
  --bg: #F6F8FA;
  --grid: rgba(20, 60, 100, .055);
  --crawl: #FFE14D;
  --crawl-ink: #121212;
  --chip: #FFD400;
  --panel: #FFFFFF;
  --ink: #111418;
  --ink-2: #3B4C63;
  --ink-3: #56657A;
  --rule: #D5DDE7;
  --radar: linear-gradient(90deg, #04E9E7, #019FF4, #0300F4, #02FD02, #01C501, #008E00, #FDF802, #E5BC00, #FD9500, #FD0000, #D40000, #BC0000, #F800FD, #9854C6);
  --accent: #0A64D8;
  --hi: #0A3FD6;
  --lo: #D6161B;
  --good: #1E7F4F;
  --bad: #C43B2E;
  --stale-bg: #FFF4D6;
  --stale-ink: #6B4700;
  /* meteogram traces */
  --mg-temp: #D7301F;
  --mg-dew: #1A9850;
  --mg-wind: #6A51A3;
  --mg-pres: #1B2A41;
  --shadow: 3px 3px 0 rgba(17, 20, 24, .9);
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Public Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417; --panel: #1B1E23; --ink: #F1F2F4; --ink-2: #BFC4CC; --ink-3: #8C939E; --rule: #2C3138; --grid: rgba(255,255,255,.035);
    --accent: #5EA0FF; --good: #4FC486; --bad: #FF7A6B; --stale-bg: #3A2C0E; --stale-ink: #F7D79B;
    --mg-temp: #FF6B57; --mg-dew: #46C07B; --mg-wind: #A08BE6; --mg-pres: #C9D6E8;
    --shadow: 3px 3px 0 rgba(241, 242, 244, .55); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121417; --panel: #1B1E23; --ink: #F1F2F4; --ink-2: #BFC4CC; --ink-3: #8C939E; --rule: #2C3138; --grid: rgba(255,255,255,.035);
  --accent: #5EA0FF; --good: #4FC486; --bad: #FF7A6B; --stale-bg: #3A2C0E; --stale-ink: #F7D79B;
  --mg-temp: #FF6B57; --mg-dew: #46C07B; --mg-wind: #A08BE6; --mg-pres: #C9D6E8;
  --shadow: 3px 3px 0 rgba(241, 242, 244, .55); color-scheme: dark;
}

* { box-sizing: border-box; }
/* "hidden" always wins. Without this, a component that sets its own display (the drill-down panel's
   flex) stays on screen invisibly and blocks every click underneath it. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg) repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 28px); background-color: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.fine { color: var(--ink-3); font-size: 14px; margin: 12px 0 0; }
.hi { color: var(--hi); } .lo { color: var(--lo); }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: var(--panel); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.top::before { content: ""; display: block; height: 6px; background: var(--radar); }
.top-in { display: flex; align-items: center; gap: 28px; height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.mark { width: 36px; height: 36px; border-radius: 50%; background: var(--chip); color: #111; display: grid; place-items: center; font: 700 24px/1 var(--cond);
  box-shadow: inset 0 0 0 2.5px #111; }
.word { font: 700 24px/1 var(--cond); letter-spacing: .02em; text-transform: uppercase; }
.word small { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; color: var(--ink-3); }
.top nav { display: flex; gap: 22px; margin-left: auto; }
.top nav a { color: var(--ink-2); text-decoration: none; font: 600 16px var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.top nav a:hover { color: var(--ink); box-shadow: 0 3px 0 var(--chip); }
.btn { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; background: var(--chip); color: #111;
  font: 700 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; padding: 10px 18px; border-radius: 3px; text-decoration: none; box-shadow: inset 0 0 0 2px #111; }
.btn:hover { background: #111; color: var(--chip); }
.bulletin { background: var(--crawl); color: var(--crawl-ink); font: 600 12.5px/1 var(--mono); letter-spacing: .06em; padding: 9px 0; overflow: hidden; white-space: nowrap;
  border-block: 1.5px solid #111; }
.bulletin .run { display: inline-block; padding-left: 100%; animation: crawl 48s linear infinite; }
.bulletin .warn { background: #D40000; color: #fff; padding: 2px 6px; border-radius: 3px; }
@keyframes crawl { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .bulletin .run { padding-left: 16px; } }

/* now */
.now { padding-top: 36px; }
#headline { font: 700 clamp(34px, 5vw, 58px)/1.02 var(--cond); letter-spacing: -.005em; max-width: 980px; text-wrap: balance; }
.now-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; margin-top: 26px; }
.panel { background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); padding: 22px; min-width: 0; margin: 0; }
.kicker { font: 600 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.cond-main { display: flex; align-items: center; gap: 22px; }
.cond-icon { width: 128px; height: 108px; flex: none; }
.cond-icon svg { width: 100%; height: 100%; }
.temp { font: 700 104px/.85 var(--cond); letter-spacing: -.03em; }
.temp sup { font-size: .45em; vertical-align: top; position: relative; top: .1em; }
.cond-word { font: 600 26px/1.1 var(--cond); margin-top: 6px; }
.cond-cap { color: var(--ink-3); font-size: 14px; margin: 14px 0 16px; }
.obs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.obs div { padding: 12px 12px 0 0; }
.obs div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.obs dt { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.obs dd { margin: 2px 0 0; font: 700 24px/1.1 var(--cond); }
.obs dd small { display: block; font: 400 13px/1.35 var(--sans); color: var(--ink-2); margin-top: 3px; }

/* SPC risk scale */
.spc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; align-items: end; }
.spc .lvl { border-radius: 4px; height: 38px; display: grid; place-items: center; color: #16202E; font: 700 14px var(--cond); letter-spacing: .06em;
  border: 1.5px solid rgba(0,0,0,.18); opacity: .55; }
.spc .lvl.on { height: 64px; opacity: 1; border: 2.5px solid #16202E; box-shadow: 0 4px 12px rgba(0,0,0,.18); font-size: 17px; }
.spc .lvl small { display: block; font: 600 11px var(--mono); text-align: center; }
.risk-name { font: 700 30px/1.1 var(--cond); margin: 16px 0 2px; text-transform: uppercase; letter-spacing: .02em; }
.risk-mean { margin: 0 0 12px; color: var(--ink-2); }
.factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14.5px; }
.factors li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: baseline; color: var(--ink-3); }
.factors li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-3); transform: translateY(1px); }
.factors li.on { color: var(--ink); font-weight: 500; }
.factors li.on::before { background: #E6C27F; border-color: #8A5A00; }

/* key messages */
.keys { list-style: none; counter-reset: k; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.keys li { counter-increment: k; background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); padding: 18px 20px 18px 66px; position: relative; }
.keys li::before { content: counter(k); position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--chip); color: #111; box-shadow: inset 0 0 0 2px #111; display: grid; place-items: center; font: 700 20px var(--cond); }
.keys b { display: block; font: 700 22px/1.15 var(--cond); margin-bottom: 4px; }
.keys span { color: var(--ink-2); font-size: 15.5px; }

/* sections */
main > section { margin-top: 56px; }
main > section.now { margin-top: 0; }
.sec-head { max-width: 780px; margin-bottom: 18px; }
.sec-head h2 { font: 700 38px/1.05 var(--cond); }
.sec-head p { color: var(--ink-2); margin: 8px 0 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.two.wide-left { grid-template-columns: 1.35fr 1fr; }

/* alerts */
.alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.alert { background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); display: grid; grid-template-columns: 8px 1fr; overflow: hidden; }
.alert .bar { background: var(--hz); }
.alert .body { padding: 14px 16px; }
.alert .tag { display: inline-block; font: 700 14px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px;
  background: var(--hz); color: var(--hz-ink, #111); }
.alert .area { font: 700 21px/1.15 var(--cond); margin: 8px 0 4px; }
.alert p { margin: 0; font-size: 15.5px; }
.alert .det { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.alert .rule { font: 400 12px/1.4 var(--mono); color: var(--ink-3); margin-top: 10px; }

/* surface analysis */
.sfc { margin: 0; background: #fff; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow); color: #111; border: 1.5px solid #111; }
.sfc-bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font: 500 12px var(--mono); letter-spacing: .08em; background: #fff; border-bottom: 1.5px solid #111; }
.sfc-key { color: #555; }
.sfc-stage { position: relative; width: 100%; }
.sfc-stage canvas, .sfc-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sfc-stage svg { overflow: visible; }
.isobar { fill: none; stroke: rgba(10,10,10,.72); stroke-width: 1.2; }
.isolabel { font: 600 10.5px var(--mono); fill: #111; }
.isobg { fill: #fff; opacity: .9; }
.pc { font: 700 48px/1 var(--cond); paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.pcv { font: 700 12px var(--mono); fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.stn { cursor: pointer; }
.stn:hover { fill: var(--chip); }
.stnl { font: 700 13px var(--sans); fill: #111; paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 4px; pointer-events: none; }
.axhint { font: 600 11px var(--mono); fill: #111; letter-spacing: .06em; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 3px; }
.sfc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 14px; font-size: 13px; background: #fff; border-top: 1.5px solid #111; }
.sfc-legend .ramp { display: block; width: 180px; height: 10px; border-radius: 2px;
  background: linear-gradient(90deg, #7B2C9E, #3350D8, #1DA6E8, #2FBF71, #B8DC3C, #F6E24A, #F6A623, #E8412E, #A5121C); }
.sfc-legend .ends { display: flex; justify-content: space-between; font: 500 10.5px var(--mono); color: #555; margin-top: 3px; }
.sfc-legend .sym { display: inline-flex; align-items: center; gap: 6px; }
.sfc-legend .sym b { font: 700 20px/1 var(--cond); }
.toggle input { accent-color: #111; }
.toggle { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* meteogram */
.mg { padding: 14px 18px 8px; }
.mg svg { display: block; width: 100%; height: auto; overflow: visible; }
.mg .ptitle { font: 700 15px var(--cond); letter-spacing: .04em; text-transform: uppercase; fill: var(--ink); }
.mg .psub { font: 400 12px var(--sans); fill: var(--ink-3); }
.mg .plast { font: 700 16px var(--cond); }
.axis text { font: 500 11px var(--mono); fill: var(--ink-3); }
.axis path, .axis line { stroke: var(--rule); }
.grid line { stroke: var(--rule); }
.gapzone { fill: var(--ink-3); opacity: .08; }
.gaplbl { font: 500 11px var(--mono); fill: var(--ink-3); }

/* 10-day */
.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.day { border-radius: 3px; padding: 10px 8px; text-align: center; background: color-mix(in srgb, var(--bg) 60%, var(--panel)); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.day .dn { font: 700 16px/1 var(--cond); text-transform: uppercase; letter-spacing: .06em; }
.day .dd { font: 500 11px var(--mono); color: var(--ink-3); }
.day svg { width: 46px; height: 40px; }
.day .ev { font-size: 12.5px; line-height: 1.25; color: var(--ink-2); min-height: 2.5em; }
.day.w3 { background: color-mix(in srgb, #DB7093 16%, var(--panel)); }
.day.w3 .ev { color: var(--ink); font-weight: 600; }
.day.wkend { opacity: .55; }

/* sectors */
#sectors svg { display: block; width: 100%; height: auto; }
.slbl { font: 500 13px var(--sans); fill: var(--ink-2); }
.sval { font: 600 12px var(--mono); fill: var(--ink); }

/* marine */
.zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zone { background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.zone .zh { display: flex; justify-content: space-between; align-items: baseline; font: 600 12px var(--mono); letter-spacing: .1em; color: var(--ink-3); }
.zone .px { font: 700 32px/1 var(--cond); }
.zone .chg { font: 600 14px var(--sans); }
.up { color: var(--good); } .down { color: var(--bad); }
.zone .sea { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-block: 1px solid var(--rule); margin: 4px 0; }
.zone .sea svg { width: 58px; height: 26px; flex: none; }
.zone .sea b { display: block; font: 700 19px/1.1 var(--cond); }
.zone .sea small { color: var(--ink-3); font-size: 13px; }
.zone dl { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 0; font-size: 13px; }
.zone dt { color: var(--ink-3); } .zone dd { margin: 0; font-weight: 600; text-align: right; }
.spark svg { display: block; width: 100%; height: auto; }

/* discussion */
.afd section { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
.afd section:first-child { border-top: 0; padding-top: 0; }
.afd h3 { font: 600 13px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.afd h3::before { content: "."; }
.afd ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.afd li { max-width: 62ch; }
.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 11px 0; border-top: 1px solid var(--rule); }
.log li:first-child { border-top: 0; padding-top: 0; }
.log a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.35; }
.log a:hover { color: var(--accent); text-decoration: underline; }
.log .src { display: block; font: 400 12px var(--mono); color: var(--ink-3); margin-top: 3px; }

/* verification */
.verstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.vs .k { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.vs .v { font: 700 40px/1.05 var(--cond); }
.vs .d { font-size: 13px; color: var(--ink-2); }
#calls svg { display: block; width: 100%; height: auto; }
.vernote { margin: 12px 0 0; padding: 12px 14px; background: var(--stale-bg); color: var(--stale-ink); border-radius: 3px; font-size: 15px; }

/* subscribe */
.sub { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.sub h2 { font: 700 38px/1.05 var(--cond); }
.sub > div > p { color: var(--ink-2); }
form { display: grid; gap: 16px; margin-top: 20px; max-width: 460px; }
.seg { display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--rule); border-radius: 2px; padding: 3px; width: max-content; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 7px 20px; border-radius: 2px; cursor: pointer; font: 700 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.seg input:checked + span { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }
.field label, .cadence legend { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.field input { width: 100%; font: 16px var(--sans); padding: 11px 13px; border-radius: 3px; border: 1.5px solid var(--rule); background: var(--panel); color: var(--ink); }
.field input:focus { outline: none; border-color: var(--accent); }
.cadence { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cadence input { accent-color: var(--accent); }
form .btn { justify-self: start; }
.formmsg { margin: 0; font-size: 15px; min-height: 1.4em; }
.formmsg.ok { color: var(--good); } .formmsg.err { color: var(--bad); }
.phone { background: var(--panel); border: 8px solid #111; border-radius: 26px; padding: 14px; box-shadow: var(--shadow); }
.phone-top { display: flex; justify-content: space-between; font: 600 13px var(--sans); padding: 0 4px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.phone-top span + span { color: var(--ink-3); font-weight: 400; }
.phone pre { margin: 0; white-space: pre-wrap; font: 13.5px/1.5 var(--mono); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-radius: 4px 14px 14px 14px; padding: 14px; }

.foot { margin-top: 64px; padding: 26px 0 48px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; }
.foot p { max-width: 780px; }
.tip { position: fixed; z-index: 40; pointer-events: none; background: #111; color: #F5F5F5; padding: 10px 12px; border-radius: 3px;
  font-size: 13px; line-height: 1.45; max-width: 280px; box-shadow: 0 6px 20px rgba(0,0,0,.25); border-top: 4px solid var(--chip); }
.tip b { font: 700 16px var(--cond); letter-spacing: .02em; }
.tip .m { font-family: var(--mono); font-size: 12px; color: var(--chip); }

@media (max-width: 980px) {
  .now-grid, .two, .two.wide-left, .sub { grid-template-columns: 1fr; }
  .keys { grid-template-columns: 1fr; }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .temp { font-size: 84px; }
  .cond-icon { width: 96px; height: 82px; }
  .obs { grid-template-columns: 1fr; }
  .obs div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .obs div { padding-bottom: 10px; }
  .spc .lvl { font-size: 11px; } .spc .lvl.on { font-size: 13px; }
  .zones, .verstats { grid-template-columns: 1fr 1fr; }
  .zones { grid-template-columns: 1fr; }
  .afd section { grid-template-columns: 1fr; gap: 4px; }
  .alerts { grid-template-columns: 1fr; }
  .word small { display: none; }
  .bulletin { font-size: 11px; text-align: left; }
  .toggle { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* colour carried through the page */
.sec-head h2::after { content: ""; display: block; width: 96px; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--radar); }
.alert { grid-template-columns: 1fr; }
.alert .bar { display: none; }
.alert .body { padding: 0 0 14px; }
.alert .tag { display: block; border-radius: 0; padding: 9px 16px; font-size: 15px; }
.alert .area, .alert p, .alert .rule { padding-inline: 16px; }
.zone { border-top: 6px solid var(--sea, #1DA6E8); }
.keys li { border-top: 4px solid var(--chip); }

/* loop controls */
.sfc-loop { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #FFFBE6; border-bottom: 1.5px solid #111; flex-wrap: wrap; }
.loopbtn { font: 700 14px var(--cond); letter-spacing: .06em; text-transform: uppercase; background: #111; color: #FFD400; border: 0; border-radius: 3px; padding: 7px 14px; cursor: pointer; min-width: 116px; }
.loopbtn[aria-pressed="true"] { background: #FFD400; color: #111; box-shadow: inset 0 0 0 2px #111; }
#loopscrub { flex: 1; min-width: 140px; accent-color: #111; }
.lend { font: 500 11px var(--mono); color: #555; }
.ldate { font: 700 16px var(--cond); letter-spacing: .04em; min-width: 104px; text-align: right; color: #111; }
.sfc-loop .toggle { margin-left: 0; color: #111; }

/* radar */
.radar-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.scope { margin: 0; background: var(--panel); border: 1.5px solid #111; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow); }
.scope-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1.5px solid #111; font: 500 12px var(--mono); letter-spacing: .08em; background: var(--panel); }
.seg.mini span { padding: 5px 12px; font-size: 13px; }
.scope-stage { display: grid; place-items: center; padding: 10px; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); }
#scope { display: block; cursor: crosshair; }
.scope-legend { display: grid; gap: 4px; padding: 10px 14px 12px; border-top: 1.5px solid #111; }
.ramp-steps, .vel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 12px; border: 1px solid #111; border-radius: 2px; overflow: hidden; }
.ramp-steps i, .vel i { display: block; }
.rl { display: flex; justify-content: space-between; font: 500 11px var(--mono); color: var(--ink-3); }
.cells ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cells li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.cells .dbz { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #111; margin-top: 4px; }
.cells b { font: 700 19px var(--cond); letter-spacing: .02em; }
.cells small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; }

/* instrument shelter */
.instruments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.inst { margin: 0; background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); padding: 14px 14px 16px; border-top: 5px solid var(--chip); display: flex; flex-direction: column; }
.inst svg { width: 100%; height: auto; max-height: 190px; }
.inst figcaption { display: grid; gap: 2px; margin-top: 8px; }
.inst .ik { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.inst b { font: 700 30px/1 var(--cond); }
.inst figcaption span:last-child { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.rotor { transform-origin: 90px 90px; animation: rot linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.baro { font: 700 9.5px var(--cond); letter-spacing: .08em; fill: #111; }
.thm { font: 600 11px var(--mono); fill: #111; }
.drops path { animation: drop 1.35s linear infinite; opacity: 0; }
@keyframes drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }

/* wind rose */
#rose svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; height: auto; overflow: visible; }
.rosering { font: 500 10px var(--mono); fill: var(--ink-3); }
.compass { font: 700 15px var(--cond); fill: var(--ink-3); }
.roselbl { font: 600 11.5px var(--sans); fill: var(--ink); }
.petal { cursor: pointer; }
.petal:hover { stroke-width: 2.5; }

/* tides */
.tides { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gauge { margin: 0; text-align: center; }
.gauge svg { width: 100%; max-width: 150px; height: auto; }
.gauge figcaption { display: grid; gap: 0; }
.gauge b { font: 700 16px var(--cond); text-transform: uppercase; letter-spacing: .06em; }
.gauge .lvl { font: 700 30px/1.1 var(--cond); }
.gauge span:last-child { font-size: 13px; font-weight: 600; }
.staff { font: 700 11px var(--mono); fill: #111; }
.tmark { font: 700 10px var(--mono); fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.tidetable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tidetable th { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--ink); }
.tidetable td { padding: 10px 8px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.tidetable td:first-child { font-weight: 600; }

@media (max-width: 1100px) { .instruments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .radar-wrap, .tides { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .instruments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tidetable { font-size: 13px; } .tidetable th:nth-child(4), .tidetable td:nth-child(4) { display: none; }
  .ldate { min-width: 0; }
}

/* how-to-read lists */
.howto { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; color: var(--ink-2); }
.howto li { padding-left: 16px; position: relative; }
.howto li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--chip); box-shadow: 0 0 0 1.5px var(--ink); }
.howto b { color: var(--ink); font-weight: 600; }

/* footer */
.foot { margin-top: 72px; padding: 32px 0 40px; border-top: 1.5px solid var(--ink); }
.foot p { margin: 0; max-width: none; line-height: 1.55; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.foot-grid > div { display: grid; gap: 8px; align-content: start; }
.foot .kicker { margin-bottom: 4px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: 700 20px var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.foot-brand .mark { width: 28px; height: 28px; font-size: 18px; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot-legal { margin-top: 28px !important; padding-top: 16px; border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 22px; } }

/* marine: animated sea strips */
.seastrip { height: 72px; border-radius: 3px; overflow: hidden; border: 1.5px solid #111; margin: 6px 0 2px; }
.seastrip svg { width: 100%; height: 100%; display: block; }
.seastate b { display: block; font: 700 22px/1.1 var(--cond); }
.seastate small { color: var(--ink-3); font-size: 13px; }
.seascale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 6px; }
.seascale i { height: 8px; border-radius: 2px; opacity: .35; }
.seascale i.on { opacity: 1; height: 12px; margin-top: -2px; box-shadow: 0 0 0 1.5px #111; }
.seaends { display: flex; justify-content: space-between; font: 500 10.5px var(--mono); color: var(--ink-3); margin-bottom: 4px; }
.zone .sea { display: none; }

/* message preview */
.msg { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border-radius: 4px 16px 16px 16px; padding: 14px 16px; font: 14px/1.5 var(--sans); }
.msg p { margin: 0; }
.msg .m-head { font: 600 12px var(--mono); letter-spacing: .04em; color: var(--ink-3); margin-bottom: 8px; }
.msg .m-title { font: 700 19px/1.2 var(--cond); margin-bottom: 10px; }
.msg .m-kv { color: var(--ink-2); }
.msg .m-kv b { color: var(--ink); font-weight: 600; }
.msg .m-label { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 4px; }
.msg ol, .msg ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.msg li b { font-weight: 600; }
.msg .m-note { color: var(--ink-3); font-size: 13px; margin-top: 12px; }
.factors li.sep { display: block; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule); }
.factors li.sep::before { display: none; }

/* ---------- motion layer (fx.js) ---------- */
/* teletype headline */
#headline .caret { display: inline-block; width: .5em; height: .82em; margin-left: .06em; background: var(--ink); vertical-align: -.06em; animation: blink .9s steps(1) infinite; }
#headline .caret.done { animation: none; opacity: 0; transition: opacity .6s; }
@keyframes blink { 50% { opacity: 0; } }

/* living weather icons */
.i-halo { transform-box: fill-box; transform-origin: center; animation: halo 3.6s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.14); opacity: .12; } }
.i-cloud { animation: drift 7s ease-in-out infinite alternate; }
@keyframes drift { to { translate: 5px 0; } }
.i-rain { animation: rain 1s linear infinite; }
@keyframes rain { 0% { translate: 0 -6px; opacity: 0; } 30% { opacity: 1; } 100% { translate: -3px 8px; opacity: 0; } }
.i-bolt { animation: bolt 3.2s steps(1) infinite; }
/* plan icons, always gently alive: the rainbow draws on, then its clouds drift and glints twinkle (hovering
   draws it again); the three light ribbons ripple on their own beats; the twister sways while the chaser creeps up. */
.i-bow path[style] { stroke-dasharray: 100; stroke-dashoffset: 0; animation: bow 1s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--i) * 60ms); }
:is(.plan, .station):hover .i-bow path[style] { animation-name: bow2; }
@keyframes bow { from { stroke-dashoffset: 100; } }
@keyframes bow2 { from { stroke-dashoffset: 100; } }
.i-pc { animation: pc 4s ease-in-out infinite alternate; } .i-pc.r { animation-delay: -2s; }
@keyframes pc { from { translate: -3px 0; } to { translate: 3px 0; } }
.i-glint { transform-box: fill-box; transform-origin: center; animation: glint 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .9s); }
@keyframes glint { 0%, 100% { scale: .2; opacity: 0; } 30%, 60% { scale: 1; opacity: 1; } }
.i-aurora { animation: aurora 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.5s); }
@keyframes aurora { from { translate: 8px 2px; } to { translate: -12px -2px; } }
.i-funnel { transform-box: view-box; transform-origin: 64px 55px; animation: sway 2.2s ease-in-out infinite alternate; }
@keyframes sway { from { rotate: -4deg; } to { rotate: 4deg; } }
.i-chaser { animation: chase 2.2s ease-in-out infinite alternate; }
@keyframes chase { from { translate: 2px 0; } to { translate: -5px 0; } }

/* risk outlook */
.spc .lvl.on { animation: riskpulse 2.4s ease-in-out infinite; }
@keyframes riskpulse { 50% { box-shadow: 0 4px 12px rgba(0,0,0,.18), 0 0 0 7px color-mix(in srgb, #E6C27F 45%, transparent); } }
#factors li { transition: opacity .4s ease, translate .4s ease; transition-delay: calc(var(--i, 0) * 110ms); }
.fx #factors:not(.in) li { opacity: 0; translate: -8px 0; }
.keys li { transition: opacity .5s ease, translate .5s ease; }
.keys li:nth-child(2) { transition-delay: .12s; } .keys li:nth-child(3) { transition-delay: .24s; }
.fx .keys:not(.in) li { opacity: 0; translate: 0 10px; }
.keys li::before { transition: scale .5s cubic-bezier(.3,1.6,.5,1); transition-delay: inherit; }
.fx .keys:not(.in) li::before { scale: .3; }

/* alerts: a beacon on watches and warnings */
.alert .tag { position: relative; }
.alert[style*="#483D8B"] .tag::after, .alert[style*="#DB7093"] .tag::after, .alert[style*="#FF7F50"] .tag::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; animation: beacon 1.6s ease-out infinite; }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }

/* meteogram: latest reading pulses like a live station */
.mg .ring { transform-box: fill-box; transform-origin: center; animation: ring 2s ease-out infinite; }
@keyframes ring { from { scale: 1; opacity: .9; } to { scale: 3.2; opacity: 0; } }

/* live crypto */
.live { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; vertical-align: middle; font: 600 11.5px var(--mono); letter-spacing: .08em;
  padding: 4px 9px; border-radius: 4px; background: #111; color: #fff; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; animation: livedot 1.2s ease-in-out infinite; }
.live em { font-style: normal; color: #bbb; letter-spacing: 0; }
.live.off i { background: #888; animation: none; }
@keyframes livedot { 50% { opacity: .25; } }
.zone .px { border-radius: 4px; transition: background-color 1.2s ease; }
.zone .px.tick-up { animation: tickup 1.4s ease; } .zone .px.tick-down { animation: tickdown 1.4s ease; }
@keyframes tickup { 0% { background: color-mix(in srgb, var(--good) 30%, transparent); } 100% { background: transparent; } }
@keyframes tickdown { 0% { background: color-mix(in srgb, var(--bad) 30%, transparent); } 100% { background: transparent; } }

/* lightning log */
.strikes { margin: -4px 0 12px; }
.strikes svg { display: block; width: 100%; height: auto; overflow: visible; }
.sklbl { font: 500 10.5px var(--mono); fill: var(--ink-3); }
.bolt { cursor: pointer; }
.bolt .flash { fill: #FFD400; opacity: 0; }
.strikes.in .bolt { animation: strike .9s ease-out both; }
.strikes.in .bolt .flash { animation: flash .9s ease-out both; animation-delay: inherit; }
.strikes:not(.in) .bolt { opacity: 0; }
@keyframes strike { 0% { opacity: 0; translate: 0 -14px; } 40% { opacity: 1; translate: 0 0; } 100% { opacity: 1; } }
@keyframes flash { 30% { opacity: .75; r: 16px; } 100% { opacity: 0; r: 22px; } }

/* verification coin */
.coin { display: inline-block; position: relative; width: 30px; height: 30px; margin-right: 8px; vertical-align: -3px; transform-style: preserve-3d; animation: flip 2.4s cubic-bezier(.2,.7,.2,1) 1 both; animation-play-state: paused; }
#verify.seen .coin { animation-play-state: running; }
.coin i { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--cond); font-style: normal;
  background: radial-gradient(circle at 35% 30%, #FFE680, #E0A800); border: 2px solid #111; backface-visibility: hidden; }
.coin i + i { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #F2F2F2, #B8B8B8); }
@keyframes flip { from { transform: rotateY(0) translateY(0); } 40% { transform: rotateY(900deg) translateY(-14px); } to { transform: rotateY(1800deg) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  #factors:not(.in) li, .keys:not(.in) li, .strikes:not(.in) .bolt { opacity: 1; translate: none; }
  .keys:not(.in) li::before { scale: 1; }
}

/* ---------- restructure (paid-product pass) ---------- */
.station-h { margin: 22px 0 10px; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 16px 20px; border-radius: 3px;
  background: var(--chip); color: #111; box-shadow: inset 0 0 0 2px #111; }
.cta p { margin: 0; font-size: 16px; }
.cta .btn { background: #111; color: var(--chip); box-shadow: none; flex: none; }
.cta .btn:hover { background: #fff; color: #111; }

/* stale data */
.offline { position: relative; }
.offline { outline: 2px dashed #D40000; outline-offset: 3px; }
.offline::after { content: attr(data-asof); position: absolute; top: 10px; right: 10px; z-index: 3; font: 700 11px var(--mono); letter-spacing: .08em;
  background: #D40000; color: #fff; padding: 4px 8px; border-radius: 3px; pointer-events: none; }
.old { display: inline-block; margin-left: 8px; font: 700 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #D40000;
  padding: 2px 6px; border-radius: 3px; vertical-align: 2px; }
.keys li .old { display: table; margin: 8px 0 0; }

.factors li.more { display: block; margin-top: 6px; }
.factors li.more::before { display: none; }
.factors details summary { cursor: pointer; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.factors details ul { list-style: none; padding: 6px 0 0; margin: 0; display: grid; gap: 5px; }
.factors details li { color: var(--ink-3); padding-left: 26px; position: relative; }
.factors details li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-3); }

/* coming up */
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 76px 52px 1fr; gap: 14px; align-items: start; padding: 12px 4px; border-top: 1px solid var(--rule); }
.agenda li:first-child { border-top: 0; padding-top: 0; }
.agenda li.w3 { background: color-mix(in srgb, #DB7093 10%, transparent); border-radius: 3px; padding-inline: 10px; }
.agenda .ad b { display: block; font: 700 18px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.agenda .ad span { font: 500 11.5px var(--mono); color: var(--ink-3); }
.agenda .ai svg { width: 48px; height: 40px; }
.agenda .ab p { margin: 0; }
.agenda .ev + .ev { margin-top: 6px; }
.agenda .ev a { color: var(--ink); font-weight: 700; text-decoration: none; }
.agenda .ev a:hover { color: var(--accent); text-decoration: underline; }
.agenda .at { font: 500 12px var(--mono); color: var(--ink-3); margin-left: 6px; }
.agenda .why { display: block; color: var(--ink-2); font-size: 14.5px; }
.agenda .earn { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.agenda .tk { font: 700 12.5px var(--mono); padding: 3px 7px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); border: 1px solid var(--rule); cursor: help; }
.agenda .tk.ours { background: var(--chip); color: #111; border-color: #111; }
.agenda .tk small { font-weight: 500; margin-left: 4px; opacity: .7; }
.agenda .quiet { color: var(--ink-3); font-size: 14px; padding-top: 10px; }

/* crowded boats */
.crowd { margin-top: 14px; }
.crowd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cc h3 { font: 700 19px var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.cc .cn { margin: 0 0 8px; color: var(--ink-3); font-size: 13px; }
.cc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cc li { display: grid; grid-template-columns: 58px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.cc li b { font: 700 15px var(--mono); }
.cc li small { grid-column: 2 / 4; color: var(--ink-3); font-size: 11.5px; font-family: var(--mono); }
.cbar { height: 8px; background: color-mix(in srgb, var(--rule) 60%, transparent); border-radius: 4px; overflow: hidden; }
.cbar i { display: block; height: 100%; width: var(--w); border-radius: 4px; }
.cbar i.pos { background: #E8412E; } .cbar i.neg { background: #1DA6E8; }
.cv { font: 700 13px var(--mono); }

/* the desk */
.desk-head { margin-top: 88px !important; padding-top: 28px; border-top: 3px solid var(--ink); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.desk-head h2 { font: 700 44px/1 var(--cond); text-transform: uppercase; letter-spacing: .02em; }
.desk-head p { margin: 0; color: var(--ink-2); }
.takeaway { margin: 12px 0 0; padding: 10px 14px; border-left: 5px solid var(--chip); background: var(--panel); font-weight: 600; border-radius: 3px; }
.winds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.sectable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sectable li { display: grid; grid-template-columns: 120px 1fr 64px; gap: 10px; align-items: center; font-size: 14.5px; }
.sectable i { display: block; height: 10px; width: var(--w); border-radius: 3px; }
.sectable i.pos { background: #E8412E; } .sectable i.neg { background: #1DA6E8; }
.sectable b { font: 700 13px var(--mono); text-align: right; }

/* folds */
.fold > summary { cursor: pointer; list-style: none; font: 700 22px var(--cond); text-transform: uppercase; letter-spacing: .03em; padding: 16px 20px;
  background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "+"; font: 700 26px var(--mono); }
.fold[open] > summary::after { content: "−"; }
.fold[open] > summary { margin-bottom: 14px; }
main > section#method { margin-top: 14px; }
.method dl { display: grid; grid-template-columns: 160px 1fr; gap: 12px 20px; margin: 0; }
.method dt { font: 600 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.method dd { margin: 0; color: var(--ink-2); max-width: 72ch; }

/* plan */
.plan { list-style: none; margin: 16px 0 6px; padding: 0; display: grid; gap: 8px; }
.plan li { padding-left: 26px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: #111; background: var(--chip); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; top: 3px; box-shadow: 0 0 0 1.5px #111; }

@media (max-width: 980px) { .crowd-grid, .winds { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .cta { flex-direction: column; align-items: flex-start; }
  .agenda li { grid-template-columns: 58px 1fr; }
  .agenda .ai { display: none; }
  .method dl { grid-template-columns: 1fr; gap: 2px; }
  .method dd { margin-bottom: 10px; }
  .desk-head h2 { font-size: 34px; }
  .sectable li { grid-template-columns: 100px 1fr 56px; }
}
.keys li span.old { display: table; margin: 8px 0 0; color: #fff; font: 700 10.5px var(--mono); letter-spacing: .06em; }

.keys li.is-old { opacity: 1; }
.factors .old { margin-left: 6px; font-size: 9.5px; padding: 1px 5px; }
.sfc.offline::after { top: 52px; }
.spc .lvl { opacity: .7; }
:root[data-theme="dark"] .spc .lvl:not(.on) { opacity: .88; filter: saturate(.85) brightness(.82); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .spc .lvl:not(.on) { opacity: .88; filter: saturate(.85) brightness(.82); } }

/* theme toggle */
.themebtn { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--panel); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; padding: 0; }
.themebtn:hover { background: var(--chip); color: #111; border-color: #111; }
.themebtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.themebtn .i-moon { fill: currentColor; stroke: none; }
.themebtn .i-sun { display: none; }
:root[data-theme="dark"] .themebtn .i-moon { display: none; }
:root[data-theme="dark"] .themebtn .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themebtn .i-moon { display: none; }
  :root:not([data-theme="light"]) .themebtn .i-sun { display: block; }
}
@media (max-width: 980px) { .top .themebtn { margin-left: auto; } .top .btn { margin-left: 0; } }

/* ---------- heatmaps ---------- */
.htabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; }
.htab { font: 700 15px var(--cond); letter-spacing: .05em; text-transform: uppercase; padding: 8px 14px; border-radius: 3px; border: 1.5px solid var(--rule);
  background: var(--panel); color: var(--ink-2); cursor: pointer; }
.htab:hover { border-color: var(--ink); color: var(--ink); }
.htab[aria-selected="true"] { background: var(--chip); color: #111; border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.htab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.raceplay { margin-left: auto; }
.heathow { color: var(--ink-2); font-size: 14.5px; margin: 10px 0 12px; }
.hview svg { display: block; width: 100%; height: auto; }
.hlbl { font: 600 10.5px var(--mono); fill: var(--ink-3); letter-spacing: .06em; }
.hrow { font: 600 12.5px var(--sans); fill: var(--ink); }
.hval { font: 700 12px var(--mono); fill: var(--ink); }
.tgrp { font: 700 11px var(--mono); fill: var(--ink); letter-spacing: .04em; text-transform: uppercase; }
.tleaf { font: 700 11.5px var(--mono); pointer-events: none; }
.tleafv { font: 500 10.5px var(--mono); pointer-events: none; opacity: .9; }
.rlab { font: 500 12px var(--sans); fill: var(--ink-2); }
.rlab.hot { font-weight: 700; fill: var(--ink); }
.lane { cursor: pointer; transition: stroke-opacity .2s; }
.hgrid { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 14px; }
.hgrid th { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 4px; }
.hgrid th:first-child { text-align: left; }
.hgrid .hname { font-weight: 600; white-space: nowrap; padding-right: 10px; }
.hgrid .hc { text-align: center; font: 700 13px var(--mono); border-radius: 4px; padding: 7px 4px; min-width: 64px; transition: opacity .35s ease, transform .35s ease;
  transition-delay: calc(var(--c) * 90ms + var(--i) * 18ms); }
.hview:not(.in) .hc { opacity: 0; transform: scale(.85); }
.hgrid .hv { padding-left: 10px; }
.hgrid .hv small { display: block; color: var(--ink-3); font-size: 12px; }
.vtag { display: inline-block; font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; border: 1px solid #111; }
.v-new { background: #F6E24A; color: #111; } .v-heat { background: #E8412E; color: #fff; } .v-cooling { background: #9CC3EC; color: #111; }
.v-deep { background: #3350D8; color: #fff; } .v-mixed { background: var(--panel); color: var(--ink-2); border-color: var(--rule); }
@media (max-width: 600px) { .htab { font-size: 13px; padding: 6px 10px; } .hgrid .hc { min-width: 0; font-size: 11.5px; padding: 6px 2px; } .hgrid { font-size: 12.5px; } }
.v-steady { background: #F6A623; color: #111; } .v-thawing { background: #B8DC3C; color: #111; }
.heat.offline::after { top: -11px; right: 16px; }

/* ---------- drill-down ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.find { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; margin-top: 6px; }
.find input { flex: 1; min-width: 220px; max-width: 460px; font: 16px var(--sans); padding: 10px 13px; border-radius: 3px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); }
.find input:focus { outline: 2px solid var(--chip); outline-offset: 1px; }
.findmsg { font-size: 14px; color: var(--bad); }
[data-group], [data-stock] { cursor: pointer; }
a[data-group] { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--chip); }
a[data-group]:hover { background: var(--chip); color: #111; }
.cells li[data-stock]:hover b { text-decoration: underline; text-decoration-color: var(--chip); }
.drawer { position: fixed; inset: 0; z-index: 50; background: rgba(10, 14, 20, .38); display: flex; justify-content: flex-end; opacity: 0; transition: opacity .2s ease; }
.drawer.on { opacity: 1; }
.drpanel { position: relative; width: min(720px, 100%); height: 100%; overflow-y: auto; background: var(--bg); padding: 26px 26px 40px; border-left: 3px solid var(--ink);
  transform: translateX(30px); transition: transform .22s ease; box-shadow: -10px 0 30px rgba(0,0,0,.18); }
.drawer.on .drpanel { transform: none; }
body.drawer-open { overflow: hidden; }
.drclose { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); background: var(--panel); color: var(--ink);
  font: 700 22px/1 var(--sans); cursor: pointer; }
.drclose:hover { background: var(--chip); color: #111; }
.drpanel h2 { font: 700 40px/1.05 var(--cond); margin: 2px 0 10px; padding-right: 50px; }
.drchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.drchips .chip { margin: 0; }
.drscore { font: 700 13px var(--mono); padding: 5px 9px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #111; }
.drsum { color: var(--ink-2); margin: 0 0 14px; }
.drhist { background: var(--panel); border-radius: 3px; padding: 10px 12px 6px; box-shadow: var(--shadow); margin-bottom: 14px; }
.drhist .kicker { margin-bottom: 4px; display: block; }
.drhist svg { display: block; width: 100%; height: auto; }
.drtable-wrap { background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); overflow-x: auto; }
.drtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.drtable th { position: sticky; top: 0; background: var(--panel); border-bottom: 2px solid var(--ink); padding: 0; }
.drtable th button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 9px 8px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; text-align: right; }
.drtable th:first-child button { text-align: left; }
.drtable th button.desc::after { content: " ▼"; } .drtable th button.asc::after { content: " ▲"; }
.drtable th button.desc, .drtable th button.asc { color: var(--ink); }
.drtable td { padding: 9px 8px; border-bottom: 1px solid var(--rule); }
.drtable td.n { text-align: right; font: 600 13px var(--mono); white-space: nowrap; }
.drtable td small { display: block; color: var(--ink-3); font-size: 12px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drtable tr.srow { cursor: pointer; }
.drtable tr.srow:hover td, .drtable tr.srow.open td { background: color-mix(in srgb, var(--chip) 16%, var(--panel)); }
.drtable tr.srow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hi52 { font: 700 9.5px var(--mono); background: #A5121C; color: #fff; padding: 1px 4px; border-radius: 2px; vertical-align: 1px; }
.sdetail td { background: color-mix(in srgb, var(--chip) 7%, var(--panel)); padding: 12px; }
.sd { display: grid; gap: 12px; }
.sdchart svg { display: block; width: 100%; height: auto; }
.sdstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 0; }
.sdstats dt { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sdstats dd { margin: 2px 0 0; font: 700 18px/1.15 var(--cond); }
.sdstats dd small { display: block; font: 400 12px var(--sans); color: var(--ink-3); }
.sdstats .earnrow dd { color: var(--accent); }
.sdlinks { margin: 0; font-size: 14px; }
@media (max-width: 600px) {
  .drpanel { padding: 20px 14px 32px; border-left: 0; }
  .drpanel h2 { font-size: 32px; }
  .drtable th:nth-child(n+6), .drtable td:nth-child(n+6) { display: none; }
}
.drtable .sdstats dd small { white-space: normal; max-width: none; overflow: visible; }
/* A closing or closed panel never catches clicks, even before it's fully hidden. */
.drawer:not(.on) { pointer-events: none; }

/* ---------- station readings: even frames, tag in the label line ---------- */
.inst svg { display: block; width: 100%; height: 150px; max-height: none; }
.inst figcaption { grid-template-rows: auto auto auto 1fr; }
.inst .old { justify-self: start; margin: 2px 0 2px; }
.inst.is-old svg { opacity: .92; }
@media (max-width: 600px) {
  .instruments { grid-template-columns: 1fr; gap: 8px; }
  .inst { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border-top-width: 4px; }
  .inst svg { height: 84px; }
  .inst figcaption { margin-top: 0; }
  .inst b { font-size: 24px; }
}

/* ---------- phone pass ---------- */
.btn .short { display: none; }
.cc li.quiet { display: block; color: var(--ink-3); font-size: 14px; }
@media (max-width: 600px) {
  .btn .long { display: none; } .btn .short { display: inline; }
  .top-in { gap: 10px; height: 56px; }
  .word { font-size: 19px; }
  .mark { width: 30px; height: 30px; font-size: 20px; }
  .top .btn { padding: 8px 12px; font-size: 14px; }
  .panel { padding: 16px 14px; }
  .sec-head h2 { font-size: 32px; }
  #headline { font-size: 30px; }
  .spc .lvl.on { font-size: 12px; }
  /* crypto zones become a swipeable row */
  .zones { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .zones::-webkit-scrollbar { display: none; }
  .zones .zone { flex: 0 0 84%; scroll-snap-align: start; }
  .zones::after { content: ""; flex: 0 0 1px; }
  /* heating-up grid fits the screen */
  .hgrid { table-layout: fixed; border-spacing: 2px; }
  .hgrid th:first-child, .hgrid td.hname { width: 34%; }
  .hgrid th:last-child, .hgrid td.hv { display: none; }
  .hgrid .hname { white-space: normal; font-size: 12.5px; line-height: 1.2; padding-right: 4px; }
  .hgrid .hc { font-size: 10.5px; padding: 6px 1px; min-width: 0; }
  .hgrid th { font-size: 9.5px; padding: 2px; }
  /* stock panel */
  .drpanel { padding-top: 58px; }
  .drclose { position: fixed; top: 10px; right: 12px; z-index: 2; }
  .drtable { font-size: 13px; }
  .drtable tr.srow td:nth-child(4), .drtable th:nth-child(4), .drtable tr.srow td:nth-child(n+6), .drtable th:nth-child(n+6) { display: none; }
  .drtable td, .drtable th button { padding-inline: 6px; }
  .drtable td.n { font-size: 12px; }
  .drtable td small { max-width: 130px; }
  .sdstats { grid-template-columns: 1fr 1fr; }
}

/* ---------- colour keys + storm-cell groups ---------- */
.hlegend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: -4px 0 12px; font-size: 12.5px; color: var(--ink-2); }
.lgramp { display: inline-block; width: 170px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.lgend { font: 600 11.5px var(--mono); color: var(--ink); white-space: nowrap; }
.lgnote { flex-basis: 100%; color: var(--ink-3); }
@media (min-width: 900px) { .lgnote { flex-basis: auto; margin-left: 8px; } }
.tgrp { font: 700 11.5px var(--mono); letter-spacing: .03em; text-transform: none; pointer-events: auto; }
.drhist-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.drmove { font: 600 13px var(--mono); color: var(--ink-2); }
.drmove b { color: var(--ink); }
.drkey { display: flex; align-items: center; gap: 8px; font: 600 10.5px var(--mono); color: var(--ink-3); margin: 4px 0 4px; }
.drkey i { flex: 1; max-width: 220px; height: 8px; border-radius: 3px; }
.lgswatch { display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--sans); color: var(--ink); white-space: nowrap; }
.lgswatch i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; }

/* crowded boats: one colour meaning per column */
.crowdkey { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-2); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.crowdkey span { display: inline-flex; align-items: center; gap: 6px; }
.crowdkey i { display: inline-block; width: 16px; height: 8px; border-radius: 3px; }
.cbar { position: relative; overflow: visible; }
.cbar i { position: relative; z-index: 1; }
.cbase { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); z-index: 2; border-radius: 1px; }
.crowdkey .cbase { position: static; display: inline-block; width: 2px; height: 14px; margin: 0 4px; }
.cc-longs .cv, .cc-shorts .cv { color: var(--ink); }
[data-sector] { cursor: pointer; }
.sectable li[data-sector]:hover span, .sectable li[data-sector]:focus-visible span { text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 2px; }
.drtk { font: 600 18px var(--mono); color: var(--ink-3); vertical-align: middle; }
.dractions { margin: 0 0 12px; }
.agenda .tk.ours { cursor: pointer; }
.agenda .tk.ours:hover { background: #111; color: var(--chip); }
#scope { cursor: pointer; }

/* ---------- tables: consistent, no mid-phrase wrapping ---------- */
.tides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tidetable { font-size: 14px; }
.tidetable th, .tidetable td { padding: 11px 10px; text-align: right; vertical-align: top; white-space: nowrap; }
.tidetable thead th { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 2px solid var(--ink); padding-top: 4px; padding-bottom: 8px; }
.tidetable thead th:first-child, .tidetable tbody th { text-align: left; }
.tidetable tbody th { font: 700 15px var(--cond); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.tidetable td b { display: block; font: 700 15px var(--mono); color: var(--ink); }
.tidetable td b.up { color: var(--good); } .tidetable td b.down { color: var(--bad); }
.tidetable td small { display: block; font: 500 11.5px var(--mono); color: var(--ink-3); margin-top: 2px; }
.tidetable tbody tr + tr th, .tidetable tbody tr + tr td { border-top: 1px solid var(--rule); }
.tidetable td { border-bottom: 0; }

/* stock panel table: headers on one line */
.drtable th button { white-space: nowrap; letter-spacing: .04em; padding-inline: 7px; }
.drtable td { padding-inline: 7px; }
.drtable td.n { min-width: 58px; }

/* heating-up grid: a fixed theme column, even data columns */
.hgrid th:first-child, .hgrid td.hname { width: 200px; }
.hgrid th { white-space: nowrap; }
.hgrid .hc { width: 92px; }

@media (max-width: 980px) { .tides { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .tidetable { font-size: 13px; }
  .tidetable th, .tidetable td { padding: 9px 5px; }
  .tidetable thead th { font-size: 9.5px; letter-spacing: .04em; white-space: normal; }
  .tidetable td b { font-size: 13px; }
  .tidetable td small { font-size: 10.5px; }
  .tidetable tbody th { font-size: 13px; }
  .tidetable th:nth-child(5), .tidetable td:nth-child(5) { display: table-cell; }
  .hgrid th:first-child, .hgrid td.hname { width: 34%; }
  .hgrid .hc { width: auto; }
}
.tidetable tbody th { border-bottom: 0; padding-bottom: 11px; }


/* ---------- tune your forecast (console) ---------- */
.console { margin: 0; max-width: none; display: block; }
.desk2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr); gap: 26px; align-items: start; }
.rack { background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); padding: 18px 20px 20px; border: 1.5px solid var(--ink); }
.rackrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.rackrow:first-child { margin-top: 0; }
.racklbl { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.racklbl::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 3px color-mix(in srgb, #FF3B30 25%, transparent); }
.rackhint { font: 500 11.5px var(--mono); color: var(--ink-3); }
/* instrument tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile { display: grid; place-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 3px; border: 1.5px solid var(--rule); background: color-mix(in srgb, var(--bg) 55%, var(--panel));
  color: var(--ink-3); cursor: pointer; font: 600 10.5px/1.15 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-align: center;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.tile svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.tile.on { background: var(--chip); color: #111; border-color: #111; box-shadow: 0 3px 0 #111; transform: translateY(-2px); }
.tile:active { transform: translateY(1px); box-shadow: none; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* your area */
.search { position: relative; }
.search input { width: 100%; font: 16px var(--sans); padding: 11px 14px 11px 38px; border-radius: 3px; border: 1.5px solid var(--ink); background: var(--panel) no-repeat 13px 50%/16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); color: var(--ink); }
.search input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 70%, transparent); }
.sugg { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: var(--panel); border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.sugg li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 3px; cursor: pointer; }
.sugg li.hot, .sugg li:hover { background: color-mix(in srgb, var(--chip) 30%, var(--panel)); }
.sugg li b { font: 700 14px var(--mono); }
.sugg li small { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg li em { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; font-style: normal; padding: 2px 6px; border-radius: 3px; }
.sugg li.nomatch { display: block; color: var(--ink-3); cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 30px; align-items: center; }
.chips .none { color: var(--ink-3); font-size: 13px; }
.chip2 { display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px var(--mono); padding: 5px 6px 5px 10px; border-radius: 3px; border: 1.5px solid #111; }
.chip2 button { all: unset; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
.chip2 button:hover { background: rgba(0,0,0,.15); }
.k-theme { background: var(--chip); color: #111; } .k-stock { background: var(--panel); color: var(--ink); } .k-coin { background: #9CD7F5; color: #111; }
em.k-theme, em.k-stock, em.k-coin { border: 1px solid #111; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.quick button { all: unset; cursor: pointer; font: 600 12px var(--mono); padding: 3px 9px; border-radius: 3px; border: 1.5px dashed var(--ink-3); color: var(--ink-2); }
.quick button:hover { border-style: solid; border-color: var(--ink); color: var(--ink); }
.switch { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); color: var(--ink-2); cursor: pointer; text-transform: uppercase; letter-spacing: .06em; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 34px; height: 20px; border-radius: 3px; background: var(--rule); position: relative; transition: background .15s; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1.5px var(--ink-3); transition: left .15s; }
.switch input:checked + span { background: var(--chip); box-shadow: inset 0 0 0 1.5px #111; }
.switch input:checked + span::after { left: 17px; box-shadow: 0 0 0 1.5px #111; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* weather radio */
.radio { border-radius: 3px; background: #23241c; padding: 12px; box-shadow: inset 0 2px 8px rgba(0,0,0,.4); }
.lcd { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; padding: 10px 12px; border-radius: 3px; color: #FFB341;
  background: #2E2A16 repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 0 1px rgba(255,179,65,.25); text-shadow: 0 0 6px rgba(255,170,40,.45); min-height: 76px; }
.lcd .f { font: 700 26px/1 var(--mono); grid-row: span 2; letter-spacing: .02em; }
.lcd .f::after { content: " MHz"; font-size: 11px; opacity: .7; }
.lcd .n { font: 700 14px var(--mono); letter-spacing: .06em; }
.lcd .p { font: 500 11.5px var(--mono); opacity: .85; }
.lcd .d { grid-column: 1 / -1; font: 400 12.5px var(--sans); color: #F3D9A8; text-shadow: none; opacity: .9; }
.dial { position: relative; height: 70px; margin-top: 10px; border-radius: 3px;
  background: linear-gradient(#1a1b14, #1a1b14) padding-box, repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 12px) 0 6px/100% 10px no-repeat; background-color: #1a1b14; }
.dial::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 10px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 1px, transparent 1px 12px); pointer-events: none; }
.st { all: unset; position: absolute; top: 4px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; cursor: pointer; color: #B9B39A; padding: 0 2px; }
.st i { width: 2px; height: 20px; background: currentColor; border-radius: 1px; }
.st span { font: 600 10px/1.1 var(--mono); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.st:hover { color: #fff; }
.st.on { color: #FFB341; }
.st:focus-visible span { outline: 1.5px solid #FFB341; outline-offset: 2px; }
.needle { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #FF3B30; border-radius: 2px; box-shadow: 0 0 10px rgba(255,59,48,.8); transition: left .45s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.radio .fine { color: #B9B39A; margin: 10px 2px 0; }
.seg.mini span { padding: 5px 11px; font-size: 12.5px; }
/* phone side */
.build-preview { position: sticky; top: 120px; display: grid; gap: 10px; }
.build-preview .phone { max-height: 64vh; overflow-y: auto; }
.sendrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sendrow input { flex: 1; min-width: 160px; font: 15px var(--sans); padding: 10px 12px; border-radius: 3px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); }
.sendrow .btn { white-space: nowrap; }
@media (max-width: 980px) {
  .desk2 { grid-template-columns: 1fr; }
  .build-preview { position: static; }
  .build-preview .phone { max-height: 420px; }
}
@media (max-width: 600px) {
  .rack { padding: 14px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .tile { padding: 9px 3px 8px; font-size: 9px; }
  .tile svg { width: 22px; height: 22px; }
  .lcd .f { font-size: 20px; }
}
.dialscroll { overflow-x: auto; scrollbar-width: none; margin-top: 10px; border-radius: 3px; }
.dialscroll::-webkit-scrollbar { display: none; }
.dialscroll .dial { margin-top: 0; }
/* Three tiers fit any screen, so the dial no longer scrolls. Bigger stations, a plan line under each. */
.dial { height: 96px; }
.st { padding: 0 6px 6px; min-width: 64px; min-height: 44px; }
.st span, .dialscroll .st span { font: 700 12px/1.1 var(--mono); max-width: none; letter-spacing: .06em; }
.st small { font: 500 10px/1.3 var(--mono); letter-spacing: .02em; opacity: .8; white-space: nowrap; text-align: center; }
.lcd .n { line-height: 1.3; }
/* Grid children must be allowed to shrink, or the wide phone dial stretches the whole page. */
.desk2 > *, .rack, .radio, .dialscroll { min-width: 0; }
@media (max-width: 980px) { .desk2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- company news ---------- */
.k-sector { background: #C9B6F2; color: #111; } em.k-sector { border: 1px solid #111; }
.newsrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.nlbl { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.feedbox { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.feedbox .nlbl { margin-bottom: 6px; }
.nf { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 4px; border-radius: 3px; text-decoration: none; color: var(--ink); font-size: 13.5px; }
.nf:hover { background: color-mix(in srgb, var(--chip) 22%, var(--panel)); }
.nf b { font: 700 13px var(--mono); }
.nf time { font: 500 11px var(--mono); color: var(--ink-3); white-space: nowrap; }
.nf.big span { font-weight: 600; }
#b-feed .none { color: var(--ink-3); font-size: 13px; margin: 0; }
.drnews { margin-top: 18px; background: var(--panel); border-radius: 3px; box-shadow: var(--shadow); padding: 12px 14px; }
.drnews .kicker { margin-bottom: 6px; }

.newsrow .seg { grid-template-columns: repeat(3, auto); }
.newsrow .seg span { padding: 5px 10px; }

/* ---------- the big picture ---------- */
.big + .big { margin-top: 16px; }
.bighead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bighead .kicker { margin: 0; }
.mranges { display: inline-flex; gap: 4px; background: var(--rule); padding: 3px; border-radius: 3px; }
.mrange { all: unset; cursor: pointer; font: 700 12.5px var(--mono); padding: 5px 11px; border-radius: 3px; color: var(--ink-2); }
.mrange.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.mrange:focus-visible { outline: 2px solid var(--accent); }
.mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.mtile { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: grid; gap: 1px; padding: 10px 12px 8px; border-radius: 3px; border: 1.5px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 50%, var(--panel)); transition: transform .12s, border-color .15s, box-shadow .15s; }
.mtile:hover { border-color: var(--ink); transform: translateY(-1px); }
.mtile.on { border-color: var(--c); box-shadow: 0 0 0 1.5px var(--c), 0 3px 0 var(--c); background: var(--panel); }
.mtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mbadge { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #fff; font: 700 11px/18px var(--mono); text-align: center; }
.mlbl { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.mval { font: 700 22px/1.1 var(--cond); color: var(--ink); }
.mchg { font: 700 12.5px var(--mono); }
.mchg.rise { color: var(--good); } .mchg.fall { color: var(--bad); }
.mspark { display: block; height: 30px; margin: 4px 0 2px; }
.mspark svg { width: 100%; height: 100%; display: block; }
.msrc { font: 500 10px var(--mono); color: var(--ink-3); }
.mcompare svg { display: block; width: 100%; height: auto; overflow: visible; }
.curvepanel .cdate { font: 700 18px var(--cond); color: var(--ink); }
.cstate { margin: -4px 0 8px; font: 600 14px var(--sans); }
.cstate.inv { color: var(--bad); } .cstate.norm { color: var(--good); }
#ccurve svg, #cspread svg { display: block; width: 100%; height: auto; }
.cctl { display: flex; gap: 12px; align-items: center; margin: 8px 0 14px; }
.cctl input { flex: 1; accent-color: #111; }
.spreadk { margin: 6px 0 2px; }
@media (max-width: 600px) { .mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mval { font-size: 19px; } }
.mcompare .ptitle { font: 700 15px var(--cond); letter-spacing: .04em; text-transform: uppercase; fill: var(--ink); }
.mcompare .psub { font: 400 12px var(--sans); fill: var(--ink-3); }
.mcompare .plast { font: 700 16px var(--cond); }
.mval.rise { color: var(--good); } .mval.fall { color: var(--bad); }
.mchg.flat, .mval.flat { color: var(--ink); }
.mtile .mchg { font: 600 12px var(--mono); color: var(--ink-2); }
.mtile .mchg.rise { color: var(--good); } .mtile .mchg.fall { color: var(--bad); }
.mtile .mchg.flat { color: var(--ink); }
.mtile .msince { font: 500 10.5px var(--mono); color: var(--ink-3); letter-spacing: 0; }
.mtile .msrc-stale { color: #C2410C; font-weight: 600; }
.msources { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.msources summary { cursor: pointer; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 6px 0; min-height: 32px; display: flex; align-items: center; }
.msources p { margin: 6px 0 0; line-height: 1.5; }
.invkey { color: #D6161B; margin-left: 8px; white-space: nowrap; }
.mtile .mchg { white-space: nowrap; }
.lcd .p { font: 600 12.5px/1.35 var(--mono); opacity: 1; }
.lcd .by { grid-column: 1 / -1; font: 500 10.5px var(--mono); letter-spacing: .03em; color: #FFB341; opacity: .7; text-shadow: none; }
/* Pick your forecaster: four setup cards, 2x2 when the rack is narrow. One left edge for everything, set like the
   station cards in step 2: the weather stamp and persona on top, the name, the why, then a ruled footer pinned to the
   bottom so every card in a row ends on the same line. Yellow is the chosen one; a dashed edge is "started from". */
.presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.preset { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto; gap: 5px; padding: 11px 12px; text-align: left; border-radius: 3px;
  border: 1.5px solid var(--rule); background: var(--panel); color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.preset > * { min-width: 0; }
.preset:hover { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
.preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.preset .ptop { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
/* the weather stamp: the icon in a small inked box, the one cute thing on the card */
.preset .ptop > svg { box-sizing: border-box; width: 28px; height: 28px; padding: 3px; flex: none; border: 1.5px solid var(--ink); border-radius: 3px;
  background: var(--bg); color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.preset .persona { flex: 1 1 auto; min-width: 0; font: 600 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset .bell { display: inline-flex; flex: none; color: var(--ink-2); }
.preset .bell svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.preset b { font: 800 19px/1.05 var(--cond); margin-top: 3px; color: var(--ink); }
.preset .why { font-size: 13px; line-height: 1.38; color: var(--ink-2); }
.preset .meta { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; margin-top: 3px; padding-top: 7px;
  border-top: 1px solid var(--rule); font: 600 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.tierchip { font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 2px;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--panel); }
.tierchip.t-advanced { background: #23241c; border-color: var(--ink); color: #FFB341; }
.tierchip.t-standard { background: transparent; color: var(--ink); }
.preset.on { border-color: var(--ink); background: var(--chip); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.preset.on, .preset.on b, .preset.on .why, .preset.on .ptop, .preset.on .meta, .preset.on .bell { color: #111; }
.preset.on .ptop > svg { border-color: #111; background: #fff; color: #111; }
.preset.on .meta { border-top-color: rgba(17, 17, 17, .35); }
.preset.on .tierchip { border-color: #111; }
.preset.on .tierchip.t-pro { background: #111; color: var(--chip); }
.preset.was { border-style: dashed; border-color: var(--ink-2); }
@media (max-width: 600px) {
  .presets { gap: 8px; }
  .preset { padding: 10px; gap: 5px; }
  .preset .ptop { gap: 6px; }
  .preset .ptop > svg { width: 26px; height: 26px; padding: 2.5px; }
  .preset .persona { font-size: 10px; letter-spacing: .05em; }
  .preset b { font-size: 18px; }
  .preset .why { font-size: 12.5px; }
  .preset .meta { font-size: 10px; gap: 4px 6px; }
  .preset .tierchip { font-size: 9px; letter-spacing: .04em; padding: 3px 4px; }
}
/* The needle marks the tick band only, so it never runs through the station text. */
.needle { bottom: auto; height: 34px; }
.needle::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #FF3B30; border-bottom: 0; }

/* ---------- Currents: crypto themes (cryptodesk.js) ----------
   One panel, same padding and shadow as every other panel. Gauges are tinted wells, not boxes inside the box.
   The theme list is a grid whose header row shares the rows' columns, so labels line up instead of repeating. */
.cur-panel { margin-top: 22px; }
.cur-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cur-head .kicker { margin-bottom: 10px; }
.cur-head .stamp { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.cur-lede { margin: 0 0 18px; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 68ch; }

.cgauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
.cgauge { background: var(--bg); border-radius: 3px; padding: 14px 16px 12px; display: grid; grid-template-rows: auto auto 38px 1fr; gap: 4px; min-width: 0; text-align: left; }
.cgauge .gt { font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cgauge .gv { font: 700 28px/1 var(--cond); color: var(--ink); }
.cgauge .gv.up { color: var(--good); } .cgauge .gv.down { color: var(--bad); }
.cgauge .gs { display: block; width: 100%; height: 38px; align-self: center; }
.cgauge .gs svg { width: 100%; height: 38px; display: block; overflow: visible; }
.cgauge .gc { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
/* Open interest before it has a week: seven day-pips, filled for each day recorded. */
.cgauge .pips { display: flex; gap: 4px; align-items: center; height: 38px; }
.cgauge .pips i { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cgauge .pips i.on { background: #F2A11F; }

.cur-cols { padding: 0 12px 8px; border-bottom: 1px solid var(--rule); font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cur-cols .r { text-align: right; }
.cur-cols .cc-key { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cur-cols .cc-key em { font-style: normal; letter-spacing: .04em; text-transform: none; font-weight: 500; }
.ramp { display: inline-block; width: 64px; height: 6px; border-radius: 3px; flex: none;
  background: linear-gradient(90deg, #7B2C9E, #3350D8, #1DA6E8, #2FBF71, #B8DC3C, #F6E24A, #F6A623, #E8412E, #A5121C); }
.cur-list { list-style: none; margin: 0 0 4px; padding: 0; }
.cur-list li { border-bottom: 1px solid var(--rule); }
/* all: unset first, then the shared grid: the other order wipes the grid out. */
.cur { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; padding: 11px 12px; transition: background-color .15s; }
.cur-cols, .cur { display: grid; align-items: center; column-gap: 14px;
  grid-template-columns: minmax(140px, 1.15fr) 104px minmax(160px, 2.4fr) 62px 66px 112px 62px; }
/* Funding is a word (calm, busy, crowded, shorts paying), so it sits centred under its header; the column fits
   the longest one so nothing spills past its edge. */
.cur-cols span:nth-child(6), .cur .cstat:nth-of-type(6) { text-align: center; }
.cur:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.cur:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.cur .cn { display: grid; gap: 2px; min-width: 0; }
.cur .cn b { font: 700 16px/1.15 var(--cond); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cur .cn small { font: 500 11px var(--mono); color: var(--ink-3); }
.cur .cw { justify-self: start; font: 700 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: 6px 8px; border-radius: 3px; white-space: nowrap; }
.cur .cs { display: block; height: 20px; min-width: 0; border-radius: 4px; overflow: hidden; }
.cur .cs svg { width: 100%; height: 20px; display: block; }
.cur .cscore { font: 700 20px/1 var(--cond); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.cur .cstat { text-align: right; min-width: 0; }
.cur .cstat i { display: none; }
.cur .cstat b { font: 700 14px var(--sans); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cur .cstat b.up { color: var(--good); } .cur .cstat b.down { color: var(--bad); } .cur .cstat b.na { color: var(--ink-3); font-weight: 500; }
.crowd-hot { color: var(--bad) !important; } .crowd-warm { color: #C2410C !important; } .crowd-calm { color: var(--ink-2) !important; font-weight: 600 !important; } .crowd-cool { color: #1E6FD9 !important; }
#curnote { margin-top: 14px; }
.crtable small.up { color: var(--good); } .crtable small.down { color: var(--bad); }

@media (max-width: 1000px) {
  .cgauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cur-cols { display: none; }
  .cur-list { border-top: 1px solid var(--rule); }
  .cur { grid-template-columns: repeat(3, minmax(0, 1fr)) 40px; grid-template-areas: "n n w s" "x x x x" "a b c c";
    row-gap: 8px; padding: 12px 2px; }
  .cur .cn { grid-area: n; } .cur .cw { grid-area: w; justify-self: end; } .cur .cscore { grid-area: s; } .cur .cs { grid-area: x; }
  .cur .cstat { text-align: left; display: grid; gap: 1px; }
  .cur .cstat i { display: block; font: 500 10px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .cur .cstat:nth-of-type(5) { grid-area: a; } .cur .cstat:nth-of-type(6) { grid-area: b; } .cur .cstat:nth-of-type(7) { grid-area: c; text-align: right; }
}
@media (max-width: 600px) {
  .cgauges { gap: 8px; }
  .cgauge { padding: 12px 12px 10px; grid-template-rows: 2.4em auto 34px 1fr; }
  .cgauge .gv { font-size: 24px; }
  .cgauge .gs, .cgauge .gs svg, .cgauge .pips { height: 34px; }
  .cur-lede { font-size: 14px; }
}

/* Crypto coin table: the stock drawer's positional phone rule would hide the wrong columns, so it gets its own. */
.crtable td.n small { display: block; font: 600 11px var(--mono); margin-top: 2px; max-width: none; }
@media (max-width: 760px) {
  .drtable.crtable th, .drtable.crtable td { display: table-cell !important; }
  .drtable.crtable [data-col="price"], .drtable.crtable [data-col="ret_5d"], .drtable.crtable [data-col="funding_7d"], .drtable.crtable [data-col="fees_30d"] { display: none !important; }
}
.drhist-top .drmove { white-space: nowrap; }
/* Four setup cards across only when their own column can give each ~150px; otherwise two by two. Sized by the
   container, not the window, because the builder column is ~500px on most desktops. */
.rack { container-type: inline-size; container-name: rack; }
@container rack (max-width: 660px) { .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container rack (min-width: 661px) { .presets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The logo: a sun whose rays are a chart, each longer than the last going clockwise. Inline SVG so the rays take
   the text colour in light and dark mode. On load it plays like a data dial: rays sweep in one by one and grow to
   their value, then the sun settles. Hovering replays it. Skipped when the reader prefers less motion. */
svg.mark { width: 46px; height: 46px; display: block; flex: none; margin: -5px -4px; color: var(--ink); background: none; border-radius: 0; box-shadow: none; overflow: visible; }
.foot-brand svg.mark { width: 28px; height: 28px; margin: 0; display: inline-block; vertical-align: -7px; }
@media (max-width: 600px) { svg.mark { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: no-preference) {
  /* Rays rest fully drawn; the animation only adds the build-in, so a skipped animation can't hide the logo. */
  svg.dial .rays path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: dialray .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.12s + var(--i) * 70ms); }
  svg.dial .sun { transform-origin: 32px 32px; animation: dialsun .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .brand:hover svg.dial .rays path { animation-name: dialray2; }
  .brand:hover svg.dial .sun { animation-name: dialsun2; }
}
@keyframes dialray { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dialray2 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dialsun { from { transform: scale(.2); } to { transform: scale(1); } }
@keyframes dialsun2 { 0% { transform: scale(1); } 40% { transform: scale(.82); } 100% { transform: scale(1); } }

/* ---------- checkout v2: three numbered steps ----------
   1 pick a forecaster, 2 choose the forecast (tier), 3 add what you follow. Sections live behind "Customise". */
.rack { display: grid; gap: 26px; }
.step { display: grid; gap: 12px; }
.stephead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stephead h3 { margin: 0; font: 800 26px/1.1 var(--cond); color: var(--ink); }
.stephead .rackhint, .stephead .seg, .stephead .opt { margin-left: auto; }
.stepn { width: 30px; height: 30px; border-radius: 50%; background: var(--chip); color: #111; display: grid; place-items: center; font: 800 17px/1 var(--cond); flex: none; }
.stephead .opt { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stepnote { margin: 0; font-size: 13px; color: var(--ink-3); }
/* the weather radio, as three preset stations */
.stations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.station { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 12px 14px 12px;
  border-radius: 3px; border: 1.5px solid var(--rule); background: var(--panel); min-width: 0; transition: border-color .15s, transform .15s, box-shadow .15s; }
.station:hover { border-color: var(--ink); transform: translateY(-1px); }
.station:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.station .freq { display: flex; align-items: center; gap: 6px; font: 600 11px var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.station .freq i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); flex: none; }
.station b { font: 800 26px/1 var(--cond); color: var(--ink); }
.station .tagline { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.station .credit { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font: 600 11px var(--mono); color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 8px; }
.station .credit em { font-style: normal; color: var(--ink-2); }
.station.on { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); background: color-mix(in srgb, var(--chip) 22%, var(--panel)); }
.station.on .freq { color: var(--ink); } .station.on .freq i { background: #E8412E; box-shadow: 0 0 0 3px rgba(232,65,46,.2); }
/* step 3 */
.alertrow { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 4px; }
.alertrow .newsrow { margin: 0; display: flex; align-items: center; gap: 10px; }
/* customise: closed by default */
.customize { border: 1.5px solid var(--rule); border-radius: 3px; padding: 0 14px; }
.customize summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; font: 700 15px var(--sans); color: var(--ink); }
.customize summary::-webkit-details-marker { display: none; }
.customize summary::after { content: "+"; font: 600 22px var(--mono); color: var(--ink-3); margin-left: 6px; }
.customize[open] summary::after { content: "−"; }
.customize summary .rackhint { margin-left: auto; }
.customize .tiles { padding: 4px 0 14px; }
/* the phone: a label when it shows an example */
.sampletag { margin: 0 0 8px; padding: 6px 10px; border-radius: 3px; background: color-mix(in srgb, var(--chip) 35%, transparent); font: 600 11.5px var(--mono); letter-spacing: .04em; color: var(--ink); }
@media (max-width: 760px) {
  .stations { grid-template-columns: 1fr; }
  .station { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; grid-template-areas: "f f" "n c" "t c"; column-gap: 14px; row-gap: 4px; align-items: start; }
  .station .freq { grid-area: f; } .station b { grid-area: n; } .station .tagline { grid-area: t; }
  .station .credit { grid-area: c; border: 0; padding: 0; align-items: flex-end; text-align: right; align-self: center; }
  .stephead h3 { font-size: 22px; }
}
.stalenote { margin: -6px 0 14px; padding: 8px 12px; border-radius: 3px; background: var(--stale-bg); color: var(--stale-ink); font: 600 13px var(--sans); }
.agenda li.later { display: none; }
.agenda.expanded li.later { display: grid; }
.morebtn { all: unset; cursor: pointer; display: inline-block; margin: 12px 0 0; padding: 8px 14px; border-radius: 3px; border: 1.5px solid var(--ink); font: 700 13px var(--sans); color: var(--ink); }
.morebtn:hover { background: var(--chip); }
.morebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.earn .tkmore { font: 600 11px var(--mono); color: var(--ink-3); align-self: center; padding: 0 4px; }
.howline { margin: 6px 0 0; font-size: 14px; color: var(--ink-3); }
.howline b { color: var(--ink); font-weight: 700; }
.msg .m-body { color: var(--ink); font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; }
/* station credit: model on one line, plan on the next, the same on every card so the bottoms line up */
.station .credit { flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 760px) { .alertrow { margin-top: 10px; } .alertrow .newsrow { flex-wrap: wrap; } }

/* ---------- intro: what this is, how it works ---------- */
.intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px 40px; align-items: center; padding: 40px 0 34px; border-bottom: 1px solid var(--rule); }
.intro h1 { font: 800 clamp(40px, 5.6vw, 68px)/.98 var(--cond); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.intro-copy p { font-size: 19px; color: var(--ink-2); margin: 14px 0 0; max-width: 34em; }
.intro-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 22px; }
.intro-cta .btn { height: 48px; padding: 0 24px; font-size: 17px; }
.intro-more { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--chip); padding-bottom: 1px; }
.intro-more:hover { border-color: var(--ink); }
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.how li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow); }
.how .hown { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--chip); color: #111; display: grid; place-items: center; font: 800 21px/1 var(--cond); }
.how b { font: 700 20px/1.1 var(--cond); }
.how li span:last-child { color: var(--ink-3); font-size: 15px; line-height: 1.35; }
.now { padding-top: 30px; }
.today-k { margin: 0 0 10px; }
.chnote { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; padding: 28px 0 26px; gap: 22px; }
  .intro-copy p { font-size: 17px; }
  .how li { padding: 12px 14px; }
}
@media (max-width: 520px) {
  .intro-cta .btn { flex: 1 1 100%; }
  .intro-more { margin-inline: auto; }
}
/* the send row: where to send it on one line, then email and the button together */
.sendrow .chan { flex: 1 1 100%; }
.sendrow .chan label { flex: 1; }
.sendrow input { min-width: 0; flex: 1 1 140px; }
.sendrow #b-submit { flex: 0 0 auto; height: 42px; }
.chnote { margin-top: 6px; }
.formmsg:empty { min-height: 0; }

/* ---------- intro horizon: the market traced as a skyline ---------- */
.horizon { grid-column: 1 / -1; height: 124px; margin: 4px 0 -34px; overflow: visible; }
.horizon svg { display: block; overflow: visible; }
.hz-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hz-stop-a { stop-color: var(--accent); stop-opacity: .14; }
.hz-stop-b { stop-color: var(--accent); stop-opacity: 0; }
.hz-ground { stroke: var(--rule); stroke-width: 1; }
.hz-pen { fill: var(--ink); }
.hz-cloud { fill: var(--panel); fill-opacity: 0; stroke: var(--ink-3); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.hz-rain { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.hz-disc { fill: var(--chip); }
.hz-ray { fill: none; stroke: var(--ink); stroke-width: 4.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
@media (max-width: 600px) { .horizon { height: 92px; margin-bottom: -26px; } }

/* ---------- phone pass: cleaner tags, bigger tap targets, readable labels ---------- */
/* stale pills on cards are soft amber everywhere; the one red tag per panel stays the strong signal */
.inst .old, .factors .old, .keys li .old, .keys li span.old { background: var(--stale-bg); color: var(--stale-ink); font-size: 11px; }
.spreadk { line-height: 1.6; }
.spreadk .invkey { white-space: nowrap; }
.curmore { display: none; }
@media (max-width: 760px) {
  /* the panel's red stale tag sits on its dashed edge, never over the heading */
  .offline::after, .sfc.offline::after, .heat.offline::after { top: -11px; right: 12px; }
  .offline { margin-top: 14px; }
  .intro { padding-top: 18px; }
  .sec-head h2 { font-size: 30px; }
  .sec-head h2 .live { margin-left: 8px; padding: 3px 7px; font-size: 10.5px; }
  /* tap targets */
  .seg span { padding: 10px 14px; }
  .seg.mini span { padding: 9px 12px; }
  .quick button { padding: 8px 12px; }
  .chip2 { padding: 6px 6px 6px 11px; }
  .chip2 button { width: 28px; height: 28px; font-size: 15px; }
  .htabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .htab { min-height: 42px; text-align: center; }
  .loopbtn { min-height: 40px; }
  .mrange { padding: 10px 11px; }
  .toggle, .switch { min-height: 40px; }
  .toggle input { width: 18px; height: 18px; }
  .factors details summary, li.more summary { padding: 10px 0; }
  input[type="range"] { height: 32px; }
  .intro-more { padding: 8px 0 3px; }
  .ev a, #news a { display: inline-block; padding: 6px 0; }
  /* nothing under 11px */
  .factors .old { font-size: 11px; padding: 2px 6px; }
  .cur .cstat i { font-size: 11px; }
  .cur .cw, .seaends span, .scale .ends span { font-size: 11.5px; }
  p.earn .tk small { font-size: 11px; }
  /* the crypto theme list: top six first */
  .cur-list.short > li:nth-child(n+7) { display: none; }
  .curmore:not([hidden]) { display: inline-block; margin-top: 14px; padding: 11px 18px; }
  .stephead .rackhint { margin-left: 0; flex-basis: 100%; }
}
/* long coin names never run into their bars; the map header keeps to one idea on phones */
.cc li { grid-template-columns: 84px 1fr auto; }
.cc li b { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keys-stale, #keys-stale { margin-top: 12px; }
@media (max-width: 760px) { .sfc-bar .sfc-key { display: none; } }
@media (max-width: 760px) {
  .alerts .area a, .zone .area a, div.body > .area > a { display: inline-block; padding: 4px 0; }
  .mtile .msrc, .mtile .msince, #b-mods .tile span { font-size: 11px; }
}

/* ---------- night: the sun becomes a crescent and its rays become stars (logo option A) ---------- */
svg.mark .moon, .wx .night, .dn-night { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) svg.mark .sun, :root:not([data-theme="light"]) svg.mark .rays, :root:not([data-theme="light"]) .wx .day, :root:not([data-theme="light"]) .dn-day { display: none; }
  :root:not([data-theme="light"]) .dn-night { display: inline; }
  :root:not([data-theme="light"]) svg.mark .moon, :root:not([data-theme="light"]) .wx .night { display: inline; }
}
:root[data-theme="dark"] svg.mark .sun, :root[data-theme="dark"] svg.mark .rays, :root[data-theme="dark"] .wx .day, :root[data-theme="dark"] .dn-day { display: none; }
:root[data-theme="dark"] .dn-night { display: inline; }
:root[data-theme="dark"] svg.mark .moon, :root[data-theme="dark"] .wx .night { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  /* stars light up clockwise, the way the rays draw in by day */
  /* stars light up clockwise as the logo builds, then keep twinkling, each on its own slow beat */
  svg.dial .stars circle { transform-box: fill-box; transform-origin: center;
    animation: dialstar .45s cubic-bezier(.3, 1.6, .5, 1) both, twinkle calc(2.6s + var(--i) * .37s) ease-in-out infinite;
    animation-delay: calc(.15s + var(--i) * 70ms), calc(1.4s + var(--i) * .53s); }
  svg.dial .crescent { transform-origin: 32px 32px; animation: dialsun .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .brand:hover svg.dial .stars circle { animation-name: dialstar2; }
}
@keyframes dialstar { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dialstar2 { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.hz-star { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.hz-sky { fill: #DCE3EE; }

/* ---------- Ask Nimbus: a search bar and one forecast sheet ----------
   One surface, hairline dividers, condensed type for answers, sans for reading, mono only for tiny labels.
   The logo in the bar is the "thinking" indicator: its rays (or stars, by night) cycle while Nimbus reads. */
.askbar { display: flex; align-items: center; gap: 12px; max-width: none; margin: 22px 0 0; padding: 8px 8px 8px 14px; border-radius: 3px;
  background: var(--panel); border: 1.5px solid var(--rule); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.askbar:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,212,0,.35), var(--shadow); }
.askmark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.askmark svg.mark { width: 34px; height: 34px; margin: 0; }
.askbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 19px var(--sans); padding: 12px 0; }
.askbar input::placeholder { color: var(--ink-3); }
.askgo { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 3px; background: var(--chip); color: #111; font: 800 18px var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.askgo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.askgo:hover svg { transform: translateX(3px); }
.askgo:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.askgo:disabled { opacity: .6; cursor: wait; }
@media (prefers-reduced-motion: no-preference) {
  .askbar.thinking .askmark .rays path { animation: think 1s linear infinite; animation-delay: calc(var(--i) * 100ms); }
  .askbar.thinking .askmark .stars circle { animation: thinkstar 1s linear infinite; animation-delay: calc(var(--i) * 100ms); }
}
@keyframes think { 0%, 100% { opacity: .2; } 10% { opacity: 1; } 60% { opacity: .2; } }
@keyframes thinkstar { 0%, 100% { opacity: .15; } 10% { opacity: 1; } 60% { opacity: .15; } }

.askhome { padding: 34px 0 4px; }
.askhome .askbar { margin: 0; border-radius: 3px; padding-left: 16px; }
.askhome .askgo { width: 50px; padding: 0; justify-content: center; border-radius: 50%; }

/* ---------- night: stars twinkle ---------- */
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: .3; transform: scale(.62); } 55% { opacity: .45; transform: scale(.72); } }
@keyframes twinklef { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: .25; } }
@media (prefers-reduced-motion: no-preference) {
  svg.mark:not(.dial) .stars circle { transform-box: fill-box; transform-origin: center; animation: twinkle calc(2.6s + var(--i) * .37s) ease-in-out infinite; animation-delay: calc(var(--i) * .53s); }
  .wx .night .i-star { animation: twinklef calc(2.4s + var(--i) * 1.3s) ease-in-out infinite; animation-delay: calc(.6s + var(--i) * .9s); }
  .hz-sky { animation: twinklef var(--tw, 3s) ease-in-out infinite; animation-delay: var(--td, 0s); }
  .hz-star { animation: twinklef calc(2.8s + var(--i, 0) * .4s) ease-in-out infinite; animation-delay: calc(3.6s + var(--i, 0) * .5s); }
}

/* ---------- radar: asset filter and the action leaderboard ---------- */
.radar-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; background: color-mix(in srgb, var(--bg) 70%, var(--panel)); }
.radar-filter button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 3px; font: 600 13px var(--sans); color: var(--ink-2); background: var(--panel); border: 1px solid var(--rule); }
.radar-filter button[aria-pressed="true"] { background: #111; color: var(--chip); border-color: #111; }
.radar-filter button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cells li[data-sym] { grid-template-columns: 22px 1fr; cursor: pointer; padding: 6px 8px; margin: 0 -8px; border-radius: 3px; transition: background .4s; }
.cells li[data-sym]:hover b { text-decoration: underline; text-decoration-color: var(--chip); }
.cells .rk { font: 800 18px/1.5 var(--cond); color: var(--ink-3); text-align: right; }
.cells li .up, .cells li .down { font: 700 16px var(--cond); margin-left: 4px; }
.cells .cl { margin-left: 8px; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; vertical-align: 2px; background: var(--bg); color: var(--ink-3); }
.cells .cl-crypto { background: color-mix(in srgb, #9854C6 16%, transparent); color: #7A3FA8; } .cells .cl-macro { background: color-mix(in srgb, #0A64D8 14%, transparent); color: var(--accent); }
.cells .xn { font: 700 13px var(--sans); color: var(--ink); text-decoration: none !important; }
.cells .ab { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: linear-gradient(90deg, #00E21B, #FDF802, #FD0000); width: var(--w); opacity: .7; }
.cells li.ping { animation: rowping 1.1s ease-out; }
@keyframes rowping { 0% { background: color-mix(in srgb, var(--chip) 26%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .cells li.ping { animation: none; } }

:root[data-theme="dark"] .radar-filter button[aria-pressed="true"] { background: var(--chip); color: #111; border-color: var(--chip); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .radar-filter button[aria-pressed="true"] { background: var(--chip); color: #111; border-color: var(--chip); } }

/* drawers hand off to Nimbus */
.drask { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; padding: 8px 14px; border: 1.5px solid #111; border-radius: 3px; background: #FFD400; color: #111; text-decoration: none; font-size: 14.5px; width: fit-content; max-width: 100%; }
.drask b { font: 800 14px var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.drask span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drask:hover { background: #FFE14D; }
.drask::after { content: "→"; font-weight: 700; }

/* ---------- live conditions (live.js) ---------- */
.nowline { border-top: 1.5px dashed var(--rule); padding-top: 12px; margin-top: 4px; }
.nl-h { margin: 0 0 8px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.nl-h b { color: var(--ink); }
.nl-dot { width: 8px; height: 8px; border-radius: 50%; background: #E8412E; box-shadow: 0 0 0 0 rgba(232,65,46,.6); animation: nlpulse 2s infinite; }
@keyframes nlpulse { 70% { box-shadow: 0 0 0 7px rgba(232,65,46,0); } 100% { box-shadow: 0 0 0 0 rgba(232,65,46,0); } }
@media (prefers-reduced-motion: reduce) { .nl-dot { animation: none; } }
.nl-assets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.nl-assets li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
.nl-k { font: 700 15px var(--cond); letter-spacing: .02em; }
.nl-assets b { font: 700 17px var(--cond); justify-self: start; }
.nl-assets small { grid-column: 1 / -1; color: var(--ink-3); font-size: 12.5px; }
.nl-assets .up, .daystrip .up { color: var(--good); } .nl-assets .down, .daystrip .down { color: var(--bad); }

.dayline { margin-top: 18px; padding: 14px 16px 10px; }
.dayline .kicker span { color: var(--ink-3); font-weight: 400; }
.daystrip { list-style: none; margin: 10px 0 0; padding: 0 0 6px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; }
.dl-i { flex: 1 0 128px; max-width: 200px; scroll-snap-align: start; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px 8px; border: 1.5px solid var(--rule); border-radius: 3px; background: var(--panel); }
.dl-i.done { opacity: .55; }
.dl-i.k-report { border-color: #111; }
.dl-t { font: 600 12px var(--mono); color: var(--ink-3); }
.dl-ic { width: 46px; } .dl-ic svg { width: 100%; height: auto; display: block; }
.dl-l { font: 700 14.5px/1.2 var(--cond); letter-spacing: .01em; }
.dl-out { font: normal 500 12px var(--mono); color: var(--ink-2, var(--ink)); }
.dl-now { flex: 0 0 auto; display: grid; place-items: center; }
.dl-now span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #E8412E; padding: 8px 3px; border-radius: 3px; }
.dl-closed { display: flex; align-items: center; gap: 14px; } .dl-closed svg { width: 56px; } .dl-closed div { display: grid; } .dl-closed span { color: var(--ink-3); }
@media (max-width: 600px) { .nl-assets { grid-template-columns: 1fr 1fr; } .dl-i { flex-basis: 112px; } }

/* calendar additions */
.agenda .hist { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.agenda .evout { font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: #111; color: #FFD400; padding: 1px 6px; border-radius: 4px; }
.agenda .evn { font-weight: 700; }

/* the desk's search */
.find { position: relative; display: block; width: 100%; max-width: 720px; margin-top: 10px; }
.findbar { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1.5px solid var(--ink); border-radius: 3px; padding: 6px 6px 6px 16px; }
.findbar:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip) 60%, transparent); }
.findic { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; }
.find .findbar input { flex: 1; min-width: 0; max-width: none; border: 0; outline: none; background: none; padding: 8px 0; font: 400 17px var(--sans); color: var(--ink); border-radius: 0; }
.find .findbar input:focus { outline: none; }
.findbar button { flex: none; border: 1.5px solid #111; background: var(--chip); color: #111; border-radius: 3px; font: 700 15.5px var(--sans); padding: 9px 18px; cursor: pointer; }
.findsugg { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow); padding: 6px; max-height: 420px; overflow-y: auto; }
.fs-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 3px; cursor: pointer; }
.fs-row.on, .fs-row:hover { background: color-mix(in srgb, var(--chip) 22%, transparent); }
.fs-kind { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fs-main b { display: block; font: 700 16px var(--sans); color: var(--ink); }
.fs-main small { display: block; color: var(--ink-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-move { text-align: right; font: 700 16px var(--sans); } .fs-move small { display: block; font: 400 12.5px var(--sans); color: var(--ink-3); }
.fs-row.k-ask { border-top: 1px solid var(--rule); border-radius: 3px; margin-top: 4px; }
.fs-row.k-ask .fs-kind { color: var(--ink); }
.findmsg { display: block; margin-top: 6px; color: var(--ink-3); font-size: 14px; }
@media (max-width: 600px) { .fs-row { grid-template-columns: 1fr auto; } .fs-kind { display: none; } .find .findbar input { font-size: 16px; } }

/* ---------- the Ask Nimbus cloud (askcloud.js): Jev's read of what the button would ask about ---------- */
.ask-cloud { display: inline-block; flex: none; width: 46px; line-height: 0; }
.ask-cloud .cl { width: 100%; height: auto; display: block; overflow: visible; }
.ask-cloud .body { fill: var(--panel); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; transition: fill .4s; }
.s-fair .ask-cloud .body { fill: color-mix(in srgb, #F2B300 18%, var(--panel)); }
.s-mixed .ask-cloud .body { fill: color-mix(in srgb, #9AA8BA 45%, var(--panel)); }
.s-stormy .ask-cloud .body { fill: color-mix(in srgb, #5B5FE0 45%, var(--panel)); }
.ask-cloud .sun { fill: #F2B300; opacity: 0; transition: opacity .4s, transform .6s; transform-origin: 72% 28%; }
.s-fair .ask-cloud .sun { opacity: 1; } .s-mixed .ask-cloud .sun { opacity: .6; transform: translate(-3px, 4px) scale(.85); }
.ask-cloud .bolt { fill: #FFD400; stroke: #111; stroke-width: 1; opacity: 0; transition: opacity .3s; }
.s-stormy .ask-cloud .bolt { opacity: 1; }
.ask-cloud .drop { stroke: #5B5FE0; stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
/* mixed is partly cloudy (the sun peeks out, no rain); only stormy rains */
.s-stormy .ask-cloud .drop { opacity: .9; }
.ask-loading .ask-cloud { animation: askpulse 1.2s ease-in-out infinite; }
@keyframes askpulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ask-loading .ask-cloud { animation: none; } }
.ask-say { flex: none; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.ask-say b { color: var(--ink); font-weight: 700; }
/* front page bar */
.askhome .askbar { gap: 10px; }
.askhome .ask-cloud { width: 44px; margin: -4px 0; }
/* drawer link: the Nimbus cloud, not the sign-up yellow */
.drask { background: var(--panel); color: var(--ink); border: 1.5px solid var(--ink); padding: 6px 16px 6px 8px; gap: 10px; }
.drask:hover { background: color-mix(in srgb, var(--chip) 18%, var(--panel)); }
.drask .ask-cloud { width: 38px; }
.drask-t { display: grid; line-height: 1.2; min-width: 0; }
.drask-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink-2); }
.drask .ask-say { font-size: 13px; }
.drask.s-fair { box-shadow: 0 0 0 3px color-mix(in srgb, #F2B300 40%, transparent); }
.drask.s-stormy { box-shadow: 0 0 0 3px color-mix(in srgb, #5B5FE0 40%, transparent); }
@media (max-width: 600px) { .askhome .ask-say, .drask .ask-say { display: none; } }
.drask .ask-say b { font: 700 13px var(--sans); letter-spacing: 0; text-transform: none; }

/* links to the reading layout (/read) */
.today-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.readlink { font: 600 15px var(--sans); color: var(--accent); text-decoration: none; }
.readlink:hover { text-decoration: underline; }
@media (max-width: 600px) { .readlink { font-size: 14px; } }

.top nav a[aria-current="page"] { color: var(--ink); box-shadow: 0 3px 0 var(--chip); }

/* dark mode: the instruments' black ink would vanish on the dark panel (the barometer keeps its light face) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .inst:not(.light-face) svg [stroke="#111"] { stroke: var(--ink); }
  :root:not([data-theme="light"]) .inst:not(.light-face) svg [fill="#111"] { fill: var(--ink); }
  :root:not([data-theme="light"]) .inst:not(.light-face) .thm { fill: var(--ink-2); }
  :root:not([data-theme="light"]) .inst svg rect[fill="#fff"] { fill: var(--panel); }
}
:root[data-theme="dark"] .inst:not(.light-face) svg [stroke="#111"] { stroke: var(--ink); }
:root[data-theme="dark"] .inst:not(.light-face) svg [fill="#111"] { fill: var(--ink); }
:root[data-theme="dark"] .inst:not(.light-face) .thm { fill: var(--ink-2); }
:root[data-theme="dark"] .inst svg rect[fill="#fff"] { fill: var(--panel); }
/* the desk's search runs the full width of the page, like the panels around it */
.desk-head .find { max-width: none; width: 100%; flex-basis: 100%; }
.findbar { border-width: 2px; box-shadow: var(--shadow); }
.findbar button { border-width: 2px; }
/* printed-chart look: every card that casts a hard shadow has a full ink outline, so it reads as one framed panel */
.panel, .keys li, .alert, .sfc, .zone, .scope, .inst, .drhist, .drtable-wrap, .rack, .drnews, .how li, .findsugg { border: 2px solid var(--ink); }
.seg input:checked + span, .mrange.on { box-shadow: 2px 2px 0 var(--ink); }
/* the radar and its leaderboard share one height: the scope stretches and centres its dial */
.radar-wrap { align-items: stretch; }
.radar-wrap .scope { display: flex; flex-direction: column; }
.radar-wrap .scope-stage { flex: 1; display: grid; place-items: center; }
@media (max-width: 980px) { .radar-wrap .scope-stage { flex: none; } }

/* ---------- the Nimbus bubble (bubble.js): a quick take where you click ---------- */
[data-nimbus] { cursor: pointer; }
.nbb { position: absolute; z-index: 60; width: min(340px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px 12px; font: 400 15px/1.45 var(--sans); }
.nbb::before { content: ""; position: absolute; top: -9px; left: calc(var(--tail, 50%) - 8px); width: 14px; height: 14px; background: var(--panel); border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg); }
.nbb.nbb-up::before { top: auto; bottom: -9px; transform: rotate(225deg); }
.nbb-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font: 700 20px/1 var(--sans); color: var(--ink-3); cursor: pointer; padding: 2px 4px; }
.nbb-top { display: flex; gap: 10px; align-items: center; padding-right: 18px; }
.nbb-top .ask-cloud { width: 48px; flex: none; }
.nbb-q { margin: 0; font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.nbb-head { margin: 2px 0 0; font: 800 20px/1.15 var(--cond); }
.nbb-body p { margin: 6px 0 0; }
.nbb-body b { font: 800 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.nbb-for { color: #8A6100; } .nbb-against { color: #3236A8; } .nbb-risk { color: var(--bad); }
.nbb-more { display: inline-block; margin-top: 10px; font: 800 14px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: #111; background: var(--chip);
  border: 2px solid #111; border-radius: 3px; padding: 5px 10px; text-decoration: none; box-shadow: 2px 2px 0 #111; }
.nbb-loading .ask-cloud .drop { opacity: .95; animation: nbbrain .75s linear infinite; } .nbb-loading .ask-cloud .drop.d2 { animation-delay: .25s; } .nbb-loading .ask-cloud .drop.d3 { animation-delay: .5s; }
.nbb-loading .ask-cloud .body { fill: color-mix(in srgb, #9AA8BA 45%, var(--panel)); }
@keyframes nbbrain { from { transform: translateY(-4px); opacity: 0; } 30% { opacity: .95; } to { transform: translateY(9px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nbb-loading .ask-cloud .drop { animation: none; } }
.nbb-offer { width: auto; padding: 0; }
.nbb-askit { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); font: 700 14.5px var(--sans); padding: 6px 12px 6px 6px; cursor: pointer; }
.nbb-askit .ask-cloud { width: 32px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nbb-for { color: #FFE24D; } :root:not([data-theme="light"]) .nbb-against { color: #B3B6FF; } }
:root[data-theme="dark"] .nbb-for { color: #FFE24D; } :root[data-theme="dark"] .nbb-against { color: #B3B6FF; }

/* logo tiles in search rows (logos.js): white square so every logo reads, ink outline like the rest of the chart */
.lgt { position: relative; flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; overflow: hidden; }
.lgt::before { content: attr(data-l); font: 600 9.5px/1 var(--mono); letter-spacing: -.02em; color: #111418; }
.lgt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.lgt-c img { padding: 2px; }
.fs-main.has-lg { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fs-main.has-lg > span:last-child { min-width: 0; }

/* the same tiles in the leaderboard (a column between the rank and the name) and in the bubble's subject line */
.cells li[data-sym]:has(> .lgt) { grid-template-columns: 22px 30px 1fr; }
.cells li > .lgt { margin-top: 2px; }
.lgt-x::before { font-size: 8.5px; }
.nbb-q:has(.lgt) { display: flex; align-items: center; gap: 7px; }
.nbb-q .lgt { width: 24px; height: 24px; }

/* drawer tables: the logo beside the ticker */
.tlg { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tlg .lgt { width: 26px; height: 26px; }
.drtable td:first-child { padding-left: 6px; }
.drtable td small { max-width: 150px; }
.tlg > span:last-child { min-width: 0; }
/* drawer: the Ask Nimbus line runs the full width like everything under it; the close button is a printed square */
.drask { width: 100%; box-sizing: border-box; }
.drask .ask-say { margin-left: auto; }
.drclose { border-radius: 3px; box-shadow: 2px 2px 0 var(--ink); }
.drtable td, .drtable th button { padding-left: 6px; padding-right: 6px; }
.drtable td.n { font-size: 12.5px; }

/* the cloud button: Nimbus's own cloud, printed, wearing its read of the subject; pressing it opens the bubble */
.drask.cloudask { display: flex; align-items: center; gap: 14px; width: auto; margin: 4px 0 14px; padding: 0; border: 0; background: none; box-shadow: none !important; }
.drask.cloudask::after { content: none; }
.cloudbtn { all: unset; position: relative; flex: none; width: 128px; cursor: pointer; line-height: 0; transition: transform .12s; }
.cloudbtn .ask-cloud { width: 100%; }
.cloudbtn .ask-cloud .cl { filter: drop-shadow(3px 3px 0 var(--ink)); transition: filter .12s; }
.cloudbtn .cb-l { position: absolute; left: 10%; right: 8%; top: 30%; bottom: 26%; display: grid; place-items: center; text-align: center;
  font: 800 15px/1 var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); pointer-events: none; }
.cloudbtn:hover { transform: translate(-1px, -1px); } .cloudbtn:hover .cl { filter: drop-shadow(4px 4px 0 var(--ink)); }
.cloudbtn:active { transform: translate(2px, 2px); } .cloudbtn:active .cl { filter: drop-shadow(1px 1px 0 var(--ink)); }
.cloudbtn:focus-visible .cl { filter: drop-shadow(3px 3px 0 var(--ink)) drop-shadow(0 0 0 #FFD400); outline: 3px solid var(--accent, #FFD400); outline-offset: 2px; }
.drask.cloudask .ask-say { margin-left: 0; font-size: 15px; color: var(--ink-2); white-space: normal; }
.drask.cloudask .ask-say b { font: 700 15px var(--sans); }
@media (max-width: 600px) { .drask.cloudask .ask-say { display: block; } .cloudbtn { width: 112px; } }
/* the bubble's questions: one per line, each a printed row you can press */
.nbb-fixed { position: fixed; }
.nbb-qs { margin-top: 10px; border-top: 2px solid var(--ink); padding-top: 6px; display: grid; }
.nbb-qk { margin: 2px 0 4px; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.nbb-qs a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-radius: 2px; color: var(--ink); text-decoration: none; font: 600 15px/1.3 var(--sans); border-bottom: 1px solid var(--rule); }
.nbb-qs a:last-child { border-bottom: 0; }
.nbb-qs a span { font-weight: 700; flex: none; }
.nbb-qs a:hover, .nbb-qs a:focus-visible { background: color-mix(in srgb, var(--chip) 24%, var(--panel)); outline: none; }
.nbb-qs a:first-of-type { font-weight: 700; }

/* the cloud button, second pass: the shadow sits on the cloud's own box (no clipped edge), the label is just "Ask",
   and pressing it leaves the cloud pressed while the take is open */
.cloudbtn { width: 104px; padding: 0 4px 4px 0; }
.cloudbtn .ask-cloud .cl { filter: none; }
.cloudbtn .ask-cloud { filter: drop-shadow(3px 3px 0 var(--ink)); transition: filter .12s; }
.cloudbtn:hover .ask-cloud { filter: drop-shadow(4px 4px 0 var(--ink)); }
.cloudbtn:hover .cl, .cloudbtn:active .cl { filter: none; }
.cloudbtn .cb-l { top: 26%; bottom: 26%; font-size: 17px; letter-spacing: .06em; }
.cloudbtn[aria-expanded="true"] { transform: translate(2px, 2px); }
.cloudbtn[aria-expanded="true"] .ask-cloud { filter: drop-shadow(1px 1px 0 var(--ink)); }
.drask.cloudask { margin-bottom: 10px; }
/* the take, in place: reasons, then the questions, inside the drawer's own column */
.drtake { margin: 0 0 16px; padding: 12px 14px 6px; background: var(--panel); border: 2px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow); }
.dt-wait { margin: 0 0 8px; color: var(--ink-3); font-size: 14px; }
.dt-why p { margin: 0 0 6px; font-size: 15px; } .dt-why b { display: inline-block; min-width: 72px; font: 800 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.dt-why { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); }
.dt-qs { display: grid; }
.dt-qs a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 4px; color: var(--ink); text-decoration: none; font: 600 15px/1.3 var(--sans); border-bottom: 1px solid var(--rule); }
.dt-qs a:last-child { border-bottom: 0; }
.dt-qs a span { font-weight: 700; flex: none; }
.dt-qs a:hover, .dt-qs a:focus-visible { background: color-mix(in srgb, var(--chip) 22%, var(--panel)); outline: none; }

/* the drawer's Nimbus line, third pass: no label on the cloud; the cloud and its verdict are one button ending in
   "Why?". The cloud plays its weather once when the read lands, lifts on hover, and stays pressed while open. */
.cloudrow { all: unset; display: inline-flex; align-items: center; gap: 14px; max-width: 100%; cursor: pointer; padding: 2px 8px 2px 0; border-radius: 3px; }
.cloudrow .ask-cloud { width: 82px; padding: 0 3px 3px 0; filter: drop-shadow(3px 3px 0 var(--ink)); transition: transform .12s, filter .12s; }
.cloudrow .cr-t { font: 400 15.5px/1.35 var(--sans); color: var(--ink-2); }
.cloudrow .ask-say { font-size: 15.5px; color: var(--ink-2); white-space: normal; }
.cloudrow .ask-say b { font: 700 15.5px var(--sans); color: var(--ink); }
.cr-why { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--chip); white-space: nowrap; }
.cr-why i { font-style: normal; font-size: 12px; transition: transform .2s; }
.cloudrow:hover .ask-cloud { transform: translate(-1px, -1px); filter: drop-shadow(4px 4px 0 var(--ink)); }
.cloudrow:hover .cr-why { background: color-mix(in srgb, var(--chip) 30%, transparent); }
.cloudrow[aria-expanded="true"] .ask-cloud { transform: translate(2px, 2px); filter: drop-shadow(1px 1px 0 var(--ink)); }
.cloudrow[aria-expanded="true"] .cr-why i { transform: rotate(180deg); }
.cloudrow:focus-visible { outline: 3px solid var(--accent, #FFD400); outline-offset: 3px; }
.drask.cloudask .cloudrow .ask-say { display: inline; }
/* the arrival, once: fair = the sun rises from behind the cloud; mixed = the cloud drifts in and settles; stormy = rain falls twice */
.arrive.s-fair .cloudrow .sun { animation: mw-sunpeek 1s cubic-bezier(.2,.8,.3,1) 1; }
@keyframes mw-sunpeek { from { transform: translate(-12px, 16px) scale(.55); opacity: 0; } }
.arrive.s-mixed .cloudrow .cl { animation: mw-settle .9s ease-out 1; }
@keyframes mw-settle { 0% { transform: translateX(-7px); } 60% { transform: translateX(2px); } }
.arrive.s-stormy .cloudrow .drop { animation: mw-rain .7s ease-in 2; }
.arrive.s-stormy .cloudrow .d2, .arrive.s-stormy .cloudrow .d4 { animation-delay: .18s; }
@keyframes mw-rain { from { transform: translateY(-7px); opacity: 0; } to { transform: translateY(3px); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .arrive .cloudrow .sun, .arrive .cloudrow .cl, .arrive .cloudrow .drop { animation: none; } .cloudrow .ask-cloud { transition: none; } }
/* in the dark the drawer's cloud stays a light cloud (a tint of a dark panel reads as mud), outlined in black */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cloudrow .body { fill: #E4E9EF; stroke: #0B0D10; }
  :root:not([data-theme="light"]) .s-fair .cloudrow .body { fill: #F6E9B8; }
  :root:not([data-theme="light"]) .s-mixed .cloudrow .body { fill: #BCC6D3; }
  :root:not([data-theme="light"]) .s-stormy .cloudrow .body { fill: #8C90E6; }
}
:root[data-theme="dark"] .cloudrow .body { fill: #E4E9EF; stroke: #0B0D10; }
:root[data-theme="dark"] .s-fair .cloudrow .body { fill: #F6E9B8; }
:root[data-theme="dark"] .s-mixed .cloudrow .body { fill: #BCC6D3; }
:root[data-theme="dark"] .s-stormy .cloudrow .body { fill: #8C90E6; }

/* the Nimbus logo wherever a cloud stands for Nimbus itself (the ask bars): a clean white printed cloud that never takes
   on the market's weather (the words beside it carry the reading); it squishes when you hover the bar */
.ask-cloud.nb-mark { padding: 0 3px 3px 0; filter: drop-shadow(3px 3px 0 var(--ink)); transform-origin: 50% 85%; }
.ask-cloud.nb-mark .body { fill: #FFFFFF !important; stroke: #0B0D10 !important; }
.ask-cloud.nb-mark .sun, .ask-cloud.nb-mark .bolt, .ask-cloud.nb-mark .drop { display: none !important; }
form:hover > .ask-cloud.nb-mark, form:focus-within > .ask-cloud.nb-mark { animation: nbm-squish .7s cubic-bezier(.3,1.7,.45,1) 1 both; }
@keyframes nbm-squish { 0% { transform: scale(1, 1); } 30% { transform: scale(1.09, .9); } 55% { transform: scale(.96, 1.06); } 75% { transform: scale(1.02, .98); } 100% { transform: scale(1, 1); } }
@media (prefers-reduced-motion: reduce) { form:hover > .ask-cloud.nb-mark, form:focus-within > .ask-cloud.nb-mark { animation: none; } }
/* the desk's opening: a plain title over the skyline (the pitch lives on the forecast page and the sign-up section) */
.intro { grid-template-columns: 1fr; padding: 26px 0 24px; gap: 8px; }
.intro h1 { font-size: clamp(36px, 4.4vw, 54px); }
.intro-copy p { font-size: 17px; max-width: 46em; margin-top: 8px; }
/* crypto seas: BTC and ETH as anchor zones, then the coins with the most money trading right now (live) */
.zone-active { grid-column: span 2; display: flex; flex-direction: column; }
.za-lede { margin: 6px 0 8px; font-size: 13.5px; color: var(--ink-3); }
.za-cols, .za-list li { display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) 92px 72px 70px; align-items: center; gap: 8px; }
.za-cols { grid-template-columns: 22px 28px minmax(0, 1fr) 92px 72px 70px; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 4px; border-bottom: 2px solid var(--ink); }
.za-cols span:nth-child(1) { grid-column: 4; text-align: right; } .za-cols span:nth-child(2) { grid-column: 5; text-align: right; } .za-cols span:nth-child(3) { grid-column: 6; text-align: right; }
.za-list { list-style: none; margin: 0; padding: 0; }
.za-list li { padding: 7px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.za-list li:last-child { border-bottom: 0; }
.za-list li:hover { background: color-mix(in srgb, var(--chip) 14%, transparent); }
.za-rk { font: 800 15px var(--cond); color: var(--ink-3); text-align: right; }
.za-list .lgt { width: 26px; height: 26px; }
.za-list b { font: 700 16px var(--cond); color: var(--ink); }
.za-px, .za-ch, .za-vol { font: 600 13px var(--mono); text-align: right; }
.za-vol { color: var(--ink-2); }
.za-list .za-off { display: block; color: var(--ink-3); font-size: 14px; cursor: default; }
@media (max-width: 900px) { .zone-active { grid-column: 1 / -1; } }
@media (max-width: 600px) { .za-cols, .za-list li { grid-template-columns: 20px 26px minmax(0, 1fr) 64px 58px; } .za-px, .za-cols span:nth-child(1) { display: none; } .za-cols span:nth-child(2) { grid-column: 4; } .za-cols span:nth-child(3) { grid-column: 5; } }
/* crowded boats, live: two columns (crowded longs, crowded shorts), six rows each with the 24-hour move */
.crowd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.crowdkey { grid-column: 1 / -1; }
.cc li { grid-template-columns: 28px 68px minmax(0, 1fr) 76px 58px; grid-template-rows: auto auto; column-gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.cc li:last-child { border-bottom: 0; }
.cc li:hover { background: color-mix(in srgb, var(--chip) 12%, transparent); }
.cc li .lgt { width: 28px; height: 28px; grid-row: span 2; }
.cc li .cv { font: 600 13px var(--mono); text-align: right; }
.cc li .cm { font: 600 13px var(--mono); text-align: right; }
.cc li small { grid-column: 2 / 6; }
.csq { font-style: normal; font-weight: 700; color: var(--bad); }
.ck-m { color: var(--ink-3); }
@media (max-width: 700px) { .crowd-grid { grid-template-columns: 1fr; } .cc li { grid-template-columns: 26px 50px minmax(0, 1fr) 70px 52px; } }
.bighead .masof { margin-left: 8px; font: 500 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
/* sector bars diverge from the index: beat it to the right, lag it to the left */
.sectable .sbar { position: relative; display: block; height: 12px; }
.sectable .sbar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1.5px solid var(--ink); }
.sectable .sbar i { position: absolute; top: 1px; height: 10px; width: var(--w); border-radius: 0 2px 2px 0; }
.sectable .sbar i.pos { left: 50%; }
.sectable .sbar i.neg { right: 50%; border-radius: 2px 0 0 2px; }
.winds-bars .sectable b { color: var(--ink); }
/* sector winds: one table, month bar, this week, the names moving it */
.sw-head { margin: 0 0 14px; font: 700 19px/1.3 var(--cond, inherit); color: var(--ink); }
.sectable.sw { gap: 0; }
.sectable.sw li { grid-template-columns: 120px minmax(120px, 1fr) 58px 196px minmax(250px, 1.3fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.sectable.sw li:last-child { border-bottom: 0; }
.sectable.sw li[data-sector] { cursor: pointer; }
.sectable.sw .sw-h { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 0; }
.sw-wk { font: 600 12.5px var(--mono); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; white-space: nowrap; }
.sw-wk.up { color: var(--good); } .sw-wk.down { color: var(--bad); }
.sw-turn { display: inline-block; font: 700 10px/1.4 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: #111418; background: #FFD400; border: 1.5px solid #111418; border-radius: 2px; padding: 1px 4px; }
.sw-m { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sw-s { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--mono); cursor: pointer; }
.sw-s .lgt { width: 24px; height: 24px; }
.sw-s em { font-style: normal; }
.sw-s em.up { color: var(--good); } .sw-s em.down { color: var(--bad); }
.sw-m small { color: var(--ink-3); font-size: 12px; }
@media (max-width: 900px) {
  .sectable.sw .sw-h { display: none; }
  .sectable.sw li { grid-template-columns: 1fr 64px; grid-template-areas: "n v" "b b" "w w" "m m"; row-gap: 6px; }
  .sectable.sw .sw-n { grid-area: n; font-weight: 600; } .sectable.sw b { grid-area: v; } .sectable.sw .sbar { grid-area: b; }
  .sectable.sw .sw-wk { grid-area: w; } .sectable.sw .sw-m { grid-area: m; }
}

/* the site header: one bar on every page (forecast, desk, Nimbus) */
.rd-wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.rd-top { position: sticky; top: 0; z-index: 45;   /* above the Nimbus question bar (25), so the account menu opens over it; below drawers (50) */ 
   background: var(--bg); border-bottom: 2px solid var(--ink); }
.rd-top-in { display: flex; align-items: center; gap: 18px; height: 62px; }
.rd-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 21px var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.rd-brand svg.mark { width: 40px; height: 40px; margin: 0; }
.rd-nav { display: flex; gap: 22px; margin-left: auto; }
.rd-nav a { color: var(--ink-2); text-decoration: none; font: 700 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; padding: 4px 0; }
.rd-nav a:hover { color: var(--ink); }
.rd-nav a[aria-current] { color: var(--ink); box-shadow: 0 3px 0 var(--chip); }
.rd-cta { background: var(--chip); color: #111; text-decoration: none; font: 800 15px var(--cond); letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 14px; border: 2px solid #111; border-radius: 3px; box-shadow: 3px 3px 0 #111; white-space: nowrap; }
.rd-cta:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #111; }
.rd-cta.big { font-size: 17px; padding: 13px 20px; }

@media (max-width: 640px) {
  .rd-wrap { padding: 0 16px; }
  .rd-brand span { font-size: 18px; } .rd-top .rd-cta { margin-left: auto; font-size: 13.5px; padding: 7px 10px; }
  /* phones: the three pages sit on their own row under the name, so they are always one tap away */
  .rd-top-in { flex-wrap: wrap; height: auto; padding-top: 8px; row-gap: 0; }
  .rd-nav { order: 3; flex: 1 0 100%; margin: 6px -16px 0; padding: 0 16px; gap: 0; border-top: 1.5px solid var(--rule); justify-content: space-between; }
  .rd-nav a { flex: 1; text-align: center; padding: 9px 0 8px; font-size: 13.5px; }
  .rd-nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--chip); }
  /* two rows, not three: the morning-forecast button left the header (every page carries its own sign-up), so the name,
     the account and the theme share one line and the pages sit under them */
  .rd-top .rd-cta { display: none; }
  .rd-top .rd-acct { margin-left: auto; }
  .rd-top-in:not(:has(.rd-acct)) > .themebtn { margin-left: auto; }   /* sign-in switched off: the theme button takes the right edge */
}

/* Nimbus's signature: the black live strip over its console, its answers and the forecast page's ask card */
/* three columns, the outer two always equal: the title sits dead centre however wide the live mark and the clock are */
.nb-scr-bar, .hx-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 18px; background: #111418; color: #F1F2F4;
  font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nb-scr-bar > :first-child, .hx-bar > :first-child { justify-self: start; }
.nb-scr-bar > :last-child, .hx-bar > :last-child { grid-column: 3; justify-self: end; text-align: right; }
.nb-scr-bar > b, .hx-bar > b { text-align: center; }
.nb-scr-bar b, .hx-bar b { font-weight: 600; }
.nb-live { display: inline-flex; align-items: center; gap: 7px; color: #FFD400; }
.nb-live i { width: 8px; height: 8px; border-radius: 50%; background: #E8412E; animation: nlpulse 2s infinite; }

/* "Show me": the reader's lens (lens.js), a printed switch on the forecast page and the desk */
.lens-row { position: relative; display: inline-flex; align-items: center; }
.lens-btn { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 10px 5px 11px; border: 2px solid var(--ink); border-radius: 3px; background: var(--panel); box-shadow: 2px 2px 0 var(--ink); }
.lens-btn:hover { background: color-mix(in srgb, var(--chip) 22%, var(--panel)); }
.lens-btn:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 2px; }
.lens-k { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lens-cur { font: 800 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.lens-btn i { font-style: normal; font-size: 11px; color: var(--ink-2); transition: transform .18s ease; }
.lens-row.open .lens-btn i { transform: rotate(180deg); }
.lens-box { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 290px; max-width: calc(100vw - 32px); display: grid; padding: 6px; background: var(--panel); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); transform-origin: top left; }
.lens-box[hidden] { display: none; }
.lens-box button { all: unset; cursor: pointer; display: grid; gap: 1px; padding: 8px 10px 8px 26px; border-radius: 2px; position: relative; }
.lens-box button b { font: 800 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.lens-box button span { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.lens-box button::before { content: ""; position: absolute; left: 8px; top: 12px; width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--panel); }
.lens-box button.on::before { background: var(--chip); box-shadow: inset 0 0 0 2px var(--panel); }
.lens-box button:hover, .lens-box button:focus-visible { background: color-mix(in srgb, var(--chip) 22%, transparent); outline: none; }
@media (prefers-reduced-motion: no-preference) { .lens-row.open .lens-box { animation: lensopen .16s ease-out both; } }
@keyframes lensopen { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* the desk's header is the same bar, as wide as the desk's content; its crawl sits under it, not inside it */
.rd-top .rd-wrap { max-width: 1200px; }   /* one frame on every page: the logo and menu never move between pages */
/* small phones: the name stays on one line beside a compact button */
@media (max-width: 420px) {
  .rd-top-in { gap: 10px; }
  .rd-brand { gap: 7px; } .rd-brand svg.mark { width: 32px; height: 32px; }
  .rd-brand span { font-size: 16px; white-space: nowrap; }
  .rd-top .rd-cta { font-size: 12px; padding: 6px 8px; letter-spacing: .04em; }
}

/* the reader's account in the header (account.js): "Sign in" in words, or a round initial; details live in its menu */
.rd-acct { position: relative; display: flex; align-items: center; }
.rd-acct-in { color: var(--ink-2); text-decoration: none; font: 700 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; padding: 4px 0; white-space: nowrap; }
.rd-acct-in:hover { color: var(--ink); box-shadow: 0 3px 0 var(--chip); }
.rd-acct-btn { all: unset; cursor: pointer; box-sizing: border-box; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%;
  background: var(--si-sky); color: var(--ink); font: 800 16px/1 var(--cond); }
.rd-acct-btn:hover, .rd-acct-btn[aria-expanded="true"] { background: var(--chip); color: #111418; }
.rd-acct-in:focus-visible, .rd-acct-btn:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 3px; }
.rd-acct-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 264px; max-width: calc(100vw - 32px); display: grid; gap: 2px; padding: 12px;
  background: var(--panel); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); }
.rd-acct-menu[hidden] { display: none; }
.rd-acct-who { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 0 2px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.rd-acct-who b { display: block; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; line-height: 1.3; }
.rd-acct-who small { display: block; font: 500 12px var(--mono); color: var(--ink-3); margin-top: 2px; }
.rd-acct-av { width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--si-sky); font: 800 17px/1 var(--cond); color: var(--ink); }
.rd-acct-bal { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 2px 8px; font-size: 14px; color: var(--ink-2); }
.rd-acct-bal b { font: 600 15px var(--mono); color: var(--ink); }
.rd-acct-menu a, .rd-acct-menu button { all: unset; cursor: pointer; display: block; padding: 7px 6px; border-radius: 2px; font-size: 14px; color: var(--ink); }
.rd-acct-menu a:hover, .rd-acct-menu button:hover { background: color-mix(in srgb, var(--chip) 25%, transparent); }
.rd-acct-menu a.rd-acct-top { margin: 0 0 6px; text-align: center; font: 800 14px var(--cond); letter-spacing: .06em; text-transform: uppercase; padding: 8px; border: 2px solid var(--ink); background: var(--chip); color: #111418; box-shadow: 2px 2px 0 var(--ink); }
.rd-acct-menu a.rd-acct-top:hover { background: var(--chip); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.rd-acct-menu form { margin: 4px 0 0; border-top: 1px solid var(--rule); padding-top: 4px; }
.rd-acct-menu a:focus-visible, .rd-acct-menu button:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: -2px; }

/* the sign-in sheet (account.js): drawn exactly like the sign-in page's card, so the hand-over is seamless */
:root { --si-paper: #F6F8FA; --si-sheet: #FFFFFF; --si-sky: #DCEBFA; --si-sky2: #B9D6F5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --si-paper: #14171C; --si-sheet: #1C2026; --si-sky: #1B2A3D; --si-sky2: #24384F; } }
:root[data-theme="dark"] { --si-paper: #14171C; --si-sheet: #1C2026; --si-sky: #1B2A3D; --si-sky2: #24384F; }
.si-sheet { position: fixed; inset: 0; z-index: 100; background: var(--si-paper); opacity: 0; transition: opacity .16s ease; overflow: auto; }
.si-sheet.in { opacity: 1; }
.si-mw { max-width: 440px; margin: 0 auto; padding: clamp(20px, 6vh, 56px) 16px 40px; display: grid; gap: 14px; }
.si-top { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.si-brand { display: flex; align-items: center; gap: 9px; font: 800 19px var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.si-brand svg { color: var(--ink); overflow: visible; }
.si-card { border: 2px solid var(--ink); border-radius: 3px; background: var(--si-sheet); box-shadow: 4px 4px 0 var(--ink); overflow: hidden; transform: translateY(14px); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.si-sheet.in .si-card { transform: none; }
.si-sky { aspect-ratio: 300 / 84; background: var(--si-sky); border-bottom: 2px solid var(--ink); }
.si-sky svg { display: block; width: 100%; height: 100%; }
.si-b { padding: 18px 18px 22px; display: grid; gap: 12px; }
.si-b h2 { margin: 0; font: 800 34px/1.02 var(--cond); color: var(--ink); }
.si-b p { margin: -4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.si-wait { font: 500 13px var(--mono); color: var(--ink-3); }
.si-sheet .rays path { animation: sithink 1s linear infinite; animation-delay: calc(var(--i) * 100ms); }
@keyframes sithink { 0%, 100% { opacity: .18; } 10% { opacity: 1; } 60% { opacity: .18; } }
.si-wait i { font-style: normal; animation: siwait 1s infinite; } .si-wait i:nth-child(2) { animation-delay: .2s; } .si-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes siwait { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.si-toast { position: fixed; top: 76px; left: 50%; z-index: 90; transform: translate(-50%, -8px); opacity: 0; transition: opacity .2s ease, transform .2s ease;
  padding: 9px 14px; background: var(--panel); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 3px 3px 0 var(--ink); font: 600 14px var(--sans); white-space: nowrap; }
.si-toast.in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .si-sheet, .si-card, .si-toast { transition: none; } .si-wait i, .si-sheet .rays path { animation: none; } }

/* "Tune your forecast": a closed printed card that opens the builder in place */
.build-toggle { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 18px; cursor: pointer; padding: 18px 22px; margin-bottom: 18px;
  background: var(--panel); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); }
.build-toggle > span { flex: 1; display: grid; gap: 4px; min-width: 0; }
.build-toggle h2 { margin: 0; font: 700 34px/1.05 var(--cond); } @media (max-width: 640px) { .build-toggle h2 { font-size: 28px; } }
.build-toggle small { color: var(--ink-2); font-size: 15px; }
.build-open { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #FFD400; color: #111; border: 2px solid var(--ink); border-radius: 3px; font: 700 15px var(--sans); white-space: nowrap; }
.build-open i { font-style: normal; font-size: 11px; transition: transform .2s; }
.build-toggle[aria-expanded="true"] .build-open i { transform: rotate(180deg); }
.build-toggle[aria-expanded="true"] { box-shadow: 1px 1px 0 var(--ink); transform: translate(3px, 3px); }
.build-toggle .bo-open, .build-toggle[aria-expanded="true"] .bo-closed { display: none; } .build-toggle[aria-expanded="true"] .bo-open { display: inline; }
.build-toggle:hover .build-open { background: #FFE14D; }
.build-toggle:focus-visible { outline: 3px solid #FFD400; outline-offset: 3px; }
#buildform[hidden] { display: none !important; }
@media (max-width: 640px) { .build-toggle { flex-wrap: wrap; padding: 16px; } .build-open { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .build-open i { transition: none; } }

/* the builder's phone: the report as it arrives (builder.js drawDigest). Telegram: the card as the link preview,
   then the message with tap-to-open sections and three buttons. Email: the card as the header, then rows with Open links. */
.msg.dg { padding: 0; font: 400 13.5px/1.45 var(--sans); white-space: normal; }
.dg-card { display: block; } .dg-card img { display: block; width: 100%; height: auto; border-bottom: 1.5px solid var(--rule); }
.dg-tg { background: var(--panel); }
.dg-tg > :not(.dg-card):not(.dg-kb) { margin-left: 12px; margin-right: 12px; }
.dg-date { margin-top: 10px; font-weight: 700; }
.dg-sky { display: grid; gap: 1px; margin: 8px 0 0; } .dg-sky b { font: 800 17px/1.15 var(--cond); } .dg-sky span { color: var(--ink-3); font-size: 12.5px; }
.dg-p { margin: 8px 0 0; } .dg-p i { color: var(--ink-3); font-style: normal; font-weight: 600; }
.dg-q { margin-top: 8px; padding: 6px 9px; border-left: 3px solid #2A7FD4; background: color-mix(in srgb, var(--panel) 85%, #2A7FD4 15%); border-radius: 3px; }
.dg-q summary { cursor: pointer; list-style: none; } .dg-q summary::-webkit-details-marker { display: none; }
.dg-q summary::after { content: " ▾"; color: var(--ink-3); font-size: 10px; } .dg-q[open] summary::after { content: " ▴"; }
.dg-q span { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 3px; }
.dg-q a, .dg-rows em { color: #2A7FD4; font-weight: 600; text-decoration: none; font-style: normal; }
.dg-q a { display: inline-block; margin-top: 4px; font-size: 12.5px; }
.dg-names { display: grid; margin-top: 10px; border-top: 1.5px solid var(--ink); }
.dg-names a { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.dg-names b { font: 800 15px var(--cond); } .dg-names em { font: 600 12.5px var(--mono); font-style: normal; } .dg-names small { display: block; color: var(--ink-3); font-size: 12px; }
.dg-names .up { color: #1E7A46; } .dg-names .dn { color: #C2410C; }
.dg-next { font-size: 13px; }
.dg-fine { margin: 10px 0 0; color: var(--ink-3); font-size: 11.5px; }
.dg-kb { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 10px 8px 10px; }
.dg-kb a { text-align: center; padding: 7px 4px; border-radius: 7px; background: color-mix(in srgb, var(--panel) 80%, #2A7FD4 20%); color: var(--ink); font: 600 12.5px var(--sans); text-decoration: none; }
.dg-kb a.w { grid-column: 1 / -1; }
.dg-mailbody { padding: 10px 12px 12px; }
.dg-mail .dg-sky { background: color-mix(in srgb, var(--chip) 22%, var(--panel)); border: 1.5px solid var(--ink); border-radius: 3px; padding: 8px 10px; margin: 0; }
.dg-rows { margin-top: 10px; border-top: 1.5px solid var(--ink); }
.dg-rows a { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 600; }
.dg-rows small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }
.dg-k { font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dg-rows em { font-size: 12px; }
.dg-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.dg-btns a { padding: 6px 10px; border: 1.5px solid var(--ink); border-radius: 3px; color: var(--ink); font: 800 12.5px var(--cond); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.dg-btns a.b1 { background: #FFD400; color: #111; }

/* What traders are saying (traders.js): a chip that opens a bubble. Green leans long, red leans short. */
.tchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 2px solid var(--ink); border-radius: 3px; background: var(--panel); color: var(--ink); font: 500 15px var(--sans); white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); text-transform: none; letter-spacing: normal; }
.tchip b { font-weight: 700; }
.tchip i { width: 10px; height: 10px; border-radius: 50%; background: #22A05E; flex: none; } .tchip i.s { background: #E5484D; }
.tchip:hover, .tchip[aria-expanded="true"] { background: color-mix(in srgb, var(--chip) 25%, var(--panel)); }
.tchip:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 2px; }
.tbub { position: absolute; z-index: 60; display: grid; gap: 8px; padding: 12px 14px; background: var(--panel); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); }
.tb-h { margin: 0; font: 800 16px var(--cond); letter-spacing: .03em; text-transform: uppercase; }
.tb-bar { display: flex; height: 10px; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden; } .tb-bar i { display: block; } .tb-bar .l { background: #22A05E; } .tb-bar .s { background: #E5484D; }
.tb-k { display: flex; justify-content: space-between; gap: 8px; margin: 0; font: 600 12px var(--mono); color: var(--ink-3); }
.tb-k .l { color: #22A05E; } .tb-k .s { color: #E5484D; }
.tb-k span:nth-child(2) { font: 500 12px var(--sans); text-align: center; }
.tb-take { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.tb-d { font: 600 10.5px var(--mono); padding: 1px 5px; border-radius: 2px; color: #fff; align-self: start; margin-top: 2px; } .tb-d.l { background: #1E7A46; } .tb-d.s { background: #B4232A; }
.tb-take p { margin: 0; font-size: 13.5px; line-height: 1.4; } .tb-take small { grid-column: 2; color: var(--ink-3); font-size: 12px; } .tb-take small a { color: inherit; }
.tb-fine { margin: 0; color: var(--ink-3); font-size: 11.5px; }
.wr-traders { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.wr-traders:empty { display: none; }
.wr-trk { font: 600 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.wr-trc { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-trc { margin-left: auto; display: inline-flex; } .bn-trc:empty { display: none; }   /* the traders chip in the full view's bar, before Close */
.tb-take small a.tb-post { color: var(--ink); font-weight: 600; text-decoration: none; } .tb-take small a.tb-post:hover { text-decoration: underline; }
.tc-shift { font-style: normal; font-size: 11px; margin-left: 2px; } .tc-shift.l { color: #22A05E; } .tc-shift.s { color: #E5484D; }
.tb-lw { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.tb-ask { justify-self: start; color: var(--ink); font: 700 13px var(--sans); text-decoration: none; border-bottom: 2px solid var(--chip, #FFD400); }

/* the builder's section step: a note under the tiles, and a nudge when a seventh is tried */
#b-modnote { margin-top: 8px; } #b-modnote.flash { animation: modflash .6s ease 2; }
@keyframes modflash { 50% { color: var(--ink); background: color-mix(in srgb, var(--chip) 35%, transparent); } }
.tiles .tile.full { opacity: .45; }
.dg-fy { margin-top: 10px; padding-top: 8px; border-top: 1.5px solid var(--ink); }
.dg-fy .dg-k { display: block; margin-bottom: 4px; } .dg-fy p { margin: 4px 0 0; font-size: 13px; } .dg-fy b { font: 800 14px var(--cond); margin-right: 4px; }
.dg-tg .dg-fy { margin-left: 12px; margin-right: 12px; }
.dg-pend { margin: 10px 12px 0; font-size: 12.5px; color: var(--ink-3); font-style: italic; }
@media (prefers-reduced-motion: reduce) { #b-modnote.flash { animation: none; } }
.dg-next { margin-top: 12px !important; padding-top: 8px; border-top: 1px solid var(--rule); }

/* ---------- the month (month.js): an almanac inside "Coming up". Trading days only; square corners, ink lines ---------- */
.mo-switch { margin-top: 10px; display: inline-flex; }
.mo-switch button { all: unset; cursor: pointer; padding: 5px 12px; font: 700 13px var(--cond); letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid var(--ink); color: var(--ink); }
.mo-switch button + button { border-left: 0; }
.mo-switch button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.mo-switch button:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 2px; }
.month[hidden] { display: none; }
.mo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mo-head h3 { margin: 0; font: 800 30px/1 var(--cond); text-transform: uppercase; min-width: 9ch; }
.mo-nav { all: unset; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--ink); font: 700 18px var(--sans); color: var(--ink); }
.mo-nav[disabled] { opacity: .3; cursor: default; }
.mo-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.mo-legend > span { display: inline-flex; align-items: center; gap: 5px; } .mo-legend svg { width: 22px; height: 18px; }
.mo-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.mo-cal { min-width: 0; border: 2px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--ink); }
.mo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mo-dow { padding: 7px 9px; font: 700 13px var(--cond); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.mo-day { all: unset; box-sizing: border-box; cursor: pointer; min-height: 116px; padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.mo-grid > :nth-child(5n) { border-right: 0; }
.mo-day:hover { background: color-mix(in srgb, var(--ink) 4%, var(--panel)); }
.mo-day:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: -3px; }
.mo-day.past { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.mo-day.today { box-shadow: inset 0 0 0 3px var(--ink); background: color-mix(in srgb, var(--chip) 18%, var(--panel)); }
.mo-day.sel { box-shadow: inset 0 0 0 3px var(--accent, #1E6FD9); }
.mo-blank { min-height: 116px; background: color-mix(in srgb, var(--ink) 3%, var(--panel)); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mo-dn { display: flex; justify-content: space-between; align-items: flex-start; font: 800 20px/1 var(--cond); }
.mo-dn em { font: 600 10.5px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.mo-ic svg { width: 30px; height: 24px; display: block; }
.mo-ev { display: block; font: 600 12.5px/1.25 var(--sans); overflow-wrap: anywhere; }
.mo-ev .t { font: 500 11px var(--mono); color: var(--ink-3); white-space: nowrap; margin-left: 4px; }
.mo-ev.big::before { content: "★ "; color: var(--storm, #5B5FE0); }
.mo-minor { font: 500 11px var(--mono); color: var(--ink-3); }
.mo-earn { font: 600 11px var(--mono); color: var(--ink-2); } .mo-earn b { color: var(--ink); text-decoration: underline 1.5px; text-underline-offset: 2px; }
.mo-obs { margin-top: auto; font: 600 12.5px var(--mono); } .mo-obs.up, .mo-sub .up { color: #1E7A46; } .mo-obs.dn, .mo-sub .dn { color: #C2410C; }
.mo-note { margin: 0; padding: 9px 12px; border-top: 2px solid var(--ink); font-size: 12.5px; color: var(--ink-3); }
.mo-panel { position: sticky; top: 120px; display: grid; gap: 10px; padding: 14px 16px; border: 2px solid var(--ink); background: var(--panel); box-shadow: 4px 4px 0 var(--ink); min-width: 0; }
.mo-k { margin: 0; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mo-panel h3 { margin: 0; font: 800 26px/1.05 var(--cond); }
.mo-sub { margin: 0; color: var(--ink-2); font-size: 14px; }
.mo-pev { display: grid; gap: 3px; padding-top: 9px; border-top: 1px solid var(--rule); }
.mo-pev > b { font: 700 15px var(--sans); } .mo-pev .t { font: 500 12px var(--mono); color: var(--ink-3); }
.mo-pev p { margin: 0; font-size: 13.5px; color: var(--ink-2); } .mo-pev p b { color: var(--ink); }
.mo-h { color: var(--ink) !important; }
.mo-ask { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; background: var(--panel); }
.mo-ask-k { grid-column: 1 / -1; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: -4px; }
.mo-ask svg { width: 26px; height: 18px; } .mo-ask > span:not(.mo-ask-k) { font: 500 14px/1.35 var(--sans); }
.mo-ask > b { display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--panel); font: 700 15px var(--sans); }
.mo-ask:hover { background: color-mix(in srgb, var(--ink) 5%, var(--panel)); }
@media (max-width: 900px) { .mo-body { grid-template-columns: 1fr; } .mo-panel { position: static; } .mo-legend { margin-left: 0; } }
@media (max-width: 640px) {
  .mo-day, .mo-blank { min-height: 84px; padding: 5px; }
  .mo-ev .w, .mo-ev .t, .mo-minor, .mo-earn { display: none; } .mo-ev::after { content: attr(data-s); font-size: 12px; }
  .mo-ic svg { width: 22px; height: 18px; } .mo-obs { font-size: 11px; }
}
.dg-made { margin: 4px 12px 0; font: 500 11px var(--mono); color: var(--ink-3); }
.msg.dg.updating > :not(.dg-card) { opacity: .55; transition: opacity .15s; }

/* step 4, How often: the alert toggles, square, ink-outlined; and the alerts under the phone's report */
.whenrow, .alertsrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.achips { display: flex; flex-wrap: wrap; gap: 6px; }
/* the When toggle fills its row and wraps its labels: at max-content its two equal columns ("Morning + after the close")
   were wider than a phone, and the steps share one column, so every step leaked right with it (seen in Telegram) */
.rack > .step { min-width: 0; }
.whenrow .seg { flex: 1 1 240px; width: auto; max-width: 100%; }
.whenrow .seg label { display: grid; }
.whenrow .seg span { display: grid; place-items: center; text-align: center; white-space: normal; }
.achip { all: unset; cursor: pointer; padding: 5px 10px; border: 1.5px solid var(--ink); font: 600 13px var(--sans); color: var(--ink); background: var(--panel); }
.achip.on { background: var(--ink); color: var(--panel); }
.achip:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 2px; }
.alertprev:empty { display: none; }
.alertprev { display: grid; gap: 6px; padding: 10px 12px 12px; border-top: 1.5px solid var(--rule); }
.alertprev .ap { display: grid; gap: 2px; padding: 7px 9px; background: var(--panel); border: 1px solid var(--rule); font-size: 12.5px; }
.alertprev .ap b { font-weight: 700; color: var(--ink); } .alertprev .ap span { color: var(--ink-2); } .alertprev .ap small { color: var(--ink-3); font-size: 11px; }

.plannote { color: var(--ink) !important; font-weight: 600; }

/* each plan is a kind of weather (worker/report.js PLANS): a printed sky stamp with its icon */
.sky-rainbow { --sky: #D9ECFA; } .sky-aurora { --sky: #17213A; } .sky-twister { --sky: #D5DDC8; }
.sky-aurora .wx path[fill="#2B3A4A"] { fill: #0A0F1C; }
.station { grid-template-rows: auto auto auto 1fr auto; padding-top: 0; overflow: hidden; }
.st-sky { position: relative; display: grid; place-items: center; height: 72px; margin: 0 -14px 4px; background: var(--sky); border-bottom: 1.5px solid var(--ink); overflow: hidden; }
.st-sky .wx { height: 100%; width: auto; display: block; }
.st-sky.sky-aurora .wx { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-wx { position: absolute; z-index: 1; left: 6px; bottom: 6px; font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 5px; border: 1.5px solid var(--ink); background: var(--panel, #fff); color: var(--ink); }
@media (max-width: 760px) { .station { grid-template-areas: "s s" "f f" "n c" "t c"; grid-template-rows: auto auto auto auto; } .st-sky { grid-area: s; height: 60px; } }


/* inside Telegram (tg.js): Telegram's frame has the title and the back button; the sign-up button and the footers step aside */
html.tg .rd-cta, html.tg footer, html.tg .rd-foot, html.tg .cv-foot, html.tg .foot { display: none !important; }
html.tg body { overscroll-behavior: none; }
.rd-acct-menu .rd-acct-out { margin-top: 4px; border-top: 1px solid var(--rule); border-radius: 0; padding-top: 9px; width: 100%; box-sizing: border-box; }

/* the second marine zone follows the coin picked in "Most active today" */
.za-list li[data-coin] { cursor: pointer; }
.za-list li[data-coin]:hover { background: color-mix(in srgb, var(--chip) 18%, transparent); }
.za-list li[data-coin].on { background: color-mix(in srgb, var(--chip) 35%, transparent); box-shadow: inset 3px 0 0 var(--ink); }
.za-list li[data-coin]:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: -3px; }
.zone-focus.zone-loading { opacity: .55; transition: opacity .2s; }
.zone-back { all: unset; cursor: pointer; margin-top: 8px; font: 700 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--chip); align-self: flex-start; }

/* ---------- narrow panels: phones and Telegram's mini-app (320–430px) ---------- */
/* the traders chip in an instrument's "In full" bar wraps instead of pushing the page sideways */
.bn-fullbar .bn-trc { min-width: 0; max-width: 100%; }
.bn-fullbar .bn-trc .tchip { white-space: normal; max-width: 100%; box-sizing: border-box; }
/* colour keys: the ramp gives way so "Weak ▬ Strong" stays on one line */
.lgramp { flex: 1 1 60px; max-width: 220px; min-width: 48px; width: auto; }
/* event times never break between the hour and "ET" */
.agenda .at { white-space: nowrap; }
.agenda .evout { white-space: nowrap; }
/* heating up, tight: a wider name column that hyphenates long single words, flatter cells */
.hgrid .hc { border-radius: 2px; }
.hview.tight .hgrid { table-layout: fixed; border-spacing: 2px; font-size: 12px; }
.hview.tight .hgrid th:first-child, .hview.tight .hgrid td.hname { width: 39%; }
.hview.tight .hgrid .hname { white-space: normal; hyphens: auto; font-size: 11.5px; line-height: 1.2; padding-right: 4px; }
.hview.tight .hgrid .hc { font-size: 11px; padding: 6px 0; min-width: 0; letter-spacing: -.02em; }
.hview.tight .hgrid th { font-size: 10px; padding: 2px 0; letter-spacing: .04em; white-space: nowrap; }
.hview.tight .hgrid th:last-child, .hview.tight .hgrid td.hv { display: none; }
@media (max-width: 760px) {
  /* crypto zones: cards snap to the page gutter (not the screen edge) and keep their own height */
  .zones { scroll-padding-inline: 16px; align-items: flex-start; }
  /* crowded boats: the value stays on one line; the bar takes what is left */
  .cc li { grid-template-columns: 26px 50px minmax(0, 1fr) auto 50px; }
  .cc li .cv { white-space: nowrap; font-size: 12px; }
  /* shorts: "paid to short" repeats the heading above; the bar gets its room back */
  /* same five columns as the longs (the label's slot is empty), so the 24-hour figures line up down both lists */
  .cc-shorts li { grid-template-columns: 26px 50px minmax(0, 1fr) 0 50px; }
  .cc-shorts li .cv { visibility: hidden; overflow: hidden; width: 0; }
}
/* "Replay race" sits under the two-by-two heatmap tabs on phones, at the start of its own row */
@media (max-width: 760px) {
  .htabs .raceplay { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  /* every play/replay button (race, yield curve, surface loop) is the same compact black button on phones */
  .loopbtn { min-width: 0; min-height: 36px; padding: 6px 14px; font-size: 13px; }
  /* the inverted-curve key starts its own line flush left, not indented by its desktop gap */
  .spreadk .invkey { display: block; margin-left: 0; margin-top: 2px; }
}
.nw { white-space: nowrap; }   /* keeps a figure with its unit, e.g. "8.0× a normal day · Tuesday" */
/* Coming up, on phones: the event name is its own line and the time starts the next one, flush with the text under it
   (a wrapped time kept its 6px indent and sat out of line) */
@media (max-width: 760px) {
  .agenda .ev > a, .agenda .ev > .evn { display: block; }
  .agenda .ev .at { margin-left: 0; display: inline-block; margin-top: 3px; }
}
/* month cells: the label and the move stack the same way in every cell ("S&P" over "+0.7%"), on phones */
.mo-obs i { font-style: normal; }
@media (max-width: 760px) { .mo-obs i { display: block; } }
/* Sector winds on phones: name, bar and figure on one line, so the bars line up down the list; the weekly line says
   "this week" (its column header is hidden on phones, and without it "ahead" read as contradicting the headline) */
.sw-wkl { display: none; }
@media (max-width: 760px) {
  .sw-wkl { display: inline; }
  .sectable.sw li { grid-template-columns: minmax(0, 1fr) minmax(90px, 1.1fr) 58px; grid-template-areas: "n b v" "w w w" "m m m"; align-items: center; row-gap: 6px; }
}
/* Currents heading on phones: the date under the title (side by side, the title wrapped into a cramped block) */
@media (max-width: 760px) {
  .cur-head { flex-direction: column; align-items: flex-start; gap: 3px; }
  .cur-head .kicker { margin-bottom: 0; line-height: 1.4; }
  .cur-head .stamp { margin-bottom: 10px; }
}

/* languages (i18n.js): a globe beside the theme button opens the five languages, each in its own script */
.rd-top-in { position: relative; }
.langbtn { height: 38px; min-width: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px 0 8px; border: 2px solid var(--ink); border-radius: 3px;
  background: var(--panel); color: var(--ink); font: 700 14px/1 var(--cond); letter-spacing: .04em; cursor: pointer; }
.langbtn:hover, .langbtn[aria-expanded="true"] { background: var(--chip); color: #111; border-color: #111; }
.langbtn { gap: 4px; padding: 0 7px 0 6px; }
.langbtn .lcaret { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .12s; }
.langbtn[aria-expanded="true"] .lcaret { transform: rotate(180deg); }
.lbadge { flex: none; display: block; }
.langbtn:focus-visible, .langmenu button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.langmenu { position: absolute; top: calc(100% + 6px); right: 20px; z-index: 60; width: 236px; padding: 8px; background: var(--panel); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); display: grid; gap: 2px; }
.langmenu[hidden] { display: none; }
.langmenu-h { font: 700 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 4px 8px 6px; margin: 0; }
.langmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 2px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 600 16px var(--sans); }
.langmenu button small { font: 500 12.5px var(--sans); color: var(--ink-3); margin-left: auto; }
.langmenu button:hover { background: var(--bg); }
.langmenu button[aria-checked="true"] { background: var(--chip); color: #111; }
.langmenu button[aria-checked="true"] small { color: #3B3B3B; }
.langmenu button[aria-checked="true"]::after { content: "✓"; font-weight: 800; }
.langmenu button[aria-checked="true"]:not(:has(small))::after { margin-left: auto; }
.langmenu button[aria-checked="true"] small { margin-left: auto; }
.langmenu-note { margin: 6px 4px 2px; padding-top: 8px; border-top: 1.5px dashed var(--rule); font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.lang-note { margin: 0; padding: 9px max(20px, calc((100% - 940px) / 2)); font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; background: var(--panel); border-bottom: 1.5px dashed var(--rule); }
.lang-note a { color: var(--ink); font-weight: 700; }
.rd-disc { max-width: 720px; }
@media (max-width: 640px) {
  .rd-top-in { column-gap: 10px; }
  .langmenu { right: 12px; }
  .rd-top .rd-acct + .langbtn, .rd-top-in:not(:has(.rd-acct)) > .langbtn { margin-left: auto; }
  .rd-top-in:not(:has(.rd-acct)) > .themebtn { margin-left: 0; }
}
/* Korean, Japanese and Chinese: their own faces behind the site's (the Latin faces have no such letters), no
   uppercase spacing, and Korean breaks between words rather than inside them */
.lang-ko { --cjk: "Noto Sans KR"; } .lang-ja { --cjk: "Noto Sans JP"; } .lang-zh { --cjk: "Noto Sans SC"; }
.lang-cjk { --sans: "Public Sans", var(--cjk), system-ui, sans-serif; --cond: "Barlow Condensed", var(--cjk), sans-serif; --mono: "IBM Plex Mono", var(--cjk), monospace; }
.lang-cjk body { line-height: 1.65; }
.lang-ko body { word-break: keep-all; overflow-wrap: anywhere; }
.lang-ja body, .lang-zh body { line-break: strict; }
.lang-cjk .wr-k, .lang-cjk .wr-cond, .lang-cjk .wc-q, .lang-cjk .wc-opt b, .lang-cjk .rd-nav a, .lang-cjk .wc-last p b, .lang-cjk .wc-foot p b, .lang-cjk .wc-get p b { letter-spacing: 0; font-weight: 800; }
.lang-cjk .wc-q { font-size: 24px; line-height: 1.3; }
.lang-cjk .wc-opt b { font-size: 20px; }
.lang-es .wc-opt b { font-size: 19px; }
/* the header's right end, in order: account, language, theme, the sign-up button (account.js adds its menu late) */
.rd-top-in > .langbtn { order: 1; } .rd-top-in > .themebtn { order: 2; } .rd-top-in > .rd-cta { order: 3; }
@media (max-width: 640px) { .rd-top-in > .rd-nav { order: 9; } }
.wc-share em { white-space: nowrap; flex: none; }
.lang-cjk .wr-k, .lang-cjk .wc-clock, .lang-cjk .langmenu-h { font-family: var(--sans); letter-spacing: .02em; }
/* small phones: one header row whatever the language. "Log in" becomes a round person button (its words stay for
   screen readers), the language and theme buttons match its size, and page names never wrap (a long one takes more
   of the row) */
@media (max-width: 420px) {
  .rd-top-in { column-gap: 8px; }
  .rd-brand { gap: 7px; } .rd-brand svg.mark { width: 34px; height: 34px; } .rd-brand span { font-size: 16.5px; }
  .rd-acct-in { font-size: 0; width: 34px; height: 34px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%; padding: 0;
    background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111418' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20c1.3-3.6 4-5.3 7-5.3s5.7 1.7 7 5.3'/%3E%3C/svg%3E") center/18px no-repeat; }
  .rd-acct-in:hover { box-shadow: none; background-color: var(--chip); }
  .langbtn { height: 34px; padding: 0 5px; } .langbtn .lbadge { width: 20px; height: 20px; }
  .rd-top .themebtn { width: 34px; height: 34px; }
  .rd-nav a { flex: 1 1 auto; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
  .lang-cjk .rd-nav a, .lang-es .rd-nav a { font-size: 12.5px; letter-spacing: .02em; }
}
@media (max-width: 420px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-acct-in { filter: invert(1) hue-rotate(180deg); background-color: #E8E6E1; } }
@media (max-width: 420px) { :root[data-theme="dark"] .rd-acct-in { filter: invert(1) hue-rotate(180deg); background-color: #E8E6E1; } }
@media (max-width: 360px) { .langbtn { width: 34px; padding: 0; } .langbtn .lcaret { display: none; } .rd-brand span { font-size: 15.5px; letter-spacing: .03em; } }
@media (max-width: 640px) { .rd-nav { overflow-x: auto; scrollbar-width: none; } .rd-nav::-webkit-scrollbar { display: none; } }   /* a long translation scrolls rather than clips */
/* Inside Telegram nothing is sold: no pay or billing buttons (plans are bought on the website), only what each plan has */
html.tg [data-plan], html.tg #billing { display: none !important; }
html.tg #plans-note, html.tg #plans-out-note { font-size: 0; }
html.tg #plans-note::after, html.tg #plans-out-note::after { content: "Plans are bought on the website, not in Telegram."; font-size: 13.5px; }

/* Notes and news (the Desk): the forecast as the lead with its facts, then official news by day, a bolt per release */
.nn-lead { display: flex; align-items: center; gap: 12px; }
.nn-ic { width: 52px; flex: none; } .nn-ic svg { width: 100%; height: auto; display: block; }
.nn-lead p { display: grid; } .nn-lead span { font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.nn-lead b { font: 800 30px/1 var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.nn-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.nn-facts li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15.5px; line-height: 1.45; color: var(--ink); max-width: 62ch; }
.nn-k { margin-top: 16px; font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.nn-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nn-dh { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.nn-dh b { font: 700 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.nn-bolts { display: inline-flex; gap: 1px; } .nn-bolts svg { width: 11px; height: 19px; display: block; }
.nn-day ul { list-style: none; margin: 0; padding: 0; }
.nn-day ul li { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.nn-day ul li:last-child { border-bottom: 0; }
.nn-day a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.nn-day a:hover { text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.nn-day a span { color: var(--ink-3); font-weight: 400; }
.nn-src { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }