/* askastro — one celestial surface.
 *
 * The reading used to be paper that followed the viewer's theme while the
 * chart painted its own night. Once the two became one scrolling page the
 * seam between them was the loudest thing on it, so the document now commits
 * to the chart's world: near-black lacquer ground, gold as the binding
 * metal, silver-blue for structure, ember/jade/teal as section accents.
 * Single-theme by decision — every colour painted explicitly, no
 * prefers-color-scheme fork left to disagree with the hero.
 */
:root {
  --ground:      #050B14;
  --surface:     #0A1421;
  --surface-alt: #101B2C;
  --ink:         #E8EEF6;
  --ink-soft:    #93A3B8;
  --ink-faint:   #6E7C90;
  --rule:        #1B2A3D;

  --indigo:      #A9B8D8;
  --indigo-soft: #121D33;
  --gold:        #C9A45C;
  --gold-soft:   #241D10;
  --teal:        #5FC9BA;
  --teal-soft:   #0F2523;
  --crimson:     #E0705C;
  --crimson-soft:#2A1512;
  --green:       #84C9A2;

  --maxw: 46rem;
  --fs:   16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  /* App-like feel: no rubber-band, no pull-to-refresh, no double-tap zoom.
     Pinch on iOS is additionally blocked by the gesturestart handler in
     app.js, since Safari ignores user-scalable=no. */
  overscroll-behavior: none;
  touch-action: pan-y;
  background: var(--ground);
  color: var(--ink);
  /* Device Thai faces. A webfont link would be a silent failure waiting to happen. */
  font-family: "Sukhumvit Set", "Noto Sans Thai", "Thonburi", -apple-system,
               BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs);
  line-height: 1.62;
  overflow-wrap: break-word;
}
/* main alone carries the page gutter — the old `main, section` selector also
   hit every nested <section> (the checklist cards among them), stacking a
   second .85rem of inline padding inside their own */
main { max-width: var(--maxw); margin-inline: auto; padding-inline: .85rem; }
/* the shell holds its shape while fetches are still in flight — on a slow
   connection a page that collapses to its header reads as broken */
main { min-height: 85svh; }
@supports not (min-height: 85svh) { main { min-height: 85vh; } }

/* the sky — one fixed layer beneath the whole document */
#sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ground); }
/* Blur, darkness, and tint are baked into the bitmaps (5KB each), not CSS:
   an animated filter chain re-renders two screen-sized layers every frame
   and that was the lag. What animates now — transform and opacity — runs
   on the compositor and costs nothing. */
#sky .sky-img {
  position: absolute; inset: -6%;
  background: url("assets/bg.webp") center / cover no-repeat;
}
/* Second copy in the teal grade, rotated 180 and counter-drifting under a
   screen blend. Its opacity breathing does two jobs at once: the dust
   churns, and the sky's colour slides violet-to-teal and back. */
#sky .sky-img2 {
  background-image: url("assets/bg2.webp");
  transform: rotate(180deg);
  mix-blend-mode: screen; opacity: .4;
}
@media (prefers-reduced-motion: no-preference) {
  #sky .sky-img { animation: sky-drift 120s ease-in-out infinite alternate; }
  #sky .sky-img2 {
    animation: sky-drift2 87s ease-in-out infinite alternate,
               sky-breathe 52s ease-in-out infinite alternate;
  }
}
/* Big screens: plain ground and the star canvas only. The nebula layers —
   especially the mix-blend-mode copy — force whole-screen compositing every
   frame, and on a desktop-sized window that is the lag. Phones keep them. */
@media (min-width: 1024px) {
  #sky .sky-img, #sky .sky-img2 { display: none; }
}
@keyframes sky-breathe { from { opacity: .18; } to { opacity: .55; } }
@keyframes sky-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(1.5%, -1.5%) scale(1.06); }
}
@keyframes sky-drift2 {
  from { transform: rotate(180deg) translate(0, 0) scale(1); }
  to   { transform: rotate(180deg) translate(-1.6%, 1.2%) scale(1.07); }
}
#sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
p { margin: 0 0 .5em; }
b, strong { font-weight: 700; color: var(--ink); }

/* jump nav — fixed, and only slides in once the disc has scrolled past
   (an IntersectionObserver in app.js toggles .on), so the hero stays clean */
