/* Orbit Astro Calendar — topic pages (Mercury retrograde, Full Moons, glossary).
   Loaded after styles.css and theme.css; same red outlines on pink.
   Nothing here waits on scroll animations: every word is visible on load. */

.topic main { padding-bottom: var(--gap); }
/* Links read like home's guide links: bold, no underline, a lighter shade on hover. */
.entry a, .faq a, .years a { font-variation-settings: "wdth" 100, "wght" 600; font-weight: 600; text-decoration: none; transition: color 0.2s; }
.entry a:hover, .faq a:hover, .years a:hover, .entry a:focus-visible, .faq a:focus-visible, .years a:focus-visible { color: color-mix(in srgb, var(--mono) 55%, var(--paper)); outline: none; }
.years .here { color: color-mix(in srgb, var(--mono) 55%, var(--paper)); }

/* Sidebar: no stretching card on these pages; the current page is filled red. */
.topic .side a.active { flex-grow: 0; }
.topic .side a.logo { flex-grow: 1; }
.topic .side a.logo .mark { width: 108px; margin: 18px auto 0; }

/* Heading box */
.kicker { font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; margin: 0 0 auto; }
/* Headline: the same giant type as home's "Orbit / Astro / Calendar" (styles.css .giant):
   12vw, never under 64px or over 250px, unless the longest line (--em wide) needs
   smaller to fit. Lines alternate flush right and flush left. */
.page-head { container-type: inline-size; }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(max(64px, 12vw), 250px, calc(100cqi / var(--em, 7)));
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0;
}
.page-head h1 .ln:nth-child(odd) { text-align: right; }
.page-head h1 .ln + .ln { padding-top: 0.12em; margin-top: 0.1em; }   /* spacing as home's, no rule */
/* Under the headline: the text, with no rule above it (as on home). */
.page-head h1 { padding-bottom: 0; }
.lede { font-size: 18px; line-height: 1.38; margin: 0 0 16px; padding-top: var(--head-gap); }   /* = home hero text and spacing (theme.css) */
.lede, .zone { max-width: 44em; }
.zone { font-size: 14px; margin: 0; }

.big {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
}
.status .ruled { margin: 0; }
.status[hidden] { display: none; }

.cap { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; margin: 0 0 16px; font-family: var(--font-ui); }

/* Date tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; padding: 0 16px 10px 0; }
td { vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; }   /* = home Next up titles */
tbody tr:last-child td { border-bottom: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
td small { display: block; font-size: 15px; margin-top: 6px; }
td.y { font-family: var(--font-num); font-size: 14px; padding-top: 20px; }
tr.past { opacity: 0.45; }
tr.now td { background: var(--mono); color: var(--paper); }
tr.now td:first-child { border-radius: 12px 0 0 12px; padding-left: 12px; }
tr.now td:last-child { border-radius: 0 12px 12px 0; }
/* "Next" and "Now" sit on their own line above the date, never squeezed beside it.
   Same pill as the home page's small pills: 0.1em top padding centers the capitals. */
tr.next td:first-child::before, tr.now td:first-child::before {
  content: "Next";
  display: flex;
  align-items: center;
  width: fit-content;
  box-sizing: border-box;
  height: 22px;
  padding: 1px calc(10px - 0.14em) 0 10px;   /* measured: centered in Safari (4x and 2x); Chrome sits a hair higher */
  position: absolute;
  top: 16px;
  left: 0;
  border: 1.5px solid currentColor;
  border-radius: 99px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
tr.now td:first-child::before { content: "Now"; left: 12px; }
/* The pill takes its own line above the row, so every cell in the row drops by the
   same amount and the date still lines up with the text beside it. */
td { position: relative; }
tr.next td, tr.now td { padding-top: 48px; }
tr.next td.y, tr.now td.y { padding-top: 52px; }
.years { margin: 24px 0 0; font-size: 17px; }

/* FAQ */
.faq dl { margin: 0; }   /* rules run full width, like the tables and home's Next up */
.faq dl > div { padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
.faq dt { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; margin: 0 0 8px; }   /* = home Next up titles */
.faq dd { margin: 0; font-size: 18px; max-width: 44em; }
.faq dt br.wide { display: none; }   /* a break only where the line is long enough to need one */
@media (min-width: 901px) and (hover: hover), (min-width: 901px) and (pointer: fine), (min-width: 1401px) { .faq dt br.wide { display: inline; } }

/* Call to action: an outlined box like the rest; its statement types itself in.
   The buttons draw in the page's color on its tint (filled Subscribe, outlined Download). */
.topic main { --c: var(--paper); --fg: var(--mono); }
.cta .actions { margin-bottom: 0; }

/* Glossary */
.letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 32px; }   /* all 26 fit on one row on a laptop */
.letters a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0.1em 8px 0;
  border: 1.5px solid var(--mono); border-radius: 99px;
  text-decoration: none; font-family: var(--font-num); font-size: 14px;
}
.letters a:hover { background: var(--mono); color: var(--paper); }
/* Letters with no entries: the same pill, grayed out (a pale tint of the page color). */
.letters .off {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0.1em 8px 0;
  border: 1.5px solid color-mix(in srgb, var(--mono) 30%, var(--paper)); border-radius: 99px;
  color: color-mix(in srgb, var(--mono) 30%, var(--paper));
  font-family: var(--font-num); font-size: 14px;
}
/* Section letters: small, but a step heavier than the entries (Roc Grotesk Wide Bold). */
.letter { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: 0.02em; margin: 36px 0 14px; scroll-margin-top: 24px; }
.entry { font-size: 19px; line-height: 1.45; max-width: 44em; margin: 0 0 18px; scroll-margin-top: 24px; }
.entry .term { font-variation-settings: "wdth" 100, "wght" 700; font-weight: 700; }
.entry .pron { font-size: 0.85em; }
.entry:target { background: color-mix(in srgb, var(--mono) 12%, transparent); border-radius: 8px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--mono) 12%, transparent); }


