:root { /* Dark is the site's default, so declare it: without this the browser paints scrollbars and native controls (the calendar's month inputs, autofill) from the OS preference, which the header's theme button can now disagree with. */ color-scheme: dark; --bg: #0f1216; --surface: #171b21; --surface-2: #1e242c; --border: #2a323c; --text: #e7ecf2; --muted: #9aa6b2; --accent: #f0803c; /* Discord's brand blurple. Fixed in both schemes on purpose: it identifies the provider, so it is their colour rather than one of ours to re-theme. */ --discord: #5865f2; /* temperature grades: 9-step diverging cold -> green -> hot (colorblind-safe). rec-* are the "Near Record" danger tiers — deliberately dark/saturated. */ --rec-cold: #0a2f6b; --very-cold: #2166ac; --cold: #4393c3; --cool: #92c5de; --normal: #4a9d5b; /* middle of the diverging temp scale = green */ --warm: #f6c18a; --hot: #ef9351; --very-hot: #dd6b52; --rec-hot: #8f0e20; /* precipitation: "dry" + 9 rain-intensity tiers, light green -> teal -> dark navy */ --dry: #c9a24a; --wet-1: #d9f0d3; --wet-2: #b7e2b1; --wet-3: #8fd18f; --wet-4: #5cba9f; --wet-5: #35a1c0; /* middle of the rain scale */ --wet-6: #2b8cbe; --wet-7: #226bb3; --wet-8: #164a97; --wet-9: #08306b; } /* The light palette, reachable two ways: the reader picked light on the header's theme button (theme.js writes data-theme on ), or they never picked anything and their OS asks for light. The `:not([data-theme="dark"])` is what makes an explicit choice outrank the system — without it nobody on a light OS could ever force dark. It is also why only the light half is written twice: `:root` above still holds dark, so the dark override needs no block of its own. THE TWO BLOCKS ARE DELIBERATELY IDENTICAL. Change one, change the other. */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef1f5; --border: #dde3ea; --text: #1a2029; --muted: #5b6673; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef1f5; --border: #dde3ea; --text: #1a2029; --muted: #5b6673; } } * { box-sizing: border-box; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.45; } header { padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--surface); } /* Full width, unlike `main`, which stays a centred column — and one fixed height. Both are deliberate, and both replaced something that was implicit: The row was capped at 1152px to line the logo up with the content edges, but a signed-in header needs ~1254px (lockup + seven tabs + an account button carrying an email + theme + °F/°C) and the cap held until the 1680px step. From 1200 to 1679 — most laptops — the wordmark rendered UNDER the nav. The width to fix it was already there and empty: ~450px of it at 1600px. min-height fixes the other half. The bar used to be as tall as whatever was inside it: 46px nav pills gave 83px, but once the nav folds into the hamburger the tallest thing left is the 43px mark and it shrank to 72px. */ .brand { display: flex; align-items: center; gap: 14px; min-height: 46px; } /* flex-grow MUST stay 0. Flexible lengths resolve before auto margins, so a growing title block swallows the free space and .view-nav's margin-inline:auto gets nothing to centre with — the tabs end up hard right. Sized to its content and pinned by min-width, the lockup leaves that slack for the nav, and can never be crushed under it. padding-right is the floor on the gap when the row is tight; the 1199px block drops it, where the nav folds away. */ .brand > div:not(.unit-toggle):not(.acct) { flex: 0 0 auto; min-width: max-content; padding-right: 24px; } .logo { display: inline-flex; align-items: center; flex-shrink: 0; position: relative; top: -2px; /* optical: tile centers on the wordmark's cap height */ } .logo svg { width: 43px; height: 43px; display: block; } h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; } /* Brand wordmark: monospace stack (instrument/data feel, no webfonts) beside the mark, larger than the old Inter treatment. The mark lives INSIDE the h1 (and inside its home link on server-rendered pages) so glyph and wordmark are one lockup, aligned to each other on every page. Matched on .site-name as well as h1: the homepage renders the brand as a

so its hero headline can own the page's only h1. Without the class here the lockup falls back to block layout, which baseline-aligns the mark instead of centring it (it rides ~8px high) and drops the monospace wordmark. line-height:1 is load-bearing for vertical centring. The lockup is a flex child of .brand alongside the nav, °F/°C and account controls; leaving the inherited 1.45 gives the text box ~13px of half-leading that the mark and the 36px-tall control pills do not have, so align-items:center centres the BOXES and the wordmark still reads low against the nav. Collapsing the leading makes the box the glyphs' own height, and the row lines up. */ .brand h1, .brand .site-name { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace; font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.04em; display: flex; align-items: center; gap: 10px; } /* The whole lockup is the home link on every page, so it inherits the wordmark's colour rather than looking like body copy that happens to be a link. */ .brand h1 a, .brand .site-name a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; } .brand h1 a:hover, .brand .site-name a:hover { color: var(--accent); } /* The header is ONE height on every page. It used to come in two — a tall variant carrying a per-page tagline under the wordmark, and a `compact` variant Calendar opted into because it had none. Both the taglines and the compact class are gone: a header that changes height as you move between tabs makes the whole nav row jump, which is worse than either height. Resist reintroducing a per-page variant; change this block and every page follows. */ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; } /* Larger monitors: widen the content column in steps (1440p, 2K, 4K) so pages use the screen instead of a 1200px strip. Each page's own grids (normals, calendar months, day cards) flow into the extra room. */ @media (min-width: 1680px) { main { max-width: 1440px; } } @media (min-width: 2400px) { main { max-width: 1640px; } } @media (min-width: 3400px) { main { max-width: 1880px; } } .controls { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } /* ---- shared control recipes ---- One home for the accent-button and text-input look every view reuses. The 16px input font is load-bearing (below it iOS zooms on focus); buttons keep their ≥44px touch targets in the per-component rules, which carry only each control's differences from these. */ .date-row button, .range-refresh, .find-btn, .mp-search button, .mp-confirm { border-radius: 10px; border: none; cursor: pointer; background: var(--accent); color: #1a1206; font-weight: 600; } .date-row input, .cal-range input, .day-date input, .mp-search input { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 16px; } .date-row button { padding: 11px 18px; } .date-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .date-row label { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; } /* "Today" quick-reset chip beside the target date. Outlined when the target is a past date (a clickable "jump to today"); filled accent while already on today. */ .date-row .today-chip { align-self: flex-end; padding: 9px 14px; border-radius: 10px; min-height: 40px; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); transition: background .12s ease, color .12s ease, border-color .12s ease; } .date-row .today-chip:hover { border-color: var(--accent); color: var(--text); } .date-row .today-chip.active { background: var(--accent); color: #1a1206; border-color: var(--accent); cursor: default; } .hint { color: var(--muted); font-size: 12.5px; max-width: 220px; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .placeholder p { color: var(--text); } .muted { color: var(--muted); font-size: 13.5px; } /* --- results --- */ .loc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .loc-head h2 { margin: 0 0 2px; font-size: 18px; } .loc-head .meta { color: var(--muted); font-size: 12.5px; margin: 0; } /* Context stacked top-down, one fact per line, instead of dot-joined tags. */ .loc-meta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .loc-meta li, .loc-coords { color: var(--muted); font-size: 12.5px; line-height: 1.35; } /* Day Detail/Calendar/Score's place name + coordinates (issue #52) live inline in the shared .find-bar, next to "Change location" — not a separate block below it, so no view's own content gets pushed down by however tall its .controls row happens to be. .loc-label already supplies the right look (bold, normal text color) and .find-bar's own flex row + gap:12px lays out the star (a sibling, not a child, of #loc-label — see bookmarks.js::paintIndicator()) and .loc-coords beside it. .loc-name is otherwise a plain marker class paintIndicator() looks for. Tried align-self:baseline on .loc-name/.loc-coords to fix a Firefox-only sub-pixel baseline gap between the two differently-sized text runs — reverted: mixing align-self:baseline with the row's own align-items:center (which the button and the star+nickname unit rely on) shifts the shared flex line's cross-size, throwing THEIR centering off as a side effect. Chrome already renders this correctly; not worth another cross-browser tuning fight over a sub-pixel gap in one browser (see .bkm-indicator's own comment on this). */ .share { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } .share button { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } /* Inline monochrome icons (currentColor) used in place of emoji. */ .ic { width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; } .ic-lg { width: 26px; height: 26px; } .wx { width: 1.15em; height: 1.15em; vertical-align: -0.2em; } .share button:hover { border-color: var(--accent); } /* Call-to-action into the 2-year calendar — a compact button-sized link, so the graded results stay the page's focal point. */ .cta-cal { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 10px 16px; min-height: 44px; border: none; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 700; color: #1a1206; background: linear-gradient(135deg, #f79556, #ea722c); box-shadow: 0 2px 8px rgba(240, 128, 60, .25); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .cta-cal .ic-lg { width: 18px; height: 18px; } .cta-cal:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(240, 128, 60, .35); filter: brightness(1.04); } .cta-cal:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(240, 128, 60, .3); } .cta-cal:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; } .cta-cal-icon { line-height: 1; flex-shrink: 0; display: inline-flex; } .cta-cal-arrow { font-size: 16px; font-weight: 800; flex-shrink: 0; } #chart-wrap { position: relative; margin-bottom: 22px; } #chart-wrap svg { width: 100%; height: auto; display: block; border-radius: 10px; touch-action: pan-y; } /* High / Low / Weather metric toggle above the trend chart; active tab takes the metric's own color so the control matches the chart it drives. */ .chart-toggle { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 10px; } .chart-toggle button { padding: 8px 18px; background: var(--surface); color: var(--text); border: none; cursor: pointer; font-size: 13.5px; font-weight: 600; min-height: 40px; } .chart-toggle button + button { border-left: 1px solid var(--border); } /* Beyond phones the switch shrinks to its tabs and sits centered over the chart (phones keep the full-width 4-per-row grid from the 640px rules). */ @media (min-width: 641px) { .chart-toggle { width: fit-content; margin-left: auto; margin-right: auto; } } .chart-toggle button.active[data-metric="tmax"] { background: var(--very-hot); color: #1a1206; } .chart-toggle button.active[data-metric="tmin"] { background: var(--cold); color: #10222f; } .chart-toggle button.active[data-metric="feels"] { background: var(--accent); color: #1a1206; } .chart-toggle button.active[data-metric="humid"] { background: #2ea9bf; color: #04222a; } .chart-toggle button.active[data-metric="wind"] { background: #5aa9a3; color: #08201e; } .chart-toggle button.active[data-metric="gust"] { background: #8f86d8; color: #100c26; } .chart-toggle button.active[data-metric="precip"] { background: var(--wet-6); color: #fff; } .chart-toggle button.active[data-metric="dry"] { background: #c9a24a; color: #241a04; } .chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 8px; } .chart-legend span { display: inline-flex; align-items: center; gap: 6px; } .chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .chart-legend i.swatch-band { border: 1px solid; border-radius: 3px; } .chart-legend .legend-note { font-style: italic; opacity: .85; } .chart-tip { position: absolute; z-index: 10; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: 12px; line-height: 1.5; min-width: 148px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .chart-tip .tt-date { font-weight: 700; margin-bottom: 3px; } .chart-tip .tt-grade { color: var(--muted); } .chart-tip .tt-norm { color: var(--muted); margin-top: 3px; border-top: 1px solid var(--border); padding-top: 3px; } /* Flex (not fixed 3-col) so 7 cards fill each row evenly — no lonely trailing card. */ .normals { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .normal-card { flex: 1 1 130px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; text-decoration: none; color: var(--text); cursor: pointer; transition: border-color .12s ease, background .12s ease; } .normal-card:hover { border-color: var(--accent); background: var(--surface); } /* Title on the left, grade status pinned to the top-right corner of the card. */ .normal-card .nc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; } .normal-card h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } /* Big value is the day's own reading, tinted by its grade (lifted toward the text color so dark tiers stay legible); the line under it shows the normal median. */ .normal-card .big { font-size: 22px; font-weight: 800; color: color-mix(in oklab, var(--cat, var(--text)), var(--text) 15%); } .normal-card .range { font-size: 12px; color: var(--muted); margin-top: 2px; } .normal-card .nc-grade { font-size: 11px; font-weight: 700; text-align: right; line-height: 1.2; color: color-mix(in oklab, var(--cat, var(--muted)), var(--text) 28%); } .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 4px 0 12px; } /* Plain-language "what to expect" insights (home results + calendar). A soft card of friendly climatology sentences with a leading emoji per line. */ .insights, .cal-insights { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; border-left: 3px solid var(--accent); } .insight-lead { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; } .insight-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .insight-list li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--text); } .insight-list li b { color: var(--text); font-weight: 700; } .ins-emoji { flex-shrink: 0; font-size: 16px; line-height: 1; } /* Tint the rain line's accent stripe to the mid rain-scale blue. */ .insight-list li.ins-rain { border-left: 2px solid var(--wet-5); padding-left: 8px; margin-left: -2px; } /* Wide screens: let the insight sentences flow in two columns. */ @media (min-width: 900px) { .insight-list { grid-template-columns: 1fr 1fr; gap: 8px 20px; } } /* grade-scale key (low -> high, relative categories) — swatch + name only; the percentile figures live on the full guide, not here. */ .tier-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -2px 0 8px; } .tk-seg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .tk-swatch { width: 14px; height: 10px; border-radius: 3px; flex-shrink: 0; } .tk-label { font-weight: 600; } .tk-note { margin: 0 0 16px; font-size: 12.5px; } /* --- header °F/°C unit toggle (sits at the top-right, left of the tabs) --- */ /* No margin-left: auto here. It used to be what shoved this to the far right, but auto margins SHARE the row's free space — with one here and one on each side of .view-nav the slack split three ways and the tabs sat left of centre. The nav's right-hand auto margin already pushes this whole cluster (account, theme, °F/°C) to the right edge, so a second claim on the space only fights it. */ .unit-toggle { align-self: center; flex-shrink: 0; display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; } .unit-toggle button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 8px; min-height: 38px; min-width: 44px; line-height: 1; } .unit-toggle button.active { background: var(--accent); color: #fff; } .unit-toggle button:hover:not(.active) { color: var(--text); } /* The view switcher already claims the right edge; with the toggle to its left, drop its auto-margin so the two sit together in the corner. */ /* --- header theme button (cycles Auto -> Light -> Dark, theme.js) --- One square chip rather than a third segmented control: the header row already carries the °F/°C segments, the account chip, the bell and seven view tabs, and a 3-segment switch here overflows it around 1100px. Sized and coloured as the account chip so the top-right cluster reads as one set of controls. */ .theme-toggle { align-self: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 40px; height: 40px; padding: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 11px; cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { display: block; } /* The state's name rides along only in the phone dropdown, where the control stretches to a full-width row and a lone icon would read as a mystery button. On desktop the same sentence is the button's aria-label and tooltip. */ .theme-label { display: none; font-size: 14px; font-weight: 600; } /* --- account entry (header) + auth modal --- */ /* The account button is the header's shock absorber. Everything else in the row is a fixed size or must not shrink — the lockup is pinned by min-width: max-content above, the tabs are white-space: nowrap — so if the row ever runs short, this is what gives, and .acct-name ellipsises the address. That is the whole point of the min-width: 0 chain below: without it the flex items refuse to shrink past their content and the overflow lands on the wordmark instead, which is how the signed-in header used to render "Thermog" under the nav. */ .acct { align-self: center; flex-shrink: 1; min-width: 0; position: relative; } .acct-menu, .acct-btn { min-width: 0; } .acct-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 11px; padding: 8px 12px; min-height: 40px; font-size: 14px; font-weight: 600; } .acct-btn:hover { border-color: var(--accent); } .acct-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .acct-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-menu { position: relative; } .acct-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100; min-width: 180px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); } .acct-pop[hidden] { display: none; } .acct-pop-link { display: block; text-align: left; padding: 10px 12px; border-radius: 8px; min-height: 40px; background: transparent; border: 0; color: var(--text); cursor: pointer; font: inherit; font-size: 14px; text-decoration: none; } .acct-pop-link:hover { background: var(--surface-2); } /* Notification bell + dropdown. */ .acct { display: inline-flex; align-items: center; gap: 8px; } .notif { position: relative; } .notif-btn { position: relative; padding: 8px; min-width: 40px; justify-content: center; } .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #1a1206; font-size: 11px; font-weight: 800; border-radius: 999px; line-height: 1; } .notif-badge[hidden] { display: none; } .notif-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100; width: min(360px, calc(100vw - 24px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); overflow: hidden; } .notif-pop[hidden] { display: none; } .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; } .notif-readall { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; } .notif-list { list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow-y: auto; } .notif-empty { padding: 20px 14px; text-align: center; font-size: 13px; } .notif-item { padding: 10px 12px; border-radius: 9px; cursor: default; } .notif-item.is-unread { cursor: pointer; background: color-mix(in srgb, var(--accent) 10%, transparent); } .notif-item.is-unread:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } .notif-item + .notif-item { margin-top: 2px; } .notif-item-title { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; } .notif-item.is-unread .notif-item-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .notif-item-body { font-size: 12px; color: var(--muted); margin-top: 3px; } .notif-item-time { font-size: 11px; margin-top: 3px; } .notif-manage { display: block; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; } .notif-manage:hover { background: var(--surface-2); } /* Auth modal reuses .mp-overlay/.mp-modal chrome; this styles its form body. */ .acct-modal { max-width: 400px; } .acct-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; } .acct-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); } .acct-form input { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px; } .acct-form input:focus { outline: none; border-color: var(--accent); } .acct-submit { margin-top: 2px; padding: 12px 16px; min-height: 44px; border: none; border-radius: 10px; background: var(--accent); color: #1a1206; font-weight: 700; font-size: 15px; cursor: pointer; } .acct-submit:hover { filter: brightness(1.05); } .acct-submit:disabled { opacity: .6; cursor: progress; } .acct-error { margin: 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: color-mix(in srgb, var(--rec-hot, #d64545) 20%, transparent); color: var(--text); border: 1px solid var(--rec-hot, #d64545); } .acct-error[hidden] { display: none; } /* "or / Continue with Discord" under the submit button. Hidden unless the server reports Discord configured (account.js sets [hidden]). */ .acct-alt { display: flex; flex-direction: column; gap: 10px; } .acct-alt[hidden] { display: none; } .acct-or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .acct-oauth-row { display: flex; flex-direction: column; gap: 8px; } .acct-oauth-login { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 16px; min-height: 44px; border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; } .acct-oauth-login:hover { filter: brightness(1.08); } .acct-oauth-login svg { width: 20px; height: 20px; flex: none; } .acct-oauth-login.is-discord { background: var(--discord); color: #fff; } .acct-oauth-login.is-discord svg { height: 15px; } /* Google's branding terms require their mark on white (or their own grey), with a visible border — so this one button is deliberately light in both schemes and does not follow the surface tokens. */ .acct-oauth-login.is-google { background: #fff; color: #1f1f1f; border-color: #747775; } .acct-oauth-login.is-google:hover { filter: none; background: #f2f2f2; } .acct-pop-note { display: block; padding: 9px 12px; font-size: 13px; } .acct-switch { margin: 0; font-size: 13px; color: var(--muted); text-align: center; } .acct-switch button { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; padding: 0; text-decoration: underline; } /* One-off status toast (e.g. "email verified") — neutral for both success and failure; the text says which, not the color. */ .acct-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1200; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); } .acct-toast[hidden] { display: none; } /* Undo toast for an accidentally-removed nicknamed bookmark (bookmarks.js's offerUndo()) — same chrome as .acct-toast, plus an inline action button. */ .bkm-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1200; transform: translateX(-50%); max-width: calc(100vw - 32px); border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); } .bkm-toast[hidden] { display: none; } /* Clips the depletion bar to a properly rounded corner — the bar is only 3px tall, and a corner needs both adjoining edges at least as long as the radius to render as an actual quarter-circle; asking a 3px-tall strip for a 10px corner just gets clamped to whatever fits, producing a visibly tighter curve than .bkm-toast's real one. Cutting the bar with a same-size, same-radius wrapper (overflow:hidden + border-radius:inherit) sidesteps that entirely, and doing it on an inner wrapper rather than .bkm-toast itself keeps the tooltip arrow (a ::before on .bkm-toast, sitting just outside its box) from being clipped along with it. */ .bkm-toast-inner { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; overflow: hidden; border-radius: inherit; } .bkm-toast-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bkm-toast-undo { flex-shrink: 0; background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 700; padding: 6px 10px; border-radius: 8px; } .bkm-toast-undo:hover { background: var(--surface-2); } /* Countdown bar for the undo window — shrinks from full width to nothing over UNDO_MS (bookmarks.js sets animation-duration inline to stay in sync with that one constant, rather than a second copy of "8s" living here). scaleX from the left edge, not width, so it's one composited layer instead of a layout-triggering resize every frame. Corners are handled entirely by .bkm-toast-inner's clip, not here. */ .bkm-toast-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform-origin: left; transform: scaleX(1); } .bkm-toast-bar.bkm-toast-bar-run { animation-name: bkm-toast-deplete; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes bkm-toast-deplete { to { transform: scaleX(0); } } /* Anchored to a clicked star (bookmarks.js's positionUndoToast()) instead of sitting bottom-center — top/left come from JS, so only clear the base rule's bottom-center placement here. The ::before arrow is a rotated square with two borders dropped, the standard CSS-tooltip-pointer trick; which two borders (and which edge it sits on) flips with .bkm-toast-above, depending on whether the toast landed below or above its anchor. */ .bkm-toast.bkm-toast-anchored { bottom: auto; transform: none; } .bkm-toast-anchored::before { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; background: var(--surface); transform: translateX(-50%) rotate(45deg); } .bkm-toast-anchored:not(.bkm-toast-above)::before { top: -6px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); } .bkm-toast-anchored.bkm-toast-above::before { bottom: -6px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); } /* --- alerts page (subscriptions) --- */ .alerts-loading { color: var(--muted); } .alerts-gate { max-width: 480px; margin: 24px auto; padding: 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; } .alerts-gate h2 { margin: 0; } .alerts-gate { max-width: 520px; } .alerts-lede { margin: 0; } /* The "what are alerts" steps read as a left-aligned list inside the centered card. */ .alerts-explain { text-align: left; align-self: stretch; margin: 2px 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; } .alerts-explain li { padding-left: 4px; } .alerts-eg { margin: 0; font-style: italic; } .alerts-gate-note { margin: 0; font-size: 13px; } .alerts-gate .acct-submit { max-width: 280px; } .alerts-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .alerts-toolbar .find-btn { padding: 11px 18px; min-height: 44px; } .alerts-note { margin: 0; font-size: 13px; } /* Per-device push toggle, above the account-wide alert list. */ .push-bar { border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; } .push-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .push-status { font-size: 14px; font-weight: 600; } .push-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .push-toggle { padding: 9px 16px; min-height: 44px; } .push-test-btn { min-height: 44px; padding: 9px 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 14px; } .push-test-btn:hover { border-color: var(--accent); } .push-note { margin: 0; } .sub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } @media (min-width: 720px) { .sub-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } } .sub-empty { padding: 20px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; } .sub-card { border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .sub-card.is-paused { opacity: .62; } .sub-card.is-busy { pointer-events: none; opacity: .6; } .sub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } /* Column, not a wrapping row: the kind badge (subCard() only — bkmCard() has just the name here, so this is a no-op for it) always starts its own line, rather than trailing the name when it fits and jumping to a third line only once a long name wraps to two (issue #52). */ .sub-title { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .sub-name { font-weight: 700; font-size: 15px; } .sub-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .sub-kind-observed { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); } .sub-kind-forecast { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } .sub-remove { flex-shrink: 0; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; border-radius: 9px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .sub-remove svg { width: 17px; height: 17px; } .sub-remove:hover { border-color: var(--rec-hot, #d64545); color: var(--rec-hot, #d64545); } .sub-metrics { display: flex; flex-wrap: wrap; gap: 6px; } .sub-metric { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .sub-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; } .sub-thr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .sub-active-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; } .sub-active-lbl input { width: 18px; height: 18px; accent-color: var(--accent); } /* Segmented control shared by the threshold + kind pickers. */ .seg { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; } .seg button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; padding: 7px 11px; border-radius: 7px; min-height: 38px; min-width: 40px; line-height: 1; } .seg button.active { background: var(--accent); color: #1a1206; } .seg button:hover:not(.active) { color: var(--text); } /* Alert editor modal (reuses .mp-overlay / .mp-modal chrome). */ .sub-editor { max-width: 460px; } .sub-form { display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; } .sub-form-loc { margin: 0; font-weight: 700; font-size: 15px; } .sub-field { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; } .sub-field legend { padding: 0 6px; font-size: 13px; color: var(--muted); } .sub-kind-help { margin: 0; font-size: 12px; } .metric-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .metric-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; min-height: 32px; } .metric-check input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; } .thr-range { width: 100%; accent-color: var(--accent); height: 28px; } .two-sided-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; } .two-sided-lbl input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; } .sub-form-error { margin: 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: color-mix(in srgb, var(--rec-hot, #d64545) 20%, transparent); color: var(--text); border: 1px solid var(--rec-hot, #d64545); } .sub-form-error[hidden] { display: none; } @media (max-width: 640px) { .metric-checks { grid-template-columns: 1fr; } } /* --- shared header view switcher (Map · Calendar · Day) --- */ /* The bar is split into equal, fully-clickable segments (one per page) with a clear divider between them, so the whole width is a set of obvious tabs. */ /* Three zones: brand left, tabs centre, account/theme/°F°C right. An auto margin on BOTH sides of the nav splits the row's free space evenly, parking it between the lockup and the control cluster — which is the header's centre only while those two are the same width. Signed in they are not, so this lands a few dozen px off; the min-width:1440px block below upgrades to true centring wherever there is provably room for it. This stays the base case because it never overlaps: in flow, the nav still pushes the controls right and yields when the row is tight. */ .view-nav { margin-inline: auto; align-self: center; display: inline-flex; gap: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; } /* 14px of side padding, not 18px. Seven tabs multiply it by seven, and .brand is capped at 1152px until the 1680px step — at 1200–1679 the row (lockup + nav + theme + °F/°C + account + gaps) came to exactly 1152 with the tabs at 18px, so there was no slack for the brand lockup to breathe and the wordmark sat against the first tab. Four pixels a side returns 56px to that band. */ .view-nav a { flex: 1; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 8px; white-space: nowrap; position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; } /* Divider line between adjacent tabs. Hidden around the highlighted (active) tab so its pill reads clean against the bar. */ .view-nav a + a::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 2px; border-radius: 2px; background: var(--border); } .view-nav a.active::before, .view-nav a.active + a::before { background: transparent; } .view-nav a:hover { color: var(--text); } .view-nav a.active { background: var(--accent); color: #fff; } /* Hamburger wrapper. On desktop the menu and its panel are transparent (display:contents), so the nav pills plus the injected °F/°C toggle, bell and account render inline in the header row and the hamburger summary is hidden; on phones (the 640px block) the panel becomes a dropdown behind the hamburger. */ .nav-menu { display: contents; } .nav-panel { display: contents; } /* A closed

hides its non-summary content; force the panel visible on desktop (the 640px block re-hides it behind the hamburger on phones). */ .nav-panel > .view-nav { display: inline-flex; } .nav-menu::details-content { display: contents; } /* The header's visual order — tabs · account · theme · °F/°C — set explicitly rather than left to the DOM, because the three controls are injected by whichever of their modules runs first and that differs per page: the SSR pages load units.js and account.js from base_scripts_default before base_tail's theme.js, the SPA shells load theme.js first. The phone dropdown stacks in this same order, so the 1199px block does not restate it. */ .nav-panel > .view-nav { order: 1; } .nav-panel > .acct { order: 2; } .nav-panel > .theme-toggle { order: 3; } .nav-panel > .unit-toggle { order: 4; } /* True centring — on the header rather than between its neighbours. Taking the nav out of flow is what buys that, and also what costs it the ability to push the controls right or refuse to overlap them, so it is gated on the width where the arithmetic says it cannot collide: the right cluster is at most 388px (account + theme + °F/°C, .acct-name capped at 16ch), which a centred 575px nav clears from 1428px up. Hence 1440. Below it the flow centring above stands. .acct takes the auto margin here because with .view-nav absolute, nothing else is left to push the cluster to the right edge. */ @media (min-width: 1440px) { .brand { position: relative; } .nav-panel > .view-nav { position: absolute; left: 50%; transform: translateX(-50%); margin-inline: 0; } .nav-panel > .acct { margin-left: auto; } } .nav-toggle { display: none; list-style: none; cursor: pointer; } .nav-toggle::-webkit-details-marker { display: none; } .nav-toggle svg { display: block; } /* --- calendar subpage --- */ .metric-toggle { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .metric-toggle button { padding: 10px 16px; background: var(--surface); color: var(--text); border: none; cursor: pointer; font-size: 14px; min-height: 44px; white-space: nowrap; } .metric-toggle button + button { border-left: 1px solid var(--border); } .metric-toggle button.active { background: var(--accent); color: #1a1206; font-weight: 600; } /* Metric selector block — sits below the time filters, labeling the grid it colors. */ .metric-block { margin: 0 0 18px; } .metric-block .cal-filter-label { display: block; margin: 0 0 8px; } /* Beyond phones the selector shrinks to its tabs and sits centered over the month grid (scoped under .metric-block — the Compare page's basis toggle shares .metric-toggle and must keep filling its param cell). */ @media (min-width: 641px) { .metric-block { display: flex; flex-direction: column; align-items: center; } .metric-block .cal-filter-label { text-align: center; } } /* Month/year range picker (calendar). 16px inputs avoid iOS zoom-on-focus. */ .cal-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } /* Range label + "up to 3 years" hint share one row spanning both input columns. */ .cal-range-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .cal-range label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); } .cal-range input { width: 100%; padding: 8px 10px; border-radius: 8px; min-height: 40px; } .cal-range .hint { margin: 0; flex: 0 0 auto; max-width: none; font-size: 12px; color: var(--muted); } /* Appears under the pickers once the user edits a date; no request is made until it's tapped. Spans both columns so it reads as a clear confirm step. */ .range-refresh { grid-column: 1 / -1; margin-top: 2px; padding: 10px 16px; min-height: 44px; border-radius: 9px; font-size: 15px; font-weight: 700; border: 1px solid var(--accent); } .range-refresh:hover { filter: brightness(1.05); } /* Time-filter panel: month/year range + season + year checklists, stacked in a tidy column on phones. */ .cal-filters { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } /* Season + year dropdowns fill the row evenly — no dead space to their right. */ .cal-seasonyear { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Desktop: the panel spans the content width as one row — the date range on the left, the season/year/weather dropdowns filling the rest — instead of a narrow stacked box with dead space beside it. */ @media (min-width: 960px) { .cal-filters { max-width: none; flex-direction: row; align-items: flex-start; gap: 14px 28px; } .cal-range { flex: 0 1 400px; } .cal-seasonyear { flex: 1 1 500px; grid-template-columns: 1fr 1fr 1.6fr; align-content: start; } /* A head row mirroring the Range label, so both halves read as label + controls. */ .cal-seasonyear::before { content: "Filter by"; grid-column: 1 / -1; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; line-height: 1.45; } /* Weather joins the same row as Seasons + Years (it only spans the full width in the stacked phone layout — the extra .cal-seasonyear qualifier outranks that base rule); its panel keeps a usable two-column width, anchored right. */ .cal-seasonyear .cal-weather { grid-column: auto; } .cal-seasonyear .cal-weather .cal-dd-panel { left: auto; right: 0; min-width: 420px; } } .cal-filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-right: 2px; } .cal-head { margin-bottom: 16px; } .cal-head h2 { margin: 0 0 2px; font-size: 18px; } .cal-head .meta { color: var(--muted); font-size: 12.5px; margin: 0; } /* "loading N more blocks…" note while a long span streams in chunk by chunk. */ .cal-loading { color: var(--accent); font-weight: 600; } /* Nudge to interact with the grid — wording covers both tap (mobile) and click. */ .cal-hint { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 11px; font-size: 13px; font-weight: 600; color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 88%); border: 1px solid color-mix(in oklab, var(--accent), transparent 70%); border-radius: 999px; } /* Months flow into as many columns as fit (one on phones, several on monitors), so a multi-year span reads as a year-at-a-glance wall instead of one long thin strip. Cells stay square via aspect-ratio. */ .calendar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px 24px; margin-bottom: 22px; align-items: start; } .cal-month { width: 100%; } .cal-month h4 { margin: 0 0 6px; font-size: 14px; color: var(--text); font-weight: 700; } .cal-dows, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-dows { margin-bottom: 3px; } .cal-dows span { font-size: 11px; color: var(--muted); text-align: center; line-height: 1; } .cal-cell { position: relative; aspect-ratio: 1; border-radius: 6px; background: var(--surface-2); } .cal-cell.empty { background: transparent; } .cal-cell.filled { cursor: pointer; } /* Day-of-month number, corner-anchored. White with a dark halo so it reads on any tier color; on transparent (no-record) tiles fall back to a plain muted number. */ .cal-daynum { position: absolute; top: 2px; left: 4px; font-size: 10px; font-weight: 700; line-height: 1; color: #fff; pointer-events: none; text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 1px 1px rgba(0, 0, 0, .7); } .cal-cell.empty .cal-daynum { color: var(--muted); text-shadow: none; } .cal-cell.filled:hover { outline: 2px solid var(--text); outline-offset: 1px; } /* Fixed positioning so the tooltip tracks the viewport (clientX/Y) even when the page is scrolled far down the calendar. */ #cal-tip { position: fixed; max-width: calc(100vw - 20px); } /* Mini grid of the day's stats: metric name · value(+pct) · category. */ #cal-tip .tt-grid { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: baseline; } #cal-tip .tt-name { font-weight: 700; } #cal-tip .tt-val { white-space: nowrap; } #cal-tip .tt-pct { color: var(--muted); } /* Dry streak has no percentile, so its text spans the value + category columns. */ #cal-tip .tt-span2 { grid-column: 2 / -1; } /* The stat currently being viewed is bolded and separated from the rest, so it's easy to match a cell's color to the stat it represents. The border spans all three columns because it's set on every cell of the active row. */ #cal-tip .tt-name.tt-r-active, #cal-tip .tt-val.tt-r-active { font-weight: 800; } #cal-tip .tt-r-active { padding-bottom: 5px; border-bottom: 1px solid var(--border); } /* Category (grade) text, right-aligned, is tinted by --cat — the color that represents that day's value for the metric. The active calendar metric gets it bold and near full saturation; the others are lifted toward --text so they stay readable and read as secondary. color-mix keeps every tier legible on both. */ #cal-tip .tt-cat { justify-self: end; text-align: right; font-weight: 600; color: color-mix(in oklab, var(--cat, var(--muted)), var(--text) 50%); } #cal-tip .tt-cat-active { font-weight: 800; color: color-mix(in oklab, var(--cat, var(--muted)), var(--text) 12%); } /* Plain-language "what the day was like" summary title, sits just under the date. */ #cal-tip .tt-type { font-size: 15px; font-weight: 800; margin: 2px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* --- single-day detail subpage --- */ .day-weather { margin: 2px 0 4px; font-size: 16px; font-weight: 800; } .day-nav { display: flex; align-items: flex-end; gap: 8px; } .day-date { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; } .day-step { min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; } .day-step:hover:not(:disabled) { border-color: var(--accent); } .day-step:disabled { opacity: .4; cursor: default; } /* Metric cards: one column on phones, side by side on monitors so the page doesn't run as a single long strip of full-width ladders. minmax(0, 1fr) (not bare 1fr, whose min is the content) so one wide ladder row can't inflate the shared column track past the viewport and push the whole page off-center. */ #day-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } @media (min-width: 1000px) { #day-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 3400px) { #day-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ladder-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 16px 16px 12px; } .ladder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ladder-head h3 { margin: 0; font-size: 15px; } .ladder-summary { display: inline-flex; align-items: baseline; gap: 8px; } .day-obs { font-size: 20px; font-weight: 800; color: color-mix(in oklab, var(--cat, var(--text)), var(--text) 12%); } .day-obs-meta { font-size: 12.5px; color: var(--muted); } .ladder-note { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 12px; font-size: 12px; color: var(--muted); } .ladder-note-left { min-width: 0; } /* Historical range: bold, pinned to the right edge of the card. */ .ladder-range { font-weight: 700; color: var(--text); white-space: nowrap; } /* Tier ladder: swatch · label · percentile range · value range · observed marker. Fixed column widths (not auto) so every row shares the same tracks — the percentile ranges and value ranges line up down the whole ladder. The negative margin cancels the row's own padding so the swatches sit on the same left edge as the card title and the subheader note above. */ .ladder { display: flex; flex-direction: column; gap: 3px; } .ladder-row { display: grid; grid-template-columns: 14px 128px 64px 1fr 60px; align-items: center; column-gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13px; } .ladder-row.active { background: color-mix(in oklab, var(--accent), transparent 86%); outline: 1px solid color-mix(in oklab, var(--accent), transparent 55%); } .ladder-sw { width: 14px; height: 14px; border-radius: 4px; } .ladder-label { font-weight: 700; color: color-mix(in oklab, var(--cat, var(--text)), var(--text) 22%); } .ladder-pct { color: var(--muted); font-size: 12px; } /* Value ranges may wrap (long unit strings like "8.1 g/m³–12.9 g/m³" on narrow phones) — nowrap here would widen the row past the card and scroll the page. */ .ladder-val { justify-self: end; text-align: right; font-variant-numeric: tabular-nums; } /* Observed marker: stays in the rightmost column but reads from its left edge, so the arrow sits right beside the value range it points at. */ .ladder-mk { justify-self: start; min-width: 0; } /* Markers are unit-less ("◀ 11.5") so nowrap can't push them past the card — the widest (precip, ◀ 0.25") bleeds a few px into the row padding at most. */ .ladder-mark { color: var(--accent); font-weight: 800; white-space: nowrap; font-size: 12.5px; } /* Compact "graded days" table: a ROW per metric, a COLUMN per day. Wide runs scroll horizontally in their own container; the metric-label column is pinned. --rd-label-col is the design *minimum* for that pinned column, applied as a min-width on the labels; app.js sizes the track itself to max-content, so labels needing more room than the minimum (metric "km/h", or a font substituted for the un-hosted Inter) get it instead of spilling into the first day column. The cue below is then offset in JS from the measured result. --rd-gap is the grid gutter both halves assume. */ :root { --rd-label-col: 70px; --rd-gap: 3px; } .rd-scroll { position: relative; overflow-x: auto; margin: 0 0 6px; padding-bottom: 4px; } .rd-grid { display: grid; gap: var(--rd-gap); align-items: stretch; min-width: min-content; } /* Simple scroll-orientation cue for the timeline: oldest at left, newest at right. The offset here is the floor-width fallback; app.js overwrites it with the label column's measured width once the grid has laid out. */ .rd-orient { display: flex; justify-content: space-between; margin: 0 0 8px; padding-left: calc(var(--rd-label-col) + var(--rd-gap)); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--muted); } /* Forecast (future) columns: accent-tinted headers. The .rd-today column is the graded target day (the orange chart marker), flagged with an accent left edge; forecast columns sit to the right of today. */ .rd-colh.rd-fc b { color: var(--accent); } .rd-colh.rd-fc span { color: color-mix(in oklab, var(--accent), var(--muted) 45%); } .rd-colh.rd-today b { color: var(--accent); } .rd-c.rd-fc { opacity: .9; } .rd-colh.rd-today, .rd-c.rd-today { box-shadow: inset 2px 0 0 var(--accent); } /* The pinned column has to paint across the grid gap as well as its own track: its background is what hides the cells scrolling underneath, and a bare track leaves the gap as a 3px slit those tinted cells show through. Negative margin widens the painted box by the gap; the padding puts it back so the text still stops 6px short of the seam. */ .rd-corner, .rd-mlabel { position: sticky; left: 0; background: var(--surface); min-width: var(--rd-label-col); margin-right: calc(var(--rd-gap) * -1); padding-right: calc(6px + var(--rd-gap)); } .rd-corner { z-index: 3; } .rd-mlabel { z-index: 2; /* Two tracks, name left and unit right, so every unit shares a right edge and the gutter into the first day column is the same on all seven rows. Baseline rather than centre: the unit is a smaller font than the name, so centring parked it off the name's baseline — by a different amount on the humidity row, whose makes its box taller still. align-content centres that one line inside the full-height grid cell. */ display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: space-between; column-gap: 6px; align-content: center; align-items: baseline; font-size: 11px; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .rd-mname { white-space: nowrap; } /* Wind/rain cells are bare numbers to keep the grid narrow, so the row label carries the unit — quieter than the label itself, and lowercase since "km/h" and "mm" are unit symbols, not words. */ .rd-unit { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 10px; opacity: .75; white-space: nowrap; } /* Browsers shrink by default (~83%), which makes the humidity row's cubic exponent illegible on top of the already-small unit text. Zero line-height keeps the raised glyph out of the line box, so the humidity row's baseline still matches the six rows without a superscript. */ .rd-unit sup { font-size: 100%; line-height: 0; } .rd-colh { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; padding-bottom: 3px; font-size: 10px; color: var(--muted); line-height: 1.15; white-space: nowrap; cursor: pointer; } .rd-colh b { color: var(--text); font-size: 11.5px; font-weight: 700; } .rd-c { display: flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; background: color-mix(in oklab, var(--c, var(--surface-2)), transparent 74%); color: color-mix(in oklab, var(--c, var(--text)), var(--text) 28%); } .rd-c[data-date]:hover { filter: brightness(1.18); } /* grade colors */ .g-rec-cold { color: var(--rec-cold); } .m-rec-cold { background: var(--rec-cold); } .g-very-cold { color: var(--very-cold); } .m-very-cold { background: var(--very-cold); } .g-cold { color: var(--cold); } .m-cold { background: var(--cold); } .g-cool { color: var(--cool); } .m-cool { background: var(--cool); } .g-normal { color: var(--normal); } .m-normal { background: var(--normal); } .g-warm { color: var(--warm); } .m-warm { background: var(--warm); } .g-hot { color: var(--hot); } .m-hot { background: var(--hot); } .g-very-hot { color: var(--very-hot); } .m-very-hot { background: var(--very-hot); } .g-rec-hot { color: var(--rec-hot); } .m-rec-hot { background: var(--rec-hot); } .g-dry { color: var(--dry); } .m-dry { background: var(--dry); } .g-wet-1 { color: var(--wet-1); } .m-wet-1 { background: var(--wet-1); } .g-wet-2 { color: var(--wet-2); } .m-wet-2 { background: var(--wet-2); } .g-wet-3 { color: var(--wet-3); } .m-wet-3 { background: var(--wet-3); } .g-wet-4 { color: var(--wet-4); } .m-wet-4 { background: var(--wet-4); } .g-wet-5 { color: var(--wet-5); } .m-wet-5 { background: var(--wet-5); } .g-wet-6 { color: var(--wet-6); } .m-wet-6 { background: var(--wet-6); } .g-wet-7 { color: var(--wet-7); } .m-wet-7 { background: var(--wet-7); } .g-wet-8 { color: var(--wet-8); } .m-wet-8 { background: var(--wet-8); } .g-wet-9 { color: var(--wet-9); } .m-wet-9 { background: var(--wet-9); } /* "Near Record" danger tiers: fill the whole grade cell to make it pop. */ .error { color: #e06a6a; font-size: 14px; } .spinner { color: var(--muted); font-size: 14px; } /* --- phones / narrow screens --- */ /* --- Find button + current-place label (opens the modal map picker) --- */ .find-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1 1 340px; } .find-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; font-weight: 700; font-size: 15px; min-height: 44px; } .find-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .find-btn:hover { filter: brightness(1.05); } .loc-label { color: var(--text); font-weight: 600; font-size: 14px; } /* Weekly panel is now full width (the map lives in the picker, not inline). */ /* Link styling for the compact legend notes + guide page. */ .tk-note a, .hint a, .guide-back a { color: var(--accent); text-decoration: none; font-weight: 600; } .tk-note a:hover, .hint a:hover, .guide-back a:hover { text-decoration: underline; } /* --- shared modal location picker --- */ .mp-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; } .mp-overlay[hidden] { display: none; } .mp-modal { width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .mp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .mp-head h2 { margin: 0; font-size: 16px; } .mp-close { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 26px; line-height: 1; padding: 0 4px; min-width: 40px; min-height: 40px; } .mp-close:hover { color: var(--text); } .mp-search { position: relative; display: flex; gap: 8px; padding: 12px 16px 8px; } .mp-search input { flex: 1; min-width: 0; padding: 11px 14px; background: var(--bg); } .mp-search button { padding: 11px 16px; min-height: 44px; } .mp-sug { position: absolute; top: 100%; left: 16px; right: 16px; z-index: 5; list-style: none; margin: 4px 0 0; padding: 4px; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); } .mp-sug li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 7px; cursor: pointer; font-size: 14px; } .mp-sug li:hover, .mp-sug li.active { background: var(--surface-2); } .mp-sug-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-sug .sub, .mp-saved-go .sub { color: var(--muted); font-size: 12px; } /* Coordinates (issue #189) inherit .sub's dimmed look via the shared class () above — desktop-only: a phone-width row has no space left for a third piece of text once the name/place line wraps. */ @media (max-width: 640px) { .mp-coords { display: none; } } /* Overrides the broad ".mp-search button" accent-button rule above (it catches these too, since the suggestion list sits inside the search form) — needs to out-specificity it, not just come later in the file. */ .mp-sug .mp-sug-star { flex-shrink: 0; background: none; border: 0; color: var(--muted); cursor: pointer; font-weight: normal; padding: 3px; border-radius: 5px; display: inline-flex; min-height: 0; /* .mp-search button's 44px touch-target floor doesn't apply here */ } .mp-sug .mp-sug-star:hover { color: var(--text); background: var(--border); } .mp-sug .mp-sug-star[aria-pressed="true"] { color: var(--accent); } .mp-sug .mp-sug-star svg { width: 15px; height: 15px; display: block; } /* Saved-locations list + import nudge, shown between the search box and the map when there's anything to show (issue #142: this used to be Weekly-only UI next to the Find button; folding it into the shared picker puts it on every view). */ .mp-saved { position: relative; padding: 0 16px 8px; } .mp-saved[hidden] { display: none; } .mp-saved-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 12px; } .mp-saved-toggle[hidden] { display: none; } .mp-saved-toggle:hover { border-color: var(--accent); } .mp-saved-toggle svg { flex-shrink: 0; transition: transform .15s ease; } .mp-saved-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* Floats over the map instead of pushing it down, same as .mp-sug. */ .mp-saved-list { position: absolute; top: 100%; left: 16px; right: 16px; z-index: 5; list-style: none; margin: 4px 0 0; padding: 0; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); } .mp-saved-list[hidden] { display: none; } .mp-saved-list:empty { display: none; } .mp-saved-item { display: flex; align-items: center; gap: 2px; } .mp-saved-item:not(:last-child) { border-bottom: 1px solid var(--border); } .mp-saved-item:hover { background: var(--surface-2); } .mp-saved-go { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; cursor: pointer; color: var(--text); font: inherit; font-size: 13.5px; padding: 9px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-saved-btn { flex-shrink: 0; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 7px; margin-right: 4px; border-radius: 6px; display: inline-flex; } .mp-saved-btn:hover { color: var(--text); background: var(--border); } .mp-import { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 9px 12px; margin: 0 0 8px; font-size: 13px; } .mp-import[hidden] { display: none; } .mp-import .mp-import-actions { display: flex; gap: 8px; flex-shrink: 0; } .mp-import button { border-radius: 8px; border: 1px solid var(--border); cursor: pointer; padding: 6px 11px; font-size: 12.5px; font-weight: 600; background: var(--surface); color: var(--text); } .mp-import button.mp-import-yes { background: var(--accent); color: #1a1206; border-color: var(--accent); } /* "This is a saved location" indicator (issue #207) — bookmarks.js::indicatorHTML(), dropped next to wherever each of the five views renders its place name. inline-flex + align-items:center centers the icon against ITS OWN nickname text — a self-contained pairing with no font-metric guesswork, unlike trying to align an inline icon against a *different*, pre-existing text run's baseline (which is what the vertical-align tuning kept fighting). Wherever this needs to line up with unrelated text next to it (Day/Calendar/ Score's own .loc-name, Compare's place name), that's solved by making THAT container flex with align-items:center too, so both sit as peer flex items centered on the same row — see .find-bar, .loc-name and .cmp-name-primary. */ .bkm-indicator { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font: inherit; font-size: 0.8em; font-weight: 600; line-height: 1.35; white-space: nowrap; /* Now a