/* =====================================================================
   DoTarot foundation layer (4 Oct 2026)
   Loaded after styles.css. New and rewritten components use ONLY these
   tokens. Legacy rules in styles.css migrate here as they are touched.
   ===================================================================== */
:root{
  /* spacing — 4px base, fluid at the top end */
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:20px; --space-lg:32px;
  --space-xl:clamp(40px,6vh,56px); --space-2xl:clamp(56px,9vh,96px); --space-section:clamp(64px,11vh,128px);
  /* type — Thai needs generous leading; display sizes stop growing at ~1440px */
  /* One editorial scale (8 Oct): display > page title > section > sub. Each step is visibly
     smaller than the one above at every width, so a section heading never competes with the page title. */
  /* 12 Oct: scale tightened (~1.25 ratio at desktop). Thai headings carry a 1.45 line box, so the old
     54px page titles took 78px per line and out-shouted everything beside them. Steps stay distinct:
     display 56 > page 44 > section 36 > sub 24 (desktop) / 34 > 30 > 26 > 20 (320px). */
  --t-display:clamp(2.125rem,1.5rem + 2.2vw,3.5rem);
  --t-h1:clamp(1.875rem,1.45rem + 1.5vw,2.75rem);
  --t-h2:clamp(1.625rem,1.3rem + 1.05vw,2.25rem);
  --t-h3:clamp(1.25rem,1.15rem + .4vw,1.5rem);
  --t-lead:clamp(1.08rem,1rem + .4vw,1.3rem);
  --t-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --t-small:.9375rem; --t-label-lg:.9375rem; --t-label:.8125rem; --t-caption:.78rem;
  --t-button:clamp(.95rem,.92rem + .15vw,1.02rem);
  --lh-body:1.7; --lh-head:1.22; --lh-tight:1.15;
  /* 9 Oct: named roles that were still literal values. Card titles under a card, legal/fine print,
     and the line box for a one-line serif title (Noto Serif Thai's ink rises 1.08em above the
     baseline — measured — so a single-line Thai title needs ≥1.5 and must never sit in an
     overflow:hidden box; see "Thai typesetting"). */
  --t-card-title:clamp(.95rem,.9rem + .25vw,1.12rem); --t-legal:var(--t-small);
  --lh-title:1.5;
  /* measure */
  --measure:66ch; --measure-narrow:40ch;
  /* shape */
  --r-sm:6px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  /* motion — quiet, no bounce */
  --dur-1:160ms; --dur-2:280ms; --dur-3:480ms;
}

/* ---------- Thai typesetting ----------
   Thai stacks vowels and tone marks above and below the em box. Headings get a taller
   line box (otherwise lines touch and any overflow:hidden parent cuts the marks), and
   negative tracking — fine for Marcellus/Latin — is removed because it fuses stacked marks. */
/* 9 Oct, measured with canvas metrics: Noto Serif Thai ascent 1.08em / descent .54em (content
   area 1.62em). At 1.34 a stacked mark (ที่, ปู่) rose ~.14em above the line box — enough to be cut
   by any clipping ancestor and to touch the descender of the line above (ญ, ฐ). 1.45 keeps
   headings compact while the marks stay inside their own line. */
html:lang(th){--lh-head:1.45}
html:lang(th) :is(.res-head .q,.auth-panel .ph h2,.panel h2,.mt-feature-copy h2,.symbol-pop strong,.lmap .lm-t,.tl-item .tl-n){line-height:var(--lh-head)}
html:lang(th) :is(.mt-feature-copy h2,.mt-intro h1,.intent-body .rd-q,.hero3 .hero2-title){letter-spacing:0}
html:lang(th) :is(h1,h2,h3,.h2,.h3,.hero2-title,.rd-q,.mt-h):not(.display){letter-spacing:0}

/* ---------- global readability fixes (no 10–11px text where it matters) ---------- */
.fine{font-size:var(--t-small);line-height:1.6;color:var(--muted)}
.seo,.reveal-actions p,.tl .mini .more{font-size:var(--t-caption)}
.measure{max-width:var(--measure-narrow)}
.danger{color:var(--caution)!important}
q{quotes:"“" "”"}

/* ---------- top bar: one quiet account link ---------- */
.acct-link{font-size:var(--t-label);color:var(--ink-2);text-decoration:none;white-space:nowrap;min-height:var(--tap);display:inline-flex;align-items:center}
.acct-link:hover{color:var(--accent)}
.acct-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
/* Mobile: the account entry stays visible as an icon (sign-in was undiscoverable when hidden). */
@media (max-width:860px){.acct-link{margin-left:auto;border:1px solid var(--rule);border-radius:999px;width:var(--tap);padding:0;justify-content:center}.acct-link .acct-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.acct-link:has(.avatar){border:0}.acct-link+.utilities{margin-left:0}}
.foot-h{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 10px}
/* Footer branding: the logo alone, sized to sit on the same baseline grid as the column headings. */
.foot-logo{display:inline-flex;align-items:flex-start;min-height:var(--tap);border-radius:var(--r-sm);transition:opacity var(--motion-micro)}
.foot-logo:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.foot-logo:hover{opacity:.78}}
.foot .brand-f{display:block;height:48px;width:auto;margin:0}
@media (max-width:760px){
  .foot{padding:40px 0}
  .foot .brand-f{height:40px}
  .foot-grid{row-gap:24px}
  .foot-close{margin-top:var(--space-md)}
}
@media (pointer:coarse){.foot li a{display:flex;align-items:center;min-height:var(--tap);padding:0}}
@media (min-width:761px){body.on-home .foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot-close .link{white-space:nowrap}

/* =====================================================================
   READING FLOW v2 — ตั้งใจ → สับไพ่ → เลือก → เปิด → อ่าน
   One table, one focal point per step. Tokens only.
   ===================================================================== */

/* ---------- 1. ตั้งใจ: question first ---------- */
.intent-body{justify-content:center;gap:0;max-width:760px;padding-top:var(--space-lg);padding-bottom:var(--space-2xl)}
.intent-body .rd-q{font-size:var(--t-h1);line-height:var(--lh-head);letter-spacing:-.015em;max-width:none;margin:0 0 var(--space-md);text-wrap:balance}
.intent-body .rd-q label{cursor:text}
.intent-deck{right:max(-40px,calc(50% - 50vw + 4%));top:12%}
.ask{width:100%;position:relative;z-index:1}
.ask-field{display:block;width:100%;resize:none;overflow:hidden;border:0;border-bottom:1px solid var(--input);background:transparent;color:var(--ink);
  font-family:var(--serif);font-size:var(--t-h3);line-height:1.5;padding:var(--space-xs) 0 var(--space-sm);min-height:2.7em;border-radius:0;transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.ask-field::placeholder{color:var(--muted);opacity:.8}
.ask-field:focus{outline:0;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.ask-hint{margin:var(--space-xs) 0 0;min-height:1.6em;font-size:var(--t-small);line-height:1.6;color:var(--muted)}
.context-clarify{position:relative;z-index:1;margin-top:var(--space-sm);font-size:var(--t-small);color:var(--ink-2)}
.context-clarify[hidden]{display:none}
.context-type{margin:0 0 var(--space-xs);color:var(--muted)}
.context-type b{color:var(--accent);font-weight:600}
.context-clarify details{border-left:2px solid var(--rule);padding-left:var(--space-sm)}
.context-clarify summary{cursor:pointer;min-height:36px;color:var(--accent);text-underline-offset:.2em}
.context-clarify label{display:block;margin:var(--space-sm) 0 var(--space-2xs);color:var(--ink)}
.context-clarify input{display:block;width:100%;min-height:44px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--elevated);color:var(--ink);font:inherit}
.context-clarify input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Topic chips: one system. Height and padding never change with word length. */
.topics{position:relative;z-index:1;margin-top:var(--space-md)}
.topics-row{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.topics-row.rest{margin-top:var(--space-xs)}
.topic-chip,.topic-more{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--space-md);
  border:1px solid var(--rule);border-radius:var(--r-pill);background:transparent;color:var(--ink-2);
  font-family:var(--body);font-size:var(--t-label-lg);line-height:1.2;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.topic-chip:hover,.topic-more:hover{border-color:var(--ink-2);color:var(--ink)}
.topic-chip:active,.topic-more:active{transform:scale(.97)}
.topic-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.topic-chip:focus-visible,.topic-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-pill)}
.topic-more{border-style:dashed;color:var(--muted)}
.topic-more::after{content:"+";margin-left:6px;font-family:var(--mono)}
.topic-more[aria-expanded="true"]::after{content:"−"}
.topic-chip::before,.topic-chip::after{content:none}

/* The table setting: the pre-chosen spread, changeable in place */
.table-set{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-sm);margin-top:var(--space-lg);padding:var(--space-sm) 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.table-set.flash{animation:setFlash 900ms var(--ease-out)}
@keyframes setFlash{0%{background:color-mix(in srgb,var(--accent) 14%,transparent)}100%{background:transparent}}
.set-art{display:grid;place-items:center;width:52px;height:52px}
.set-text{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.set-text b{font-weight:500;font-size:var(--t-small);color:var(--ink)}
.set-text span{font-size:var(--t-label);color:var(--muted);overflow-wrap:anywhere}
.set-change{min-height:var(--tap);min-width:var(--tap);padding:0 var(--space-sm);border:0;background:none;color:var(--accent);font-family:var(--body);font-size:var(--t-label-lg);cursor:pointer;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.lay{position:relative;display:block}
.lay>span{position:absolute;width:var(--w);aspect-ratio:var(--ratio);border-radius:2px;background:var(--back-a);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.intent-foot{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-lg)!important;animation:none}
.intent-foot .btn{min-height:52px;padding-inline:32px;font-size:var(--t-button)}
.intent-alt{margin:var(--space-lg) 0 0;font-size:var(--t-small)}
.intent-alt a{color:var(--ink-2);text-underline-offset:.3em;text-decoration-color:var(--rule);display:inline-flex;align-items:center;min-height:var(--tap)}
.intent-alt a:hover{color:var(--accent)}

/* Spread sheet */
.spread-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.spread-row{display:grid;grid-template-columns:64px minmax(0,1fr) 24px;align-items:center;gap:var(--space-sm);min-height:72px;padding:var(--space-sm) var(--space-2xs);border:0;border-bottom:1px solid var(--rule-2);background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit;transition:background-color var(--dur-1)}
.spread-row:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.spread-row .row-art{display:grid;place-items:center;height:56px}
.spread-row .row-text{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.spread-row b{font-weight:500;font-size:var(--t-body)}
.spread-row b em{font-style:normal;font-size:var(--t-caption);color:var(--accent);margin-left:var(--space-xs);white-space:nowrap}
.spread-row .row-text span{font-size:var(--t-label);color:var(--ink-2)}
.spread-row small{font-size:var(--t-caption);color:var(--muted)}
.row-check{width:22px;height:22px;border-radius:50%;border:1px solid var(--rule)}
.spread-row[aria-pressed="true"] .row-check{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--elevated)}
.spread-row[aria-pressed="true"] .lay>span{background:var(--accent)}
.rev-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) 0 var(--space-xs)}
.rev-row span{display:flex;flex-direction:column;line-height:1.5}
.rev-row b{font-weight:500;font-size:var(--t-small)}
.rev-row small{font-size:var(--t-label);color:var(--muted)}
.rev-row [role="switch"]{display:grid;place-items:center;min-width:var(--tap);min-height:var(--tap);border:0;background:none;cursor:pointer;padding:0}
.sw{width:40px;height:24px;border-radius:var(--r-pill);background:var(--rule);position:relative;transition:background-color var(--dur-2)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--elevated);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--dur-2) var(--ease-out)}
[aria-checked="true"]>.sw{background:var(--accent)}
[aria-checked="true"]>.sw::after{transform:translateX(16px)}

/* ---------- 2–3. สับไพ่ + เลือก: the table ---------- */
.pick{gap:0}
.pick-head{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--space-sm);padding:var(--space-xs) 0;overflow-y:auto;scrollbar-width:none}
/* 9 Oct: `justify-content:center` in a scroll container pushes overflowing content above its top
   edge, where it can never be scrolled to — that is how the question and slot labels vanished on
   short laptop windows and at 150–200% zoom. Auto margins centre the head when it fits and fall
   back to top-aligned (scrollable) when it does not, in every browser. */
