/* Sunset web prototype. Calm, mostly sky. */

/* Newsreader, as in the iPhone app (a variable font, OFL; subset to Latin for the web). */
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/Newsreader-Italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
/* The share card's score: Newsreader's proportional figures as the default digits (scripts/build-figures-font.py). */
@font-face { font-family: "Newsreader Figures"; src: url("/fonts/NewsreaderFigures.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ink: #fffaf5;                 /* text over the sky */
  --ink-soft: rgba(255, 250, 245, 0.78);
  --ink-faint: rgba(255, 250, 245, 0.55);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-ink: #1d1a24;
  --glass-ink-soft: rgba(29, 26, 36, 0.62);
  --field: rgba(255, 255, 255, 0.7);
  --field-edge: rgba(29, 26, 36, 0.12);
  --accent: #d9573a;              /* ember */
  --accent-ink: #fff;
  --danger: #b3261e;
  --scrim: rgba(10, 8, 20, 0.28);
  --bg: #2a2238;
  --ground: #0d0b10;              /* the ridge and the land below it, as in the app */
  --radius: 22px;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ---- design tokens, mirrored from the iPhone app (ios/Sunset/App/Theme.swift) ---- */
  /* spacing, on a 4 px grid */
  --space-2xs: 2px; --space-xs: 4px; --space-s: 8px; --space-m: 12px; --space-l: 16px; --space-xl: 24px; --space-2xl: 32px;
  /* radii, concentric: inner = outer less the inset between them */
  --radius-card: 24px; --radius-control: 12px; --radius-control-inset: 3px; --radius-control-inner: 9px; --radius-thumb: 8px;
  /* the type scale: Apple's text styles and their leading, in rem so a larger browser text size scales it.
     Newsreader's own line height is 1.0 em, so every role sets its leading. */
  --serif: "Newsreader", Georgia, serif;
  --fs-display: 3.75rem;      --lh-display: 1;             /* 60: the day's score */
  --fs-large-title: 2.125rem; --lh-large-title: 1.206;     /* 34/41: sheet titles */
  --fs-title1: 1.75rem;       --lh-title1: 1.214;          /* 28/34: the place's name */
  --fs-title2: 1.375rem;      --lh-title2: 1.273;          /* 22/28: card headings */
  --fs-title3: 1.25rem;       --lh-title3: 1.25;           /* 20/25: sunset time, sky line, place names */
  --fs-body: 1.0625rem;       --lh-body: 1.294;            /* 17/22: prose, rows, actions */
  --fs-subheadline: 0.9375rem; --lh-subheadline: 1.333;    /* 15/20: metadata, captions */
  --fs-footnote: 0.8125rem;   --lh-footnote: 1.385;        /* 13/18: tertiary lines, tab labels */
  --fs-caption: 0.75rem;      --lh-caption: 1.333;         /* 12/16 */
  /* colors (dark; contrast measured on a card resting on the ground, #120E17) */
  --c-ink: #eee7dd;           /* 15.5:1 primary */
  --c-ink-soft: #dcd3ca;      /* 12.9:1 prose, the sky line */
  --c-muted: #a79e98;         /* 7.3:1 captions, units */
  --c-faint: #8e857f;         /* 5.3:1 placeholders, an off control */
  --c-track: #6e6468;         /* 3.3:1 an empty indicator */
  --c-ember: #f29048;         /* 8:1 actions, on-state */
  --c-shadow: #3e4a7a;        /* twilight blue: a cloud layer in the Earth's shadow (step 1's light chart), with a light edge */
  --c-raised: #1c1820;
  --c-card: rgba(20, 16, 26, 0.62);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgba(22, 18, 32, 0.55);
    --glass-edge: rgba(255, 255, 255, 0.12);
    --glass-ink: var(--c-ink);
    --glass-ink-soft: var(--c-muted);
    --accent: var(--c-ember);
    --danger: #f2766b;          /* 6.5:1 on the dark sheet; #b3261e was 2.8:1 */
    --field: rgba(255, 255, 255, 0.08);
    --field-edge: rgba(255, 255, 255, 0.14);
    --scrim: rgba(0, 0, 0, 0.4);
    --bg: #14111c;
  }
}
:root[data-theme="dark"] {
  --glass: rgba(22, 18, 32, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-ink: var(--c-ink);
  --glass-ink-soft: var(--c-muted);
  --accent: var(--c-ember);
  --danger: #f2766b;
  --field: rgba(255, 255, 255, 0.08);
  --field-edge: rgba(255, 255, 255, 0.14);
  --scrim: rgba(0, 0, 0, 0.4);
  --bg: #14111c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { overscroll-behavior: none; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 10px; }

/* ---------- sky ---------- */

#sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
/* the painted sky (sky.js): only as tall as the sky above the ridge's baseline; app.js sets its height */
#sky-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
/* the sky's live details (alive.js), over the ridge; app.js sets its height */
#sky-fx { position: absolute; left: 0; top: 0; width: 100%; height: 0; display: block; pointer-events: none; }
.pending #sky { animation: breathe 6s ease-in-out infinite alternate; }

/* the ridge: the place's skyline, as the app draws it (app.js drawRidge) */
#ridge { position: absolute; inset: 0; width: 100%; height: 100%; }
.ridge-top, .ridge-ground { fill: var(--ground); }
.ridge-top.rising { animation: ridge-rise 1.3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ridge-rise { from { transform: scaleY(0.001); } to { transform: none; } }
/* while the horizon is traced: no ridge yet, a thin warm line breathing along the flat baseline */
.trace-line { fill: #FFE2B8; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 196, 106, .9)); transition: opacity .6s var(--ease); }
#ridge.tracing .ridge-top, #ridge.tracing .ridge-crest { opacity: 0; }
/* the crest: a distant ridge takes a little of the horizon's haze, and near the sun it catches a rim of light */
.ridge-crest.rising { animation: ridge-rise 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.crest-haze { fill: none; stroke: url(#haze-grad); stroke-linejoin: round; }
.crest-rim { fill: none; stroke: url(#rim-grad); stroke-linejoin: round; stroke-linecap: round; }
#ridge.tracing .trace-line { opacity: .7; animation: trace-pulse 2.4s ease-in-out infinite; }
@keyframes trace-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes breathe { from { filter: brightness(0.92); } to { filter: brightness(1.06); } }

/* ---------- screens ---------- */

.screen {
  position: relative; z-index: 1;
  min-height: 100dvh;
  padding: calc(var(--safe-t) + 16px) calc(var(--safe-r) + 20px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 20px);
}

/* ---------- the intro: what Sunset Oracle is for (index.html #intro, app.js showIntro) ---------- */
/* One page over the painted sky: the purpose on the sky, the rest as the app's glass cards below the ridge. The page
   scrolls; the sky goes up with it (app.js). --intro-base is the ridge's baseline (app.js introScene). */
#intro { padding: 0; min-height: 100dvh; }
.intro-page {
  position: fixed; inset: 0; z-index: 2; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; font-family: var(--serif); color: var(--c-ink);
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--safe-t) + 4px), #000 calc(var(--safe-t) + 32px));
          mask-image: linear-gradient(to bottom, transparent calc(var(--safe-t) + 4px), #000 calc(var(--safe-t) + 32px));
}
/* the words on the sky stay legible over the brightest one */
.intro-page::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(420px, 55dvh); pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 11, 16, .6), rgba(13, 11, 16, .32) 55%, rgba(13, 11, 16, 0));
}
.intro-top {
  position: relative; max-width: 560px; margin: 0 auto;
  min-height: calc(var(--intro-base, 58dvh) + 8px);
  padding: calc(var(--safe-t) + clamp(40px, 11dvh, 96px)) calc(var(--safe-r) + 28px) 0 calc(var(--safe-l) + 28px);
}
.intro-kicker {
  margin: 0 0 var(--space-m); font: 400 var(--fs-footnote)/var(--lh-footnote) var(--serif); letter-spacing: .16em;
  text-transform: uppercase; color: rgba(238, 231, 221, .82);
}
.intro-title {
  margin: 0; font: 300 var(--fs-large-title)/var(--lh-large-title) var(--serif); letter-spacing: -0.005em;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .35); overflow-wrap: break-word;
}
.intro-title:focus { outline: none; }
.intro-body {
  position: relative; display: grid; gap: var(--space-m); max-width: 560px; margin: 0 auto;
  padding: var(--space-xl) calc(var(--safe-r) + var(--space-l)) calc(var(--safe-b) + 128px) calc(var(--safe-l) + var(--space-l));
  background: var(--ground);
}
.intro-what { margin: 0 var(--space-m) var(--space-s); font: var(--fs-body)/var(--lh-body) var(--serif); color: var(--c-ink-soft); }
/* Get started: fixed at the foot, over a fade to the ground */
.intro-cta {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 44px calc(var(--safe-r) + 28px) calc(var(--safe-b) + 22px) calc(var(--safe-l) + 28px);
  background: linear-gradient(to top, var(--ground) 55%, rgba(13, 11, 16, 0));
  pointer-events: none;
}
.intro-start {
  display: block; width: 100%; max-width: 504px; margin: 0 auto; min-height: 52px; padding: 12px 20px; border: 0; border-radius: 26px;
  background: var(--c-ember); color: #1a1014; font: 400 var(--fs-body)/var(--lh-body) var(--serif); pointer-events: auto;
  transition: transform .15s var(--ease);
}
.intro-start:active { transform: scale(.985); }
.intro-start:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* the cards the intro and the reference page share (about.js) */
.about-card { display: grid; gap: var(--space-m); font-family: var(--serif); }
.about-card h3 { margin: 0; font: 300 var(--fs-title2)/var(--lh-title2) var(--serif); color: var(--c-ink); }
.about-card p { margin: 0; font: var(--fs-body)/var(--lh-body) var(--serif); color: var(--c-ink-soft); }
.about-scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.about-scale li { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ex-sky { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-control); background: #1c1820; }
.about-card .about-n { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.about-n .n { font: 300 var(--fs-title1)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.about-n .w { font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); }
.about-card .g { font-size: var(--fs-subheadline); line-height: var(--lh-subheadline); }
/* Too narrow for three across (a small phone, or larger text): one under the other, each sky beside its words;
   narrower still (the largest text): each sky above its words. em here is the card's own text size. */
.about-card { container-type: inline-size; }
@container (max-width: 19em) {
  .about-scale { grid-template-columns: 1fr; gap: var(--space-m); }
  .about-scale li { grid-template-columns: 5.5em minmax(0, 1fr); column-gap: var(--space-m); }
  .about-scale li .ex-sky { grid-row: span 2; aspect-ratio: 1; }
}
@container (max-width: 13em) {
  .about-scale li { grid-template-columns: 1fr; }
  .about-scale li .ex-sky { grid-row: auto; aspect-ratio: 16 / 9; }
}
.about-diagram { display: block; }
.about-diagram text { font: italic 13px var(--serif); fill: #dcd3ca; }
.about-feature { gap: var(--space-s); }
.about-feature p { display: flex; gap: var(--space-m); align-items: flex-start; }
.about-glyph { flex: none; margin-top: 1px; color: var(--c-ember); }
.about-honest { margin: var(--space-xs) var(--space-xs) 0; font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); }
.about-dials { margin: 0; display: grid; gap: var(--space-s); }
.about-dials div { display: grid; grid-template-columns: minmax(5.5em, auto) 1fr; column-gap: var(--space-m); align-items: baseline; }
.about-dials dt { font: var(--fs-body)/var(--lh-body) var(--serif); color: var(--c-ink); }
.about-dials dd { margin: 0; font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); }
@container (max-width: 16em) { .about-dials div { grid-template-columns: 1fr; } }

/* onboarding */
#onboard { display: grid; place-items: center; }
.onboard-inner { width: 100%; max-width: 380px; display: grid; gap: 22px; text-align: center; }
.wordmark { font-weight: 200; font-size: clamp(36px, 13.5vw, 56px); letter-spacing: -0.02em; margin: 0; }
.tagline { margin: 0 0 12px; color: var(--ink-soft); font-size: 17px; line-height: 1.45; }
.link {
  background: none; border: 0; color: var(--ink); min-height: 44px; font-size: 16px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-faint);
}

/* tonight: the sky is fixed behind (#sky); the page scrolls up over it, Weather style */
#tonight { padding: 0; min-height: 100dvh; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#sky { will-change: transform; }
/* under the sky as it scrolls up and away: the ground, as below the ridge */
body:has(#tonight:not([hidden])) { background: var(--ground); }
/* the place card: the place's name (the only place it shows) and the day tabs */
.place-card { display: grid; gap: var(--space-m); }
.place-name {
  margin: 0; font: italic 340 var(--fs-title1)/var(--lh-title1) var(--serif); letter-spacing: 0; color: var(--c-ink);
  overflow-wrap: anywhere;
}
.page {
  position: fixed; inset: 0; z-index: 2; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* cards scrolled up fade out before they reach the status bar */
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--safe-t) + 4px), #000 calc(var(--safe-t) + 32px));
          mask-image: linear-gradient(to bottom, transparent calc(var(--safe-t) + 4px), #000 calc(var(--safe-t) + 32px));
}
.page::-webkit-scrollbar { display: none; }
.stage {
  display: grid; gap: var(--space-m); max-width: 560px; margin: 0 auto;
  padding: 0 calc(var(--safe-r) + var(--space-l)) calc(var(--safe-b) + 88px) calc(var(--safe-l) + var(--space-l));
  transition: transform .32s var(--ease), opacity .32s var(--ease);
  /* a short page still scrolls far enough to take the sky, ridge and all, off the top: the ridge sits
     at the page-top's height, so the furthest scroll (this, less a screen) must be at least that */
  min-height: calc(160dvh + 8px); align-content: start;
}
/* where the place card rests: 55 % down, the ridge just above it (app.js drawRidge) */
.page-top { height: 55dvh; }
.stage.nudge { animation: nudge 1.4s var(--ease) both; }
@keyframes nudge { 0%, 100% { transform: none; } 35%, 55% { transform: translateX(-40px); } }

/* glass cards: clear, lightly tinted so the words hold over the brightest sky */
.card {
  border-radius: var(--radius-card); padding: var(--space-l);
  background: var(--c-card);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  backdrop-filter: blur(6px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.25);
  color: var(--c-ink);
}
/* every card heading is the same role: title2 ("Prediction summary", "How was it?") */
.card h2 { margin: 0; font: 300 var(--fs-title2)/var(--lh-title2) var(--serif); }
.card-head { display: grid; gap: var(--space-xs); }

/* the days: all in one row while each tab has room for "Yesterday" (3.5em); otherwise two to a row
   (never 3 + 1, never truncated or overflowing). --n is the number of days (app.js). The middle term
   of the clamp is hugely negative when the row fits and hugely positive when it doesn't. */
.day-tabs {
  --n: 4;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc(100% / var(--n) - 3px), calc((var(--n) * 3.75rem - 100%) * 999), calc(50% - 2px)), 1fr));
  gap: var(--radius-control-inset); padding: var(--radius-control-inset); border-radius: var(--radius-control); background: rgba(0, 0, 0, 0.28);
}
.day-tabs:empty { display: none; }
.day-tabs button {
  min-width: 0; min-height: 44px; border: 0; border-radius: var(--radius-control-inner); background: none; color: var(--c-muted);
  display: grid; place-content: center; gap: 0; padding: var(--space-xs); transition: background .25s var(--ease), color .25s;
}
.day-tabs button[aria-pressed="true"] { background: rgba(238, 231, 221, 0.16); color: var(--c-ink); }
/* the day in the system face (a control label), its score in the serif (a number) */
.tab-day { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: 500; white-space: nowrap; }
.day-tabs button[aria-pressed="true"] .tab-day { font-weight: 600; }
.tab-score { font: var(--fs-subheadline)/var(--lh-subheadline) var(--serif); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }

.reading { text-align: left; }
/* the score and the sunset share a baseline: the big numeral sits on the line "sunset" sits on */
.score-row { display: flex; align-items: last baseline; justify-content: space-between; gap: var(--space-m); }
.score {
  font: 300 var(--fs-display)/var(--lh-display) var(--serif); letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(4px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.score.shown { opacity: 1; transform: none; }
.score.pending-mark { font-size: var(--fs-display); }
/* a provisional score ("≈6.8"): scored against a flat horizon while the real one is traced */
.score.provisional.shown { opacity: .6; }
.sunset-at { display: grid; justify-items: end; font: var(--fs-title3)/var(--lh-title3) var(--serif); font-variant-numeric: tabular-nums; }
.sunset-at .cap { font-style: italic; font-size: var(--fs-subheadline); line-height: var(--lh-subheadline); color: var(--c-muted); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skyline { margin: var(--space-s) 0 0; font: italic 320 var(--fs-title3)/var(--lh-title3) var(--serif); color: var(--c-ink-soft); min-height: calc(var(--lh-title3) * 1em); }
/* a poor sky is said more quietly, as its score is */
.skyline.poor { color: var(--c-muted); }
.skyline.tracing { font-size: var(--fs-subheadline); line-height: var(--lh-subheadline); color: var(--c-muted); }
/* "Updated 3 hours ago.": tonight's freshness, when it matters */
.meta { margin: var(--space-s) 0 0; font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); }
.meta:empty { display: none; }
/* "↑ from 5.3 · More high cloud: 45% → 70%": what moved the score at its last big refresh (changed.js) */
.changed { margin: var(--space-xs, 4px) 0 0; font: var(--fs-subheadline)/var(--lh-subheadline) var(--font); color: var(--c-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.changed[hidden] { display: none; }
/* A night without a sunset: the app's DayCard `pending` (title2, then a caption), in place of the score. */
.no-sunset { display: grid; gap: var(--space-xs); }
.no-sunset p { margin: 0; }
.no-sunset-title { font: 300 var(--fs-title2)/var(--lh-title2) var(--serif); color: var(--c-ink); }
.no-sunset-line { font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); }
/* "How was it?": its own card, the whole card a button */
.rate-card { padding: 0; }
.rate-open {
  width: 100%; min-height: 44px; padding: var(--space-l); border: 0; background: none; color: inherit; text-align: left;
  display: flex; align-items: center; gap: var(--space-m); border-radius: var(--radius-card);
}
.rate-text { display: grid; gap: var(--space-xs); flex: 1; min-width: 0; }
.rate-title { font: 300 var(--fs-title2)/var(--lh-title2) var(--serif); color: var(--c-ink); }
.rate-sub { font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); }
.rate-sub .keep { white-space: nowrap; }
.rate-sub.said { font-style: normal; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.rate-go { color: var(--c-ember); font: var(--fs-body)/var(--lh-body) var(--serif); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.14); }

.empty { display: grid; gap: var(--space-l); text-align: center; color: var(--c-ink); font: var(--fs-body)/var(--lh-body) var(--serif); }
.empty .primary { justify-self: center; }

/* under the bar only: the page's ground fading up to clear (as the app's BarFade) */
.bar-fade {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(var(--safe-b) + 8px + 48px + 36px); pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 11, 16, 0) 0%, rgba(13, 11, 16, 0.8) 50%, rgba(13, 11, 16, 0.94) 100%);
}
body.sheet-open .bar-fade { visibility: hidden; }

/* the fixed bottom bar: dots centred, the Places button trailing */
.toolbar {
  position: fixed; z-index: 4; left: 0; right: 0; bottom: calc(var(--safe-b) + 8px);
  height: 48px; margin: 0 auto; max-width: 560px; padding: 0 calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 16px);
  display: flex; justify-content: center; align-items: center; pointer-events: none;
}
.glass-clear {
  background: rgba(20, 16, 26, 0.34);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
  color: #eee7dd; pointer-events: auto;
}
.dots { display: flex; align-items: center; height: 48px; padding: 0 8px; border-radius: 99px; }
/* each dot is 24 x 44 (WCAG 2.5.8's 24 px minimum; a row of 44 px dots would outgrow the capsule) */
.dots button { width: 24px; height: 44px; border: 0; padding: 0; background: none; display: grid; place-items: center; color: #eee7dd; opacity: .35; transition: opacity .25s; }
.dots button:not(.here)::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dots button[aria-selected="true"] { opacity: 1; }
.list-btn { position: absolute; right: calc(var(--safe-r) + 16px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; }

/* ---------- glass ---------- */

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 10px 40px rgba(20, 10, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--glass-ink);
}

/* ---------- sheets ---------- */

#scrim { position: fixed; inset: 0; z-index: 5; background: var(--scrim); animation: fade .3s var(--ease); }
.sheet {
  position: fixed; z-index: 6; left: 0; right: 0; bottom: 0;
  margin: 0 auto; max-width: 560px;
  max-height: calc(100dvh - var(--safe-t) - 40px);
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 28px 28px 0 0;
  border-bottom: 0;
  padding: var(--space-s) calc(var(--safe-r) + var(--space-l)) calc(var(--safe-b) + var(--space-xl)) calc(var(--safe-l) + var(--space-l));
  animation: rise .42s var(--ease);
}
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--glass-ink-soft); opacity: .4; margin: 4px auto 6px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
/* sheet titles: large title in the serif, as in the app */
.sheet-head h2 { margin: 0; font: 300 var(--fs-large-title)/var(--lh-large-title) var(--serif); }
.close { min-height: 44px; min-width: 44px; padding: 0 6px; border: 0; background: none; font-weight: 600; color: var(--accent); font-size: 17px; }

