:root {
  color-scheme: light;
  --ink: #17233b;
  --ink-soft: #43506a;
  --navy: #14213d;
  --gold: #b8860b;
  --gold-bright: #f2c14e;
  --parchment: #fbf7ec;
  --paper: #fffdf7;
  --line: #ddd2ba;
  --blue-soft: #e8eef8;
  --sabbath: #dbe7ff;
  --full-moon: #ffe49a;
  --feast: #f7dfae;
  --held: #f3c6c6;
  --danger: #7b1d1d;
  --shadow: 0 16px 40px rgb(23 35 59 / 0.10);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgb(242 193 78 / 0.16), transparent 32rem),
    linear-gradient(180deg, #fffaf0 0%, var(--parchment) 42%, #f4ecd9 100%);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
}

button, input, select { font: inherit; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 20;
  background: var(--navy);
  color: white;
  padding: 0.7rem 1rem;
  border-radius: 0 0 0.6rem 0.6rem;
}
.skip-link:focus { top: 0; }

/* The title's second half (his ruling 2026-11-12 23:04): "The Rhythm
   of Heaven" stands under the app's name at the gate and the masthead. */
.title-line {
  color: var(--gold);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0.15rem 0 0;
}
.gate-card .title-line { text-align: center; }

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.25rem 1.2rem;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.brand-icon {
  flex: 0 0 auto;
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 0.2rem;
  color: var(--gold);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1, h2, h3 { line-height: 1.08; }
h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 4.3rem); font-weight: 500; }
h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 500; }
h3 { margin: 0 0 0.4rem; font-size: 1.25rem; }

.edition-line {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-style: italic;
}

.offline-badge {
  flex: 0 0 auto;
  /* Eye pass (Yisrael, 2026-11-14 22:32): the badge stands at the
     RIGHT, dropped to the header's lower edge — clear of the sky's
     moon (which rides at 70% across, 12% down, squarely in the old
     top-right perch on wide and landscape screens). In the stacked
     phone header the same rule right-aligns it under the brand. */
  align-self: flex-end;
  margin: 0.5rem 0 0;
  border: 1px solid #b8a878;
  border-radius: 999px;
  background: rgb(255 253 247 / 0.82);
  padding: 0.45rem 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
}

.view-tabs {
  display: flex;
  gap: 0.4rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem;
  overflow-x: auto;
}

.view-tab {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 0.8rem 0.8rem 0 0;
  background: rgb(255 253 247 / 0.66);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
.view-tab:hover, .view-tab:focus-visible { color: var(--ink); border-color: var(--gold); }
.view-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 -6px 18px rgb(23 35 59 / 0.06);
}

.app-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.view-panel {
  border: 1px solid var(--line);
  background: rgb(255 253 247 / 0.94);
  border-radius: 0 1rem 1rem 1rem;
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 3vw, 2.4rem);
}

.today-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 1.2rem;
  align-items: stretch;
}

.today-date-card,
.standing-card,
.ahead-card,
.notice,
.appointed-card,
.edition-summary,
.month-feast-card {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: white;
}

