/* Numen v3 components (WP-SHELL): every ui/ component, FINAL-DESIGN 2.6 and 3.0.
   No gradients, glass, blur or shadows in the interface; elevation is one surface step plus a hairline.
   Only transform and opacity animate. */

/* ---------- top bar, tabs, you chip ---------- */
.top { position: sticky; top: 0; z-index: var(--z-top); background: var(--night); border-bottom: 1px solid var(--line); }
.top__in { height: var(--top-h); display: flex; align-items: center; gap: var(--s5); }
/* a route whose screen is still loading (round 17 H06): the answer card's 2 px line over the bar's hairline, edge to edge,
   shown only once the wait passes 150 ms, so a screen already loaded never flashes it; app.js sets html.is-routing and
   main's aria-busy until the screen renders */
.is-routing .top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--glow-ink); transform-origin: 0 50%; transform: scaleX(.85); opacity: 0; pointer-events: none; animation: route-show 1ms 150ms forwards, route-grow 900ms 150ms cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .is-routing .top::after { animation: route-show 1ms 150ms forwards; } }
html.is-still.is-routing .top::after { animation: route-show 1ms 150ms forwards; }
@keyframes route-show { to { opacity: 1; } }
@keyframes route-grow { from { transform: scaleX(.08); } to { transform: scaleX(.85); } }
/* a short screen (a laptop at 200% zoom is 720x450) cannot spare the bar and the tab bar together: the bar scrolls
   away with the page (relative, not static, so it still holds the skip link and its stacking) and nothing pads
   for it; the tab bar stays fixed. This file loads after base.css, so the scroll padding here wins. */
@media (max-height: 500px) {
  .top { position: relative; }
  html { scroll-padding-top: 0; }
}
/* Skip to content (ui/shell.js): out of sight above the top bar until it has focus, so the bar keeps its height */
.skip-link { position: absolute; top: 7px; left: var(--gutter); z-index: 1; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-m); border: 1px solid var(--glow-50); background: var(--night-3); color: var(--glow-ink); font-weight: 600; font-size: var(--fs-small); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus, .skip-link:focus-visible { transform: none; }
.wordmark { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 500; font-size: var(--fs-wordmark); line-height: 1; font-family: var(--font-display); letter-spacing: .42em; text-transform: uppercase; color: var(--glow-ink); text-decoration: none; padding: 12px 0 12px .42em; margin-left: -.42em; white-space: nowrap; }
.tabs--top { display: none; gap: var(--s1); }
.tab { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink-2); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 600; transition: color var(--dur-1), background-color var(--dur-1); }
.tabs--top .tab { padding: 7px 13px; min-height: 36px; border: 1px solid transparent; }
.tab:hover { color: var(--ink); background: var(--night-3); }
/* one surface step plus a glow hairline: a glow wash over --night-2 read grey on the navy page */
.tab.is-on { color: var(--glow-ink); background: var(--night-3); border-color: var(--glow-50); }
.tabs--bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabs); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--night-2); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs--bottom .tab { flex-direction: column; justify-content: center; gap: 2px; height: var(--tab-h); border-radius: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; }
.tabs--bottom .tab:hover { background: transparent; }
.tabs--bottom .tab.is-on { background: transparent; }
@media (min-width: 900px) {
  .tabs--top { display: flex; }
  .tabs--bottom { display: none; }
}
body.has-tabbar .main { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
body.has-tabbar .foot { padding-bottom: calc(var(--tab-h) + 24px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body.has-tabbar .main { padding-bottom: 0; } body.has-tabbar .foot { padding-bottom: 28px; } }

.top__me { margin-left: auto; min-width: 0; }
.me { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-2); max-width: 100%; transition: background-color var(--dur-1), border-color var(--dur-1); }
.me:hover { background: var(--night-3); border-color: var(--line-2); }
.me[aria-expanded="true"] { border-color: var(--glow-45); }
.me__name { font-size: var(--fs-small); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
@media (min-width: 900px) { .me { min-height: 36px; } }
.menu { display: grid; gap: 2px; min-width: 260px; }
.menu__item { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-m); color: var(--ink); text-decoration: none; font-size: var(--fs-body); }
button.menu__item:hover, a.menu__item:hover { background: var(--night-4); }
.menu__item--warn { color: var(--ember); }
.menu__item--switch { padding: 4px 8px; }
.menu__confirm { padding: 12px; border-top: 1px solid var(--line); display: grid; gap: var(--s3); color: var(--ink-2); }
.menu__row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- main and footer ---------- */
.main { display: block; min-height: calc(100vh - var(--top-h)); }
.main:focus { outline: none; }
.foot { border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-fine); padding: 24px 0 28px; margin-top: var(--s7); }
.foot__text { max-width: 72ch; margin-bottom: var(--s3); }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.foot__links a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) { .foot__links a { min-height: 32px; } }
/* The way home to yolfez.com: the hub's brush y, last in the footer and pushed to its far edge so it reads as
   the house mark, not another reading link. Painted in the quiet text colour through a mask on a pseudo element,
   because a mask on the link itself would cut its focus ring too; it warms on hover and focus. 44 px target, set
   8 px into the gutter so the drawn y sits near the content edge and its focus ring stays on a 390 px screen.
   The mask box is 34 px (round 10 H02): the brush glyph fills 48% of the PNG's width and 87% of its height, so it
   draws about 16 by 30 px, inside the 44 px target; at 26 it drew 11 by 20 and read as a stray letter. */
