/* Market Weather, the forecast page: a weather report, drawn like a printed weather chart or a TV weather card.
   Crisp square corners, 2px ink outlines, hard offset shadows (never soft blur), flat colours (never gradients),
   and the illustrated weather icons doing the charming part. Colours and icons come from styles.css. */
.rd-page { --line: 2px solid var(--ink); --drop: 4px 4px 0 var(--ink); --r: 3px;
  --sun: #FFE27A; --sky: #CFE7FA; --mist: #E3E8EE; --storm: #C9CBF7; --paper: var(--panel);
  background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); margin: 0; }
/* by night the sky is a night sky: clear is deep blue, cloud is slate, storm is indigo */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-page { --sun: #1D2D52; --sky: #1B3047; --mist: #262C35; --storm: #2A2C66; } }
:root[data-theme="dark"] .rd-page { --sun: #1D2D52; --sky: #1B3047; --mist: #262C35; --storm: #2A2C66; }
.rd-page h1, .rd-page h2, .rd-page h3, .rd-page p { margin: 0; }
.rd-page .up { color: var(--good); } .rd-page .down { color: var(--bad); }

/* layout */
.rd { display: grid; gap: 22px; padding: 28px 20px 36px; }
.wr-k { font: 700 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.wr-k-out { margin-bottom: 10px; }
.wr-card { background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: var(--drop); padding: 16px 20px 18px; }
.wr-head { display: flex; justify-content: space-between; align-items: baseline; }
.rd-link { background: none; border: 0; color: var(--ink); font: 700 14px var(--sans); cursor: pointer; padding: 2px 0; text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.rd-fine { color: var(--ink-3); font-size: 15px; margin-top: 8px; }

/* 1. the report card: a flat sky in the day's colour */
.wr-hero { border: var(--line); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); padding: 26px 30px 24px; background: var(--sky);
  display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; }
.wr-hero.sky-sunny, .wr-hero.sky-mostly-sunny { background: var(--sun); }
.wr-hero.sky-partly, .wr-hero.sky-cloudy { background: var(--sky); }
.wr-hero.sky-overcast, .wr-hero.sky-showers { background: var(--mist); }
.wr-hero.sky-storm { background: var(--storm); }
.wr-place { font: 800 30px/1 var(--cond); letter-spacing: .02em; text-transform: uppercase; }
.wr-date { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
.wr-now { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; }
.wr-icon { width: 150px; } .wr-icon svg { width: 100%; height: auto; display: block; }
.wr-temp { font: 800 128px/.9 var(--cond); letter-spacing: -.02em; }
.wr-temp sup { font-size: 54px; vertical-align: top; position: relative; top: 10px; }
.wr-cond { font: 800 32px/1.1 var(--cond); letter-spacing: .01em; margin-top: 4px; }
.wr-risk { font: 600 18px var(--sans); margin-top: 2px; }
.wr-live { margin-top: 12px; font-size: 16.5px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 6px; }
.wr-live b { font-weight: 800; }
.wr-live small { flex-basis: 100%; color: var(--ink-2); font-size: 13.5px; }
.wr-dot { width: 9px; height: 9px; background: #E8412E; border: 1.5px solid #111; border-radius: 50%; align-self: center; animation: nlpulse 2s infinite; }
.wr-key { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; text-wrap: balance; } .wr-key b { color: var(--ink); }
.wr-summary { margin-top: 18px; padding: 14px 18px 16px; width: 100%; max-width: 680px; text-align: left; background: var(--paper); border: var(--line); border-radius: var(--r); }
.wr-brief { margin-top: 6px; font-size: 18.5px; line-height: 1.55; }
.rd-skel { display: block; height: 1.1em; margin: 6px 0; background: var(--mist); }
.rd-skel.short { width: 62%; }

/* 2. hour by hour: one strip, a column per moment */
.wr-hours { list-style: none; margin: 12px 0 0; padding: 0; display: flex; overflow-x: auto; border: var(--line); border-radius: var(--r); }
.wr-h { flex: 1 0 118px; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 8px 12px; text-align: center; border-right: 1.5px dashed var(--rule); }
.wr-h:last-child { border-right: 0; }
.wr-h.done { background: color-mix(in srgb, var(--mist) 55%, transparent); }
.wr-h.done .wr-hi { opacity: .55; }
.wr-ht { font: 700 13px var(--mono); }
.wr-hi { width: 46px; } .wr-hi svg { width: 100%; height: auto; display: block; }
.wr-hl { font: 600 14.5px/1.25 var(--sans); }
.wr-hout { font: 600 12.5px var(--sans); color: var(--ink-2); }
.wr-nowmark { flex: 0 0 auto; display: grid; place-items: center; background: #E8412E; }
.wr-nowmark span { writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font: 800 12px var(--cond); letter-spacing: .16em; text-transform: uppercase; padding: 8px 3px; }
.wr-closed { flex-basis: 100%; grid-template-columns: 54px 1fr; justify-items: start; text-align: left; align-items: center; }

/* 3. the week: a ten-day list */
.wr-days { list-style: none; margin: 10px 0 0; padding: 0; border: var(--line); border-radius: var(--r); }
.wr-day + .wr-day { border-top: 1.5px solid var(--ink); }
.wr-dbtn { width: 100%; display: grid; grid-template-columns: 76px 54px 1fr 24px; gap: 12px; align-items: center; padding: 8px 14px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.wr-dbtn:hover { background: color-mix(in srgb, var(--chip) 18%, transparent); }
.wr-day.today .wr-dbtn { background: color-mix(in srgb, var(--chip) 30%, transparent); }
.wr-dn { font: 800 19px/1 var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.wr-dn small { display: block; font: 500 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink-2); margin-top: 3px; }
.wr-di { width: 50px; } .wr-di svg { width: 100%; height: auto; display: block; }
.wr-dl b { display: block; font: 600 16.5px var(--sans); } .wr-dl small { color: var(--ink-2); font-size: 14px; }
.wr-chev { font: 800 22px var(--cond); text-align: center; }
.wr-dd { padding: 4px 16px 14px 102px; }
.wr-ev { padding: 10px 0; border-top: 1.5px dashed var(--rule); } .wr-ev:first-child { border-top: 0; }
.wr-ev p { color: var(--ink-2); margin-top: 2px; }
.wr-evh { color: var(--ink) !important; } .wr-evh span { color: var(--ink-2); font-size: 14.5px; margin-left: 6px; }
.wr-hist { font-size: 14.5px; }
.wr-out { font: 800 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; background: #111; color: #FFD400; padding: 1px 6px; margin-left: 4px; font-style: normal; }
.wr-tkr { display: inline-block; margin: 6px 8px 0 0; padding: 2px 8px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 700; background: var(--paper); }
.wr-tkr small { font-weight: 400; color: var(--ink-2); }

/* 4. conditions tiles */
.wr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wr-tile { position: relative; display: grid; align-content: start; gap: 4px; min-height: 150px; padding: 14px 16px 16px; color: var(--ink); text-decoration: none;
  background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: var(--drop); transition: transform .12s, box-shadow .12s; }
.wr-tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.wr-tlab { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.wr-ti { position: absolute; top: 10px; right: 10px; width: 54px; } .wr-ti svg { width: 100%; height: auto; display: block; }
.wr-tv { font: 800 30px/1.05 var(--cond); margin-top: 18px; padding-right: 8px; }
.wr-ts { font-size: 15px; color: var(--ink-2); }

/* 5. ask + join + footer */
.wr-ask .rd-askbar { margin-top: 10px; }
.rd-askbar { display: flex; align-items: center; gap: 10px; background: var(--paper); border: var(--line); border-radius: var(--r); padding: 6px 6px 6px 10px; }
.rd-askbar input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 400 18px var(--sans); outline: none; }
.rd-askbar .ask-cloud { width: 46px; }
.rd-askbar button { background: var(--chip); color: #111; border: 2px solid #111; border-radius: var(--r); font: 800 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; padding: 9px 18px; cursor: pointer; box-shadow: 2px 2px 0 #111; }
.rd-join { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--chip); color: #111; border: 2px solid #111; border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); padding: 22px 26px; }
.rd-join h2 { font: 800 30px var(--cond); text-transform: uppercase; letter-spacing: .02em; }
.rd-join p { font-size: 17px; margin-top: 2px; }
.rd-join .rd-cta { background: #111; color: #FFD400; box-shadow: 3px 3px 0 #FFF7C2; }
.rd-foot { padding: 22px 20px 48px; color: var(--ink-2); border-top: var(--line); }
.rd-foot a { white-space: nowrap; color: var(--ink); font-weight: 700; text-decoration-color: var(--chip); text-decoration-thickness: 3px; }

@media (max-width: 860px) { .wr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .rd { padding: 18px 16px 28px; gap: 18px; }
  .wr-hero { padding: 20px 16px; box-shadow: 4px 4px 0 var(--ink); } .wr-icon { width: 104px; } .wr-temp { font-size: 96px; } .wr-temp sup { font-size: 40px; }
  .wr-cond { font-size: 26px; } .wr-summary { padding: 12px 14px; } .wr-brief { font-size: 17px; }
  .wr-dbtn { grid-template-columns: 60px 42px 1fr 18px; gap: 10px; padding: 8px 10px; } .wr-di { width: 42px; } .wr-dd { padding: 4px 12px 12px 12px; }
  .wr-tiles { grid-template-columns: 1fr 1fr; gap: 12px; } .wr-tile { min-height: 132px; padding: 12px; } .wr-tv { font-size: 24px; } .wr-ti { width: 42px; }
  .rd-askbar .ask-say { display: none; } .rd-join { flex-direction: column; align-items: flex-start; }
}
.rd-page form.rd-askbar { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.rd > * { min-width: 0; }   /* the hour strip scrolls inside its card instead of widening the page */
.wr-tlab { padding-right: 58px; }
@media (max-width: 640px) { .wr-tlab { padding-right: 44px; font-size: 11px; letter-spacing: .08em; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wr-day.today .wr-dbtn { background: color-mix(in srgb, var(--chip) 14%, transparent); } }
:root[data-theme="dark"] .wr-day.today .wr-dbtn { background: color-mix(in srgb, var(--chip) 14%, transparent); }

/* how today's report landed */
.wr-landed { background: var(--paper); }
.wl-verdict { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink); padding: 2px 10px 2px 4px; background: var(--chip); color: #111; }
.wl-verdict svg { width: 34px; height: auto; }
.wl-verdict b { font: 800 14px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.wl-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin-top: 12px; border: var(--line); }
.wl-b { display: grid; gap: 2px; padding: 12px 14px; border-right: 1.5px dashed var(--rule); }
.wl-b:last-child { border-right: 0; }
.wl-k { font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.wl-v { font: 800 34px/1.05 var(--cond); }
.wl-b small { color: var(--ink-2); font-size: 13.5px; }
.wl-row { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--rule); }
.wl-row p { margin-top: 4px; }
.wl-news { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.wl-news a { color: var(--ink); font-weight: 600; text-decoration-color: var(--chip); text-decoration-thickness: 2px; }
.wl-news small { color: var(--ink-3); }
.wl-t { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--ink); vertical-align: -1px; }
.wl-t.m-worried { background: var(--mood-worried); } .wl-t.m-upbeat { background: var(--chip); } .wl-t.m-neither { background: var(--mood-news); }
:root { --mood-worried: #5B5FE0; --mood-news: #D9ECFA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mood-worried: #8A8DF0; --mood-news: #2A3F5A; } }
:root[data-theme="dark"] { --mood-worried: #8A8DF0; --mood-news: #2A3F5A; }
.wl-tally { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 10px; }
.wl-tally .wl-t { width: 16px; height: 16px; }
.wl-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.wl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wl-legend b { color: var(--ink); }
.wl-q { margin: 16px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--ink); }
.wl-q blockquote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.wl-q figcaption { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 12px var(--mono); letter-spacing: .04em; color: var(--ink-2); }
.wl-q figcaption a, .wl-posts li a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.wl-posts { margin-top: 14px; }
.wl-posts summary { list-style: none; display: inline-block; cursor: pointer; padding: 6px 12px; border: 2px solid var(--ink); background: var(--panel, #fff); box-shadow: 2px 2px 0 var(--ink); font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.wl-posts summary::-webkit-details-marker { display: none; }
.wl-posts summary::after { content: " ▾"; } .wl-posts[open] summary::after { content: " ▴"; }
.wl-posts summary:active { transform: translate(2px, 2px); box-shadow: none; }
.wl-posts ul { list-style: none; margin: 12px 0 0; padding: 0; max-height: 440px; overflow-y: auto; border-top: 2px solid var(--ink); }
.wl-posts li { display: grid; grid-template-columns: 132px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1.5px dashed var(--rule); font-size: 14.5px; line-height: 1.45; }
.wl-posts li p { margin: 0; color: var(--ink); }
.wl-posts li a { font: 600 12px var(--mono); white-space: nowrap; }
.wl-mood { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 560px) { .wl-posts li { grid-template-columns: 1fr; gap: 4px; } }
#wrlanded .wl-said { margin: 16px 0 0; font: 700 22px/1.3 var(--sans, inherit); color: var(--ink); max-width: 46ch; }
.wl-said a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.wl-said .wl-k { display: block; margin-bottom: 4px; }
#wrlanded .wl-why { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); max-width: 70ch; }
.wl-rowh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wl-row .wl-blocks { margin-top: 10px; }
.wl-head-r { display: inline-flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; flex: none; margin-left: 16px; }
.wl-read { font: 700 13px var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* the verdict wears its weather: sun for relieved, a storm sky for worried, pale cloud for shrugged it off */
.wl-verdict.v-relieved { background: var(--chip); }
.wl-verdict.v-worried { background: var(--v-storm); }
.wl-verdict.v-shrugged { background: var(--v-cloud); }
:root { --v-storm: #D9DAF7; --v-cloud: #E3EEF8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v-storm: #C9CBF4; --v-cloud: #DCE8F4; } }
:root[data-theme="dark"] { --v-storm: #C9CBF4; --v-cloud: #DCE8F4; }
a.wr-hout { color: var(--ink); text-decoration-color: var(--chip); text-decoration-thickness: 2px; }
@media (max-width: 640px) { .wl-b { border-right: 0; border-bottom: 1.5px dashed var(--rule); } .wl-b:last-child { border-bottom: 0; } .wl-v { font-size: 28px; } }
.wr-k-out { margin: 0 0 14px 2px; }
/* the weekend edition: the week that was, as a row of small cards in place of the hour strip */
.wr-hours.wr-was { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); overflow: visible; }
.wr-w { display: grid; gap: 3px; align-content: start; padding: 12px 14px; border-right: 1.5px dashed var(--rule); cursor: pointer; }
.wr-w:last-child { border-right: 0; }
/* an odd last cell takes the whole row instead of leaving a hole beside it */
@media (max-width: 640px) { .wr-hours.wr-was .wr-w:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.wr-w:hover { background: color-mix(in srgb, var(--chip) 14%, transparent); }
.wr-w .wr-wk { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.wr-w b { font: 800 22px/1.1 var(--cond); color: var(--ink); overflow-wrap: anywhere; }
.wr-w small { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.wr-w.wr-next { cursor: default; background: color-mix(in srgb, var(--mist) 45%, transparent); }
@media (max-width: 600px) { .wr-hours.wr-was { grid-template-columns: 1fr 1fr; } .wr-w { border-bottom: 1.5px dashed var(--rule); } }
/* the brief as a bulletin: one labelled line per time (Friday / This weekend / Monday, or Today / Watch next) */
.wr-brief:has(.wr-bl) { display: grid; }
.wr-bl { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.45; }
.wr-bl:first-child { border-top: 0; padding-top: 2px; }
.wr-bl > b { font: 700 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2, var(--ink)); }
@media (max-width: 560px) { .wr-bl { grid-template-columns: 1fr; gap: 2px; } }


/* the lens switch sits over the report; the reader's own names sit under it */
.rd > .lens-row { justify-self: center; margin-bottom: -6px; }
.rd > .lens-row .lens-box { left: 50%; margin-left: -145px; }   /* centred under the control (no transform: the opening animation uses it) */
.wr-yours .wr-names { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 10px; }
.wr-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 600 14px var(--mono); }
.wr-name .lgt { width: 26px; height: 26px; }
.wr-name:hover b { text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 3px; }
.wr-names-note { margin-top: 10px !important; font-size: 13px; color: var(--ink-3); }
.wr-names-note a { color: var(--ink-2); }

/* /account (account-page.js) */
.acct { padding-block: 28px 40px; display: grid; gap: 18px; }
.acct-head { display: grid; gap: 4px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.acct-head h1 { font: 800 clamp(34px, 6vw, 46px)/1 var(--cond); }
.acct-out { display: grid; gap: 14px; justify-items: start; padding: 18px 20px; border: var(--line); border-radius: var(--r); background: var(--panel, #fff); box-shadow: var(--drop); }
.acct-out[hidden], .acct-grid[hidden] { display: none; }
.acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.acct-card { display: grid; gap: 10px; align-content: start; padding: 16px 18px; border: var(--line); border-radius: var(--r); background: var(--paper); min-width: 0; }
.acct-card.lead { box-shadow: var(--drop); }
.acct-card.wide { grid-column: 1 / -1; }
.acct-k { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.acct-k h2 { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.acct-bal { font: 800 46px/1 var(--cond); font-variant-numeric: tabular-nums; display: grid; gap: 4px; }
.acct-bal small { font: 500 13px var(--sans); color: var(--ink-3); }
.acct-plan { font: 800 26px var(--cond); }
.acct-note { font-size: 13.5px; color: var(--ink-3); }
.acct-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.acct-set { margin: 0; display: grid; }
.acct-set div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); }
.acct-set div:first-child { border-top: 0; }
.acct-set dt { color: var(--ink-2); font-size: 14px; } .acct-set dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.acct-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.acct-links form { margin: 0; }
.acct-link { all: unset; cursor: pointer; justify-self: start; font: 600 14px var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.acct-link.quiet { color: var(--ink-3); text-decoration-color: var(--rule); }
.acct-link:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 2px; }
/* Your agents: below the account, open to everyone; the setup opens under its button */
.acct-card.agents { margin-top: 16px; scroll-margin-top: 84px; }   /* clear of the sticky header */
.ag-setup { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--rule); }
.ag-setup[hidden] { display: none; }
.ag-setup h3 { margin: 10px 0 0; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ag-setup p { margin: 0; color: var(--ink-2); font-size: 15px; }
.ag-url { display: flex; align-items: stretch; border: 2px solid var(--ink); border-radius: 3px; overflow: hidden; }
.ag-url code { flex: 1; min-width: 0; padding: 9px 12px; font: 600 13.5px var(--mono); color: var(--ink); background: var(--bg); word-break: break-all; }
.ag-url button { all: unset; cursor: pointer; padding: 0 16px; font: 700 14px var(--sans); background: #FFD400; color: #111; border-left: 2px solid var(--ink); }
.ag-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-tabs button { all: unset; cursor: pointer; padding: 5px 10px; font: 600 13.5px var(--sans); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; }
.ag-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.ag-tools { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; display: grid; gap: 4px; } .ag-tools b { color: var(--ink); }
@media (max-width: 640px) { .acct-grid { grid-template-columns: 1fr; } .acct-bal { font-size: 40px; } }

.wr-head-links { display: inline-flex; gap: 14px; align-items: baseline; }

/* /account: the plan, the month's answers, and the three plans (square corners, ink lines) */
.acct-meter { display: grid; gap: 6px; }
.am-bar { height: 10px; border: 1.5px solid var(--ink); background: var(--paper); } .am-bar i { display: block; height: 100%; background: var(--ink); width: 0; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plans .plan { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1.5px solid var(--rule); min-width: 0; }
.plans .plan.on { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.p-name { margin: 0; font: 800 20px var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.p-price { margin: 0; font: 800 30px/1 var(--cond); } .p-price small { font: 500 13px var(--sans); color: var(--ink-3); }
.plans ul { margin: 4px 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.plans ul li { padding-left: 14px; position: relative; } .plans ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--ink); border-radius: 0; box-shadow: none; }
.p-go { all: unset; cursor: pointer; margin-top: auto; text-align: center; padding: 8px 10px; border: 2px solid var(--ink); background: var(--chip); color: #111; font: 800 14px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.p-go[disabled] { background: var(--panel, #fff); color: var(--ink-3); border-color: var(--rule); cursor: default; }
.p-go:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 2px; }
.plan-msg { margin: 10px 0 0; font-size: 14px; color: var(--ink); } .plan-msg a { color: inherit; font-weight: 700; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* the plan's sky: a printed stamp across the card's top, its weather named in the corner */
.plans .plan { padding-top: 0; }
.p-sky { position: relative; margin: 0 -14px 6px; height: 116px; background: var(--sky); border-bottom: 1.5px solid var(--ink); display: grid; place-items: center; overflow: hidden; }
.p-sky .wx { height: 100%; width: auto; display: block; }
.p-wx, .p-here { position: absolute; z-index: 1; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border: 1.5px solid var(--ink); background: var(--panel, #fff); color: var(--ink); }
.p-wx { left: 8px; bottom: 8px; } .p-here { right: 8px; top: 8px; background: var(--chip); color: #111; }
.p-why { margin: -2px 0 2px; font-size: 13.5px; color: var(--ink-2); font-style: italic; }
.sky-aurora.plan .p-sky .wx { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- /login: one card, the forecast's look ---------- */
.login-page { min-height: 100vh; }
.lg { max-width: 440px; margin: 0 auto; padding-inline: 16px; padding-block: 40px 56px; display: flex; flex-direction: column; gap: 18px; }
.lg-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 20px var(--cond); text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.lg-card { background: var(--panel); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); border-radius: 2px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.lg-agent { margin: 0; padding: 8px 10px; background: color-mix(in srgb, var(--chip) 35%, var(--panel)); border: 1.5px solid var(--ink); font-weight: 600; font-size: 14px; }
.lg-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); }
.lg-tabs button { all: unset; cursor: pointer; text-align: center; padding: 9px 6px; font: 800 14px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.lg-tabs button + button { border-left: 2px solid var(--ink); }
.lg-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.lg-tabs button:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 2px; }
.lg h1 { margin: 4px 0 0; font: 800 32px/1.05 var(--cond); }
.lg-sub { margin: -4px 0 4px; color: var(--ink-2); font-size: 15px; }
#lg-form { display: flex; flex-direction: column; gap: 12px; }
.lg-f { display: flex; flex-direction: column; gap: 5px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lg-f input { font: 400 16px var(--sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px; padding: 10px 11px; text-transform: none; letter-spacing: 0; width: 100%; box-sizing: border-box; }
.lg-f input:focus { outline: 3px solid color-mix(in srgb, var(--chip) 70%, transparent); outline-offset: 0; }
.lg-f small { font: 400 12.5px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.lg-pw { display: flex; } .lg-pw input { flex: 1; min-width: 0; border-right: 0; }
.lg-pw button { all: unset; cursor: pointer; padding: 0 12px; border: 1.5px solid var(--ink); font: 700 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--panel); }
.lg-err { margin: 0; padding: 8px 10px; border: 1.5px solid #C2410C; color: #C2410C; font-size: 14px; background: color-mix(in srgb, #C2410C 8%, var(--panel)); }
.lg-go { all: unset; cursor: pointer; text-align: center; padding: 12px; background: var(--chip); color: #111; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 800 16px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.lg-go:disabled { opacity: .6; cursor: default; } .lg-go:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 3px; }
.lg-or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.lg-alt { text-align: center; padding: 10px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font: 700 14px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.lg-fine { margin: 0; text-align: center; font-size: 12.5px; color: var(--ink-3); }

/* /account: the notice line, connected apps and API keys */
.acct-flash { margin: 0 0 14px; padding: 10px 12px; border: 2px solid var(--ink); background: color-mix(in srgb, var(--chip) 30%, var(--panel)); font-weight: 600; }
.ag-mine { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; border-top: 1.5px solid var(--rule); padding-top: 12px; }
.ag-mine h3 { margin: 6px 0 0; font: 800 15px var(--cond); text-transform: uppercase; letter-spacing: .06em; }
.ag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ag-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ag-list li > span { display: flex; flex-direction: column; min-width: 0; }
.ag-list li small { color: var(--ink-3); font-size: 12.5px; }
.ag-list li.quiet { color: var(--ink-3); font-size: 14px; }
.ag-newkey { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-newkey input { flex: 1; min-width: 180px; font: 400 15px var(--sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px; padding: 8px 10px; }
.acct-out .acct-acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* first visit: what this is, one tap to get it. White panel under ink so it never stacks yellow on the yellow sky below */
.rd-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 22px; padding: 20px 24px; background: var(--panel, #fff); border: var(--line); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); }
.rd-intro-k { font: 700 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.rd-intro h1 { margin: 4px 0 0; font: 800 30px/1.05 var(--cond); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); max-width: 30ch; }
.joined .rd-intro { display: none; }
.rd-intro p:not(.rd-intro-k) { margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); max-width: 52ch; }
.rd-intro-go, .rd-join-go { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.rd-tg { display: inline-block; background: #111; color: #FFD400; border: 2px solid #111; border-radius: var(--r); box-shadow: 3px 3px 0 var(--chip); padding: 12px 20px; font: 800 18px var(--cond); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.rd-tg:active, .rd-join .rd-cta:active { transform: translate(3px, 3px); box-shadow: none; }
.rd-alt { font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.rd-join .rd-alt { color: #111; }
@media (max-width: 640px) {
  .rd-intro { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .rd-intro h1 { font-size: 26px; }
  .rd-intro-go, .rd-join-go { align-items: stretch; text-align: center; }
  .rd-tg { text-align: center; }
}

/* terms and privacy: one document under ink, set for reading */
.lgl { max-width: 760px; margin: 0 auto; padding: 32px 16px 56px; }
.lgl .lg-brand { margin-bottom: 22px; }
.lgl-doc { background: var(--panel, #fff); border: var(--line); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); padding: 30px 34px 34px; }
.lgl-k { font: 700 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.lgl-doc h1 { margin: 6px 0 0; font: 800 44px/1 var(--cond); text-transform: uppercase; letter-spacing: .01em; }
.lgl-date { margin-top: 8px; font: 500 12.5px var(--mono); color: var(--ink-3, var(--ink-2)); }
.lgl-lead { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--ink); font-size: 18px; line-height: 1.55; color: var(--ink); }
.lgl-doc h2 { margin: 26px 0 0; font: 800 21px var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.lgl-doc p, .lgl-doc li { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 66ch; }
.lgl-doc ul { margin: 8px 0 0; padding-left: 20px; }
.lgl-doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lgl-foot { display: flex; gap: 18px; justify-content: center; margin-top: 22px; font: 600 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lgl-foot a { color: var(--ink-2); text-decoration: none; }
@media (max-width: 640px) { .lgl-doc { padding: 22px 18px 26px; } .lgl-doc h1 { font-size: 36px; } }
/* in the dark the black button would sink into the panel: it turns sun yellow, ink text, a pale hard shadow */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-tg { background: var(--chip); color: #111; border-color: var(--chip); box-shadow: 3px 3px 0 #F3F5F8; } }
:root[data-theme="dark"] .rd-tg { background: var(--chip); color: #111; border-color: var(--chip); box-shadow: 3px 3px 0 #F3F5F8; }

#plans-out { margin: 0; }

/* the yearly option under a paid plan's price, and its quieter button */
.p-year { margin: -2px 0 6px; font: 600 12.5px var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.p-yr { all: unset; cursor: pointer; margin-top: 6px; text-align: center; padding: 6px 10px; border: 2px solid var(--ink); background: var(--panel, #fff); color: var(--ink); font: 800 13px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.p-yr:focus-visible { outline: 3px solid var(--accent, #1E6FD9); outline-offset: 2px; }

/* Your call (call.js): three weather buttons under the report card. Before the open they take a tap; once called, each
   shows the crowd's share; while the market is open they lock and a live line says where the S&P stands; at the close
   the strip leads with the result. The streak dial is the logo's sun, its rays filling one a day. */
.wr-call[hidden] { display: none; }
.wr-call .wx .night { display: none !important; } .wr-call .wx .day { display: inline !important; }   /* the call words are the day's: always the sun */
.wc-clock { font: 600 12.5px var(--mono); color: var(--ink-2); white-space: nowrap; }
.st-open .wc-clock { color: var(--ink); }
.wc-q { font: 800 26px/1.15 var(--cond); margin-top: 6px !important; text-wrap: balance; }
.wc-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.wc-opt { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 10px 8px 12px; min-height: 44px;
  background: var(--paper); color: var(--ink); border: var(--line); border-radius: var(--r); box-shadow: 3px 3px 0 var(--ink);
  font: inherit; text-align: center; cursor: pointer; transition: transform .08s, box-shadow .08s, background-color .12s; -webkit-tap-highlight-color: transparent; }
.wc-opt .wc-ic { width: 64px; height: 54px; } .wc-opt .wc-ic svg { width: 100%; height: 100%; display: block; }
.wc-opt b { font: 800 22px/1.05 var(--cond); letter-spacing: .02em; text-transform: uppercase; }
.wc-opt small { font: 500 13px/1.3 var(--sans); color: var(--ink-2); text-wrap: balance; }
.st-open .wc-opt:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.st-open .wc-opt:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.wc-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wc-opt.on.wc-sunny { background: var(--sun); } .wc-opt.on.wc-cloudy { background: var(--mist); } .wc-opt.on.wc-stormy { background: var(--storm); }
.wc-opt.on { box-shadow: inset 0 0 0 1.5px var(--ink), 3px 3px 0 var(--ink); }
.wc-opt.on small { color: var(--ink); }
.wc-opt.on::after { content: ""; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 2px; background: var(--ink); }
.wc-opt.on::before { content: ""; position: absolute; z-index: 1; top: -5px; right: -1px; width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }   /* the tick, in the page's paper colour on an ink square: reads in both themes */
.wr-call:not(.st-open) .wc-opt { cursor: default; }
.wr-call:not(.st-open) .wc-opt:not(.on) { opacity: .42; box-shadow: none; }
/* the crowd's share, revealed once you've called: a bar along the foot of each button */
.wc-share { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 8px; }
.wc-share i { display: block; height: 8px; background: var(--ink); min-width: 2px; }
.wc-share em { font: 700 12.5px var(--mono); font-style: normal; margin-left: auto; }
.wc-share::before { content: ""; order: 0; }
.wc-note { margin-top: 12px !important; font-size: 14px; color: var(--ink-2); }
.wc-note.err { color: var(--bad); font-weight: 600; }
.wc-live { margin-top: 14px !important; font-size: 16px; }
.wc-live .wr-dot { display: inline-block; vertical-align: 1px; margin-right: 8px; }
.wc-live b { font-weight: 800; }
/* the last session's result, leading the strip from the close until the next open */
.wc-last { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 0 0 14px; border-bottom: 1.5px dashed var(--rule); }
.wc-last .wc-ic { width: 52px; } .wc-last .wc-ic svg { width: 100%; height: auto; display: block; }
.wc-last p { display: grid; gap: 1px; }
.wc-last p b { font: 800 21px/1.1 var(--cond); }
.wc-last p span { font-size: 14px; color: var(--ink-2); }
.wc-stamp { font: 800 16px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px 5px; border: 2.5px solid currentColor; border-radius: 2px; transform: rotate(-4deg); white-space: nowrap; }
.wc-stamp.hit { color: var(--good); } .wc-stamp.miss { color: var(--ink-3); }
/* the streak and the points */
.wc-foot { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed var(--rule); }
.wc-foot.first { grid-template-columns: 44px minmax(0, 1fr); }
.wc-dial { flex: 0 0 auto; width: 44px; height: 44px; overflow: visible; }
.wc-dial path { fill: none; stroke: var(--rule); stroke-width: 4.6; stroke-linecap: round; }
.wc-dial path.on { stroke: var(--ink); }
.wc-foot p { display: grid; gap: 1px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.wc-foot p b { font: 800 19px/1.1 var(--cond); color: var(--ink); letter-spacing: .01em; }
.wc-foot .wc-tot { text-align: right; }
.wc-foot.first p { display: block; white-space: normal; font-size: 14.5px; line-height: 1.45; }
.wc-foot.first p b { font: 700 14.5px var(--sans); letter-spacing: 0; }
@media (max-width: 560px) {
  .wc-q { font-size: 23px; }
  .wc-opts { gap: 8px; }
  .wc-opt { padding: 8px 4px 10px; }
  .wc-opt .wc-ic { width: 52px; height: 44px; }
  .wc-opt b { font-size: 19px; }
  .wc-opt small { font-size: 12px; }
  .wr-call .wr-head { flex-wrap: wrap; gap: 2px 12px; }
  .wc-last { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .wc-last .wc-ic { width: 40px; }
  .wc-last p b { font-size: 19px; }
}
/* narrow phones (Telegram's panel included): the stamp drops under the result, the points under the streak */
@media (max-width: 360px) {
  .wc-last { grid-template-columns: 40px minmax(0, 1fr); }
  .wc-last .wc-stamp { grid-column: 2; justify-self: start; margin-top: 2px; }
}
@media (max-width: 420px) {
  .wc-foot { grid-template-columns: 40px minmax(0, 1fr); row-gap: 4px; }
  .wc-dial { width: 40px; height: 40px; grid-row: span 2; }
  .wc-foot .wc-tot { grid-column: 2; text-align: left; display: block; }
  .wc-foot .wc-tot b { font: 700 14px var(--sans); }
  .wc-foot .wc-tot b::after { content: " · "; font-weight: 400; color: var(--ink-2); }
  .wc-foot.first .wc-dial { grid-row: auto; }
}
@media (min-width: 761px) {
  .wc-opt { grid-template-columns: 64px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 14px; row-gap: 0; padding: 12px 18px 12px 14px; text-align: left; }
  .wc-opt .wc-ic { grid-row: span 2; }
  .wc-opt b { align-self: end; } .wc-opt small { align-self: start; }
  .wc-share { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .wc-opt { transition: none; } }
/* after calling: get the result (Telegram or a calendar reminder), and share */
.wc-get { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border: var(--line); border-radius: var(--r); background: var(--bg); }
.wc-get p { display: grid; gap: 1px; }
.wc-get p b { font: 800 19px/1.15 var(--cond); }
.wc-get p span { font-size: 13.5px; color: var(--ink-2); }
.wc-get-go { display: flex; gap: 8px; }
.wc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink);
  font: 700 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.wc-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.wc-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.wc-btn.tg { background: var(--chip); color: #111; }
.wc-btn.ghost { box-shadow: none; }
.wc-acts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; }
.wc-sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(17, 20, 24, .62); }
.wc-sheet-in { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 12px; padding: 14px; background: var(--panel); color: var(--ink); border: var(--line); border-radius: var(--r); box-shadow: var(--drop); }
.wc-sheet-in img { width: 100%; max-height: 58dvh; object-fit: contain; border: 2px solid var(--ink); background: var(--bg); }
.wc-sheet-in p { font-size: 14.5px; color: var(--ink-2); }
.wc-sheet-go { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 420px) { .wc-get-go { width: 100%; } .wc-get-go .wc-btn { flex: 1; } }

/* earnings briefs under the reader's names (read.js earnings) */
.we-h { margin-top: 16px !important; padding-top: 12px; border-top: 1.5px dashed var(--rule); }
.wr-earn { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.wr-earn li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; }
.we-t { display: grid; gap: 5px; color: var(--ink); text-decoration: none; }
.we-t b { font: 700 15px var(--mono); }
.we-marks { display: flex; gap: 3px; }
.we-marks i { width: 11px; height: 11px; border: 1.5px solid var(--ink); border-radius: 1px; }
.we-marks i.beat { background: var(--good); } .we-marks i.miss { background: var(--paper); }
.wr-earn p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.wr-earn p b { color: var(--ink); }
.we-when { display: block; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 1px; }
@media (max-width: 420px) { .wr-earn li { grid-template-columns: 1fr; gap: 4px; } .we-t { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; } }

/* Wallet weather (wallets.js): an address read like the weather; positions as rows with a ten-day room gauge */
.wa-hero { display: grid; gap: 10px; padding: 22px 24px 24px; background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); }
.wa-k { font: 700 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.wa-plan { background: var(--ink); color: var(--paper); padding: 3px 7px 2px; border-radius: 2px; letter-spacing: .08em; }
.wa-hero h1 { font: 800 clamp(30px, 6vw, 44px)/1.02 var(--cond); }
.wa-lede { color: var(--ink-2); font-size: 16px; max-width: 640px; }
.wa-form { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 10px; margin-top: 6px; width: 100%; max-width: 820px; }
.wa-form input { min-width: 0; height: 46px; padding: 0 14px; border: var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); font: 500 15px var(--mono); }
.wa-form input#wllabel { font-family: var(--sans); }
.wa-form input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.wa-form button { height: 46px; padding: 0 20px; border: 2px solid #111; border-radius: 3px; background: var(--chip); color: #111; font: 800 16px var(--cond); letter-spacing: .06em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.wa-form button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.wa-form button:disabled { opacity: .6; cursor: progress; }
.wa-err { color: var(--bad); font-weight: 600; font-size: 14.5px; }
.wa-err[hidden], #wlpreview[hidden] { display: none; }
.wa-listh { margin: 6px 0 -6px; }
.wa-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14.5px; color: var(--ink-2); }
.wa-card { background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: var(--drop); padding: 16px 20px 18px; display: grid; gap: 14px; }
#wllist { display: grid; gap: 18px; }
.wa-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.wa-name h2 { font: 800 26px/1.05 var(--cond); }
.wa-addr { display: flex; align-items: center; gap: 8px; margin-top: 3px !important; }
.wa-addr code { font: 500 13.5px var(--mono); color: var(--ink-2); }
.wa-copy, .wa-x { background: none; border: 0; padding: 2px 0; color: var(--ink-2); font: 600 13px var(--sans); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; }
.wa-acts { display: flex; align-items: center; gap: 14px; }
.wa-alert { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--sans); cursor: pointer; }
.wa-alert input { width: 18px; height: 18px; accent-color: var(--ink); }
.wa-watch { height: 40px; padding: 0 16px; border: 2px solid #111; border-radius: 3px; background: var(--chip); color: #111; font: 800 15px var(--cond); letter-spacing: .06em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.wa-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: var(--line); border-radius: var(--r); }
.wa-sum > div { padding: 10px 14px; border-right: 1.5px dashed var(--rule); }
.wa-sum > div:last-child { border-right: 0; }
.wa-sum dt { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.wa-sum dd { margin: 3px 0 0; font: 800 22px/1.1 var(--cond); }
.wa-sum .danger dd { color: var(--bad); } .wa-sum .close dd { color: #B26A00; }
.wa-pos { display: grid; border-top: 2px solid var(--ink); }
.wa-row { display: grid; grid-template-columns: 1.3fr .8fr 2fr 1fr 1.3fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1.5px dashed var(--rule); }
.wa-row.danger { background: color-mix(in srgb, var(--bad) 7%, transparent); box-shadow: inset 4px 0 0 var(--bad); padding-left: 12px; margin-left: -12px; padding-right: 12px; margin-right: -12px; }   /* bleeds into the card's padding so its columns stay in line */
.wa-c { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.wa-c b { font: 700 16px var(--mono); }
.wa-c small { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.wa-side { font: 800 11px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px 3px; border: 1.5px solid var(--ink); border-radius: 2px; }
.wa-side.long { background: color-mix(in srgb, var(--good) 18%, var(--paper)); } .wa-side.short { background: color-mix(in srgb, var(--bad) 16%, var(--paper)); }
.wa-v { display: grid; } .wa-v b { font: 700 15.5px var(--mono); } .wa-v small { font: 600 12.5px var(--mono); }
.wa-room { display: grid; gap: 4px; }
.wa-gauge { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; height: 12px; }
.wa-gauge i { border: 1.5px solid var(--ink); border-radius: 1px; background: var(--paper); }
.wa-room.ok .wa-gauge i.on { background: color-mix(in srgb, var(--good) 70%, var(--paper)); }   /* room to spare: a calm green, not an alarm */
.wa-room.calm .wa-gauge i.on { background: color-mix(in srgb, var(--good) 35%, var(--paper)); }
.wa-room.close .wa-gauge i.on { background: #E89B0C; } .wa-room.danger .wa-gauge i.on { background: var(--bad); }
.wa-gauge i.part { background: color-mix(in srgb, var(--good) 30%, var(--paper)); }
.wa-room.close .wa-gauge i.part { background: color-mix(in srgb, #E89B0C 45%, var(--paper)); } .wa-room.danger .wa-gauge i.part { background: color-mix(in srgb, var(--bad) 45%, var(--paper)); }
.wa-room.calm .wa-gauge i { border-color: var(--ink-3); }
.wa-room small { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.wa-room.danger small { color: var(--bad); font-weight: 700; } .wa-room.close small { color: #9A5B00; font-weight: 600; }
.wa-f { display: grid; } .wa-f small { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .wa-f b { font: 600 13.5px var(--sans); }
.wa-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.wa-tag { font: 600 11.5px var(--sans); padding: 2px 6px; border: 1.5px solid var(--rule); border-radius: 2px; color: var(--ink-2); white-space: nowrap; }
.wa-tag.crowd { border-color: var(--ink); color: var(--ink); background: var(--chip); color: #111; }
.wa-more, .wa-empty { font-size: 14px; color: var(--ink-3); }
.wa-spot { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.wa-spot span { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-plan { background: var(--chip); color: #111; } }
:root[data-theme="dark"] .wa-plan { background: var(--chip); color: #111; }
@media (max-width: 760px) {
  .wa-form { grid-template-columns: 1fr; }
  .wa-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-sum > div:nth-child(2) { border-right: 0; } .wa-sum > div:nth-child(-n+2) { border-bottom: 1.5px dashed var(--rule); }
  .wa-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .wa-room, .wa-tags { grid-column: 1 / -1; }
  .wa-v { text-align: right; }
  .wa-f { grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
}

.wa-pos.folded .wa-row:nth-child(n+7) { display: none; }
.wa-unfold { justify-self: start; background: none; border: 0; padding: 4px 0; color: var(--ink); font: 700 14px var(--sans); text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 3px; text-underline-offset: 3px; cursor: pointer; }
/* invite friends (call.js): both get a week of Pro once the friend has called on three days */
.wc-invite { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border: 1.5px dashed var(--ink); border-radius: var(--r); }
.wc-invite[hidden] { display: none; }
.wc-invite p { display: grid; gap: 1px; }
.wc-invite p b { font: 800 18px/1.15 var(--cond); }
.wc-invite p span { font-size: 13.5px; color: var(--ink-2); }
.wc-invite p small { font: 600 12.5px var(--mono); color: var(--ink); margin-top: 3px; }
.wc-invite .wc-btn:disabled { opacity: .5; cursor: progress; }
@media (max-width: 420px) { .wc-invite .wc-btn { width: 100%; } }
.wa-try { font-size: 14px; color: var(--ink-2); }
/* a report's own words, summarised (the Fed's minutes): a readable paragraph, not a headline and not a link */
#wrlanded .wl-doc { margin: 14px 0 0; padding: 12px 16px 14px; border-left: 3px solid var(--ink); background: color-mix(in srgb, var(--mist) 45%, transparent); max-width: 78ch; }
#wrlanded .wl-doc p { margin-top: 4px; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
#wrlanded .wl-why + .wl-doc { margin-top: 12px; }
/* how people took it: a sentence and one fixed-width bar, whatever the number of posts */
#wrlanded .wl-gist { margin-top: 8px; font: 600 16px/1.45 var(--sans); color: var(--ink); }
.wl-bar { display: flex; gap: 2px; height: 14px; margin-top: 10px; border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; background: var(--ink); }
.wl-seg { display: block; flex-grow: 0; flex-shrink: 1; min-width: 4px; }
.wl-seg.m-neither { flex-grow: 1; }
.wl-seg.m-worried { background: var(--mood-worried); } .wl-seg.m-upbeat { background: var(--chip); } .wl-seg.m-neither { background: var(--mood-news); }

/* Your call: the record, a strip of day tiles (the sky the S&P closed under, a mark for your call) */
.wc-days { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--rule); }
.wc-foot.first + .wc-days, .wc-days + .wc-foot.first { margin-top: 12px; }
#wrcall .wc-dk { display: flex; align-items: baseline; gap: 10px; }
.wc-dk b { font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.wc-dk span { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.wc-dts { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.wc-dt { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 50px; display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px; border: 1.5px solid var(--rule); border-radius: 2px; background: var(--panel, #fff); }
.wc-dt small { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.wc-dt svg { width: 30px; height: auto; display: block; }
.wc-dt i { width: 18px; height: 18px; display: block; font-style: normal; } .wc-dt i svg { width: 100%; height: 100%; display: block; }
.wc-dt.k-hit i { color: #1E7F4F; }
.wc-dt.k-miss i { color: #B3261E; }
.wc-dt.k-none i { color: var(--ink-3); }
/* a finished day wears its weather (the same flat colours as the report card); the day still to come stays paper,
   dashed, its weekday on the yellow chip */
.wc-dt:not(.k-wait) { border-color: var(--ink); }
/* a finished day says how your call went: green right, red wrong, plain when you sat it out (the icon keeps the sky) */
.wc-dt.k-hit { background: #D6F0DF; } .wc-dt.k-miss { background: #F9D7D2; } .wc-dt.k-none { background: var(--mist); border-color: var(--rule); }
.wc-dt.k-wait { border-style: dashed; border-color: var(--ink); background: var(--panel, #fff); }
.wc-dt.k-wait small { background: var(--chip); color: #111; padding: 0 4px; }
.wc-dt.k-wait i { color: var(--ink); }
.wc-dt.k-none i, .wc-dt.k-none small { color: var(--ink-2); }
.wc-dt.on { border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.wc-dt:focus-visible { outline: 2px solid var(--chip); outline-offset: 2px; }
#wrcall .wc-dnote { margin-top: 8px; font-size: 14px; color: var(--ink-2); }

/* Your call: which day the call is for, and until when it can change */
#wrcall .wc-yours { margin-top: 18px; padding: 9px 12px; border-left: 3px solid var(--ink); background: color-mix(in srgb, var(--chip) 18%, transparent); font-size: 14.5px; color: var(--ink-2); }
.wc-yours b { color: var(--ink); font-weight: 700; }

:root[data-theme="dark"] .wc-dt.k-hit i { color: #5FD39A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wc-dt.k-hit i { color: #5FD39A; } }

:root[data-theme="dark"] .wc-dt.k-hit { background: #183A28; } :root[data-theme="dark"] .wc-dt.k-miss { background: #45201D; } :root[data-theme="dark"] .wc-dt.k-miss i { color: #FF8A80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wc-dt.k-hit { background: #183A28; } :root:not([data-theme="light"]) .wc-dt.k-miss { background: #45201D; } :root:not([data-theme="light"]) .wc-dt.k-miss i { color: #FF8A80; } }

/* the day tiles inside the streak row: beside the streak and points on a wide card, under them on a phone */
#wrcall .wc-foot.with-days { grid-template-columns: 44px auto auto minmax(0, 1fr); column-gap: 28px; }
#wrcall .wc-foot.with-days .wc-tot { text-align: left; }
#wrcall .wc-foot .wc-days { margin: 0; padding: 0; border: 0; justify-self: end; min-width: 0; max-width: 100%; }
#wrcall .wc-foot .wc-dts { margin-top: 0; justify-content: flex-end; }
#wrcall .wc-foot .wc-dnote { text-align: right; white-space: normal; display: block; font-size: 13.5px; }
@media (max-width: 720px) {
  #wrcall .wc-foot.with-days { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  #wrcall .wc-foot.with-days .wc-tot { grid-column: 2; }
  #wrcall .wc-foot .wc-days { grid-column: 1 / -1; justify-self: stretch; margin-top: 6px; }
  #wrcall .wc-foot .wc-dts { justify-content: flex-start; }
  #wrcall .wc-dt { width: 44px; } #wrcall .wc-dt > svg { width: 26px; } #wrcall .wc-dts { gap: 5px; }
  #wrcall .wc-foot .wc-dnote { text-align: left; }
}

/* Wallet weather: an address with nothing to read */
.wa-card .wa-nonek { margin-top: 14px; font: 800 20px/1.15 var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.wa-card .wa-nonep { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.wa-none .wa-watch { margin-top: 14px; }

/* Top traders (Advanced, on /wallets): where the most profitable traders stand per coin, and their day's moves */
.tt { margin-top: 28px; padding: 22px 24px 24px; background: var(--paper); border: var(--line); border-radius: var(--r); box-shadow: 6px 6px 0 var(--ink); }
.tt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tt-asof { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tt .tt-h { margin-top: 8px; font: 800 clamp(24px, 4.4vw, 32px)/1.08 var(--cond); color: var(--ink); }
.tt .tt-who { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 70ch; }
.tt-cols, .tt-row { display: grid; grid-template-columns: 110px 130px minmax(120px, 1fr) 130px 84px; align-items: center; gap: 14px; }
.tt-cols { margin-top: 18px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tt-list, .tt-moves { list-style: none; margin: 0; padding: 0; }
.tt-row { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.tt-coin b { font: 800 17px var(--cond); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.tt-coin small { margin-left: 6px; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tt-n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tt-bar { display: flex; gap: 2px; height: 12px; }
.tt-bar i { display: block; min-width: 2px; }
.tt-short { background: var(--bad); } .tt-long { background: var(--good); }
.tt-v { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.tt .up { color: var(--good); } .tt .down { color: var(--bad); }
.tt-day { display: flex; gap: 8px; font-variant-numeric: tabular-nums; } .tt-day.quiet { color: var(--ink-3); }
.tt .tt-k { margin-top: 22px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.tt-move { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.tt-dot { width: 10px; height: 10px; margin-top: 5px; display: block; } .tt-dot.up { background: var(--good); } .tt-dot.down { background: var(--bad); }
.tt-move p { display: grid; gap: 1px; } .tt-move b { font-weight: 600; color: var(--ink); } .tt-move span { font-size: 13.5px; color: var(--ink-2); }
.tt .tt-none, .tt .tt-up { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.tt-up a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 3px; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .tt { padding: 18px 16px 20px; }
  .tt-cols { display: none; }
  .tt-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; column-gap: 10px; }
  .tt-coin { grid-area: 1 / 1; } .tt-day { grid-area: 1 / 2; justify-self: end; }
  .tt-n { grid-area: 2 / 1; font-size: 13px; } .tt-v { grid-area: 2 / 2; justify-self: end; font-size: 13px; }
  .tt-bar { grid-area: 3 / 1 / 4 / 3; }
  .tt .tt-dayk { display: inline; font-style: normal; font-size: 12.5px; color: var(--ink-3); }
  .tt-day { flex-wrap: wrap; gap: 4px 8px; }
  .tt-head { flex-wrap: wrap; row-gap: 4px; } .tt-head .wa-k { white-space: nowrap; } .tt-asof { width: 100%; }
}

/* Top traders: the key, the folded list, the empty last-day column */
.tt .tt-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.tt-key span { display: inline-flex; align-items: center; gap: 6px; } .tt-key i { width: 14px; height: 10px; display: block; }
.tt-key .tt-keyn { color: var(--ink-3); }
.tt-list.folded .tt-row:nth-child(n+9) { display: none; }
.tt-all { all: unset; cursor: pointer; margin-top: 10px; font: 700 14px var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--chip); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.tt-day b { font-weight: 600; font-size: 13px; white-space: nowrap; }
.tt-day { min-width: 0; overflow: hidden; }
.tt.no-day .tt-day { display: none; }
@media (min-width: 721px) {
  .tt-cols, .tt-row { grid-template-columns: 110px 130px minmax(120px, 1fr) 130px 150px; }
  .tt.no-day .tt-cols, .tt.no-day .tt-row { grid-template-columns: 110px 130px minmax(120px, 1fr) 130px; }
}

.tt-dayk { display: none; }