/* ============================================================================
   WhenStars — celestial theme.  Dark, elegant, gold-on-indigo.
   ========================================================================== */
:root {
  /* Light "Secession" theme — warm ivory paper, antique-gold linework. */
  --bg-0: #EFE7D3;
  --bg-1: #F4EDDD;
  --bg-2: #FBF7EC;
  --ink: #2E2A20;
  --ink-dim: #6C6555;
  --ink-faint: #9B927E;
  --gold: #AE8529;
  --gold-soft: #E6C97F;
  --violet: #5A54A0;
  --line: rgba(74, 58, 20, 0.18);
  --line-soft: rgba(74, 58, 20, 0.11);
  --glass: rgba(255, 251, 240, 0.55);
  --glass-2: rgba(255, 251, 240, 0.82);
  --shadow: 0 16px 40px rgba(70, 54, 20, 0.16);
  --page-bg: radial-gradient(120% 90% at 50% -10%, #FDFAF1 0%, #F4EDDD 45%, #EFE7D3 100%);
  --glow: rgba(174, 133, 41, 0.10);
  --good: #2F5A3E;
  --caution: #8A5A16;
  --bad: #8A3B30;
  --ink-rgb: 74, 58, 20;
  --gold-rgb: 230, 198, 122;
  --good-rgb: 63, 110, 79;
  --caution-rgb: 192, 134, 43;
  --bad-rgb: 154, 59, 46;

  /* These :root values are the light "Secession" skin — the no-JS fallback. At runtime the
     active skin's tokens (config/skins.py, served via /config) are stamped over them, and
     --tier-1..--tier-5 come from config/hours.py TIERS. Do not hardcode a skin colour below;
     use var(--token) (or color-mix on --ink/--gold) so every skin restyles automatically. */

  --radius: 20px;
  --radius-sm: 13px;
  --hourpx: 52px;   /* day-grid hour height — kept in sync with HOURPX in app.js at runtime */
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --maxw: 480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--page-bg) fixed;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- ambient sky (driven by the skin's data-ambient) ---------------------- */
.starfield { display: none; }
:root[data-ambient="stars"] .starfield {
  display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background:
    radial-gradient(1px 1px at 18% 28%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 42% 68%, var(--gold-soft), transparent),
    radial-gradient(1px 1px at 84% 58%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 54% 42%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 12% 78%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 90% 82%, var(--gold-soft), transparent),
    radial-gradient(1px 1px at 33% 12%, rgba(255,255,255,.45), transparent);
  background-repeat: no-repeat;
}
.glow {
  position: fixed; inset: -10% 0 auto 0; height: 42vh; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, var(--glow), transparent 72%);
}
:root[data-ambient="none"] .glow { display: none; }
@media (prefers-reduced-motion: reduce) { .starfield { animation: none; } }

/* --- graphical skin art ---------------------------------------------------
   A skin can be backed by bitmaps (Midjourney or any generator): drop a file into
   static/skins/<skin>/ and the backend serves it, applySkin() stamps these vars, and the
   layers below appear. Nothing here is per-image: an arbitrary picture is fitted, dimmed to
   --art-*-opacity, and covered by a scrim of the skin's OWN page background at
   --art-*-scrim. That pair is what keeps type legible and the palette on-skin whatever the
   generator produced. With no bitmap present the layers stay display:none and the skin
   renders from its colour tokens exactly as before. */
.skinart { display: none; }
:root[data-has-art] .skinart {
  display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
/* full-bleed backdrop */
.skinart__bg {
  background-image: var(--art-background);
  background-size: var(--art-background-size, cover);
  background-position: var(--art-background-position, center top);
  background-repeat: no-repeat;
  opacity: var(--art-background-opacity, .55);
}
/* the legibility scrim: the skin's own page background, laid over the bitmap */
.skinart__scrim {
  background: var(--page-bg);
  opacity: var(--art-background-scrim, .72);
}
/* seamless tiling texture (paper grain, star dust) */
.skinart__tex {
  background-image: var(--art-texture);
  background-size: var(--art-texture-size, 512px 512px); background-repeat: repeat;
  opacity: var(--art-texture-opacity, .18);
  mix-blend-mode: var(--art-texture-blend, overlay);
}
:root:not([data-has-art~="background"]) .skinart__bg,
:root:not([data-has-art~="background"]) .skinart__scrim { display: none; }
:root:not([data-has-art~="texture"]) .skinart__tex { display: none; }

/* Banner art behind a screen's header block. Sits inside the flow, not fixed. */
:root[data-has-art~="banner"] .screen > .eyebrow:first-child,
:root[data-has-art~="banner"] .hero {
  position: relative; isolation: isolate;
}
:root[data-has-art~="banner"] .hero::before {
  content: ""; position: absolute; inset: -18px -20px; z-index: -1; border-radius: 18px;
  background-image: var(--art-banner);
  background-size: cover; background-position: var(--art-banner-position, center);
  opacity: var(--art-banner-opacity, .85);
}
:root[data-has-art~="banner"] .hero::after {
  content: ""; position: absolute; inset: -18px -20px; z-index: -1; border-radius: 18px;
  background: var(--page-bg); opacity: var(--art-banner-scrim, .35);
}
/* Card reverse for any planet card with no art of its own. */
:root[data-has-art~="card_back"] .pcard__img[data-fallback] {
  background-image: var(--art-card-back);
  background-size: cover; background-position: center;
}

/* A button that reads as a link. Used where a screen offers a way ON somewhere rather than
   an action here: the app's start screen keeps the email form behind one of these, so the
   first thing a new person meets is one button and not two boxes asking for a password. */
.textlink { background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--gold);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.textlink:hover { color: var(--ink); }
.textlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px;
  border-radius: 2px; }

/* --- layout --------------------------------------------------------------- */
#app { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto;
  padding: calc(26px + env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom)); }