.pick-head>:first-child{margin-top:auto}.pick-head>:last-child{margin-bottom:auto}
.pick-q{margin:0;max-width:34ch;text-align:center;font-family:var(--serif);font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick .slots{justify-content:safe center;padding:var(--space-2xs) var(--space-2xs) var(--space-xs)}
.pick .slot{--w:clamp(48px,min(12vw,11svh),104px)}
.slot .lb{font-family:var(--body);font-size:var(--t-caption);letter-spacing:0;color:var(--muted);line-height:1.35;max-width:calc(var(--w) + 24px)}
.slot.next .lb{color:var(--ink)}
.pick-msg{margin:0 auto;text-align:center;max-width:32em;min-height:3.4em}
.pick-title{margin:0;font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:1.5}
.pick-msg p{margin:var(--space-2xs) 0 0;font-size:var(--t-small);color:var(--muted)}
.pick-title .dots{display:inline-block;animation:dots 1.2s steps(4) infinite;width:1.2em;vertical-align:bottom}
/* clip, not width: the ellipsis reveals without re-laying out the title every step */
@keyframes dots{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
.card-fan-stage{position:relative;flex:0 0 clamp(200px,40svh,400px);height:clamp(200px,40svh,400px)}
.card-fan-stage.done .wheel{opacity:.35;transition:opacity var(--dur-3)}
.card-fan-stage.done .card-fan-nav{visibility:hidden}
/* Shuffle ritual: three backs riffle in the middle of the table, then the deck fans out */
.shuffle{display:none;position:absolute;left:50%;top:44%;width:clamp(78px,20vw,120px);aspect-ratio:var(--ratio);transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;z-index:4}
.shuffle .tc{position:absolute;inset:0;--w:100%;width:100%;box-shadow:var(--e2)}
.card-fan-stage.shuffling .shuffle{display:block}
.card-fan-stage.shuffling .wheel{opacity:0}
.card-fan-stage.shuffling .card-fan-nav{visibility:hidden}
.card-fan-stage.shuffling .shuffle .s1{animation:riffL 1.1s var(--ease) 2}
.card-fan-stage.shuffling .shuffle .s3{animation:riffR 1.1s var(--ease) 2}
.card-fan-stage.shuffling .shuffle .s2{transform:rotate(-1.5deg)}
.wheel{transition:opacity var(--dur-3);
  /* full-bleed: the arc runs to the screen edges and fades there, instead of being cut by the reading column */
  width:100vw;margin-left:calc(50% - 50vw);--fade:clamp(24px,9vw,220px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent),linear-gradient(#000 calc(100% - 22px),transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent),linear-gradient(#000 calc(100% - 22px),transparent);
          mask-composite:intersect}
.slots.overflows{--fade:28px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.wheel.fanning .wc{transition:transform 720ms var(--ease-out)}
.wheel.settling .wc{transition:transform 380ms var(--ease-out)}
.slot .hole .tc.arriving{opacity:0}
.slot .hole .tc{transition:opacity var(--dur-1)}
.wheel .wc{touch-action:pan-y;-webkit-tap-highlight-color:transparent}

/* ---------- 4. เปิดไพ่: one viewing stage, sized from the viewport ----------
   Root causes fixed 8 Oct: (a) the rail lived inside the 1100px reading column, so on
   wide screens cards were cut by the column edge while half the screen stayed empty;
   (b) "เปิดทั้งหมด" sat under the note, below the fold on every tested screen;
   (c) fixed-height label boxes with overflow:hidden clipped Thai names and tone marks.
   Now the stage is full-bleed, its height and the card width come from ONE budget
   (--reveal-chrome = everything that must stay visible around the cards), the actions
   sit directly under the cards, and label boxes reserve room instead of clipping. */
.reveal-body{align-items:center;--reveal-chrome:236px;--fit-edge:clamp(16px,4vw,64px)}
.reveal-q{margin-top:var(--space-xs)}
.reveal-title{margin:var(--space-2xs) 0 0;text-align:center}
.reveal-viewer{width:100vw;margin:clamp(6px,1.4vh,14px) calc(50% - 50vw) 0;flex:none;
  height:clamp(200px,calc(100svh - var(--reveal-chrome) - var(--safe-b)),700px);min-height:0;display:grid;grid-template-rows:minmax(0,1fr);
  --w:clamp(80px,min(24vw,calc((100svh - var(--reveal-chrome) - 204px) * .569)),220px)}
.reveal-viewer.has-nav{grid-template-rows:minmax(0,1fr) 54px}
.reveal{position:relative;display:flex;align-items:center;flex-wrap:nowrap;justify-content:flex-start;width:100%;height:100%;min-height:0;
  gap:clamp(20px,3vw,42px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-behavior:auto;scrollbar-width:none;
  padding:0 max(0px,calc((100% - var(--w)) / 2));
  /* the rail fades into the table at the screen edges instead of being cut */
  --fade:clamp(28px,8vw,140px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.reveal::-webkit-scrollbar{display:none}
.reveal.n1,.reveal.fits{justify-content:center;overflow:visible;padding-inline:0;-webkit-mask-image:none;mask-image:none}
.reveal.fits .rv{transition:opacity var(--dur-2)}
.rv{display:flex;flex-direction:column;align-items:center;gap:10px;width:var(--w)}
.reveal .rv{flex:none;transform-origin:center 48%}
.rv .pos{height:2.9em;display:grid;place-items:end center;font-family:var(--body);font-size:var(--t-caption);line-height:1.45;letter-spacing:0;color:var(--muted);text-align:center}
.rv .nm{font-family:var(--display);font-size:clamp(.9rem,calc(var(--w) * .085),1.3rem);line-height:1.2;text-align:center;height:calc(2.4em + 1.4rem);
  opacity:0;transform:translateY(6px);transition:opacity .6s .55s,transform .6s .55s var(--ease-out)}
.rv .nm small{display:block;margin-top:2px;font-family:var(--body);font-size:var(--t-caption);line-height:1.5;color:var(--muted)}
.rv.open .nm{opacity:1;transform:none}
.tap-hint{font-family:var(--body);font-size:var(--t-caption);line-height:1.5;color:var(--muted);transition:opacity var(--dur-2)}
.rv.open .tap-hint{opacity:0}
#rv-position{font-size:var(--t-caption)}
.reveal-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:min(calc(100% - 2 * var(--gutter)),620px);height:54px;margin:0 auto;border-top:1px solid var(--rule-2)}
.reveal-nav .mono{text-align:center;line-height:1.5;font-variant-numeric:tabular-nums}
.reveal-arrow{border:0;background:none;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:6px 8px;cursor:pointer;color:var(--ink-2);font-size:var(--t-small)}
.reveal-arrow:hover{color:var(--accent)}
.reveal-arrow:disabled{opacity:.35;cursor:default}
.reveal-arrow:last-child{justify-self:end}
/* Actions live right under the cards: progress, then the one valid next step. */
.reveal-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-xs) var(--space-md);flex-wrap:wrap;min-height:64px;margin:var(--space-xs) 0 0;padding:var(--space-xs) 0;text-align:center}
.reveal-actions p{margin:0;font-family:var(--mono);font-size:var(--t-caption);line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.reveal-actions .btn{min-height:48px;padding-inline:26px;font-size:var(--t-button)}
.reveal-actions .reveal-all{min-height:var(--tap);padding-inline:22px}
.reveal-note{width:min(100%,560px);min-height:96px;margin:var(--space-md) auto calc(var(--space-xl) + var(--safe-b));text-align:center}
.reveal-note .eyebrow{display:block;margin-bottom:7px}
.reveal-note p{font-family:var(--serif);font-size:var(--t-lead);line-height:1.65;color:var(--ink-2);margin:0;text-wrap:pretty}
@media (min-width:1800px){.reveal-viewer{--w:clamp(80px,min(24vw,calc((100svh - var(--reveal-chrome) - 204px) * .569)),260px)}}
@media (max-width:760px){
  .reveal-body{--reveal-chrome:262px}
  .reveal-viewer{--w:clamp(80px,min(44vw,calc((100svh - var(--reveal-chrome) - 204px) * .569)),190px)}
  /* thumb reach: if a short screen pushes the actions down, they stay pinned above the home indicator */
  .reveal-actions{position:sticky;bottom:0;z-index:4;width:100vw;margin-inline:calc(50% - 50vw);padding:var(--space-xs) var(--gutter) calc(var(--space-xs) + var(--safe-b));
}
  .reveal-actions .reveal-all{background:var(--elevated)}
  .reveal-note{padding:0 4px}
}
@media (max-width:430px){.reveal-nav{grid-template-columns:44px minmax(0,1fr) 44px;gap:4px}.reveal-arrow{justify-content:center;min-width:44px;font-size:1.3rem}.reveal-arrow span{display:none}.reveal-nav .mono{font-size:.72rem}}
@media (max-height:560px){
  .reveal-body{--reveal-chrome:206px}
  .reveal-viewer{--w:clamp(56px,calc((100svh - var(--reveal-chrome) - 100px) * .569),150px)}
  .reveal .rv{gap:4px}
  .reveal .rv .pos{height:1.5em}
  .reveal .rv .nm,.reveal .tap-hint{display:none}
  .reveal-note{margin-top:var(--space-xs);min-height:78px}
}

/* Desktop: a bigger table, same composition */
@media (min-width:1024px){
  .pick .slot{--w:clamp(72px,min(7vw,12svh),112px)}
  .card-fan-stage{flex-basis:clamp(260px,46svh,560px);height:clamp(260px,46svh,560px)}
}
/* Short laptops (1280×650, browser chrome open): the slots shrink with the height so the
   position labels are never cut off under the question */
@media (min-width:1024px) and (max-height:760px){
  .pick .slot{--w:clamp(44px,8.5svh,78px)}
  .card-fan-stage{flex-basis:clamp(230px,42svh,560px);height:clamp(230px,42svh,560px)}
}
/* Short phones (≤ 600px tall): keep the deck, compress the head */
@media (max-height:600px){
  .pick-q{font-size:var(--t-small);-webkit-line-clamp:1}
  .pick .slot{--w:clamp(34px,9svh,48px)}
  .pick-msg{min-height:0}.pick-msg p{display:none}
  .pick-title{font-size:var(--t-lead)}
  .card-fan-stage{flex-basis:clamp(170px,44svh,240px);height:clamp(170px,44svh,240px)}
}

/* =====================================================================
   RESULT
   ===================================================================== */
.individual .closing{font-family:var(--serif);font-size:var(--t-lead);line-height:1.65;color:var(--ink-2);max-width:var(--measure);margin:var(--space-lg) 0 0}
.bridge summary .h2{font-size:var(--t-h2)}

/* =====================================================================
   MY TAROT · ACCOUNT · REPORTS
   ===================================================================== */
.mt{padding-top:var(--space-xl);padding-bottom:var(--space-2xl);max-width:960px}
.mt .back-to{display:inline-block;margin-bottom:var(--space-md)}
.mt-top{padding-bottom:var(--space-lg);border-bottom:1px solid var(--rule)}
.mt-top .h2{font-size:var(--t-h1);margin:var(--space-xs) 0 var(--space-sm)}
.mt-top .lede{margin:var(--space-sm) 0 0}
.mt-sec{padding:var(--space-xl) 0;border-bottom:1px solid var(--rule-2)}
.mt-sec:last-of-type{border-bottom:0}
.mt-h{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:var(--lh-head);margin:0 0 var(--space-md)}
.mt-h .fine{font-family:var(--mono);margin-left:6px}
.mt-lead{font-family:var(--serif);font-size:var(--t-lead);line-height:1.6;margin:0 0 var(--space-md);max-width:var(--measure)}
.mt-next{margin:var(--space-md) 0 0}
.mt-foot{padding-top:var(--space-lg)}
.mt .ink2{max-width:var(--measure)}
.acct{font-size:var(--t-caption);margin:0;gap:4px 10px}
.acct a,.acct .link{color:var(--ink);font-size:inherit;min-height:var(--tap)}
.acct .dot{margin-right:4px}
.acct.warn{color:var(--caution);margin-top:var(--space-xs)}
.ctx-bars{list-style:none;margin:0 0 var(--space-md);padding:0;max-width:520px}
.ctx-bars li{display:grid;grid-template-columns:7.5em minmax(0,1fr) 2ch;gap:var(--space-sm);align-items:center;padding:6px 0;font-size:var(--t-small)}
.ctx-bars .bar{height:6px;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden}
.ctx-bars .bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}
.ctx-bars b{font-family:var(--mono);font-weight:400;text-align:right;color:var(--ink-2)}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:10px 0;border-bottom:1px solid var(--rule-2);line-height:1.6}
.plain.src li{font-size:var(--t-small);color:var(--ink-2);padding:6px 0}
.numbered{counter-reset:n;list-style:none;margin:0;padding:0;max-width:var(--measure)}
.numbered li{counter-increment:n;display:grid;grid-template-columns:2.4em minmax(0,1fr);padding:10px 0;border-bottom:1px solid var(--rule-2);line-height:1.6}
.numbered li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:var(--t-caption);color:var(--gold);padding-top:.3em}
.numbered.big li{padding:var(--space-md) 0}
.numbered.big b{display:block;font-family:var(--serif);font-weight:500;font-size:var(--t-h3);margin-bottom:4px}
.mt blockquote,.report blockquote{margin:var(--space-sm) 0;padding-left:var(--space-md);border-left:2px solid var(--gold);font-family:var(--serif);font-size:var(--t-lead);line-height:1.6;color:var(--ink)}
.quotes{list-style:none;margin:0;padding:0}
.quotes li{padding:var(--space-md) 0;border-bottom:1px solid var(--rule-2)}
.quotes .qq{font-family:var(--serif);margin:4px 0 0;color:var(--ink-2)}
.quotes .fu,.tl .fu{display:block;font-size:var(--t-small);color:var(--accent);margin-top:4px}
.price-line{font-size:var(--t-lead);margin:0 0 var(--space-sm)}
.price-line b{font-family:var(--display);font-weight:400;font-size:var(--t-h2)}
.buy{border-bottom:0}
@media (max-width:600px){.tl li a{grid-template-columns:minmax(0,1fr) auto}.tl .dt{grid-column:1/-1}}

/* ---------- sheets: auth + checkout ---------- */
.panel .or{display:flex;align-items:center;gap:var(--space-sm);color:var(--muted);font-size:var(--t-caption)}
.panel .or::before,.panel .or::after{content:"";flex:1;height:1px;background:var(--rule)}
.panel .later{margin:var(--space-xs) auto 0;display:flex}
.panel .loading{padding:var(--space-lg) 0;text-align:center}
.panel .loading::before{content:"";display:block;width:22px;height:22px;margin:0 auto var(--space-sm);border-radius:50%;border:2px solid var(--rule);border-top-color:var(--accent);animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.field-error{margin:0;color:var(--caution);font-size:var(--t-small)}
.mock-note{margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px dashed var(--rule);font-family:var(--mono);font-size:var(--t-caption)}
.co-sum{margin:0;border-top:1px solid var(--rule)}
.co-sum div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid var(--rule-2)}
.co-sum dt{font-family:var(--mono);font-size:var(--t-caption);color:var(--muted);padding-top:3px}
.co-sum dd{margin:0;font-size:var(--t-small);line-height:1.6}
.pv-states{display:grid;gap:var(--space-xs);margin:var(--space-xs) 0 var(--space-md)}
.pv-states label{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);font-size:var(--t-small)}
.pv-states select{font:inherit;min-height:36px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);padding:0 8px;max-width:60%}