.foot__home { margin-inline-start: auto; }
a.foot-y { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-inline-end: -8px; color: var(--ink-3); transition: color var(--dur-1); }
a.foot-y::before { content: ""; width: 34px; height: 34px; background: currentColor; -webkit-mask: url(../art/yolfez-mark-v1.png) center / contain no-repeat; mask: url(../art/yolfez-mark-v1.png) center / contain no-repeat; }
a.foot-y:hover, a.foot-y:focus-visible { color: var(--glow-ink); }

/* ---------- number badge ---------- */
.nb { display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; vertical-align: baseline; }
.nb__c { font-weight: 600; font-size: max(12px, .56em); line-height: 1; font-family: var(--font-text); color: var(--ink-3); margin-right: .06em; letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; }
.nb__i { margin: 0 0 0 .06em; }
.nb__r { font-weight: 600; }
.nb--s, .nb--m { font-family: var(--font-text); }
.nb--s { font-size: var(--nb-s); }
.nb--m { font-size: var(--nb-m); }
.nb--l, .nb--xl, .nb--xxl { font-family: var(--font-display); }
.nb--l { font-size: var(--nb-l); }
.nb--l .nb__r, .nb--xl .nb__r, .nb--xxl .nb__r { font-weight: 500; }
.nb--xl { font-size: var(--nb-xl); }
.nb--xxl { font-size: var(--nb-xxl); }
.nb--xl .nb__r, .nb--xxl .nb__r { color: var(--glow-ink); }
.nb--l .nb__c { font-size: 18px; }
.nb--xl .nb__c { font-size: 24px; }
.nb--xxl .nb__c { font-weight: 500; font-size: 36px; line-height: 1; font-family: var(--font-display); }
.nb--btn { position: relative; border-radius: 4px; padding: 2px 2px; margin: -2px -2px; min-height: 32px; align-items: baseline; }
/* full hit area without spreading the badge row: a narrow badge (a lone 8) keeps its box and its hit area
   runs on to the right to --hit wide; badges sit 12 px apart, so a left neighbour keeps its gap */
.nb--btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; min-width: var(--hit); }
.nb--btn .nb__r { text-decoration: underline transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-1); }
.nb--btn:hover .nb__r, .nb--btn[aria-expanded="true"] .nb__r { text-decoration-color: currentColor; }
@media (max-width: 899px) { .nb--btn { min-height: 44px; display: inline-flex; align-items: center; }
  /* phone hit targets: the pick card's date and a sign link (round-2 S17) */
  .rc__date, a.sg, a.sg.sg--link { min-height: var(--hit); display: inline-flex; align-items: center; } }