.slots { margin: 4px 0 14px; color: var(--glass-ink-soft); font-size: 15px; }
.place-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); }
.place { padding: var(--space-l); border-radius: var(--radius-card); background: var(--field); border: 1px solid var(--field-edge); display: grid; gap: var(--space-xs); }
.place.here { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.place-top { display: flex; align-items: center; gap: var(--space-xs); }
.place-top .place-go { flex: 1; min-width: 0; }
.bell { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--glass-ink-soft); }
.bell.on { color: var(--accent); }
.place-go { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-m); align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.place-go .swatch { display: block; flex: none; width: 64px; height: 44px; border-radius: var(--radius-thumb); }
.place-text { display: grid; gap: var(--space-2xs); min-width: 0; }
/* two lines before an ellipsis, and the line box is the leading, so descenders never clip */
.place-text b { font: 400 var(--fs-title3)/var(--lh-title3) var(--serif); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.place-sub { font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--glass-ink-soft); font-variant-numeric: tabular-nums; }
.place-score { font: 300 var(--fs-title1)/var(--lh-title1) var(--serif); font-variant-numeric: tabular-nums; }
/* Edit, in a Places card: Name and Address, two labelled fields, then Cancel / Save. */
.form.edit { margin-top: var(--space-s); }
.edit-address { display: grid; gap: 6px; }
.edit-address .field-label { font-size: 14px; color: var(--glass-ink-soft); }
.address-row { display: grid; grid-template-columns: 1fr 48px; gap: var(--space-s); align-items: center; }
.search-field { position: relative; }
.form .search-field input:not([type="checkbox"]) { width: 100%; padding-right: 44px; text-overflow: ellipsis; }
.form.edit .row .primary { padding-inline: 8px; white-space: nowrap; }
.field-clear { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none;
  color: var(--glass-ink-soft); font-size: 22px; line-height: 1; }