/* =====================================================================
   PLUS
   ===================================================================== */
.plus-page{max-width:960px;padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}
.plus-top .h2{font-size:var(--t-h1);margin:var(--space-sm) 0 var(--space-md);max-width:18ch;text-wrap:balance}
.plus-top .actions{margin-top:var(--space-lg)}
.plus-example{margin:var(--space-2xl) 0 0;padding:var(--space-lg) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.plus-example blockquote{margin:var(--space-sm) 0;font-family:var(--serif);font-size:var(--t-h3);line-height:1.55;max-width:34ch}
.plus-decan-teaser{margin-top:var(--space-lg);padding:var(--space-md);border-left:2px solid var(--gold);background:var(--sunken)}
.plus-decan-teaser strong{display:block;margin-top:var(--space-xs);font-family:var(--serif);font-size:var(--t-lead);font-weight:500}
.plus-decan-teaser p{margin:var(--space-xs) 0;max-width:var(--measure)}
.plus-concepts .numbered{max-width:none;margin-top:var(--space-sm)}
.plus-concepts .numbered li{padding:var(--space-sm) 0;line-height:1.45;gap:var(--space-sm)}
.plus-concepts .numbered b{display:block;font-family:var(--serif);font-weight:500;font-size:var(--t-lead);line-height:1.35;margin-bottom:2px}
.plus-concepts .numbered .link{display:inline-block;margin-left:.4em}
@media (max-width:640px){.plus-concepts .numbered .link{display:block;margin:var(--space-xs) 0 0}}
.plus-flow{max-width:960px}
.plus-flow-form{display:grid;gap:var(--space-sm);margin:var(--space-lg) 0 var(--space-xl);padding:var(--space-lg);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.plus-flow-form label{display:block;font-weight:600;color:var(--ink)}
.plus-flow-form textarea,.plus-flow-form input,.plus-flow-form select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--sunken);color:var(--ink);font:inherit}
.plus-flow-form textarea{resize:vertical}
.plus-flow-form select{cursor:pointer}
.plus-flow-form .btn{justify-self:start}
.plus-flow-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.plus-flow-fields>div,#plus-flow-time-row,#plus-flow-fold{display:grid;gap:var(--space-xs)}
#plus-flow-error:not(:empty){padding:var(--space-sm);border-left:3px solid var(--caution);color:var(--ink)}
.plus-flow-result{scroll-margin-top:var(--space-lg);padding-bottom:var(--space-2xl)}
.plus-flow-result-head{border-bottom:1px solid var(--rule);padding-bottom:var(--space-md)}
.plus-flow-result-head .mt-h{margin:var(--space-xs) 0}
.plus-flow-answer{margin:var(--space-lg) 0;padding:var(--space-lg);border:1px solid var(--rule);border-top:2px solid var(--accent);border-radius:var(--r-sm);background:var(--surface)}
.plus-flow-answer p{max-width:66ch;font-family:var(--serif);font-size:var(--t-lead);line-height:1.7;color:var(--ink-2)}
.plus-flow-answer .lead{font-size:var(--t-h3);color:var(--ink)}
.plus-flow-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin:var(--space-xl) 0}
.plus-flow-cards>div{display:grid;justify-items:center;gap:var(--space-xs);min-width:0}
.plus-flow-cards .tc{display:block;width:min(100%,150px)}
.plus-flow-cards img{display:block;width:100%;height:auto}
.plus-flow-cards b{font-family:var(--serif);font-weight:500;text-align:center}
.plus-flow-decan{padding:var(--space-lg) 0;border-top:1px solid var(--rule)}
.plus-flow-contribution{max-width:68ch;margin:var(--space-md) 0 var(--space-lg);padding:var(--space-md);border-inline-start:2px solid var(--gold);background:var(--surface);font-family:var(--serif);font-size:var(--t-lead);line-height:1.65}
.plus-flow-contribution b{font-family:var(--body);font-size:var(--t-small);font-weight:600;color:var(--gold)}
.plus-flow-decan-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin:var(--space-lg) 0}
.plus-flow-decan-list article{padding:var(--space-md);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface)}
.plus-flow-decan-list h4{font-family:var(--serif);font-size:var(--t-lead);font-weight:500;line-height:1.5;margin:var(--space-sm) 0}
.plus-flow-decan-list p{line-height:1.6}
.plus-flow-match{padding-top:var(--space-sm);border-top:1px solid var(--rule-2);font-weight:500}
@media(max-width:700px){.plus-flow-fields,.plus-flow-decan-list{grid-template-columns:1fr}.plus-flow-form,.plus-flow-answer{padding:var(--space-md)}}
@media(max-width:600px){.plus-flow-cards{display:flex;gap:var(--space-sm);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--space-sm)}.plus-flow-cards>div{flex:0 0 clamp(112px,38vw,160px);scroll-snap-align:start}}
.plus-birth-dialog{width:min(640px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:clamp(20px,4vw,36px);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--elevated);color:var(--ink);font:inherit}
.plus-birth-dialog::backdrop{background:#000a}
.plus-birth-dialog h2{margin:0 0 var(--space-sm);font-family:var(--serif);font-size:var(--t-h3);font-weight:500}
.plus-birth-dialog>.ink2{margin:0 0 var(--space-lg)}
.plus-birth-form{display:grid;gap:var(--space-sm)}
.plus-birth-form label{display:grid;gap:var(--space-xs);font-size:var(--t-small);font-weight:600}
.plus-birth-form input,.plus-birth-form select{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--sunken);color:var(--ink);font:inherit}
.plus-birth-form .fine{margin:0}
.plus-birth-form [role="alert"]:not(:empty){padding:var(--space-sm);border-left:3px solid var(--caution)}
.plus-birth-form [hidden],#plus-flow-time-row[hidden],#plus-flow-fold[hidden]{display:none!important}
.plans .plan{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-xs) var(--space-lg);align-items:center;padding:var(--space-md) 0;border-bottom:1px solid var(--rule-2)}
.plans .plan h3{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);margin:0 0 4px}
.plans .plan p{margin:0;color:var(--ink-2);max-width:46ch}
.plans .plan .pp{font-family:var(--display);font-size:var(--t-h3);color:var(--ink);white-space:nowrap}
.plans .plan .pp small{font-family:var(--body);font-size:var(--t-caption);color:var(--muted)}
.plans .plan.hl h3{color:var(--accent)}
.plans .fine{margin-top:var(--space-md)}
@media (max-width:640px){.plans .plan{grid-template-columns:minmax(0,1fr) auto}.plans .plan>a,.plans .plan>button{grid-column:1/-1;justify-self:start}}
.faq details{border-bottom:1px solid var(--rule-2)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--space-sm);padding:var(--space-md) 0;font-family:var(--serif);font-size:var(--t-lead)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-family:var(--mono)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 var(--space-md);color:var(--ink-2);max-width:var(--measure)}
.support-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-md) var(--space-xl);align-items:end}
.support-row .mt-h{margin:var(--space-xs) 0 0}
.support-row p{margin:0}
@media (max-width:760px){.support-row{grid-template-columns:1fr}}

/* =====================================================================
   HOME additions
   ===================================================================== */
.loop{padding-top:var(--space-section);padding-bottom:var(--space-xl)}
.loop .sec-head{margin-bottom:var(--space-xl)}
.home-mt{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}
.home-mt-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-lg) var(--space-2xl);border-top:1px solid var(--rule);padding-top:var(--space-xl)}
.home-mt .h2{margin-top:var(--space-sm)}
.home-quote{margin:0 0 var(--space-md);font-family:var(--serif);font-size:var(--t-h3);line-height:1.55;padding-left:var(--space-md);border-left:2px solid var(--gold)}
.home-mt .actions{margin:var(--space-md) 0 0}
@media (max-width:860px){.home-mt-inner{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .topic-chip::after,.sw,.sw::after,.ask-field{transition:none}
  .panel .loading::before{animation-duration:2.4s}
}

/* ---------- home rhythm: tighten the scrollytelling tail and the support band ---------- */
@media (min-width:861px){.story-steps{padding-bottom:4vh}.step{min-height:58svh}}
/* Reserve the first screen for the view so the footer never jumps when JS renders (CLS). */
#main{min-height:100svh}
.view.first{animation:none}
/* Below-the-fold home sections skip style/layout/paint until they near the viewport (−TBT on phones). */
body.on-home .sec{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* =====================================================================
   RESULT on large screens: the spread stays in view beside the reading
   ===================================================================== */
.next-steps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);padding:var(--space-xl) 0 var(--space-md)}

/* Touch targets in the reading top bar and the site top bar stay ≥ 44px at every width */
.rd-top .rd-exit,.rd-top .rd-back{min-width:var(--tap)!important;min-height:var(--tap)!important;display:inline-grid;place-items:center}

/* Question screen: the ghost deck sits outside the text column, never behind it */
.intent-body{position:relative}
.intent-deck{left:calc(100% + var(--space-xl));right:auto!important;top:14%!important}
@media (max-width:1199px){.intent-deck{display:none}}
@media (max-width:600px){
  .ask-field{font-size:var(--t-lead);min-height:calc(2 * 1.5em + var(--space-xs) + var(--space-sm))}
  .intent-body{justify-content:flex-start;padding-top:var(--space-md)}
  .intent-foot .btn{width:100%}
}
/* Home: no tiny captions, hero fits small phones */
.path .m,.sun-caption{font-size:var(--t-caption)}
.hs .dot{font-size:.75rem}
.bridge-tabs button{min-width:var(--tap);min-height:var(--tap)}
.th-nb{white-space:nowrap} /* Thai phrase that must not wrap inside a word */
.spread-row b .th-nb,.set-text b .th-nb{font-size:inherit;color:inherit}