/* The math */
.math { display: grid; gap: var(--s2); max-width: 36ch; }
.math__title { font-weight: 600; font-size: var(--fs-card-head); line-height: 1.2; font-family: var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); padding-bottom: var(--s2); margin-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.math__sum, .math__mean { font-size: var(--fs-body); color: var(--ink); }
.math__note { color: var(--ink-2); font-size: var(--fs-small); }
.math__link { font-size: var(--fs-small); display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- mark tag ---------- */
.mk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: var(--fs-small); line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.mk__g { font-family: var(--font-text); font-weight: 700; }
.mk--strong { color: var(--glow-ink); border-color: var(--glow-45); }
.mk--laylow, .mk--leftout { color: var(--mist); border-color: var(--mist-45); }
.mk__hatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--mist); background: repeating-linear-gradient(135deg, var(--mist) 0 1.5px, transparent 1.5px 4px); }

/* ---------- sign tag ---------- */
.sg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); font-size: var(--fs-small); line-height: 1.3; vertical-align: middle; }
.sg__peak { color: var(--ink-2); flex: none; }
.sg__n { font-size: var(--fs-label); color: var(--ink-3); }
.sg__note { color: var(--ink-3); white-space: normal; }
.sg__rel { font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink-3); }
.sg__rel--friend { color: var(--glow-ink); border-color: var(--glow-ink); }
.sg__rel--own { color: var(--ink); border-color: var(--ink-2); }
.sg__rel--enemy { color: var(--ember); border-color: var(--ember); }
.sg__rel--neutral { color: var(--ink-3); border-color: var(--line-2); }
.sg__rel--soulmate { color: var(--ink); border: 3px double var(--ink-2); padding: 0 7px; }
a.sg--link { text-decoration: none; min-height: 32px; }
a.sg--link .sg__name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
a.sg--link:hover .sg__name { text-decoration-color: currentColor; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--btn-h); padding: 0 20px; border-radius: var(--r-m); font-weight: 600; font-size: var(--fs-body); line-height: 1.2; font-family: var(--font-text); text-decoration: none; transition: background-color var(--dur-1), border-color var(--dur-1), transform 80ms; white-space: nowrap; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn--primary { background: var(--glow-ink); color: var(--on-glow); border: 1px solid var(--glow-ink); }
.btn--primary:hover { background: var(--glow-hover); border-color: var(--glow-hover); }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] { background: var(--night-3); border-color: var(--night-3); color: var(--ink-3); }
.btn--quiet { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn--quiet:hover { background: var(--night-3); }
.btn--quiet:disabled { color: var(--ink-3); }
.btn--text { min-height: 44px; padding: 0; background: none; border: 0; color: var(--glow-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
.btn--text:active { transform: none; }
@media (min-width: 900px) { .btn--text { min-height: 32px; } }
.btn .icon { flex: none; }
.btn.is-done { border-color: var(--glow-45); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------- sentence chip, listbox, popover ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 4px 14px; margin: 2px 0; vertical-align: middle; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--night-2); color: var(--ink); font-weight: 400; font-size: var(--fs-chip); line-height: 1.25; font-family: var(--font-text); text-align: left; transition: background-color var(--dur-1), border-color var(--dur-1); }
.chip:hover { background: var(--night-3); }
.chip[aria-expanded="true"] { border-color: var(--glow-ink); }
.chip__l { overflow: hidden; text-overflow: ellipsis; }
.chip__caret { flex: none; transform: rotate(90deg); color: var(--ink-3); transition: transform var(--dur-1); }
.chip[aria-expanded="true"] .chip__caret { transform: rotate(-90deg); }
.chip--empty { border-style: dashed; color: var(--ink-3); }

.pop { position: absolute; z-index: var(--z-pop); max-width: min(420px, calc(100vw - 16px)); padding: 16px; background: var(--night-3); border: 1px solid var(--line-2); border-radius: var(--r-m); color: var(--ink); }
.pop:focus { outline: none; }
.pop--list { padding: 6px; min-width: 260px; }
.pop--menu { padding: 6px; }
.lb { display: grid; grid-auto-rows: max-content; gap: 2px; max-height: min(60vh, 420px); overflow-y: auto; outline: none; padding: 2px; border-radius: var(--r-m); }
.lb:focus-visible { outline: 2px solid var(--glow-ink); outline-offset: 2px; }
.lb__opt { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 8px 12px; border-radius: var(--r-m); border: 1px solid transparent; cursor: pointer; color: var(--ink); }
.lb__opt.is-active { background: var(--night-4); }
.lb__opt.is-selected { border-color: var(--glow-ink); background: var(--glow-wash); }
.lb__opt.is-disabled { color: var(--ink-3); cursor: default; }
.lb__mark { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.4px solid var(--ink-3); display: grid; place-items: center; }
.lb__mark--box { border-radius: 4px; }
.lb__opt.is-selected .lb__mark { border-color: var(--glow-ink); background: var(--glow-ink); box-shadow: inset 0 0 0 3px var(--night-3); }
.lb__t { display: grid; gap: 2px; }
.lb__label { font-size: var(--fs-body); }
.lb__hint { font-size: var(--fs-fine); color: var(--ink-3); }
.lb-box { display: grid; gap: var(--s2); }
.lb__done { justify-self: end; margin: 4px 6px 6px; }
/* short screens (a laptop at 200 percent zoom): one scroller, the sheet body, and Done stays in view */
.sheet--list .lb__done { position: sticky; bottom: 0; background: var(--night-2); }
@media (max-height: 560px) { .sheet--list .lb { max-height: none; } } /* a popover list keeps its own scroll */

/* ---------- sheet and dialog ---------- */
.sheet-layer { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.sheet { position: relative; display: flex; flex-direction: column; background: var(--night-2); border: 1px solid var(--line-2); color: var(--ink); max-height: 90vh; overflow: hidden; outline: none; }
.sheet--bottom { margin-top: auto; width: 100%; border-radius: var(--r-l) var(--r-l) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
.sheet--side { margin-left: auto; width: min(440px, 100vw); height: 100%; max-height: none; border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0; }
.sheet--center { margin: auto; width: min(640px, calc(100vw - 24px)); border-radius: var(--r-l); }
.sheet__bar { width: 40px; height: 4px; border-radius: 2px; background: var(--line-3); margin: 10px auto 0; flex: none; }
.sheet__head { display: flex; align-items: center; gap: var(--s3); padding: 12px 12px 8px 20px; flex: none; }
.sheet__title { flex: 1; font-weight: 500; font-size: var(--fs-card-title); line-height: 1.2; font-family: var(--font-display); }
.sheet__close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); }
.sheet__close:hover { background: var(--night-3); }
.sheet__body { padding: 8px 20px 24px; overflow-y: auto; overscroll-behavior: contain; } /* 8 px top: a focus ring (2 px + 3 px offset) on the first control is not clipped */
@media (min-width: 900px) { .sheet__body { padding: 8px 28px 28px; } .sheet__head { padding: 16px 16px 8px 28px; } }
html.has-sheet { overflow: hidden; }

/* ---------- toggle ---------- */
.tg { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; color: var(--ink-2); font-size: var(--fs-small); text-align: left; }
.tg__track { position: relative; flex: none; width: 44px; height: 24px; border-radius: var(--r-pill); background: var(--night-3); border: 1px solid var(--line-2); transition: background-color 150ms, border-color 150ms; }
.tg__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform 150ms var(--ease-out); }
.tg[aria-checked="true"] .tg__track { background: var(--glow-ink); border-color: var(--glow-ink); }
.tg[aria-checked="true"] .tg__knob { transform: translateX(20px); background: var(--night); }
.tg:hover .tg__track { border-color: var(--line-3); }
@media (min-width: 900px) { .tg { min-height: 32px; } }

/* ---------- inputs ---------- */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field__label { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.field__hint { font-size: var(--fs-fine); color: var(--ink-3); }
.field__err { font-size: var(--fs-small); color: var(--ember); }
.input { width: 100%; min-height: 48px; padding: 0 14px; background: var(--night-2); color: var(--ink); border: 1px solid var(--line-3); border-radius: var(--r-s); font-size: var(--fs-lead); font-variant-numeric: lining-nums tabular-nums; }
.input::placeholder { color: var(--ink-3); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--glow-ink); box-shadow: inset 0 0 0 1px var(--glow-ink); }
.input[aria-invalid="true"] { border-color: var(--ember); }
.select { appearance: none; padding-right: 30px; background-image: none; text-overflow: ellipsis; }
.select-wrap { position: relative; display: block; }
.select-wrap::after { content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.4px solid var(--ink-2); border-bottom: 1.4px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; }
input[type="date"].input, input[type="time"].input { color-scheme: dark; }
.bdate { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s3); }
.bdate .input { padding: 0 12px; }
.bdate .select { padding-right: 30px; }
.bdate__errs { grid-column: 1 / -1; display: grid; gap: 4px; }
.bdate__errs:not(:has(.field__err:not([hidden]))) { display: none; }
@media (max-width: 400px) { .bdate .input { font-size: 16px; padding: 0 10px; } .bdate .select { padding-right: 28px; } }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.range .field__err { grid-column: 1 / -1; }