.screen { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.12; letter-spacing: .2px; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin-bottom: 12px; }
h3 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
p { color: var(--ink-dim); line-height: 1.5; }
.muted { color: var(--ink-faint); font-size: 12.5px; }

/* --- cards / surfaces ----------------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
.section { margin-top: 26px; }
.hr { height: 1px; background: var(--line); border: 0; margin: 14px 0; }
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .4px; border: 1px solid var(--line); color: var(--ink-dim); }
.pill--preview { color: #0c1024; background: var(--gold-soft); border-color: transparent; }

/* --- buttons / inputs ----------------------------------------------------- */
button, input, select { font-family: inherit; font-size: 15px; color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 18px; border: 0; border-radius: 14px; cursor: pointer;
  font-weight: 600; letter-spacing: .3px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #241c07; box-shadow: 0 10px 24px rgba(230, 198, 122, 0.22);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px) scale(.997); }
.btn--ghost { background: var(--glass-2); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }

.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 7px; }
/* The consent tick. NOT the uppercase label register above: this is a sentence a person has to
   read and decide about, and setting it in 12px tracked caps like a field name is how a checkbox
   becomes furniture. The whole row is the hit target, and the box is never pre-ticked. */
.field > label.agree {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  font-size: 14.5px; line-height: 1.55; letter-spacing: 0; text-transform: none;
  color: var(--ink-dim); margin-bottom: 0; padding: 2px 0;
}
.agree input[type="checkbox"] {
  flex: none; width: 19px; height: 19px; margin-top: 1px; accent-color: var(--gold); cursor: pointer;
}
/* Links inside a consent sentence. These were the browser default: a full-strength underline hard
   against gold 14.5px text, which reads as scruffy rather than as something to tap.
   `from-font` plus a thin, translucent rule keeps the sentence calm while the weight and colour
   still say "this is a link" - and it stays legible for anyone who cannot pick out the gold. The
   underline goes solid on press, so a tap is acknowledged even before the document opens.
   The vertical padding is not cosmetic: it lifts a two-word inline link closer to a real tap
   target on a phone, without disturbing the line box. */
.agree a, .muted.center a {
  color: var(--gold); font-weight: 600;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  padding: 3px 1px; border-radius: 4px;
  transition: text-decoration-color .12s, background-color .12s;
}
.agree a:focus-visible, .muted.center a:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
/* Softening the rule is an ENHANCEMENT, not the design. `color-mix` needs a WebView from Chrome
   111 and `minSdk` here is 23, so on an old device the whole declaration would be dropped and the
   underline would silently revert to full-strength currentColor. Behind @supports, the thinner
   rule and the tap highlight arrive where they can and everything else still holds. Hardcoding an
   rgba instead would put a second copy of the gold in this file, which is the drift the tier
   colours are already policed against. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .agree a, .muted.center a {
    text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent);
  }
  .agree a:hover, .muted.center a:hover { text-decoration-color: var(--gold); }
  .agree a:active, .muted.center a:active {
    text-decoration-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 14%, transparent);
  }
}
.input, select.input {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink); outline: none; transition: border-color .15s;
  appearance: none;
}
.input:focus { border-color: var(--gold); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; align-items: center; gap: 9px; color: var(--ink-dim); font-size: 14px; }
.check input { width: 17px; height: 17px; accent-color: var(--gold); }

/* --- domain bars ---------------------------------------------------------- */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.bar__label { font-size: 14px; color: var(--ink); }
.bar__tier { font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.bar__track { height: 9px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.10); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2,.7,.2,1); }

/* --- now strip ------------------------------------------------------------ */
.now { display: flex; align-items: center; gap: 14px; }
.now__glyph { font-size: 34px; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 16px; background: var(--glass-2); border: 1px solid var(--line); }
.now__meta { flex: 1; }
.now__ruler { font-family: var(--serif); font-size: 19px; }
.now__time { font-variant-numeric: tabular-nums; color: var(--ink-dim); font-size: 13px; }

/* --- planet cards --------------------------------------------------------- */
.planets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.pcard { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line);
  background: var(--glass); position: relative; }
.pcard__img { display: block; width: 100%; aspect-ratio: 5/7; object-fit: cover;
  border-bottom: 1px solid var(--line); background: var(--bg-2); }