/* =====================================================================
   READING RESULT — single source of truth (replaces 60+ legacy rules)
   Every box is content-sized: no fixed heights, no 100vw, no static
   cards. Position readings respond to their own width (container
   queries), so they behave the same in a phone, a tablet, or the narrow
   right column of the desktop layout.
   ===================================================================== */
.result{width:100%;max-width:calc(1200px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.result,.result *{min-width:0}
.result :is(h1,h2,h3,p,.pos,.th,.result-card-name){overflow-wrap:anywhere;word-break:normal;white-space:normal}

/* head */
.res-head{padding-block:var(--space-xl) var(--space-md);border-bottom:1px solid var(--rule)}
.res-head .eyebrow{display:block;line-height:1.6}
.res-head .q{margin:var(--space-xs) 0 0;max-width:24em;font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:1.35;text-wrap:balance}

/* the spread, as laid on the table */
.result-cards{display:flex;gap:var(--space-sm);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding-block:var(--space-md) var(--space-lg)}
.result-cards>div{flex:none;width:clamp(96px,28vw,150px);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);scroll-snap-align:start}
.result-cards .mono{align-self:flex-start;font-size:var(--t-caption);line-height:1.4;min-height:2.8em}
.result-cards .tc{--w:100%;width:100%}
.result-card-name{font-family:var(--display);font-size:var(--t-small);line-height:1.3;text-align:center}
.result.is-plus .result-cards{margin:0 0 var(--space-sm);padding-block:var(--space-lg);gap:var(--space-md);border-bottom:1px solid var(--rule-2)}
.result.is-plus .result-cards>div{width:clamp(116px,35vw,190px)}
.result.is-plus .result-cards .tc{filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));animation:plus-card-enter .6s both}
.result.is-plus .result-cards>div:nth-child(2) .tc{animation-delay:.12s}
.result.is-plus .result-cards>div:nth-child(3) .tc{animation-delay:.24s}
@keyframes plus-card-enter{from{opacity:0;transform:translateY(12px) rotateY(-9deg)}to{opacity:1;transform:none}}
.plus-celestial{margin:var(--space-xl) 0;padding:clamp(20px,4vw,42px);border:1px solid var(--rule-2);border-top:2px solid var(--gold);border-radius:var(--r-sm);background:var(--surface);max-width:72ch}
.plus-celestial .eyebrow{color:var(--gold)}
.plus-celestial h2{margin:var(--space-xs) 0 var(--space-md);font-family:var(--serif);font-size:var(--t-h2);line-height:1.35}
.plus-celestial-effect{margin:0 0 var(--space-lg);font-family:var(--serif);font-size:var(--t-lead);line-height:1.7;color:var(--ink)}
.plus-celestial-path{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);padding:var(--space-md) 0;border-block:1px solid var(--rule-2);font-size:var(--t-small);line-height:1.5}
.plus-celestial-path span{padding:var(--space-2xs) var(--space-xs);border:1px solid var(--rule-2);border-radius:var(--r-sm)}
.plus-celestial-path i{font-style:normal;color:var(--gold)}
.plus-celestial-relation{margin:var(--space-md) 0 0;line-height:1.7;color:var(--ink-2)}
.plus-celestial-proof{margin-top:var(--space-lg);border-top:1px solid var(--rule-2)}
.plus-celestial-proof summary{cursor:pointer;padding:var(--space-md) 0;min-height:44px;color:var(--ink)}
.plus-celestial-proof summary:focus-visible,.plus-celestial-profile .link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.plus-celestial-proof dl{margin:0}.plus-celestial-proof dl>div{display:grid;grid-template-columns:minmax(100px,.35fr) minmax(0,1fr);gap:var(--space-sm);padding:var(--space-sm) 0;border-top:1px solid var(--rule-2)}
.plus-celestial-proof dt{font-size:var(--t-small);color:var(--muted)}.plus-celestial-proof dd{margin:0;line-height:1.6;overflow-wrap:anywhere}
.plus-celestial-profile{margin:var(--space-lg) 0 0;padding-top:var(--space-md);border-top:1px solid var(--rule-2);font-size:var(--t-small);line-height:1.6;color:var(--ink-2)}
.plus-celestial-profile .link{min-height:44px;margin-inline-start:var(--space-xs)}
.plus-celestial.is-quiet>p:not(.plus-celestial-profile){line-height:1.7}
.plus-gd-cards{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-xs)}.plus-gd-cards li{display:grid;gap:2px;line-height:1.55}.plus-gd-cards .mono{font-size:var(--t-small);color:var(--muted)}.plus-celestial [data-plus-personal]{min-height:1.6em}
@media(max-width:600px){.result.is-plus .result-cards{gap:var(--space-sm)}.plus-celestial{padding:var(--space-md)}.plus-celestial-proof dl>div{grid-template-columns:1fr;gap:var(--space-2xs)}}
@media(prefers-reduced-motion:reduce){.result.is-plus .result-cards .tc{animation:none}}

/* overall reading — the one intentional editorial frame on this page */
.synthesis{margin-block:0 var(--space-xl);padding:clamp(20px,5vw,56px);background:var(--surface);border:1px solid var(--rule-2);border-top:2px solid var(--accent);border-radius:var(--r-sm)}
.synthesis h2{margin:var(--space-xs) 0 var(--space-md);font-size:var(--t-h2);text-wrap:balance}
.synthesis-copy{max-width:68ch}
.synthesis-copy p{margin:0 0 1em;font-family:var(--serif);font-size:var(--t-lead);line-height:1.75;color:var(--ink-2)}
.synthesis-copy .lead{font-size:var(--t-h3);line-height:1.6;color:var(--ink)}
.synthesis-copy p:last-child{margin-bottom:0}
.reading-part{padding:var(--space-md) 0;border-top:1px solid var(--rule-2);max-width:68ch}
.reading-part h2{margin:var(--space-xs) 0 var(--space-sm)}
.reading-part p{margin:0;max-width:62ch;font-family:var(--serif);font-size:var(--t-lead);line-height:1.65;color:var(--ink-2)}
.result>.basis{margin-block:var(--space-md) var(--space-xl)}

/* position by position */
.section-heading{padding-bottom:var(--space-sm);border-bottom:1px solid var(--rule)}
.section-heading h2{margin:var(--space-xs) 0 0;text-wrap:balance}
.individual{container:positions / inline-size}
.individual-disclosure{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.individual-disclosure>summary{cursor:pointer;padding-block:var(--space-md);color:var(--ink)}
.individual-disclosure>summary .h3{display:block;margin-top:var(--space-xs)}
.individual-disclosure>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rc{padding-block:var(--space-xl);border-bottom:1px solid var(--rule-2)}
.rc-head{display:grid;grid-template-columns:clamp(96px,36cqi,160px) minmax(0,1fr);gap:var(--space-md);align-items:end}
.rc-art{display:block;align-self:start}
.rc-art .tc{--w:100%;width:100%}
.rc-id{display:flex;flex-direction:column;gap:var(--space-2xs);padding-bottom:var(--space-2xs)}
.rc .pos{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.02em;color:var(--muted)}
.rc h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,1rem + 4.6cqi,2.4rem);line-height:1.15;text-wrap:balance}
.rc .th{margin:0;font-size:var(--t-small);color:var(--muted)}
.rc .orientation{align-self:flex-start;font-size:var(--t-caption);color:var(--accent)}
.rc-body{margin-top:var(--space-md)}
.rc .one{margin:0 0 var(--space-sm);max-width:62ch;font-family:var(--serif);font-size:var(--t-lead);line-height:1.75;color:var(--ink)}
.rc .card-learn{font-size:var(--t-small)}
.individual .closing{margin:var(--space-lg) 0 0;max-width:62ch;font-family:var(--serif);font-size:var(--t-lead);line-height:1.7;color:var(--ink-2)}
/* Enough room: card in its own column, kept in view while its text scrolls */
@container positions (min-width:560px){
  .rc{display:grid;grid-template-columns:clamp(120px,22cqi,180px) minmax(0,1fr);column-gap:var(--space-xl);align-items:start}
  .rc-head{display:contents}
  .rc-art{grid-row:1 / span 2;position:sticky;top:calc(var(--topbar) + var(--space-md))}
  .rc-id{grid-column:2;padding-bottom:0}
  .rc-body{grid-column:2;margin-top:var(--space-sm)}
}

/* reflection, save, next */
.reflect{display:grid;gap:var(--space-md);padding-block:var(--space-xl);border-bottom:1px solid var(--rule)}
.reflect>*{max-width:68ch}
.reflect h2{margin:var(--space-xs) 0 0;text-wrap:balance}
.reflect .private{margin-top:var(--space-sm)}
.followup-l{display:block;margin-top:var(--space-lg);font-family:var(--serif);font-size:var(--t-small);color:var(--ink-2)}
/* how the reading was built — closed by default, inside the answer frame */
.basis{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--rule-2);max-width:68ch}
.basis>summary{display:flex;align-items:center;min-height:var(--tap);cursor:pointer;font-size:var(--t-small);color:var(--ink-2)}
.basis>summary:hover{color:var(--ink)}
.basis>summary::after{content:"+";margin-left:var(--space-xs);font-family:var(--mono);color:var(--accent)}
.basis[open]>summary::after{content:"−"}
.synthesis>.eyebrow+.sr+.synthesis-copy{margin-top:var(--space-sm)}
.basis>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.basis>p{margin:var(--space-sm) 0 0;font-size:var(--t-small);line-height:1.7;color:var(--ink-2)}
.basis>p b{color:var(--ink);font-weight:600}
.basis-meta{display:grid;gap:var(--space-xs);margin:var(--space-sm) 0}
.basis-meta div{display:grid;grid-template-columns:minmax(7.5em,auto) minmax(0,1fr);gap:var(--space-sm);font-size:var(--t-small);line-height:1.6}
.basis-meta dt{color:var(--muted)}
.basis-meta dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.basis-cards{list-style:none;margin:var(--space-sm) 0;padding:0;display:grid;gap:var(--space-sm)}
.basis-cards li{display:grid;gap:2px;padding-block:var(--space-xs);border-bottom:1px solid var(--rule-2);font-size:var(--t-small);line-height:1.6}
.basis-cards .mono{font-size:var(--t-caption);color:var(--muted)}
.basis-cards b{font-family:var(--display);font-weight:400;font-size:var(--t-body);color:var(--ink)}
.basis-cards li>span:last-child{color:var(--ink-2)}
@media (max-width:420px){.basis-meta div{grid-template-columns:1fr;gap:0}}

/* one optional way further — the reading is already complete above */
.deeper{display:grid;justify-items:start;gap:var(--space-sm);padding-block:var(--space-xl);border-bottom:1px solid var(--rule)}
.deeper>*{max-width:68ch}
.deeper-done{margin:0;font-family:var(--serif);font-size:var(--t-small);color:var(--ink-2)}
.deeper-done:empty{display:none}
.deeper-panel{display:grid;gap:var(--space-sm);width:100%}
.deeper-panel[hidden]{display:none}
.deeper-panel h2{margin:0;text-wrap:balance}
.deeper-panel h2 label{cursor:text}
.deeper-why{margin:0;color:var(--muted)}
.deeper-panel textarea{min-height:5.5em}
.deeper-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-md)}
.deeper-actions .private{margin:0;flex:1 1 16em}
.deeper-actions .link{min-height:var(--tap);font-size:var(--t-small);color:var(--ink-2)}
.keep .keep-next{display:block;margin-top:var(--space-sm);color:var(--ink-2)}
.keep .keep-next .link{min-height:var(--tap);font-size:inherit}