.field-clear[hidden] { display: none; }
.edit-geo { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--field-edge); background: var(--field);
  color: var(--accent); display: grid; place-items: center; }
.edit-geo.busy svg { animation: locating 1s ease-in-out infinite alternate; }
@keyframes locating { to { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .edit-geo.busy svg { animation: none; opacity: .5; } }
.edit-sugg li[aria-selected="true"] button { outline: 2px solid var(--accent); outline-offset: -2px; }
.move-note { margin: 0; font-size: 15px; line-height: 1.4; color: var(--glass-ink); }
.move-note[hidden], .hint.blocked[hidden] { display: none; }
/* Edit's Floor control: − Ground floor + (web/public/floors.js). */
.edit-floor { display: grid; gap: 6px; }
.edit-floor .field-label { font-size: 14px; color: var(--glass-ink-soft); }
.floor-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: var(--space-s); align-items: center; }
.floor-step { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--field-edge); background: var(--field);
  color: var(--glass-ink); font-size: 22px; line-height: 1; }
.floor-step:disabled { opacity: .35; }
.floor-value { text-align: center; font-size: 17px; color: var(--glass-ink); }
.floor-hint { margin: 0; }
.form.edit .hint.needs { color: var(--accent); }
.form.edit .hint:empty { display: none; }
.primary:disabled { opacity: .45; }
.place-controls { display: grid; gap: 6px; }
.threshold { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: var(--glass-ink-soft); }
.place-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.remove { border: 0; background: none; color: var(--danger); font: var(--fs-subheadline)/var(--lh-subheadline) var(--serif); min-height: 44px; padding: 0; }
.place-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-l); min-width: 0; margin-left: auto; }
.move { border: 0; background: none; color: var(--accent); font: var(--fs-subheadline)/var(--lh-subheadline) var(--serif); min-height: 44px; padding: 0; }
/* when the name would get under ~6 em beside the sky and the score (large text, a narrow window, a
   phone at 200 % zoom), it takes the card's whole width under them instead of breaking mid-word */
.place-top { container-type: inline-size; }
@container (max-width: 18em) {
  .place-go { grid-template-columns: 64px 1fr; row-gap: var(--space-s); }
  .place-go .place-text { grid-column: 1 / -1; grid-row: 2; }
  .place-go .place-score { grid-column: 2; grid-row: 1; justify-self: end; }
  .place-text b { overflow-wrap: normal; }
  .place-top > .bell { align-self: flex-start; }
}
@media (max-width: 259px) { .inspect td { white-space: normal; } }


