/* Nimbus: the prompt bar alone, then the panel it builds. Uses the site's tokens from styles.css. */
.nimbus-page { --pos: #1E9E62; --neg: #D9483B; --neu: #9AA6B5; min-height: 100vh; }
:root[data-theme="dark"] .nimbus-page { --pos: #3FC883; --neg: #FF7466; --neu: #7E8896; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nimbus-page { --pos: #3FC883; --neg: #FF7466; --neu: #7E8896; } }
.t-pos { --t: var(--pos); } .t-neg { --t: var(--neg); } .t-neu { --t: var(--neu); } .t-none { --t: var(--ink-3); }
.up { color: var(--pos); } .dn { color: var(--neg); }

/* ---------- the top bar: corners when empty; once asked, home · the prompt bar · theme, at the panel's width ---------- */
.nb-top { position: fixed; inset: 0 0 auto 0; z-index: 30; transition: background .3s, box-shadow .3s; }
.nb-top-in { width: min(1240px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 64px; }
.nb-home { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); text-decoration: none; }
.nb-home:hover { color: var(--ink); }
.nb-home-word { font: 800 16px var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.nb-home-mark { display: none; } .nb-home-mark svg.mark { width: 36px; height: 36px; margin: 0; color: var(--ink); overflow: visible; }
body:not(.asked) .nb-home-word::before { content: "← "; }
body.asked .nb-top { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule); }
body.asked .nb-top-in { min-height: 76px; }
body.asked .nb-home-mark { display: block; }

/* ---------- the empty stage: the mark and a centred bar, nothing else ---------- */
.nb { width: min(1240px, 100% - 32px); margin: 0 auto; }
.nb-stage { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 26px; }
body.asked .nb-stage { display: none; }
.nb-mark svg.mark { width: 132px; height: 132px; margin: 0; color: var(--ink); overflow: visible; }
.nb-bar { display: flex; align-items: center; gap: 8px; width: min(760px, calc(100vw - 32px)); max-width: none; margin: 0; padding: 8px 8px 8px 24px; border-radius: 999px;
  background: var(--panel); border: 1.5px solid var(--rule); box-shadow: 0 2px 4px rgba(11,27,48,.05), 0 18px 48px rgba(11,27,48,.10); transition: border-color .15s, box-shadow .15s; }
.nb-bar:focus-within { border-color: var(--ink); box-shadow: 0 0 0 5px rgba(255,212,0,.35), 0 18px 48px rgba(11,27,48,.12); }
.nb-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 500 21px var(--sans); padding: 14px 0; }
.nb-bar input::placeholder { color: var(--ink-3); }
.nb-bar button { all: unset; cursor: pointer; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: #111; transition: transform .15s; }
.nb-bar button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-bar button:hover { transform: scale(1.06); } .nb-bar button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .nb-bar button:disabled { opacity: .6; cursor: wait; }
/* in the top bar: full width of the panel, slimmer */
.nb-slot .nb-bar { width: 100%; padding: 5px 5px 5px 20px; box-shadow: 0 1px 2px rgba(11,27,48,.05); }
.nb-slot .nb-bar input { font-size: 17px; padding: 10px 0; }
.nb-slot .nb-bar button { width: 44px; height: 44px; }
.nb-slot .nb-bar button svg { width: 19px; height: 19px; }
@media (prefers-reduced-motion: no-preference) {
  body.thinking .nb-mark .rays path, body.thinking .nb-home-mark .rays path,
  body.thinking .nb-mark .stars circle, body.thinking .nb-home-mark .stars circle { animation: nbthink 1s linear infinite; animation-delay: calc(var(--i) * 100ms); }
}
@keyframes nbthink { 0%, 100% { opacity: .18; } 10% { opacity: 1; } 60% { opacity: .18; } }

/* the steps: one quiet row of ticks under the bar */
body.asked .nb { padding-top: 92px; }
.nb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 13.5px var(--sans); color: var(--ink-3); }
.nb-steps:empty { display: none; }
.nb-steps li { display: inline-flex; gap: 7px; align-items: center; opacity: 0; transition: opacity .3s; }
.nb-steps li.in { opacity: 1; }
.nb-steps li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--ink); animation: spin .8s linear infinite; flex: none; }
.nb-steps li.done::before { border: 0; width: 8px; height: 8px; background: var(--pos); animation: none; }
.nb-steps li.done { color: var(--ink-2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the panel ---------- */
.nb-canvas { margin: 22px 0 60px; }
.cv-note { margin: 0 0 14px; padding: 10px 16px; border-radius: 12px; background: var(--stale-bg); color: var(--stale-ink); font-size: 14.5px; }
.cv-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.hero-a, .hero-b, .view, .cv-trace { background: var(--panel); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow); }
.hero-a { position: relative; overflow: hidden; padding: 26px 28px 24px; }
.hero-a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--t); opacity: .9; }
.hero-a.t-pos { background: linear-gradient(170deg, color-mix(in srgb, var(--pos) 9%, var(--panel)), var(--panel) 55%); }
.hero-a.t-neg { background: linear-gradient(170deg, color-mix(in srgb, var(--neg) 9%, var(--panel)), var(--panel) 55%); }
.q { margin: 0; font: 500 16px var(--sans); color: var(--ink-3); }
.hero-v { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.hero-ic svg { width: 108px; height: 92px; display: block; }
.hk { margin: 0; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hw { margin: 4px 0 0; font: 800 clamp(44px, 6vw, 72px)/.92 var(--cond); color: var(--t); }
.hero-a.t-neu .hw { color: var(--ink); }
.hp { margin: 6px 0 0; font: 600 16px var(--sans); color: var(--ink-2); }
.os { display: flex; gap: 3px; height: 7px; margin-top: 10px; }
.os i { width: var(--w); min-width: 3px; border-radius: 4px; background: var(--t); opacity: .35; }
.os i.on { opacity: 1; }
.hero-a > .os { height: 12px; margin-top: 18px; }
.os-k { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font: 500 13.5px var(--sans); color: var(--ink-3); }
.os-k span.on { color: var(--ink); font-weight: 600; }
.os-k i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--t); }
.hs { margin: 18px 0 0; font: 500 18px/1.5 var(--sans); color: var(--ink); max-width: 640px; text-wrap: pretty; }
.hero-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 18px; }
.hero-b { padding: 24px 24px 20px; display: grid; gap: 18px; align-content: start; }
.subj h2 { margin: 0; font: 800 44px/1 var(--cond); }
.subj p { margin: 4px 0 0; color: var(--ink-3); }
.stale { display: inline-block; margin-top: 10px; font: 600 12.5px var(--sans); background: var(--stale-bg); color: var(--stale-ink); padding: 4px 10px; border-radius: 999px; }
.tiles { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiles div { padding: 12px 14px; border-radius: 12px; background: var(--bg); min-width: 0; }
.tiles dt { font: 500 13px var(--sans); color: var(--ink-3); }
.tiles dd { margin: 4px 0 0; font: 800 26px/1.05 var(--cond); overflow-wrap: anywhere; }
.moods { display: grid; gap: 14px; }
.mt-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mt-h b { font: 700 18px var(--cond); } .mt-h span { font-size: 13px; color: var(--ink-3); }
.mt-t { position: relative; height: 10px; margin-top: 8px; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--neg) 20%, transparent), color-mix(in srgb, var(--neu) 22%, transparent) 50%, color-mix(in srgb, var(--pos) 20%, transparent)); }
.mt-t::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink-3); opacity: .4; }
.mt-t i { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 5px; } .mt-t i.pos { background: var(--pos); } .mt-t i.neg { background: var(--neg); }
.mt-t em { position: absolute; top: 50%; left: var(--x); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--panel); border: 3px solid var(--ink); }
.mt.off .mt-t { opacity: .4; }
.mt-e { display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: var(--ink-3); }

/* readings: one chip per judgment */
.rd { padding: 11px 13px 12px; border-radius: 12px; background: var(--bg); min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: baseline; }
.rd-l { grid-column: 1 / -1; font: 500 12.5px var(--sans); color: var(--ink-3); }
.rd b { font: 800 21px/1.1 var(--cond); color: var(--t); margin-top: 3px; }
.rd.t-neu b { color: var(--ink); }
.rd-p { font: 600 13px var(--sans); color: var(--ink-2); }
.rd .os { grid-column: 1 / -1; height: 5px; margin-top: 8px; }
.rd.off b { color: var(--ink-3); font: 600 14px var(--sans); }