/* My Tarot: the same story continues — context stays in view while writing */
.continue-story{scroll-margin-top:calc(var(--topbar) + var(--space-md));display:grid;gap:var(--space-lg);margin-block:var(--space-md) var(--space-xl);padding:clamp(20px,4vw,40px);background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r-sm)}
.cs-context{display:grid;gap:var(--space-xs);align-content:start;min-width:0}
.cs-q{margin:0;font-family:var(--serif);font-size:var(--t-lead);line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.cs-lead{margin:0;font-family:var(--serif);font-size:var(--t-small);line-height:1.7;color:var(--ink-2)}
.cs-lead span,.cs-label{display:block;font-family:var(--body);font-size:var(--t-caption);color:var(--muted)}
.cs-label{margin:var(--space-xs) 0 0}
.cs-context blockquote{margin:0;padding-left:var(--space-sm);border-left:2px solid var(--accent);font-family:var(--serif);font-size:var(--t-small);line-height:1.7;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.cs-write{display:grid;gap:var(--space-xs);min-width:0}
.cs-write h2{margin:0;text-wrap:balance}
.cs-write p{margin:0}
.cs-write textarea{min-height:7em}
@media (min-width:760px){
  .continue-story{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:var(--space-2xl)}
  .cs-context{position:sticky;top:calc(var(--topbar) + var(--space-md))}
}
.mt-continue-q{display:block;margin-top:2px;font-family:var(--body);font-size:var(--t-small);color:var(--muted);overflow-wrap:anywhere}
.keep{padding-block:var(--space-2xl) var(--space-xl)}
.keep-main{max-width:640px}
.keep h2{margin:var(--space-xs) 0}
.keep .actions{margin-top:var(--space-md)}
.keep .state{min-height:1.6em;margin-top:var(--space-sm);font-size:var(--t-small);color:var(--ink-2)}
.keep-more{display:flex;flex-wrap:wrap;gap:var(--space-md);margin:var(--space-sm) 0 0}
.keep-more .link{font-size:var(--t-small);color:var(--ink-2)}
.keep .actions .link{min-height:var(--tap)}
.keep-auto{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);cursor:pointer;color:var(--ink-2);font-size:var(--t-small)}
.keep-auto input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.next-steps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg);padding-block:var(--space-xl) var(--space-md)}
.support-line{margin:0 0 var(--space-2xl);padding-top:var(--space-md);border-top:1px solid var(--rule-2);font-size:var(--t-small);color:var(--ink-2)}
.support-line .link{min-height:var(--tap);font-size:inherit}

/* Wide screens: the spread stays in a left rail; readings fill a readable right column */
@media (min-width:1100px){
  .result{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);column-gap:var(--space-2xl);align-items:start}
  .result>.res-head{grid-column:1 / -1}
  .result>.result-cards{grid-column:1;grid-row:2 / span 6;position:sticky;top:calc(var(--topbar) + var(--space-md));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md) var(--space-sm);overflow:visible;padding-block:var(--space-md)}
  .result>.result-cards:has(>div:only-child){grid-template-columns:minmax(0,200px)}
  .result>.result-cards>div{width:auto}
  .result.is-plus>.result-cards>div{width:auto}
  .result>:is(.synthesis,.plus-celestial,.individual,.reading-part,.basis,.reflect,.deeper){grid-column:2;max-width:72ch}
  .result>.continue-story{grid-column:2;max-width:72ch}
  .result>.synthesis{margin-top:var(--space-md)}
  .result .rc{display:block}
  .result .rc-head{display:block}
  .result .rc-art{display:none}
}

/* Fixed bottom navigation never covers the last line */
@media (max-width:760px){body{padding-bottom:calc(var(--tabbar) + var(--safe-b) + var(--space-md))}}
/* The reading-table glow belongs to the ritual steps only */
.rd.is-result{background:none;min-height:0}
@media (min-width:1100px){
  /* Long spreads (Celtic Cross): smaller cards, and the rail never grows taller than the screen */
  .result>.result-cards:has(>div:nth-child(7)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .result>.result-cards{max-height:calc(100svh - var(--topbar) - 2 * var(--space-md));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* ---------- first screen after sign-in (7 Oct) ---------- */
.welcome-note{margin:var(--space-md) 0 var(--space-lg);padding:var(--space-sm) var(--space-md);border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent-subtle) 55%,transparent);border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:var(--measure)}
.welcome-note b{font-weight:600;color:var(--ink)}
.welcome-note p{margin:var(--space-2xs) 0 0;color:var(--ink-2);font-size:var(--t-small)}
.wrap > .welcome-note{margin-bottom:0}
.mt-empty .lede{margin:var(--space-lg) 0 var(--space-md)}
.mt-empty .acct .link{min-height:var(--tap)}
.acct.warn{color:var(--ink-2)}

/* =====================================================================
   DISPLAY CONTROLS (7 Oct) — language + theme read as one real control,
   identical in the site header and the reading header.
   One pill, two 44px buttons, 3:1 boundary, SVG icon (no emoji glyphs).
   ===================================================================== */
.utilities,.rd-utils .prefs{display:inline-flex;align-items:center}
.prefs{display:inline-flex;align-items:stretch;border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 82%,transparent);overflow:hidden}
.prefs>button{min-width:var(--tap);min-height:var(--tap);padding:0 var(--space-sm);border:0;background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--body);font-size:var(--t-label);font-weight:500;letter-spacing:.02em;line-height:1;transition:background var(--dur-1),color var(--dur-1)}
.prefs>button+button{border-left:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
.prefs>button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.prefs>button:active{background:var(--sunken)}
.prefs>button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:var(--r-pill)}
@media (hover:hover){.prefs>button:hover{background:var(--sunken)}}
.prefs .pref-lang{min-width:52px}
.prefs .pref-theme{padding:0 13px}
.rd-top .rd-utils{gap:var(--space-xs)}
@media (max-width:360px){.prefs .pref-lang{min-width:var(--tap);padding:0 8px}}
/* theme switch: one quiet cross-fade of colours, never of layout */
.theme-shift,.theme-shift *,.theme-shift *::before,.theme-shift *::after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,fill .3s ease!important}

/* =====================================================================
   AUDIT PASS 7 Oct — touch targets & minimum text (tokens only, no geometry changes elsewhere)
   ===================================================================== */
.link{min-width:var(--tap)}
.fav{min-height:var(--tap)}
.tabs{gap:4px 6px}
.tabs button{min-width:var(--tap);padding:0 var(--space-xs)}
.tabs button:first-child{padding-left:0}
.context-clarify summary{min-height:var(--tap);display:flex;align-items:center}
.ls b{font-size:var(--t-label)}
.nb small,.chl .st{font-size:var(--t-caption)}
/* hotspot numbers stay 34px visually; the hit area is 44px */
.hs .dot::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.acct-link{min-width:var(--tap);justify-content:center}
/* account line: two short rows, separators drawn by CSS (no stray "·" when a row wraps) */
.acct .sep::before,.acct-plan>span+a::before{content:"·";display:inline-block;margin-right:10px;color:var(--muted);text-decoration:none}
.acct-plan{margin-top:2px}
.acct-mail{overflow-wrap:anywhere}
.tl-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin:var(--space-md) 0 0}

/* My Tarot reads like a personal journal. Content appears only when a real record exists. */
.mt-journal{max-width:1120px;padding-top:var(--space-xl)}
.mt-intro{position:relative;max-width:780px;padding:var(--space-sm) 0 var(--space-xl)}
.mt-intro>.eyebrow{display:block;color:var(--accent);font-size:var(--t-caption);letter-spacing:.1em}
.mt-intro h1{font-family:var(--serif);font-size:var(--t-h1);font-weight:400;letter-spacing:-.01em;line-height:var(--lh-head);text-wrap:balance;margin:var(--space-sm) 0 var(--space-md)}
.mt-intro-lede{font-family:var(--serif);font-size:var(--t-lead);line-height:1.65;color:var(--ink-2);max-width:45ch;margin:0 0 var(--space-lg)}
.mt-intro .acct{line-height:1.5}
.mt-feature{position:relative;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1fr);align-items:center;gap:clamp(32px,7vw,96px);padding:var(--space-xl) clamp(24px,5vw,72px);min-height:390px;overflow:hidden;background:var(--surface);border:1px solid var(--rule-2)}
.mt-feature::before{content:"";position:absolute;inset:16px;pointer-events:none;border:1px solid color-mix(in srgb,var(--gold) 28%,transparent)}
.mt-feature-art{position:relative;z-index:1;display:block;width:min(100%,214px);justify-self:center;transform:rotate(-4deg);transition:transform var(--motion-card) var(--ease-card)}
.mt-feature-art:hover,.mt-feature-art:focus-visible{transform:translateY(-5px) rotate(-2deg)}
.mt-feature-art .tc{display:block;width:100%;--w:100%}
.mt-feature-art .tc img{display:block;width:100%;height:auto}
.mt-feature-copy{position:relative;z-index:1;max-width:48ch}
.mt-feature-copy .eyebrow{color:var(--accent);letter-spacing:.1em}
.mt-feature-copy h2{font-family:var(--serif);font-size:var(--t-h1);font-weight:400;line-height:1.18;letter-spacing:-.03em;margin:var(--space-sm) 0 var(--space-2xs)}
.mt-feature-date{font-family:var(--mono);font-size:var(--t-caption);color:var(--muted);margin:0}
.mt-feature-text{font-family:var(--serif);font-size:var(--t-lead);line-height:1.6;color:var(--ink-2);margin:var(--space-lg) 0 var(--space-md);overflow-wrap:anywhere}
.mt-feature-mark{position:absolute;right:5%;bottom:-.24em;font-family:var(--serif);font-size:clamp(8rem,21vw,19rem);line-height:1;color:var(--gold);opacity:.09;pointer-events:none}
.mt-feature-learning .mt-feature-copy p{color:var(--ink-2);margin:var(--space-md) 0}
.mt-empty-journal{min-height:calc(100svh - var(--topbar) - var(--space-2xl))}
.mt-empty-journal .mt-intro{padding-bottom:var(--space-md)}
.mt-empty-body{display:grid;grid-template-columns:minmax(130px,220px) minmax(0,1fr);align-items:center;gap:clamp(32px,7vw,100px);padding:var(--space-lg) clamp(20px,5vw,64px);border-top:1px solid var(--rule)}
.mt-empty-art{width:min(100%,174px);justify-self:center;transform:rotate(-5deg)}
.mt-empty-art .tc{display:block;width:100%;--w:100%}
.mt-empty-caption{font-family:var(--serif);font-size:var(--t-lead);margin:0 0 var(--space-md)}
.mt-empty-body .actions{display:flex;align-items:center;gap:var(--space-sm) var(--space-lg);flex-wrap:wrap}
.mt-journal .mt-sec{padding:var(--space-2xl) 0;border-bottom:1px solid var(--rule)}
.mt-journal .mt-sec:last-of-type{border-bottom:0}
.mt-journal .mt-h{font-weight:400;font-size:var(--t-h2);margin:var(--space-xs) 0 var(--space-lg)}
.mt-pattern-layout{display:grid;grid-template-columns:minmax(140px,.45fr) minmax(0,1fr);gap:var(--space-xl)}
.mt-pattern-count{display:flex;align-items:baseline;gap:var(--space-sm);margin:0;color:var(--ink-2)}
.mt-pattern-count strong{font-family:var(--serif);font-weight:400;line-height:1;font-size:clamp(4rem,8vw,7rem);color:var(--ink)}
.mt-pattern-count span{font-size:var(--t-small);line-height:1.5}
.mt-topic-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mt-topic-list li{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) 0;border-bottom:1px solid var(--rule-2)}
.mt-topic-list li b{font-family:var(--mono);font-size:var(--t-small);font-weight:400;color:var(--muted)}
.mt-repeat{line-height:1.7;color:var(--ink-2);margin:var(--space-md) 0 0}
.mt-repeat small{font-family:var(--mono);color:var(--muted)}
.mt-atlas{position:relative}
.mt-atlas>.eyebrow{color:var(--gold)}
.mt-atlas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,64px);margin-top:var(--space-lg)}
.mt-atlas-grid>div{min-width:0;border-top:1px solid var(--rule-2)}
.mt-atlas-grid h3{font-family:var(--serif);font-size:var(--t-lead);font-weight:400;margin:var(--space-md) 0}
.mt-atlas-grid ol,.mt-atlas-grid ul{list-style:none;margin:0;padding:0}
.mt-atlas-grid li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid var(--rule-2);line-height:1.5}
.mt-atlas-grid li a{overflow-wrap:anywhere}.mt-atlas-grid li span,.mt-atlas-grid li b{font-family:var(--mono);font-size:var(--t-small);font-weight:400;color:var(--muted)}
.mt-atlas-decan{max-width:70ch;margin:var(--space-lg) 0;padding:var(--space-md);border-inline-start:2px solid var(--gold);background:var(--surface);line-height:1.7}
.mt-atlas>.fine{margin-top:var(--space-lg)}
.mt-history-search{display:block;max-width:460px;margin:0 0 var(--space-md);font-size:var(--t-small);color:var(--ink-2)}
.mt-history-search input{display:block;width:100%;min-height:44px;margin-top:var(--space-xs);padding:var(--space-xs) var(--space-sm);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit}
.mt-history-search input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:650px){.mt-atlas-grid{grid-template-columns:1fr;gap:var(--space-md)}}
.mt-continue-links{border-top:1px solid var(--rule)}
.mt-continue-links a{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);min-height:64px;padding:var(--space-sm) 0;border-bottom:1px solid var(--rule-2);font-family:var(--serif);font-size:var(--t-lead);text-decoration:none}
.mt-continue-links a:hover span,.mt-continue-links a:focus-visible span{color:var(--accent)}
.mt-continue-links b{font-family:var(--body);font-weight:400;color:var(--accent)}
.mt-learning{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-lg)}
.mt-learning .ink2{margin:0 0 var(--space-md)}
.mt-learning-count{display:flex;align-items:baseline;gap:var(--space-xs);margin:0;font-family:var(--mono);color:var(--muted)}
.mt-learning-count strong{font-family:var(--serif);font-size:clamp(4rem,8vw,7rem);font-weight:400;line-height:1;color:var(--ink)}
.mt-journal .tl .qq{overflow-wrap:anywhere}
@media (min-width:761px) and (max-width:1050px){
  .mt-feature{grid-template-columns:minmax(150px,.55fr) minmax(0,1fr);min-height:340px;padding:var(--space-lg)}
  .mt-feature-art{width:min(100%,165px)}
  .mt-feature-mark{font-size:10rem}
}
@media (max-width:760px){
  .mt-journal{padding-top:var(--space-lg)}
  .mt-intro{padding:0 0 var(--space-lg)}
  .mt-intro-lede{font-size:1rem;margin-bottom:var(--space-md)}
  .mt-feature{grid-template-columns:minmax(0,1fr);gap:var(--space-md);min-height:0;padding:var(--space-lg) var(--space-md)}
  .mt-feature::before{inset:9px}
  .mt-feature-art{width:min(42vw,150px)}
  .mt-feature-copy h2{font-size:var(--t-h1)}
  .mt-feature-text{margin:var(--space-md) 0}
  .mt-feature-mark{font-size:8rem;right:0;bottom:10%}
  .mt-empty-body{grid-template-columns:1fr;gap:var(--space-sm);padding:var(--space-md) 0}
  .mt-empty-art{width:min(30vw,104px)}
  .mt-empty-body .actions{align-items:flex-start;flex-direction:column}
  .mt-journal .mt-sec{padding:var(--space-xl) 0}
  .mt-pattern-layout{grid-template-columns:1fr;gap:var(--space-lg)}
  .mt-learning-count strong{font-size:3.5rem}
  .mt-journal .tl li a{grid-template-columns:minmax(0,1fr) auto}
  .mt-journal .tl .dt{grid-column:1/-1}
  .mt-journal .tl .qq{grid-column:1}
  .mt-journal .tl .mini{grid-column:2;grid-row:2}
}
@media (max-width:380px){.mt-learning{grid-template-columns:1fr}.mt-learning-count strong{font-size:3rem}}
@media (prefers-reduced-motion:reduce){.mt-feature-art{transition:none}.mt-feature-art:hover,.mt-feature-art:focus-visible{transform:rotate(-4deg)}}
/* Pick screen: the message under the slots has a FIXED box (one-line title + two-line hint),
   so changing copy ("move through the deck…" → "3 to go" → "That's all") never re-centres
   the head and never moves the slots. Root cause of the "screen jumps when I pick" report. */