/* ---------- cards ---------- */
.card { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--card-pad); min-width: 0; }
.card__head { font-weight: 600; font-size: var(--fs-card-head); line-height: 1.2; font-family: var(--font-display); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 10px; margin-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.card__title { font-weight: 500; font-size: var(--fs-card-title); line-height: 1.2; font-family: var(--font-display); color: var(--ink); margin-bottom: var(--s3); }
.card > p + p { margin-top: var(--s3); }
.answer { position: relative; background: var(--night-3); border-color: var(--glow-50); overflow: hidden; }
.answer__kicker { margin-bottom: var(--s2); color: var(--glow-ink); }
.answer__line { font-weight: 500; font-size: var(--fs-answer); line-height: 1.2; font-family: var(--font-display); color: var(--ink); margin-bottom: var(--s3); }
.answer__body { display: grid; gap: var(--s2); color: var(--ink-2); max-width: 66ch; }
.answer__progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--glow-ink); transform-origin: 0 50%; transform: scaleX(.85); }
.callout { background: var(--night-2); border-left: 3px solid var(--mist); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 12px 16px; color: var(--ink-2); }
.callout__lead { color: var(--ink); }
.callout--error { border-left-color: var(--ember); background: var(--ember-wash); }
.callout--error .callout__lead { color: var(--ember); }