.cv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; margin-top: 16px; }
.view { padding: 20px 22px 18px; min-width: 0; display: flex; flex-direction: column; }
.s-xl { grid-column: span 12; } .s-md { grid-column: span 6; }
.view header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.view h3 { margin: 0; font: 800 23px/1.1 var(--cond); }
.rel { font: 600 12px var(--sans); padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--ink-3); }
.rel.r-essential { background: var(--chip); color: #111; }
.vb { margin-top: 14px; min-width: 0; }
.rds { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 16px; }
.blurb { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-3); margin-top: auto; }
.rds + .blurb, .vb + .blurb { margin-top: 16px; }
.quiet { margin: 0; color: var(--ink-3); }
.metric { margin: 0 0 8px; font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.leg { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.leg span { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--ink); margin-left: 6px; } .leg .k-ln { margin-left: 0; }
.leg .k-avg { border-top: 2px dashed var(--accent); } .leg .k-ref { border-top: 2px dashed var(--ink-3); margin-left: 0; }

/* charts */
svg.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch .g { stroke: var(--rule); stroke-width: 1; }
.ch .ax { font: 500 11.5px var(--sans); fill: var(--ink-3); }
.ch .ax.last { font: 700 13px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.ch .ax.lbl { font-weight: 600; } .ch .ax.lbl.hot { fill: var(--neg); } .ch .ax.lbl.cold { fill: #3D7BE0; }
.ch .ax.tip { font: 700 12.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 5px; }
.ch .ln { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ch .area { fill: var(--accent); opacity: .08; }
.ch .avg { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; }
.ch .ref { stroke: var(--ink-3); stroke-dasharray: 4 4; } .ch .ref.hi { stroke: var(--pos); opacity: .7; }
.ch .dot { fill: var(--chip); stroke: var(--ink); stroke-width: 2.5; }
.ch .band.hot { fill: var(--neg); opacity: .06; } .ch .band.cold { fill: #3D7BE0; opacity: .06; }
.ch .hv line { stroke: var(--ink-3); stroke-dasharray: 3 3; } .ch .hv circle { fill: var(--ink); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 420px; overflow-y: auto; }
.bars li { display: grid; grid-template-columns: minmax(64px, 120px) 1fr 62px; gap: 10px; align-items: center; font-size: 14px; padding: 2px 6px; border-radius: 8px; }
.bars li.me { background: color-mix(in srgb, var(--chip) 30%, transparent); font-weight: 700; }
.bk { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bt { position: relative; height: 12px; }
.bars.pct .bt::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-3); opacity: .5; }
.bt i { position: absolute; top: 0; bottom: 0; border-radius: 4px; width: var(--w); }
.bars.pct .bt i.up { left: 50%; background: var(--pos); } .bars.pct .bt i.dn { right: 50%; background: var(--neg); }
.bars.score .bt { background: var(--bg); border-radius: 4px; } .bars.score .bt i { left: 0; background: linear-gradient(90deg, #3D7BE0, #E5BC00 55%, var(--neg)); }
.bars b { text-align: right; font: 700 14px var(--sans); }
.vol { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.vt { position: relative; height: 10px; border-radius: 5px; background: var(--bg); }
.vt i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: var(--ink); opacity: .75; }
.vt em { position: absolute; top: -4px; bottom: -4px; left: var(--x); width: 2px; background: var(--chip); }
.sm { display: grid; gap: 14px; }
.sm-row { min-width: 0; }
.sm-h { display: flex; align-items: baseline; gap: 10px; }
.sm-h b { font: 700 15px var(--sans); flex: 1; } .sm-h span { font: 800 20px var(--cond); } .sm-h em { font: 600 13px var(--sans); font-style: normal; }
.nl, .cl { list-style: none; margin: 0; padding: 0; }
.nl li { display: grid; grid-template-columns: 96px 1fr 120px; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); }
.nl li:first-child { border-top: 0; padding-top: 0; }
.nl .os { margin: 0; }
.nl + .rd { margin-top: 12px; }
.sent { justify-self: start; padding: 4px 10px; border-radius: 999px; font: 700 12.5px var(--sans); color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent); white-space: nowrap; }
.sent.t-none { background: none; border: 1px dashed var(--rule); }
.nt { display: grid; gap: 3px; font-size: 15.5px; line-height: 1.35; min-width: 0; }
.nt a { color: var(--ink); text-decoration: none; } .nt a:hover { text-decoration: underline; }
.nt small { color: var(--ink-3); font-size: 13px; }
.cl li { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); }
.cl li:first-child { border-top: 0; padding-top: 0; }
.cw { font: 700 14px var(--sans); }
.rec-s { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.rec-s div { padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.rec-s b { display: block; font: 800 28px var(--cond); } .rec-s span { font-size: 13px; color: var(--ink-3); }

.cv-trace { margin-top: 16px; padding: 18px 24px; }
.cv-trace summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; }
.cv-trace summary::-webkit-details-marker { display: none; }
.cv-trace summary span { font: 800 22px var(--cond); } .cv-trace summary em { font-style: normal; color: var(--ink-3); font-size: 14px; }
.cv-trace summary::after { content: "+"; margin-left: auto; font: 600 22px var(--sans); }
.cv-trace[open] summary::after { content: "–"; }
.cv-trace > p { color: var(--ink-2); max-width: 780px; }
.cv-trace h4 { margin: 18px 0 6px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cv-trace ol { list-style: none; margin: 0; padding: 0; }
.cv-trace li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.cv-trace li b { color: var(--t); } .cv-trace li b.t-neu { color: var(--ink); }
.cv-trace li em { font: 600 11px var(--sans); font-style: normal; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.rr { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.rr code { font: 500 12px var(--sans); background: var(--bg); border-radius: 6px; padding: 3px 8px; color: var(--ink-2); }
.cv-foot { margin: 26px 0 0; text-align: center; color: var(--ink-3); font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .nb-canvas .rv { opacity: 0; transform: translateY(14px) scale(.99); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
  .nb-canvas.on .rv { opacity: 1; transform: none; }
  .bars li { animation: barin .5s both; animation-delay: var(--d); } .bt i { transform-origin: left; }
}
@keyframes barin { from { opacity: 0; transform: translateX(-6px); } }

@media (max-width: 980px) { .cv-hero { grid-template-columns: 1fr; } .s-lg, .s-md, .s-sm, .cv-grid .s-md + .s-md { grid-column: span 12; } }
@media (max-width: 600px) {
  .nb-stage { gap: 20px; } .nb-mark svg.mark { width: 96px; height: 96px; }
  .nb-bar { padding: 6px 6px 6px 18px; } .nb-bar input { font-size: 17px; } .nb-bar button { width: 48px; height: 48px; }
  body.asked .nb-home-word { display: none; } body.asked .nb-top-in { gap: 10px; min-height: 68px; } body.asked .nb { padding-top: 80px; }
  .nb-slot .nb-bar { padding-left: 14px; } .nb-slot .nb-bar input { font-size: 16px; } .nb-home-mark svg.mark { width: 30px; height: 30px; }
  .hero-a { padding: 20px 18px; } .hero-ic svg { width: 76px; height: 64px; } .hero-v { gap: 12px; } .subj h2 { font-size: 36px; } .hs { font-size: 16.5px; }
  .hero-b, .view { padding: 18px 16px 16px; } .tiles dd { font-size: 22px; }
  .nl li { grid-template-columns: 1fr; gap: 6px; } .cl li { grid-template-columns: 70px 1fr; } .cl li .sent { grid-column: 1 / -1; }
  .cv-trace { padding: 16px; } .cv-trace li { grid-template-columns: 1fr auto; } .rr { grid-column: 1 / -1; justify-content: flex-start; }
}
/* two-column flow between full-width views (built by pack() in nimbus.js) */
.cv-grid.packed { display: flex; flex-direction: column; gap: 16px; }
.cv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cv-cols > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.view .blurb { margin-top: 16px; }
.hero-a.is-answer .hw { color: var(--ink); }
.hs.writing { position: relative; } .hs.writing::after { content: "Nimbus is writing…"; display: block; margin-top: 8px; font: 500 13px var(--sans); color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) { .hs.written { animation: hsin .6s ease both; } }
@keyframes hsin { from { opacity: 0; transform: translateY(4px); } }
.hs-by { margin: 6px 0 0; font: 500 12.5px var(--sans); color: var(--ink-3); }

/* ---------- the bar's controls: shortcut hint, clear, suggestions ---------- */
.nb-bar { position: relative; }
.nb-key { flex: none; font: 600 12px var(--mono); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 6px; padding: 2px 7px; margin-right: 4px; }
.nb-clear { all: unset; cursor: pointer; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.nb-clear svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.nb-clear:hover, .nb-clear:focus-visible { background: var(--bg); color: var(--ink); }
.nb-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 18px 48px rgba(11,27,48,.18); padding: 6px; max-height: 60vh; overflow-y: auto; }
.sg { display: grid; grid-template-columns: 92px 1fr; column-gap: 12px; align-items: baseline; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.sg.on, .sg:hover { background: var(--bg); }
.sk-k { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sk-q { font: 500 15.5px var(--sans); color: var(--ink); }
.sk-s { grid-column: 2; font-size: 13px; color: var(--ink-3); }
/* a stock or coin row carries its logo in its own column, beside both lines */
.sg.lg { grid-template-columns: 92px 30px 1fr; }
.sg.lg .lgt { grid-row: span 2; align-self: center; }
.sg.lg .sk-s { grid-column: 3; }

/* ---------- loading, errors ---------- */
.skel { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 16px; }
.sk { height: 220px; border-radius: 20px; background: linear-gradient(100deg, var(--panel) 30%, var(--bg) 50%, var(--panel) 70%); background-size: 300% 100%; border: 1px solid var(--rule); animation: shimmer 1.4s ease-in-out infinite; }
.sk.hero { height: 380px; } .sk.side { height: 380px; } .sk.wide { grid-column: 1 / -1; height: 300px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.nb-steps li.err { color: var(--neg); } .nb-steps li.err::before { border: 0; width: 8px; height: 8px; background: var(--neg); animation: none; }
.retry { all: unset; cursor: pointer; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--panel); font: 600 12.5px var(--sans); }

/* ---------- hero: question line, copy link, odds columns, dial ---------- */
.hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.share { all: unset; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--sans); color: var(--ink-2); padding: 4px 2px; }
.share:hover, .share:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fu button[hidden] { display: none; }
.oc { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; align-items: end; height: 120px; margin-top: 18px; }
.oc > div { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 4px; }
.oc b { font: 700 13px var(--sans); color: var(--ink-3); }
.oc i { align-self: end; height: var(--h); min-height: 3px; border-radius: 8px 8px 3px 3px; background: var(--t); opacity: .3; }
.oc span { font: 500 12.5px/1.2 var(--sans); color: var(--ink-3); }
.oc .on b, .oc .on span { color: var(--ink); font-weight: 700; } .oc .on i { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .nb-canvas.on .oc i { animation: grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .25s; } }
@keyframes grow { from { height: 0; } }
.subj-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dial-w { text-align: center; } .dial-w p { margin: 0; font-size: 13px; color: var(--ink-3); } .dial-w b { color: var(--t); } .dial-w b.t-neu { color: var(--ink); }
.dial-g { width: 170px; height: auto; display: block; overflow: visible; }
.dial-g path { fill: none; stroke: var(--t); stroke-width: 14; opacity: .85; }
.dial-g line { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; } .dial-g circle { fill: var(--ink); }
.dial-g text { font: 500 10.5px var(--sans); fill: var(--ink-3); }

/* ---------- follow-ups and section nav ---------- */
.fu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.fu span { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.fu button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--rule); font: 500 14px var(--sans); color: var(--ink); }
.fu button:hover, .fu button:focus-visible { border-color: var(--ink); background: color-mix(in srgb, var(--chip) 18%, var(--panel)); }
.fu.fu-bottom { justify-content: center; margin-top: 26px; }
.cv-nav { position: sticky; top: var(--dockb, 76px);   /* just under the sticky question bar, measured in nimbus.js */ z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 16px -4px 0; padding: 8px 4px; background: color-mix(in srgb, var(--bg) 97%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cv-nav::-webkit-scrollbar { display: none; }
.cv-nav a { flex: none; padding: 6px 12px; border-radius: 999px; font: 600 13px var(--sans); color: var(--ink-2); text-decoration: none; border: 1px solid transparent; }
.cv-nav a:hover { border-color: var(--rule); } .cv-nav a.on { background: var(--ink); color: var(--panel); }
.view, .cv-trace { scroll-margin-top: 140px; }

/* ---------- signal balance ---------- */
.bal-sum { font-size: 14px; color: var(--ink-3); } .bal-sum b { font-weight: 700; }
.bal-axis { display: grid; grid-template-columns: minmax(150px, 1.1fr) 2fr minmax(140px, 1fr); margin: 14px 0 4px; font: 500 12px var(--sans); color: var(--ink-3); }
.bal-axis span:nth-child(1) { grid-column: 2; justify-self: start; } .bal-axis span:nth-child(2) { grid-column: 2; justify-self: center; grid-row: 1; } .bal-axis span:nth-child(3) { grid-column: 2; justify-self: end; grid-row: 1; }
.bal { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bal li { display: grid; grid-template-columns: minmax(150px, 1.1fr) 2fr minmax(140px, 1fr); gap: 14px; align-items: center; padding: 4px 0; font-size: 14px; }
.bal .bl { color: var(--ink-2); }
.bal .bt { position: relative; height: 12px; border-radius: 6px; background: var(--bg); }
.bal .bt::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink-3); opacity: .45; }
.bal .bt i { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 6px; }
.bal .bt i.up { background: var(--pos); } .bal .bt i.dn { background: var(--neg); }
.bal .bs { font: 700 14px var(--sans); color: var(--t); } .bal .bs.t-neu { color: var(--ink); } .bal .bs em { font-style: normal; font-weight: 500; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) { .nb-canvas.on .bal li { animation: barin .5s both; animation-delay: var(--d); } }

/* ---------- gauges under tiles ---------- */
.gg { display: block; position: relative; height: 6px; margin-top: 10px; border-radius: 3px; background: var(--rule); }
.gg.meter i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--pos); }
.gg.meter.bad i { background: linear-gradient(90deg, var(--pos), #E5BC00 60%, var(--neg)); }
.gg.meter em { position: absolute; top: -3px; bottom: -3px; left: var(--x); width: 2px; background: var(--ink); }
.gg.div::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink-3); opacity: .5; }
.gg.div i { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 3px; } .gg.div i.up { background: var(--pos); } .gg.div i.dn { background: var(--neg); }
.gg.pips { display: flex; gap: 4px; background: none; height: 8px; } .gg.pips i { flex: 1; border-radius: 3px; background: var(--rule); }
.gg.pips i.on { background: color-mix(in srgb, var(--pos), var(--neg) calc(var(--k) * 100%)); }

/* ---------- peers map ---------- */
.vtabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); margin-bottom: 10px; }
.vtabs button { all: unset; cursor: pointer; padding: 5px 13px; border-radius: 999px; font: 600 12.5px var(--sans); color: var(--ink-3); }
.vtabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.pmap .q.hot { fill: var(--pos); opacity: .05; } .pmap .q.cold { fill: var(--neg); opacity: .05; }
.pmap .zero { stroke: var(--ink-3); stroke-width: 1; opacity: .5; }
.pmap circle { fill-opacity: .35; stroke-width: 1.5; } .pmap circle.up { fill: var(--pos); stroke: var(--pos); } .pmap circle.dn { fill: var(--neg); stroke: var(--neg); }
.pmap .pt.me circle { fill: var(--chip); fill-opacity: 1; stroke: var(--ink); stroke-width: 2.5; }
.pmap .pt.me text { font-weight: 800; fill: var(--ink); }
.pmap .pl { font: 700 11.5px var(--sans); fill: var(--ink-2); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.pmap .qlbl { font: 600 11px var(--sans); fill: var(--ink-3); opacity: .8; }

/* ---------- the week ---------- */
.wk { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk li { display: grid; justify-items: center; gap: 2px; padding: 8px 0 10px; border-radius: 12px; background: var(--bg); font-size: 12px; color: var(--ink-3); }
.wk li b { font: 800 18px var(--cond); color: var(--ink-2); }
.wk li.has { background: color-mix(in srgb, var(--chip) 22%, var(--bg)); } .wk li.has b { color: var(--ink); }
.wk li i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); } .wk li i.big { background: var(--neg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 25%, transparent); } .wk li i.small { background: var(--pos); }

@media (max-width: 600px) {
  .nb-key { display: none; }
  .sg { grid-template-columns: 1fr; } .sk-s { grid-column: 1; }
  .sg.lg { grid-template-columns: 30px 1fr; } .sg.lg .sk-k { grid-column: 2; } .sg.lg .lgt { grid-row: 1 / span 3; grid-column: 1; } .sg.lg .sk-q, .sg.lg .sk-s { grid-column: 2; }
  .skel { grid-template-columns: 1fr; } .sk.side { height: 220px; }
  .oc { height: 104px; gap: 4px; } .oc span { font-size: 11px; }
  .dial-g { width: 140px; }
  .cv-nav { top: var(--dockb, 68px); }
  .bal-axis, .bal li { grid-template-columns: 1fr; gap: 4px; } .bal-axis span { grid-column: 1 !important; } .bal li { padding: 6px 0; border-top: 1px solid var(--rule); }
  .wk li b { font-size: 15px; }
}
.nb-bar .nb-clear { width: 34px; height: 34px; background: none; color: var(--ink-3); }
.nb-bar .nb-clear:hover, .nb-bar .nb-clear:focus-visible { background: var(--bg); color: var(--ink); transform: none; }
.bal-axis span { grid-row: 1; }

/* =====================================================================================================
   Nimbus v3: a forecast, not a dashboard. Judgments speak weather (sun = good, storm = bad, haze = neither),
   price moves keep their own colour-blind-safe pair, red is only for warnings, and nothing that carries data is grey.
   ===================================================================================================== */
.nimbus-page {
  --fair: #F2B300; --fair-t: #8A6100; --fair2: #FFD94D; --haze: #8FD0C4; --haze-t: #1F7A6C; --rain: #A9B4F5; --storm: #5B5FE0; --storm-t: #3236A8;
  --att: #C98A00; --att-t: #8A5E00; --warn: #D93B1F; --mv-up: #12866C; --mv-dn: #B8440F;
  --wash-pos: #FFF4C2; --wash-neu: #E6F5F1; --wash-neg: #E9EAFB; --hair: #ECE6D3;
}
:root[data-theme="dark"] .nimbus-page { --fair: #FFD400; --fair-t: #FFE24D; --fair2: #B89A10; --haze: #4FB3A3; --haze-t: #8FE0D2; --rain: #6F79D9; --storm: #7378FF; --storm-t: #B3B6FF;
  --att: #F2B636; --att-t: #F2B636; --warn: #FF6B4A; --mv-up: #3CC79B; --mv-dn: #FF7D4D; --wash-pos: #2E2814; --wash-neu: #17292A; --wash-neg: #1D1F38; --hair: #353126; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nimbus-page { --fair: #FFD400; --fair-t: #FFE24D; --fair2: #B89A10; --haze: #4FB3A3; --haze-t: #8FE0D2; --rain: #6F79D9; --storm: #7378FF; --storm-t: #B3B6FF;
  --att: #F2B636; --att-t: #F2B636; --warn: #FF6B4A; --mv-up: #3CC79B; --mv-dn: #FF7D4D; --wash-pos: #2E2814; --wash-neu: #17292A; --wash-neg: #1D1F38; --hair: #353126; } }
.nimbus-page .t-pos { --t: var(--fair); --tt: var(--fair-t); } .nimbus-page .t-pos2 { --t: var(--fair2); --tt: var(--fair-t); }
.nimbus-page .t-neu { --t: var(--haze); --tt: var(--haze-t); } .nimbus-page .t-neg2 { --t: var(--rain); --tt: var(--storm-t); }
.nimbus-page .t-neg { --t: var(--storm); --tt: var(--storm-t); } .nimbus-page .t-att { --t: var(--att); --tt: var(--att-t); }
.nimbus-page .up { color: var(--mv-up); } .nimbus-page .dn { color: var(--mv-dn); }
.nimbus-page b[class^="t-"], .nimbus-page b[class*=" t-"], .nimbus-page .k[class*="t-"] { color: var(--tt); }

/* the sun meter: ten rays, one in ten each; the disc carries the sky */
.sunm { flex: none; display: block; overflow: visible; }
.sunm .ray { stroke: var(--t); stroke-width: 4.6; stroke-linecap: round; fill: none; }
.sunm .disc { fill: var(--t); }
@media (prefers-reduced-motion: no-preference) { .nb-canvas.on .hx .sunm .ray { animation: rayin .4s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(.2s + var(--i) * 60ms); } }
@keyframes rayin { from { opacity: 0; transform: scale(.6); transform-origin: 32px 32px; } }

/* the warning for old data */
.warn { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--warn) 10%, var(--panel)); color: var(--ink); border-left: 4px solid var(--warn); font-size: 15px; }
.warn b { color: var(--warn); }
.nb-steps { transition: opacity .6s, max-height .6s, margin .6s; max-height: 80px; overflow: hidden; }
.nb-steps.faded { opacity: 0; max-height: 0; margin: 0; }

/* the hero: one sky panel, the answer on the left and the observation on the right */
.hx { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 30px 32px; border-radius: 24px; background: var(--panel);
  box-shadow: 0 1px 0 var(--hair), 0 10px 30px rgba(120, 90, 0, .07); }
.hx.sky-pos { background: linear-gradient(165deg, var(--wash-pos), var(--panel) 58%); }
.hx.sky-neu { background: linear-gradient(165deg, var(--wash-neu), var(--panel) 58%); }
.hx.sky-neg { background: linear-gradient(165deg, var(--wash-neg), var(--panel) 58%); }
.hx-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.hx .q { margin: 0; font: 500 16px var(--sans); color: var(--ink-2); }
.hx-verdict { display: flex; align-items: center; gap: 22px; margin-top: 14px; }
.hx-big { margin: 0; font: 600 clamp(72px, 9vw, 116px)/.86 var(--cond); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hx-line { margin: 6px 0 0; font: 500 clamp(20px, 2.4vw, 28px)/1.15 var(--cond); color: var(--ink); }
.hx-word { margin: 8px 0 0; font: 600 18px var(--sans); color: var(--ink-2); }
.sig { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font: 600 12px var(--sans); color: var(--ink-2); border: 1px dashed var(--ink-3); vertical-align: 2px; }
.sky { display: flex; gap: 2px; height: 14px; margin-top: 22px; border-radius: 8px; overflow: hidden; }
.sky i { width: var(--w); min-width: 2px; background: var(--t); opacity: .78; } .sky i.on { opacity: 1; }
.sky-k { display: flex; justify-content: space-between; margin-top: 7px; font: 500 13px var(--sans); color: var(--ink-2); }
.hx-why { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.hx-why li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 16px; line-height: 1.4; }
.hx-why .k { flex: none; width: 66px; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hx-why span em { font-style: normal; color: var(--ink-3); font-size: 14px; }
.hx-why span + span::before { content: "·"; margin-right: 14px; color: var(--ink-3); }
.hx-write { min-height: 84px; margin-top: 18px; }
.hx-write .hs { margin: 0; font: 400 18px/1.55 var(--sans); color: var(--ink); max-width: 64ch; }
.hx-write .hs.pending { color: var(--ink-3); font-size: 15px; }
/* the written forecast: the takeaway first, a size up; each further point on its own ruled line */
.hx-write .hs-lead { margin: 0; font: 500 20px/1.45 var(--sans); color: var(--ink); max-width: 60ch; text-wrap: pretty; }
.hx-write .hs-more { list-style: none; margin: 12px 0 0; padding: 0; max-width: 64ch; }
.hx-write .hs-more li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--rule); font: 400 16.5px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.hx-write .hs-more li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 8px; height: 2px; background: var(--ink); }
@media (max-width: 520px) { .hx-write .hs-lead { font-size: 18px; } .hx-write .hs-more li { font-size: 15.5px; } }
.hx-write .hs.pending::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--fair); animation: lamp 1.2s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: .2; } }
.hx-obs { border-left: 1px solid var(--hair); padding-left: 26px; display: grid; align-content: start; gap: 6px; }
.o-subj { margin: 0; font-size: 15px; color: var(--ink-3); } .o-subj b { font: 700 22px var(--cond); color: var(--ink); margin-right: 6px; }
.o-temp { margin: 4px 0 0; font: 600 64px/.95 var(--cond); font-variant-numeric: tabular-nums; }
.o-chg { margin: 0; font: 600 15px var(--sans); }
.o-spark { margin: 6px 0 4px; } .o-spark svg { height: 64px; } .o-spark .ax { display: none; } .o-spark .g { display: none; }
.o-list { margin: 6px 0 0; display: grid; } .o-list div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.o-list dt { color: var(--ink-3); } .o-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.o-cond { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.hx .fu { margin-top: 20px; }

/* cards: flat, one idea each, the answer in the header */
.view { border: 0; border-radius: 20px; padding: 24px 26px; box-shadow: 0 1px 0 var(--hair), 0 8px 24px rgba(120, 90, 0, .06); }
.view header { align-items: center; }
.view h3 { font: 600 17px var(--sans); }
.v-ans { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 15px; }
.v-ans b { font-weight: 700; }
.v-open { all: unset; cursor: pointer; margin-left: 12px; padding: 5px 12px; border-radius: 999px; font: 600 13px var(--sans); color: var(--ink-2); border: 1px solid var(--hair); }
.v-open:hover, .v-open:focus-visible { border-color: var(--ink); color: var(--ink); }
.view.folded { padding-top: 18px; padding-bottom: 18px; }
.view .blurb { display: none; }

/* readings as rows: sun meter, the answer, how sure, what it is about; tap to ask about it */
.rlist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.rlist li + li { border-top: 1px solid var(--hair); }
.rr0 { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 22px auto auto 1fr; align-items: center; gap: 10px; padding: 10px 6px; border-radius: 10px; }
.rr0:hover, .rr0:focus-visible { background: color-mix(in srgb, var(--fair) 10%, transparent); }
.rr0 b { font: 600 15.5px var(--sans); } .rr0 .rw { font-size: 13px; color: var(--ink-3); } .rr0 .rq { justify-self: end; text-align: right; font-size: 13px; color: var(--ink-3); }
.rr0.off { cursor: default; grid-template-columns: 1fr auto; }

/* tiles: no tiles inside cards, just value rows with a bullet under each */
.view .tiles { gap: 0 24px; } .view .tiles div { background: none; padding: 12px 0; border-top: 1px solid var(--hair); border-radius: 0; }
.view .tiles dd { font-size: 24px; }
.gg { height: 6px; margin-top: 8px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.gg.meter i { background: var(--t); } .gg.meter em { background: var(--ink); }
.gg.div i.up { background: var(--mv-up); } .gg.div i.dn { background: var(--mv-dn); }
.gg.pips i { background: color-mix(in srgb, var(--ink) 8%, transparent); } .gg.pips i.on { background: var(--storm); }

/* what's pushing it: net lean as a dot on a short rail; no empty tracks */
.balance h3 { font: 600 17px var(--sans); }
.bal-axis { display: flex; justify-content: space-between; grid-template-columns: none; margin: 16px 0 6px calc(min(30%, 260px) + 14px); width: calc(100% - min(30%, 260px) - min(34%, 300px) - 28px); font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.bal-axis span { grid-row: auto; }
.bal li { grid-template-columns: min(30%, 260px) 1fr min(34%, 300px); gap: 14px; padding: 7px 0; border-top: 1px solid var(--hair); }
.bal li:first-child { border-top: 0; }
.bal .bq { font-size: 14px; color: var(--ink-2); }
.ba { position: relative; height: 18px; }
.ba::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--hair); }
.ba .rail { position: absolute; top: 7.5px; height: 3px; left: var(--a); right: calc(100% - var(--b)); border-radius: 2px; opacity: .55; }
.ba .rail.up { background: var(--fair); } .ba .rail.dn { background: var(--storm); }
.ba .dot { position: absolute; top: 50%; left: var(--x); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 2px var(--panel); }
.ba .dot.r-essential { width: 16px; height: 16px; margin: -8px 0 0 -8px; } .ba .dot.r-background { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.bs { all: unset; cursor: pointer; font-size: 14.5px; } .bs b { font-weight: 700; } .bs em { font-style: normal; color: var(--ink-3); font-size: 13px; }
.bs:hover b { text-decoration: underline; text-decoration-color: var(--fair); text-underline-offset: 3px; }
.bal-more { margin-top: 10px; } .bal-more summary { cursor: pointer; font: 600 14px var(--sans); color: var(--ink-2); padding: 6px 0; }
.bal li { animation: none; }

/* charts in the forecast palette */
.ch .band.hot { fill: var(--fair); opacity: .12; } .ch .band.cold { fill: var(--storm); opacity: .08; }
.ch .ax.lbl.hot { fill: var(--fair-t); } .ch .ax.lbl.cold { fill: var(--storm-t); }
.ch .dot { fill: var(--fair); }
.pmap circle { fill: none; stroke-width: 2; } .pmap circle.up { stroke: var(--mv-up); fill: none; } .pmap circle.dn { stroke: var(--mv-dn); fill: none; }
.pmap .pt.me circle { fill: var(--fair); stroke: var(--ink); stroke-width: 2.5; }
.pmap .q.hot { fill: var(--mv-up); opacity: .05; } .pmap .q.cold { fill: var(--mv-dn); opacity: .05; }
.bars.pct .bt i.up { background: var(--mv-up); } .bars.pct .bt i.dn { background: var(--mv-dn); }
.vt i { background: var(--haze); opacity: 1; } .vt em { background: var(--ink); }

/* the week: trading days, events as chips in the attention colour */
.wk { grid-template-columns: repeat(5, 1fr); }
.wk li { background: color-mix(in srgb, var(--ink) 4%, transparent); align-content: start; min-height: 74px; padding: 8px 6px 10px; }
.wk li.has { background: color-mix(in srgb, var(--att) 12%, var(--panel)); }
.wk li em { font-style: normal; display: block; max-width: 100%; margin-top: 4px; padding: 2px 6px; border-radius: 6px; font: 600 11.5px/1.25 var(--sans); text-align: center; }
.wk li em.big { background: var(--att); color: #1A1400; } .wk li em.small { border: 1px solid var(--att); color: var(--att-t); }
.wk li i { display: none; }
.sent.att { color: var(--att-t); background: color-mix(in srgb, var(--att) 16%, transparent); } .sent.calm { color: var(--haze-t); background: color-mix(in srgb, var(--haze) 18%, transparent); }

@media (max-width: 980px) { .hx { grid-template-columns: 1fr; } .hx-obs { border-left: 0; border-top: 1px solid var(--hair); padding: 18px 0 0; } }
@media (max-width: 600px) {
  .hx { padding: 22px 18px; border-radius: 20px; gap: 18px; }
  .hx-verdict { gap: 14px; } .hx-verdict .sunm { width: 76px; height: 76px; }
  .hx-why .k { width: auto; }
  .bal-axis { margin-left: 0; width: 100%; }
  .bal li { grid-template-columns: 1fr; gap: 4px; }
  .rr0 { grid-template-columns: 22px 1fr auto; } .rr0 .rq { grid-column: 2 / -1; justify-self: start; text-align: left; }
  .view { padding: 18px 16px; }
}
@media (max-width: 600px) {
  .hx-why li { display: grid; grid-template-columns: 70px 1fr; gap: 2px 10px; }
  .hx-why li > span { grid-column: 2; } .hx-why span + span::before { content: none; }
}
/* freshness and credits */
.fresh { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--haze) 16%, var(--panel)); border-left: 4px solid var(--haze); font-size: 15px; }
.fresh b { color: var(--haze-t); }
.hx-by { margin: 16px 0 0; font-size: 13px; color: var(--ink-3); } .hx-by b { color: var(--ink-2); font-weight: 600; }
/* moves as a row of numbers */
.mrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0; margin: 4px 0 16px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.mrow div { padding: 12px 4px; } .mrow div + div { border-left: 1px solid var(--hair); padding-left: 14px; }
.mrow dt { font-size: 13px; color: var(--ink-3); } .mrow dd { margin: 4px 0 0; font: 600 22px var(--cond); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .mrow { grid-template-columns: repeat(3, 1fr); } .mrow div:nth-child(4) { border-left: 0; padding-left: 4px; } }

/* ---------- the front page's maps inside an answer (desk.js, cryptodesk.js), focused on the subject ---------- */
.nmap.nm-radar { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.nmap .scope { box-shadow: none; }
.nm-side { display: grid; gap: 10px; align-content: start; }
.nm-side .kicker { margin: 6px 0 0; }
.nm-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nm-cap { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2, inherit); }
.nm-cap .up { color: var(--mv-up); } .nm-cap .dn { color: var(--mv-dn); }
.cells li.me { background: color-mix(in srgb, var(--fair) 20%, transparent); box-shadow: inset 3px 0 0 var(--fair); }
.nm-winds { display: grid; gap: 14px; }
.nm-winds .nm-rose { display: grid; place-items: center; }
.nm-winds .sectable li { cursor: pointer; border-radius: 8px; padding: 2px 6px; margin: 0 -6px; }
.sectable li.me { background: color-mix(in srgb, var(--fair) 20%, transparent); }
.sectable li.me span { font-weight: 700; }
.roselbl.me { font-weight: 800; }
.nm-cur { margin: 0; }
.cur-list li.dim { opacity: .4; transition: opacity .2s; }
.cur-list li.dim:hover { opacity: 1; }
.cur-list li.me .cur { box-shadow: 0 0 0 2.5px var(--fair); border-radius: 10px; }
@media (max-width: 980px) { .nmap.nm-radar { grid-template-columns: 1fr; } }

/* the loader: the front page's horizon trace */
.nb-trace { margin: 14px 0 4px; }
.nb-hz { height: 124px; overflow: visible; }
.nb-hz svg { display: block; overflow: visible; }
.skel .sk.hero, .skel .sk.side { height: 160px; }
/* the station's sky, drawn with the front page's weather icons */
.hx-obs { position: relative; }
.o-wx { position: absolute; top: 10px; right: 10px; width: 92px; pointer-events: none; }
.o-wx svg { width: 100%; height: auto; display: block; }
/* the rose's rim labels need room beyond the petals */
.nm-winds .nm-rose { margin: 0 64px; }
.nm-winds .nm-rose svg { overflow: visible; }
@media (max-width: 600px) { .nm-winds .nm-rose { margin: 0 8px; } .o-wx { width: 64px; } }

.view.s-xl .nm-winds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.view.s-xl .nm-winds .nm-rose { grid-row: span 2; }
@media (max-width: 980px) { .view.s-xl .nm-winds { grid-template-columns: 1fr; } .view.s-xl .nm-winds .nm-rose { grid-row: auto; } }

/* the way back */
.nb-back { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--ink); text-decoration: none; font: 600 15px var(--sans);
  padding: 8px 14px 8px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); }