.jump {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  transform: translateY(-110%); transition: transform .3s ease;
  background: rgba(5, 11, 20, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 164, 92, .25);
}
.jump.on { transform: translateY(0); }
.jump { border-bottom: 0; }
.jump-bar {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 2.6rem 1fr 2.6rem; align-items: center;
  padding: .35rem .6rem .15rem;
}
.jb-brand {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: center; color: #C9A45C; font-weight: 400;
  letter-spacing: .3em; text-indent: .3em; font-size: .92rem;
  font-family: "Optima", "Palatino", Georgia, serif;
}
.jb-brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.jb-btn {
  appearance: none; background: none; border: 0; margin: 0; padding: .35rem;
  color: #93A3B8; cursor: pointer; display: grid; place-content: center;
  font-size: .78rem; font-weight: 600; border-radius: 8px;
}
.jb-btn svg { width: 1.3rem; height: 1.3rem; }
.jb-btn:hover { color: #C9A45C; }
.jb-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.jb-credit {
  color: #C9A45C; justify-self: end;
  display: flex; align-items: center; gap: .25rem;
  border: 1px solid rgba(201, 164, 92, .35); border-radius: 999px;
  padding: .18rem .55rem .18rem .4rem; font-variant-numeric: tabular-nums;
}
.jb-credit svg { width: 1rem; height: 1rem; }
.jb-toast {
  position: fixed; top: 3.4rem; left: 50%; transform: translateX(-50%);
  z-index: 30; background: rgba(10, 20, 33, .95); color: #E3C87E;
  border: 1px solid rgba(201, 164, 92, .4); border-radius: 999px;
  padding: .45rem 1rem; font-size: .82rem; white-space: nowrap;
}
.jb-orn { display: block; width: 100%; height: 9px; margin-bottom: -1px; }
.jump-menu {
  border-top: 1px solid rgba(201, 164, 92, .18);
  display: flex; flex-direction: column; padding: .3rem .6rem .6rem;
  max-width: var(--maxw); margin-inline: auto;
}
.jump-menu a {
  text-decoration: none; color: #C9CFDB; font-size: .92rem; font-weight: 600;
  padding: .55rem .5rem; border-radius: 8px;
}
.jump-menu a:hover { background: rgba(201, 164, 92, .08); color: #E3C87E; }
.jump-menu a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

h2 {
  font-size: 1.3rem; font-weight: 800; line-height: 1.35;
  margin: 1.7rem 0 .45rem; padding-bottom: .35rem;
  border-bottom: 2px solid currentColor; text-wrap: balance; scroll-margin-top: 4rem;
}
h2.data { color: var(--ink-soft); }
h2.birth,
h2.career,
h2.numbers,
h2.transit,
h2.summary { color: var(--gold); }
h3 { font-size: 1.02rem; font-weight: 700; margin: 1.3rem 0 .4rem; color: var(--ink); text-wrap: balance; }
.sec-intro { font-size: .86rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: .7rem; }

/* ── welcome wizard — the galaxy front door ─────────────────────────────
   Full-bleed night sky like the wheel screen, one question per step. */
#entry {
  max-width: none; padding-inline: 0;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.wiz {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  max-width: 26rem; margin-inline: auto; padding: 2.2rem 1.2rem 2rem;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.wiz-brand .word {
  font-size: clamp(1.15rem, 5vw, 1.45rem); font-weight: 400;
  letter-spacing: .34em; text-indent: .34em; color: #C9A45C;
  font-family: "Optima", "Palatino", Georgia, serif;
}
.wiz-brand .tag { font-size: .64rem; color: #55657A; letter-spacing: .06em; margin-top: .15rem; }
.wiz-step { margin-top: 2.2rem; }
.wiz-title {
  font-size: clamp(1.35rem, 6vw, 1.7rem); line-height: 1.45; margin: 0 0 .7rem;
  font-weight: 700; color: #E3C87E; text-wrap: balance;
}
.wiz-invite { font-size: 1.02rem; color: var(--ink); line-height: 1.9; margin: 0 0 1.4rem; }
/* the quiet line between the invitation and the button — same seat it had
   in the original welcome stack */
.wiz-privacy { font-size: .76rem; color: var(--ink-faint); margin: 0 0 .2rem; }
.wiz-q { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0 0 1.1rem; border: 0; padding: 0; }
.wiz-step .dt-row { justify-content: center; }
.wiz-step .hint { margin-top: .7rem; }
.wiz button { margin-top: 1.4rem; }
#wz-start, .wiz-next, #go {
  color: var(--ground); background: var(--gold); border-color: var(--gold);
  padding: .7rem 2.4rem; border-radius: 999px; font-size: .95rem;
}
.wiz #f-prov {
  font: inherit; font-size: 1rem; color: var(--ink); text-align: center;
  background: rgba(10, 20, 33, .8); border: 1px solid var(--rule);
  border-radius: 10px; padding: .6rem .75rem; width: 100%; max-width: 16rem;
}
.wiz #f-prov:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.wiz .warn-plain { margin-top: 1rem; }
.wiz-foot { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.wiz-dots { display: flex; gap: .5rem; }
.wiz-dots span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--rule); }
.wiz-dots span.on { background: var(--gold); }
.wiz-back {
  color: var(--ink-faint); background: none; border: 0; padding: .2rem .6rem; margin: 0;
  font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.hint, .rule-note { font-size: .76rem; color: var(--ink-faint); line-height: 1.6; }
.hint { margin: .3rem 0 .2rem; }

button {
  font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
  color: var(--ground); background: var(--indigo);
  border: 1px solid var(--indigo); border-radius: 10px; padding: .65rem 1.1rem; margin-top: .6rem;
}
button { transition: transform .12s ease, opacity .15s ease, filter .15s ease; }
button:active { transform: scale(.97); }
button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tally-reset {
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; padding: .35rem .9rem; font-size: .78rem; font-weight: 600;
  display: block; margin: 2rem auto 0;
}
.warn-plain { color: var(--crimson); background: var(--crimson-soft); border-radius: 8px; padding: .5rem .7rem; font-size: .86rem; }
/* The hand-off button: shows only when the check itself said this chart
   needs a live master, and leads to ค · ดวงจร. */
.consult {
  color: var(--ground); background: var(--gold); border: 0;
  border-radius: 999px; padding: .55rem 1.3rem; font-size: .9rem; font-weight: 700;
  display: block; margin: 1.4rem auto 0; cursor: pointer;
}
.consult + .tally-reset { margin-top: .7rem; }

/* the opening persona */
.opening { margin: 1.6rem 0 .4rem; }
/* The plaque. Lacquer ground, gold hairline frame with a double inner line,
   the ornament rules drawn in the hub crest's line family. */
.op-card {
  position: relative; text-align: center;
  border: 1px solid rgba(201, 164, 92, .55); border-radius: 10px;
  box-shadow: inset 0 0 0 3px #0B1322, inset 0 0 0 4px rgba(201, 164, 92, .3);
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, rgba(201, 164, 92, .12), transparent 60%),
    linear-gradient(180deg, #101B2C, #0B1322 55%, #081020);
  padding: 1.1rem 1rem 1.15rem; margin-bottom: 1.2rem;
}
.op-orn { display: block; width: min(100%, 20rem); height: 12px; margin: 0 auto .4rem; }
.op-orn.flip { transform: scaleY(-1); margin: .45rem auto 0; }
.op-title {
  font-size: clamp(1.3rem, 5.6vw, 1.6rem); font-weight: 800; color: #E3C87E;
  margin: 0; border: 0; padding: 0; line-height: 1.5; text-wrap: balance;
  text-shadow: 0 0 18px rgba(227, 200, 126, .25);
}
.w-birth { border-bottom: 1px solid #1B2A3D; margin-bottom: 1rem; padding-bottom: 1rem; }
.w-birth h3 { margin: 0 0 .3rem; font-size: 1rem; color: #C9A45C; }
.w-birth .wb-line { font-size: 1.05rem; font-weight: 700; color: #E8EEF6; margin: 0 0 .2rem; }
.w-birth .wb-note { font-size: .76rem; color: #6E7C90; margin: 0 0 .6rem; }
.w-birth button {
  color: #93A3B8; background: #0A1421; border: 1px solid #1B2A3D;
  border-radius: 999px; padding: .4rem 1rem; font-size: .8rem; margin: 0;
}
.w-data { border-bottom: 1px solid #1B2A3D; margin-bottom: 1rem; padding-bottom: .6rem; }
.w-data h3 { margin: 0 0 .5rem; font-size: 1rem; color: #C9A45C; }
.w-data table { background: #071220; }
.wheel .hub, .wheel .hub text { cursor: pointer; }
/* shortcut row under the plaque — quiet gold pills to the four destinations */
.op-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem;
  margin: .6rem 0 1rem;
}
.op-links a {
  text-decoration: none; font-size: .78rem; font-weight: 600; color: var(--gold);
  border: 1px solid rgba(201, 164, 92, .4); border-radius: 999px;
  padding: .22rem .7rem; background: rgba(201, 164, 92, .06);
}
.op-links a:hover { background: rgba(201, 164, 92, .14); color: #E3C87E; }
.op-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.op-para { font-size: .95rem; color: var(--ink-soft); line-height: 1.85; margin: 0 0 .8rem; }
.op-para b { color: var(--ink); display: block; }
.op-lead { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 1.2rem 0 .2rem; }
.ch-meta { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; margin: 0 0 .6rem; font-size: .8rem; }
.ch-meta dt { color: var(--ink-faint); }
.ch-meta dd { margin: 0; color: var(--ink-soft); font-weight: 600; }

/* birth cards */
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px;
  padding: .75rem .85rem; margin-bottom: .6rem;
}
.card.talent { border-left-color: var(--teal); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin-bottom: .35rem; }
.card-head .num { font-size: 1.1rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.card.talent .card-head .num { color: var(--teal); }
.card-head .title { font-size: 1.02rem; font-weight: 700; line-height: 1.4; flex: 1 1 12rem; text-wrap: balance; }
.card-head .tag {
  font-size: .68rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-alt); padding: .12rem .55rem; border-radius: 999px;
}
.combo {
  font-size: .76rem; color: var(--ink-faint); background: var(--surface-alt);
  border-left: 2px solid var(--rule); border-radius: 6px;
  padding: .4rem .55rem; margin: 0 0 .45rem; line-height: 1.55;
}
.combo b { color: var(--ink-soft); font-weight: 700; }

.examples, .jobs { font-size: .88rem; margin-top: .45rem; }
.ex-label {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem;
}
.examples ul, .jobs ul { list-style: none; margin: 0; padding: 0; }
.examples li { margin: .1rem 0; }
.examples label { display: flex; gap: .55rem; align-items: flex-start; padding: .3rem .4rem; border-radius: 8px; cursor: pointer; line-height: 1.5; }
.examples label:hover { background: var(--surface-alt); }
.examples input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .18rem;
  border: 2px solid var(--ink-faint); border-radius: 5px; background: var(--surface);
  display: grid; place-content: center; cursor: pointer;
}
.examples input::after {
  content: ""; width: .55rem; height: .3rem; margin-top: -.12rem;
  border-left: 2.5px solid var(--ground); border-bottom: 2.5px solid var(--ground);
  transform: rotate(-45deg) scale(0); transition: transform .12s ease;
}
.examples input:checked { background: var(--gold); border-color: var(--gold); }
.examples input:checked::after { transform: rotate(-45deg) scale(1); }
.examples input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.examples input:checked + span { color: var(--ink-soft); }
.jobs li { position: relative; padding-left: .95rem; margin: .22rem 0; line-height: 1.55; }
.jobs li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }

.tally .tally-lead { font-size: .92rem; color: var(--ink); margin: .4rem 0 0; }
.bar-track { height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 22%, transparent); margin: .6rem 0 .2rem; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--gold); transition: width .25s ease; }

/* evidence and accuracy readouts */
.accuracy-box { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: .8rem .9rem; margin: .8rem 0; }
.acc-title { font-weight: 800; font-size: 1rem; margin-bottom: .3rem; }
.accuracy { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.accuracy li { padding: .55rem .7rem; background: var(--surface-alt); border-radius: 8px; }
.accuracy .src { display: block; font-size: .88rem; line-height: 1.6; }
.accuracy .claim { display: block; margin-top: .2rem; font-size: .82rem; color: var(--ink-soft); }
.accuracy .claim b { color: var(--gold); font-variant-numeric: tabular-nums; }

/* tables */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: .5rem; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; background: var(--surface); border-radius: 10px; overflow: hidden; }
th { background: var(--surface-alt); color: var(--ink); text-align: left; padding: .5rem .6rem; font-weight: 700; font-size: .74rem; white-space: nowrap; }
td { padding: .45rem .6rem; border-top: 1px solid var(--rule); vertical-align: top; line-height: 1.6; }
.tbl-cap { font-size: .74rem; color: var(--ink-faint); margin: .1rem 0 1.4rem; }
.g { color: var(--gold); font-weight: 700; }
.w { color: var(--crimson); font-weight: 600; }
.numcell { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the two wide meaning tables stack into cards on narrow screens */
@media (max-width: 46rem) {
  .pillars, .cross { display: block; background: none; }
  .pillars thead, .cross thead { display: none; }
  .pillars tr, .cross tr {
    display: block; background: var(--surface); border: 1px solid var(--rule);
    border-radius: 10px; padding: .7rem .85rem; margin-bottom: .6rem;
  }
  .pillars td, .cross td { display: block; border: 0; padding: .12rem 0; }
  .pillars td:first-child, .cross td:first-child {
    font-weight: 800; color: var(--indigo); font-size: .95rem;
    padding-bottom: .35rem; margin-bottom: .35rem; border-bottom: 1px solid var(--rule);
  }
}

/* derivation, folded away by default */
.derivation { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; margin: .8rem 0; overflow: hidden; }
.derivation > summary { list-style: none; cursor: pointer; padding: .7rem .85rem; display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.derivation > summary::-webkit-details-marker { display: none; }
.derivation > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: .5rem; height: .5rem;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.derivation[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.derivation[open] > summary { border-bottom: 1px solid var(--rule); color: var(--ink); }
.derivation > summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
.derivation .sum-label { color: var(--gold); font-weight: 800; letter-spacing: .04em; }
.derivation .sum-hint { font-weight: 500; color: var(--ink-faint); font-size: .82rem; }
.derivation .body { padding: .2rem .85rem .8rem; }
.derivation .body h3:first-of-type { margin-top: 1rem; }
.why { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.why li { padding: .35rem 0; border-top: 1px solid var(--rule); line-height: 1.65; }
.why li:first-child { border-top: none; }
.why b { color: var(--crimson); }

/* avoid-numbers */
.num-result { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: .8rem .9rem; text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-bottom: .2rem; }
.num-chip {
  width: 2.4rem; height: 2.4rem; display: grid; place-content: center; border-radius: 50%;
  background: var(--crimson); color: var(--ground); font-weight: 800; font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.num-chip.mid { background: var(--gold); }
.num-chip.good { background: var(--green); }
.num-ref { font-size: .74rem; color: var(--ink-faint); margin: .6rem 0 0; line-height: 1.6; }

.caveat { font-size: .84rem; color: var(--ink-soft); line-height: 1.7; border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── motion ─────────────────────────────────────────────────────────────
   One vocabulary everywhere: things arrive by fading up a step. Wizard
   steps animate on (re)creation; reading blocks
   animate once on first scroll into view (.rv set by app.js, .in on
   intersection); reduced-motion kills all of it above. */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wiz-step:not([hidden]) { animation: fade-up .45s ease both; }
#screen-wheel:not([hidden]), #chart:not([hidden]) { animation: fade-up .6s ease both; }
.rv { opacity: 0; transform: translateY(14px); }
.rv.in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }

/* the explanation between a card's สูตรดาว and its tick items: what each planet
   means, what its standing does to it, what field it lands in */
.meaning { font-size: .87rem; line-height: 1.6; margin: 0 0 .2rem; }
.meaning p { margin: 0 0 .2em; }
.meaning b { color: var(--indigo); }
.card.talent .meaning b { color: var(--teal); }

/* Typed date and time.
   The native date and time inputs are unusable here: on a Thai-locale phone iOS
   renders the picker in Buddhist calendar, so the field shows one year while the
   value carries another, and the reading is silently cast for the wrong date. Typed
   digits with an explicit พ.ศ./ค.ศ. read-back remove the ambiguity entirely. */
.dt { border: 0; margin: 0; padding: .6rem 0 0; }
.dt legend { font-size: .8rem; font-weight: 700; color: var(--ink-soft); padding: 0; }
.dt-row { display: flex; align-items: flex-start; gap: .4rem; margin-top: .35rem; }
.dt-field { display: flex; flex-direction: column; flex: 0 1 4.2rem; }
.dt-field.wide { flex: 0 1 6.5rem; }
.dt-field input {
  font: inherit; font-size: 1.15rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 10px; padding: .45rem .3rem; width: 100%;
}
.dt-field input::placeholder { font-weight: 500; color: var(--ink-faint); letter-spacing: normal; }
.dt-field input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
.dt-field input.bad { border-color: var(--crimson); }
.dt-cap { font-size: .68rem; color: var(--ink-faint); text-align: center; margin-top: .25rem; line-height: 1.4; }
.dt-sep { font-size: 1.15rem; font-weight: 700; color: var(--ink-faint); padding-top: .6rem; }
.echo {
  background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 10px;
  padding: .5rem .7rem; margin: .9rem 0 .2rem; font-size: .88rem; color: var(--ink);
}
.echo b { color: var(--gold); }

/* เลขที่ควรเลี่ยง — four named tiers.
   The tiers are the content, not decoration: "ใช้ได้แบบมีเงื่อนไข" is a different
   instruction from "เลี่ยงรองลงมา" and a colour alone cannot carry that. */
.num-tier + .num-tier { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--rule); }
.tier-label { font-size: .88rem; font-weight: 800; margin-bottom: .45rem; color: var(--ink); }
.tier-note { font-weight: 500; font-size: .74rem; color: var(--ink-faint); }
/* The supporting tier is the hero of the section; the avoid tiers close it
   quietly — outline chips, no filled red shouting. */
.num-tier.hero .tier-label { color: var(--green); font-size: 1rem; }
.num-tier.hero .num-chip {
  width: 2.6rem; height: 2.6rem; font-size: 1.25rem;
  /* double-ring crest: a hairline gold ring floated off the chip */
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px rgba(201, 164, 92, .55);
}
.tier-orn { display: block; width: min(100%, 17rem); height: 11px; margin: .1rem auto .5rem; }
.tier-orn.flip { transform: scaleY(-1); margin: .7rem auto .1rem; }
.num-chip.worst { background: var(--surface-alt); color: var(--crimson); border: 2px solid var(--crimson); }
.num-chip.avoid { background: var(--surface-alt); color: var(--ink-soft); border: 2px solid var(--ink-faint); }
.num-chip.cond  { background: var(--surface-alt); color: var(--gold); border: 2px solid var(--gold); }
.num-chip.good  { background: var(--green); color: var(--ground); }
.warn { font-size: .82rem; line-height: 1.65; border-radius: 8px; padding: .55rem .75rem; margin-top: .7rem;
        color: var(--ink-soft); background: var(--surface); border: 1px solid var(--rule); }
.warn::before { content: "หมายเหตุ — "; font-weight: 800; color: var(--ink); }
.soften { color: var(--green); font-size: .8rem; }

.jobs .job-why { color: var(--ink-faint); font-size: .8rem; }
.jobs li b { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   The chart screen — Birth Chart Design Spec v0.1
   "Don't decorate the astrology. Visualize the astrology."

   Deliberately outside the document's token system. The reading is a paper
   surface that follows the viewer's light/dark setting; the chart is an
   instrument face that must look the same to everyone who is handed a
   screenshot of it, so every colour here is a literal and the section breaks
   out of the page's max-width to paint its own ground.
   ═══════════════════════════════════════════════════════════════════════ */
/* Full-bleed out of <main>, which is a centred max-width column with its own
   inline padding. Cancelling that padding alone is not enough — on a wide
   screen the column stops short of the edges — so the section is pulled to the
   viewport width from wherever its container happens to sit. */
#screen-wheel {
  max-width: none; padding-inline: 0;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  color: #E8EEF6;
}
.wheel-inner {
  max-width: 30rem; margin-inline: auto;
  padding: .9rem .75rem .4rem;
  display: flex; flex-direction: column; gap: .5rem;
}

.wheel-top { display: block; }
.wheel-brand { text-align: center; }
.wheel-brand .word {
  font-size: clamp(1.05rem, 4.6vw, 1.3rem); font-weight: 400;
  letter-spacing: .34em; text-indent: .34em; color: #C9A45C;
  font-family: "Optima", "Palatino", Georgia, serif;
}
.wheel-brand .tag { font-size: .62rem; color: #55657A; letter-spacing: .06em; margin-top: .1rem; }
.wheel-brand .doc { font-size: clamp(1.25rem, 5.6vw, 1.55rem); font-weight: 700; margin-top: .5rem; color: #E3C87E; }

.icon-btn {
  appearance: none; -webkit-appearance: none;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; padding: 0; margin: 0;
  background: transparent; border: 1px solid #17293D; color: #93A3B8; cursor: pointer;
  display: grid; place-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { border-color: #6E5A33; color: #C9A45C; }
.icon-btn:focus-visible { outline: 2px solid #C9A45C; outline-offset: 2px; }
.icon-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.wheel { display: block; width: 100%; height: auto; touch-action: manipulation; }

/* Element auras behind the engravings — static. They carried per-element
   animations for one iteration; the motion earned nothing at this scale and
   was removed. The glow itself stays. */
.wheel .aura { opacity: .25; }
.wheel .lagna-beam { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .wheel .lagna-beam { animation: beam-breathe 7s ease-in-out infinite alternate; }
}
@keyframes beam-breathe { from { opacity: .72; } to { opacity: 1; } }

/* กำลังดาว = brightness. Only the extremes move: มหาอุจจ์'s halo and spikes
   pulse and slowly spin, นิจ gutters. Everything between holds its rank in
   steady light. */
@media (prefers-reduced-motion: no-preference) {
  .wheel .q-max .halo { animation: q-pulse 2.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
  .wheel .q-max .spin { animation: q-spin 18s linear infinite; transform-box: fill-box; transform-origin: center; }
  .wheel .q-low { animation: q-gutter 5.2s ease-in-out infinite; }
  /* เสี้ยวจันทร์ is rare enough — 11 charts in 100 — to be allowed to move.
     Only the wash breathes, never the drawn line: the crown holds still and
     the light on it rises and falls, which is the difference between majesty
     and a blinking ornament. */
  .wheel .crest-wash { animation: crest-breathe 9s ease-in-out infinite alternate; }
}
@keyframes crest-breathe { from { opacity: .35; } to { opacity: 1; } }
@keyframes q-pulse { from { opacity: .5; transform: scale(.88); } to { opacity: 1; transform: scale(1.22); } }
@keyframes q-spin { to { transform: rotate(360deg); } }
@keyframes q-gutter { 0%, 100% { opacity: 1; } 12% { opacity: .55; } 18% { opacity: 1; } 47% { opacity: .68; } 55% { opacity: 1; } }

/* On phones the wheel bleeds to the physical screen edge so the lagna beam
   enters from off-screen; on wider viewports the 30rem column contains it. */
@media (max-width: 32rem) {
  .wheel { width: 100vw; margin-left: calc(50% - 50vw); }
}
.wheel text { user-select: none; }
.wheel .sector { cursor: pointer; }
.wheel .crescent { cursor: pointer; }
.wheel .sector .fill { transition: opacity .18s ease; }
.wheel .sector:hover .fill { opacity: .78; }
.wheel .sector:focus-visible { outline: none; }
.wheel .sector:focus-visible .rim { stroke-width: 3.4; }
.wheel .node { cursor: pointer; }
.wheel .node .disc { transition: r .15s ease; }
.wheel .node:hover .disc { r: 30; }
.wheel .chord { cursor: pointer; }
/* Tapping an aspect keeps the involved pair lit and drops the rest back
   rather than hiding it, so the context of the relationship survives. */
.wheel .dimmable { transition: opacity .2s ease; }
.wheel.focused .dimmable { opacity: .12; }
.wheel.focused .lit { opacity: 1; }

/* The sheet is empty and hidden at rest, so the chart itself stays clean. */
.w-sheet {
  border: 1px solid #17293D; border-radius: 14px;
  background: linear-gradient(180deg, #0A1421, #050B14);
  padding: .8rem .9rem; display: none;
  max-width: none; margin-inline: 0;
}
.w-sheet.on { display: block; animation: fade-up .3s ease both; }

/* The legend panels, hidden at rest behind the ⓘ. Never permanent on this
   screen — the chart screen is aesthetics only, and a credit/info page will
   eventually own the explanation. */
.w-key {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* Legend modal: dark glass over the page, panel scrolls inside itself. */
.w-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3, 7, 13, .72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.w-modal[hidden] { display: none; }
.w-modal-panel {
  position: relative; max-width: 40rem; width: 100%; max-height: 86svh;
  overflow-y: auto; border: 1px solid rgba(201, 164, 92, .35); border-radius: 16px;
  background: #0A1421; padding: 1.1rem .9rem .9rem; color: #E8EEF6;
  animation: fade-up .3s ease both;
}
.w-modal-close {
  position: sticky; top: 0; float: right; margin: -.4rem -.2rem 0 0;
  appearance: none; background: none; border: 0; cursor: pointer;
  color: #93A3B8; font-size: 1.5rem; line-height: 1; padding: .2rem .45rem;
}
.w-modal-close:focus-visible { outline: 2px solid #C9A45C; outline-offset: 2px; }

/* ── the paywall: modal = LINE gate only; /pay.html = checkout ── */
.pw-panel { max-width: 26rem; text-align: center; }
.pay-wrap { max-width: 30rem; margin: 0 auto; padding: 0 1rem 3rem; }
/* option cards: radio left, copy centre, price column right, badge floating */
.po-card {
  position: relative; display: flex; gap: .7rem; cursor: pointer; text-align: left;
  border: 1px solid var(--rule); border-radius: 12px; padding: .8rem .85rem .75rem;
  background: rgba(10, 20, 33, .6);
}
.po-card.on {
  border-color: rgba(201, 164, 92, .65);
  background: linear-gradient(180deg, rgba(201, 164, 92, .1), rgba(10, 20, 33, .6) 65%);
  box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .3);
}
.po-card input { accent-color: var(--gold); flex: none; margin-top: .2rem; }
.po-card.owned { opacity: .65; cursor: default; }
.po-card.owned .po-desc a, .pw-note a { color: var(--gold); }
.po-badge {
  position: absolute; top: -.6rem; right: .7rem;
  font-size: .68rem; font-weight: 800; color: var(--ground);
  background: linear-gradient(180deg, #E3C87E, #C9A45C);
  border-radius: 999px; padding: .12rem .6rem;
}
.po-main { flex: 1; display: block; }
.po-title { display: block; font-size: .92rem; font-weight: 800; color: var(--ink); line-height: 1.5; }
.po-desc { display: block; font-size: .76rem; color: var(--ink-faint); line-height: 1.7; margin-top: .15rem; }
.po-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.po-price s { font-size: .74rem; color: var(--ink-faint); }
.po-price b { font-size: 1.15rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.po-price i { font-style: normal; font-size: .68rem; color: var(--ink-soft); }
.po-price em { font-style: normal; font-size: .66rem; font-weight: 700; color: #7FBF8E; white-space: nowrap; }
.pay-card .pw-prods { gap: .8rem; margin-bottom: .9rem; }
.pay-card {
  margin-top: 1.8rem; text-align: center;
  border: 1px solid rgba(201, 164, 92, .55); border-radius: 12px;
  box-shadow: inset 0 0 0 3px #0B1322, inset 0 0 0 4px rgba(201, 164, 92, .3);
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, rgba(201, 164, 92, .16), transparent 60%),
    linear-gradient(180deg, #101B2C, #0B1322 55%, #081020);
  padding: 1.3rem 1.1rem 1.4rem;
}
.pw-hd { font-size: 1.1rem; font-weight: 800; color: #E3C87E; margin: .2rem 0 .6rem; }
.pw-login { font-size: .78rem; color: var(--ink-faint); line-height: 1.7; margin: 0 0 .9rem; }
.pw-linebtn {
  display: inline-block; margin: .35rem 0 0; text-decoration: none;
  font-size: .84rem; font-weight: 700; color: #FFF;
  background: #06C755; border-radius: 8px; padding: .45rem 1.1rem;
}
.pw-prods { display: flex; flex-direction: column; gap: .45rem; margin: 0 0 .7rem; text-align: left; }
.pw-row {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 10px; padding: .55rem .7rem;
}
.pw-row.owned { opacity: .6; cursor: default; }
.pw-row input { accent-color: var(--gold); flex: none; }
.pw-name { flex: 1; font-size: .88rem; line-height: 1.5; }
.pw-price { font-size: .84rem; font-weight: 700; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-rerolls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
  font-size: .82rem; margin: 0 0 .7rem; text-align: left;
}
.pw-rerolls .pw-sub { flex: 1 1 100%; color: var(--ink-soft); font-weight: 700; }
.pw-ro { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.pw-ro input { accent-color: var(--gold); }
.pw-bundle { font-size: .78rem; color: var(--ink-faint); margin: 0 0 .5rem; }
.pw-total { font-size: .95rem; margin: 0 0 .8rem; }
.pw-total b { color: var(--gold); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.pw-cta {
  appearance: none; border: 0; cursor: pointer; margin: 0;
  font-size: .95rem; font-weight: 800; color: var(--ground);
  background: linear-gradient(180deg, #E3C87E, #C9A45C);
  border-radius: 999px; padding: .6rem 1.6rem;
}
.pw-cta:disabled { background: rgba(201, 164, 92, .3); color: var(--ink-faint); cursor: default; }
.pw-qr { width: min(70%, 15rem); border-radius: 12px; margin: .2rem auto .5rem; display: block; background: #FFF; }
.pw-note { font-size: .82rem; color: var(--ink-soft); line-height: 1.7; margin: 0 0 .6rem; }
.pw-note a { color: var(--gold); }
.pw-up {
  display: inline-block; cursor: pointer; font-size: .9rem; font-weight: 700;
  color: var(--gold); border: 1px solid rgba(201, 164, 92, .5);
  border-radius: 999px; padding: .55rem 1.4rem; margin: .2rem 0 .4rem;
}
.pw-status { font-size: .84rem; color: var(--ink-soft); min-height: 1.2rem; margin: .3rem 0 0; }
.pw-owned { list-style: none; margin: 0 0 .8rem; padding: 0; font-size: .88rem; line-height: 2; color: var(--ink); }
.w-key > div {
  border: 1px solid rgba(201, 164, 92, .28); border-radius: 14px;
  background: linear-gradient(180deg, #0A1421, #050B14);
  padding: .8rem .9rem;
}
.w-key > div > h3 { text-align: center; }
.w-key .row b { margin-left: auto; font-size: 1rem; letter-spacing: .2em; }
.w-sheet-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.w-sheet-glyph { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.w-sheet-name { font-size: 1.15rem; font-weight: 700; color: #E8EEF6; }
.w-sheet-qual { font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .1rem .5rem; border-radius: 999px; border: 1px solid currentColor; }
.w-rows { display: grid; grid-template-columns: auto 1fr; gap: .12rem .85rem; margin: .5rem 0 0; font-size: .84rem; }
.w-rows dt { color: #55657A; }
.w-rows dd { margin: 0; color: #E8EEF6; font-weight: 600; }
.w-close { float: right; appearance: none; background: none; border: 0; cursor: pointer; color: #55657A; font-size: 1.1rem; line-height: 1; padding: .1rem .2rem; margin: 0; }
.w-close:focus-visible { outline: 2px solid #C9A45C; outline-offset: 2px; }

.w-key h3 { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #C9A45C; margin: 0 0 .45rem; font-weight: 700; }
.w-key .rows { display: grid; gap: .28rem; font-size: .8rem; color: #93A3B8; }
.w-key .row { display: flex; align-items: center; gap: .5rem; }
.w-key .sw { flex: 0 0 auto; width: .85rem; height: .85rem; border-radius: 3px; border: 1px solid; }
.w-key .nm {
  color: #E8EEF6; font-weight: 700; flex: 0 0 4.4rem;
  display: flex; flex-wrap: wrap; gap: .15rem .4rem; align-content: center;
}
.w-key .planets { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .3rem .7rem; }
.w-key .planets span { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #93A3B8; }
.w-key .planets b { font-size: 1rem; font-weight: 700; }
.w-key .note { margin: .5rem 0 0; font-size: .72rem; line-height: 1.5; color: #6E7C90; }
.w-key .ln, .w-key .q { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: #93A3B8; }
.w-key .ln svg { flex: 0 0 auto; width: 2.4rem; height: .6rem; }
.w-key .q svg { flex: 0 0 auto; width: 2rem; height: 2rem; }
.w-key .q b, .w-key .ln b { color: #E8EEF6; font-weight: 700; }

.wheel-actions { display: grid; gap: .5rem; margin-top: .5rem; }
#to-reading {
  width: 100%; margin: 0; color: #050B14; background: #C9A45C;
  border-color: #C9A45C; border-radius: 12px; padding: .8rem 1.1rem; font-size: 1rem;
}
#to-reading:focus-visible { outline: 2px solid #E8EEF6; outline-offset: 2px; }
.wheel-ghost {
  margin: 0; background: transparent; border: 1px solid #17293D; color: #93A3B8;
  border-radius: 999px; padding: .45rem 1rem; font-size: .8rem; font-weight: 600;
}
.wheel-ghost:focus-visible { outline: 2px solid #C9A45C; outline-offset: 2px; }
.wheel-ghost.back {
  display: inline-flex; align-items: center; gap: .35rem;
  border-color: var(--rule); color: var(--ink-soft); background: var(--surface);
  margin-bottom: .8rem;
}

/* answers folded back into the reading as settled facts */
.facts { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--rule); font-size: .86rem; }
.facts ul { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; gap: .5rem; align-items: baseline; margin: .2rem 0; line-height: 1.5; }
.facts li.no { color: var(--ink-faint); }
.facts .mk { flex: 0 0 auto; font-size: .68rem; font-weight: 800; padding: .05rem .45rem;
             border-radius: 999px; letter-spacing: .02em; }
.facts li.yes .mk { background: var(--green); color: var(--ground); }
.facts li.no  .mk { background: var(--surface-alt); color: var(--ink-faint); }
#verify .card { border-left-color: var(--gold); }
#verify .card-head { margin-bottom: .2rem; }

/* ── 12-เรือน walkthrough ─────────────────────────────────────────────── */
.house { border-left-color: var(--gold); }
.house-hd { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.house-hd .no {
  font-size: .66rem; letter-spacing: .14em; font-weight: 700; color: var(--gold);
  text-transform: uppercase;
}
.house-hd b { font-size: 1.05rem; }
.house-hd .sg { font-size: .8rem; color: var(--ink-faint); }
.house-core { font-size: .86rem; color: var(--ink-soft); margin: .2rem 0 .4rem; }
.house .occ { margin: 0 0 .4rem; padding-left: 1.1rem; font-size: .86rem; }
.house .occ li { margin-bottom: .15rem; }
.house .occ .dg { color: var(--gold); font-size: .76rem; }
.house .occ-read, .house .lord-read { display: block; font-size: .84rem; color: var(--ink); margin-top: .1rem; line-height: 1.65; }
.house .occ-none { font-size: .8rem; color: var(--ink-faint); margin: 0 0 .4rem; }
.house .lord { font-size: .84rem; color: var(--ink-soft); margin: 0; }

/* ── ดาวจรวันนี้ ──────────────────────────────────────────────────────── */
.trow {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .45rem .2rem; border-bottom: 1px solid var(--rule); font-size: .88rem;
}
.trow:last-child { border-bottom: 0; }
.trow b { flex: 0 0 6.5rem; }
.trow .tr-pos { color: var(--ink-soft); }
.trow .ttag {
  font-size: .7rem; font-weight: 700; color: var(--gold);
  border: 1px solid rgba(201, 164, 92, .4); border-radius: 999px; padding: .05rem .5rem;
}

/* App-like: no long-press text selection anywhere except real inputs. */
body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

/* ── desktop ────────────────────────────────────────────────────────────
   Mobile-first stands; at desk width the same content stops floating in a
   phone column. The hero becomes wheel-beside-question, and card-shaped
   sections spread to two columns. Prose keeps its reading width. */
@media (min-width: 64rem) {
  /* Chart only, centered and larger — the hero shows nothing else. */
  .wheel-inner {
    max-width: 44rem; padding-inline: 2rem;
    justify-content: center;
    min-height: 100vh; min-height: 100svh;
  }
  /* The beam quad starts beyond the viewBox; phones clip it at the screen
     edge, but in a column the clip is a visible hard line — let it spill. */
  .wheel { overflow: visible; }

  /* one column everywhere, desktop included (Champ 2026-08-23) — the
     checklist reads top to bottom, and two columns broke that order */
  #houses, #careers, #verify {
    display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: start;
  }
  #houses > .card, #careers > .card, #verify > .card { margin-bottom: 0; }
}

/* ── หมวด ข: the 3v3 and the five paths ────────────────────────────── */
.lens-grid { display: grid; gap: 1rem; margin: .8rem 0; }
@media (min-width: 44rem) { .lens-grid { grid-template-columns: 1fr 1fr; } }
.lens-hd { margin: 0 0 .15rem; font-size: 1.05rem; }
.lens-hd.talent { color: var(--teal); }
.lens-hd.wealth { color: var(--gold); }
.lens-sub { font-size: .78rem; color: var(--ink-faint); margin: 0 0 .55rem; line-height: 1.6; }
.lens-card { padding: .65rem .75rem; margin-bottom: .55rem; }
.lens-card.talent { border-left-color: var(--teal); }
.lens-card.wealth { border-left-color: var(--gold); }
.lens-card.weak { border-left-color: var(--crimson); }
.lc-name { font-weight: 800; font-size: .98rem; margin-bottom: .2rem; }
.lc-ask { font-weight: 600; font-size: .72rem; color: var(--ink-faint); margin-left: .3rem; }
.lc-line { font-size: .86rem; color: var(--ink-soft); margin: 0 0 .3rem; line-height: 1.65; }
.lc-words { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  font-size: .72rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-alt); border-radius: 999px; padding: .1rem .55rem;
}
.chip.hit { color: var(--ground); background: var(--gold); }
.lc-str { font-size: .76rem; font-weight: 700; margin: 0; }
.lc-str.strong { color: var(--gold); }
.lc-str.plain { color: var(--ink-faint); }
.lc-str.weak { color: var(--crimson); }
.dhana {
  border: 1px solid rgba(201, 164, 92, .45); border-radius: 12px;
  background: var(--gold-soft); color: var(--ink-soft);
  padding: .7rem .85rem; font-size: .88rem; line-height: 1.7; margin: .8rem 0;
}
/* ตำรา chain-doctrine lines inside the 12-เรือน cards — the master's own
   reading of a lord chain, shown only where the exact chain occurs.
   Reading-first (Champ 2026-08-19): the interpretation is plain prominent
   text like the rest of the card; the ตำรา provenance is the footnote, not a
   highlighted box that outshouts the reading. */
.chain-read { color: var(--ink); font-size: .86rem; line-height: 1.7; margin: .5rem 0 0; }
.doc-advice { display: block; margin-top: .25rem; color: var(--ink-soft); font-size: .8rem; }

/* the combination cards — the read first, ventures as chips, สูตรดาว as the
   provenance footnote at the bottom */
.combo-card { border-left-color: var(--teal); padding: .7rem .85rem; margin-bottom: .6rem; position: relative; }
.combo-card.strong { border-left-color: var(--gold); }
.combo-card.weak { border-left-color: var(--crimson); }
.cb-formula { font-size: .7rem; color: var(--ink-faint); margin: .4rem 0 0; letter-spacing: .01em; }
.cb-meaning { font-size: .88rem; color: var(--ink); margin: 0 0 .45rem; line-height: 1.75; }
.cb-ventures { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.cb-caution { font-size: .76rem; color: var(--crimson); margin: .4rem 0 0; line-height: 1.6; }
.combo-card .sweet-tag { position: absolute; top: .6rem; right: .7rem; font-size: .66rem; border-radius: 999px; padding: .1rem .5rem; }

.path-card { border-left-color: var(--indigo); }
.path-card.sweet { border-left-color: var(--gold); }
.sweet-tag { color: var(--ground); background: var(--gold); font-weight: 700; }
.pc-line { font-size: .84rem; color: var(--ink-soft); margin: 0 0 .35rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; }
.pc-why { font-size: .78rem; color: var(--ink-faint); margin: 0; line-height: 1.6; }

/* ง · ดวงจร — the hand-off to a live master. No astrology rendered here.
   The card is a plaque, not a list row: lacquer ground, hairline frame,
   crest-ringed portrait — the ceremonial object of the section. */
.master-card {
  position: relative; text-align: center;
  border: 1px solid rgba(201, 164, 92, .55); border-radius: 10px;
  box-shadow: inset 0 0 0 3px #0B1322, inset 0 0 0 4px rgba(201, 164, 92, .3);
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, rgba(201, 164, 92, .12), transparent 60%),
    linear-gradient(180deg, #101B2C, #0B1322 55%, #081020);
  padding: 1.4rem 1rem 1.3rem; margin: 1rem 0;
}
.mc-photo {
  width: 6.2rem; height: 6.2rem; border-radius: 50%; object-fit: cover;
  margin-inline: auto;
  /* same double-ring crest family as the hub and the supporting numbers */
  box-shadow: 0 0 0 3px #0B1322, 0 0 0 4.5px rgba(201, 164, 92, .6),
              0 0 26px rgba(227, 200, 126, .18);
  margin-bottom: .6rem;
}
/* The placeholder wears the same crest and the same ring; only the face is
   missing, which is the point — the offer is real, the person is not chosen
   yet. A dimmed silhouette rather than a blurred photo: there is no photo. */
.mc-photo-ph {
  display: flex; align-items: center; justify-content: center;
  color: rgba(201, 164, 92, .45);
  background: linear-gradient(180deg, #0E1829, #0A1220);
}
.mc-photo-ph svg { width: 3.4rem; height: 3.4rem; }
.master-card.placeholder .mc-name { color: rgba(227, 200, 126, .7); text-shadow: none; }
.mc-soon { font-size: .78rem; color: var(--ink-faint); margin: .7rem 0 0; line-height: 1.7; }

/* Wallpaper ชะตาจร — the remedy instrument's door, wearing the plaque frame
   like the wrap-up card, because it is also a doorway to something paid. */
.wp-card {
  display: block; position: relative; text-align: center; text-decoration: none;
  border: 1px solid rgba(201, 164, 92, .55); border-radius: 12px;
  box-shadow: inset 0 0 0 3px #0B1322, inset 0 0 0 4px rgba(201, 164, 92, .3);
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, rgba(201, 164, 92, .16), transparent 60%),
    linear-gradient(180deg, #101B2C, #0B1322 55%, #081020);
  padding: 1.1rem 1rem 1.2rem; margin: 0 0 1.2rem;
}
.wp-orn { display: block; width: min(100%, 17rem); height: 12px; margin: 0 auto .25rem; }
.wp-orn.flip { transform: scaleY(-1); margin: .35rem auto 0; }
.wp-name {
  font-size: 1.15rem; font-weight: 800; margin: .15rem 0 .3rem;
  background: linear-gradient(180deg, #F0DCA8, #C9A45C 62%, #9A7836);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wp-line { font-size: .84rem; color: var(--ink-soft); margin: 0 auto .1rem; line-height: 1.7; max-width: 28rem; }

/* example phone frames — abstract art in the three real derived palettes;
   swapped for actual renders when the pipeline goes live */
.wp-phones { display: flex; justify-content: center; gap: .8rem; margin: .85rem 0 .15rem; }
.wp-phone {
  display: block; width: 72px; height: 148px; border-radius: 16px;
  border: 2px solid rgba(201, 164, 92, .5); background: #050B14;
  padding: 3px; box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.wp-screen { display: block; width: 100%; height: 100%; border-radius: 11px; position: relative; overflow: hidden; }
.wp-screen::after {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 28%; height: 7px; border-radius: 999px; background: #050B14; opacity: .9;
}
.wp-pal1 { background: radial-gradient(circle at 50% 32%, #C08A4E, #6E5A3A 45%, #3A3F46 75%, #23272D); }
.wp-pal2 { background: radial-gradient(circle at 50% 66%, #F2E8DC, #D8B7A0 30%, #A93226 70%, #5C1712); }
.wp-pal3 { background: radial-gradient(circle at 50% 34%, #9B59B6, #5B2C6F 55%, #120A1A 85%); }
/* larger variant for the wallpaper page */
.wp-phones.lg { gap: 1.1rem; margin: 1.2rem 0 .2rem; }
.wp-phones.lg .wp-phone { width: 104px; height: 214px; border-radius: 22px; padding: 4px; }
.wp-phones.lg .wp-screen { border-radius: 16px; }
.wp-cta {
  display: inline-block; margin-top: .75rem;
  font-size: .95rem; font-weight: 800; color: var(--ground);
  background: linear-gradient(180deg, #E3C87E, #C9A45C);
  border-radius: 999px; padding: .6rem 1.6rem;
  box-shadow: 0 0 20px rgba(201, 164, 92, .22);
}
.wp-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── the wallpaper owner's app: timeline + library tabs ── */
.wp-tabs { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.wp-tab {
  margin: 0; font-size: .88rem; font-weight: 700; color: var(--ink-soft);
  background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .45rem 1.1rem;
}
.wp-tab.on { color: var(--ground); background: var(--gold); border-color: var(--gold); }
.wp-credit { margin-left: auto; font-size: .78rem; color: var(--gold); font-weight: 700; }
.wp-lead { font-size: .86rem; color: var(--ink-soft); line-height: 1.8; margin: 0 0 1rem; }
.wp-note { font-size: .76rem; color: var(--ink-faint); line-height: 1.7; margin: .9rem 0 0; }
.tl-item {
  border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 12px;
  background: var(--surface); padding: .75rem .9rem; margin-bottom: .6rem;
}
.tl-item.now { border-color: rgba(201, 164, 92, .5); border-left-color: var(--gold); }
.tl-item.dus { border-left-color: rgba(227, 200, 126, .55); }
.tl-when { font-size: .82rem; font-weight: 700; color: var(--gold); margin-bottom: .3rem; }
.tl-tag {
  font-size: .68rem; font-weight: 800; color: var(--ground);
  background: var(--gold); border-radius: 999px; padding: .08rem .55rem; margin-left: .5rem;
}
.tl-line { font-size: .86rem; color: var(--ink); line-height: 1.7; }
.tl-line b { color: var(--gold); }
.tl-line.soft { color: var(--ink-soft); font-size: .8rem; margin-top: .15rem; }
/* planet chips inside a period card — the library folded into the timeline */
.tl-planets { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.tl-pl {
  font-size: .72rem; font-weight: 700; border: 1px solid var(--rule); border-radius: 999px;
  padding: .1rem .55rem; color: var(--ink-soft);
}
.tl-pl.natal, .tl-pl.kali { color: var(--crimson); border-color: rgba(224, 112, 92, .5); text-decoration: line-through; }
.tl-pl.dus { color: #E3C87E; border-color: rgba(227, 200, 126, .5); }

/* topic cards on the ภาพ tab — the option a buyer taps deserves the same
   lacquer as the front-page plaque */
.pp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.pp-card {
  border: 1px solid rgba(201, 164, 92, .26); border-radius: 14px;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(201, 164, 92, .08), transparent 55%),
    linear-gradient(180deg, #0C1626, #070E1B);
  box-shadow: inset 0 1px 0 rgba(227, 200, 126, .14), 0 2px 14px rgba(0, 0, 0, .35);
  padding: .8rem .85rem;
  display: flex; align-items: center; justify-content: center; min-height: 3.6rem;
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.pp-card.off { opacity: .55; }
.sel-card { cursor: pointer; position: relative; }
.sel-card:active { transform: scale(.985); }
.pp-pct {
  position: absolute; top: .6rem; right: .7rem;
  font-size: .72rem; font-weight: 800; color: var(--ground);
  background: linear-gradient(180deg, #E3C87E, #C9A45C);
  border-radius: 999px; padding: .1rem .55rem;
  box-shadow: 0 0 10px rgba(201, 164, 92, .35);
}
.pp-card.sel {
  border-color: var(--gold);
  box-shadow: inset 0 0 20px rgba(201, 164, 92, .13), 0 0 16px rgba(201, 164, 92, .18);
}
.gal-cap b { color: var(--gold); font-weight: 700; }
.po-conv { display: block; font-size: .72rem; color: var(--gold); line-height: 1.6; margin-top: .35rem; }
.pp-life { font-size: .9rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; line-height: 1.45; }
.pp-note { font-size: .72rem; color: var(--ink-faint); line-height: 1.6; }

/* the preview card — the placeholder that becomes the result */
.pp-row { display: flex; justify-content: center; }
.pp-row.two {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  grid-auto-rows: min-content;
  gap: 0 1rem; align-items: start;
}
.pp-row.two .pp-prev { width: 100%; grid-row: 1 / span 2; }
.pp-mean {
  margin: 1rem 0 0;
  border: 1px solid rgba(201, 164, 92, .32); border-radius: 10px;
  padding: .7rem .8rem;
  font-size: .74rem; color: var(--ink-soft); line-height: 1.7;
}
.pp-mean b { color: var(--gold); font-weight: 700; }
.pm-t { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: .35rem; }
.pm-l { margin-top: .15rem; }
.pp-prompt {
  position: relative; margin: 1rem 0 0;
  border: 1px dashed var(--rule); border-radius: 10px; padding: .7rem .8rem;
  max-height: 28rem; overflow-y: auto;
}
.pp-prompt pre {
  margin: 0; font-size: .68rem; line-height: 1.6; color: var(--ink-faint);
  white-space: pre-wrap; word-break: break-word;
}
.pp-copy {
  position: sticky; top: 0; float: right; margin: 0 0 .4rem .5rem;
  font-size: .7rem; font-weight: 700; color: var(--gold);
  background: var(--surface); border: 1px solid rgba(201, 164, 92, .4);
  border-radius: 999px; padding: .2rem .7rem;
}
.pp-prev {
  width: min(13rem, 62%); aspect-ratio: 672 / 1440;
  margin: 1rem auto 0;
  border: 1px solid rgba(201, 164, 92, .4); border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(201, 164, 92, .09), transparent 60%),
    linear-gradient(180deg, #0B1424, #060C18);
  box-shadow: inset 0 1px 0 rgba(227, 200, 126, .14), 0 6px 24px rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 1rem;
}
.pp-prev img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.pp-prev.busy { animation: pp-pulse 1.6s ease-in-out infinite; }
.pv-mix { text-align: center; display: flex; flex-direction: column; gap: .5rem; }
.pv-ground {
  font-size: .82rem; font-weight: 800; letter-spacing: .06em;
  background: linear-gradient(180deg, #F0DCA4, #C9A45C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .3rem;
}
.pv-pick { font-size: .8rem; color: var(--ink); line-height: 1.5; }
.pv-pick b { display: block; color: var(--gold); font-size: 1.05rem; }
.pv-empty, .pv-busy { font-size: .78rem; color: var(--ink-faint); text-align: center; line-height: 1.7; }
.pv-busy { color: var(--gold); }

/* the ground plaque — the chart's own best planets, standing under every image */
.pp-ground {
  text-align: center; margin: 0 0 .9rem;
  border: 1px solid rgba(201, 164, 92, .35); border-radius: 14px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(201, 164, 92, .1), transparent 60%),
    linear-gradient(180deg, #0D1728, #081020);
  box-shadow: inset 0 1px 0 rgba(227, 200, 126, .16);
  padding: .75rem 1rem .7rem;
}
.pg-k { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-faint); }
.pg-v {
  font-size: 1.25rem; font-weight: 800; margin: .1rem 0;
  background: linear-gradient(180deg, #F0DCA4, #C9A45C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pg-s { font-size: .74rem; color: var(--ink-soft); line-height: 1.6; }

/* the re-sale calendar under the combination plaque — dates the sky sets */
.pp-next {
  margin: .7rem 0 0;
  padding: .55rem .9rem;
  border: 1px solid rgba(201, 164, 92, .18);
  border-radius: .55rem;
  background: rgba(201, 164, 92, .04);
}
.pn-l { font-size: .74rem; color: var(--ink-soft); line-height: 1.7; }
.pn-l b { color: #C9A45C; font-weight: 600; }

/* the highlighted form: dates are the one thing worth reading before generating */
.pp-next.hi {
  border-color: rgba(201, 164, 92, .45);
  background: linear-gradient(160deg, rgba(201, 164, 92, .10), rgba(201, 164, 92, .03));
  padding: .8rem 1.1rem;
  box-shadow: 0 0 22px rgba(201, 164, 92, .07);
}
.pp-next.hi .pn-l { font-size: .84rem; line-height: 1.9; }
.pn-t {
  font-size: .68rem;
  letter-spacing: .14em;
  color: #C9A45C;
  text-transform: none;
  margin-bottom: .25rem;
}

/* the alchemical circle: composition planets on a slow celestial ring,
   generate living at its centre */
.astro-wrap {
  position: relative;
  max-width: 340px;
  margin: 1.6rem auto 1rem;
  aspect-ratio: 1;
}
.ac-svg { width: 100%; height: 100%; display: block; }
.ac-rot { animation: ac-spin 90s linear infinite; transform-origin: 170px 170px; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ac-btn {
  pointer-events: auto;
  width: 8.2rem; height: 8.2rem; border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, .55);
  background: radial-gradient(circle at 50% 32%, rgba(201, 164, 92, .28), rgba(201, 164, 92, .08) 65%, transparent);
  color: #E8D5A9; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  font-family: inherit;
  box-shadow: 0 0 30px rgba(201, 164, 92, .14), inset 0 0 22px rgba(201, 164, 92, .08);
  transition: box-shadow .3s ease, transform .2s ease;
}
.ac-btn:hover:not(:disabled) {
  box-shadow: 0 0 44px rgba(201, 164, 92, .3), inset 0 0 26px rgba(201, 164, 92, .14);
  transform: scale(1.03);
}
.ac-btn:disabled { opacity: .55; cursor: default; }
.ac-btn span { font-size: .95rem; letter-spacing: .03em; line-height: 1.35; text-align: center; padding-inline: .6rem; }
.ac-btn small { font-size: .68rem; color: rgba(232, 213, 169, .75); }

/* one whispered line of the planets — identity without explanation */
.pp-line {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin: 1.3rem 0 .2rem;
  color: rgba(232, 213, 169, .8);
  font-size: .86rem; letter-spacing: .18em;
}
.pp-line::before, .pp-line::after {
  content: '';
  flex: 0 0 2.6rem; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .45));
}
.pp-line::after { background: linear-gradient(90deg, rgba(201, 164, 92, .45), transparent); }

/* ── the generation ceremony ── */
.gen-modal {
  position: fixed; inset: 0; z-index: 60;
  background: radial-gradient(ellipse at 50% 38%, #101624 0%, #05070d 62%, #020308 100%);
  display: flex; align-items: center; justify-content: center;
  animation: gm-in .5s ease;
}
@keyframes gm-in { from { opacity: 0; } to { opacity: 1; } }
.gm-core { text-align: center; }
.gm-orbit { position: relative; width: min(80vw, 20rem); margin: 0 auto; }
.gm-orbit .ac-svg { animation: ac-spin 60s linear infinite; transform-origin: 50% 50%; }
.gm-orbit .gm-count {
  position: absolute; inset: 0; margin: 0; min-height: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.gm-count {
  font-family: 'Cormorant Garamond', 'Charmonman', serif;
  font-size: 5.2rem; font-weight: 300; color: #E8D5A9;
  text-shadow: 0 0 34px rgba(201, 164, 92, .5);
  min-height: 6.4rem; line-height: 6.4rem;
}
.gm-count.pulse::after {
  content: '';
  display: inline-block; width: .9rem; height: .9rem; border-radius: 50%;
  background: #E8D5A9; box-shadow: 0 0 26px rgba(232, 213, 169, .9);
  animation: gm-pulse 1.4s ease-in-out infinite;
}
@keyframes gm-pulse { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
.gm-line { color: rgba(240, 234, 220, .75); font-size: .95rem; letter-spacing: .06em; margin-top: .6rem; }
.gm-dust {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(232, 213, 169, .85);
  box-shadow: 0 0 8px rgba(232, 213, 169, .8);
  animation-name: gm-drift; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  opacity: 0;
}
@keyframes gm-drift {
  0% { transform: translateY(12px) scale(.6); opacity: 0; }
  30% { opacity: .9; }
  70% { opacity: .5; }
  100% { transform: translateY(-46px) scale(1); opacity: 0; }
}
.gm-reveal {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  animation: gm-in 1.2s ease;
  max-height: 100vh; padding: 1.2rem 0;
}
.gm-reveal img {
  max-height: 72vh; max-width: 88vw; border-radius: 1.1rem;
  box-shadow: 0 0 60px rgba(201, 164, 92, .22);
}
.gm-close { padding: .5rem 2.4rem; align-self: center; }
.gm-bless {
  text-align: center; color: #E3C87E; font-size: 1.18rem; font-weight: 600;
  line-height: 1.7; letter-spacing: .05em;
  text-shadow: 0 0 22px rgba(227, 200, 126, .35);
  padding-inline: 1.4rem;
}
/* the two buttons under the reveal share one height so they sit on one line */
.gm-reveal .gm-love, .gm-reveal .gm-close {
  height: 2.5rem; padding-block: 0;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; box-sizing: border-box; margin: 0; align-self: auto;
}
.pp-btn {
  margin: .35rem 0 0; align-self: flex-start;
  font-size: .8rem; font-weight: 800; color: var(--ground);
  background: linear-gradient(180deg, #E3C87E, #C9A45C);
  border: 0; border-radius: 999px; padding: .45rem 1.1rem;
}
.pp-btn:disabled { opacity: .45; }
.pp-busy { font-size: .78rem; color: var(--gold); font-weight: 700; animation: pp-pulse 1.4s ease-in-out infinite; }
@keyframes pp-pulse { 50% { opacity: .35; } }

/* คลัง — a seamless album: no text, the images speak; tap for the story */
.gal-album {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  /* full bleed: escape main's gutter so the album runs edge to edge */
  margin-inline: -.85rem;
  overflow: hidden;
}
/* line-height/font-size zeroed: the whitespace inside the button was adding
   an invisible line box under each image, so the row gaps read wider than
   the column gaps */
.gal-cell {
  display: block; padding: 0; border: 0; margin: 0;
  background: var(--surface); cursor: pointer;
  font-size: 0; line-height: 0;
}
.gal-cell img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* tester code redemption on the till — deliberately faint */
.pw-codelink { text-align: center; margin: 1.1rem 0 0; font-size: .76rem; }
.pw-codelink a { color: var(--ink-faint); text-decoration: underline; }
.pw-codebox { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.pw-codebox input {
  flex: 1 1 10rem; max-width: 14rem; font: inherit; font-size: .88rem;
  color: var(--ink); background: var(--surface-alt);
  border: 1px solid var(--rule); border-radius: 10px; padding: .5rem .8rem;
  text-transform: uppercase;
}
.pw-codebox button {
  font-size: .82rem; font-weight: 700; color: var(--ground);
  background: linear-gradient(180deg, #E3C87E, #C9A45C);
  border: 0; border-radius: 999px; padding: .5rem 1.2rem;
}
.pw-codebox button:disabled { opacity: .5; }
.pw-codebox .pw-note { flex: 1 1 100%; text-align: center; margin: 0; }

.gal-buy { margin-top: 1.4rem; text-align: center; }
.gal-buy a {
  display: inline-block; text-decoration: none;
  font-size: .8rem; font-weight: 700; color: var(--gold);
  border: 1px solid rgba(201, 164, 92, .5); border-radius: 999px; padding: .45rem 1.4rem;
}
.gal-title {
  margin: 1.6rem 0 .7rem; text-align: center;
  font-size: .82rem; font-weight: 700; letter-spacing: .14em;
  color: var(--gold); text-transform: none;
}
.gal-cell { position: relative; }
.gal-love {
  position: absolute; right: .55rem; bottom: .55rem;
  width: 1rem; height: 1rem; pointer-events: none;
}
.gal-love svg { width: 100%; height: 100%; fill: #E3C87E; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .65)); }
.gm-love {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; color: var(--gold);
  background: none; border: 1px solid rgba(201, 164, 92, .5); border-radius: 999px; padding: .45rem 1rem;
}
.gm-love svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; }
.gm-love.on { color: #E8D5A9; border-color: rgba(227, 200, 126, .65); }
.gm-love.on svg { fill: #E3C87E; stroke: #E3C87E; }
.gm-del {
  font-size: .8rem; font-weight: 700; color: var(--ink-faint);
  background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .45rem 1rem;
}
.gm-del.arm { color: #E0705C; border-color: rgba(224, 112, 92, .55); }
/* the frozen career reading — a document behind a portal, so it opens as a
   quiet page over the page rather than another chrome-heavy card */
.cr-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3, 6, 12, .92); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 1.2rem 1rem 2.4rem;
}
.cr-card {
  width: min(34rem, 94vw); margin-top: 1.4rem;
  border: 1px solid rgba(201, 164, 92, .4); border-radius: 16px;
  background: linear-gradient(180deg, #0C1626, #070E1B);
  box-shadow: inset 0 1px 0 rgba(227, 200, 126, .14), 0 12px 40px rgba(0, 0, 0, .6);
  padding: 1.4rem 1.2rem 1.2rem;
}
.cr-title {
  text-align: center; margin: 0 0 1rem;
  font-size: 1.2rem; font-weight: 800;
  background: linear-gradient(180deg, #F0DCA4, #C9A45C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cr-h { color: var(--gold); font-size: .95rem; font-weight: 700; margin: 1.2rem 0 .4rem; }
.cr-p { font-size: .92rem; line-height: 1.95; color: var(--ink-soft); margin: 0 0 .7rem; }
.cr-path { margin: 0 0 .9rem; }
.cr-pname { font-weight: 800; color: var(--ink); font-size: .95rem; margin-bottom: .15rem; }
.cr-close-p { margin-top: 1.1rem; color: var(--ink); }
.cr-modal .gm-btns { margin-top: 1rem; }

/* ── บทวิเคราะห์ดวงชะตากำเนิด — the frozen document on reading.html (2026-09-17) ── */
/* The paid document's page (Champ 2026-09-17: a document, not a receipt).
   One face for what is said in one breath (thesis, chapter and career titles:
   Maitree, a Thai serif cut for long reading), the site sans for the body.
   No boxes: a topic is an eyebrow over prose, a career is a titled section
   between hairlines, and the only full rule marks the chapter. */
.in-wrap { --read: #C3CDDA; --serif: 'Maitree', 'Sukhumvit Set', 'Noto Sans Thai', serif; max-width: 36rem; margin: 0 auto; padding: 0 1rem 3rem; }
.in-brand { text-align: center; padding-top: 2.2rem; }
.in-brand .word a { color: inherit; text-decoration: none; }
.in-page { margin-top: 2.2rem; text-align: left; }
.in-title { font-size: .72rem; letter-spacing: .14em; font-weight: 700; color: var(--gold); margin: 0 0 .25rem; text-align: center; }
.in-sub { text-align: center; font-size: .78rem; color: var(--ink-faint); margin: 0 0 1.8rem; line-height: 1.7; }
.in-wait { text-align: center; font-size: .92rem; color: var(--ink-soft); line-height: 1.9; padding: .8rem 0; }
.in-wait a.cs-cta, a.in-unlock { display: inline-block; text-decoration: none; }
.in-thesis {
  font-family: var(--serif); font-size: 1.32rem; line-height: 1.7; font-weight: 500; color: var(--ink);
  margin: 0 0 1.6rem; text-wrap: pretty;
}
.in-toc { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.4rem; margin: 0 0 2.2rem; padding: .9rem 0 1rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.in-toc-l { display: block; font-size: .68rem; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: .45rem; text-decoration: none; }
.in-toc-head { color: var(--gold); font-weight: 700; }
.in-toc ul { list-style: none; margin: 0; padding: 0; }
.in-toc li { font-size: .84rem; line-height: 1.75; }
.in-toc a { color: var(--ink-soft); text-decoration: none; }
.in-toc a:hover, .in-toc a:focus-visible { color: var(--gold); }
.in-topic {
  font-size: .72rem; letter-spacing: .12em; color: var(--gold); font-weight: 700;
  margin: 2rem 0 .5rem; padding: .55rem 0 0; border: 0; border-top: 2px solid var(--gold);
  display: inline-block; scroll-margin-top: 1rem;
}
.in-topic + .in-p { margin-top: 0; }
.in-p { font-size: 1rem; line-height: 1.85; color: var(--read); margin: 0 0 .9rem; }
.in-p:last-child { margin-bottom: 0; }
.in-close { color: var(--ink); margin-top: 1.4rem; }
.in-chapter { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(201, 164, 92, .5); scroll-margin-top: 1rem; }
.in-no { display: block; font-size: .72rem; letter-spacing: .14em; color: var(--gold); font-weight: 700; margin-bottom: .3rem; }
.in-h {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; font-weight: 500; color: var(--ink);
  margin: 0 0 1rem; padding: 0; border: 0; text-wrap: pretty;
}
.in-career { margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.in-career-t { font-family: var(--serif); font-size: 1.18rem; line-height: 1.5; font-weight: 500; color: var(--ink); margin: 0 0 .45rem; text-wrap: pretty; }
.in-stars { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; margin: 0 0 .8rem; }
.in-star-row { letter-spacing: .12em; color: var(--gold); }
.in-stars-big .in-star-row { font-size: 1.3rem; }
.in-star-n { font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.in-star-why { flex-basis: 100%; font-size: .76rem; color: var(--ink-faint); }
.in-star-why summary { cursor: pointer; color: var(--ink-faint); text-decoration: underline dotted; text-underline-offset: .2em; list-style: none; }
.in-star-why summary::-webkit-details-marker { display: none; }
.in-star-why ul { margin: .3rem 0 0; padding-left: 1.1rem; line-height: 1.7; }
.in-lock { border: 1px solid rgba(201, 164, 92, .35); border-radius: 12px; background: rgba(201, 164, 92, .06); padding: 1rem 1.1rem; text-align: center; margin-top: 1rem; }
.in-lock .in-p { margin-bottom: .8rem; }
.in-foot { font-size: .74rem; color: var(--ink-faint); margin: 2.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); text-align: center; }
.in-back { text-align: center; margin-top: 1.4rem; font-size: .9rem; }
.in-back a { color: var(--gold); }
@media (min-width: 640px) {
  .in-thesis { font-size: 1.55rem; }
  .in-h { font-size: 1.7rem; }
}

.gal-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(3, 6, 12, .86); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.gm-card {
  width: min(22rem, 94vw); max-height: 92vh; overflow-y: auto;
  border: 1px solid rgba(201, 164, 92, .4); border-radius: 16px;
  background: linear-gradient(180deg, #0C1626, #070E1B);
  box-shadow: inset 0 1px 0 rgba(227, 200, 126, .14), 0 12px 40px rgba(0, 0, 0, .6);
  padding: .8rem;
}
.gm-card > img { width: 100%; height: 58vh; object-fit: cover; border-radius: 10px; background: #000; }
.gm-info { text-align: center; margin: .7rem 0; }
.gm-pl {
  font-size: 1rem; font-weight: 800;
  background: linear-gradient(180deg, #F0DCA4, #C9A45C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gm-valid { font-size: .84rem; font-weight: 600; color: var(--gold); }
.gm-valid.old { color: var(--ink-soft); }
.gm-save { font-size: .76rem; color: var(--ink-faint); margin-top: .3rem; }
.gm-btns { display: flex; gap: .5rem; justify-content: center; align-items: center; }
.gm-close {
  font-size: .8rem; font-weight: 700; color: var(--ink-soft);
  background: none; border: 1px solid var(--rule); border-radius: 999px; padding: .45rem 1.1rem;
}
.mc-orn { display: block; width: min(100%, 17rem); height: 12px; margin: .1rem auto .45rem; }
.mc-name {
  font-weight: 800; font-size: 1.15rem; color: #E3C87E; line-height: 1.5;
  text-shadow: 0 0 18px rgba(227, 200, 126, .25); margin-bottom: .1rem;
}
.mc-line { font-size: .84rem; color: var(--ink-soft); margin: 0 0 .8rem; line-height: 1.6; }
.mc-row { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; }
.mc-price { font-size: .9rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.mc-cta {
  appearance: none; background: var(--gold); border: 0; cursor: pointer;
  font-size: .84rem; font-weight: 700; color: var(--ground);
  border-radius: 999px; padding: .45rem 1.2rem;
}

/* ── ห้องอ่านสด ──
   Deliberately plainer than the booking card above it. That card sells a
   future service and is allowed to look like an object; this one is a door
   that is either open or shut, and dressing it up would make a closed room
   look like an offer. The dot carries the whole state: lit for open, dim for
   busy, dark for closed. */
.live {
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); padding: 1rem 1rem .9rem; margin: 1rem 0 0;
}
.lv-top { display: flex; align-items: center; gap: .55rem; }
.lv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.lv-dot.on { background: var(--teal); box-shadow: 0 0 10px rgba(95, 201, 186, .7); }
.lv-dot.busy { background: var(--gold); }
.lv-dot.off { background: #26344A; }
.lv-state { font-weight: 700; font-size: .92rem; color: var(--ink); }
.lv-line { font-size: .84rem; color: var(--ink-soft); line-height: 1.75; margin: .4rem 0 0; }
.lv-cta {
  appearance: none; background: var(--gold); border: 0; cursor: pointer;
  font-size: .84rem; font-weight: 700; color: var(--ground);
  border-radius: 999px; padding: .45rem 1.3rem; margin: .85rem 0 .1rem;
}
.lv-cta[disabled] { opacity: .45; cursor: default; }
.lv-room { margin-top: .85rem; }
.lv-log {
  max-height: 20rem; overflow-y: auto; padding: .2rem .1rem .1rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.lv-msg {
  margin: 0; font-size: .87rem; line-height: 1.7; padding: .5rem .75rem;
  border-radius: 10px; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere;
}
.lv-hist {
  align-self: center; font-size: .76rem; font-weight: 600; color: var(--ink-faint);
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  padding: .3rem .9rem; margin-bottom: .2rem; cursor: pointer;
}
.lv-me { align-self: flex-end; background: var(--surface-alt); color: var(--ink); }
.lv-them { align-self: flex-start; background: var(--gold-soft); color: var(--ink); border: 1px solid rgba(201, 164, 92, .3); }
.lv-form { display: flex; gap: .5rem; margin-top: .7rem; }
.lv-form input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: .88rem;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .7rem;
}
.lv-form input:focus { outline: none; border-color: rgba(201, 164, 92, .55); }
.lv-form button {
  appearance: none; background: var(--gold); border: 0; cursor: pointer;
  font-size: .84rem; font-weight: 700; color: var(--ground);
  border-radius: 8px; padding: .5rem 1rem;
}
.lv-out {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .78rem; color: var(--ink-faint);
  padding: .5rem 0 0; text-decoration: underline; text-underline-offset: 3px;
}

/* ── ๑ เช็กดวงกำเนิด: the checklist groups (2026-08-23, the ๑-๔ prose left
   this page — each card asserts, the reader scores, the derivation folds) ── */
.ck-domain {
  font-size: 1rem; font-weight: 800; color: var(--gold);
  margin: 1.7rem 0 .55rem; letter-spacing: .02em;
}
.ck-group:first-child .ck-domain { margin-top: .6rem; }
.ck-read { font-size: .88rem; color: var(--ink-soft); line-height: 1.7; margin: 0 0 .3rem; }
.ck-why { margin: .1rem 0 .35rem; font-size: .85rem; }
.ck-why summary {
  cursor: pointer; color: var(--ink-faint); list-style: none;
  text-decoration: underline; text-underline-offset: 3px;
}
.ck-why summary::-webkit-details-marker { display: none; }
.ck-why .meaning { margin-top: .35rem; color: var(--ink-soft); }

/* the wrap-up between ๑ and ๒: the reader's own score handed back, framed in
   the plaque's line family — hairline gold, double inner line, the same
   ornament rule — because this card is also the doorway to the paid tier */
.ck-sum {
  position: relative; text-align: center;
  border: 1px solid rgba(201, 164, 92, .55); border-radius: 12px;
  box-shadow: inset 0 0 0 3px #0B1322, inset 0 0 0 4px rgba(201, 164, 92, .3);
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, rgba(201, 164, 92, .16), transparent 60%),
    linear-gradient(180deg, #101B2C, #0B1322 55%, #081020);
  padding: 1.1rem 1rem 1.2rem; margin: 1.6rem 0 .3rem;
}
.ck-sum .cs-orn { display: block; width: min(100%, 17rem); height: 12px; margin: 0 auto .2rem; }
.ck-sum .cs-orn.flip { transform: scaleY(-1); margin: .3rem auto 0; }
.ck-sum .cs-big {
  font-size: 2.8rem; font-weight: 800; line-height: 1.15;
  margin: .15rem 0 0; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #F0DCA8, #C9A45C 62%, #9A7836);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ck-sum .cs-line { font-size: .88rem; color: var(--ink-soft); margin: .3rem 0 .15rem; line-height: 1.7; }
.ck-sum .cs-note { font-size: .84rem; color: var(--ink-faint); margin: .3rem 0 .15rem; line-height: 1.7; }
.ck-sum .cs-pitch { font-size: .8rem; color: var(--ink-faint); margin: .7rem 0 .5rem; }
.ck-sum .cs-cta, .in-wrap .cs-cta {
  appearance: none; border: 0; cursor: pointer; margin: 0;
  font-size: .95rem; font-weight: 800; color: var(--ground);
  background: linear-gradient(180deg, #E3C87E, #C9A45C);
  border-radius: 999px; padding: .6rem 1.6rem;
  box-shadow: 0 0 20px rgba(201, 164, 92, .22);
}
.ck-sum .cs-cta:focus-visible, .in-wrap .cs-cta:focus-visible { outline: 2px solid #E3C87E; outline-offset: 2px; }

/* ── the ๑-๕ report sections ── */
.rp-item { margin: 0 0 1.1rem; }
.rp-title { font-size: .95rem; color: var(--gold); margin: 0 0 .25rem; font-weight: 700; }
.rp-text { font-size: .92rem; line-height: 1.85; color: var(--ink); margin: 0 0 .25rem; }
.rp-why { font-size: .74rem; color: var(--ink-soft); margin: 0; }
#rp-identity .rp-item { margin-bottom: .9rem; }

/* embedded checklist inside report items */
.rp-claims { list-style: none; padding: .35rem 0 0; margin: 0 0 .3rem; }
.rp-claims li { margin: .25rem 0; font-size: .87rem; line-height: 1.6; }
.rp-claims label { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.rp-claims input.mk-box { margin-top: .25rem; accent-color: var(--gold); flex: none; }
.rp-claims.done li { display: flex; gap: .5rem; align-items: baseline; }
.rp-claims.done .mk { font-size: .7rem; border-radius: 999px; padding: 0 .5rem; flex: none; border: 1px solid; }
.rp-claims.done li.yes .mk { color: var(--gold); border-color: rgba(201,164,92,.5); }
.rp-claims.done li.no .mk { color: var(--ink-soft); border-color: rgba(147,163,184,.4); }

/* section ๕ additions: the combo tag on a path (สูตรดาวชี้ตรง), the
   demotion note, and the closing conditions list the file ends ๕ with */
.path-card .combo-tag { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.pc-note { font-size: .76rem; color: var(--ink-faint); margin: .45rem 0 0; line-height: 1.6; border-left: 2px solid var(--rule); padding-left: .55rem; }
.conds { margin: .5rem 0 0; padding-left: 1.15rem; }
.conds li { margin: 0 0 .6rem; line-height: 1.7; }


/* section ๕ · คำที่ดวงพูด — a domain card is a claim plus its working. The
   working is set quieter than the claim but never hidden: the reader is meant
   to be able to walk it, and a derivation behind a disclosure triangle is a
   derivation nobody checks. */
.lit-card { border-left-color: var(--gold); }
.lit-via { list-style: none; margin: .1rem 0 0; padding: 0; }
.lit-via li {
  font-size: .84rem; line-height: 1.9; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem;
  padding: .18rem 0; border-top: 1px solid var(--rule);
}
.lit-via li:first-child { border-top: 0; }
.lit-via b { color: var(--ink); font-weight: 700; }
.lv-arrow { color: var(--ink-faint); }
.lit-thin { font-size: .78rem; color: var(--ink-faint); line-height: 1.7; margin: .6rem 0 .8rem; }

/* ทิศทางของงาน — the career lord's landing, and whatever is tied to it. Sits
   above the domains because it answers a different question: not what the
   chart points at, but which way the work went. */
.tie-sense { font-size: .82rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 .25rem; }
.tie-sense b { color: var(--gold); font-weight: 700; }
.tie-line { font-size: .84rem; line-height: 1.8; color: var(--ink); margin: 0 0 .3rem; }


/* ── ๕ · ทิศทางของงาน ────────────────────────────────────────────────────
   A reading, not a card of chips. The lead states the direction; the chain
   below is a labelled column the reader can walk down — เรือน, then the ดาว
   that owns it, then where it went — which is how the hand-written folio sets
   out a lord chain. The literal words are ONE quiet line: they are the
   planet's vocabulary, not four separate findings, and pilling them made the
   section read like a tag cloud. */
.dir-lead { font-size: .98rem; line-height: 1.9; color: var(--ink); margin: 0 0 .9rem; text-wrap: pretty; }

.dir-chain { margin: 0 0 .7rem; padding: 0; border-top: 1px solid var(--rule); }
.dc-row {
  display: grid; grid-template-columns: 7.4rem 1fr; gap: .2rem .8rem;
  padding: .48rem 0; border-bottom: 1px solid var(--rule);
}
.dc-row dt { font-size: .78rem; color: var(--ink-faint); line-height: 1.7; }
.dc-row dd { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--ink-soft); }
.dc-row dd b { color: var(--ink); font-weight: 700; }
.dc-dig { color: var(--gold); font-size: .78rem; }
.dc-words { color: var(--ink-soft); }

.dir-cond { font-size: .85rem; line-height: 1.8; color: var(--ink-soft); margin: 0 0 .2rem; }

.dir-sub { font-size: .84rem; font-weight: 700; color: var(--ink); margin: 1rem 0 .1rem; }
.dir-sub-note { font-size: .76rem; color: var(--ink-faint); margin: 0 0 .5rem; }
.tie { border-left: 2px solid var(--rule); padding-left: .75rem; margin: 0 0 .7rem; }
.tie-sense { font-size: .82rem; line-height: 1.75; color: var(--ink-faint); margin: 0 0 .3rem; }
.tie-rel {
  color: var(--gold); font-weight: 700; margin-right: .35rem;
  border: 1px solid rgba(201,164,92,.4); border-radius: 999px; padding: .02rem .5rem; font-size: .74rem;
}
.tie-line { font-size: .88rem; line-height: 1.75; color: var(--ink); margin: 0 0 .35rem; }
.tie-seat { font-size: .76rem; color: var(--ink-faint); }
.dir-src { font-size: .74rem; color: var(--ink-faint); margin: .7rem 0 0; padding-top: .55rem; border-top: 1px solid var(--rule); }

/* ── the gate, card ๔ of the pile ───────────────────────────────────────
   It used to be a free-standing plaque below the reading, which made it read
   as an ad sitting next to the section. Numbered into the same series and cut
   from the same card stock, it reads as the part of the reading that is still
   face down — which is what it actually is. The locked rows stay pure CSS: a
   gate that leaks its answer is not a gate, and one that shows fake rows to
   look full is worse. */
.gate-line { font-size: .84rem; line-height: 1.85; color: var(--ink-soft); margin: 0 auto .8rem; max-width: 30rem; }
.gate-locked { list-style: none; margin: 0 0 .9rem; padding: 0; max-width: 22rem; }
.gate-locked li { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; }
.gl-rank { font-size: .82rem; color: rgba(201,164,92,.55); width: 1rem; text-align: right; flex: none; }
.gl-bar {
  height: 9px; border-radius: 999px; flex: none;
  background: linear-gradient(90deg, rgba(201,164,92,.3), rgba(201,164,92,.07));
}
.gate-row { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; }
.gate-price { font-size: .9rem; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.gate-cta {
  appearance: none; background: var(--gold); border: 0; cursor: pointer;
  font-size: .86rem; font-weight: 700; color: var(--ground);
  border-radius: 999px; padding: .48rem 1.35rem;
}
.gate-cta:disabled { background: rgba(201,164,92,.3); color: var(--ink-faint); cursor: default; }
.gate-note { font-size: .78rem; color: var(--ink-soft); margin: .6rem 0 0; min-height: 1rem; }
.gate-note:empty { min-height: 0; }
/* A clause the chart overruled reads as a finding, not as a warning box: the
   flipped register is still a reading, and boxing it in red would make the
   ตำรา's generic promise look like the truth it failed to live up to. */
.dir-clause { font-size: .88rem; line-height: 1.85; color: var(--ink); margin: 0 0 .7rem; }
.dir-clause .rule-note { display: block; margin-top: .15rem; }
.dir-clause.flipped { border-left: 2px solid rgba(201,164,92,.45); padding-left: .7rem; }


/* ๕ in three parts. Numbered because they answer three different questions —
   the ลัคนา's field, the direction the work went, the bodies doing it — and
   running them together is what turned this section into a chip pile before. */
.lit-part {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px;
  padding: .9rem 1rem .8rem; margin: 0 0 .6rem;
}
.lp-head { display: flex; align-items: baseline; gap: .5rem; font-size: .92rem; font-weight: 800; color: var(--ink); margin: 0 0 .5rem; }
.lp-num { color: var(--gold); font-size: 1rem; }

/* the portal card, still locked: these rules were lost with the deck block on
   2026-09-07 and put back 2026-09-17 when the lock rendered at full width */
/* card ๔ — same stock, still locked when it comes up */
.lit-locked {
  border-color: rgba(201, 164, 92, .5);
  border-left-color: var(--gold);
  background:
    radial-gradient(ellipse 80% 120% at 50% -20%, rgba(201, 164, 92, .1), transparent 60%),
    linear-gradient(180deg, #101B2C, #0B1322 55%, #081020);
}
.lp-lock { width: .78rem; height: .9rem; color: var(--gold); flex: none; margin-left: auto; }
.lit-locked .gate-line { font-size: .84rem; line-height: 1.85; color: var(--ink-soft); margin: 0 0 .85rem; }
.lit-locked .gate-row { justify-content: flex-start; }
.lit-locked .gate-note { text-align: left; }


.lord { border-top: 1px solid var(--rule); padding-top: .6rem; margin-top: .6rem; }
.lord:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.lord-hd { font-size: .9rem; line-height: 1.7; margin: 0 0 .2rem; color: var(--ink); }
.lord-role {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-faint); margin-bottom: .1rem;
}
.lord-words { font-size: .84rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 .35rem; }
.tie-none { font-size: .82rem; color: var(--ink-faint); margin: 0 0 .3rem; }

/* The reading itself, which is what a body is here for. It leads; the ราศี and
   ภพ coordinates sit above it in small type as provenance, not as the answer. */
.lord-work { font-size: .88rem; line-height: 1.85; color: var(--ink); margin: 0 0 .35rem; }
.lord-support { font-size: .78rem; line-height: 1.7; color: var(--ink-faint); margin: .2rem 0 .3rem; }
/* ๒'s supporting lines — one falsifiable headline, then the texture under it. */
.dir-more { font-size: .86rem; line-height: 1.85; color: var(--ink-soft); margin: 0 0 .45rem; }


/* ๓ reads as prose now — one paragraph per body, no name, no seat, no chips
   (Champ 2026-08-20). The join line is the only thing between two of them. */
.lord-join { font-size: .82rem; line-height: 1.8; color: var(--ink-faint); margin: 0 0 .3rem; }

/* ── footer ──
   The document's ending. Muted on purpose: it is the only thing after the
   reading, and anything with weight here would compete with the last section
   the reader actually came for. */
.foot {
  max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1rem 4rem;
  border-top: 1px solid var(--rule); margin-top: 3rem;
  text-align: center; font-size: .78rem; color: var(--ink-faint); line-height: 1.9;
}
.foot a {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid rgba(147, 163, 184, .35); padding-bottom: 1px;
}
.foot a:hover { color: var(--gold); border-bottom-color: rgba(201, 164, 92, .6); }
.foot p { margin: .9rem 0 0; }
.foot-c { letter-spacing: .12em; margin-top: .5rem !important; }

/* The waiting bubble. Same shape as a spoken line because it occupies the same
   place in the conversation, but hollow — an outline where an answer will go,
   rather than something pretending to be one. */
.lv-waiting { background: none; border: 1px dashed rgba(201, 164, 92, .35); color: var(--ink-faint); font-size: .82rem; }
.lv-dots { display: inline-flex; gap: 3px; margin-left: .45rem; vertical-align: baseline; }
.lv-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .3; animation: lv-pulse 1.4s infinite; }
.lv-dots i:nth-child(2) { animation-delay: .2s; }
.lv-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes lv-pulse { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lv-dots i { animation: none; opacity: .6; } }

/* Evidence under the claim it is about. Muted below the claim text on purpose:
   the reader's own answer is the foreground, everyone else's is context. */
.mk-ev {
  display: block; margin: .2rem 0 0 1.65rem;
  font-size: .74rem; color: var(--ink-faint); line-height: 1.7;
}

/* ── share ──
   Quiet by default. It is an offer, not the point of the page. */
.op-share-row { text-align: center; margin: .9rem 0 .2rem; }
.op-share {
  appearance: none; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--gold); background: none;
  border: 1px solid rgba(201, 164, 92, .45); border-radius: 999px;
  padding: .45rem 1.15rem;
}
.op-share:hover { background: rgba(201, 164, 92, .12); }
.op-share[disabled] { opacity: .55; cursor: default; }


/* tap-to-fullscreen inside the page — no new tab, no URL surfaced */
.img-full {
  position: fixed; inset: 0; z-index: 70; background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: fade-in .25s ease;
}
.img-full img { width: 100%; height: 100%; object-fit: contain; }

/* ── page transitions ──────────────────────────────────────────────────────
   Cross-document: the View Transitions API gives same-origin navigations a
   soft crossfade in browsers that know it and costs nothing in those that
   do not. In-page: the owner app rises in once on boot, staggered; a fresh
   image and newly loaded album cells fade up on arrival. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

#wp-view.enter > * { animation: fade-up .65s ease both; }
#wp-view.enter > *:nth-child(2) { animation-delay: .12s; }
#wp-view.enter > *:nth-child(3) { animation-delay: .24s; }
#wp-view.enter > *:nth-child(4) { animation-delay: .36s; }
#wp-view.enter > *:nth-child(5) { animation-delay: .48s; }

.pp-row.two { animation: fade-up .7s ease both; }
.gal-cell img { animation: fade-in .55s ease both; }
.gal-modal .gm-card { animation: fade-up .35s ease both; }

@media (prefers-reduced-motion: reduce) {
  #wp-view.enter > *, .pp-row.two, .gal-cell img, .gal-modal .gm-card,
  .ac-rot, .gm-dust, .gm-count.pulse::after, .gm-orbit .ac-svg { animation: none; }
}

/* the circle's glyphs are the dominant-planet picker (2026-09-03) */
.ac-svg .ac-pick { cursor: pointer; pointer-events: all; }
.ac-svg .ac-pick:hover text { fill-opacity: 1; }
.ac-svg .ac-pick:focus-visible { outline: none; }
.ac-svg .ac-pick:focus-visible text { fill: #fff; }

/* the choosing plaque under the circle (2026-09-03): no box — the words float
   on the sky between two ornament rules, a soft gold glow behind the name.
   Same line family as the summary crest, deliberately not the same card.
   A house name never appears here. */
.fc-pick { position: relative; text-align: center; margin: 1rem 0 .3rem; padding: .2rem 0 .1rem; }
.fc-pick::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 50% 42%, rgba(201, 164, 92, .13), transparent 70%);
}
.fc-pick .cs-orn { display: block; width: min(100%, 17rem); height: 12px; margin: 0 auto .1rem; }
.fc-pick .cs-orn.flip { transform: scaleY(-1); margin: .35rem auto 0; }
.fc-pick .fp-name {
  position: relative; display: inline-flex; align-items: baseline; gap: .55rem;
  font-size: 2.4rem; font-weight: 800; line-height: 1.15; margin: .25rem 0 0;
  background: linear-gradient(180deg, #F0DCA8, #C9A45C 62%, #9A7836);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fc-pick .fp-sym { font-weight: 400; font-size: 2.2rem; }
.fc-pick .cs-line { position: relative; font-size: .9rem; color: var(--ink-soft); margin: .25rem 0 .1rem; line-height: 1.7; }
.fc-pick .cs-line b { color: #E3C87E; font-weight: 600; }
.fc-pick .cs-note { position: relative; font-size: .8rem; color: var(--ink-faint); margin: .35rem auto .1rem; line-height: 1.7; max-width: 30rem; }
/* the plaque changes hands: the glow breathes and the words rise on the render right after a pick */
.fc-pick.swap::before { animation: fc-glow .7s ease-out; }
.fc-pick.swap .fp-name, .fc-pick.swap .cs-line { animation: fc-swap-in .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes fc-glow { 0% { opacity: .2; transform: scale(.85); } 45% { opacity: 1.6; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes fc-swap-in { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc-pick.swap::before, .fc-pick.swap .fp-name, .fc-pick.swap .cs-line { animation: none; } }

/* the sigil re-forms when the dominant changes (2026-09-03): chords draw out of
   the new point, two rings of light leave it for the rim, the rim breathes,
   the halo settles. Gold, slow, once. */
.ac-svg.swap .ac-chord { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ac-draw .9s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
.ac-svg.swap .ac-poly { animation: ac-poly 1.1s ease-out; }
.ac-svg.swap .ac-rim { animation: ac-breathe 1.4s ease-in-out; transform-origin: 170px 170px; }
.ac-svg.swap .ac-halo { animation: ac-halo .8s cubic-bezier(.2, .7, .2, 1); transform-origin: center; transform-box: fill-box; }
.ac-svg.swap .ac-lit { animation: ac-lit .8s ease-out; }
.ac-svg .ac-burst { opacity: 0; transform-origin: center; transform-box: fill-box; animation: ac-burst 1.3s cubic-bezier(.1, .6, .2, 1) forwards; }
.ac-svg .ac-burst.late { animation-delay: .18s; animation-duration: 1.5s; }
@keyframes ac-draw { to { stroke-dashoffset: 0; } }
@keyframes ac-poly { 0% { stroke-opacity: .28; } 30% { stroke-opacity: .7; } 100% { stroke-opacity: .28; } }
@keyframes ac-breathe { 0% { stroke-opacity: .3; transform: scale(1); } 40% { stroke-opacity: .6; transform: scale(1.012); } 100% { stroke-opacity: .3; transform: scale(1); } }
@keyframes ac-halo { 0% { transform: scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ac-lit { 0% { fill: #fff; } 100% { fill: #E8D5A9; } }
@keyframes ac-burst { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(18); } }
@media (prefers-reduced-motion: reduce) { .ac-svg.swap .ac-chord, .ac-svg.swap .ac-poly, .ac-svg.swap .ac-rim, .ac-svg.swap .ac-halo, .ac-svg.swap .ac-lit, .ac-svg .ac-burst { animation: none; } .ac-svg.swap .ac-chord { stroke-dashoffset: 0; } .ac-svg .ac-burst { display: none; } }