/* canon 152 (chair S7) reveal + the wheel (DIRECTION C X1) + the read-mark at the cut (S8). */
.wheel-card { display: flex; justify-content: center; padding: var(--gap-m); margin: var(--gap-l) 0; }
.wheel { width: 100%; height: auto; max-width: var(--wheel-max); }
@media (max-width: 375px) { :root { --wheel-max: 280px; } }   /* C1: the chapter list starts above the fold on a 375x667 phone */
.wheel .w-ring { fill: none; stroke: var(--chart-ink); stroke-width: 1.5; }
/* wheel-check 2026-10-11: the wheel is drawn at 200-334 px, so a 1-unit stroke is 0.6 px on the smallest. The sign dividers and house
   cusps keep 1.25 screen px at every size (non-scaling) and 3:1 against the ground; sign glyphs 4.5:1; the type is a quarter bigger. */
.wheel .w-line, .wheel .w-cusp { fill: none; stroke: var(--chart-line); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.wheel .w-angle { stroke: var(--chart-ink); stroke-width: 1.5; }
/* an approximate birth time: its houses and axes are drawn dashed - the hour is known, the minute is not (wheel.py data-time) */
.wheel[data-time="approx"] .w-cusp, .wheel[data-time="approx"] .w-angle { stroke-dasharray: 3 3; }
.wheel .w-sign, .wheel .w-planet text { font: 16px 'Noto Sans Symbols', sans-serif; text-anchor: middle; dominant-baseline: central; }
.wheel .w-sign { fill: var(--chart-mute); }
.wheel .w-label { fill: var(--chart-ink); font: 700 13px/16px var(--font); text-anchor: middle; dominant-baseline: central; }
.wheel .w-planet circle { fill: var(--surface); stroke: var(--chart-ink); stroke-width: 1; }
.wheel .w-planet text { fill: var(--chart-ink); }
.wheel .w-tick { stroke: var(--chart-ink); stroke-width: 1; }
.wheel .w-planet.marked circle { fill: var(--chart-mark); stroke: var(--voice-ink); stroke-width: 1.5; }
/* dark theme: --chart-ink turns light, so the glyph on the yellow mark takes the dark ink of the yellow field */
.wheel .w-planet.marked text { fill: var(--voice-ink); }
.reveal-run .wheel .w-ring { stroke-dasharray: 1037; stroke-dashoffset: 1037; animation: w-draw 700ms var(--ease-out) forwards; }
.reveal-run .wheel .w-planet:not(.w-known) { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.reveal-run .wheel .w-planet.landed { opacity: 1; transform: none; }
@keyframes w-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .reveal-run .wheel * { animation: none !important; transition: none !important; } }
.read-mark { background: var(--marker); color: inherit; border-radius: var(--r-small); padding: 0 2px; }
.cut-open { display: flex; gap: var(--gap-s); align-items: center; margin: var(--gap-m) 0; color: var(--muted); }
.meta-link { display: inline-flex; gap: var(--gap-xs); align-items: center; cursor: pointer; padding: var(--tap-pad-meta) 0; margin: calc(var(--gap-xs) - var(--tap-pad-meta)) 0 calc(0px - var(--tap-pad-meta)); }   /* --tap-min hit area, same layout */
.reveal-rows .g-sub { display: block; margin-top: 2px; font: var(--t-row-sub); color: var(--muted); }
/* P4.4 (row 46): the year's ink cover (partials/year_cover.html), moved from pay.css unchanged: the year pay page and the year offer in the
   Mini App draw the one object, and this sheet is the one both load. pay.css keeps what only the pay pages use (.cover-glow, .cover .tgrid). */
.cover { --surface: var(--ink-card); --chart-ink: var(--ink-card-text); --chart-line: var(--ink-card-line); --chart-mute: var(--ink-card-mute); --voice-ink: var(--ink-card);
  position: relative; margin-top: 20px; padding: 20px 20px 18px; border-radius: var(--r-card); background: var(--ink-card); color: var(--ink-card-text);
  text-align: center; overflow: hidden; box-shadow: var(--shadow-float); }
.cover::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
   radial-gradient(1.5px 1.5px at 12% 18%, var(--ink-card-text) 98%, transparent), radial-gradient(1.5px 1.5px at 86% 12%, var(--ink-card-text) 98%, transparent),
   radial-gradient(1.5px 1.5px at 7% 62%, var(--ink-card-text) 98%, transparent), radial-gradient(1.5px 1.5px at 93% 56%, var(--ink-card-text) 98%, transparent),
   radial-gradient(1.5px 1.5px at 24% 92%, var(--ink-card-text) 98%, transparent), radial-gradient(1.5px 1.5px at 78% 90%, var(--ink-card-text) 98%, transparent),
   radial-gradient(1.5px 1.5px at 50% 5%, var(--ink-card-text) 98%, transparent); }
.cover-name { position: relative; margin: 0 0 var(--gap-m); font: var(--t-screen); letter-spacing: var(--ls-display); color: var(--ink-card-text); overflow-wrap: break-word; }
.cover-name.n-mid, .cover-name.n-long { font-size: 28px; line-height: 32px; font-weight: 700; }
.cover .wheel { position: relative; display: block; margin: 0 auto; width: 168px; height: 168px; max-width: none; }
@media (max-width: 380px) { .cover .wheel { width: 136px; height: 136px; } }
.cover-rule { position: relative; height: 1px; background: var(--ink-card-rule); margin: var(--gap-l) 0; }
.cover .wheel .w-ring { stroke-dasharray: 1037; stroke-dashoffset: 0; animation: cv-draw 600ms var(--ease-out) both; }
@keyframes cv-draw { from { stroke-dashoffset: 1037; } }
.cover-meta { position: relative; margin: var(--gap-m) 0 0; font: var(--t-meta); color: var(--ink-card-mute); }