input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--accent); margin: 0; }

/* forms */
.form { display: grid; gap: 14px; text-align: left; }
#auth-form { padding: 20px; border-radius: var(--radius); }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--glass-ink-soft); }
.form input:not([type="checkbox"]):not([type="range"]), .form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--field-edge); background: var(--field); color: var(--glass-ink); font-size: 17px;
}
.form textarea { resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; color: var(--glass-ink); }
.form .check input { width: 22px; height: 22px; accent-color: var(--accent); }
.form-error { margin: 0; color: var(--danger); font-size: 15px; }
.hint { margin: 0; font-size: 14px; color: var(--glass-ink-soft); line-height: 1.4; }
.muted { opacity: .7; }

.primary, .secondary, .danger {
  min-height: 50px; border-radius: 99px; padding: 0 22px; font-size: 17px; font-weight: 600; border: 0;
  transition: transform .15s var(--ease), opacity .2s;
}
.primary { background: var(--accent); color: var(--accent-ink); }
.secondary { background: var(--field); color: var(--glass-ink); border: 1px solid var(--field-edge); }
.danger { background: none; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.danger.armed { background: var(--danger); color: #fff; }
.primary:active, .secondary:active, .danger:active { transform: scale(.98); }
button[disabled] { opacity: .5; cursor: default; }
.empty .primary { justify-self: center; }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.segmented button { min-height: 44px; border: 0; border-radius: 99px; background: none; color: var(--ink-soft); font-size: 15px; font-weight: 500; }
.segmented button[aria-selected="true"], .segmented button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.9); color: #1d1a24; }
.sheet .segmented { background: var(--field); border: 1px solid var(--field-edge); }
.sheet .segmented button { color: var(--glass-ink-soft); }
.sheet .segmented button[aria-pressed="true"], .sheet .segmented button[aria-selected="true"] { color: #1d1a24; }
body.sheet-open .toolbar { visibility: hidden; }

details { margin-top: 18px; border-top: 1px solid var(--field-edge); padding-top: 6px; }
summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; color: var(--accent); }
summary::-webkit-details-marker { display: none; }
details .form, details .products { margin-top: 8px; }
.products { display: grid; gap: 10px; margin-top: 10px; }
.product { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--field); border: 1px solid var(--field-edge); }
.product b { display: block; font-size: 16px; }
.product span { font-size: 14px; color: var(--glass-ink-soft); }
.product button { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* add a place: the search field at the top of Places */
.add-place { display: grid; gap: 10px; margin: 8px 0 16px; }
.geo { justify-self: start; font-size: 15px; min-height: 44px; }
.account-link { display: block; margin: 18px auto 0; }
.search input {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--field-edge); background: var(--field); color: var(--glass-ink); font-size: 17px;
  -webkit-appearance: none; appearance: none;
}
.suggestions { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.suggestions:empty { display: none; }
.suggestions button {
  width: 100%; min-height: 52px; padding: 10px 14px; text-align: left; border-radius: 14px;
  border: 1px solid var(--field-edge); background: var(--field); color: var(--glass-ink);
  display: grid; gap: 2px;
}
.suggestions b { font-size: 16px; font-weight: 600; }
.suggestions span { font-size: 13px; color: var(--glass-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-status { margin: 6px 2px 0; font-size: 14px; color: var(--glass-ink-soft); min-height: 1em; }
.search-status:empty { display: none; }
.attrib { margin: 6px 2px 0; font-size: 12px; color: var(--glass-ink-soft); }
.attrib a { color: inherit; }
.confirm-line { margin: 0; font-size: 15px; color: var(--glass-ink-soft); line-height: 1.4; }
.place-where { flex: 1 1 100%; font-family: var(--serif); font-size: var(--fs-footnote); color: var(--glass-ink-soft); line-height: var(--lh-footnote); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* rating: "How was it?", full screen as the app's RateView. The sky on top repaints as the slider moves; the sheet
   starts 470/844 of the way down, over the sky's last 30 px. */
.sheet.rate-sheet {
  inset: 0; max-height: none; height: 100dvh; padding: 0; border-radius: 0; border: 0;
  background: var(--ground); color: var(--c-ink); font-family: var(--serif);
  --rate-top: calc(100dvh * 470 / 844);   /* app.js sets it in whole px */
}
.rate-sky { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--rate-top) + 30px); overflow: hidden; }
.rate-sky canvas { position: absolute; left: 0; top: 0; width: 100%; display: block; }
#rate-ridge { height: 100%; }
.rate-where {
  position: absolute; left: 40px; right: 40px; top: calc(max(var(--safe-t), 20px) + 38px); margin: 0; text-align: center;
  font: italic 17px/1.2 var(--serif); color: #fff3e6; text-shadow: 0 1px 6px rgba(20, 8, 20, .6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rate-body {
  position: relative; margin-top: var(--rate-top); min-height: calc(100dvh - var(--rate-top)); background: var(--ground);
  padding: 26px calc(var(--safe-r) + 28px) calc(var(--safe-b) + 40px) calc(var(--safe-l) + 28px);
}
.rate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rate-head h2 { margin: 0; font: 300 var(--fs-large-title)/var(--lh-large-title) var(--serif); color: var(--c-ink); }
/* Cancel / Done: a quiet capsule, but plainly a button (as the app's). 36 px drawn, 44 px to touch. */
.rate-close {
  position: relative; flex: none; min-width: 0; min-height: 0; height: 36px; padding: 0 16px; border-radius: 18px;
  border: 1px solid rgba(238, 231, 221, .32); background: rgba(238, 231, 221, .08); color: var(--c-ink);
  font: 500 16px var(--serif); cursor: pointer; transition: background .15s var(--ease), transform .15s var(--ease);
}
.rate-close::after { content: ""; position: absolute; inset: -4px -2px; }
.rate-close:hover { background: rgba(238, 231, 221, .14); }
.rate-close:active { transform: scale(.97); background: rgba(238, 231, 221, .18); }
.rate-close:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 2px; }
.rate-readout { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-top: 8px; }
.rate-num { font: 350 60px/64px var(--serif); font-variant-numeric: tabular-nums; color: var(--c-ink); }
.rate-word { font: italic 22px var(--serif); color: var(--c-ink-soft); }
.rate-said { margin-left: auto; font: italic 15px var(--serif); color: var(--c-muted); white-space: nowrap; }
.rate-slider { position: relative; height: 44px; margin-top: 12px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.rate-slider:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 3px; }
.rate-track { position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 3px; }
.rate-tick { position: absolute; top: 30px; width: 1px; height: 6px; background: var(--c-track); transform: translateX(-.5px); }
.rate-tick.near { background: var(--c-ink); height: 8px; }
.rate-notch { position: absolute; top: 9px; width: 2px; height: 26px; margin-left: -1px; background: var(--c-ember); border-radius: 1px; }
.rate-thumb {
  position: absolute; top: 8px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%;
  background: rgba(255, 250, 245, .92); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 3px 10px rgba(0, 0, 0, .45); transition: transform .12s;
}
.rate-slider.drag .rate-thumb { transform: scale(1.12); }
.rate-scale { position: relative; height: 18px; font: 13px var(--serif); color: var(--c-muted); }
.rate-scale span { position: absolute; top: 0; white-space: nowrap; }
.rate-scale .n0 { left: 0; }
.rate-scale .n5 { left: 50%; transform: translateX(-50%); }
.rate-scale .n10 { right: 0; }
.rate-scale .said-l { color: var(--c-ember); font-style: italic; transform: translateX(-50%); }
.rate-body .form-error { margin-top: 12px; }
.rate-send {
  display: block; width: 100%; height: 52px; margin-top: 20px; border: 0; border-radius: 26px; background: var(--c-ember); color: #1a0f08;
  font: 500 18px var(--serif); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .15s var(--ease), opacity .2s;
}
.rate-send:active { transform: scale(.985); }
.rate-send.done { background: #2a2430; color: var(--c-ink); }
.rate-foot { margin: 14px 0 0; font: italic 14px/1.4 var(--serif); color: var(--c-muted); }
.rate-foot.error { color: var(--c-ember); }

/* How Sunset Oracle works (#sheet-about) and the alert offer (#sheet-offer): dark, as the app's sheets */
.sheet.about-sheet {
  background: #141117; color: var(--c-ink); font-family: var(--serif);
  border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0;
}
.about-sheet .grabber { background: var(--c-ink); opacity: .3; }
/* How Sunset Oracle works slides up from the bottom (a translateY), over its own backdrop, and back down; a drag
   down moves it with the finger (.dragging: no easing while it follows). Over Places when opened from there. */
.about-scrim { position: fixed; inset: 0; z-index: 7; background: rgba(0, 0, 0, .45); transition: opacity .38s var(--ease); }
.about-scrim.off { opacity: 0; }
#sheet-about { z-index: 8; animation: none; transition: transform .38s var(--ease); touch-action: pan-y; }
#sheet-about.off { transform: translateY(calc(100% + 40px)); }
#sheet-about.dragging { transition: none; }
#sheet-about .grabber { cursor: grab; }
/* the title stays put while the page scrolls, unless the text is so large it would take a third of the screen */
.sheet.about-sheet { container-type: inline-size; }
.about-sheet .sheet-head { position: sticky; top: calc(var(--space-s) * -1); z-index: 1; gap: var(--space-m); margin: 0 calc(var(--space-l) * -1);
  padding: var(--space-s) var(--space-l) var(--space-s); background: linear-gradient(#141117 80%, rgba(20, 17, 23, 0)); }
@container (max-width: 16em) { .about-sheet .sheet-head { position: static; } }
.about-sheet .sheet-head h2 { font: 300 var(--fs-title2)/var(--lh-title2) var(--serif); min-width: 0; }
.about-sheet .close { color: var(--c-ember); font-family: var(--serif); font-weight: 400; }
.about-body { display: grid; gap: var(--space-m); padding-top: var(--space-xs); }
.about-sheet .about-card { background: var(--c-raised); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.about-hero { position: relative; border-radius: var(--radius-card); overflow: hidden; }
.about-hero .ex-sky { aspect-ratio: auto; height: 200px; border-radius: 0; }
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13, 11, 16, .78), rgba(13, 11, 16, .45) 45%, rgba(13, 11, 16, 0) 80%); }
.about-hero p { position: absolute; z-index: 1; left: 18px; right: 18px; top: 16px; margin: 0; font: 300 1.5rem/1.25 var(--serif); color: var(--c-ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .45); }
.about-what { margin: 0 var(--space-xs); font: var(--fs-body)/var(--lh-body) var(--serif); color: var(--c-ink-soft); }
.about-again {
  justify-self: start; min-height: 44px; margin-top: var(--space-s); padding: 0 var(--space-xs); border: 0; background: none;
  font: var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); text-align: left;
}
.about-again span { color: var(--c-ember); }
/* the ⓘ on the prediction card, right after its title (either face): on the title's line, drawn 20 px beside its
   22 px words, touched 44. It flows with the words, so a title that wraps takes it along to the end of its last line;
   the margins give the line back all but a small gap before it (the 44 px square never makes the line taller). */
.title-line h2 { display: inline; }
.info-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px -12px -12px -8px; padding: 0;
  vertical-align: middle; border: 0; border-radius: 50%; background: none; color: var(--c-muted); cursor: pointer;
}
.info-btn:focus-visible { outline: 2px solid var(--c-ember); outline-offset: -4px; }
.info-btn:active { color: var(--c-ink); }
/* the Places row: always a tap away (the ⓘ needs a scored night) */
.about-row {
  display: flex; align-items: center; gap: var(--space-m); width: 100%; min-height: 52px; margin-top: 18px;
  padding: 14px var(--space-l); border-radius: var(--radius-card); border: 1px solid var(--field-edge); background: var(--field);
  color: var(--glass-ink); font: var(--fs-body)/var(--lh-body) var(--serif); text-align: left;
}
.about-row .about-i { flex: none; color: var(--accent); }
.about-row-text { flex: 1; min-width: 0; }
.about-row-go { color: var(--accent); }
/* the + in the add-a-place field: this field adds a place, it isn't a filter */
.search { position: relative; }
.search-plus { position: absolute; left: 13px; top: 14px; color: var(--accent); pointer-events: none; }
.search input { padding-left: 42px; }
/* Want a heads-up? */
.offer-sheet { display: grid; gap: var(--space-s); padding-top: var(--space-xl); }
.offer-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 300 var(--fs-title2)/var(--lh-title2) var(--serif); }
.offer-title svg { flex: none; color: var(--c-ember); }
.offer-text { margin: var(--space-xs) 0 0; font: var(--fs-body)/var(--lh-body) var(--serif); color: var(--c-ink-soft); }
.offer-yes {
  display: grid; place-items: center; min-height: 52px; padding: 12px 20px; border-radius: 26px; background: var(--c-ember); color: #1a1014;
  font: var(--fs-body)/var(--lh-body) var(--serif); text-decoration: none; text-align: center;
}
.offer-sheet .offer-no { justify-self: center; color: var(--c-muted); font: var(--fs-body)/var(--lh-body) var(--serif); }