.today-date-card {
  padding: clamp(1.4rem, 4vw, 2.6rem);
  background:
    linear-gradient(135deg, rgb(20 33 61 / 0.97), rgb(36 55 92 / 0.97)),
    var(--navy);
  color: white;
}
.today-date-card .eyebrow { color: var(--gold-bright); }
.today-date {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  line-height: 0.98;
}
.gregorian-line {
  margin: 1rem 0 0;
  color: #e8eef8;
  font-size: 1.12rem;
}
.month-length-line { color: #cbd6ea; margin: 0.2rem 0 0; }

/* The branding scripture (his ruling, 2026-11-14): Matthew 13:52 in
   full, the largest scripture treatment on the page, standing in the
   hero flow on the page's own ground — never over the wheel art. */
.brand-verse {
  margin: 0 0 1.2rem;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 1.6rem 1.4rem 1.3rem;
  text-align: center;
}
.brand-verse-cite {
  margin: 0 0 0.7rem;
  color: var(--gold-bright);
  font-size: 1rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.brand-verse-text {
  margin: 0 auto 0.8rem;
  max-width: 46rem;
  color: #fdf6dd;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.45rem, 3.4vw, 2.1rem);
  line-height: 1.45;
}
.brand-verse-note {
  margin: 0;
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand-verse .listen-slot { margin-top: 0.9rem; }

.clock-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1.1rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--gold);
  border-radius: 0.9rem;
  background:
    linear-gradient(135deg, rgb(20 33 61 / 0.97), rgb(36 55 92 / 0.97)),
    var(--navy);
  color: #e8eef8;
  padding: 0.8rem 1.15rem;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 0.92rem;
}
.clock-time { color: var(--gold-bright); font-weight: 700; }
.clock-milestone { color: var(--gold-bright); }
.clock-milestone-second { color: #cbd6ea; font-size: 0.82rem; }

.daily-word-card {
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  border-left: 0.35rem solid var(--gold);
  border-radius: 0.9rem;
  background: white;
  padding: 1.25rem 1.4rem;
}
.daily-word-card .eyebrow { color: var(--gold); }
.alerts-card, .watch-card {
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  border-left: 0.35rem solid var(--gold);
  border-radius: 0.9rem;
  background: white;
  padding: 1.25rem 1.4rem;
}
.alerts-card .eyebrow, .watch-card .eyebrow { color: var(--gold); }
.alerts-switch { display: block; margin-top: 0.9rem; font-weight: 600; }
.alert-banner-card {
  margin-bottom: 1.2rem;
  border: 2px solid var(--gold);
  border-radius: 0.9rem;
  background: #fffaf0;
  padding: 1.25rem 1.4rem;
}
.alert-banner-card .eyebrow { color: var(--gold); }
.alert-banner-words { font-size: 1.15rem; line-height: 1.45; margin: 0.4rem 0 0.8rem; }
.daily-word-quote {
  margin: 0.4rem 0 0;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  line-height: 1.35;
}
.daily-word-line {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.standing-stack, .ahead-grid {
  display: grid;
  gap: 1rem;
}
.standing-card { padding: 1.15rem; }
.standing-card p, .ahead-card p, .appointed-card p { margin: 0.25rem 0 0; }
.standing-kind {
  display: inline-block;
  margin-bottom: 0.45rem;
  border-radius: 999px;
  background: var(--blue-soft);
  padding: 0.25rem 0.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.standing-kind.full-moon-sabbath { background: var(--full-moon); }
.standing-kind.new-moon { background: #e4ddff; }
.standing-kind.appointed-time-held { background: var(--held); }

.ahead-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.2rem;
}
.ahead-card { padding: 1.25rem; }
.ahead-date { font-size: 1.45rem; font-weight: 700; }
.ahead-seat { color: var(--ink-soft); }
.note-text {
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.conflict-label {
  display: inline-block;
  margin-top: 0.7rem;
  border-left: 0.3rem solid #b42318;
  background: #fff1f0;
  padding: 0.45rem 0.6rem;
  color: var(--danger);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

.refusal-card {
  border: 1px solid #d8a7a7;
  border-radius: 0.9rem;
  background: #fff7f5;
  padding: 1.5rem;
}
.refusal-card h2 { color: var(--danger); }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.section-subtitle { margin: 0.35rem 0 0; color: var(--ink-soft); }

.month-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.button {
  border: 1px solid #b8a878;
  border-radius: 999px;
  background: var(--navy);
  color: white;
  cursor: pointer;
  padding: 0.65rem 0.95rem;
}
.button-secondary { background: white; color: var(--ink); }
.button:hover, .button:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(242 193 78 / 0.28); }

.notice {
  margin: 1rem 0;
  border-color: #d8a7a7;
  background: #fff7f5;
  padding: 1rem;
  color: var(--danger);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.2rem;
  margin: 1rem 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
}
.legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-swatch {
  width: 1rem;
  height: 1rem;
  border: 1px solid #b8a878;
  border-radius: 0.25rem;
  display: inline-block;
}
.swatch-new-moon { background: #e4ddff; }
.swatch-sabbath { background: var(--sabbath); }
.swatch-full-moon { background: var(--full-moon); }
.swatch-feast { background: var(--feast); }
.swatch-held { background: var(--held); }

.month-scroll { overflow-x: auto; padding-bottom: 0.4rem; }
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  gap: 0.55rem;
  min-width: 880px;
}
.day-card {
  min-height: 138px;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: #fffefa;
  padding: 0.75rem;
  position: relative;
}
.day-card.is-today { outline: 3px solid var(--gold-bright); outline-offset: 1px; }
.day-card.is-new-moon { background: #f0edff; }
.day-card.is-sabbath { background: #edf3ff; }
.day-card.is-full-moon { background: #fff0bc; border-color: #c99a06; }
.day-card.has-feast { box-shadow: inset 0 -0.35rem 0 var(--feast); }
.day-card.has-held { border-color: #b42318; box-shadow: inset 0 -0.35rem 0 var(--held); }
.day-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
}
.covenant-day { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.gregorian-short { color: var(--ink-soft); font-family: Arial, Helvetica, sans-serif; font-size: 0.78rem; white-space: nowrap; }
.weekday { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.82rem; }
.mark-list, .feast-chip-list { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.65rem; }
.mark, .feast-chip {
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}
.mark { background: rgb(255 255 255 / 0.72); border: 1px solid #b8a878; }
.feast-chip { background: var(--feast); }
.feast-chip.is-held { background: var(--held); color: var(--danger); }

.month-feasts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.month-feast-card { padding: 1.1rem; }
.month-feast-card.held { border-color: #b42318; background: #fffafa; }

.appointed-list { display: grid; gap: 0.9rem; }
.appointed-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1.15rem;
}
.appointed-card.is-next { border-color: var(--gold); box-shadow: 0 0 0 2px rgb(242 193 78 / 0.25); }
.appointed-card.held { border-color: #b42318; background: #fffafa; }
.appointed-meta { text-align: right; min-width: 150px; }

/* The appointed-time page (Appointed-Time Content Law, 2026-11-14):
   the Scripture, the author's book, and the Record — three sections,
   nothing else, in the card's own dress. */
.feast-page { margin-top: 0.9rem; display: grid; gap: 0.9rem; }
.feast-section-title {
  margin: 0 0 0.35rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright, #f2c14e);
}
.feast-scripture, .feast-book {
  margin: 0 0 0.55rem;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--gold, #b8860b);
  background: rgb(242 193 78 / 0.07);
  border-radius: 0 0.5rem 0.5rem 0;
}
.feast-book { border-left-color: rgb(143 193 255 / 0.65); background: rgb(143 193 255 / 0.06); }
.feast-scripture p, .feast-book p { margin: 0; font-style: italic; }
.feast-book p { font-style: normal; }
.feast-scripture cite, .feast-book cite {
  display: block;
  margin-top: 0.35rem;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.85;
}
.feast-record { margin: 0; }
.status-pill {
  display: inline-block;
  border-radius: 999px;
  background: var(--blue-soft);
  padding: 0.25rem 0.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.status-pill.held { background: var(--held); color: var(--danger); }
.status-pill.next { background: var(--full-moon); color: var(--ink); margin-left: 0.35rem; }
.distance { margin-top: 0.5rem; font-weight: 700; }

.edition-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.2rem;
  margin-bottom: 1.4rem;
}
.edition-summary p { margin: 0.2rem 0 0; }
.summary-number { font-size: 1.6rem; font-weight: 700; }
.edition-year { margin-top: 1.6rem; }
.month-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: white;
}
.month-table th, .month-table td {
  border-bottom: 1px solid #eee5cf;
  padding: 0.75rem;
  text-align: left;
  vertical-align: top;
}
.month-table th {
  background: var(--navy);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.month-table tr:last-child td { border-bottom: 0; }
.month-table .view-month-button { margin-top: 0.35rem; }
.transition-label { color: var(--gold); font-weight: 700; }
.record-end {
  margin-top: 1.4rem;
  border-left: 0.35rem solid var(--gold);
  background: #fff8df;
  padding: 1rem;
}

.app-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
}
.app-footer p { margin: 0.35rem 0; }

@media (max-width: 760px) {
  .app-header { flex-direction: column; }
  .offline-badge { margin-top: 0; }
  .brand-lockup { align-items: flex-start; }
  .brand-icon { width: 58px; height: 58px; }
  .view-panel { border-radius: 0.8rem; padding: 1rem; }
  .today-hero, .ahead-grid, .edition-summary { grid-template-columns: 1fr; }
  .section-heading { flex-direction: column; }
  .appointed-card { grid-template-columns: 1fr; }
  .appointed-meta { text-align: left; }
  .month-table { display: block; overflow-x: auto; }
}

.wheels-motion-figure { margin: 0 0 1rem; position: relative; }
/* The living center of the wheel (his ruling 2026-11-13): the day
   number of the week — Monday 1 … Sunday 7 — stands in the middle
   piece and changes with the day, over the poster's fixed "7 Days". */
.wheel-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1d2f52, #101c33 72%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(20, 33, 61, 0.35), 0 2px 10px rgba(16, 28, 51, 0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.wheel-center-num { font-family: Georgia, 'Times New Roman', serif; font-size: 1.7rem; font-weight: 700; line-height: 1; color: #f3d98b; }
.wheel-center-day { font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.18rem; color: #e9e2cd; }
.wheel-page-figure .wheel-center { width: 104px; height: 104px; }
.wheel-page-figure .wheel-center-num { font-size: 2.7rem; }
.wheel-page-figure .wheel-center-day { font-size: 0.68rem; }
.wheels-motion { display: block; width: min(320px, 80%); margin-inline: auto; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .wheels-motion { animation: none; } }

/* The door — the access-code screen that stands in front of the app until
   the device holds the grant. */
.gate {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.25rem;
}
.gate-card {
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgb(255 253 247 / 0.94);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.gate-card .brand-icon { margin-bottom: 1rem; }
.gate-line { font-size: 1.05rem; }
.gate-form { margin-top: 1.4rem; }
.gate-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gate-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gate-row input {
  flex: 1 1 220px;
  border: 1px solid #b8a878;
  border-radius: 999px;
  background: white;
  color: var(--ink);
  padding: 0.65rem 1rem;
}
.gate-row input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(242 193 78 / 0.28);
}
.gate-error { margin: 0.8rem 0 0; color: var(--danger); font-weight: 700; }
.gate-buy { margin-top: 1.4rem; }
.gate-buy .button { display: inline-block; text-decoration: none; }

/* ---------- the sound bars (house law, 2026-11-12) ---------- */
.listen-slot {
  margin: 0.65rem 0;
}

.listen-slot:empty {
  margin: 0;
}

.listen-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.listen-bar .listen-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.listen-bar.is-speaking {
  background: var(--gold);
  color: var(--navy);
}

.listen-bar.is-unavailable {
  background: rgb(0 0 0 / 0.45);
  font-style: italic;
}

/* The reading-voice picker (his voice the default, 2026-11-14). */
.voice-row {
  display: block;
  margin: 0.9rem 0 0.2rem;
  font-weight: 600;
}

.voice-row select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--gold);
  border-radius: 0.6rem;
  background: var(--navy);
  color: #fff;
}

/* ---------- the house year + the teaching (2026-11-12) ---------- */
.house-year-line {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.teaching-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
}

.teaching-title {
  color: var(--navy);
  letter-spacing: 0.03em;
}

.teaching-subtitle {
  color: var(--gold);
  font-weight: 700;
}

.teaching-para,
.teaching-sequence {
  white-space: pre-line;
  line-height: 1.6;
}

.teaching-sequence {
  font-weight: 600;
  color: var(--navy);
}

.teaching-table {
  margin-top: 1rem;
}

/* ---------- the physical doors (2026-11-12) ---------- */
.print-card {
  margin-top: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow);
}

.print-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.print-strip {
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 253 247 / 0.82);
}

.print-strip a {
  font-weight: 700;
}

.edition-span-years {
  color: var(--gold);
  font-weight: 700;
  margin: 0.15rem 0 0.6rem;
}

/* ---------- the paid page wheel (2026-11-12) ---------- */
.gate-wheel {
  margin: 0.9rem auto 0.4rem;
  max-width: 340px;
}

.gate-inside {
  color: var(--ink-soft);
  margin: 0.35rem 0 0.9rem;
}

/* ---------- The Wheels Within Wheels page (2026-11-12) ---------- */
.wheel-page-figure .wheels-motion {
  width: min(620px, 96%);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.wheel-standing-card,
.wheel-rhythm-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

.wheel-rhythm-list {
  display: grid;
  gap: 0.45rem;
}

.wheel-rhythm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 253 247 / 0.7);
}

.wheel-rhythm-row strong {
  display: block;
}

.wheel-rhythm-row span {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.wheel-rhythm-row .wheel-rhythm-state {
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}

.wheel-rhythm-row.is-passed {
  opacity: 0.62;
}

.wheel-rhythm-row.is-standing {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

/* ---------- the astronomical look — SAMPLE (Yisrael's word, 2026-11-13) ----------
   The page carries the heavens: a deep sky field, the Mazzaroth ring
   (the twelvefold wheel of the seasons), the Hebrew standing in the
   design, and the two sticks — Jerusalem (Judah) and ancient America
   (Joseph) bound one in the hand. Sample scope: the gate + the Today
   sky band. The menorah and the wheel stand exactly as built. */
:root {
  --starfield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='18' cy='30' r='1.3' opacity='0.9'/%3E%3Ccircle cx='90' cy='18' r='1.1' opacity='0.6'/%3E%3Ccircle cx='128' cy='64' r='1.5' opacity='0.95'/%3E%3Ccircle cx='160' cy='140' r='1' opacity='0.55'/%3E%3Ccircle cx='224' cy='104' r='1' opacity='0.7'/%3E%3Ccircle cx='36' cy='168' r='1.2' opacity='0.6'/%3E%3Ccircle cx='118' cy='188' r='1.4' opacity='0.85'/%3E%3Ccircle cx='176' cy='224' r='1.1' opacity='0.6'/%3E%3Ccircle cx='150' cy='96' r='0.9' opacity='0.5'/%3E%3Ccircle cx='64' cy='132' r='0.9' opacity='0.5'/%3E%3C/g%3E%3Cg fill='%23ffe9a8'%3E%3Ccircle cx='52' cy='88' r='1' opacity='0.7'/%3E%3Ccircle cx='196' cy='36' r='1.2' opacity='0.8'/%3E%3Ccircle cx='76' cy='210' r='1' opacity='0.75'/%3E%3Ccircle cx='214' cy='190' r='1.3' opacity='0.7'/%3E%3C/g%3E%3Cg stroke='%23ffe9a8' stroke-width='1'%3E%3Cpath d='M200 141v18M191 150h18' opacity='0.45'/%3E%3Cpath d='M41 53v14M34 60h14' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
}

.gate.sky-scene {
  background:
    radial-gradient(ellipse 62% 40% at 50% -4%, rgb(242 193 78 / 0.20), transparent 70%),
    radial-gradient(ellipse 90% 55% at 50% 112%, rgb(36 55 92 / 0.55), transparent 70%),
    linear-gradient(180deg, #0a1122 0%, #101c33 55%, #0a1122 100%);
}
.gate.sky-scene .gate-card {
  background-image:
    var(--starfield),
    linear-gradient(180deg, rgb(17 29 54 / 0.97), rgb(9 15 30 / 0.98));
  background-size: 240px 240px, cover;
  color: #f3ecd9;
  border-color: rgb(242 193 78 / 0.45);
}
.gate.sky-scene .gate-card h2 { color: #ffffff; }
.gate.sky-scene .gate-label { color: #cbd6ea; }
.gate.sky-scene .gate-line { color: #f3ecd9; }
.gate.sky-scene .gate-inside { color: #cbd6ea; }
.gate.sky-scene .note-text { color: #aebad2; }
.gate.sky-scene .gate-error { color: #ffb4a8; }
.gate.sky-scene .gate-row input { border-color: rgb(242 193 78 / 0.5); }

.hebrew-line {
  margin: 0.4rem 0 0;
  color: var(--gold-bright);
  font-size: 1.45rem;
  line-height: 1.3;
  text-align: center;
}
.hebrew-gloss {
  margin: 0.15rem 0 0;
  color: #aebad2;
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}

/* The ring (min(412px, 92vw)) is taller than the square wheel film it
   encircles, so the figure reserves sky above and below it — without
   this room the ring's arcs strike the Hebrew line above and the
   paragraph below (visual check, 2026-11-13). */
.gate-wheel { position: relative; padding-block: clamp(2.75rem, 13vw, 4.75rem); }
.gate-wheel .mazzaroth-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(412px, 92vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ring-turn 90s linear infinite;
}
.gate-wheel .wheels-motion { position: relative; z-index: 1; }
.gate-wheel .wheel-center { z-index: 2; }
@keyframes ring-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mazzaroth-ring { animation: none !important; }
}

.two-sticks { margin: 1.15rem auto 0.3rem; text-align: center; }
.two-sticks-art { width: min(240px, 72%); height: auto; }
.two-sticks-line { margin: 0.35rem 0 0; color: #f3ecd9; font-weight: 700; }
.two-sticks-line [lang="he"] { color: var(--gold-bright); font-size: 1.18rem; }
.two-sticks-sub { margin: 0.15rem 0 0; color: #aebad2; font-size: 0.9rem; }

.sky-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
  border: 1px solid rgb(242 193 78 / 0.55);
  border-radius: 0.9rem;
  padding: 0.9rem 1.1rem;
  color: #f3ecd9;
  background-image:
    var(--starfield),
    linear-gradient(135deg, #0c1526 0%, #17294d 58%, #0c1526 100%);
  background-size: 240px 240px, cover;
}
.sky-band .mazzaroth-ring {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  animation: ring-spin 90s linear infinite;
}
.sky-band .two-sticks-art { width: 118px; flex: 0 0 auto; }
.sky-band-text { flex: 1 1 220px; min-width: 200px; }
.sky-band .hebrew-line { margin: 0; text-align: left; font-size: 1.3rem; }
.sky-band-line { margin: 0.2rem 0 0; color: #dbe4f5; font-size: 0.98rem; }

/* The wheel fills the whole blue hero (his word, 2026-11-14): on the
   Today page the spinning wheel film stands full-bleed across the
   whole hero area as the page's backdrop — edge to edge, no frame —
   with the band's words riding over it and the living day number
   standing in the wheel's center. What stands under the hero (the
   count itself, Covenant Year 5997) is untouched. */
/* His eye ruling, 2026-11-14 evening: the wheel stretches across the
   WHOLE front area at FULL STRENGTH — no transparency wash, no fade —
   and loses none of the art. The stage is the artwork's own square:
   it spans the hero's full width and its height follows the frame, so
   nothing is cropped and nothing is letterboxed by star-field bands.
   The film's feast plaques stand still on its outer ring (the inner
   rings turn beneath them), so the plaques themselves are doors:
   .wheel-hotspot buttons ride the stage in frame fractions and open
   the appointed time they name. */
.sky-hero {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0;
  min-height: 0;
}
.wheel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.sky-hero-wheel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}
.sky-hero .mazzaroth-ring {
  position: absolute; top: 0.9rem; right: 1.1rem; z-index: 3; pointer-events: none;
}
.sky-hero .sky-band-text {
  position: absolute; top: 0.9rem; left: 1.1rem; z-index: 3;
  max-width: min(44%, 330px); pointer-events: none;
}
.sky-hero .two-sticks-art {
  position: absolute; right: 1.1rem; bottom: 0.9rem; z-index: 3; pointer-events: none;
}
.sky-hero .sky-band-line, .sky-hero .hebrew-line { text-shadow: 0 1px 8px rgb(6 11 22 / 0.8); }
.sky-hero .wheel-center { z-index: 4; width: 84px; height: 84px; }
.sky-hero .wheel-center-num { font-size: 2.1rem; }
.sky-hero .wheel-center-day { font-size: 0.6rem; }

/* The plaque doors — invisible at rest so the art stands untouched;
   gold wakes under the pointer or the keyboard's focus. */
.wheel-hotspots { position: absolute; inset: 0; z-index: 2; }
.wheel-hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wheel-hotspot:hover,
.wheel-hotspot:focus-visible {
  background: rgb(242 193 78 / 0.14);
  outline: 2px solid rgb(242 193 78 / 0.95);
  outline-offset: -2px;
}

/* The Wheel page's big wheel carries the same doors on the same art. */
.wheel-page-figure .wheel-stage {
  width: min(560px, 100%);
  margin-inline: auto;
  border-radius: 12px;
  overflow: hidden;
}
.wheel-stage .wheels-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}

/* The flash that lands the eye on the feast a plaque opened. */
.appointed-card.feast-flash {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  animation: feast-flash-pulse 1.2s ease-in-out 2;
}
@keyframes feast-flash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(242 193 78 / 0); }
  50% { box-shadow: 0 0 0 10px rgb(242 193 78 / 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .appointed-card.feast-flash { animation: none; }
}

/* ---------- the astronomical look — THE WHOLE PAGE (Yisrael's word, 2026-11-13) ----------
   The sample pleased him, and he ruled the design must cover the whole
   page — no white part left — blended through every tab and the page
   ground itself. This layer re-lights the entire app on the gate's deep
   sky: the starfield over deep navy for the ground, dark translucent
   panels and cards, the gate palette for text (#f3ecd9 body, #cbd6ea /
   #aebad2 secondary, gold-bright accents). The sample layer above stands
   untouched — the gate, the sky band, the ring and its reserved sky,
   the menorah, and the wheel stand exactly as built. Readability is the
   law: every text color below was chosen against its new ground. */
:root {
  color-scheme: dark;
  --shadow: 0 16px 40px rgb(0 0 0 / 0.45);
}

/* The page ground itself is the deep sky now. */
body {
  background-color: #0a1122;
  background-image:
    var(--starfield),
    radial-gradient(ellipse 62% 40% at 50% -4%, rgb(242 193 78 / 0.20), transparent 70%),
    radial-gradient(ellipse 90% 55% at 50% 112%, rgb(36 55 92 / 0.55), transparent 70%),
    linear-gradient(180deg, #0a1122 0%, #101c33 55%, #0a1122 100%);
  background-size: 240px 240px, 100% 100%, 100% 100%, 100% 100%;
  color: #f3ecd9;
}

a { color: #8fc1ff; }
a:visited { color: #b9a7ff; }
::selection { background: rgb(242 193 78 / 0.35); }
input[type="checkbox"] { accent-color: var(--gold); }

/* Header + footer ride the sky. */
.edition-line { color: #cbd6ea; }
.offline-badge {
  background: rgb(13 22 41 / 0.78);
  border-color: rgb(242 193 78 / 0.5);
  color: #f3ecd9;
}
.app-footer { color: #cbd6ea; }
.app-footer strong { color: #f3ecd9; }

/* The tabs: quiet sky when resting, the panel's own field when standing. */
.view-tab {
  background: rgb(13 22 41 / 0.55);
  border-color: rgb(242 193 78 / 0.25);
  color: #cbd6ea;
}
.view-tab:hover, .view-tab:focus-visible { color: #f3ecd9; border-color: var(--gold-bright); }
.view-tab.is-active {
  background-image:
    var(--starfield),
    linear-gradient(180deg, rgb(17 29 54 / 0.94), rgb(9 15 30 / 0.96));
  background-size: 240px 240px, cover;
  color: #f3ecd9;
  box-shadow: 0 -6px 18px rgb(0 0 0 / 0.35);
}

/* Every panel is a field of the same sky. */
.view-panel {
  background-image:
    var(--starfield),
    linear-gradient(180deg, rgb(17 29 54 / 0.94), rgb(9 15 30 / 0.96));
  background-size: 240px 240px, cover;
  border-color: rgb(242 193 78 / 0.35);
  color: #f3ecd9;
}

/* Cards: dark translucent panels on the panel sky, gold-ruled edges. */
.standing-card,
.ahead-card,
.appointed-card,
.edition-summary,
.month-feast-card,
.daily-word-card,
.alerts-card,
.watch-card,
.teaching-card,
.print-card,
.wheel-standing-card,
.wheel-rhythm-card {
  background: rgb(13 22 41 / 0.78);
  border-color: rgb(242 193 78 / 0.28);
  color: #f3ecd9;
}

/* The two standing navy pieces take the stars too. */
.today-date-card,
.clock-strip {
  background-image:
    var(--starfield),
    linear-gradient(135deg, rgb(20 33 61 / 0.97), rgb(36 55 92 / 0.97));
  background-size: 240px 240px, cover;
}
.clock-strip { border-color: rgb(242 193 78 / 0.55); }

.alert-banner-card {
  background: rgb(30 26 10 / 0.85);
  border-color: var(--gold-bright);
  color: #f3ecd9;
}
.record-end {
  background: rgb(30 26 10 / 0.85);
  border-left-color: var(--gold-bright);
  color: #f3ecd9;
}
.print-strip {
  background: rgb(13 22 41 / 0.72);
  border-color: rgb(242 193 78 / 0.28);
  color: #f3ecd9;
}

/* Secondary text re-lit for the dark ground. */
.note-text,
.section-subtitle,
.ahead-seat,
.daily-word-line { color: #aebad2; }
.gregorian-short,
.weekday { color: #aebad2; }
.wheel-rhythm-row span { color: #aebad2; }
.teaching-title { color: #f3ecd9; }
.teaching-sequence { color: #f3ecd9; }
.wheel-rhythm-row .wheel-rhythm-state { color: #f3ecd9; }

/* Gold text that was cut for parchment now takes the bright gold. */
.eyebrow,
.title-line,
.teaching-subtitle,
.house-year-line,
.edition-span-years,
.transition-label { color: var(--gold-bright); }

/* Buttons + fields: the secondary button and the text fields were the
   last white pieces standing; both go dark glass with gold edges. */
.button-secondary {
  background: rgb(23 38 68 / 0.6);
  border-color: rgb(242 193 78 / 0.4);
  color: #f3ecd9;
}
.gate-row input {
  background: rgb(9 15 30 / 0.72);
  border-color: rgb(242 193 78 / 0.5);
  color: #f3ecd9;
}
.gate-row input::placeholder { color: #8fa1c0; }

/* The month grid: day cards as deep-sky cells, their standings kept as
   deep tints of the same hues the light cards carried. */
.day-card {
  background: rgb(13 22 41 / 0.72);
  border-color: rgb(221 210 186 / 0.28);
  color: #f3ecd9;
}
.day-card.is-new-moon { background: rgb(52 42 96 / 0.55); }
.day-card.is-sabbath { background: rgb(30 52 96 / 0.55); }
.day-card.is-full-moon { background: rgb(96 74 10 / 0.5); border-color: var(--gold-bright); }
.day-card.has-feast { box-shadow: inset 0 -0.35rem 0 rgb(242 193 78 / 0.55); }
.day-card.has-held { border-color: rgb(255 140 120 / 0.6); box-shadow: inset 0 -0.35rem 0 rgb(255 140 120 / 0.55); }
.mark {
  background: rgb(255 255 255 / 0.10);
  border-color: rgb(242 193 78 / 0.45);
  color: #f3ecd9;
}
.feast-chip { background: rgb(150 108 22 / 0.55); color: #ffe9a8; }
.feast-chip.is-held { background: rgb(120 30 24 / 0.6); color: #ffb4a8; }
.month-feast-card.held,
.appointed-card.held {
  background: rgb(66 18 14 / 0.45);
  border-color: rgb(255 140 120 / 0.55);
}

/* Pills + legend swatches: the same standings, deepened for the sky. */
.standing-kind,
.status-pill { background: rgb(59 84 128 / 0.55); color: #dbe4f5; }
.standing-kind.full-moon-sabbath,
.status-pill.next { background: rgb(150 108 22 / 0.6); color: #ffe9a8; }
.standing-kind.new-moon { background: rgb(74 60 140 / 0.55); color: #ddd6ff; }
.standing-kind.appointed-time-held,
.status-pill.held { background: rgb(120 30 24 / 0.55); color: #ffb4a8; }
.legend-swatch { border-color: rgb(242 193 78 / 0.5); }
.swatch-new-moon { background: #574b9e; }
.swatch-sabbath { background: #3b5a96; }
.swatch-full-moon { background: #c99a06; }
.swatch-feast { background: #966c16; }
.swatch-held { background: #a03a32; }

/* The Edition table: sky header in bright gold, hairlines dimmed. */
.month-table {
  background: rgb(13 22 41 / 0.78);
  border-color: rgb(242 193 78 / 0.28);
  color: #f3ecd9;
}
.month-table th, .month-table td { border-bottom-color: rgb(221 210 186 / 0.16); }
.month-table th { background: #0c1526; color: var(--gold-bright); }

/* The wheel's rhythm rows. */
.wheel-rhythm-row {
  background: rgb(23 38 68 / 0.5);
  border-color: rgb(221 210 186 / 0.22);
  color: #f3ecd9;
}
.wheel-rhythm-row.is-standing {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 1px var(--gold-bright);
}

/* Warnings keep their voice, in the gate's own error palette. */
.notice {
  background: rgb(66 18 14 / 0.55);
  border-color: rgb(255 140 120 / 0.55);
  color: #ffb4a8;
}
.refusal-card {
  background: rgb(66 18 14 / 0.5);
  border-color: rgb(255 140 120 / 0.5);
  color: #f3ecd9;
}
.refusal-card h2 { color: #ffb4a8; }
.conflict-label {
  background: rgb(66 18 14 / 0.55);
  border-left-color: #ff8c78;
  color: #ffb4a8;
}

/* ---------- the living sky (Yisrael's word, 2026-11-13) ----------
   The ground follows the sun by the device's local time: night
   18:45 -> 05:45 is exactly the proven look above; at dawn the ground
   warms and the sun rises on it; by day the ground is a designed azure
   and gold sky with the sun riding across it; at the setting
   (17:45 -> 18:45) it deepens back through amber to the night.
   sky.mjs computes a continuous blend and writes the --sky-* / --sun-*
   / --moon-* properties; every default below is the night value, and
   every override hangs off html.sky-live, which only the sky script
   adds once its ground layer stands — so with no JS, or any sky
   failure, the proven night design stands untouched. Panels and cards
   stay dark glass in every phase (readability is constant); only the
   ground — the page field and the panel fields — follows the sun. */
:root {
  --sky-top: #0a1122;
  --sky-mid: #101c33;
  --sky-low: #0a1122;
  --sky-horizon-rgb: 36 55 92;
  --sky-horizon-o: 0.55;
  --sky-warm-o: 0.20;
  --sky-stars: 1;
  --sky-panel-top: rgb(17 29 54 / 0.94);
  --sky-panel-low: rgb(9 15 30 / 0.96);
  --sun-x: 50%;
  --sun-y: 110%;
  --sun-o: 0;
  --sun-core: #ffe9a8;
  --sun-halo-rgb: 255 217 122;
  --moon-x: 70%;
  --moon-y: 12%;
  --moon-o: 0.85;
}

/* The fixed ground layer: gradient field, stars, sun and moon discs,
   behind everything, never touching a pointer. It exists only when
   sky.mjs builds it. */
.sky-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 40% at 50% -4%, rgb(242 193 78 / var(--sky-warm-o)), transparent 70%),
    radial-gradient(ellipse 90% 55% at 50% 112%, rgb(var(--sky-horizon-rgb) / var(--sky-horizon-o)), transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
}
.sky-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--starfield);
  background-size: 240px 240px;
  opacity: var(--sky-stars);
  transition: opacity 0.8s linear;
}
.sky-sun {
  position: absolute;
  left: var(--sun-x);
  top: var(--sun-y);
  width: 36vmin;
  height: 36vmin;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: var(--sun-o);
  transition: opacity 0.8s linear;
  background: radial-gradient(circle,
    var(--sun-core) 0 17%,
    rgb(var(--sun-halo-rgb) / 0.75) 26%,
    rgb(var(--sun-halo-rgb) / 0.28) 44%,
    transparent 66%);
}
.sky-moon {
  position: absolute;
  left: var(--moon-x);
  top: var(--moon-y);
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: var(--moon-o);
  transition: opacity 0.8s linear;
  background:
    radial-gradient(circle at 68% 62%, rgb(160 150 120 / 0.25) 0 30%, transparent 55%),
    radial-gradient(circle at 40% 36%, #fffdf4 0 52%, #f3ecd9 68%, rgb(243 236 217 / 0.25) 82%, transparent 88%);
  box-shadow: 0 0 5vmin 1.5vmin rgb(253 246 221 / 0.16);
}

/* With the sky live, the fixed layer paints the page field; the body
   keeps only a deep fallback color for the canvas. The gate's outer
   field follows the living sky (its card keeps its built artwork). */
html.sky-live body { background-color: #060b16; background-image: none; }
html.sky-live .gate.sky-scene { background: transparent; }

/* The panel fields follow the sun: their gradient takes the blend and
   their stars fade and return with it. */
html.sky-live .view-panel {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(180deg, var(--sky-panel-top), var(--sky-panel-low));
}
html.sky-live .view-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--starfield);
  background-size: 240px 240px;
  opacity: var(--sky-stars);
  pointer-events: none;
}
html.sky-live .view-tab.is-active {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(180deg, var(--sky-panel-top), var(--sky-panel-low));
}
html.sky-live .view-tab.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--starfield);
  background-size: 240px 240px;
  opacity: var(--sky-stars);
  pointer-events: none;
}

/* Ground-sitters audited for the day phase: everything that stands
   directly on the page field takes a dark-glass backing, so its words
   read at noon exactly as at midnight. (The clock strip paints its
   own navy ground inside the panel, and the gate's words all stand on
   its card — neither needed a hand.) */
html.sky-live .brand-lockup {
  background: rgb(9 15 30 / 0.55);
  border: 1px solid rgb(242 193 78 / 0.28);
  border-radius: 1rem;
  padding: 0.7rem 1rem;
}
html.sky-live .offline-badge { background: rgb(9 15 30 / 0.88); }
html.sky-live .view-tab { background: rgb(13 22 41 / 0.78); }
html.sky-live .app-footer {
  background: rgb(9 15 30 / 0.55);
  border: 1px solid rgb(242 193 78 / 0.25);
  border-radius: 1rem;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1.5rem;
}