/* Thai tone marks sit above the em box: a one-line title needs a 1.5 line box, never 1.28, or overflow:hidden cuts them (ใบที่ → ไบที). */
.pick-msg{min-height:0;height:calc(var(--t-h3) * var(--lh-title) + var(--space-2xs) + 2 * 1.6 * var(--t-small))}
/* 9 Oct root cause of the clipped "ใบที่ 3 · แนวโน้ม": overflow:hidden on the title AND on its box.
   Noto Serif Thai's stacked marks paint ~.06em above a 1.5 line box, so a vertical clip cut them.
   Clip only the inline axis (overflow-x:clip does not force overflow-y to hidden, unlike hidden),
   so long titles still end in "…" while the marks paint freely above the line. */
.pick-msg .pick-title{white-space:nowrap;line-height:var(--lh-title);overflow-x:clip;overflow-y:visible;text-overflow:ellipsis}
.pick-msg p{line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Short screens: one title line only. This must come AFTER the rule above — the earlier
   `.pick-msg p{display:none}` in the short-screen block lost to `display:-webkit-box`, so the
   hint rendered half-cut under a box only one line tall (1024×600, 150% zoom). */
@media (max-height:600px){.pick-msg{height:calc(var(--t-lead) * var(--lh-title))}.pick-msg p{display:none}}

/* =====================================================================
   AUTH SHEET (9 Oct, refined) — compact, editorial, provider buttons per their brand rules.
   Order: title → why → LINE / Google (equal size and weight) → email (one row) → guest → one legal line.
   Brand rules applied (sources in docs/AUTH-LEGAL-AUDIT-2026-10-09.md):
   · LINE: fill #06C755 only, white icon/text, separator #000 at 8%, hover = 10% black overlay,
     press = 30%. The colour cannot be changed, so its weight is balanced by size, not by tint.
   · Google: light #FFF / stroke #747775 / text #1F1F1F; dark #131314 / #8E918F / #E3E3E3;
     full-colour G; at least as prominent as the other providers.
   ===================================================================== */
.sheet .panel.auth-panel{width:min(100%,456px);padding:var(--space-sm) clamp(20px,5vw,36px) calc(var(--space-md) + var(--safe-b))}
@media (min-width:761px){.sheet .panel.auth-panel{padding-top:var(--space-lg);padding-bottom:var(--space-lg);max-height:min(calc(100dvh - 32px),760px)}.sheet .panel.auth-panel .grab{display:none}}
.auth-panel .ph{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--space-sm);margin:0 0 var(--space-2xs)}
.auth-panel .ph h2{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:var(--lh-title);margin:0;padding-top:2px;text-wrap:balance}
.auth-star{flex:none;width:15px;height:15px;fill:var(--gold);opacity:.9}
.auth-panel .ph .x{width:var(--tap);height:var(--tap);margin:-8px -12px 0 0;border-radius:50%;border:0;background:transparent;color:var(--ink-2);font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.auth-panel .ph .x:hover{background:var(--sunken);color:var(--ink)}
.auth-panel .ph .x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auth-body{display:grid;gap:var(--space-sm);min-width:0}
.auth-why{margin:0 0 var(--space-2xs);color:var(--ink-2);font-size:var(--t-body);line-height:1.65}
.auth-local{display:block;margin-top:var(--space-2xs);font-size:var(--t-label);color:var(--accent)}
.auth-actions{display:grid;gap:var(--space-sm);min-width:0}
.auth-actions>.btn{width:100%;min-height:48px}
.auth-password-open{justify-self:center;margin-top:var(--space-xs)}
.auth-password-form{display:grid;gap:var(--space-sm)}
.auth-password-form label{display:grid;gap:var(--space-2xs);font-size:var(--t-small);font-weight:600}
.auth-password-form input{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--sunken);color:var(--ink);font:inherit}
.auth-password-form .btn{width:100%;min-height:48px}

/* Provider buttons: one shape, one height, one type size. */
.auth-providers{display:grid;gap:10px}
.auth-provider{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:0 16px;border-radius:var(--r-md);font:inherit;font-size:var(--t-button);font-weight:500;line-height:1.3;cursor:pointer;transition:box-shadow var(--dur-1),background-color var(--dur-1)}
.auth-provider .prov-label{min-width:0}
.auth-provider:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.auth-provider[aria-busy="true"]{cursor:progress}
.btn-line{border:0;background:#06C755;color:#fff;justify-content:flex-start;padding-left:10px}
.btn-line .prov-label{flex:1;text-align:center;padding-right:30px}
.btn-line .line-icon{width:30px;height:30px;flex:none}
.btn-line .prov-sep{align-self:stretch;width:1px;margin:9px 0;background:rgba(0,0,0,.08)}
.btn-line:hover{box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.1)}
.btn-line:active,.btn-line[aria-busy="true"]{box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.3)}
.btn-google{border:1px solid #747775;background:#fff;color:#1F1F1F}
.btn-google .g-logo{width:20px;height:20px;flex:none}
.btn-google:hover{box-shadow:0 1px 3px rgba(31,31,31,.18)}
.btn-google:active,.btn-google[aria-busy="true"]{background:#F2F2F2}
:root[data-theme="dark"] .btn-google{background:#131314;border-color:#8E918F;color:#E3E3E3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-google{background:#131314;border-color:#8E918F;color:#E3E3E3}}
:root[data-theme="dark"] .btn-google:hover{box-shadow:0 0 0 1px #8E918F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-google:hover{box-shadow:0 0 0 1px #8E918F}}
.auth-unavailable{margin:0;padding:var(--space-sm) var(--space-md);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--sunken);color:var(--ink-2);font-size:var(--t-small);line-height:1.6;text-align:center;text-wrap:pretty}
.auth-hint{margin:-2px 0 0;font-size:var(--t-label);line-height:1.55;color:var(--muted)}


/* Email: one row when there is room (input grows, button keeps its label), stacked on phones. */

.auth-guest,.auth-actions .later{justify-self:center;min-height:var(--tap);font-size:var(--t-small);color:var(--ink-2)}
.auth-foot{display:grid;gap:var(--space-2xs);padding-top:var(--space-sm);border-top:1px solid var(--rule-2)}
.auth-foot p{margin:0;font-size:var(--t-label);line-height:1.6;color:var(--muted)}
.auth-foot a{color:var(--ink-2);text-underline-offset:.22em;white-space:nowrap}
.auth-foot .auth-status{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.01em}
.auth-error{margin:0}
@media (max-width:760px){
  .sheet .panel.auth-panel{width:100%;border-radius:20px 20px 0 0}
}
/* Short windows / 200% zoom: drop the decorative and secondary lines before anything scrolls. */
@media (max-height:620px){.auth-hint,.auth-foot .auth-status,.auth-star{display:none}.auth-why{line-height:1.5}}

/* Any open sheet: the page behind does not scroll (scroll chaining on iOS/Android). */
html:has(#sheet.on){overflow:hidden}
/* On-screen keyboard: core.js writes the covered height into --kb; the sheet rises above it. */
@media (max-width:760px){.sheet .panel{margin-bottom:var(--kb,0px);max-height:calc(100dvh - var(--kb,0px) - 12px)}}

/* =====================================================================
   LEARNING MAP + TOOLS (7 Oct): 3 stages, step-by-step or full index
   ===================================================================== */
.learn-map .next-step{margin-top:20px;display:grid;gap:10px;justify-items:start}
.learn-map .next-step .mono{font-size:.8rem;color:var(--muted);margin:0}
.lmap ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;border-top:1px solid var(--rule)}
.lmap li{position:relative}
.lmap li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--gold)}
.lmap li.full::before{width:100%}
.lmap li.cur::before{width:40%;background:var(--accent)}
.lmap a{display:grid;gap:4px;padding:16px clamp(8px,2vw,24px) 18px 0;text-decoration:none;min-height:var(--tap)}
.lmap .lm-k{font-family:var(--display);font-size:clamp(1.4rem,3vw,2rem);line-height:1;color:var(--gold)}
.lmap .lm-t{font-family:var(--serif);font-size:clamp(.98rem,1.6vw,1.15rem);line-height:1.35;color:var(--ink)}
.lmap .lm-m{font-family:var(--mono);font-size:.72rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px}
.lmap .lm-m b{font-weight:500;color:var(--accent)}
.lmap a:hover .lm-t{color:var(--accent)}
.lmode{display:inline-flex;gap:4px;margin:clamp(24px,4vh,40px) 0 0;padding:4px;border:1px solid var(--rule);border-radius:999px}
.lmode button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:inherit;font-size:.92rem;cursor:pointer}
.lmode button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.lmode button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-sub{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:22px 0 4px}
.tl-list{display:grid}
.tl-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 0;min-height:var(--tap);border-bottom:1px solid var(--rule-2);text-decoration:none}
.tl-item .tl-n{font-family:var(--serif);font-size:1.02rem;color:var(--ink)}
.tl-item .tl-why{grid-column:1;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.tl-item .ar{grid-row:1/span 2;grid-column:2;color:var(--muted);transition:transform var(--motion-micro,160ms) ease}
.tl-item:hover .tl-n{color:var(--accent)}.tl-item:hover .ar{transform:translateX(3px);color:var(--accent)}
.lx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);padding:clamp(28px,5vh,48px) 0 clamp(56px,8vh,96px)}
.lx-h{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:0;display:grid;gap:2px}
.lx-h span{font-family:var(--display);color:var(--gold);font-size:1rem}
.lx-h small{font-family:var(--body,inherit);font-size:.86rem;color:var(--muted)}
.lx .chl a{min-height:44px;padding:8px 0}.lx .chl .tt{font-size:.96rem}
@media (max-width:860px){.lx{grid-template-columns:1fr}}
@media (max-width:520px){
  .lmap a{padding-right:12px}
  .lmap .lm-m{font-size:.68rem;gap:2px 6px}
  .lmode{display:flex}.lmode button{flex:1}
}
/* tool pages */
.tool-wrap{padding-top:clamp(16px,3vh,32px);padding-bottom:clamp(48px,8vh,96px)}
.tool-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:.88rem;color:var(--muted)}
.tool-crumb>span:last-child{font-family:var(--mono);font-size:.74rem}
.tool-why{margin:6px 0 0;max-width:60ch;color:var(--ink-2);font-family:var(--serif);font-size:1.02rem}
.tool-wrap>.tool-page{margin-top:clamp(12px,2vh,24px)}
.tool-loading{color:var(--muted);padding:40px 0;min-height:40vh}
.tool-pn{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:clamp(40px,7vh,72px);padding-top:20px;border-top:1px solid var(--rule)}
.tool-pn a{display:grid;gap:2px;min-height:var(--tap);align-content:center;text-decoration:none;font-family:var(--serif)}
.tool-pn a small{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.tool-pn a:last-child{text-align:right}
.tool-pn .tool-map{font-family:inherit;font-size:.88rem;color:var(--muted);text-align:center}
@media (max-width:520px){.tool-pn{grid-template-columns:1fr 1fr}.tool-pn .tool-map{grid-column:1/-1;grid-row:2}}

/* Position labels under the slots are the only place the spread's meaning is shown while
   choosing; keep them unless the screen is truly short (9 Oct: they were hidden at ≤600px,
   i.e. on every 1024×600 netbook and at 150% zoom on a 1440×900 laptop). */
/* (9 Oct round 3) labels are no longer hidden on short screens; they go to one line instead */

/* Result rail, three-card spread: the third card sat alone under the first, so the rail read as
   an unfinished grid. Centre it under the pair (same size, no new layout). */
@media (min-width:1100px){
  .result>.result-cards>div:nth-child(3):last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - var(--space-sm) / 2)}
}