/* account */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 12px 0 18px; font-size: 16px; }
.facts dt { color: var(--glass-ink-soft); }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.account-actions { display: grid; gap: 10px; margin-top: 18px; }
.stats-link { display: grid; place-items: center; text-decoration: none; }
.api-hint { margin-top: 16px; font-size: 12px; text-align: center; }

/* ---------- a new place's first minute (arrivalview.js) ---------- */
/* The checklist rests high over the sky, clear of the ridge, so the page can be watched building behind it: the sky
   painting in, the ridge rising, the number settling. The scrim dims the sky and the cards, not the checklist. */
.arrival-scrim {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 6, 12, .5), rgba(8, 6, 12, .18) 60%, rgba(8, 6, 12, .3));
  transition: opacity .5s var(--ease);
}
.arrival {
  position: fixed; z-index: 3; top: calc(var(--safe-t) + var(--space-l));
  left: calc(var(--safe-l) + var(--space-l)); right: calc(var(--safe-r) + var(--space-l));
  max-width: 528px; margin: 0 auto; display: grid; gap: var(--space-s);
  max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 110px); overflow-y: auto;
  animation: arrival-in .5s var(--ease) both;
}
.arrival[hidden], .arrival-scrim[hidden] { display: none; }
.arrival.leaving { animation: arrival-out .35s var(--ease) both; }
@keyframes arrival-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes arrival-out { to { opacity: 0; transform: translateY(-8px); } }
.arrival-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-m); }
.arrival-head h2 { font-style: italic; }
.arrival-clock { font: var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "Working…" by the clock: only under Reduce Motion, where nothing turns (the spinners and the shimmer stand still). */
.arrival-working { display: none; }
/* Work under way: an ember glint sweeps along the card's top edge, over and over (no progress: it doesn't know one).
   Absolutely placed, so it takes no room and nothing moves when it goes. */
.arrival::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 1.5px; border-radius: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c-ember), transparent) no-repeat;
  background-size: 35% 100%; background-position: -50% 0; opacity: 0; transition: opacity .6s var(--ease);
}
.arrival.working::before { opacity: .85; animation: arrival-sweep 1.8s ease-in-out infinite; }
@keyframes arrival-sweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.arrival-note { margin: 0; font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-ink-soft); }
.arrival-note:empty { display: none; }
.arrival-rows { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-m); }
.arrival-row { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-m); align-items: start; transition: opacity .4s var(--ease); }
.arrival-row.hidden { opacity: 0; }
.arrival-row .mark { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; }
.arrival-row[data-mark="waiting"] .mark { border: 1.5px solid var(--c-track); animation: arrival-breathe 1.6s ease-in-out infinite; }
@keyframes arrival-breathe { 50% { opacity: .35; transform: scale(.82); } }
.arrival-row[data-mark="working"] .mark, .arrival-row[data-mark="slow"] .mark {
  border: 1.5px solid color-mix(in srgb, var(--c-ember) 30%, transparent); border-top-color: var(--c-ember);
  animation: arrival-spin 1.1s linear infinite;
}
.arrival-row[data-mark="slow"] .mark { animation-duration: 2.2s; }
.arrival-row[data-mark="done"] .mark { background: var(--c-ember); color: #1a1014; animation: arrival-pop .35s var(--ease); }
.arrival-row[data-mark="stopped"] .mark { border: 1.5px dashed var(--c-faint); }
@keyframes arrival-spin { to { transform: rotate(360deg); } }
@keyframes arrival-pop { from { transform: scale(.4); } to { transform: none; } }
.arrival-row .row-title { margin: 0; font: var(--fs-body)/var(--lh-body) var(--serif); color: var(--c-ink); }
.arrival-row[data-mark="waiting"] .row-title { color: var(--c-muted); }
.arrival-row .row-detail, .arrival-row .row-extra {
  margin: 2px 0 0; font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted);
}
.arrival-row[data-mark="done"] .row-detail { color: var(--c-ink-soft); }
.arrival-row .row-extra { color: var(--c-ember); }
.arrival-row .spark { display: block; width: 100%; max-width: 220px; height: 26px; margin-top: 6px; overflow: visible; }
.spark .line { fill: none; stroke: var(--c-ink-soft); stroke-width: 1.3; stroke-linejoin: round; }
.spark .fill { fill: rgba(255, 255, 255, .06); }
.spark .sun { fill: var(--c-ember); }
.spark.draw .line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: spark-draw 1.4s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
.arrival-go {
  justify-self: stretch; margin-top: var(--space-s); min-height: 48px; border-radius: 99px; border: 0;
  font: 600 17px var(--font); background: none; color: var(--c-ember); transition: background .3s, color .3s;
}
.arrival-go.ready { background: var(--c-ember); color: #1a1014; }
/* Not yet: dimmed, in its place, so nothing jumps when it wakes. */
.arrival-go[aria-disabled="true"] { color: var(--c-faint); background: rgba(255, 255, 255, .06); cursor: default; }
/* the painted sky's brightness eases as it paints in (the dusk while tracing, then full once the ridge is in) */
#sky-canvas { transition: filter 1.2s ease-in-out; }

/* toast */
.toast {
  position: fixed; z-index: 10; left: 50%; bottom: calc(var(--safe-b) + 92px); transform: translateX(-50%);
  max-width: calc(100vw - 40px); padding: 12px 18px; border-radius: 16px;
  background: rgba(20, 16, 30, 0.82); color: #fff; font-size: 15px; text-align: center;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  animation: fade .3s var(--ease);
}

@media (min-width: 700px) {
  .sheet { bottom: 24px; border-radius: 28px; border-bottom: 1px solid var(--glass-edge); }
  .sheet.rate-sheet { bottom: 0; border-radius: 0; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  /* How Sunset Oracle works fades in and out instead of sliding */
  #sheet-about, .about-scrim { transition: opacity .2s linear !important; }
  #sheet-about.off { transform: none; opacity: 0; }
  /* the new-place checklist stands still: a steady line where the shimmer was, and it says so */
  .arrival.working::before { background: color-mix(in srgb, var(--c-ember) 45%, transparent); background-size: auto; }
  .arrival.working .arrival-working { display: inline; }
  /* the ridge cross-fades in instead of rising */
  .ridge-top, .ridge-crest { transition: opacity .8s ease-in-out !important; }
}

/* ---------- why this score? (the detail cards) ---------- */

.detail .card { display: grid; gap: 12px; }
.detail .card[hidden] { display: none; }

/* ---------- "Prediction summary" (three dials), then, for accounts that can inspect, "Prediction details" ---------- */
.detail .card-head { min-width: 0; }
.details-card[hidden] { display: none; }
/* The details card's header is its toggle: the title's button stretches over the whole row (::after), the ⓘ sits
   above that, right after the title, and the chevron is drawn at the row's end (taps pass through it). */
.dhead { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: var(--space-m); }
.dtoggle { all: unset; cursor: pointer; color: inherit; font: inherit; overflow-wrap: break-word; }
.dtoggle::after { content: ""; position: absolute; inset: -8px; border-radius: 18px; }
.dtoggle:focus-visible::after { outline: 2px solid var(--c-ember); outline-offset: 0; }
.dhead .info-btn { position: relative; z-index: 1; }
.dchev { justify-self: center; margin-top: 4px; color: var(--c-ember); pointer-events: none; transition: transform .35s cubic-bezier(.2, 0, 0, 1); }
.details-card .open .dchev { transform: rotate(180deg); }
.dbody[hidden] { display: none; }
.dbody-in { display: grid; gap: 12px; }
.why-rows { display: grid; gap: var(--space-s); }
.whyrow { display: grid; grid-template-columns: 84px auto 36px 1fr; gap: var(--space-m); align-items: center; font: var(--fs-body)/var(--lh-body) var(--font); }
.whyrow .why-dots { display: flex; gap: 5px; }
.whyrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-track); }
.whyrow .dot.on { background: var(--c-ember); }
.whyrow .wv { text-align: right; font-variant-numeric: tabular-nums; }
.whyrow .wd { font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); }
@media (max-width: 340px) { .whyrow { grid-template-columns: 84px auto 36px; } .whyrow .wd { grid-column: 1 / -1; } }