@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .topic .side a.logo { flex-grow: 0; }
  .topic .side a.logo .mark { width: 34px; margin: 0; }
  .lede { max-width: none; font-size: 17px; }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tr { padding: 14px 0; border-top: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
  td { border: 0 !important; padding: 2px 0; }
  td.y { padding: 0 0 4px; }
  tr.now { background: var(--mono); color: var(--paper); border-radius: 12px; padding: 14px 12px; }
  tr.now td { background: none; }
}
@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  td[data-l]::before { content: attr(data-l); display: block; margin: 10px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; }
}

/* ---- One color per page (Sept 25, 2026): the rainbow site's blue, purple, and green.
   Everything on a page is that one color on a pale tint of it, sidebar included. */
html.c-blue   { --red: #0245de; --mono: #0245de; --paper: #f0f4fd; }
html.c-purple { --red: #962dd3; --mono: #962dd3; --paper: #f9f2fc; }
html.c-green  { --red: #7cae2a; --mono: #7cae2a; --paper: #f5f8f0; }
.topic .side a.logo .mark { fill: color-mix(in srgb, var(--mono) 55%, var(--paper)); }

@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  /* Stacked cells on phones: only the first one makes room for the pill. */
  tr.next td, tr.now td { padding-top: 2px; }
  tr.next td:first-child, tr.now td:first-child { padding-top: 34px; }
  tr.next td:first-child::before, tr.now td:first-child::before { top: 0; }
}

/* ---- Motion, matching the home page (Sept 25, 2026) ----------------------------
   Hidden states apply only once the page's script has marked <html class="js">,
   so without JavaScript every word is still there. */
.page-head h1 .ln { display: block; will-change: transform; }

.js .rise { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }
.js tr.rise { transform: translateY(14px); }
.js tr.rise.in { transform: none; }
.js tr.rise.past.in { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .js .rise, .js tr.rise { opacity: 1 !important; transform: none !important; }
  .js tr.rise.past { opacity: 0.45 !important; }
}

/* Time zone "Change" pill: the same small outlined pill as Next/Now, with the
   browser's own menu laid invisibly over it. Hover and focus fill it. */
.tz-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 22px;
  padding: 1px calc(10px - 0.14em) 0 10px;
  margin-left: 10px;
  vertical-align: 1px;
  border: 1.5px solid var(--mono);
  border-radius: 99px;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.tz-pill select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; }
.tz-pill:hover, .tz-pill:focus-within { background: var(--mono); color: var(--paper); }

/* "Next up" and "Past" in the date tables: the same small outlined pill as "Now". */
tr.group td { border: 0 !important; padding: 36px 0 14px; }
tr.group:first-child td { padding-top: 8px; }
/* .lab: the small outlined pill, shared with home’s "Next up" (theme.css). */
/* The year heading above a table: the typed, underlined statement style. */
.dates h2.ruled { font-family: var(--font-ui); font-weight: 400; }
@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1400px) { tr.group { padding: 0; border: 0; } tr.group td { padding: 24px 0 10px; } }

/* Staggered headline (Full / Moons): both lines flush left, the second set in so it
   starts where the first ends, like steps. */
.page-head h1.stagger .ln { text-align: left; }
.page-head h1.stagger .ln + .ln { padding-left: var(--indent); }

/* A one-line headline (Full Moons) sits flush left, like the first word of the rest. */
.page-head h1 .ln:only-child { text-align: left; }

/* ---- Privacy and Support (Sept 30, 2026): two of the app's colors, orange and rose,
   each on a pale tint of itself like the rest (teal is kept for a later page). */
html.c-orange { --red: #ff8400; --mono: #ff8400; --paper: #fff6ec; }
html.c-rose   { --red: #e856bc; --mono: #e856bc; --paper: #fdf2fa; }
/* Their boxes read like the guide pages' Questions box: a small heading, the opening
   sentence typed in as a statement, ruled rows, and "Contact us" as the last row. */
.legal .ruled { margin: 0 0 40px; }
.legal .note { font-size: 18px; max-width: 44em; margin: 0 0 18px; }
.legal .contact { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; margin: 0; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--mono) 40%, transparent); }
.legal dl + .contact { margin-top: 0; }
.legal .updated { font-size: 15px; margin: 6px 0 0; }
/* A headline with nothing under it (Support) keeps the box's usual bottom padding only. */
.page-head h1:last-child { padding-bottom: 0; }
/* The address can't break, so on narrow phones the contact line scales down to fit. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) and (max-width: 1400px) { .legal .contact { font-size: min(20px, 5.4vw); } }

/* Scroll progress (Sept 30, 2026), as on home: a thin bar along the bottom of the
   window fills left to right as the page scrolls, in the page's color, drawn the
   same way as home's (styles.css, theme.css). (A rainbow version was tried on
   staging and set aside: _old/rainbow-bar-2026-09-30.) */