/* ---------- day row ---------- */
.dayrow { display: grid; grid-template-columns: 3em 2.2em minmax(3.6em, auto) 1fr auto; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; padding: 6px 8px; border-radius: var(--r-s); border-top: 1px solid var(--line); color: var(--ink); text-align: left; transition: background-color var(--dur-1); }
.dayrow:hover { background: var(--night-3); }
.dayrow.is-today { background: var(--night-3); }
.dayrow.is-selected { box-shadow: inset 3px 0 0 var(--glow-ink); }
.dayrow__wd { font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.dayrow__d { font-size: 18px; }
.dayrow__p { font-size: var(--fs-fine); color: var(--ink-3); }
.dayrow .mk { justify-self: end; font-size: 13px; padding: 2px 10px; }
@media (max-width: 400px) { .dayrow { grid-template-columns: 2.6em 2em auto 1fr; } .dayrow__p { display: none; } }

/* ---------- day cell ---------- */
.dc { position: relative; display: grid; align-content: center; justify-items: center; gap: 1px; min-width: 44px; min-height: 44px; aspect-ratio: 1; padding: 2px; border-radius: var(--r-s); background: var(--night-3); border: 1px solid transparent; color: var(--ink); text-align: center; }
button.dc:hover { border-color: var(--line-3); }
.dc__d { font-size: 15px; line-height: 1; }
.dc__t { font-size: 12px; line-height: 1; color: var(--ink-3); font-weight: 600; }
.dc__m { position: absolute; top: 2px; right: 4px; font-size: 12px; line-height: 1; color: var(--ink-2); }
.dc--m-strong .dc__m { color: var(--glow-ink); }
.dc--m-laylow .dc__m { color: var(--mist); }
.dc__r { position: absolute; top: 2px; left: 4px; font-size: 12px; line-height: 1; }
.dc--picked { background: var(--glow-ink); color: var(--on-glow); }
.dc--picked .dc__t, .dc--picked .dc__m, .dc--picked .dc__r { color: var(--on-glow); }
.dc--good { background: var(--night-2); border-color: var(--glow-ink); }
.dc--leftout { background: var(--night-2) repeating-linear-gradient(135deg, rgba(169, 188, 207, .35) 0 1.5px, transparent 1.5px 6px); border-color: var(--mist-45); }
.dc--outside, .dc.is-past { background: var(--night-2); border-color: var(--line); color: var(--ink-3); }
.dc.is-today { box-shadow: 0 0 0 2px var(--ink); }

/* ---------- result card ---------- */
.rc { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); transition: border-color var(--dur-1); }
.rc:hover { border-color: var(--line-2); }
.rc__rank { font-weight: 600; font-size: 48px; line-height: 1; font-family: var(--font-display); color: var(--glow-ink); }
.rc__when { margin-bottom: 4px; }
.rc__title { font-weight: 500; font-size: 28px; line-height: 1.15; font-family: var(--font-display); margin-bottom: var(--s3); text-wrap: balance; }
.rc__date { color: var(--ink); text-align: left; }
button.rc__date { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 5px; text-decoration-thickness: 1px; }
button.rc__date:hover { text-decoration-color: currentColor; }
.rc__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.rc__head { font-weight: 500; font-size: 20px; line-height: 1.3; font-family: var(--font-display); margin-bottom: var(--s3); }
.pc { display: grid; gap: 6px; }
.pc + .pc { margin-top: 6px; }
.pc li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; color: var(--ink-2); }
.pc__g { font-weight: 700; }
.pc--pro .pc__g { color: var(--glow-ink); }
.pc--con .pc__g { color: var(--ember); }
.rc__actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-top: var(--s4); }
.rc__actions .btn--quiet { min-height: 44px; padding: 0 14px; font-size: var(--fs-small); }
.rc__chev { transform: rotate(90deg); transition: transform var(--dur-1); }
.rc__mathbtn[aria-expanded="true"] .rc__chev { transform: rotate(-90deg); }
.rc__math { margin-top: var(--s3); padding: 12px 14px; border-radius: var(--r-s); background: var(--night-3); color: var(--ink-2); font-size: var(--fs-small); display: grid; gap: 4px; overflow-x: auto; }
.rc__fail { margin-top: var(--s3); display: grid; gap: 6px; }
.rc__fail .field__label { color: var(--ember); }
@media (min-width: 900px) { .rc { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4); } .rc__title { font-size: 34px; } }

