/* sub.css - the subscriber's forecast tab root (forecast P3 3c). Kept out of menu.css on purpose (the P2 root is being restyled there).
   One yellow .field per view (canon 105): spheres and day cards are white `.surface-card`s; the selected segment is ink, never yellow (canon 229). */
.screen-ahead-sub .ah-switch { margin-top: var(--gap-m); }
.screen-ahead-sub .ah-pane { padding-bottom: var(--gap-m); }
.screen-ahead-sub .ah-pane[hidden] { display: none; }
.screen-ahead-sub .ah-field { margin-top: var(--gap-s); }
.screen-ahead-sub .ah-field:not(.field) { display: none; }
.screen-ahead-sub .scene-label { margin: var(--gap-l) 0 0; font: var(--t-section); color: var(--muted); }
.ah-sphere-title { margin: 0 0 var(--gap-label-body); font: var(--t-title); color: var(--text); }
.ah-when { font: var(--t-meta); color: var(--muted); font-weight: 500; }
.ah-sphere-head { margin: 0 0 var(--gap-xs); font: var(--t-row); color: var(--text); }
.ah-sphere-text, .ah-month-line, .ah-days-none { margin: 0; font: var(--t-body); color: var(--text); }
.ah-month-line { margin-top: var(--gap-m); }
.ah-tip { margin: var(--gap-s) 0 0; font: var(--t-body); color: var(--text); }
.ah-foot { margin: var(--gap-s) 0 0; color: var(--muted); }
.ah-days { list-style: none; margin: var(--gap-s) 0 0; padding: 0 16px; }
.ah-day { padding: var(--gap-m) 0; border-top: 1px solid var(--line); }
.ah-day:first-child { border-top: 0; }
.ah-day.is-past, .ah-day.is-past .ah-day-head { color: var(--muted); }   /* P2.13: greyed by colour, no opacity (contrast holds) */
.ah-month-card.is-past .ah-sphere-title, .ah-month-card.is-past .ah-when { color: var(--muted); }   /* P2.13: a past month card, folded to its label and date */
.ah-day-head { margin: 0; font: var(--t-row); color: var(--text); }   /* P4.1: a day is a row, the one row title */
.ah-day-label, .ah-day-reason { margin: var(--gap-xs) 0 0; font: var(--t-sub); color: var(--muted); }
.ah-week-range { margin: var(--gap-l) 0 0; }
.ah-now-pill { display: inline-block; padding: 2px 10px; border-radius: var(--pill-r); background: var(--accent); color: var(--accent-ink); font: var(--t-meta); vertical-align: middle; }   /* ink, never yellow (canon 229) */

/* forecast 3b: the buyer's subscription block (one white card, no yellow field - canon 105; the three locked rows are one state and one weight - canon 162). */
.ah-subblock { margin-top: var(--gap-l); }
.ah-subblock-title { margin: 0 0 var(--gap-label-body); font: var(--t-title); color: var(--text); }
.ah-subblock-text { margin: var(--gap-xs) 0 0; font: var(--t-body); color: var(--text); }
.ah-subblock-rows { list-style: none; margin: var(--gap-m) 0 0; padding: 0; }
.ah-subblock-rows .g-row { min-height: 0; padding: var(--gap-s) 0; align-items: center; }
.ah-subblock .ic-lock { display: inline-flex; color: var(--muted); }
.ah-subblock .chips { margin-top: var(--gap-l); }
.ah-subblock .btn-primary { height: var(--btn-h); }

/* forecast S6: the offer (the year offer's deck). The sample is one white card with her three spheres and the planet behind each; no text, no lock of its own (canon 161/162). */
.sub-offer .ah-sample { margin-top: var(--gap-m); }
.sub-offer .ah-sample-item + .ah-sample-item { margin-top: var(--gap-m); padding-top: var(--gap-m); border-top: 1px solid var(--line); }
.sub-offer .ah-sample .ah-sphere-title { margin-bottom: 0; }
.sub-offer .ah-sample .ah-foot { margin-top: var(--gap-xs); }
.sub-offer .hero-map .ic-lock { display: inline-flex; color: var(--muted); }
.sub-offer-meta { margin-top: var(--gap-m); }
.sub-offer-meta .meta { margin: 0 0 var(--gap-xs); }

/* forecast S7: the reveal - the lines are the shared `.build-line` rows (reading.css: lock -> check on .tick); the day the reveal named is marked in the tab (sub.js adds .is-picked). */
.sub-reveal .lock-list { margin-top: var(--gap-l); }
.ah-day.is-picked .ah-day-head::before { content: ""; display: inline-block; width: var(--gap-s); height: var(--gap-s); margin-right: var(--gap-s); border-radius: 50%;
  background: var(--accent); vertical-align: middle; }   /* Polish: the day the reveal named wears an ink dot (canon 229, never yellow), not an inset stripe */

/* P4.4 (row 46): the week strip (partials/week_strip.html) - her week as the object of the subscription offer and of the reveal after paying. Seven
   cells; today is the ink circle (canon 229, never yellow), past days are muted by colour (no opacity), an ink dot marks each of her days. On the
   reveal the dots light with the ticks (sub.js adds .on). The subscription's price row takes the year offer's place and size (.yr-price). */
.ws { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap-xs); }
.ws-cell { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); color: var(--text); }
.ws-wd { font: var(--t-tab); color: var(--muted); }
.ws-n { display: flex; align-items: center; justify-content: center; width: 100%; max-width: var(--tap-min); aspect-ratio: 1; border-radius: 50%;
  font: var(--t-label); font-variant-numeric: tabular-nums; }
.ws-cell.is-today .ws-n { background: var(--accent); color: var(--accent-ink); }
.ws-cell.is-past { color: var(--muted); }
.ws-dot { width: var(--gap-s); height: var(--gap-s); border-radius: 50%; background: var(--accent); }
.ws-dot.is-none { visibility: hidden; }
.ws-cell.is-past .ws-dot { background: var(--muted); }
.sub-offer .ah-sample .ws + .ah-sample-item { margin-top: var(--gap-l); padding-top: var(--gap-m); border-top: 1px solid var(--line); }
.sub-reveal .ws-card { margin-top: var(--gap-l); }
.sub-reveal .ws-dot { opacity: 0; transition: opacity var(--state-ms) var(--ease-out); }
.sub-reveal .ws-dot.on { opacity: 1; }
.sub-price .pl-now { margin: 0; font: var(--t-meta); color: var(--muted); }   /* the placeholder slot stays the small meta line it was (review b4) */
.sub-price-real .pl-now { font: var(--t-price); letter-spacing: var(--ls-display); color: var(--text); }   /* a real price is the large amount, like the year offer's */
.sub-price + .sub-offer-meta { margin-top: var(--gap-m); }