.pcard__body { padding: 11px 12px 13px; }
.pcard__name { font-family: var(--serif); font-size: 16px; text-transform: capitalize; }
.pcard__pos { font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.badge { font-size: 10px; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-dim); text-transform: capitalize; }
.badge--dig { color: var(--good); border-color: rgba(63, 110, 79, .34); background: rgba(63, 110, 79, .12); }
.badge--deb { color: var(--bad); border-color: rgba(154, 59, 46, .34); background: rgba(154, 59, 46, .12); }
.badge--rx { color: var(--gold); border-color: rgba(174, 133, 41, .40); }

/* --- data rows / lists ---------------------------------------------------- */
.kv { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--ink-dim); }
.kv .v { font-variant-numeric: tabular-nums; }
.lot { padding: 9px 0; border-bottom: 1px solid var(--line); }
.lot:last-child { border-bottom: 0; }
.lot .kv { padding: 0; border: 0; }
.lot__m { margin-top: 4px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }
.aspect { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.aspect:last-child { border-bottom: 0; }
.aspect__mid { font-size: 11px; letter-spacing: .5px; color: var(--ink-faint); text-align: center; }
.aspect__a { text-align: right; text-transform: capitalize; }
.aspect__b { text-transform: capitalize; }
.glyphdot { color: var(--gold); }

/* --- hours timeline ------------------------------------------------------- */
.hours { display: flex; flex-direction: column; gap: 8px; }
.hour { display: grid; grid-template-columns: 8px 46px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 13px; border: 1px solid var(--line); background: var(--glass); }
.hour--now { border-color: var(--gold); background: linear-gradient(180deg, rgba(var(--gold-rgb), .14), var(--glass)); }
.hour__accent { width: 8px; height: 34px; border-radius: 6px; }
.hour__glyph { font-size: 22px; text-align: center; }
.hour__ruler { font-family: var(--serif); font-size: 15px; }
.hour__sub { font-size: 11.5px; color: var(--ink-faint); }
.hour__time { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-dim); text-align: right; }

/* --- chart wheel ---------------------------------------------------------- */
.wheel-wrap { display: grid; place-items: center; padding: 6px 0 2px; }
.wheel { width: 100%; max-width: 380px; height: auto; }

/* --- nav ------------------------------------------------------------------ */
.nav { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom)); width: min(var(--maxw), calc(100% - 28px));
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(251, 247, 236, 0.85); border: 1px solid var(--line); border-radius: 20px;
  padding: 8px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.nav__btn { background: none; border: 0; cursor: pointer; color: var(--ink-faint);
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: 13px;
  transition: color .15s, background .15s; }
.nav__btn.is-active { color: var(--gold); background: var(--glass-2); }
.nav__icon { font-size: 19px; line-height: 1; }
.nav__label { font-size: 10.5px; letter-spacing: .4px; }
.is-hidden { display: none !important; }

/* --- misc ----------------------------------------------------------------- */
.center { text-align: center; }
.stack > * + * { margin-top: 10px; }
.spacer { height: 8px; }
.loading { display: grid; place-items: center; min-height: 40vh; color: var(--ink-faint); }
/* Full-screen loader now uses the rotating star (same motif as the guidance loader), scaled up. */
.loading .gload { flex-direction: column; gap: 12px; }
.loading .gload__orbit { font-size: 38px; }
.loading .gload__txt { font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.brandmark { font-family: var(--serif); font-size: 15px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--gold); }
.hero { text-align: center; padding: 30px 6px 8px; }
.hero__ring { font-size: 46px; color: var(--gold); margin-bottom: 12px; filter: drop-shadow(0 0 18px rgba(var(--gold-rgb), .4)); }

/* --- chips ---------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.chips__label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }
.chip { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.chip--good { background: rgba(var(--good-rgb), .14); border-color: rgba(var(--good-rgb), .34); color: var(--good); }
.chip--caut { background: rgba(var(--caution-rgb), .15); border-color: rgba(var(--caution-rgb), .40); color: var(--caution); }
/* The chart you are currently reading, in the settings switcher. Filled rather than
   outlined, because with two charts the question is which ONE is active, and an outline reads as
   "available" rather than "selected". */
.chip.is-on { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 600; }

/* --- toggle --------------------------------------------------------------- */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px; margin-top: 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--glass);
  font-size: 13.5px; color: var(--ink-dim); }
.toggle input { width: 42px; height: 24px; appearance: none; border-radius: 999px; background: rgba(var(--ink-rgb), .20);
  position: relative; cursor: pointer; transition: background .2s; flex: none; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .2s; }
.toggle input:checked { background: var(--gold); }
.toggle input:checked::after { transform: translateX(18px); }