.back-body { display: grid; gap: var(--space-m); min-width: 0; }
.back .when, .back .rated { margin: 0; font: var(--fs-subheadline)/1.4 var(--font); color: var(--c-muted); }
.back .rated { color: var(--c-ink-soft); } .back .rated b { color: var(--c-ink); font-weight: 500; }
.back h3 { margin: 0; display: flex; align-items: center; gap: var(--space-s); font: 600 16px/1.35 var(--font); }
.back .say { margin: 6px 0 0; font: 15px/21px var(--font); color: var(--c-ink); }
.back .rule { margin: 6px 0 0; font: 13px/18px var(--font); color: var(--c-muted); }
.chain { list-style: none; margin: 0; padding: 0; }
.chain > li { position: relative; padding: 0 0 var(--space-l) 34px; }
.chain > li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 1px; background: rgba(242, 144, 72, .35); }
.chain > li:last-child::before { display: none; }
.chain h3 { margin: 0 0 var(--space-s) -34px; }
.chain .n { width: 23px; height: 23px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--c-ember);
  color: var(--c-ember); font: 500 13px/1 var(--font); font-variant-numeric: tabular-nums; }
.layers { display: grid; gap: 6px; }
.layer { display: grid; grid-template-columns: 40px 1fr 44px; gap: var(--space-s); align-items: center; font: var(--fs-subheadline)/var(--lh-subheadline) var(--serif); }
.layer .ln { color: var(--c-muted); } .layer .lv { text-align: right; font-variant-numeric: tabular-nums; }
.layer .lb { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.layer .lb i { display: block; height: 100%; border-radius: 99px; background: #d9cfc6; }
.layer.lo .lb i { background: var(--c-faint); }
/* Step 1's light chart: one strip per layer, height = cover, color = light (lit / blocked / in the Earth's shadow). */
/* The two label columns are fixed (40 + 40 px and two 8 px gaps = 96 px), so the sunset line and the axis line up with the
   strips: x = 96px + (100% - 96px) × (t + 20) / 35. */
.lchart { --lab: calc(80px + 2 * var(--space-s)); position: relative; display: grid; gap: 6px; }
.lrow { display: grid; grid-template-columns: 40px 40px 1fr; gap: var(--space-s); align-items: end; }
.lrow .ln { color: var(--c-muted); align-self: center; font: var(--fs-subheadline)/var(--lh-subheadline) var(--serif); }
.lrow .lv { text-align: right; font-variant-numeric: tabular-nums; align-self: center; color: var(--c-ink); font: var(--fs-subheadline)/var(--lh-subheadline) var(--serif); }
.lstrip { display: block; width: 100%; height: 26px; overflow: visible; }
/* a layer with no cloud at all: no strip, a faint dotted track on the baseline so the rows still line up */
.lstrip.lnone { box-sizing: border-box; border-bottom: 1px dotted var(--c-muted); opacity: .6; }
.lmark { position: absolute; top: -2px; bottom: 16px; left: calc(var(--lab) + (100% - var(--lab)) * var(--sunset)); border-left: 1px dashed rgba(238, 231, 221, .6); pointer-events: none; }
.laxis { position: relative; margin-left: var(--lab); height: 16px; font: var(--fs-caption)/1 var(--font); color: var(--c-muted); container-type: inline-size; }
@container (max-width: 259px) { .laxis .t10 { display: none; } }
@container (max-width: 179px) { .laxis .tm10, .laxis b { display: none; } }
.laxis b { font-weight: inherit; }
.laxis span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.laxis span:first-child { transform: none; } .laxis span:last-child { transform: translateX(-100%); }
.ls-l { fill: var(--c-ember); background: var(--c-ember); }
.ls-b { fill: var(--c-track); background: var(--c-track); }
.ls-d { fill: var(--c-shadow); background: var(--c-shadow); stroke: rgba(160, 174, 230, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.llegend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); margin: 0; font: var(--fs-caption)/var(--lh-caption) var(--font); color: var(--c-muted); }
.llegend span { display: inline-flex; align-items: center; gap: 6px; }
.llegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.llegend i.ls-d { box-shadow: inset 0 0 0 1px rgba(160, 174, 230, .35); }
.lsay { margin: 0; color: var(--c-ink-soft); font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); }
.gate { display: flex; align-items: baseline; gap: var(--space-s); flex-wrap: wrap; }
.gate .gv { font: 300 34px/40px var(--serif); font-variant-numeric: tabular-nums; }
.gate .gl { font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--c-muted); }
.dial { padding: var(--space-m); border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); margin: 0 0 var(--space-s); min-width: 0; }
.dhead { display: flex; align-items: baseline; gap: var(--space-s); }
.dhead .dn { font: var(--fs-body)/var(--lh-body) var(--serif); }
.dhead .dg { flex: 1; font: italic 14px/20px var(--serif); color: var(--c-muted); }
.dhead .dp { font: var(--fs-body)/var(--lh-body) var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dhead .dp small { font-size: 14px; color: var(--c-muted); }
.dbar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin: 6px 0 2px; overflow: hidden; }
.dbar i { display: block; height: 100%; border-radius: 99px; }
.dial-contrast .dbar i, .wtrack .s-contrast { background: var(--c-contrast); }
.dial-variety .dbar i, .wtrack .s-variety { background: var(--c-variety); }
.dial-contours .dbar i, .wtrack .s-contours { background: var(--c-contours); }
.wtrack .s-bonus { background: var(--c-bonus); }
.back .math { margin: 6px 0 0; font: 13px/18px var(--font); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.back .math b { font-weight: 600; color: var(--c-ink); }
.wtrack { position: relative; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.wtrack i { position: absolute; top: 0; bottom: 0; display: block; }
.wtrack .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--c-ink); }
.wscale { position: relative; height: 18px; font: 12px/18px var(--font); color: var(--c-faint); }
.wscale span { position: absolute; top: 0; transform: translateX(-100%); } .wscale span:first-child { left: 0; transform: none; }
.sumline { margin: 2px 0 0; font: var(--fs-body)/var(--lh-body) var(--serif); font-variant-numeric: tabular-nums; }
.sumline b { font-weight: 500; font-size: 20px; }
.sumline .c-contrast { color: #f0a07c; } .sumline .c-variety { color: #e0788e; } .sumline .c-contours { color: #ae97dc; } .sumline .c-bonus { color: #ecc774; }
.effects { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font: 14px/20px var(--font); }
.effects .ev { font-variant-numeric: tabular-nums; color: var(--c-ink); font-weight: 600; }
.effects .ew { color: var(--c-muted); }
.bsec { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--space-m); }
.moves { list-style: none; margin: var(--space-s) 0 0; padding: 0; display: grid; gap: 6px; }
.moves li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; font: 15px/21px var(--font); }
.moves .was { color: var(--c-muted); font-style: italic; font-size: 13px; }
.moves .ms { font-variant-numeric: tabular-nums; }
.moves .md { font: 500 13px/1 var(--font); color: #9fd49a; font-variant-numeric: tabular-nums; }
.moves .none { display: block; color: var(--c-muted); }
.back .bfoot { margin: 0; font: 12px/16px var(--font); color: var(--c-faint); overflow-wrap: anywhere; }
/* The back's "How this prediction moved": chart, then the log (changed.js) */
.phist[hidden] { display: none; }
.phist .changed { margin: 0 0 var(--space-s); }
.pchart-box { position: relative; margin: var(--space-s) 0 0; border-radius: 8px; outline-offset: 3px; }
.pchart-box:focus-visible { outline: 2px solid var(--c-ember); }
/* pan-y: an up-and-down swipe that starts on the chart always scrolls the page; the scrub needs a press and hold
   (attachScrub in historychart.js). No long-press callout or text selection under the held finger. */
.pchart { width: 100%; max-width: 100%; height: auto; display: block; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; }
.pchart .g { stroke: var(--field-edge); }
.pchart .hourly { fill: currentColor; opacity: 0.05; }
.pchart .g10 { fill: var(--field-edge); }
.pchart .g10on { fill: var(--glass-ink-soft); opacity: 0.7; }
.pchart .sun { stroke: var(--c-bonus); stroke-width: 1.5; stroke-dasharray: 2 3; }
.pchart .now { stroke: var(--glass-ink-soft); stroke-width: 1; opacity: 0.6; }
.pchart .hold { fill: none; stroke: var(--c-contrast); stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; opacity: 0.8; }
.pchart .step { fill: none; stroke: var(--c-contrast); stroke-width: 2; stroke-linejoin: round; }
.pchart .dot { fill: var(--c-contrast); }
.pchart .final { fill: none; stroke: var(--c-ink); stroke-width: 1.8; }
.pchart .rating { fill: var(--c-bonus); stroke: var(--c-ink); stroke-width: 1; }
.pchart .sel line { stroke: var(--c-ink); stroke-width: 1; opacity: 0.55; }
.pchart .sel circle { fill: none; stroke: var(--c-ink); stroke-width: 1.5; }
.pchart text { font-size: 10px; fill: var(--glass-ink-soft); font-variant-numeric: tabular-nums; }
.pchart text.sunl { fill: var(--c-bonus); }
.pcallout { position: absolute; top: 0; width: max-content; max-width: min(15rem, 100%); padding: 6px 9px; border-radius: 8px;
  background: #1d1a24; border: 1px solid rgba(255, 255, 255, 0.12); color: #eee7dd; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); pointer-events: none;
  font: 13px/1.35 var(--font); display: grid; gap: 1px; z-index: 2; }
.pcallout[hidden] { display: none; }
.pcallout .pc-when { color: #a79e98; font-variant-numeric: tabular-nums; }
.pcallout b { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }
.pcallout .pc-held { color: #a79e98; font-size: 12px; }
.plog { list-style: none; margin: var(--space-s) 0 0; padding: 0; display: grid; gap: 6px; }
.plog li { display: block; }
.plog-b { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; border-radius: 6px; display: grid; grid-template-columns: 6.6em 2.4em 1fr; column-gap: 10px; align-items: baseline; font: 14px/20px var(--font); }
.plog-b:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 2px; }
.plog-b:disabled { cursor: default; }
@media (hover: hover) { .plog-b:not(:disabled):hover .lt { color: var(--c-ink-soft); } }
.plog .lt { color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plog .ls { font-variant-numeric: tabular-nums; text-align: right; color: var(--c-ink); }
.plog .ln { color: var(--c-ink-soft); overflow-wrap: anywhere; min-width: 0; }
.plog .fin .ls { font-weight: 600; }
.plog-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 14px/1.35 var(--font); color: var(--c-ink-soft); }
@media (max-width: 360px) { .plog-b { grid-template-columns: 2.4em 1fr; } .plog .lt { grid-column: 1 / -1; font-size: 13px; line-height: 18px; } }
.every-step { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--space-m); }
.every-step > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 16px/1.35 var(--font); color: var(--c-ink-soft); }
.every-step > summary:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 2px; }
.every-step #inspect-body { margin-top: var(--space-s); }
.detail { --glass-ink: #eee7dd; --glass-ink-soft: #a79e98; --field: rgba(255, 255, 255, 0.06); --field-edge: rgba(255, 255, 255, 0.12); }

.why {
  margin-top: 14px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, 0.14); color: var(--ink-soft); font-size: 14px; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.why:active { background: rgba(255, 255, 255, 0.24); }
.why-i {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-grid; place-items: center; font: italic 600 11px/1 Georgia, serif;
}

.inspect { --c-contrast: #e0764a; --c-variety: #b8425a; --c-contours: #7a5fb0; --c-bonus: #e2b04a; }
/* as on the card headings in the app: the day in italic under the heading; how sure, upright */
.inspect-sub { margin: 0; color: var(--c-muted); font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); }
#inspect-body { display: grid; gap: 14px; min-width: 0; }
#inspect-body > * { min-width: 0; }
.headline { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 500; }
.total { display: flex; align-items: baseline; gap: var(--space-s); flex-wrap: wrap; }
.total-of { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--glass-ink-soft); }
.stack { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--field); border: 1px solid var(--field-edge); }
.seg { display: block; height: 100%; }
.seg-contrast, .part-contrast .bar span { background: var(--c-contrast); }
.seg-variety, .part-variety .bar span { background: var(--c-variety); }
.seg-contours, .part-contours .bar span { background: var(--c-contours); }
.seg-bonus, .part-bonus .bar span { background: var(--c-bonus); }