/* ---------- heat strip ---------- */
.heat { display: grid; gap: var(--s3); }
.hs { display: grid; gap: 6px; }
.hs__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: var(--s2); }
.hs__row--btn { width: 100%; min-height: 44px; padding: 4px 6px; border-radius: var(--r-s); text-align: left; }
.hs__row--btn:hover { background: var(--night-3); }
.hs__row--btn[aria-expanded="true"] { background: var(--night-3); }
.hs__m { font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.hs__cells { display: grid; grid-template-columns: repeat(31, minmax(0, 18px)); gap: 2px; }
.hs--phone .hs__cells { grid-template-columns: repeat(31, minmax(0, 6px)); gap: 2px; }
/* a normal cell carries a --line-3 hairline (3.4:1 on night, WCAG 1.4.11); outside and past days keep the faint --line */
.hs__c { display: grid; place-items: center; height: 18px; border-radius: 3px; background: var(--night-3); color: var(--on-glow); font-weight: 700; font-size: 12px; line-height: 1; font-family: var(--font-text); font-variant-numeric: tabular-nums; border: 1px solid var(--line-3); padding: 0; }
.hs--phone .hs__c { height: 14px; border-radius: 1.5px; }
.hs__c--picked { background: var(--glow-ink); border-color: var(--glow-ink); }
.hs__c--good { background: transparent; border-color: var(--glow-ink); }
.hs__c--leftout { background: repeating-linear-gradient(135deg, var(--mist) 0 1.2px, transparent 1.2px 4px); border-color: var(--mist-45); }
.hs__c--outside, .hs__c--past, .hs__c.is-past { background: var(--night-2); border-color: var(--line); }
.hs__c.is-today, .hs__c--today { box-shadow: 0 0 0 1.5px var(--ink); }
button.hs__c:hover { border-color: var(--ink-2); }
.hs__grid { padding: 8px 0 12px; }
.hs__wk, .hs__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hs__wk { margin-bottom: 4px; font-size: var(--fs-label); color: var(--ink-3); text-align: center; font-weight: 600; }
.hs__days .dc { min-width: 0; }
.hs__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-fine); color: var(--ink-3); }
.hs__legend li { display: inline-flex; align-items: center; gap: var(--s2); }
.hs__legend .hs__c { width: 14px; height: 18px; font-size: 12px; }