/* --- dominion: principle / luminaries / cautions / placements ------------- */
.principle__name { font-family: var(--serif); font-size: 26px; margin: 6px 0 8px; }
.lumin { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.lumin:last-child { border-bottom: 0; }
.lumin__g { font-size: 30px; width: 40px; text-align: center; flex: none; }
.lumin strong { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.lumin p, .caution p { color: var(--ink-dim); font-size: 14px; margin-top: 4px; line-height: 1.5; }
.bullets { list-style: none; }
.bullets li { position: relative; padding: 8px 0 8px 22px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.bullets li:last-child { border-bottom: 0; }
.bullets li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }
.caution { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.caution:last-of-type { border-bottom: 0; }
.caution__ic { color: var(--tier-2); font-size: 18px; flex: none; margin-top: 1px; }
.caution strong { font-size: 15px; }
.place { border-bottom: 1px solid var(--line); }
.place:last-child { border-bottom: 0; }
.place > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.place > summary::-webkit-details-marker { display: none; }
.place__g { font-size: 20px; width: 26px; text-align: center; flex: none; }
.place__t { flex: 1; font-size: 14px; }
.place__s { font-size: 10.5px; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; background: var(--glass-2);
  border: 1px solid var(--line); color: var(--gold); text-transform: lowercase; }
.place[open] > summary { color: var(--gold); }
.place > p, .place__body p { color: var(--ink-dim); font-size: 14px; line-height: 1.55; padding: 0 0 14px 36px; }

/* --- calendar ------------------------------------------------------------- */
.iconbtn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--glass-2);
  color: var(--ink); font-size: 20px; cursor: pointer; line-height: 1; }
.iconbtn:hover { color: var(--gold); }
.cal { margin-top: 18px; }
.cal__head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.cal__head span { text-align: center; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__cell { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: var(--glass);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
  position: relative; padding: 4px; transition: transform .1s, border-color .15s; }
.cal__cell:hover { border-color: var(--tc, var(--gold)); transform: translateY(-1px); }
.cal__cell--empty { background: none; border: none; cursor: default; }
.cal__cell--today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.cal__cell--locked { opacity: .5; cursor: pointer; }
.cal__num { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal__dot { width: 7px; height: 7px; border-radius: 50%; }
.cal__word { font-size: 8.5px; letter-spacing: .2px; color: var(--ink-faint); text-align: center; line-height: 1; }
.cal__lock { font-size: 11px; }
.lockcard { border-color: rgba(var(--gold-rgb), .35); }

/* --- bottom sheet + purchase --------------------------------------------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 20; background: rgba(60,48,20,.34); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s; }
.sheet-wrap.is-open { opacity: 1; }
.sheet { width: min(var(--maxw), 100%); max-height: 88vh; overflow-y: auto; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 24px 24px 0 0; padding: 20px 20px calc(28px + env(safe-area-inset-bottom));
  transform: translateY(20px); transition: transform .25s cubic-bezier(.2,.7,.2,1); box-shadow: 0 -20px 60px rgba(70,54,20,.28); }
.sheet-wrap.is-open .sheet { transform: none; }
.sheet--sm { border-radius: 24px; margin: auto; max-height: 82vh; }
.sheet-wrap:has(.sheet--sm) { align-items: center; padding: 20px; }
.sheet__close { position: sticky; top: 0; float: right; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass-2); color: var(--ink-dim); cursor: pointer; font-size: 13px; }
.sheet__title h2 { font-family: var(--serif); }
.price { font-family: var(--serif); font-size: 40px; color: var(--gold); text-align: center; margin: 18px 0; }
.buyopts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.buyopt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 14px 16px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--glass-2); color: var(--ink); transition: border-color .15s, transform .1s; }
.buyopt:hover { border-color: var(--gold); }
.buyopt:active { transform: translateY(1px); }
.buyopt__l { font-size: 14px; }
.buyopt__p { font-family: var(--serif); font-size: 20px; color: var(--gold); flex: none; }

/* --- day summary + meetings ---------------------------------------------- */
.daysum__head { font-family: var(--serif); font-size: 21px; margin-top: 10px; }
.event { position: relative; padding: 12px 30px 12px 0; border-bottom: 1px solid var(--line); }
.event:last-child { border-bottom: 0; }
.event__t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.event__t strong { font-size: 15px; }
.event__time { font-variant-numeric: tabular-nums; color: var(--ink-dim); font-size: 13px; flex: none; }
.event__del { position: absolute; right: 0; top: 12px; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--glass-2); color: var(--ink-faint); cursor: pointer; font-size: 11px; }
.evbadge { display: inline-block; margin-top: 7px; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-dim); }
.evbadge--good { background: rgba(var(--good-rgb), .14); border-color: rgba(var(--good-rgb), .34); color: var(--good); }
.evbadge--caut { background: rgba(var(--caution-rgb), .15); border-color: rgba(var(--caution-rgb), .40); color: var(--caution); }
.tl__ev { font-size: 12.5px; color: var(--gold); margin-top: 4px; }

/* --- calendar: header bar (view tabs + lens) ----------------------------- */
.calbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.segbtn { border: 0; background: none; color: var(--ink-dim); padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; }
.segbtn.is-on { background: var(--gold); color: #241c07; }
.lenswrap { font-size: 12px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.lens { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; appearance: none; }

/* --- calendar: month ----------------------------------------------------- */
.mgrid__head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 16px 0 6px; }
.mgrid__head span { text-align: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mcell { aspect-ratio: 0.82; border-radius: 11px; border: 1px solid var(--line); background: var(--glass); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 6px 3px 4px; transition: transform .1s, border-color .15s; }
.mcell:hover { transform: translateY(-1px); border-color: var(--gold); }
.mcell--empty { background: none; border: 0; cursor: default; }
.mcell--today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.mcell--locked { opacity: .45; }
.mcell__n { font-size: 13px; font-variant-numeric: tabular-nums; }
.mcell__bar { width: 70%; height: 5px; border-radius: 3px; }
.mcell__best { font-size: 8.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.mcell__lock { font-size: 11px; }

/* --- calendar: week ------------------------------------------------------ */
.wk { margin-top: 16px; }
.wk__head { display: grid; grid-template-columns: 32px repeat(7, 1fr); gap: 3px; margin-bottom: 4px; position: sticky; top: 0; }
.wk__corner { }
.wk__day { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 0; border-radius: 8px; }
.wk__day--today { background: var(--glass-2); }
.wk__wd { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
.wk__num { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wk__grid { display: grid; grid-template-columns: 32px repeat(7, 1fr); gap: 3px; }
.wk__time { font-size: 9.5px; color: var(--ink-faint); text-align: right; padding-right: 4px; height: 20px; line-height: 20px; font-variant-numeric: tabular-nums; }
.wk__cell { height: 20px; border-radius: 4px; cursor: pointer; }
.wk__cell--empty { background: rgba(var(--ink-rgb), .05); }

/* --- calendar: day rows -------------------------------------------------- */
.hrows { display: flex; flex-direction: column; gap: 6px; }
.hrow { display: grid; grid-template-columns: 52px 6px 1fr; align-items: stretch; gap: 10px; padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--glass); cursor: pointer; text-align: left; }
.hrow--now { border-color: var(--gold); background: linear-gradient(180deg, rgba(var(--gold-rgb), .12), var(--glass)); }
.hrow__time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); display: flex; flex-direction: column; }
.hrow__time span { color: var(--ink-faint); font-size: 10.5px; }
.hrow__bar { border-radius: 4px; }
.hrow__head { font-family: var(--serif); font-size: 15px; }
.hrow__sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.hmark { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.hmark--best { color: var(--good); background: rgba(var(--good-rgb), .16); border: 1px solid rgba(var(--good-rgb), .40); }
.hmark--worst { color: var(--caution); background: rgba(var(--caution-rgb), .18); border: 1px solid rgba(var(--caution-rgb), .40); }

/* ============================================================================
   Outlook-style calendar (celestial theme)
   ========================================================================== */
.screen--cal { padding-bottom: 4px; }
/* padding-right keeps "New" clear of the fixed astrologer-view pill in the top corner */
.otool { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 52px; }
.otool__nav { display: flex; align-items: center; gap: 6px; }
.obtn { background: var(--glass-2); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.obtn--accent { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #241c07; border: 0; }
.oarrow { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--glass-2); color: var(--ink); font-size: 18px; cursor: pointer; }
.otool__label { font-family: var(--serif); font-size: 20px; margin: 10px 0 6px; }
.otabs { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.otabs__scroll { display: inline-flex; background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 3px; overflow-x: auto; }
.otab { border: 0; background: none; color: var(--ink-dim); padding: 6px 11px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.otab.is-on { background: var(--gold); color: #241c07; }
/* domain filter row — pick which pictograms overlay the day grid */
.odomrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.odomrow__lbl { font-size: 11px; color: var(--ink-faint); flex: none; }
.odomrow__scroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.dchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-dim); cursor: pointer; font-size: 12px; white-space: nowrap; flex: none; }
.dchip.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--ink); }
.dchip__i { width: 15px; height: 15px; display: inline-flex; flex: none; }
.dchip__i svg { width: 100%; height: 100%; display: block; }
.dchip:not(.is-on) .dchip__i { opacity: .5; }

.ohead { display: flex; margin-top: 12px; }
.ohead__gut { width: 34px; flex: none; }
.ohead__days { flex: 1; display: grid; }
.ohd { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; padding: 3px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ohd--today { border-bottom-color: var(--gold); }
.ohd__wd { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
.ohd__n { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

.ogrid { display: flex; overflow-y: auto; max-height: calc(100dvh - 260px); margin-top: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--ink-rgb), .05); position: relative; }
.ogutter { width: 34px; flex: none; position: relative; border-right: 1px solid var(--line); }
.ohr { position: absolute; right: 5px; font-size: 10px; color: var(--ink-faint); transform: translateY(-6px); font-variant-numeric: tabular-nums; }
.ocols { flex: 1; display: grid; position: relative; }
.ocol { position: relative; border-right: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hourpx) - 1px), rgba(var(--ink-rgb), .09) calc(var(--hourpx) - 1px), rgba(var(--ink-rgb), .09) var(--hourpx)); }
.ocol:last-child { border-right: 0; }
.oband { position: absolute; left: 0; right: 0; overflow: hidden; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 2px 4px; }
.oband__lbl { font-size: 8.5px; color: var(--ink-dim); white-space: nowrap; flex: none; }
/* a continuation row of the same planetary hour: the name again, quieter, no start time */
.oband__lbl--cont { color: var(--ink-faint); }
/* margin-left:auto pins the pictograms to the right edge whatever precedes them. Relying on
   justify-content alone put them on the LEFT whenever they were the row's only child. */
.oband__icons { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; overflow: hidden;
  margin-left: auto; flex: none; }
/* The day's best / worst window, called out on the grid itself so it is findable at a glance
   rather than only mentioned in the summary sentence. */
.oband__flag { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 999px; white-space: nowrap; flex: none; align-self: center; }
.oband__flag--best { color: var(--good); background: rgba(var(--good-rgb), .16); }
.oband__flag--worst { color: var(--bad); background: rgba(var(--bad-rgb), .16); }
/* Pictograms appear only on extreme hours, so they are given room to read clearly. A bad hour
   is struck through as well as recoloured: the SHAPE carries the meaning, which survives a
   glance and does not depend on telling green from red. */
.dicon { width: 15px; height: 15px; display: inline-flex; flex: none; }
.dicon svg { width: 100%; height: 100%; display: block; }
.dicon--strong { width: 17px; height: 17px; }
.dicon--good.dicon--strong svg { filter: drop-shadow(0 0 3px rgba(var(--good-rgb), .55)); }
.dicon--bad.dicon--strong svg { filter: drop-shadow(0 0 3px rgba(var(--bad-rgb), .55)); }
/* the day's standout areas on the week/month picker */
.wpill__marks { display: flex; align-items: center; justify-content: center; gap: 3px; height: 15px; }
.wpill__marks .dicon { width: 12px; height: 12px; }
.wpill__marks .dicon--strong { width: 13px; height: 13px; }
.oevent { position: absolute; left: 4px; right: 4px; color: #0c1024; border-radius: 6px; padding: 3px 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.28); z-index: 3; cursor: pointer; border-left: 3px solid rgba(0,0,0,.28); }
.oevent b { font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 4px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oevent span { font-size: 9.5px; opacity: .8; font-variant-numeric: tabular-nums; }
.cicon { display: inline-flex; flex: none; width: 16px; height: 16px; }
.cicon svg { width: 100%; height: 100%; display: block; }
.oevent .cicon { width: 17px; height: 17px; }
/* the phone-calendar overlay: read-only, so a dashed edge says "not yours to drag" at a glance */
.oevent--device { border-left-style: dashed; cursor: default; }
.dd__allday { margin-top: 8px; font-size: 12.5px; color: var(--ink-dim); }

/* the machine-translation notice: one quiet line pinned above the bottom nav on every screen
   while the served language awaits native review. pointer-events off - it informs, never blocks. */
.mtnote { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom)); max-width: min(var(--maxw), calc(100% - 40px));
  padding: 3px 12px; border-radius: 999px; font-size: 10.5px; color: var(--ink-dim);
  background: var(--bg-2); border: 1px solid var(--line);
  pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* extreme-hour marker on the band + drag-create ghost */
.ocol { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ocreate { position: absolute; left: 4px; right: 4px; background: rgba(174,133,41,.20); border: 1.5px dashed var(--gold); border-radius: 7px; z-index: 5; font-size: 10.5px; color: #6B4E12; padding: 3px 6px; pointer-events: none; font-variant-numeric: tabular-nums; }
.onow { position: absolute; left: 0; right: 0; height: 2px; background: #e4694e; z-index: 4; }
.onow::before { content: ""; position: absolute; left: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e4694e; }
.cal__foot { text-align: center; font-size: 11px; color: var(--ink-faint); padding: 9px 0 2px; }

/* month grid (Outlook-like cells with event chips) */
.omhead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 16px 0 5px; }
.omhead span { text-align: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.omgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ocell { min-height: 64px; border-radius: 9px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; padding: 5px; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.ocell--empty { background: none; border: 0; cursor: default; }
.ocell--today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.ocell--locked { opacity: .45; align-items: center; justify-content: center; flex-direction: row; gap: 5px; }
.ocell__top { display: flex; align-items: center; justify-content: space-between; }
.ocell__n { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ocell__dot { width: 8px; height: 8px; border-radius: 50%; }
.ocell__lock { font-size: 11px; }
.ochip { font-size: 9px; background: rgba(90,84,160,.18); border-radius: 4px; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }

/* --- day picker (week strip) --------------------------------------------- */
.wstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.wpill { border: 1px solid var(--line); background: var(--glass); border-radius: 12px; padding: 8px 0 7px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .1s; }
.wpill:hover { transform: translateY(-1px); }
.wpill.is-on { background: var(--gold); border-color: var(--gold); }
.wpill.is-on .wpill__wd, .wpill.is-on .wpill__n { color: #241c07; }
.wpill--today:not(.is-on) { border-color: var(--gold); }
.wpill__wd { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
.wpill__n { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wpill__dot { width: 6px; height: 6px; border-radius: 50%; }

/* --- day picker (month grid) --------------------------------------------- */
.mphead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0 4px; }
.mphead span { text-align: center; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.mpgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mp { aspect-ratio: 1; border: 1px solid var(--line); background: var(--glass); border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.mp--e { background: none; border: 0; cursor: default; }
.mp.is-on { background: var(--gold); border-color: var(--gold); color: #241c07; }
.mp--today:not(.is-on) { border-color: var(--gold); }
.mp--lock { opacity: .4; }
.mp__dot { width: 6px; height: 6px; border-radius: 50%; }

/* --- one-day detail ------------------------------------------------------ */
.daydetail { margin-top: 12px; }
.dd__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dd__sum { font-size: 12.5px; color: var(--ink-dim); margin: 8px 0 6px; line-height: 1.45; }
.ogrid--one { max-height: none; height: 46vh; }

/* --- event editor: category chips --------------------------------------- */
.catrow { display: flex; flex-wrap: wrap; gap: 7px; }
.catchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-dim); cursor: pointer; font-size: 13px; }
.catchip.is-on { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 22%, transparent); color: var(--ink); }
.catchip .cicon { width: 18px; height: 18px; }

/* rolling-wheel time picker */
.twheel { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; height: 170px; margin-top: 4px; overflow: hidden; border-radius: 12px; background: rgba(var(--ink-rgb), .06); }
.twheel__col { height: 170px; overflow-y: auto; scroll-snap-type: y mandatory; padding: 68px 0; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.twheel__col::-webkit-scrollbar { display: none; }
.twheel__it { height: 34px; line-height: 34px; scroll-snap-align: center; text-align: center; min-width: 46px; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--ink-faint); transition: color .12s, transform .12s; cursor: pointer; }
.twheel__it.is-sel { color: var(--ink); font-weight: 700; transform: scale(1.14); }
.twheel__sep { font-size: 19px; font-weight: 700; color: var(--ink-dim); }
.twheel__band { position: absolute; left: 6px; right: 6px; top: 68px; height: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(174,133,41,.12); border-radius: 7px; pointer-events: none; }

/* ============================================================================
   Guidance layer + global astrologer toggle (v0.3.0)
   ========================================================================== */
/* Global "Astrologer view" toggle — floats on every screen (survives re-renders). */
.afab { position: fixed; z-index: 6; top: calc(14px + env(safe-area-inset-top)); right: 14px;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 19px; line-height: 1;
  color: var(--gold); background: rgba(251,247,236,.85); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow);
  transition: color .15s, background .15s, transform .12s; }
.afab:active { transform: scale(.94); }
.afab.is-on { color: #241c07; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); border-color: transparent; }

/* Day / domain / combined guidance prose (LLM-narrated, deterministic fallback). */
.dd__guide { font-size: 13.5px; line-height: 1.55; }
.dd__guide p { color: var(--ink-dim); }
/* "Preparing your reading" loader shown during (slow) Spark guidance calls */
.gload { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.gload__orbit { font-size: 18px; line-height: 1; color: var(--gold); display: inline-block; animation: spin 1.3s linear infinite; }
.gload__txt { font-size: 13px; color: var(--ink-dim); letter-spacing: .2px; }
.gload__dots::after { content: ""; animation: gdots 1.4s steps(1,end) infinite; }
@keyframes gdots { 0% { content: ""; } 25% { content: "·"; } 50% { content: "··"; } 75% { content: "···"; } }

/* The "several areas run low — what does this mean for you?" affordance. */
.dd__warn { display: block; width: 100%; text-align: left; margin-top: 12px; cursor: pointer;
  padding: 12px 14px; border-radius: 13px; font-size: 13px; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--tier-2) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tier-2) 45%, transparent); }
.dd__warn:active { transform: translateY(1px); }

/* Astrologer-view planetary-hours list under the day grid. */
.phrs { display: flex; flex-direction: column; }
.phr { display: grid; grid-template-columns: 24px 92px 1fr auto 8px; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.phr:last-child { border-bottom: 0; }
.phr__g { font-size: 18px; text-align: center; }
.phr__t { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.phr__r { color: var(--ink); }
.phr__p { color: var(--ink-faint); font-size: 12px; }
.phr__dot { width: 8px; height: 8px; border-radius: 50%; }

/* Tappable "Right now" card + tappable domain bars → explanations. */
.now-card { cursor: pointer; }
.now-card__hint { margin-top: 10px; color: var(--gold); font-size: 11.5px; }
.now__more { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--line); background: var(--glass-2); color: var(--ink-faint); font-size: 13px; }
.bar--tap { cursor: pointer; border-radius: 10px; margin: 0 -6px; padding: 4px 6px; transition: background .15s; }
.bar--tap:hover { background: var(--glass); }

/* Planet significations under each astrologer planet card. */
.pcard__mean { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--ink-faint); }

/* ============================================================================
   Landscape (rotated phone): a wide 7-day week grid with all days at once
   ========================================================================== */
.wwhead { display: flex; margin-top: 8px; }
.wwhead__gut { width: 34px; flex: none; }
.wwhead__days { flex: 1; display: grid; gap: 0; }
.wwhd { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 2px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink-dim); }
.wwhd.is-on { color: var(--gold); }
.wwhd--today { border-bottom-color: var(--gold); }
.wwhd__wd { font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-faint); }
.wwhd__n { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wwhd__dot { width: 6px; height: 6px; border-radius: 50%; }
.wwgrid { max-height: calc(100dvh - 128px); }
.wwgrid .ocol { cursor: pointer; }

@media (orientation: landscape) and (max-height: 600px) {
  #app { max-width: none;
    padding: calc(8px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom)); }
  .screen--wide .otool__label { display: none; }         /* reclaim vertical space */
  .screen--wide .odomrow { margin-top: 4px; }
  .nav { width: min(560px, calc(100% - 28px)); }
  /* keep the floating toggle clear of the notch in landscape */
  .afab { top: 10px; right: 10px; width: 38px; height: 38px; font-size: 17px; }
  /* A 375px-tall screen has no room to waste: shrink the chrome hard and give the week grid
     everything that is left, with clearance so the floating nav never covers hour rows. */
  .screen--wide .otool { padding-right: 56px; }
  .screen--wide .otool__nav .obtn, .screen--wide .otool .obtn--accent { padding: 5px 10px; font-size: 12px; }
  .screen--wide .otabs { margin-top: 4px; }
  .screen--wide .otab { padding: 4px 12px; font-size: 12px; }
  .screen--wide .dchip { padding: 3px 9px; font-size: 11px; }
  .screen--wide .wwhead { margin-top: 4px; }
  .screen--wide .wwhd__n { font-size: 15px; }
  .screen--wide .wwgrid { max-height: calc(100dvh - 150px); }
  /* the nav floats above the grid, so end the scroll region above it */
  .screen--wide .wwgrid { scroll-padding-bottom: 64px; }
  .screen--wide .ocols { padding-bottom: 64px; }
}

/* ============================================================================
   Item ① inline "why" panel (clickable chips) + Item ② deep natal review
   ========================================================================== */
.act-chip { cursor: pointer; font-family: var(--sans); }
.act-chip.is-open { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.actx { display: none; }
.actx.is-shown { display: block; margin-top: 12px; padding: 12px 14px; border-radius: 13px;
  background: var(--glass); border: 1px solid var(--line); }
.actx p { color: var(--ink-dim); font-size: 13.5px; line-height: 1.55; }

.review-card { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.review-body p { color: var(--ink-dim); font-size: 14px; line-height: 1.6; margin-top: 10px; }
.review-body .review__h { font-family: var(--serif); font-size: 15.5px; letter-spacing: .2px;
  text-transform: none; color: var(--gold); margin: 18px 0 2px; }
.review-body .review__h:first-child { margin-top: 8px; }

/* Situation planner — "is now a good time for X" */
.dd__moment { margin-top: 10px; }
.pl-out { margin-top: 4px; }
.pl-card { margin-top: 14px; }
.pl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pl-band { font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 999px; }
.pl-band--go { color: var(--tier-5);
  background: color-mix(in srgb, var(--tier-5) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-5) 40%, transparent); }
.pl-band--care { color: var(--tier-1);
  background: color-mix(in srgb, var(--tier-1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-1) 40%, transparent); }
/* Neutral: the honest middle. Tier-3 grey, never the green "favours it" chip. */
.pl-band--neutral { color: var(--tier-3);
  background: color-mix(in srgb, var(--tier-3) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-3) 38%, transparent); }
.pl-win { font-size: 13px; color: var(--ink-dim); padding: 3px 11px;
  border: 1px solid var(--line); border-radius: 999px; }
.pl-advice { margin: 12px 0 0; line-height: 1.6; color: var(--ink); }
.pl-doms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.pl-dom { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.pl-dom i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

/* --- in-app dialog (replaces window.alert / window.confirm) --------------- */
/* The native ones are captioned with the hostname, ignore every token here, and on a phone read
   as a browser warning rather than part of the product. */
.dlg-wrap {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 22px; background: rgba(28, 22, 8, .46); backdrop-filter: blur(2px);
}
.dlg {
  width: min(400px, 100%); background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 22px 18px;
}
.dlg h2 { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.dlg p { margin-top: 9px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }
.dlg__acts { display: flex; gap: 9px; margin-top: 20px; }
.dlg__acts .btn { flex: 1; }
.btn--danger { background: var(--bad); color: #FFF6F4; box-shadow: none; }

/* --- city type-ahead ------------------------------------------------------ */
.ac { position: relative; }
.ac__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow: hidden; max-height: 264px; overflow-y: auto;
}
.ac__list:empty { display: none; }
.ac__opt {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 11px 13px; font: inherit; color: var(--ink); border-bottom: 1px solid var(--line-soft);
}
.ac__opt:last-child { border-bottom: 0; }
.ac__opt:hover, .ac__opt.is-on { background: var(--glass); }
.ac__opt small { display: block; color: var(--ink-faint); font-size: 12px; margin-top: 1px; }
.ac__credit { padding: 7px 13px; font-size: 11px; color: var(--ink-faint); background: var(--glass); }

/* --- map picker ----------------------------------------------------------- */
.mapwrap { height: 320px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.leaflet-container { background: var(--bg-1); font: inherit; }
.mappick { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.mappick .muted { flex: 1; }