.parts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.part { padding: 14px; border-radius: 18px; background: var(--field); border: 1px solid var(--field-edge); display: grid; gap: 8px; }
.part-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 16px; }
.part-pts { font-variant-numeric: tabular-nums; color: var(--glass-ink-soft); font-size: 15px; white-space: nowrap; }
.bar { height: 8px; border-radius: 99px; background: rgba(120, 120, 128, 0.2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 99px; }
.part-gloss { margin: 0; font-size: 14px; color: var(--glass-ink-soft); line-height: 1.4; }
.why-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }

.ins-sec { border-top: 1px solid var(--field-edge); padding-top: 12px; display: grid; gap: 10px; }
.ins-sec h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ins-sec p { margin: 0; font-size: 15px; line-height: 1.45; }
.badge { justify-self: start; padding: 3px 10px; border-radius: 99px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--c-bonus) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c-bonus) 45%, transparent); }

.inspect table { width: 100%; border-collapse: collapse; font-size: 15px; }
.inspect th, .inspect td { padding: 8px 0; border-bottom: 1px solid var(--field-edge); text-align: left; vertical-align: top; }
.inspect td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.signals th { font-weight: 400; }
.sig-label { display: block; font-weight: 600; }
.sig-gloss { display: block; font-size: 13px; color: var(--glass-ink-soft); line-height: 1.35; margin-top: 2px; }
.lp th { font-weight: 500; }
.lp thead th { font-size: 13px; color: var(--glass-ink-soft); font-weight: 500; }
.lp thead th:not(:first-child) { text-align: right; }
.shadows tr.applied .sig-label { color: var(--glass-ink); }
.shadows tr:not(.applied) td { color: var(--glass-ink-soft); }
.obs-list li { overflow-wrap: anywhere; }
.obs-list .obs-fog::marker { color: var(--c-bonus); }
.obs-where { display: block; font-size: 13px; color: var(--glass-ink-soft); margin-top: 2px; }
.ins-sec p.would { font-size: 15px; }