.nb-back:hover { border-color: var(--ink); }
.nb-back svg, .nb-prev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-back-short { display: none; }
body:not(.asked) .nb-home-word::before { content: none; }
.nb-prev { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--ink-2); font: 600 14.5px var(--sans); cursor: pointer; padding: 4px 8px 4px 0; margin-right: 8px; }
.nb-prev:hover { color: var(--ink); }
@media (max-width: 720px) { .nb-back-long { display: none; } .nb-back-short { display: inline; } .nb-home-word { display: none; } }

/* once asked, the back pill does the home link's job; the mark stays as the brand */
body.asked .nb-home-word { display: none; }
body.asked .nb-home-mark { display: inline-flex; }
/* the station's sky sits beside the subject line, never over the price */
.o-wx { position: static; float: right; width: 72px; margin: -4px -4px 0 8px; }
@media (max-width: 600px) { .o-wx { width: 54px; } }

/* the verdict in words */
.hx-big.words { font-size: clamp(44px, 6vw, 76px); line-height: .95; letter-spacing: 0; }
/* all the readings: the header shares the rows' columns */
.bal-axis { display: grid; grid-template-columns: min(30%, 260px) 1fr min(34%, 300px); gap: 14px; width: auto; margin: 16px 0 6px; }
.bal-axis span { grid-row: auto !important; grid-column: auto !important; justify-self: start !important; }
.bal-axis .ba-rail { display: flex; justify-content: space-between; } .bal-axis .ba-rail em { font-style: normal; }
@media (max-width: 720px) { .bal-axis { display: none; } }
/* the empty page: what to ask, and what comes back */
.nb-try { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
.nb-try span { color: var(--ink-3); font-size: 15px; }
.nb-try button { font: 500 15px var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.nb-try button:hover { border-color: var(--ink); }
.nb-what { max-width: 52ch; margin: 14px auto 0; text-align: center; color: var(--ink-3); font-size: 15.5px; }
body.asked .nb-try, body.asked .nb-what { display: none; }
/* the same pages as everywhere */
.nb-right { display: flex; align-items: center; gap: 18px; }
.nb-nav { display: flex; gap: 18px; } .nb-nav a { color: var(--ink-2); text-decoration: none; font: 600 15px var(--sans); } .nb-nav a:hover { color: var(--ink); }
@media (max-width: 1100px) { .nb-nav { display: none; } }

/* ---------- the forecast screen: Nimbus as a broadcast window ---------- */
.nb-home { gap: 8px; color: var(--ink); }
.nb-logo { width: 40px; }
.nb-home-word { display: grid; line-height: 1; font: 800 19px var(--cond); letter-spacing: .03em; text-transform: none; }
.nb-home-word small { font: 500 11px var(--sans); letter-spacing: 0; color: var(--ink-3); margin-top: 2px; }
body:not(.asked) .nb-home-word::before { content: none; }
body.asked .nb-home-word { display: none; }
.nb-screen { width: min(820px, calc(100vw - 32px)); border: 1.5px solid var(--ink); border-radius: 22px; overflow: hidden; background: var(--panel);
  box-shadow: 0 2px 0 var(--ink), 0 18px 40px rgba(11, 27, 48, .10); }
.nb-scr-body { display: grid; justify-items: center; gap: 16px; padding: 34px 28px 28px; transition: background .6s;
  background: linear-gradient(180deg, color-mix(in srgb, #9AA8BA 14%, var(--panel)), var(--panel) 70%); }
.s-fair .nb-scr-body { background: linear-gradient(180deg, color-mix(in srgb, #F2B300 16%, var(--panel)), var(--panel) 70%); }
.s-stormy .nb-scr-body { background: linear-gradient(180deg, color-mix(in srgb, #5B5FE0 18%, var(--panel)), var(--panel) 70%); }
.nb-bigcloud { width: 150px; }
.nb-read { margin: 0; font: 600 17px var(--sans); color: var(--ink-2); min-height: 1.4em; }
.nb-read b { color: var(--ink); }
.nb-screen .nb-bar { width: 100%; max-width: 640px; }
.nb-screen .nb-try { margin-top: 0; }
.nb-screen .nb-what { margin-top: 0; }
.nb-lower { display: flex; align-items: center; gap: 22px; padding: 10px 18px; background: #FFE14D; color: #111; border-top: 1.5px solid #111; font: 600 14.5px var(--sans); overflow-x: auto; white-space: nowrap; }
.nb-lower b { font: 700 15px var(--cond); letter-spacing: .02em; text-transform: uppercase; }
.nb-lower em { font-style: normal; font-weight: 700; } .nb-lower em.up { color: #0B6B3A; } .nb-lower em.dn { color: #B3261E; }
.nb-lower-k { margin-left: auto; font-weight: 500; font-size: 13px; color: #3B3B3B; }
/* the cloud rains while Nimbus reads: the big one on the loading screen, and the logo */
@keyframes nbrain { from { transform: translateY(-4px); opacity: 0; } 30% { opacity: .95; } to { transform: translateY(9px); opacity: 0; } }
@keyframes nbflick { 0%, 100% { opacity: 1; } 12% { opacity: .1; } 20% { opacity: 1; } 60% { opacity: .2; } 66% { opacity: 1; } }
.nb-loading .ask-cloud .drop, body.thinking .nb-logo .drop { opacity: .95; animation: nbrain .75s linear infinite; }
.nb-loading .ask-cloud .drop.d2, body.thinking .nb-logo .drop.d2 { animation-delay: .25s; } .nb-loading .ask-cloud .drop.d3, body.thinking .nb-logo .drop.d3 { animation-delay: .5s; }
.nb-loading .ask-cloud .bolt { opacity: 1; animation: nbflick 1.3s steps(1) infinite; }
.nb-loading .ask-cloud .body { fill: color-mix(in srgb, #9AA8BA 45%, var(--panel)); }
.nb-loading { width: 100%; margin: 8px 0 18px; }   /* the same width as the question bar above it and the answer that replaces it */
.nb-loading .nb-scr-body { padding: 30px 28px; }
@media (prefers-reduced-motion: reduce) { .nb-loading .ask-cloud .drop, body.thinking .nb-logo .drop, .nb-loading .ask-cloud .bolt, .nb-live i { animation: none; } }
/* the answer opens in the same window */
.hx { overflow: hidden; border: 1.5px solid var(--ink); }
.hx-bar { grid-column: 1 / -1; margin: -30px -32px 0; }
.hx-bar span:last-child { color: #BFC4CC; }
@media (max-width: 600px) {
  .hx-bar { margin: -22px -18px 0; font-size: 11px; padding: 9px 14px; } .hx-bar b { display: none; }
  .nb-scr-bar b { display: none; } .nb-bigcloud { width: 112px; } .nb-scr-body { padding: 26px 16px 20px; }
  .nb-lower { gap: 16px; font-size: 13.5px; } .nb-lower-k { display: none; }
}
/* the suggestion list must spill out of the window, so the window doesn't clip; its bars round their own corners */
.nb-screen { overflow: visible; }
.nb-screen > .nb-scr-bar { border-radius: 20px 20px 0 0; }
.nb-screen > .nb-lower { border-radius: 0 0 20px 20px; }
.nb-screen .nb-sugg { z-index: 40; }

@media (max-width: 600px) { body.asked .nb-home { display: none; } }   /* on a phone the asked bar needs the room */

/* the loading window: rounded all round (it has no lower third), progress inside, no loose cards beneath */
.nb-loading .nb-scr-body { border-radius: 0 0 20px 20px; }
body.thinking .nb-steps { display: none; }
.nb-loading .nb-read { font-size: 18px; color: var(--ink); }
.nb-sub { margin: 0; color: var(--ink-3); font-size: 14.5px; text-align: center; }
.nb-loading .ask-cloud .drop.d4, body.thinking .nb-logo .drop.d4 { opacity: .95; animation: nbrain .75s linear infinite; animation-delay: .12s; }
.nb-loading .ask-cloud .drop.d2 { animation-delay: .37s; }

/* ---------- the site's printed-chart look: square corners, ink outlines, hard shadows (no soft blur, no big radii) ---------- */
.nimbus-page { --line: 2px solid var(--ink); --drop: 4px 4px 0 var(--ink); }
.nimbus-page .nb-screen, .nimbus-page .hx, .nimbus-page .view, .nimbus-page .cv-trace { border: var(--line) !important; border-radius: 3px !important; box-shadow: var(--drop) !important; }
.nimbus-page .hx, .nimbus-page .nb-screen { box-shadow: 6px 6px 0 var(--ink) !important; }
.nimbus-page .nb-screen > .nb-scr-bar, .nimbus-page .nb-screen > .nb-lower, .nimbus-page .nb-loading .nb-scr-body { border-radius: 0 !important; }
.nimbus-page .nb-bar, .nimbus-page .nb-sugg, .nimbus-page .nb-back, .nimbus-page .nb-try button, .nimbus-page .fu button, .nimbus-page .share,
.nimbus-page .cv-nav a, .nimbus-page .nb-prev, .nimbus-page .sig, .nimbus-page .rr0, .nimbus-page .fs-row, .nimbus-page .tiles > div,
.nimbus-page .mrow, .nimbus-page .mrow > div, .nimbus-page .v-open, .nimbus-page .chip, .nimbus-page .cells li, .nimbus-page kbd { border-radius: 3px !important; }
.nimbus-page .nb-bar { border: var(--line) !important; box-shadow: 3px 3px 0 var(--ink) !important; }
.nimbus-page .nb-bar button[type="submit"] { border-radius: 3px !important; border: 2px solid #111; }
.nimbus-page .nb-try button, .nimbus-page .fu button { border: 1.5px solid var(--ink) !important; background: var(--panel); }
.nimbus-page .nb-try button:hover, .nimbus-page .fu button:hover { box-shadow: 2px 2px 0 var(--ink); }
.nimbus-page .nb-back { border: 1.5px solid var(--ink) !important; }
.nimbus-page .hx.sky-pos, .nimbus-page .hx.sky-neu, .nimbus-page .hx.sky-neg { background-image: none !important; }
.nimbus-page .hx.sky-pos { background-color: color-mix(in srgb, #FFE27A 45%, var(--panel)) !important; }
.nimbus-page .hx.sky-neu { background-color: color-mix(in srgb, #CFE7FA 45%, var(--panel)) !important; }
.nimbus-page .hx.sky-neg { background-color: color-mix(in srgb, #C9CBF7 45%, var(--panel)) !important; }
.nimbus-page .nb-scr-body, .nimbus-page .s-fair .nb-scr-body, .nimbus-page .s-stormy .nb-scr-body { background-image: none !important; background-color: var(--panel); }
.nimbus-page .s-fair .nb-scr-body { background-color: color-mix(in srgb, #FFE27A 40%, var(--panel)); }
.nimbus-page .s-mixed .nb-scr-body { background-color: color-mix(in srgb, #CFE7FA 40%, var(--panel)); }
.nimbus-page .s-stormy .nb-scr-body { background-color: color-mix(in srgb, #C9CBF7 45%, var(--panel)); }

/* by night the skies are night skies, as on the forecast page */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .nimbus-page .hx.sky-pos { background-color: #1D2D52 !important; }
:root:not([data-theme="light"]) .nimbus-page .hx.sky-neu { background-color: #1B3047 !important; }
:root:not([data-theme="light"]) .nimbus-page .hx.sky-neg { background-color: #2A2C66 !important; }
:root:not([data-theme="light"]) .nimbus-page .s-fair .nb-scr-body { background-color: #1D2D52; }
:root:not([data-theme="light"]) .nimbus-page .s-mixed .nb-scr-body { background-color: #1B3047; }
:root:not([data-theme="light"]) .nimbus-page .s-stormy .nb-scr-body { background-color: #2A2C66; }
}
:root[data-theme="dark"] .nimbus-page .hx.sky-pos { background-color: #1D2D52 !important; }
:root[data-theme="dark"] .nimbus-page .hx.sky-neu { background-color: #1B3047 !important; }
:root[data-theme="dark"] .nimbus-page .hx.sky-neg { background-color: #2A2C66 !important; }
:root[data-theme="dark"] .nimbus-page .s-fair .nb-scr-body { background-color: #1D2D52; }
:root[data-theme="dark"] .nimbus-page .s-mixed .nb-scr-body { background-color: #1B3047; }
:root[data-theme="dark"] .nimbus-page .s-stormy .nb-scr-body { background-color: #2A2C66; }

/* ---------- the answer page, second pass (2026-10-02) ----------
   The header keeps to wayfinding (back, Nimbus, pages); the ask bar docks above the answer, the full width of the
   card, like the input line of the forecast screen. It stays in reach while reading (sticky under the header). */
.nb-dock { display: none; }
body.asked .nb-dock { display: block; position: sticky; top: 64px; z-index: 25; padding: 10px 0 12px; margin-top: -10px; background: var(--bg); }
body.asked .nb { padding-top: 86px; }
.nb-dock .nb-bar { width: 100%; max-width: none; padding: 4px 4px 4px 16px; border: 2px solid var(--ink); border-radius: 3px; box-shadow: var(--shadow, 3px 3px 0 var(--ink)); background: var(--panel); }
.nb-dock .nb-bar:focus-within { box-shadow: 0 0 0 4px rgba(255,212,0,.45); }
.nb-dock .nb-bar input { font-size: 17px; padding: 10px 0; }
.nb-dock .nb-bar button { width: 42px; height: 42px; border-radius: 2px; border: 2px solid var(--ink); box-sizing: border-box; }
.nb-dock .nb-bar button:hover { transform: none; background: #FFE14D; }
.nb-dock .nb-bar .nb-clear { border: 0; }
.nb-dock .nb-sugg { left: -2px; right: -2px; }
body.asked .nb-home-word { display: grid; }
body.asked .nb-top-in { min-height: 64px; grid-template-columns: auto auto minmax(0, 1fr) auto; }
@media (max-width: 720px) { body.asked .nb-home-word { display: none; } body.asked .nb-dock { top: 64px; } }
@media (max-width: 640px) { body.asked .nb-dock { top: 104px; } }   /* the header's second row (the pages) on phones */
@media (max-width: 600px) { body.asked .nb-home { display: inline-flex; } }

/* the odds strip is a printed bar, not a pill; "the readings point different ways" is a plain note */
.sky { border-radius: 2px; gap: 2px; }
.nimbus-page .sig { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; font: 500 15px var(--sans); color: var(--ink-2); vertical-align: baseline; }

/* the station panel: the company's or coin's logo beside its name */
.o-subj.has-lg { display: flex; align-items: center; gap: 12px; }
.o-subj.has-lg .lgt { width: 52px; height: 52px; border-width: 2px; }
.o-subj.has-lg .lgt::before { font-size: 13px; }

/* a who/which answer: the names themselves, ranked, with their moves */
.hx-rankv .hx-big { font-size: clamp(40px, 6vw, 72px); }
.hx-rank { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; gap: 8px; }
.hx-rank li { display: grid; grid-template-columns: 22px 34px minmax(0, 220px) 1fr auto; align-items: center; gap: 12px; }
.hx-rank .rk { font: 800 20px var(--cond); color: var(--ink-3); text-align: right; }
.hx-rank .lgt { width: 34px; height: 34px; }
.hx-rank .nm { display: grid; line-height: 1.15; min-width: 0; } .hx-rank .nm b { font: 700 19px var(--cond); color: var(--ink); }
.hx-rank .nm small { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-rank .bar { height: 12px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--panel); overflow: hidden; }
.hx-rank .bar i { display: block; height: 100%; width: var(--w); background: #F2B300; } .hx-rank .bar i.dn { background: #5B5FE0; }
.hx-rank .mv { font: 700 17px var(--mono); min-width: 74px; text-align: right; }
/* the week in short: ruled lines, label · what · move; the next report last, in the risk colour */
.hx-recap { margin: 18px 0 6px; border-top: 2px solid var(--ink); }
.hx-recap > div { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.hx-recap dt { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hx-recap dd { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 17px; color: var(--ink); min-width: 0; }
.hx-recap dd span { min-width: 0; }
.hx-recap dd b { font: 700 16px var(--mono); white-space: nowrap; }
.hx-recap .nx dt { color: var(--att-t, var(--ink-3)); }
.hx-recap .nx dd b { font: 600 14px var(--mono); color: var(--ink-2); }
@media (max-width: 520px) { .hx-recap > div { grid-template-columns: 1fr; gap: 2px; } .hx-recap dd { font-size: 16px; } }
.hx-rank .mv.up, .hx-rank-k .up { color: var(--good, #1E8E3E); } .hx-rank .mv.dn, .hx-rank-k .dn { color: var(--bad, #C62828); }
.hx-rank-k { margin: 6px 0 4px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 600px) { .hx-rank li { grid-template-columns: 18px 30px minmax(0, 1fr) auto; } .hx-rank .bar { display: none; } }

/* ---------- the Nimbus logo (2026-10-02): a clean white printed cloud, the same shape as every Ask cloud at rest ----------
   It never wears the market's weather; the words beside the big cloud carry the reading. Marshmallow motion: the big
   start-screen cloud breathes, the header logo puffs once on load, and both squish when you hover or press them. */
.nb-logo, .nb-bigcloud { padding: 0 3px 3px 0; filter: drop-shadow(3px 3px 0 var(--ink)); transform-origin: 50% 85%; }
.nb-logo .body, .nb-bigcloud .body { fill: #FFFFFF !important; stroke: #0B0D10; }
.nb-logo .sun, .nb-bigcloud .sun, .nb-logo .bolt, .nb-bigcloud .bolt { display: none; }
.s-fair .nb-bigcloud .drop, .s-mixed .nb-bigcloud .drop, .s-stormy .nb-bigcloud .drop, .nb-home .drop { opacity: 0; }
body.thinking .nb-home .drop { opacity: .95; }
.nb-screen .nb-bigcloud { cursor: pointer; animation: nb-breathe 6s ease-in-out infinite; }
@keyframes nb-breathe { 0%, 70%, 100% { transform: scale(1, 1); } 80% { transform: scale(1.035, 1.05); } 90% { transform: scale(.99, .985); } }
.nb-home .nb-logo { animation: nb-puff .9s cubic-bezier(.3,1.6,.5,1) .3s 1 both; }
@keyframes nb-puff { 0% { transform: scale(.92, .9); } 60% { transform: scale(1.04, 1.05); } 100% { transform: scale(1, 1); } }
.nb-home:hover .nb-logo, .nb-screen .nb-bigcloud:hover { animation: nb-squish .7s cubic-bezier(.3,1.7,.45,1) 1 both; }
.nb-home:active .nb-logo, .nb-screen .nb-bigcloud:active { animation: none; transform: scale(1.1, .86); transition: transform .08s; }
@keyframes nb-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) { .nb-logo, .nb-bigcloud, .nb-home:hover .nb-logo, .nb-screen .nb-bigcloud:hover { animation: none !important; transform: none !important; } }

/* the foot: one ruled line. The disclaimer, then two small links: connecting an agent (its setup lives on /account) and
   the morning forecast */
.cv-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 20px; flex-wrap: wrap; padding: 14px 0; border-top: 2px solid var(--ink); }
.cv-foot .cv-legal { margin: 0; color: var(--ink-3); font-size: 14px; }
.cv-sub { color: var(--ink); font: 700 15px var(--sans); text-decoration: none; border-bottom: 2px solid #FFD400; }
.cv-sub:hover { background: #FFD400; }
.cv-links { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cv-agent { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font: 600 14.5px var(--sans); text-decoration: none; }
.cv-agent .sat { width: 22px; height: 22px; }
.cv-agent:hover span { text-decoration: underline; text-underline-offset: 3px; } .cv-agent:hover .sat-wave { animation: sat-beam 1s ease-out 1; }
.sat { width: 30px; height: 30px; flex: none; overflow: visible; }
.sat-panel { fill: #3D8BFF; stroke: #0B0D10; stroke-width: 1.6; } .sat-body { fill: #FFFFFF; stroke: #0B0D10; stroke-width: 1.6; }
.sat-dish { fill: #FFD400; stroke: #0B0D10; stroke-width: 1.4; } .sat-ink { stroke: #0B0D10; stroke-width: 1.8; fill: none; }
.sat-wave { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
@keyframes sat-beam { 0% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cv-agent:hover .sat-wave { animation: none; } }
.bal-axis .ba-rail { justify-self: stretch !important; gap: 12px; }

/* ---------- phones (2026-10-02 pass) ----------
   The answer reads top-down on a small screen: what it is (logo, name, price) first, then the answer, then the rest.
   The bar scrolls away instead of pinning, follow-ups swipe in one row, view headers keep one shape. */
@media (max-width: 600px) {
  body.asked .nb-dock { position: static; margin-top: 0; padding: 6px 0 10px; }
  body.asked .nb-home-word { display: grid; } .nb-home-word { font-size: 17px; } .nb-home-word small { font-size: 10px; }
  /* the station panel moves up under the title bar and goes compact */
  .hx { display: flex; flex-direction: column; gap: 14px; }
  .hx > .hx-bar { order: -2; }
  .hx > .hx-obs { order: -1; border-top: 0 !important; border-left: 0 !important; padding: 0 0 14px !important; border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); }
  /* a stock or coin leads with its price, like a weather app; the market or a group has no price, so its figures follow the answer */
  .hx > .hx-obs:not(:has(.o-temp)) { order: 2; padding: 14px 0 0 !important; border-bottom: 0; border-top: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent) !important; }
  .hx-obs .o-temp { font-size: 40px; margin: 4px 0 0; }
  .hx-obs .o-spark { display: none; }
  .hx-obs .o-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .hx-obs .o-list > div { display: grid; gap: 2px; border: 0 !important; padding: 0 !important; }
  .hx-obs .o-list dt { font-size: 12px; } .hx-obs .o-list dd { margin: 0; font-size: 15px; text-align: left; }
  .o-subj.has-lg .lgt { width: 40px; height: 40px; }
  /* follow-ups: one row you swipe, the label above it */
  .fu.fu-top { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding: 2px 18px 6px 0; }
  .fu.fu-top::-webkit-scrollbar { display: none; }
  .fu.fu-top span { flex: none; }
  .fu.fu-top button { flex: none; white-space: nowrap; }
  .fu.fu-bottom { justify-content: flex-start; }
  /* every view header the same: title on its own line, then the reading on the left and Show on the right */
  .view > header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
  .view > header h3 { grid-column: 1 / -1; }
  .view > header .v-ans { grid-column: 1; justify-self: start; margin: 0 !important; }
  .view > header .v-open { grid-column: 2; justify-self: end; }
  .hx-big.words { font-size: 44px; line-height: 1; }
}
@media (max-width: 600px) {
  /* the readings: one line each, what was looked at on the left and what Nimbus read on the right (its colour is the lean) */
  .bal-axis { display: none !important; }
  .bal li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important; gap: 10px !important; padding: 8px 0 !important; }
  .bal li .ba { display: none; }
  .bal li .bq { font-size: 13.5px; color: var(--ink-3); }
  .bal li .bs { justify-self: end; text-align: right; font-size: 14px; }
  /* "Keep going" swipes like "Ask next" */
  .fu.fu-bottom { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding: 2px 16px 6px 0; }
  .fu.fu-bottom::-webkit-scrollbar { display: none; }
  .fu.fu-bottom span, .fu.fu-bottom button { flex: none; white-space: nowrap; }
  /* "How Nimbus built this": the count drops under the title */
  .cv-trace summary { flex-wrap: wrap; row-gap: 2px; } .cv-trace summary em { flex-basis: 100%; order: 2; }
}
/* the last rounded pills and bars, squared to the printed look */
.nimbus-page .sent, .nimbus-page .rel, .nimbus-page .stale, .nimbus-page .os i, .nimbus-page .bt, .nimbus-page .bt i, .nimbus-page .bal .bt, .nimbus-page .bal .bt i,
.nimbus-page .rr code, .nimbus-page .nb-key, .nimbus-page .retry, .nimbus-page .cv-nav a, .nimbus-page .vtabs, .nimbus-page .vtabs button, .nimbus-page .v-open,
.nimbus-page .wk li em, .nimbus-page .share, .nimbus-page .fu button { border-radius: 2px !important; }
@media (max-width: 600px) {
  .hx-obs .o-wx { display: none; }   /* the card's colour already carries the weather */
  .hx-obs .o-list { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
}
.hx-hist { margin: 8px 0 0; font-size: 15.5px; color: var(--ink-2); max-width: 60ch; }

/* the site header sits in the flow (sticky, 64px with its rule), so the stage and the answer start under it */
.nimbus-page .nb-stage { min-height: calc(100vh - 64px); }
body.asked .nb, body.asked.nimbus-page .nb { padding-top: 22px; }
@media (max-width: 720px) { body.asked .nb { padding-top: 14px; } }

/* Nimbus's answers use the same frame as the desk (the header is 1160 wide inside its padding on every page) */
.nb { width: min(1160px, 100% - 32px); }

/* What traders are saying: a split bar (long green, short red), the counts under it, then a few takes */
.tr-lean { display: grid; gap: 6px; }
.tr-bar { display: flex; height: 12px; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden; }
.tr-bar i { display: block; } .tr-bar .l { background: #1E9E5A; } .tr-bar .s { background: #D6161B; }
.tr-k { display: flex; justify-content: space-between; gap: 10px; font: 600 13px var(--mono); }
.tr-k .l { color: #22A05E; } .tr-k .s { color: #E5484D; }   /* mid-tones: readable on light and dark */ .tr-k .q { font: 500 12.5px var(--sans); color: var(--ink-3); text-align: center; }
.tr-take { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--rule); }
.tr-d { font: 600 11px var(--mono); padding: 2px 6px; border-radius: 2px; color: #fff; align-self: start; margin-top: 2px; }
.tr-d.l { background: #1E7A46; } .tr-d.s { background: #B4232A; }
.tr-take p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.tr-take small { grid-column: 2; color: var(--ink-3); font-size: 12.5px; } .tr-take small a { color: inherit; }
.hx-tr { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; } .hx-tr:hover { text-decoration-color: currentColor; }
.tr-take small a.tr-post { color: var(--ink); font-weight: 600; text-decoration: none; } .tr-take small a.tr-post:hover { text-decoration: underline; }

/* a comparison: the names side by side */
.hx-cmpw { overflow-x: auto; margin: 4px 0 2px; }
.hx-cmp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hx-cmp th, .hx-cmp td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.hx-cmp thead th { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hx-cmp tbody th { text-align: left; display: flex; flex-direction: column; } .hx-cmp tbody th small { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.hx-cmp tr.lead th b::after { content: " ▲"; color: var(--good, #1E8E3E); font-size: 11px; }
.hx-cmp td.na { color: var(--ink-3); }
.hx-cmpnote { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
/* why there's no write-up (today's free one used, or the plan's month), and the way to more */
.hs-note { margin-top: 10px; padding: 9px 12px; border: 1.5px dashed var(--rule); border-radius: 3px; font-size: 14px; color: var(--ink-2); }
.hs-note a { color: var(--ink); font-weight: 700; }