/* =====================================================================
   9 Oct (round 2) — every slot of the spread is visible while choosing. No sideways scrolling.
   Root causes of "the Celtic Cross labels are cut in half and I have to scroll":
   (1) slot width came only from the viewport (7vw / 12svh), never from the number of
       positions, so 10 slots were wider than the column and the row scrolled;
   (2) the row is a scroll container inside a flex column (.pick-head) and flex items shrink by
       default — a scroll container's minimum height is 0, so when the head was tight the row
       was squeezed shorter than its content and cut the labels horizontally.
   Now: the row is a size container, each slot's width = min(the viewport cap, the share of the
   row that n slots need), long spreads wrap to two rows of five on narrow screens, and head
   items never shrink. */
.pick-head>*{flex-shrink:0}
.pick .slots{container-type:inline-size;width:100%;--gap:clamp(8px,1.6vw,22px);gap:12px var(--gap);flex-wrap:wrap;justify-content:center;overflow:visible;-webkit-mask-image:none;mask-image:none}
.pick .slot{--w-cap:clamp(48px,min(12vw,11svh),104px)}
@media (min-width:1024px){.pick .slot{--w-cap:clamp(72px,min(7vw,12svh),112px)}}
@media (min-width:1024px) and (max-height:760px){.pick .slot{--w-cap:clamp(44px,8.5svh,78px)}}
@media (max-height:600px){.pick .slot{--w-cap:clamp(34px,9svh,48px)}}
.pick .slot{--per:var(--n,3);--w:min(var(--w-cap),calc((100cqi - (var(--per) - 1) * var(--gap)) / var(--per)));width:var(--w);flex:none}
/* labels may use half of each neighbouring gap and wrap to two lines; they never widen the slot */
.pick .slot .lb{max-width:none;width:calc(var(--w) + var(--gap) - 4px);margin-inline:calc((var(--gap) - 4px) / -2);text-align:center;overflow-wrap:break-word;text-wrap:balance}
/* phones: a long spread (Celtic Cross) sits as two even rows of five, never a sideways strip */
@media (max-width:600px) and (orientation:portrait){.pick .slots.many{display:grid;grid-template-columns:repeat(5,auto);justify-content:center}.pick .slots.many .slot{--per:5;--w-cap:clamp(34px,min(13vw,7.5svh),64px)}.pick .slots.many .lb{font-size:.72rem;line-height:1.4}}

/* Sign-in sheet, centred (9 Oct, round 2) — the common pattern for sign-in dialogs: a centred
   title, reason, divider and fine print over full-width actions. Long reading text (the legal
   reader below) stays left-aligned for readability. The close button sits in the corner and does
   not push the title off-centre. */
.auth-panel .ph{position:relative;display:block;text-align:center;padding:0 var(--tap)}
.auth-panel .ph h2{justify-content:center}
.auth-panel .ph .x{position:absolute;top:0;right:0;margin:-8px -12px 0 0}
.auth-why,.auth-hint,.auth-foot{text-align:center}
.auth-why{margin-inline:auto;max-width:44ch;text-wrap:balance}
.auth-hint{text-wrap:balance}
.auth-foot p{text-wrap:balance}
.tracking-banner{position:fixed;z-index:10000;inset:auto max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));max-width:720px;margin-inline:auto;padding:18px 20px;background:var(--elevated);border:1px solid var(--rule);border-radius:16px;box-shadow:0 12px 40px #0003;color:var(--ink)}
.tracking-banner p,.tracking-dialog p{margin:0 0 14px;line-height:1.6}
.tracking-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.tracking-actions button{min-height:44px;padding:8px 15px;border:1px solid var(--rule);border-radius:10px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.tracking-actions .tracking-primary{background:var(--accent);border-color:var(--accent);color:var(--elevated)}
.tracking-actions button:hover{filter:brightness(.94)}
.tracking-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tracking-dialog{width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;background:var(--elevated);border:1px solid var(--rule);border-radius:16px;color:var(--ink);font:inherit}
.tracking-dialog::backdrop{background:#0008}
.tracking-dialog h2{margin:0 0 12px;font-family:var(--serif);font-size:var(--t-h3);font-weight:500}
.tracking-choice{display:flex;align-items:flex-start;gap:12px;margin:10px 0;padding:12px;border:1px solid var(--rule);border-radius:10px;cursor:pointer}
.tracking-choice input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.tracking-links{font-size:var(--t-small)}
@media(max-width:560px){.tracking-actions button{flex:1 1 auto}.tracking-dialog{padding:20px}}

/* In-sheet legal reader */
.legal-reader{display:grid;gap:var(--space-xs);text-align:left}
.legal-reader .lg-back{justify-self:start;min-height:var(--tap);font-size:var(--t-small);color:var(--ink-2)}
.legal-reader .lg-back:last-child{margin-top:var(--space-sm)}
.lg-title{margin:0;font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:var(--lh-title)}
.lg-title:focus{outline:none}
.lg-meta{margin:0;font-size:var(--t-label);color:var(--muted)}
.lg-body{font-size:var(--t-small);line-height:1.7;color:var(--ink)}
html:lang(th) .lg-body [lang="en"],html:lang(en) .lg-body [lang="th"],html:lang(th) .lg-title [lang="en"],html:lang(en) .lg-title [lang="th"]{display:none}
.lg-body section{padding-top:var(--space-sm)}
.lg-body h3{margin:var(--space-sm) 0 6px;font-family:var(--serif);font-weight:500;font-size:var(--t-lead);line-height:var(--lh-title)}
.lg-body h3 + div h3,.lg-body div > h3{font-size:var(--t-body);margin-top:var(--space-sm)}
.lg-body p{margin:0 0 10px}
.lg-body ul{margin:0 0 10px;padding-left:1.2em}.lg-body li{margin:3px 0}
.lg-body .table{overflow-x:auto;margin:8px 0 12px;border:1px solid var(--rule-2);border-radius:10px}
.lg-body table{width:100%;border-collapse:collapse;font-size:var(--t-label);line-height:1.55}
.lg-body th,.lg-body td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--rule-2)}
.lg-body th{font-weight:500;color:var(--ink-2);background:var(--sunken)}
.lg-body tr:last-child td{border-bottom:0}
.lg-body code{font-family:var(--mono);font-size:.85em;background:var(--sunken);padding:1px 4px;border-radius:4px;overflow-wrap:anywhere}
.lg-body mark.todo{background:var(--gold-subtle);color:var(--ink);padding:1px 4px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lg-body mark.todo::before{content:"⚑ ";color:var(--gold)}
.lg-body .note{border-left:2px solid var(--gold);padding-left:12px;color:var(--ink-2)}
.lg-foot{margin:var(--space-xs) 0 0;font-size:var(--t-small)}
/* the way back stays in reach while reading a long document */
.legal-reader>.lg-back:first-child{position:sticky;top:calc(-1 * var(--space-sm));z-index:1;justify-self:stretch;text-align:left;margin:0 calc(-1 * clamp(20px,5vw,36px));padding:0 clamp(20px,5vw,36px);background:var(--elevated);border-bottom:1px solid transparent}
/* Round 3 (9 Oct): nothing on the choose screen may need scrolling.
   - The outer labels of a full row may use half a gap; give the row that half-gap so it never
     overflows by a few pixels.
   - Small phones with a long spread: the two rows of slots and the deck share the height, so the
     deck gives up a little room (it measures itself, see mountWheel) and the slots size from the
     height too. Checked at 320×568 → 430×932. */
.pick .slots{padding-inline:calc(var(--gap) / 2)}
@media (max-width:600px) and (orientation:portrait){
  .pick .slots.many .slot{--w-cap:clamp(28px,min(13vw,5.6svh),64px)}
  .pick:has(.slots.many) .card-fan-stage{flex-basis:clamp(170px,33svh,400px);height:clamp(170px,33svh,400px)}
  .pick:has(.slots.many) .pick-head{gap:var(--space-xs)}
}
/* Round 3, root cause of "the labels are cut and I have to scroll" on laptops (1280×800,
   1366×768, a 1440×900 browser window): the slot size was a guess from the viewport (12svh),
   while the head's real height is what is left after the top bar and the deck. Between 760 and
   ~820 px tall the guess was 5–26 px too big, so the head scrolled and the labels sat under its
   bottom edge. Now the head is a size container and each slot also fits the head's HEIGHT:
   ~250 px are reserved for the question (2 lines), labels (2 lines), the title + hint and gaps;
   the rest is the card. Two-row spreads on phones split that height between the rows. */
.pick-head{container-type:size}
.pick .slot{--w-h:calc((100cqh - 250px) / 1.757);--w:max(26px,min(var(--w-cap),var(--w-h),calc((100cqi - (var(--per) - 1) * var(--gap)) / var(--per))))}
@media (max-width:600px) and (orientation:portrait){.pick .slots.many .slot{--w-h:calc((100cqh - 296px) / 2 / 1.757)}}
@media (max-height:600px){.pick .slot{--w-h:calc((100cqh - 150px) / 1.757)}}

/* Short screens (landscape phones, 200 % zoom) and long spreads on small phones: every position
   label stays visible on ONE line (full name remains in the slot's aria-label and in the title
   under the slots), and the question keeps to one line, so the whole head fits without scrolling. */
@media (max-height:600px){.pick .slot .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}}
@media (max-width:600px) and (orientation:portrait){
  .pick .slots.many .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;font-size:.7rem}
  .pick:has(.slots.many) .pick-q{-webkit-line-clamp:1;font-size:var(--t-body)}
  .pick .slots.many .slot{--w-h:calc((100cqh - 236px) / 2 / 1.757)}
  .pick .slots.many{row-gap:8px}
}
@media (max-height:600px){.pick .slot{--w-h:calc((100cqh - 132px) / 1.757)}}
/* Landscape phones (≤ 500 px tall): the question was just typed on the previous step and is shown
   again on the result, so here it gives its line to the spread; the deck keeps its minimum. */