.hist-chart { width: 100%; height: auto; display: block; }
.hist-chart .grid { stroke: var(--field-edge); }
.hist-chart .step { fill: none; stroke: var(--c-contrast); stroke-width: 2; stroke-linejoin: round; }
.hist-chart .dot { fill: var(--c-contrast); }
.hist-chart .dot.last { fill: var(--c-bonus); stroke: var(--c-contrast); stroke-width: 1.5; }
.hist-chart .sunline { stroke: var(--c-bonus); stroke-width: 1.5; stroke-dasharray: 2 3; }
.hist-chart text { font-size: 10px; fill: var(--glass-ink-soft); font-variant-numeric: tabular-nums; }
.hist-list thead th { font-size: 13px; color: var(--glass-ink-soft); font-weight: 500; }
.hist-list thead th:not(:first-child) { text-align: right; }
.hist-list tbody th { font-weight: 400; white-space: nowrap; }
.inspect .hist-list th, .inspect .hist-list td { padding: 6px 0; }
.inspect .hist-list td { padding-left: 10px; }

.raw { margin-top: 0; }
.raw pre {
  margin: 6px 0 0; padding: 12px; border-radius: 14px; background: var(--field); border: 1px solid var(--field-edge);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 60vh; overflow: auto;
}
.foot { font-size: 12px; overflow-wrap: anywhere; }

/* ---------- share links (owner controls in the Places sheet) ---------- */

.share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.share-btn {
  min-height: 36px; padding: 0 16px; border-radius: 99px; font-size: 15px; font-weight: 600;
  background: var(--field); color: var(--glass-ink); border: 1px solid var(--field-edge);
}
.share-btn:active { transform: scale(.98); }
.share-state { font-size: var(--fs-footnote); color: var(--glass-ink-soft); line-height: 1.35; }
.share-off { border: 0; background: none; padding: 0; min-height: 44px; font-size: 13px; color: var(--danger); font-weight: 600; }

/* ---------- inspect: walk through the math ---------- */
.moved li { font-size: 15px; }
.walk { border-radius: 18px; background: var(--field); border: 1px solid var(--field-edge); padding: 0 14px; }
.walk > summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 48px; padding: 12px 0;
  cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--glass-ink);
}
.walk > summary::-webkit-details-marker { display: none; }
.walk-name::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--glass-ink-soft); transition: transform .2s var(--ease); }
.walk[open] > summary .walk-name::before { transform: rotate(90deg); }
.walk.part-contrast .walk-name::before { color: var(--c-contrast); }
.walk.part-variety .walk-name::before { color: var(--c-variety); }
.walk.part-contours .walk-name::before { color: var(--c-contours); }
.walk.part-bonus .walk-name::before { color: var(--c-bonus); }
.walk > .hint { margin-bottom: 10px; }
.steps { margin: 0 0 14px; padding-left: 24px; display: grid; gap: 14px; }
.step { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }   /* a list-item, so it keeps its number */
.step > * { display: block; }
.step > * + * { margin-top: 3px; }
.step::marker { color: var(--glass-ink-soft); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.step-label { font-size: 15px; }
.step-in, .step-why { color: var(--glass-ink-soft); }
.step-why { font-size: 13px; font-style: italic; }
.step code, .sum-line code { font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: normal; overflow-wrap: anywhere; }
.step-rule { color: var(--glass-ink-soft); }
.step-calc code { font-weight: 600; color: var(--glass-ink); }
.step-last { padding-top: 10px; border-top: 1px solid var(--field-edge); }
.sum-line { display: grid; gap: 4px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--field-edge);
  background: color-mix(in srgb, var(--c-bonus) 16%, transparent); }
.sum-line code { font-size: 16px; font-weight: 600; }

/* Reduce Transparency: solid cards and bar, no frosting */
@media (prefers-reduced-transparency: reduce) {
  .card, .glass-clear { background: var(--c-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- clearer at a glance ---------- */
/* the score's word on its baseline: "3.9 · so-so" (the day card), "so-so" under a Places score */
.score-group { display: flex; align-items: last baseline; gap: var(--space-s); min-width: 0; }
.score-word { font: italic 320 var(--fs-title3)/var(--lh-title3) var(--serif); color: var(--c-muted); white-space: nowrap; }
.place-score { display: grid; justify-items: end; }
.place-score .place-word { font: italic var(--fs-subheadline)/var(--lh-subheadline) var(--serif); color: var(--glass-ink-soft); }
/* what the "?" on a later night means, said once, small */
/* under a bell that is on: When (a segmented lead), How good (a 1-9 slider with its word), the rule */
.alert-settings { display: grid; gap: 6px; }
.alert-label { font-size: 14px; color: var(--glass-ink-soft); }
.alert-value { font-size: 14px; color: var(--glass-ink); font-variant-numeric: tabular-nums; }
.alert-lead { margin-bottom: 4px; }
/* an alert's rule in words, under the slider of a bell that is on */
.alert-rule { margin: 0; font: var(--fs-footnote)/var(--lh-footnote) var(--serif); color: var(--glass-ink-soft); }


/* ---------- the share card (sharecard.js): the button on the place card, and its preview sheet ---------- */
.place-head { display: flex; align-items: flex-start; gap: var(--space-s); }
.place-head .place-name { flex: 1; min-width: 0; }
.share-open {
  flex: none; width: 44px; height: 44px; margin: -6px -10px -6px 0; display: grid; place-items: center;
  border: 0; background: none; color: var(--c-ember); cursor: pointer; border-radius: 22px;
}
.share-open[hidden] { display: none; }
.share-open:active { opacity: .6; }
.share-preview {
  display: block; width: 100%; height: auto; aspect-ratio: 1; margin-top: var(--space-m);
  border-radius: var(--radius-control); background: var(--c-raised);
}
.share-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  min-height: 44px; margin-top: var(--space-l); cursor: pointer;
}
.share-toggle-text { display: grid; gap: var(--space-2xs); }
.share-toggle-title { font: 400 var(--fs-body)/var(--lh-body) var(--serif); color: var(--glass-ink); }
.share-note { font: 400 var(--fs-footnote)/var(--lh-footnote) var(--serif); color: var(--glass-ink-soft); }
/* a switch, drawn from the checkbox */
.share-toggle input {
  appearance: none; -webkit-appearance: none; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 16px;
  background: var(--c-track); position: relative; cursor: pointer; transition: background .2s var(--ease);
}
.share-toggle input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s var(--ease);
}
.share-toggle input:checked { background: var(--c-ember); }
.share-toggle input:checked::after { transform: translateX(20px); }
.share-toggle input:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 2px; }
.share-send {
  display: block; width: 100%; height: 52px; margin-top: var(--space-l); border: 0; border-radius: 26px;
  background: var(--c-ember); color: #1a0f08; font: 500 18px var(--serif); cursor: pointer;
}
.share-send:disabled { opacity: .45; cursor: default; }
.share-send:active:not(:disabled) { transform: scale(.985); }