/* ---------- people tile and disc ---------- */
.disc { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.4px solid var(--ink-2); color: var(--ink); font-weight: 700; font-size: 13px; line-height: 1; font-family: var(--font-text); text-transform: uppercase; }
.disc--you { background: var(--glow-ink); border-color: var(--glow-ink); color: var(--on-glow); }
.disc--add { border-style: dashed; color: var(--ink-2); }
.disc--s { width: 24px; height: 24px; font-size: 12px; }
.pt { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--night-2); color: var(--ink); text-decoration: none; text-align: left; min-width: 0; transition: background-color var(--dur-1), border-color var(--dur-1); }
.pt:hover { background: var(--night-3); border-color: var(--line-2); }
.pt.is-selected { border-color: var(--glow-ink); }
.pt__t { display: grid; gap: 2px; min-width: 0; }
.pt__name { font-weight: 600; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt__meta, .pt__line { font-size: var(--fs-fine); color: var(--ink-3); }
.pt--lookup .pt__name, .pt--save .pt__name { font-weight: 600; color: var(--ink); }

/* ---------- pair panel ---------- */
.pp { display: grid; gap: var(--s4); }
.pp__people { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
.pp__chip { display: flex; align-items: flex-start; gap: var(--s3); padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--night-2); min-width: 0; }
.pp__who { display: grid; gap: 4px; min-width: 0; }
.pp__name { font-weight: 600; }
.pp__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pp__born { font-size: var(--fs-fine); color: var(--ink-3); }
.pp__and { font-style: italic; font-weight: 500; font-size: 24px; line-height: 1; font-family: var(--font-display); color: var(--ink-2); }
.pp__rows { display: grid; }
.pp__row { display: grid; grid-template-columns: 9em 1fr; gap: var(--s3); padding: 12px 0; border-top: 1px solid var(--line); }
.pp__row dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.pp__row dd { margin: 0; color: var(--ink-2); }
.pp__row--fix dd { border-left: 3px solid var(--glow-ink); padding-left: var(--s3); color: var(--ink); }
@media (max-width: 559px) {
  .pp__people { grid-template-columns: 1fr; }
  .pp__and { justify-self: center; }
  .pp__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- timeline rows ---------- */
.tl { display: grid; }
.tl__row { display: grid; grid-template-columns: 4.4em 3.6em minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: 10px 8px; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.tl__lead { font-size: var(--fs-small); color: var(--ink); }
.tl__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink-2); min-width: 0; }
.tl__line { flex: 1 1 14em; }
.tl__note { flex-basis: 100%; font-size: var(--fs-fine); color: var(--ink-3); }
.tl__flag { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.tl__flag--here { color: var(--glow-ink); }
.tl__row.is-here { border-left-color: var(--glow-ink); }
.tl__row.is-current { background: var(--night-3); }
.tl__row.is-enemy { border-left-color: var(--mist); }
.tl__row.is-past .tl__lead, .tl__row.is-past .tl__line { color: var(--ink-3); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); z-index: var(--z-toast); transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--r-m); background: var(--night-3); border: 1px solid var(--line-2); color: var(--ink); font-size: var(--fs-small); }
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* ---------- view frame ---------- */
.vf { position: relative; margin: 0; background: var(--night); }
.vf__over { font-weight: 500; font-size: var(--fs-overline); line-height: 1.2; font-family: var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); padding-top: var(--s3); padding-bottom: var(--s3); }
.vf__stage { --vf-rail: var(--rail-h); position: relative; overflow: hidden; height: calc(var(--vf-art) + var(--vf-rail)); background: var(--night); contain: layout paint; }
.vf--norail .vf__stage { --vf-rail: 0px; }
.vf--week .vf__stage { --vf-art: var(--view-week); }
.vf--months .vf__stage { --vf-art: var(--view-months); }
.vf--year .vf__stage { --vf-art: var(--view-year); }
.vf--pairYears .vf__stage { --vf-art: var(--view-pair); --vf-rail: calc(var(--rail-h) + 28px); }
.vf--single .vf__stage { --vf-art: var(--view-single); }
.vf--entry .vf__stage { --vf-art: var(--view-entry); }
.vf__skeleton { position: absolute; left: 0; right: 0; top: 0; height: var(--vf-art); background: var(--sky-1); }
.vf__skeleton::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: var(--sky-2); opacity: .5; }
.vf__sil { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; z-index: 1; fill: rgba(239, 230, 210, .04); }
.vf--rail .vf__skeleton + * { z-index: 1; }
.vf--rail .vf__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--vf-rail); background: var(--night-2); border-top: 1px solid var(--line); z-index: 0; pointer-events: none; }
.vf.is-ready .vf__stage::after { display: none; }
.vf__cap { padding-top: var(--s3); }
.vf__cap:has(> .vf__legend[hidden]) { display: none; } /* no legend: no empty band under the view */
.vf__legend { max-width: 72ch; }