@media (max-height:500px){
  .pick .pick-q{display:none}
  .pick .slot{--w-h:calc((100cqh - 96px) / 1.757)}
  .pick .slots.many .slot{--w-h:calc((100cqh - 120px) / 2 / 1.757)}
  .pick-head{padding-block:2px;gap:6px}
  .card-fan-stage,.pick:has(.slots.many) .card-fan-stage{flex-basis:clamp(150px,44svh,240px);height:clamp(150px,44svh,240px)}
}

/* 320 px-tall landscape: drop the hint line too */
@media (max-height:340px){.card-fan-stage,.pick:has(.slots.many) .card-fan-stage{flex-basis:140px;height:140px}.pick-msg{height:auto}.pick .slot{--w-h:calc((100cqh - 70px) / 1.757)}}
/* Balance (round 3): the spread you are building matters as much as the deck you pick from.
   On laptops/desktops the deck gives the head a little more height, and the reserve matches the
   measured chrome (question 1–2 lines 31–62 px, label 17–34 px, title + hint 90 px, gaps 48 px). */
@media (min-width:1024px){.card-fan-stage{flex-basis:clamp(240px,40svh,520px);height:clamp(240px,40svh,520px)}}
@media (min-height:601px){.pick .slot{--w-h:calc((100cqh - 224px) / 1.757)}}
/* Where a name cannot fit in full (10 slots on a phone, landscape phones), show just the number —
   never a cut word like "3 · สิ…". The full name of the position being chosen is the title right
   below the slots, and every slot carries it in its accessible label. */
@media (max-width:600px) and (orientation:portrait){.pick .slots.many .lb-n{display:none}.pick .slots.many .lb{text-overflow:clip;font-size:var(--t-caption)}}
@media (max-height:500px){.pick .lb-n{display:none}.pick .slot .lb{text-overflow:clip}}

/* ---------- Account identity & Plus (10 Oct 2026) ---------- */
.avatar{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sunken);color:var(--ink);font-family:var(--serif);font-size:.95rem;line-height:1;border:1px solid var(--rule)}
.avatar.is-plus{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--gold)}
.acct-link .avatar{width:30px;height:30px}
.acct-link{gap:8px}
@media (max-width:1100px){.acct-link .acct-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.tab-avatar{display:grid;place-items:center;height:24px}
.tab-avatar .avatar{width:24px;height:24px;font-size:.8rem}
.plus-badge{display:inline-flex;align-items:center;padding:1px 8px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:var(--gold-subtle);color:var(--gold);font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.04em;line-height:1.6;vertical-align:middle}
.acct-who{align-items:center}
.acct-who .avatar{width:24px;height:24px;font-size:.8rem}
.mt-plus .fine{margin:0 0 var(--space-sm)}
.mt-plus.is-ended .actions{margin-top:var(--space-sm)}
.acct-card{display:flex;gap:var(--space-md);align-items:flex-start;margin-bottom:var(--space-md)}
.acct-card>.avatar{width:52px;height:52px;font-size:1.5rem}
.acct-card-body{min-width:0;flex:1}
.acct-name{margin:0 0 2px;font-family:var(--serif);font-size:var(--t-h3);line-height:var(--lh-title);overflow-wrap:anywhere}
.acct-card .fine{margin:0 0 var(--space-2xs)}
.name-form{display:grid;gap:var(--space-2xs)}
.name-form label,.delete-form label{font-size:var(--t-small);color:var(--ink-2)}
.name-row{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}
.name-row .field{flex:1 1 220px;min-width:0;min-height:44px;font-size:max(16px,1rem)}
.name-row .btn{min-height:44px}
.name-form .field-error,.delete-form .field-error{margin:0}
.acct-page #login-methods .actions{margin:var(--space-2xs) 0}
.data-list{margin:0 0 var(--space-sm)}
.data-list li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.danger-zone{border-top:1px solid color-mix(in srgb,var(--caution) 40%,var(--rule))}
.danger-zone .mt-h{color:var(--caution)}
.delete-form{display:grid;gap:var(--space-2xs);max-width:560px}
.btn.danger{background:var(--caution);border:1px solid var(--caution);color:var(--surface)}
.btn.danger:disabled{background:transparent;color:var(--caution);opacity:.6;cursor:not-allowed}
.mt-sec[id]{scroll-margin-top:calc(var(--tap) + 32px)}

/* ---------- Support entry (12 Oct 2026) ----------
   Utility-level, quieter than the nav and far quieter than the primary "อ่านไพ่" CTA: no fill, muted ink,
   a heart (not a sun — the sun belongs to the theme toggle's neighbourhood and to the monthly indicator). */
.sup-link{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:0 10px;margin:0 2px 0 6px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font:inherit;font-size:var(--t-label);white-space:nowrap;cursor:pointer;justify-content:center}
.sup-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;flex:none}
.sup-link:hover{color:var(--accent)}
.sup-link:hover svg{fill:color-mix(in srgb,var(--accent) 14%,transparent)}
.sup-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1100px){.sup-link .sup-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.sup-link{padding:0}}
@media (max-width:860px){.sup-link{margin-left:auto;margin-right:0}.sup-link+.acct-link{margin-left:6px}}
@media (max-width:340px){.sup-link{min-width:38px}}
body.immersive .sup-link{display:none}
/* LINE Official Account: a quiet monochrome glyph beside Support, same weight as its neighbours */
.line-link{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--tap);height:var(--tap);border-radius:var(--r-pill);color:var(--ink-2);text-decoration:none;transition:color .2s}
.line-link svg{width:21px;height:20px;fill:currentColor;flex:none}
.line-link:hover{color:var(--accent)}
.line-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sup-link+.line-link{margin-left:-6px}
@media (max-width:860px){.line-link+.acct-link{margin-left:2px}}
@media (max-width:340px){.sup-link+.line-link{margin-left:-8px}.line-link+.acct-link{margin-left:-4px}}
body.immersive .line-link{display:none}
.support-sun-wrap:empty{display:none}
.sheet .panel.support-panel{width:min(calc(100% - 32px),680px);max-height:calc(100dvh - 32px);padding:clamp(24px,4vw,38px);border:1px solid var(--rule);border-radius:18px;background:var(--elevated);color:var(--ink)}
.support-panel .grab{display:none}
.support-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.support-head>div{min-width:0}
.support-eyebrow{display:block;color:var(--ink-2);font-size:var(--t-label-lg);line-height:1.5}
.panel.support-panel h2{margin:4px 0 0;font-family:var(--serif);font-size:clamp(1.8rem,2.5vw,2.3rem);font-weight:400;line-height:1.5;letter-spacing:0;text-wrap:balance}
.support-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:1.8rem;line-height:1;cursor:pointer}
.support-close:hover{border-color:var(--ink-2);color:var(--ink);background:var(--sunken)}
.support-close:focus-visible,.support-amount:focus-visible,.support-go:focus-visible,.support-why summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.support-viz{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:18px}
.support-sun-icon{width:30px;height:30px;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round}
.support-sun-icon .full{fill:var(--gold)}
.support-track{display:block;width:100%;height:16px;overflow:visible}
.support-track .track-base{stroke:var(--ink-2);stroke-width:2;opacity:.35;stroke-linecap:round}
.support-track .track-tick{stroke:var(--ink-2);stroke-width:1.3;opacity:.6;stroke-linecap:round}
.support-track .track-end{fill:var(--elevated);stroke:var(--gold);stroke-width:1.3}
.support-track .track-end.full{fill:var(--gold)}
.support-track .track-fill{stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.support-track .track-dot{fill:var(--gold);stroke:var(--elevated);stroke-width:1.3}
.support-month-line{margin:12px 0 0;color:var(--ink-2);font-size:var(--t-small);line-height:1.5}
.support-month-line b{font-weight:600}
.support-description{margin:20px 0 0;max-width:52ch;color:var(--ink-2);font-size:var(--t-lead);line-height:1.7}
.support-keeps{margin:12px 0 0;color:var(--ink-2);font-size:var(--t-small);line-height:1.65}
.support-keeps b{font-weight:600;color:var(--ink);white-space:nowrap}
.support-pick{margin-top:24px}
.support-amounts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.support-amount{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:78px;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;transition:background-color .16s,border-color .16s}
.support-amount b{font-family:var(--display);font-size:1.55rem;font-weight:400;line-height:1.25;font-variant-numeric:tabular-nums}
.support-amount span{color:var(--ink-2);font-size:var(--t-small);line-height:1.4}
.support-amount[aria-checked="true"]{border-color:var(--accent);background:var(--accent-subtle);box-shadow:inset 0 0 0 1px var(--accent)}
.support-amount[aria-checked="true"] span{color:var(--ink)}
.support-amount:hover{border-color:var(--accent)}
.support-amount:active{background:var(--accent-subtle)}
.support-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:16px;padding:10px 20px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:var(--t-button);font-weight:600;text-decoration:none;line-height:1.4}
.support-go:hover{background:var(--accent-hover)}
.support-go:active{transform:scale(.995)}
.support-go[aria-disabled="true"]{opacity:.5;pointer-events:none}
.support-payment{margin:8px 0 0;color:var(--ink-2);font-size:var(--t-small);text-align:center;line-height:1.5}
.support-why{margin-top:18px;color:var(--ink)}
.support-why summary{min-height:44px;cursor:pointer;font-size:var(--t-body);line-height:1.5}
.support-why p{margin:8px 0 0;color:var(--ink-2);font-size:var(--t-small);line-height:1.6}
.support-footer{margin:16px 0 0;color:var(--ink-2);font-size:var(--t-small);text-align:center;line-height:1.5}
@media (max-width:760px){
  .sheet .panel.support-panel{width:100%;max-height:calc(100dvh - var(--kb,0px) - 12px);padding:22px clamp(18px,5vw,28px) calc(22px + var(--safe-b));border-radius:20px 20px 0 0}
  .support-panel .grab{display:block}
  .support-amounts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:360px){
  .panel.support-panel h2{font-size:1.65rem}
  .support-amount{padding:10px}
  .support-amount span{font-size:.82rem}
}
.nw{white-space:nowrap}

/* Reading Engine V6 (rendered only when the V6 flag is on): answer-first headline, open card-by-card reading, synthesis and closing.
   Everything reuses the existing result components (.synthesis, .rc, .reading-part, .plus-celestial); only these small additions are new. */
.r6-headline{margin:var(--space-xs) 0 var(--space-sm);font-family:var(--serif);font-size:var(--t-h2);line-height:1.45;font-weight:600;color:var(--ink);text-wrap:pretty;max-width:36ch}
.r6-headline.is-long{font-size:var(--t-h3);line-height:1.6;max-width:44ch} /* long answers stay the heading, at a size that keeps them to a few lines on a phone */
.r6-answer .synthesis-copy p{font-size:var(--t-lead);line-height:1.8}
.r6-cards{margin-top:var(--space-xl);border-top:1px solid var(--rule)}
.r6-cards>.eyebrow{display:block;margin-top:var(--space-lg)}
.r6-cards>h2{margin:var(--space-xs) 0 0}
.r6-cards .rc:last-child{border-bottom:0}
.r6-gd{margin:0 0 var(--space-sm);max-width:62ch;font-size:var(--t-small);line-height:1.7;color:var(--muted)}
.r6-part p{line-height:1.8}
.r6-closing{border-top:2px solid var(--accent)}
.r6-choice-list{margin:var(--space-sm) 0 0;display:grid;gap:var(--space-sm)}
.r6-choice-list dt{font-weight:600;color:var(--ink)}
.r6-choice-list dd{margin:2px 0 0;font-family:var(--serif);font-size:var(--t-lead);line-height:1.75;color:var(--ink-2)}
.r6-plus-list{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-md)}
.r6-plus-list li{display:grid;gap:var(--space-2xs);line-height:1.7}
.r6-plus-list li span{color:var(--ink-2)}
.res-loading{display:grid;place-items:center;min-height:40vh}
.res-loading p{margin:0;font-family:var(--serif);font-size:var(--t-lead)}
@media(prefers-reduced-motion:no-preference){.res-loading p{animation:r6-breathe 1.6s ease-in-out infinite}}
@keyframes r6-breathe{50%{opacity:.5}}