/* ---------- placeholders and small shared bits ---------- */
.ics-blocked { display: grid; gap: var(--s2); max-width: 32ch; color: var(--ink-2); font-size: var(--fs-small); }
.ics-blocked__link { min-height: 32px; display: inline-flex; align-items: center; }

/* ---------- Windows contrast themes (SH02) ---------- */
/* forced colors drop backgrounds and box-shadows, so state and focus that live there get a system colour instead.
   The heat strip and its legend are a data graphic: they keep their own fills. */
@media (forced-colors: active) {
  .input:focus, .input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .tg__track, .tg__knob { forced-color-adjust: none; }
  .tg__track { background: Canvas; border-color: CanvasText; }
  .tg__knob { background: CanvasText; }
  .tg[aria-checked="true"] .tg__track { background: Highlight; border-color: Highlight; }
  .tg[aria-checked="true"] .tg__knob { background: HighlightText; }
  .lb__opt.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .lb__opt.is-selected .lb__mark { forced-color-adjust: none; background: Highlight; border-color: Highlight; box-shadow: inset 0 0 0 3px Canvas; }
  .tab.is-on { border: 2px solid Highlight; }
  .tabs--top .tab.is-on { padding: 6px 12px; } /* the 1 px wider border, taken back from the padding: no shift */
  .hs__cells, .hs__legend .hs__c { forced-color-adjust: none; }
  /* the yolfez mark is a mask over its own background, which forced colours repaint as Canvas: paint it as a link (SH01) */
  a.foot-y::before { forced-color-adjust: none; background: LinkText; }
  a.foot-y:hover::before, a.foot-y:focus-visible::before { background: Highlight; }
}