/* =============================================================
   Mantle - Tarot Instrument
   Stylesheet for both Night (dark) and Parchment (light) modes.
   ============================================================= */

/* --- Fonts ---
   Mantle is set in Fraunces (variable, with the WONK axis turned on).
   The Google Fonts <link> in base.html serves the variable file with
   all axes, but local() comes first so a system-installed Fraunces is
   preferred when present. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Fraunces");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: local("Fraunces Italic");
}

/* --- Tokens --- */

:root {
  --serif: "Fraunces", "Cormorant Garamond", "EB Garamond", Georgia,
           "Times New Roman", serif;
  --mono:  ui-monospace, "JetBrains Mono", "Söhne Mono",
           "SF Mono", Consolas, monospace;

  --red: #a13434;
  --red-soft: #b85959;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;
}

body.theme-night {
  --bg:        #0c0c0c;
  --fg:        #e9deca;
  --fg-muted:  #8a8270;
  --fg-faint:  #4a4538;
  --rule:      #25241f;
  --rule-soft: #1a1a16;
  --card-bg:   #14130f;
}

body.theme-parchment {
  --bg:        #f1e8d0;
  --fg:        #1a1815;
  --fg-muted:  #6c6655;
  --fg-faint:  #b9ad8c;
  --rule:      #d4c8a4;
  --rule-soft: #e2d8b6;
  --card-bg:   #ece2c4;
}

/* --- Reset --- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* WONK is OFF at body sizes — it reads as bold below ~24px.
     Optical sizing tracks font-size automatically. */
  font-optical-sizing: auto;
}

/* Wonk on for display-scale text only, where its character reads as
   character rather than weight. Applied to the largest serif elements. */
.display,
.card-panel .headline,
.landing-options .option-title,
.wheel .center-name,
.question-text {
  font-variation-settings: "WONK" 1;
}

a { color: inherit; }

/* --- Type --- */

.label,
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.eyebrow-red {
  color: var(--red);
}

.eyebrow-red::before {
  content: "--- ";
  color: var(--red);
}

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.display em {
  font-style: italic;
  font-weight: 400;
}

.serif-italic {
  font-style: italic;
  font-weight: 400;
}

.muted { color: var(--fg-muted); }

/* Inline astrological glyphs — used in sig lines, panel meta, chain
   rows, wheel labels.  We deliberately avoid the colour-emoji fonts
   ("Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji") so the
   browser substitutes a monochrome symbol font and the glyph inherits
   `currentColor`. The U+FE0E variation selector appended to each
   character in app.py is the second half of the same guarantee.

   `font-variant-emoji: text` is the modern, explicit way to say the
   same thing — supported in Chrome 121+, Firefox 132+, Safari 17.4+. */
.astro-sym {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols",
               "Arial Unicode MS", serif;
  font-style: normal !important;
  font-weight: inherit;
  font-variation-settings: normal;
  font-feature-settings: normal;
  font-variant-emoji: text;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

/* --- Layout chrome --- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--rule-soft);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.site-header .brand .sigil {
  width: 26px;
  height: 26px;
}

.site-header .brand-name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0;
}

.site-header .brand-name em {
  font-style: italic;
  font-weight: 400;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-nav a {
  text-decoration: none;
  color: var(--fg-muted);
  padding-bottom: 4px;
}

.site-nav a.active {
  color: var(--fg);
  border-bottom: 1px solid var(--red);
}

.site-nav a:hover {
  color: var(--red);
}

/* Username + sign-out, slotted into the same mono-caps nav strip. */
.site-nav-user {
  color: var(--fg-faint);
}

.site-nav-user-active {
  color: var(--fg);
  border-bottom: 1px solid var(--red);
}

/* `display: contents` makes the form box disappear from layout so the
   button below participates directly in `.site-nav`'s flex container —
   keeps its baseline aligned with the other nav items. */
.site-nav-logout {
  display: contents;
  margin: 0;
  padding: 0;
}

/* Explicit fonts (not `font: inherit`) because browsers apply their own
   `font-family: button` UA default to <button> that beats inheritance. */
.site-nav-link {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0 0 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.site-nav-link:hover {
  color: var(--red);
}

/* Phones: the strip is wider than the screen, so let both the header
   and the nav wrap instead of forcing sideways scroll on every page. */
@media (max-width: 720px) {
  .site-header {
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-4) var(--space-5);
  }
  .site-nav {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }
}

/* --- Landing --- */

.landing-hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-9) var(--space-6);
}

.landing-hero .sigil {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-5);
  opacity: 0.92;
}

.landing-hero .display {
  max-width: 18ch;
  margin: var(--space-2) 0 var(--space-5);
}

.landing-hero .lede {
  max-width: 56ch;
  color: var(--fg-muted);
  font-size: 17px;
  line-height: 1.7;
}

.landing-hero .lede em {
  display: block;
  margin-top: var(--space-5);
  font-style: italic;
  color: var(--fg);
}

.landing-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--rule);
}

.landing-options a {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--space-7) var(--space-6) var(--space-6);
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--rule);
  min-height: 130px;
  transition: background-color .2s ease;
}

.landing-options a:last-child { border-right: 0; }

.landing-options a:hover { background: var(--rule-soft); }

.landing-options .option-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.landing-options .option-meta {
  font-family: var(--serif);
  font-style: italic;
  color: var(--fg-muted);
  font-size: 14px;
  margin-top: var(--space-2);
}

.landing-options .arrow {
  color: var(--red);
  font-size: 22px;
  align-self: flex-end;
}

@media (max-width: 720px) {
  .landing-options { grid-template-columns: 1fr; }
  .landing-options a { border-right: 0; border-bottom: 1px solid var(--rule); }
  .landing-options a:last-child { border-bottom: 0; }
}

/* Small CTA under the three reading options pointing logged-in users
   at their journal. Editorial-aside register: italic serif, muted,
   the link itself in brand red. */
.landing-journal-cta {
  text-align: center;
  margin: var(--space-6) auto 0;
  max-width: 56ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--fg-muted);
}

.landing-journal-cta a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color .15s ease;
}

.landing-journal-cta a:hover {
  border-bottom-color: var(--red);
}

/* --- Reading shell --- */

/* Caps content width on wide displays so readings stay readable. */
.reading-shell {
  max-width: 1440px;
  margin: 0 auto;
}

/* --- Reading top bar --- */

.reading-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5) var(--space-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reading-topbar .left, .reading-topbar .right {
  display: flex;
  gap: var(--space-5);
  color: var(--fg-muted);
}

.reading-topbar .reading-no {
  color: var(--fg);
}

.reading-topbar .saved {
  color: var(--red);
}

/* --- Question bar (three-card) --- */

.question-bar {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-2) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.question-bar .question-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.3;
  color: var(--fg);
}

.question-bar .actions {
  display: flex;
  gap: var(--space-5);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.question-bar .actions a,
.question-bar .actions button {
  color: var(--fg-muted);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  cursor: pointer;
}

.question-bar .actions a:hover,
.question-bar .actions button:hover { color: var(--red); }

/* Phones: the three-column bar can't fit question + actions side by
   side; stack them, let the action strip wrap, and give the links
   enough height to hit with a thumb. */
@media (max-width: 720px) {
  .question-bar {
    grid-template-columns: 1fr;
  }
  .question-bar .question-text {
    font-size: 22px;
  }
  .question-bar .actions {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }
  .question-bar .actions a,
  .question-bar .actions button {
    padding: 8px 0;
  }
}

/* --- Three card grid --- */

/* Three-card field wrap: holds the grid + a sibling SVG overlay
   that draws the elemental-dignity sigils and pair links on hover.
   The overlay is `pointer-events:none` so the cards themselves still
   receive hover.  The hint below is muted away once the user is
   actively reading. */
.tc-wrap {
  position: relative;
  padding: var(--space-3) 0 var(--space-5);
}

.three-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 2;
}

.three-card .card-panel {
  padding: var(--space-4);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: opacity .2s ease, transform .2s ease;
}

/* Dim every card that isn't part of the active hover pair. */
.three-card.focusing .card-panel:not(.involved) {
  opacity: 0.4;
}

/* The actively-hovered card lifts and gets a red frame; involved
   neighbours retain normal opacity but no border emphasis. */
.three-card .card-panel.hovered .card-frame {
  border-color: var(--red);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(161, 52, 52, 0.13),
    0 10px 24px rgba(92, 22, 15, 0.20);
}

/* The dignity overlay: absolute over the card row.  Drawn into
   from JS using getBoundingClientRect-measured card centres so the
   geometry follows any responsive reflow. */
.tc-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.tc-hint {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  transition: opacity .2s ease;
}
.tc-wrap.focusing .tc-hint { opacity: 0; }

.three-card .card-panel:last-child { border-right: 0; }

.card-panel .card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.card-panel .position {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.card-panel .position-num { color: var(--red); }
.card-panel .position-glyph { width: 18px; height: 18px; opacity: 0.7; }

.card-panel .badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Card image placeholder area: aspect-ratio frame, name centred.
   Width is clamped against viewport height so the whole three-card
   reading (cards + read-together + actions) fits in the viewport
   without scrolling.  Math: each panel's non-frame chrome ≈ 250px
   (head, headline + subtitle, italic quote, drawn label, gaps);
   above the field ≈ 200px (header / topbar / question-bar / wrap
   padding); below ≈ 240px (read-together + actions).  So the
   frame's height budget is roughly `100vh - 690px`; its width is
   that * 5/8 = 0.625.  Clamped to [140, 320] for legibility on
   small monitors and to keep cards in scale on large ones. */
.card-frame {
  aspect-ratio: 5 / 8;
  width: 100%;
  max-width: clamp(140px, calc((100vh - 690px) * 0.625), 320px);
  align-self: center;
  border: 1px solid var(--rule);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
  color: var(--fg-muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
}

.card-panel .headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.card-panel .subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--fg);
  margin: 0;
}

.card-panel .glyph {
  /* The element badge in the card-head already names the element
     plainly; the small glyph here is decorative and costs vertical
     space.  Hide it so the layout stays in the viewport. */
  display: none;
}

.card-panel .pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.card-panel .drawn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: auto;
}

.read-together {
  border-top: 0;
  padding: var(--space-4) var(--space-5);
}

.read-together .label { color: var(--red); margin-bottom: var(--space-3); }

.read-together .copy {
  font-size: 16px;
  line-height: 1.55;
}

.read-together .copy em {
  font-style: italic;
  color: var(--fg-muted);
}

/* Multi-paragraph syntheses (currently the Grand Tableau) — each
   paragraph is its own <p class="copy">; this gives them visible
   breathing room and trims the outer margins so the body still
   sits flush inside `.read-together`. */
.gt-synthesis-body .copy {
  margin: 0 0 var(--space-4);
}
.gt-synthesis-body .copy:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .three-card { grid-template-columns: 1fr; }
  .three-card .card-panel { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* --- Forms --- */

.form-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-6);
  text-align: center;
}

.form-shell .display { margin: var(--space-2) 0 var(--space-7); }

.form-shell .lede {
  color: var(--fg-muted);
  margin-bottom: var(--space-7);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-align: left;
}

.form-row { display: flex; flex-direction: column; gap: var(--space-2); }

.form-row label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.form-row input,
.form-row select,
.form-row textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 22px;
  padding: var(--space-3) 0;
  outline: none;
  border-radius: 0;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { border-bottom-color: var(--red); }

.form-row textarea { resize: vertical; min-height: 80px; }

.form-row select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
                    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-6);
}

.form-row .radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-family: var(--serif);
  font-size: 22px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}

.form-row .radio-row label {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.form-row .radio-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  /* The generic `.form-row input` rule above applies padding+font sizing
     to every input; we have to zero that out here or the radio inherits
     vertical padding (12px top/bottom) and renders as a tall oval. */
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex: 0 0 14px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--fg-muted);
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.form-row .radio-row input[type="radio"]:checked {
  border-color: var(--red);
}

.form-row .radio-row input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--red);
  border-radius: 50%;
}

.form-error {
  color: var(--red);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Flash messages (success / error). Share the eyebrow-ish look so they
   sit comfortably above forms without dominating the layout. */
.form-flash {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--rule);
  margin: var(--space-3) 0;
  background: var(--rule-soft);
}
.form-flash-success { border-left-color: var(--fg); color: var(--fg); }
.form-flash-error   { border-left-color: var(--red); color: var(--red); }

.btn-cast {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--red);
  color: #f5ecd6;
  border: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease;
}

.btn-cast:hover { background: #843333; }

/* Destructive variant (delete account, etc.) + a few account-page bits. */
.btn-danger { background: #6b1414; }
.btn-danger:hover { background: #531010; }
.form-optional {
  color: var(--fg-faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85em;
}
.account-settings + .account-settings { margin-top: var(--space-7); }
.account-danger {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
}

/* --- Account page (/account) ----------------------------------------
   The user's own area: identity at top, stats row, list of every
   reading they own. Shares the editorial cream/parchment palette and
   serif/mono mix with the rest of the app. */

.account-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
  text-align: left;
}

.account-shell .display {
  margin: var(--space-2) 0 var(--space-5);
}

.account-shell .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin-bottom: var(--space-6);
  max-width: 60ch;
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-6);
}

/* Account page: identity facts table. Definition-list pattern,
   styled as two columns — small mono-caps label, serif body value. */
.account-facts {
  margin: 0 0 var(--space-7);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: var(--space-4);
}

.account-facts .fact {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: baseline;
  gap: var(--space-5);
}

.account-facts dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}

.account-facts dd {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--fg);
  margin: 0;
}

.account-settings .eyebrow {
  margin-bottom: var(--space-3);
}

.settings-placeholder {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--fg-muted);
  margin: 0;
  max-width: 60ch;
}

/* Dashboard: "most recurring" tiles — four cards under the type stats
   showing the user's most-frequent card / house / sign / sephira and
   the count, or an empty-state line if a metric has no underlying
   readings. */

.recurrences {
  margin-bottom: var(--space-7);
}

.recurrences .eyebrow {
  margin-bottom: var(--space-3);
}

.recurrence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.recurrence {
  border: 1px solid var(--rule);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.recurrence-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}

.recurrence-name {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  color: var(--fg);
  margin: 0;
  font-style: italic;
  font-variation-settings: "WONK" 1;
}

.recurrence-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

/* Visual slot — image or large glyph above the name. Fixed min-height
   so the four tiles align even when one shows a card image and
   another shows a Roman numeral or a zodiac symbol. */
.recurrence-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  margin: var(--space-2) 0 var(--space-3);
}

.recurrence-card-art-wrap {
  width: 88px;
  aspect-ratio: 5 / 8;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recurrence-card-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.recurrence-roman {
  font-family: var(--serif);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  color: var(--red);
  margin: 0;
  font-variation-settings: "WONK" 1;
}

.recurrence-symbol {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols",
               "Arial Unicode MS", serif;
  font-size: 64px;
  line-height: 1;
  color: var(--red);
  font-style: normal;
  font-variation-settings: normal;
  font-variant-emoji: text;
}

.recurrence-sephira-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  line-height: 1.1;
  color: var(--red);
  margin: 0;
  text-align: center;
  font-variation-settings: "WONK" 1;
}

.recurrence-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.35;
  color: var(--fg-faint);
  margin: 0;
}

.account-stats .stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-2);
}

.account-stats .stat-value {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--fg);
  margin: 0;
  font-variation-settings: "WONK" 1;
}

/* The journal's stat tiles are links that filter the reading list. */
a.stat {
  text-decoration: none;
  color: inherit;
  padding: var(--space-2);
  margin: calc(-1 * var(--space-2));
  border-bottom: 2px solid transparent;
}

a.stat:hover .stat-label { color: var(--red); }

a.stat.stat-active { border-bottom-color: var(--red); }

a.stat.stat-active .stat-label { color: var(--red); }

.journal-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
}

.journal-search input[type="search"] {
  flex: 1;
  max-width: 340px;
  min-width: 0;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--fg);
  padding: 7px 11px;
}

.journal-search button {
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 8px 12px;
  cursor: pointer;
}

.journal-search button:hover { color: var(--red); border-color: var(--red); }

.journal-search-clear {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
}

.journal-search-clear:hover { color: var(--red); }

.readings-list .eyebrow {
  margin-bottom: var(--space-3);
}

.reading-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.reading-row {
  border-bottom: 1px solid var(--rule-soft);
}

.reading-row-link {
  display: block;
  padding: var(--space-4) 0;
  color: inherit;
  text-decoration: none;
  transition: background-color .15s ease;
}

.reading-row-link:hover {
  background: var(--rule-soft);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.row-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.row-meta .row-type { color: var(--red); }
.row-meta .row-sep  { color: var(--fg-faint); }
.row-meta .row-date { color: var(--fg-muted); }

.row-meta .row-id {
  margin-left: auto;
  color: var(--fg-faint);
  font-size: 10px;
}

.row-question {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.35;
  color: var(--fg);
  margin: 0;
  font-variation-settings: "WONK" 1;
}

.row-quote {
  color: var(--red);
  font-style: normal;
}

.row-tags {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

.row-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--rule);
  padding: 2px 6px;
}

.row-tag-synth {
  color: var(--red);
  border-color: var(--red);
}

.readings-empty {
  padding: var(--space-5) 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--fg-muted);
}

.readings-empty a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 700px) {
  .account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recurrence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-facts .fact { grid-template-columns: 1fr; gap: var(--space-1); }
  .row-meta .row-id { margin-left: 0; }
  .row-question { font-size: 18px; }
}

/* --- Admin: /admin/users page ----------------------------------------
   Editorial reuse of the form-shell layout for the user-management
   page. Single-column page with a table at the top and an "add user"
   form below; per-row reset/delete actions inline. */

.admin-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
  text-align: left;
}

.admin-shell .display { margin: var(--space-2) 0 var(--space-7); }
.admin-shell .lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-muted);
  font-family: var(--serif);
  font-style: italic;
  margin-bottom: var(--space-7);
}

.user-list { margin-bottom: var(--space-7); }

.user-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 17px;
  border-top: 1px solid var(--rule);
}

.user-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: normal;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.user-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

.user-table .user-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--fg);
}

.user-table .self-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-left: var(--space-2);
}

.user-table .user-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  white-space: nowrap;
}

.role-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 2px 6px;
}

/* Per-row role controls: inline select + Set button.  Reused for
   the User / Elite / Admin tier dropdown on the admin users page. */
.user-table .user-role {
  white-space: nowrap;
}

.role-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.role-select {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 8px;
  cursor: pointer;
}
.role-select:focus {
  outline: 0;
  border-color: var(--red);
}

.role-set-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.role-set-btn:hover {
  color: var(--red);
  border-color: var(--red);
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
}

.row-action {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
  text-decoration: none;
}
.row-action:hover { color: var(--red); }
.row-action-danger { color: var(--red); opacity: 0.85; }
.row-action-danger:hover { color: var(--red); opacity: 1; }

.row-disclosure {
  display: inline-block;
}
.row-disclosure > summary {
  list-style: none;
  cursor: pointer;
}
.row-disclosure > summary::-webkit-details-marker { display: none; }

.reset-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.reset-form input[type="text"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 15px;
  padding: var(--space-2) 0;
  color: var(--fg);
  outline: none;
  min-width: 220px;
}
.reset-form input[type="text"]:focus { border-bottom-color: var(--red); }
.reset-btn {
  background: var(--fg);
  color: var(--bg);
  border: 0;
  padding: 0 var(--space-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}

.delete-form { margin: 0; }

.user-create {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-6);
}

@media (max-width: 700px) {
  .user-table .col-created { display: none; }
  .user-table .user-meta { display: none; }
  .user-actions { align-items: stretch; }
  .reset-form { flex-direction: column; }
  .reset-form input[type="text"] { min-width: 0; }
  /* Even with columns hidden the role/actions cells can outgrow a
     phone; scroll the table inside its own strip, not the page. */
  .user-table {
    display: block;
    overflow-x: auto;
  }
}

/* --- Opening of the Key reading --- */

.ootk-section {
  border-bottom: 1px solid var(--rule);
}

.ootk-section .section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-4) var(--space-5) var(--space-2);
}

.ootk-section .sig-line {
  padding: 0 var(--space-5) var(--space-4);
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
}

.ootk-section .sig-line .red { color: var(--red); }

.ootk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5) var(--space-5);
  align-items: start;
}

@media (max-width: 1080px) {
  .ootk-grid { grid-template-columns: 1fr; }
}

/* --- Wheel SVG --- */

.wheel {
  width: 100%;
  height: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Cap the wheel so it doesn't dominate on wide screens, and give it
     a centred resting place inside whatever column it sits in. */
  max-width: 560px;
  max-height: 560px;
  display: block;
  margin: 0 auto;
}

.wheel .ring-outer {
  fill: none;
  stroke: var(--fg);
  stroke-width: 0.6;
}

.wheel .ring-inner {
  fill: none;
  stroke: var(--rule);
  stroke-width: 0.4;
  stroke-dasharray: 1 3;
}

/* Pile-as-wheel: small card-shaped placeholder at each position. */
.wheel .placeholder {
  fill: var(--card-bg);
  stroke: var(--rule);
  stroke-width: 0.6;
}

.wheel .placeholder.chain {
  stroke: var(--fg-muted);
  stroke-width: 1.2;
}

.wheel .placeholder.sig {
  fill: var(--red);
  stroke: var(--red);
  stroke-width: 1.4;
}

/* Dots are still used by the house wheel (12 markers around the rim). */
.wheel .dot {
  fill: var(--fg);
  r: 2.5;
}

.wheel .dot.muted { fill: var(--fg-muted); r: 1.8; }
.wheel .dot.sig   { fill: var(--red); r: 6; }

.wheel .label {
  fill: var(--fg-muted);
}

.wheel .label.sig    { fill: var(--fg); font-weight: 600; }
.wheel .label.chain  { fill: var(--fg); }

.wheel .chain-line {
  stroke: var(--red);
  stroke-width: 0.6;
  stroke-dasharray: 2 3;
  fill: none;
}

/* --- House windmill (Second Operation) --- */

.wheel.house-windmill .ring-outer { display: none; }

.wheel .spoke {
  fill: var(--rule-soft);
  stroke: var(--rule);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.wheel .spoke.sig {
  fill: var(--red);
  stroke: var(--red);
  stroke-width: 0.6;
}

.wheel .spoke-roman {
  fill: var(--fg);
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.wheel .spoke-keyword {
  fill: var(--fg-muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.wheel .spoke-label.sig .spoke-roman,
.wheel .spoke-label.sig .spoke-keyword {
  fill: var(--red);
}

/* Zodiac symbol seated inside each sector — dark on the soft sectors,
   light on the significator's red sector. */
.wheel .spoke-sym {
  fill: var(--fg);
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols",
               "Arial Unicode MS", serif;
  font-size: 30px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  font-variation-settings: normal;
  font-variant-emoji: text;
}

.wheel .spoke-sym.sig {
  fill: var(--bg);
}

.wheel .you-dot {
  fill: var(--fg);
}

.wheel .you-label {
  fill: var(--fg-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* --- Trine wheel (Third Operation) --- */

.wheel.trine-wheel .ring-outer { stroke-width: 0.6; }

.wheel .trine-tick {
  stroke: var(--fg-muted);
  stroke-width: 0.6;
  opacity: 0.5;
}

.wheel .trine-poly {
  fill: var(--red);
  fill-opacity: 0.08;
  stroke: var(--fg-muted);
  stroke-width: 0.5;
  stroke-dasharray: 1 3;
}

.wheel .trine-poly.muted {
  fill: none;
  stroke: var(--rule);
  stroke-opacity: 0.7;
}

.wheel .trine-poly.sig {
  fill: var(--red);
  fill-opacity: 0.12;
  stroke: var(--red);
  stroke-width: 1.2;
  stroke-dasharray: none;
}

.wheel .trine-label {
  fill: var(--fg-muted);
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols",
               "Arial Unicode MS", serif;
  font-size: 22px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  font-variation-settings: normal;
  font-variant-emoji: text;
}

.wheel .trine-label.sig {
  fill: var(--red);
  font-weight: 500;
}

.wheel .trine-vertex.sig {
  fill: var(--red);
  stroke: var(--bg);
  stroke-width: 1;
}

.wheel .center-elem-glyph {
  fill: none;
  stroke: var(--red);
  stroke-width: 1;
  stroke-linejoin: round;
}

.wheel .center-name.trine-center {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols",
               "Arial Unicode MS", serif;
  font-style: normal;
  font-size: 22px;
  letter-spacing: 0.1em;
  font-variation-settings: normal;
  font-variant-emoji: text;
}

/* --- Decan wheel (Fourth Operation) --- */
.wheel.decan-wheel .ring-outer { stroke-width: 0.5; }

/* Solid red chain lines on the decan wheel (the First-Op wheel keeps
   its dotted default). */
.wheel.decan-wheel .chain-line {
  stroke-dasharray: none;
  stroke-width: 0.9;
}

.wheel .decan-tick {
  stroke: var(--fg-muted);
  stroke-width: 0.6;
  opacity: 0.55;
}

.wheel .sign-abbr {
  fill: var(--fg-muted);
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols",
               "Arial Unicode MS", serif;
  font-size: 18px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  font-variation-settings: normal;
  font-variant-emoji: text;
}

.wheel .chain-station .station-dot {
  fill: var(--red);
  stroke: var(--bg);
  stroke-width: 1;
}

.wheel .chain-station .station-num {
  fill: var(--bg);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.wheel .center-pile-of {
  fill: var(--fg-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
}

.wheel .center-name {
  fill: var(--fg);
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  letter-spacing: 0;
  text-transform: none;
}

.wheel .center-meta {
  fill: var(--red);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
}

/* House wheel additions */
.wheel .sig-sector {
  fill: var(--red);
  fill-opacity: 0.10;
  stroke: var(--red);
  stroke-width: 0.6;
}

.wheel .divider {
  stroke: var(--rule);
  stroke-width: 0.4;
}

.wheel .label.house {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
}

/* --- Four-pile preview (First Operation opener) --- */

.four-piles-block {
  border-top: 1px solid var(--rule);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.four-piles-block .label { display: block; margin-bottom: var(--space-4); }

.four-piles-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.pile-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pile-preview .pile-suit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.pile-preview.contains-sig .pile-suit .suit-name { color: var(--red); }

.pile-preview .pile-keywords {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-muted);
  margin: 0;
}

.pile-preview .pile-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.pile-preview .preview-frame {
  aspect-ratio: 5 / 8;
  border: 1px solid var(--rule);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--fg);
  line-height: 1.25;
  position: relative;
}

.pile-preview.contains-sig .preview-frame {
  border-color: var(--red);
  border-width: 1.5px;
}

.pile-preview .top-of {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  position: absolute;
  top: var(--space-2);
  left: 0; right: 0;
}

@media (max-width: 900px) {
  .four-piles-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- The Twelve Houses panel --- */

.houses-block {
  border-top: 1px solid var(--rule);
  padding: var(--space-6);
}

.houses-block .eyebrow { margin-bottom: var(--space-4); }

.houses-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}

@media (max-width: 900px) {
  .houses-row { grid-template-columns: 1fr; gap: var(--space-5); }
}

.houses-rubric {
  font-family: var(--serif);
  font-style: italic;
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
  font-size: 15px;
}

.house-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}

.house-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-soft);
}

.house-list .roman {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--fg-muted);
  align-self: start;
}

.house-list .desc { display: flex; flex-direction: column; gap: 2px; }

.house-list .house-head {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
}

.house-list .house-head .sign {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.house-list .house-body {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.4;
}

.house-list li.is-sig .roman      { color: var(--red); }
.house-list li.is-sig .house-head { color: var(--fg); }
.house-list li.is-sig .house-head .sign { color: var(--red); }
.house-list li.is-sig .house-body { color: var(--fg); }

/* Single-house panel: the significator's house / sign / decan /
   sephira / pile card in the right column of each operation page. */
.single-house {
  display: grid;
  /* Auto-size the Roman column so wide numerals like VIII don't crash
     into the text. minmax keeps a sensible minimum so narrow ones (I,
     V, X) still feel like a column rather than crowding the text. */
  grid-template-columns: minmax(64px, auto) 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-3);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--rule);
}

.single-house .roman {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--red);
  font-variation-settings: "WONK" 1;
}

/* Variant: a Hebrew letter (with its pronunciation underneath) in
   place of the Roman numeral.  Used by the "Your pile" panel on the
   First Operation (Expanded Pile).  The browser substitutes a system
   Hebrew font for the letter because Fraunces doesn't ship Hebrew
   glyphs; the pronunciation underneath uses the same mono-caps style
   as the meta lines elsewhere in the panel. */
.single-house .roman.roman-hebrew {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  font-variation-settings: normal;
  line-height: 1;
}

.single-house .roman-hebrew .hebrew-char {
  font-family: var(--serif), "SBL Hebrew", "Frank Ruhl Libre",
               "Times New Roman", serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 0.95;
  color: var(--red);
}

.single-house .roman-hebrew .hebrew-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Variant: an elemental glyph in place of the Roman numeral.
   Used by the "Your sign" panel on the Third Operation. */
.single-house .roman-glyph {
  font-family: inherit;          /* not text — drop the WONK setting */
  font-variation-settings: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--red);
}

.single-house .roman-glyph img {
  width: 100%;
  height: 100%;
  display: block;
}

.single-house .text { display: flex; flex-direction: column; gap: var(--space-2); }

.single-house .head {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  font-variation-settings: "WONK" 1;
}

.single-house .head .sign {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-left: var(--space-2);
  font-variation-settings: normal;
}

.single-house .body {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--fg);
}

.single-house .rubric {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --- Horizontal pile strip --- */

.pile-strip-wrap {
  border-top: 1px solid var(--rule);
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.pile-strip-wrap .label {
  margin-bottom: var(--space-3);
  display: block;
}

.pile-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.pile-card {
  flex: 0 0 124px;
  aspect-ratio: 5 / 8;
  border: 1px solid var(--rule);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  position: relative;
  text-align: center;
}

.pile-card .pile-pos {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  text-transform: uppercase;
}

.pile-card .pile-name {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--fg-muted);
  padding: var(--space-2) 0;
  hyphens: auto;
}

/* Foot row of a placeholder card: small element/major glyph centred,
   with an optional "You" / "#N" label sitting next to it.  Used by
   both .pile-card (pile-strip) and .chain-card (chain-strip), so the
   rule is intentionally not scoped to a parent. */
.pile-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 18px;
  margin-top: var(--space-2);
}

.pile-glyph {
  width: 14px;
  height: 14px;
  opacity: 0.65;
  display: block;
}

.pile-foot-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--red);
  text-transform: uppercase;
}

.pile-card.sig .pile-glyph,
.pile-card.chain .pile-glyph,
.chain-card.sig .pile-glyph { opacity: 0.9; }

.pile-card.sig {
  border-color: var(--red);
  border-width: 1.5px;
}

.pile-card.sig .pile-name {
  color: var(--fg);
  font-weight: 500;
}

.pile-card.chain {
  border-color: var(--fg-muted);
}

.pile-card.chain .pile-name {
  color: var(--fg);
}

/* --- Chain as a strip of placeholder cards ---
   Visually identical in shape to the pile-strip cards so card art
   added later will read the same on both. */

.chain-strip-wrap {
  margin-top: var(--space-3);
}

.chain-strip-wrap > .label {
  display: block;
  margin-bottom: var(--space-3);
}

.chain-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Chain card mirrors .pile-card exactly so future card art reads the
   same on both.  The only extra elements are the count (top-right
   of the head row) and, on page 5, the decan label above the foot. */
.chain-card {
  flex: 0 0 124px;          /* same fixed width as .pile-card */
  aspect-ratio: 5 / 8;
  border: 1px solid var(--rule);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  position: relative;
  text-align: center;
}

.chain-card.sig {
  border-color: var(--red);
  border-width: 1.5px;
}

/* Tooltip-bearing cards (the OOTK strips and Page 1 previews) lift
   slightly on hover — the three-card / Celtic Cross treatment — so
   the card whose keywords are showing reads as picked up.  Transform
   doesn't disturb flex flow, so neighbours hold their places. */
.pile-card[data-tip-body],
.chain-card[data-tip-body],
.pile-preview .preview-frame[data-tip-body] {
  transition: transform .18s ease, box-shadow .18s ease;
}
.pile-card[data-tip-body]:hover,
.chain-card[data-tip-body]:hover,
.pile-preview .preview-frame[data-tip-body]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(92, 22, 15, 0.18);
}

.chain-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.chain-card .chain-pos {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  text-transform: uppercase;
}

.chain-card .chain-count {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--red);
  font-variation-settings: normal;
}

.chain-card .chain-name {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--fg-muted);
  padding: var(--space-2) 0;
  hyphens: auto;
}

.chain-card.sig .chain-name { color: var(--fg); }

.chain-card .chain-decan {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --- Marseille card art ----------------------------------------------
   When a placeholder has the actual artwork available (`.has-art`),
   `.card-art` is absolute-positioned to fill the card. The artwork's
   ~1:2 ratio sits inside a 5:8 placeholder via `object-fit: contain`,
   leaving thin parchment matting at the sides. The card's text content
   is hidden; functional markers (pile position, chain order/count,
   decan label, sig/partner tags) turn into small dark-pill overlays at
   the corners. */

.card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--card-bg);
  display: block;
  z-index: 0;
}

.pile-card.has-art,
.chain-card.has-art {
  padding: 0;
  overflow: hidden;
}

.gt-card.has-art .gt-frame,
.pile-preview .preview-frame.has-art,
.card-frame.has-art {
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Hide the now-redundant text — the artwork carries it. */
.pile-card.has-art .pile-name,
.chain-card.has-art .chain-name,
.gt-card.has-art .gt-frame .gt-headline,
.gt-card.has-art .gt-frame .gt-subtitle,
.pile-preview .preview-frame.has-art .preview-name,
.has-art .pile-glyph {
  display: none;
}

/* Common pill style for overlay labels. */
.pile-card.has-art .pile-pos,
.pile-card.has-art .pile-foot-label,
.chain-card.has-art .chain-pos,
.chain-card.has-art .chain-count,
.chain-card.has-art .chain-decan,
.pile-preview .preview-frame.has-art .top-of {
  background: rgba(20, 19, 15, 0.78);
  color: #f1e8d0;
  padding: 2px 5px;
  border-radius: 2px;
  line-height: 1.2;
}

/* Pile-card overlays: position number top-left, sig/chain badge top-right. */
.pile-card.has-art .pile-pos {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
}

.pile-card.has-art .pile-foot {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  margin-top: 0;
  min-height: 0;
  gap: 0;
}

.pile-card.has-art .pile-foot-label {
  font-size: 9px;
  letter-spacing: 0.18em;
}

/* Chain-card overlays: #N + count across the top, decan label centred
   at the bottom (Fourth Op only). */
.chain-card.has-art .chain-card-head {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  z-index: 2;
  margin: 0;
}

.chain-card.has-art .chain-decan {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
}

/* The glyph foot is already hidden via display:none on .pile-glyph;
   the empty .pile-foot would otherwise reserve a row — collapse it. */
.chain-card.has-art .pile-foot {
  display: none;
}

/* Page-1 preview frame: "Top of pile" label stays as a tiny banner up top. */
.pile-preview .preview-frame.has-art .top-of {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}

/* GT card-art and knight handling moved into the Grand Tableau block
   below (the new overlay-first design treats the frame mat as a key
   surface, so its has-art behaviour diverges from other surfaces). */

/* --- Chain side panel (legacy chain-list — kept for reference) --- */

.chain-list {
  border: 1px solid var(--rule);
  background: var(--card-bg);
  margin-top: var(--space-4);
}

.chain-row {
  display: grid;
  grid-template-columns: 56px 70px 1fr;
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.chain-row:last-child { border-bottom: 0; }

.chain-row .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

.chain-row .count {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--red);
}

.chain-row .name {
  font-family: var(--serif);
  font-size: 19px;
}

.chain-row .name em {
  color: var(--fg-muted);
  font-style: italic;
}

.closure-callout {
  background: #1a1916;
  color: var(--fg);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-3);
}

body.theme-parchment .closure-callout {
  background: #1a1815;
  color: #f1e8d0;
}

.closure-callout .label { color: var(--fg-muted); margin-bottom: var(--space-2); display: block; }
.closure-callout .copy { font-family: var(--serif); font-style: italic; font-size: 16px; }

/* --- Pair ledger --- */

.pair-ledger {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* stretch (not baseline) so every cell in a row fills the row
     height — keeps the bottom rules continuous when text wraps. */
  align-items: stretch;
  font-family: var(--serif);
  font-size: 17px;
  border-top: 1px solid var(--rule);
}

.pair-ledger .pair-row,
.pair-ledger .lone-row {
  display: contents;
}

.pair-ledger .pair-row > *,
.pair-ledger .lone-row > * {
  padding: var(--space-3) var(--space-4);
}

.pair-ledger .pair-row > * {
  border-bottom: 1px solid var(--rule-soft);
}

.pair-ledger .left  { text-align: right; color: var(--fg-muted); }
.pair-ledger .sep   {
  color: var(--red);
  text-align: center;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.pair-ledger .right { text-align: left;  color: var(--fg); }

/* The lone card spans the full ledger width, so its (often long) text
   does not inflate the narrow centre divider column. */
.pair-ledger .lone-row .center {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--fg);
}

/* Pairs ledger tucked under an operation's figure (left column, not
   full-width) — tightened so it fits the narrower measure. */
.figure-pairs { margin-top: var(--space-4); }

.figure-pairs .pair-ledger { font-size: 15px; }

.figure-pairs .pair-ledger .pair-row > *,
.figure-pairs .pair-ledger .lone-row > * {
  padding: var(--space-2) var(--space-3);
}

/* =============================================================
   Grand Tableau — Lenormand 9×4 field with overlay-rendered
   relationships.
   ─────────────────────────────────────────────────────────────
   Three stacked layers inside `.field-wrap`:
     z:1  `.gt-wash`     — 3×3 wash region (positioned by JS)
     z:2  `.grand-tableau` — the 9-col card grid
     z:3  `.gt-overlay`  — SVG: row / column / diagonal hairlines,
                            knight L-paths, sig origin node
   The overlay's geometry is measured from the cards at runtime so
   it stays correct across responsive reflow.  The only per-card
   relationship emphases kept on the cards themselves are the sig
   frame (solid red), the partner frame (dashed red), and the small
   knight elbow SVG embedded in each knighted card's frame.
   ============================================================= */

/* Overlay knobs — exposed as custom properties so tweaks dock in
   the prototype could drive them live.  Final values baked here. */
.gt-lenormand {
  --gt-line-w:  1.4px;
  --gt-line-op: 0.62;
  --gt-wash:    rgba(161, 52, 52, 0.07);
  --gt-blood:   var(--red);
  --gt-card-mat: rgba(241, 232, 208, 1);
}

.field-wrap {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.grand-tableau {
  /* Fit the whole 9 × 4 field in the viewport — the user must be
     able to take the field in at a glance, not scroll it.
     Card width is the smaller of:
       (a) what fits 4 rows vertically in (100vh - chrome budget),
           given each card's full height is its frame (W × 86/62)
           plus ~50px of label rows and ~14px of inter-row gap;
           total per row ≈ 1.387W + 64, four rows ≈ 5.55W + 256.
       (b) what fits 9 columns horizontally in the available width
           (with column gaps subtracted).
     Clamped to a 44 px floor (below this cards stop being legible
     and we fall through to the 720 px mobile rule) and a 108 px
     ceiling (so the field doesn't bloat on huge displays). */
  --gt-card-w: clamp(
    44px,
    min(
      calc((100vh - 400px) / 5.55),
      calc((100vw - 140px) / 9 - 14px)
    ),
    108px
  );
  display: grid;
  grid-template-columns: repeat(9, var(--gt-card-w));
  justify-content: center;
  gap: 14px 14px;
  position: relative;
  z-index: 2;
}

.gt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: default;
}

.gt-pos {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  height: 22px;
}

.gt-pos-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
}

.gt-pos-house {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.gt-frame {
  position: relative;
  aspect-ratio: 62 / 86;
  border-radius: 2px;
  background: var(--gt-card-mat, var(--card-bg));
  padding: 6px;
  border: 1px solid var(--rule-soft);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 2px 7px rgba(42, 32, 23, 0.10);
  transition:
    box-shadow .18s ease,
    border-color .18s ease,
    transform .18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Card text (shown when no art). */
.gt-frame .gt-headline {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  color: var(--fg);
  font-variation-settings: "WONK" 1;
}

.gt-frame .gt-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  line-height: 1.2;
  margin: 0;
  color: var(--fg-muted);
}

/* Art card override — preserve the 6px mat (the prototype's choice:
   a small parchment border around the art reads more "instrument"
   than edge-to-edge image).  This overrides the global
   `.gt-card.has-art .gt-frame { padding: 0 }` rule above. */
.gt-card.has-art .gt-frame {
  padding: 6px;
  overflow: hidden;
}
.gt-card.has-art .gt-frame .card-art {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: cover;
  border-radius: 1px;
  background: var(--card-bg);
  z-index: 0;
}
/* Text already hidden under art by the global has-art rule. */

/* The only per-card relationship emphases kept on the cards. */
.gt-card.sig .gt-frame {
  border: 2px solid var(--red);
  box-shadow:
    0 0 0 4px rgba(161, 52, 52, 0.08),
    0 3px 12px rgba(92, 22, 15, 0.22);
}
.gt-card.partner .gt-frame {
  border: 1.5px dashed var(--red);
}

/* "You" / "Partner" mono caption below the frame.  Empty slot for
   the rest of the cards keeps the column rhythm even. */
.gt-card .gt-mark {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin: 1px 0 0;
  height: 14px;
}

/* Hover affordance on any non-sig non-partner card. */
.gt-card:not(.sig):not(.partner):hover .gt-frame {
  border-color: var(--fg-faint);
  box-shadow: 0 3px 12px rgba(42, 32, 23, 0.18);
  transform: translateY(-1px);
}

/* Knight elbow — the L of the leap, drawn in the same hairline as
   the overlay lines.  Lives inside the frame so it sits on top of
   the card art and the global border. */
.gt-knight {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 18px;
  height: 18px;
  display: block;
  transform-origin: 80% 30%;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 2px var(--gt-card-mat))
    drop-shadow(0 0 2px var(--gt-card-mat));
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.gt-knight path { stroke: var(--red); }
.gt-knight circle { fill: var(--red); }

/* ── Overlay layer ────────────────────────────────────────── */

.gt-wash {
  position: absolute;
  z-index: 1;
  border-radius: 5px;
  background: var(--gt-wash);
  border: 1px solid rgba(161, 52, 52, 0.22);
  box-shadow: 0 0 0 1px rgba(246, 240, 224, 0.4) inset;
  pointer-events: none;
  opacity: 1;
  transition: opacity .22s ease;
}

.gt-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.gt-overlay path,
.gt-overlay line,
.gt-overlay circle {
  transition: opacity .22s ease, stroke-width .22s ease;
}

.ln {
  stroke: var(--red);
  fill: none;
  stroke-linecap: round;
}
.ln-row,
.ln-col {
  stroke-width: var(--gt-line-w);
  opacity: var(--gt-line-op);
}
.ln-diag {
  stroke-width: var(--gt-line-w);
  opacity: var(--gt-line-op);
  stroke-dasharray: 1.5 6;
}
/* Knight L-paths are hidden until isolated. */
.ln-knight {
  stroke-width: 1.1px;
  opacity: 0;
  stroke-dasharray: 2 5;
}

.node-ring {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.3px;
}
.sig-node { fill: var(--red); }
.sig-halo {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.2px;
  opacity: 0.5;
}

/* ── Isolation states ─────────────────────────────────────── */

.field-wrap.isolating .ln-row,
.field-wrap.isolating .ln-col,
.field-wrap.isolating .ln-diag,
.field-wrap.isolating .term { opacity: 0.08; }
.field-wrap.isolating .gt-wash { opacity: 0.18; }
.field-wrap.isolating .gt-knight { opacity: 0.18; }

.ln.active { opacity: 0.95 !important; stroke-width: 2px; }
.ln-diag.active {
  opacity: 0.95 !important;
  stroke-width: 1.8px;
  stroke-dasharray: none;
}
.ln-knight.active { opacity: 0.85 !important; }
.term.active { opacity: 1 !important; }
.gt-knight.active { opacity: 1 !important; transform: scale(1.18); }
.gt-wash.active { opacity: 1 !important; }

/* Layer toggles from the legend. */
.field-wrap.layer-off-row .ln-row,
.field-wrap.layer-off-col .ln-col,
.field-wrap.layer-off-diag .ln-diag,
.field-wrap.layer-off-knight .ln-knight,
.field-wrap.layer-off-knight .gt-knight,
.field-wrap.layer-off-r3 .gt-wash { display: none; }

/* ── Tooltip (follows the cursor on card hover) ─────────────
   Shared shell: .gt-tooltip carries house meanings on the Grand
   Tableau, .card-tooltip carries card keywords on the OOTK pages. */

.gt-tooltip,
.card-tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  background: var(--fg);
  color: var(--card-bg);
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  padding: 7px 12px;
  border-radius: 3px;
  max-width: 280px;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: opacity .14s ease;
  transform: translate(-50%, -115%);
}
.gt-tooltip .tt-name,
.card-tooltip .tt-name {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 240, 224, 0.6);
  display: block;
  margin-bottom: 2px;
}

/* ── Legend (real geometry samples + on/off toggle pills) ── */

.gt-legend {
  margin: 46px var(--space-5) 0;
}
.gt-legend > .eyebrow {
  display: block;
  margin: 0 0 16px;
}

.gt-legend .legend-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: stretch;
}

.gt-legend .leg-item {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--rule-soft);
  background: rgba(246, 240, 224, 0.45);
  border-radius: 3px;
  padding: 9px 14px 9px 11px;
  cursor: pointer;
  user-select: none;
  transition:
    border-color .16s ease,
    background .16s ease,
    opacity .16s ease;
}
.gt-legend .leg-item:hover {
  border-color: var(--fg-faint);
  background: rgba(246, 240, 224, 0.85);
}
.gt-legend .leg-item.off { opacity: 0.4; }

.gt-legend .leg-item .swatch {
  width: 34px;
  height: 24px;
  flex: none;
}

.gt-legend .leg-item .lab {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.gt-legend .leg-item .toggle {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 2px 7px;
}
.gt-legend .leg-item.off .toggle {
  color: var(--red);
  border-color: rgba(161, 52, 52, 0.4);
}

.gt-legend .legend-hint {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 13px 0 0;
}

.gt-legend .gt-legend-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--fg-muted);
  margin: 18px 0 0;
  max-width: 760px;
  line-height: 1.45;
}

/* Form hint (used on the GT input form). */
.form-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  margin: var(--space-2) 0 0;
  line-height: 1.4;
}

/* ── Responsive fallback ──────────────────────────────────── */

/* On phones the viewport-aware sizing would clamp to 44 px and
   overflow horizontally (9 × 44 + gaps > narrow viewport).  Drop
   to 4 columns with scroll — readable cards, scrolled field is an
   acceptable trade at this size.  Overlay geometry recomputes from
   the DOM so the redraw is automatic. */
@media (max-width: 720px) {
  .grand-tableau {
    --gt-card-w: minmax(0, 1fr);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .gt-frame .gt-headline { font-size: 18px; }
  .gt-frame .gt-subtitle { font-size: 12px; }
}

.gt-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.gt-card .gt-pos {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.gt-card .gt-frame {
  aspect-ratio: 5 / 8;
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  gap: var(--space-2);
  transition: border-color .15s ease;
}

.gt-card .gt-frame .gt-headline {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  color: var(--fg);
  font-variation-settings: "WONK" 1;
}

.gt-card .gt-frame .gt-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  color: var(--fg-muted);
}

.gt-card.sig .gt-frame {
  border-color: var(--red);
  border-width: 2px;
}
.gt-card.sig .gt-frame .gt-headline,
.gt-card.sig .gt-frame .gt-subtitle { color: var(--red); }

.gt-card.partner .gt-frame {
  border-color: var(--red);
  border-width: 1.5px;
  border-style: dashed;
}
.gt-card.partner .gt-frame .gt-headline { color: var(--red); }

/* Relationship highlights to the significator (mutually exclusive
   borders; closest relationship wins).  Sig / partner styles above
   take precedence over these. */

.gt-card.in-3x3 .gt-frame {
  border-color: var(--red);
  border-width: 1px;
  border-style: solid;
}

.gt-card.on-diagonal .gt-frame {
  border-color: var(--red);
  border-width: 1.5px;
  border-style: dotted;
}

.gt-card.on-row .gt-frame {
  border-top-color: var(--red);
  border-top-width: 2px;
  border-top-style: solid;
}

.gt-card.on-col .gt-frame {
  border-left-color: var(--red);
  border-left-width: 2px;
  border-left-style: solid;
}

/* Knight's-move glyph (additive, can combine with any border). */
.gt-card .gt-frame { position: relative; }

.gt-knight {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols",
               "DejaVu Sans", serif;
  font-size: 16px;
  line-height: 1;
  color: var(--red);
  font-variation-settings: normal;
  pointer-events: none;
}

.gt-card .gt-mark {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
}

/* --- Form checkbox row (Grand Tableau) --- */

.form-row .checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

.form-row .checkbox-row input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--fg-muted);
  position: relative;
  cursor: pointer;
}

.form-row .checkbox-row input[type="checkbox"]:checked {
  border-color: var(--red);
}

.form-row .checkbox-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--red);
}

.form-row .form-aside {
  font-size: 13px;
  margin-top: var(--space-2);
  display: block;
}

/* --- Tree of Life (Fifth Operation) --- */

.tree-of-life {
  width: 100%;
  height: auto;
  display: block;
  margin: var(--space-3) auto 0;
  max-width: 500px;
}

.tree-of-life .tree-path {
  stroke: var(--rule);
  stroke-width: 0.8;
  fill: none;
}

.tree-of-life .sephira .seph-circle {
  fill: var(--card-bg);
  stroke: var(--fg);
  stroke-width: 0.8;
}

.tree-of-life .sephira .seph-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--fg);
  font-variation-settings: "WONK" 1;
}

.tree-of-life .sephira .seph-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-anchor: middle;
  text-transform: uppercase;
  fill: var(--fg-muted);
}

.tree-of-life .sephira.sig .seph-circle {
  fill: var(--red);
  stroke: var(--red);
  stroke-width: 2;
}

.tree-of-life .sephira.sig .seph-num {
  fill: var(--bg);
}

.tree-of-life .sephira.sig .seph-name {
  fill: var(--red);
}

/* --- Reflection page (Page 7) --- */

.reflection-section {
  padding-bottom: var(--space-5);
}

.reflection-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 var(--space-6) var(--space-6);
  max-width: 60ch;
  font-variation-settings: "WONK" 1;
}

.reflection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  padding: 0 var(--space-6);
}

@media (max-width: 900px) {
  .reflection-grid { grid-template-columns: 1fr; }
}

.reflection-col {
  display: flex;
  flex-direction: column;
}

.reflection-line,
.reflection-notes {
  font-family: var(--serif);
  background: transparent;
  border: 1px solid var(--rule);
  padding: var(--space-4) var(--space-5);
  color: var(--fg);
  resize: vertical;
  width: 100%;
  margin-top: var(--space-3);
  outline: none;
  transition: border-color .15s ease;
}

.reflection-line:focus,
.reflection-notes:focus,
.stopper-picker:focus { border-color: var(--red); }

.reflection-line {
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  min-height: 110px;
  font-variation-settings: "WONK" 1;
}

.reflection-line::placeholder {
  color: var(--fg-faint);
  font-style: italic;
}

.reflection-notes {
  font-size: 16px;
  line-height: 1.55;
  min-height: 320px;
}

.reflection-notes::placeholder {
  color: var(--fg-faint);
  font-style: italic;
}

.reflection-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: var(--space-3) 0 0;
}

/* --- "The line that stayed" picker (Page 7) ---
   A scrollable radio-list of sentences pulled from the OOTK page
   reflections (1-6). Each option shows the sentence in italic serif
   with a small "page N" tag at the right; selecting one writes its
   text into reflection.line via the autosave form. */

.line-picker {
  margin-top: var(--space-3);
  border: 1px solid var(--rule);
  padding: 0 var(--space-4);
  max-height: 360px;
  overflow-y: auto;
}

.line-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}

.line-option:last-child { border-bottom: 0; }

.line-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  flex: 0 0 14px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--fg-muted);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.line-option input[type="radio"]:checked {
  border-color: var(--red);
}

.line-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--red);
  border-radius: 50%;
}

.line-option .line-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--fg-muted);
}

.line-option:has(input:checked) .line-text {
  color: var(--fg);
}

.line-option .line-page {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}

.line-option-none .line-text {
  font-style: normal;
  color: var(--fg-faint);
}

.line-empty {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--fg-muted);
}

/* The "card that stopped you" panel. */
.reflection-stopper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--rule);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-3);
  background: var(--card-bg);
  position: relative;
}

.stopper-glyph {
  width: 28px;
  height: 28px;
  opacity: 0.85;
  flex-shrink: 0;
}

.stopper-text {
  flex: 1;
  min-width: 0;
}

.stopper-text .stopper-headline {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  font-variation-settings: "WONK" 1;
}

.stopper-text .stopper-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-muted);
  margin: var(--space-2) 0 0;
}

.stopper-empty {
  flex: 1;
  font-family: var(--serif);
  font-style: italic;
  color: var(--fg-muted);
  font-size: 16px;
}

.stopper-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.stopper-pick-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  pointer-events: none;
}

/* The native <select> sits invisibly over the label so a click on
   "Choose" opens the dropdown. */
.stopper-picker {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  font-family: inherit;
  font-size: inherit;
}

/* --- Reflection footer (filed status + actions) --- */

.reflection-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--rule);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.filed-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}

.filed-status .reading-no { color: var(--fg); }
.filed-status .filed-sep  { margin: 0 var(--space-2); }
.filed-status .save-status { color: var(--fg-muted); }

.reflection-actions {
  display: flex;
  gap: var(--space-3);
}

.btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn.btn-outline {
  color: var(--fg);
  background: transparent;
}
.btn.btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
}

.btn.btn-filled {
  color: var(--bg);
  background: #1a1816;
  border-color: #1a1816;
}
.btn.btn-filled:hover {
  background: var(--red);
  border-color: var(--red);
}

/* --- Paginated page navigation (OOTK reading pages) --- */

.page-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-nav-cell.start  { justify-self: start; }
.page-nav-cell.center { justify-self: center; }
.page-nav-cell.end    { justify-self: end; }

.page-nav a {
  text-decoration: none;
  color: var(--fg-muted);
  transition: color .15s ease;
}

.page-nav a:hover { color: var(--red); }

.page-nav .page-nav-next { color: var(--fg); }
.page-nav .page-nav-next:hover { color: var(--red); }

.page-nav-indicator {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--fg-faint);
}

/* --- Footer-ish actions --- */

.actions-row {
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.actions-row a {
  color: var(--fg-muted);
  text-decoration: none;
}

.actions-row a:hover { color: var(--red); }

@media (max-width: 720px) {
  .actions-row {
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
  }
  .actions-row a {
    padding: 8px 0;
  }
}

/* --- Notes panel (owner-only, non-OOTK reading pages) --- */

.notes-panel {
  max-width: 560px;
  margin: var(--space-4) auto 0;
  padding: var(--space-4) var(--space-5) 0;
  border-top: 1px solid var(--rule);
}

.notes-panel textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  margin-top: var(--space-3);
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
  padding: 10px 12px;
  resize: vertical;
}

.notes-panel textarea:focus { outline: none; border-color: var(--red); }

.notes-panel .save-status { margin-top: 6px; }

/* --- Share panel (owner-only foot of every reading page) --- */

.share-panel {
  max-width: 560px;
  margin: var(--space-4) auto var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--rule);
  text-align: center;
}

.share-lede {
  margin: var(--space-2) auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-muted);
}

.share-row {
  display: flex;
  gap: 8px;
  margin-top: var(--space-3);
}

.share-url {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-muted);
  padding: 7px 9px;
}

.share-copy {
  flex: 0 0 auto;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 7px 12px;
  cursor: pointer;
}

.share-copy:hover { color: var(--red); border-color: var(--red); }

.share-form { margin-top: var(--space-3); }

.share-mint,
.share-withdraw {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 2px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
}

.share-mint:hover,
.share-withdraw:hover { color: var(--red); border-color: var(--red); }

/* Phones: these underlined text buttons are ~16px tall — pad the top
   to a tappable height without moving the underline off the text. */
@media (max-width: 720px) {
  .share-mint,
  .share-withdraw {
    padding-top: 14px;
  }
  .share-copy {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.reading-delete {
  text-align: center;
  margin: 0 auto var(--space-6);
}

.reading-delete-btn {
  font-size: 10px;
  color: var(--fg-faint);
  border-color: transparent;
}

/* --- Misc --- */

.divider-eyebrow {
  padding: var(--space-5) var(--space-6) 0;
}

.section-pad { padding: var(--space-3) var(--space-5); }


/* =============================================================
   I-Ching — two-column stage: a figure plate (left), a reading
   panel (right).  The plate shows ONE of four figures at a time:
   the cast, the tending (when there are changing lines), and the
   mutual gua (互卦) of either.  Lines morph by CSS width transition
   when the figure changes; the mutual-gua transition plays a
   construction animation (inner lines slide down/up; outer lines
   fade).  The right panel is sticky and updates on line hover to
   show that line's Three Powers (三才) and text.
   ============================================================= */

.iching-reflection {
  --ich-han: "Noto Serif SC", "Songti SC", serif;
}

.ich-stage {
  --ich-move:      0.92s;
  --ich-ease-open: cubic-bezier(.34, 1.5, .5, 1);
  --ich-han:       "Noto Serif SC", "Songti SC", serif;
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(400px, 540px);
  gap: 72px;
  justify-content: center;
  align-items: start;
  padding: 50px var(--space-5) 0;
}

/* ── Plate (left column) ────────────────────────────────────── */

.plate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fig-label-wrap {
  position: relative;
  height: 15px;
  width: 100%;
}
.fig-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  transition: opacity .28s ease;
}

.fig-head-wrap {
  position: relative;
  height: 92px;
  width: 100%;
  margin-top: 18px;
}
.fig-head {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transition: opacity .28s ease;
}
.fig-idline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fig-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.fig-pinyin {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--fg);
}
.fig-han {
  font-family: var(--ich-han);
  font-size: 21px;
  color: var(--red);
  line-height: 1;
}
.fig-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.fig-rule {
  width: 100%;
  max-width: 300px;
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 8px 0 0;
}

/* Trigram captions — hidden by default; revealed when the user
   hovers the corresponding trigram block in the stack. */
.trig-label {
  height: 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 13px 0;
  padding-left: 26px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.trig-label .sym {
  font-size: 17px;
  letter-spacing: 0;
  color: var(--fg-muted);
  line-height: 1;
  position: relative;
  top: 1px;
}
.trig-label .attr { color: var(--fg-faint); }
.plate:has(#ichStack .trigram.upper:hover) .trig-top { opacity: 1; }
.plate:has(#ichStack .trigram.lower:hover) .trig-bottom { opacity: 1; }

/* The six-line stack. */
.stack {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.trigram {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 9px 14px;
  margin: 0 -14px;
  border-radius: 5px;
  transition: background .18s ease;
}
.trig-divider {
  height: 11px;
  position: relative;
}
.trig-divider::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 236px;
  border-top: 1px dashed var(--rule);
}

.ich-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.ich-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 20px;
  background: var(--red);
  transition: transform .16s ease;
  transform-origin: center;
}
.ich-line:hover::before,
.ich-line.lit::before { transform: translateY(-50%) scaleY(1); }
.ich-line .ln-no {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-faint);
  width: 10px;
  text-align: right;
  transition: color .16s ease;
}
.ich-line:hover .ln-no,
.ich-line.lit .ln-no { color: var(--red); }
.ich-line .track {
  position: relative;
  width: 236px;
  height: 17px;
}
/* The .seg selectors are intentionally UN-scoped (not nested under
   .ich-line) — the mutual-gua construction animation clones bare
   .seg divs into a transient overlay outside the stack lines, so
   those clones need the same position/dimension grammar without
   inheriting it from an .ich-line parent. */
.seg {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--fg);
  transition:
    width var(--ich-move, .92s) var(--ich-ease-open, ease),
    background-color calc(var(--ich-move, .92s) * 0.8) ease;
}
.seg.l { left: 0; }
.seg.r { right: 0; }
.ich-line.lit .track .seg {
  box-shadow: 0 0 0 1px rgba(161, 52, 52, 0.25);
}
.plate.no-anim .seg { transition: none !important; }

/* Marks on the cast's changing lines (only visible while the plate
   shows the cast primary): ○ ring for old yang, × for old yin. */
.ich-line .mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.plate.cast-primary .ich-line.changing .mark { opacity: 1; }
.ich-line .mark.ring {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.2px solid var(--red);
}
.ich-line .mark.ex {
  width: 16px;
  height: 16px;
}
.ich-line .mark.ex::before,
.ich-line .mark.ex::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--red);
}
.ich-line .mark.ex::before { transform: translate(-50%, -50%) rotate(45deg); }
.ich-line .mark.ex::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Plate controls — change toggle is hidden when there are no
   changing lines; mutual gua toggle is hidden until first use of
   the change toggle (or immediately available with no changes). */
.changebar {
  margin: 38px 0 0;
  padding-left: 26px;
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  align-items: center;
}
.change-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--card-bg);
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 22px;
  padding: 11px 22px;
  transition: all .18s ease;
}
.change-btn:hover {
  background: var(--fg);
  border-color: var(--fg);
}
.change-btn.reverted {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--rule);
}
.change-btn.reverted:hover {
  border-color: var(--red);
  color: var(--red);
}
.mutual-btn {
  background: transparent;
  color: var(--fg-muted);
  border-color: var(--rule);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
}
.mutual-btn .glyph {
  font-family: var(--ich-han);
  font-size: 14px;
  line-height: 1;
}
.mutual-btn:hover {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.mutual-btn.avail {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.mutual-btn.on {
  background: var(--red);
  color: var(--card-bg);
  border-color: var(--red);
}
.mutual-btn.on .glyph { color: var(--card-bg); }

/* ── Reading panel (right column) ───────────────────────────── */

.panel-col {
  position: sticky;
  top: 34px;
}
.reading-panel { max-width: 540px; }
.reading-panel .pp-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 22px;
}
.reading-panel .pp-tag .han {
  font-family: var(--ich-han);
  color: var(--red);
  font-size: 13px;
  letter-spacing: 0;
  margin-left: 4px;
}
.reading-panel h3 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 11px;
}
.reading-panel .pp-body {
  font-family: var(--serif);
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 30px;
  text-wrap: pretty;
}
.reading-panel .pp-hint {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 34px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.reading-panel .pp-hint::before {
  content: "";
  width: 22px;
  border-top: 1px solid var(--rule);
}
.reading-panel .pp-powers {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
}
.powers-triad {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.powers-triad .tier {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--ich-han);
  font-size: 9.5px;
  color: var(--fg-faint);
  line-height: 1;
}
.powers-triad .tier.on {
  background: var(--red);
  border-color: var(--red);
  color: var(--card-bg);
}
.reading-panel .pwr-text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.reading-panel .pwr-text .han {
  font-family: var(--ich-han);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--red);
  margin-left: 9px;
  text-transform: none;
}
.reading-panel .pp-linehead {
  display: flex;
  align-items: baseline;
  gap: 13px;
  margin: 0 0 16px;
}
.reading-panel .pp-lineno {
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  color: var(--red);
}
.reading-panel .pp-linelabel {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.reading-panel .pp-linetext {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
  font-weight: 400;
  text-wrap: pretty;
}
.reading-panel .pp-linetext.italic { font-style: italic; }
.reading-panel .pp-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--fg-muted);
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  text-wrap: pretty;
}
.reading-panel .pp-note em {
  color: var(--red);
  font-style: italic;
}
@keyframes ich-panel-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.reading-panel.enter { animation: ich-panel-in .34s ease; }

/* ── Responsive collapse ──────────────────────────────────── */

@media (max-width: 1000px) {
  .ich-stage {
    grid-template-columns: 1fr;
    gap: 48px;
    justify-content: start;
  }
  .panel-col { position: static; }
}

@media print {
  .changebar { display: none; }
}



/* =============================================================
   Celtic Cross (admin) — drawn figure + ledger two-column.
   ─────────────────────────────────────────────────────────────
   Two columns: a left-hand ledger that fills the old dead space
   (positions read in order), and a right-hand figure built from
   absolutely-positioned slots in fixed pixel geometry — the
   cross (01 / 03 / 04 / 05 / 06) with the Crossing card (02)
   laid over 01 rotated 90°, and the staff (07/08/09/10) to its
   right.  A faint skeleton SVG draws the cross axes + the dashed
   staff spine; a separate path SVG lights up the 1 → 10 reading
   order when toggled.

   Hovering a ledger row lights its figure card and vice versa.
   Card 02 has pointer-events:none so a single hit-zone matching
   its rotated visible footprint receives hover — the bands of
   card 01 above and below the crossing remain hover-active.
   ============================================================= */

.cc-body {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 40px;
  padding: var(--space-5) 0 0;
}

/* ── Ledger (left column) ─────────────────────────────────── */

.cc-ledger {
  position: relative;
}

.cc-ledger .lhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 6px;
}

.cc-ledger-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.cc-ledger-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0 14px;
  align-items: baseline;
  padding: 13px 12px 13px 10px;
  margin: 0 -12px;
  border-top: 1px solid var(--rule-soft);
  cursor: pointer;
  border-radius: 3px;
  transition: background .15s ease;
}

.cc-ledger-list li:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

/* Phones: no parent padding to absorb the full-bleed negative margin,
   so the rows would poke past both screen edges. */
@media (max-width: 720px) {
  .cc-ledger-list li {
    margin: 0;
  }
}

.cc-ledger-list li:hover,
.cc-ledger-list li.lit {
  background: rgba(161, 52, 52, 0.06);
}

.cc-ledger-list .l-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--red);
  grid-row: span 2;
}

.cc-ledger-list .l-pos {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--fg);
}

.cc-ledger-list .l-card {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--fg-muted);
  font-style: italic;
  grid-column: 2;
}

.cc-ledger-list .l-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--fg-muted);
  grid-column: 2;
  margin-top: 4px;
  line-height: 1.45;
}

.cc-ledger-list li.lit .l-pos {
  color: var(--red);
}

/* ── Figure (right column) — controls + canvas ────────────── */

.cc-figure-wrap {
  position: relative;
}

.cc-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 6px;
}

.path-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 7px 14px;
  background: rgba(251, 248, 239, 0.5);
  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}
.path-toggle:hover { border-color: var(--fg-faint); }
.path-toggle .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--red);
}
.path-toggle.on {
  background: var(--red);
  color: var(--card-bg);
  border-color: var(--red);
}
.path-toggle.on .dot {
  background: var(--card-bg);
  border-color: var(--card-bg);
}

.cc-figure {
  position: relative;
  margin: 18px auto 0;
}

/* Narrow screens: the figure's geometry is fixed-pixel (built in JS,
   ~732px wide), so it can't shrink — let it pan inside its own strip
   instead of dragging the whole page sideways. 820px covers the shell
   padding around it. A real small-screen layout is a design decision,
   parked for the Claude Design pass. */
@media (max-width: 820px) {
  .cc-figure-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.cc-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.cc-path {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity .3s ease;
}

.cc-figure.show-path .cc-path { opacity: 1; }
.cc-figure.show-path .cc-frame {
  opacity: 0.42;
  filter: saturate(0.5);
}
.cc-figure.show-path .cc-pos,
.cc-figure.show-path .cc-name {
  opacity: 0.4;
}

/* ── Slots / cards in the figure ──────────────────────────── */

.cc-slot {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  transition: opacity .18s ease;
}

.cc-slot .cc-frame {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(42, 32, 23, 0.12);
  transition:
    box-shadow .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.cc-art {
  position: relative;
  border-radius: 1px;
  overflow: hidden;
  /* Solid parchment background — when card art is present, the
     image lives in this surface with `object-fit: contain`, so any
     aspect-ratio mismatch between the Marseille image (≈ 1:2) and
     the slot (5:8-ish) shows as small matting that blends with
     the surrounding card paper rather than as cropping. */
  background: var(--card-bg);
  border: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cc-art .emblem {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-faint);
  padding: 0 6px;
}

.cc-art .card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--card-bg);
}

.cc-pos {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 7px);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  line-height: 1.3;
  margin: 0;
}
.cc-pos .pn { color: var(--red); }

.cc-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 7px);
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 12.5px;
  color: var(--fg-muted);
  text-align: center;
  margin: 0;
}
.cc-name .sub {
  font-style: italic;
  color: var(--fg-faint);
}

/* Crossing card: rotated 90°.  Its slot is pointer-events:none so
   hover falls through onto card 01 underneath above and below the
   crossing band; a dedicated hit-zone re-enables hover precisely
   over the rotated card's visible footprint. */
.cc-slot.crossing {
  z-index: 4;
  pointer-events: none;
}
.cc-slot.crossing .cc-frame {
  transform: rotate(90deg);
  box-shadow: 0 6px 16px rgba(42, 32, 23, 0.22);
}
.cc-slot.crossing .cc-pos,
.cc-slot.crossing .cc-name {
  display: none;
}

.cc-cross-hit {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  z-index: 7;
}

/* ── Highlight states ─────────────────────────────────────── */

.cc-figure.diming .cc-slot:not(.lit) {
  opacity: 0.32;
}
.cc-slot.lit { z-index: 3; }
.cc-slot.lit .cc-frame {
  border: 2px solid var(--red);
  box-shadow:
    0 0 0 4px rgba(161, 52, 52, 0.10),
    0 6px 18px rgba(92, 22, 15, 0.25);
}
.cc-slot.lit.crossing .cc-frame {
  border: 2px solid var(--red);
}
.cc-slot.lit .cc-pos,
.cc-slot.lit .cc-name {
  opacity: 1;
}
.cc-slot.lit .cc-pos .pn {
  color: var(--red);
}

/* ── Skeleton + path SVGs ─────────────────────────────────── */

.sk {
  stroke: var(--fg);
  fill: none;
  opacity: 0.16;
  stroke-width: 1.2;
}
.sk-staff {
  stroke-dasharray: 1.5 6;
}

.pth {
  stroke: var(--red);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pnode { fill: var(--red); }
.pnum {
  fill: var(--card-bg);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ── Timing block (unchanged from before) ─────────────────── */

.cc-timing {
  margin: 48px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--rule);
}

.cc-timing .eyebrow {
  margin: 0 0 12px;
}

.cc-timing-line {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
}

.cc-timing-card {
  font-weight: 500;
}

.cc-timing-sep {
  color: var(--fg-faint);
}

.cc-timing-window {
  color: var(--fg-muted);
}
.cc-timing-window em {
  font-style: italic;
  color: var(--red);
  font-weight: 500;
}

/* ── Responsive fallback ──────────────────────────────────── */

/* The figure has a fixed pixel geometry; on narrower viewports
   we collapse to a single column.  The figure overflows naturally
   if the viewport can't accommodate it — that's by design (it's
   a desktop reading). */
@media (max-width: 1100px) {
  .cc-body {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .cc-figure-wrap {
    overflow-x: auto;
  }
}


/* =============================================================
   Print styles
   - Default to landscape (the OOTK 2-column grids and wheels need
     the horizontal room).
   - Drop the dark theme back to ink-on-paper; the night background
     would just waste toner.
   - Hide on-screen chrome: site header, page nav, action links.
   - Avoid breaking individual cards / chain rows / pair rows
     across pages.
   ============================================================= */

@media print {
  @page {
    size: landscape;
    margin: 1cm;
  }

  /* Override both themes to a print-safe ink-on-paper palette. */
  body,
  body.theme-night,
  body.theme-parchment {
    background: #fff !important;
    color: #111 !important;
    --bg:        #fff;
    --fg:        #111;
    --fg-muted:  #555;
    --fg-faint:  #888;
    --rule:      #bbb;
    --rule-soft: #ddd;
    --card-bg:   #fafafa;
    font-size: 10pt;
  }

  /* Strip on-screen-only chrome. */
  .site-header,
  .page-nav,
  .actions-row,
  .question-bar .actions,
  .reading-topbar .saved {
    display: none !important;
  }

  /* Make the main content stretch to the printable width. */
  .reading-shell,
  .form-shell,
  main {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Trim screen padding so we don't waste edge space. */
  .reading-topbar,
  .question-bar,
  .ootk-section .section-head,
  .ootk-section .sig-line,
  .four-piles-block,
  .ootk-grid,
  .section-pad,
  .three-card .card-panel {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  /* SVG figures scale to whatever column they sit in. */
  .wheel,
  .tree-of-life {
    width: 100%;
    height: auto;
    max-height: 16cm;
  }

  /* Keep visual units intact across page breaks. */
  .card-panel,
  .chain-row,
  .pair-row,
  .lone-row,
  .gt-card,
  .pile-preview,
  .single-house,
  .pile-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .ootk-section,
  .three-card,
  .grand-tableau,
  .cc-spread {
    break-inside: auto;
  }

  /* Celtic Cross: keep individual slots together, and keep the rotated
     Crossing card visible (transforms are honoured in print). */
  .cc-slot,
  .cc-ledger-list li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The horizontal pile strip should never overflow the printable width. */
  .pile-strip {
    flex-wrap: wrap;
  }

  /* Wheel SVG strokes — switch to ink colour explicitly so a printer
     in greyscale mode still produces legible lines. */
  .wheel .ring-outer,
  .wheel .ring-inner,
  .wheel .divider {
    stroke: #111;
  }
  .wheel .chain-line,
  .wheel .placeholder.sig,
  .wheel .dot.sig,
  .wheel .sig-sector,
  .tree-of-life .sephira.sig .seph-circle {
    fill: #111 !important;
    stroke: #111 !important;
  }
  .wheel .placeholder.chain {
    stroke: #444 !important;
  }

  /* Sig/partner highlight on the grand tableau: use a heavier black
     border instead of red so a B&W printer reads it. */
  .gt-card.sig .gt-frame,
  .gt-card.partner .gt-frame {
    border-color: #111 !important;
  }

  /* Force hyperlinks not to grow underlines & blue colour. */
  a, a:visited {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* Suppress any element marked as print-hidden (escape hatch). */
  .no-print {
    display: none !important;
  }
}

/* =============================================================
   Rune Cast — Elder Futhark on Thorsson's Nine-Worlds cloth.
   Folded in from the design handoff (cast.css). The cloth, the
   "flat carved wood" staves, the reading panel, and the ættir
   legend. The engine + data live in static/js/{cast-engine,
   runes-data}.js; this only styles what they render.

   The handoff's tokens are aliased onto the existing parchment
   palette so the cast uses the same ink greys + brand red as the
   rest of the instrument (the prototype's #8a261a blood becomes
   the project's --red #a13434; its #2a2017 ink becomes --fg).
   ============================================================= */

body.theme-parchment {
  --ink:      var(--fg);
  --ink70:    rgba(26, 24, 21, 0.70);
  --ink50:    rgba(26, 24, 21, 0.50);
  --ink35:    rgba(26, 24, 21, 0.35);
  --ink20:    rgba(26, 24, 21, 0.20);
  --ink12:    rgba(26, 24, 21, 0.12);
  --blood:    var(--red);
  --blood-dk: #7a2222;
  --display:  var(--serif);
  --field:    var(--bg);
  --panel:    #ded2b6;   /* a deeper parchment than --card-bg for the lens block */
  --card:     #fbf8ef;   /* near-white glyph-chip paper */
}

/* Rune-cast eyebrows already carry their own "— " dash in the rendered
   text, so they use `.eyebrow.red` (no ::before) rather than the global
   `.eyebrow-red`, which would inject a second dash. */
.rune-cast .eyebrow.red,
.rc-panel .eyebrow.red { color: var(--red); }

/* ── The stage ───────────────────────────────────────────────── */
.rc-stage {
  display: grid;
  grid-template-columns: 800px minmax(380px, 440px);
  gap: 64px;
  justify-content: center;
  align-items: start;
  padding: 44px 0 0;
}

.rc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  min-height: 32px;
}
.rc-controls .eyebrow.red { margin: 0; }
.rc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink70);
  border: 1px solid var(--ink20);
  border-radius: 20px;
  padding: 7px 14px;
  background: rgba(251, 248, 239, 0.5);
  transition: all .16s ease;
}
.rc-toggle:hover { border-color: var(--ink35); }
.rc-toggle .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--blood); }
.rc-toggle.on { background: var(--blood); color: #f3ead7; border-color: var(--blood); }
.rc-toggle.on .dot { background: #f3ead7; border-color: #f3ead7; }

/* ── The field & cloth ───────────────────────────────────────── */
.field { position: relative; width: 800px; height: 810px; }
.field svg.mat { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.mat .cloth { fill: #f1ead7; }
.mat .clothshade { fill: url(#clothG); }
.mat .frame { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: 0.78; }
.mat .ring { fill: none; stroke: var(--ink); stroke-width: 1.3; opacity: 0.7; }
.mat .grid { stroke: var(--ink); stroke-width: 1.2; opacity: 0.6; }
.mat .grid.diag { opacity: 0.5; }
.mat .north { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.mat .north-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; fill: var(--ink70); text-anchor: middle; }
/* region fills, lit on hover */
.mat .stead { fill: rgba(161, 52, 52, 0.085); stroke: rgba(161, 52, 52, 0.5); stroke-width: 1.2; opacity: 0; transition: opacity .22s ease; }
.mat .stead.on { opacity: 1; }
/* world-stead names */
.mat .wlabel {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  fill: var(--ink70); text-anchor: middle; dominant-baseline: middle; pointer-events: auto; cursor: pointer;
  transition: fill .18s ease;
}
.mat .wlabel.core { fill: var(--ink); letter-spacing: 0.16em; }
.mat .wlabel:hover, .mat .wlabel.lit { fill: var(--blood); }

.staves, .tags { position: absolute; inset: 0; }
.staves { pointer-events: none; }
.tags { pointer-events: none; transition: opacity .3s ease; }
.field.nolabels .tags { opacity: 0; }
.tags span {
  position: absolute; transform: translate(-50%, 0); font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink50); white-space: nowrap;
}
.tags span i { font-style: normal; color: var(--blood); }
.tags span.dim { color: var(--ink35); opacity: 0.7; }

/* ── Staves — "flat carved wood" ─────────────────────────────── */
.stave {
  position: absolute; left: 0; top: 0; width: 40px; height: 66px; margin-left: -20px; margin-top: -33px;
  cursor: pointer; z-index: 2; pointer-events: auto; transition: opacity .3s ease, filter .3s ease;
}
.stave .wood {
  position: absolute; inset: 0; border-radius: 7px; border: 1px solid rgba(42, 32, 23, 0.32);
  background: #ccb588;
  background-image: repeating-linear-gradient(90deg, rgba(42, 32, 23, 0.05) 0 1px, transparent 1px 8px);
  box-shadow: none;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.stave .glyph {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 44px; transform: translate(-50%, -50%);
  color: #42301c; opacity: 0.95; transition: color .18s ease;
}
.stave.facedown .glyph { opacity: 0; }
.stave.faceup .glyph { transition: opacity .28s ease, color .18s ease; }
@keyframes rc-staveflip { 0% { transform: scaleX(1); } 45% { transform: scaleX(0.22); } 100% { transform: scaleX(1); } }
.stave.reveal .wood { animation: rc-staveflip .34s ease; }
.stave.facedown .wood {
  background: #bda978;
  background-image: repeating-linear-gradient(90deg, rgba(42, 32, 23, 0.06) 0 1px, transparent 1px 8px);
}

.stave.hot { z-index: 6; }
.stave.hot .wood {
  border-color: var(--blood);
  box-shadow: 0 0 0 3px rgba(161, 52, 52, 0.13), 0 3px 11px rgba(122, 34, 34, 0.35);
}
.stave.hot .glyph { color: var(--blood); }
.field.diming .stave:not(.hot) { opacity: 0.55; }
.stave.silent { opacity: 0.4; filter: grayscale(0.55); }
.field.diming .stave.silent:not(.hot) { opacity: 0.22; }
.stave.silent.hot { opacity: 0.85; filter: grayscale(0.2); }

.silent-line {
  margin: 12px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink35);
}

/* ── Reading panel ───────────────────────────────────────────── */
.rc-panel-col { position: sticky; top: 34px; }
.rc-panel { min-height: 480px; max-width: 540px; }
@keyframes rc-panel-in { from { transform: translateY(6px); } to { transform: none; } }
.rc-panel.enter { animation: rc-panel-in .3s ease; }

.rc-panel .pp-castline {
  font-family: var(--display); font-style: italic; font-size: 22px; line-height: 1.4;
  color: var(--ink70); margin: 14px 0 20px; text-wrap: pretty;
}
.rc-panel .pp-castline em { color: var(--blood); }
.rc-panel .zr-group {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink35); margin: 20px 0 2px;
}
.rc-panel .zr-group:first-of-type { margin-top: 8px; }
.rc-panel .zrow { border-top: 1px solid var(--ink12); padding: 9px 0 8px; border-radius: 3px; transition: background .15s ease; }
.rc-panel .zrow.lit { background: rgba(161, 52, 52, 0.06); }
.rc-panel .zr-head { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.rc-panel .zr-name { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); flex: 1; cursor: pointer; transition: color .15s ease; }
.rc-panel .zr-name:hover, .rc-panel .zrow.lit .zr-name { color: var(--blood); }
.rc-panel .zr-sense { font-family: var(--display); font-style: italic; font-size: 13px; color: var(--ink50); flex: 1; }
.rc-panel .zr-count { font-family: var(--mono); font-size: 10.5px; color: var(--blood); }
.rc-panel .zr-list { font-family: var(--display); font-size: 15px; color: var(--ink70); margin: 5px 0 0; line-height: 1.55; text-wrap: pretty; }
.rc-panel .zr-list i { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--blood); }
.rc-panel .zr-list .none { color: var(--ink35); font-style: italic; }
.rc-panel .pp-hint {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink35); margin: 30px 0 0; display: flex; align-items: center; gap: 9px;
}
.rc-panel .pp-hint::before { content: ""; width: 22px; border-top: 1px solid var(--ink20); flex: none; }

.rc-panel .pp-runehead { display: flex; align-items: center; gap: 20px; margin: 18px 0 16px; }
.rc-panel .pp-glyph {
  width: 54px; height: 84px; display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--card); border: 1px solid var(--ink20); border-radius: 3px; box-shadow: 0 2px 8px rgba(42, 32, 23, 0.12);
}
.rc-panel .pp-glyph svg { width: 30px; height: 48px; color: var(--ink); display: block; }
.rc-panel .pp-glyph.rev svg { transform: rotate(180deg); color: var(--blood); }
.rc-panel .pp-glyph.mute { opacity: 0.5; }
.rc-panel .pp-rname { font-family: var(--display); font-weight: 500; font-size: 34px; margin: 0; line-height: 1.05; letter-spacing: -0.01em; }
.rc-panel .pp-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink50); margin: 7px 0 0; }
.rc-panel .pp-orient {
  display: inline-flex; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  margin: 4px 0 16px; padding: 5px 12px; border: 1px solid var(--ink20); border-radius: 14px; color: var(--ink70);
}
.rc-panel .pp-orient.rev { color: #f3ead7; background: var(--blood); border-color: var(--blood); }
.rc-panel .pp-orient.fast { color: var(--ink50); border-style: dashed; }
.rc-panel .pp-kw { font-family: var(--display); font-style: italic; font-size: 15.5px; color: var(--ink50); margin: 0 0 14px; }
.rc-panel .pp-body { font-family: var(--display); font-size: 19.5px; line-height: 1.6; color: var(--ink70); margin: 0 0 18px; text-wrap: pretty; }
.rc-panel .pp-body.muted { color: var(--ink50); }
.rc-panel .pp-note {
  font-family: var(--display); font-style: italic; font-size: 15.5px; color: var(--ink50); margin: 18px 0 0;
  padding-top: 16px; border-top: 1px solid var(--ink12); text-wrap: pretty;
}
.rc-panel .pp-worldrealm { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink35); margin: 14px 0 16px; }
.rc-panel .pp-lens { margin: 18px 0 0; padding: 16px 18px; background: var(--panel); border-radius: 4px; }
.rc-panel .pp-lens-head { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blood); margin: 0 0 8px; }
.rc-panel .pp-lens-body { font-family: var(--display); font-size: 15.5px; line-height: 1.56; color: var(--ink70); margin: 0; text-wrap: pretty; }

/* ── Hover tooltip — floats by the pointer (Grand-Tableau style) ── */
.rc-tip {
  position: fixed; z-index: 50; pointer-events: none; opacity: 0;
  background: var(--ink); color: #f3ead7;
  padding: 11px 15px 13px; border-radius: 4px; max-width: 320px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
  transition: opacity .14s ease; transform: translate(-50%, -114%);
  font-family: var(--display);
}
.rc-tip .tt-loc {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(243, 234, 215, 0.55); margin: 0 0 6px;
}
.rc-tip .tt-rune { display: block; font-size: 20px; font-weight: 500; line-height: 1.1; margin: 0 0 4px; }
.rc-tip .tt-rune i {
  font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(243, 234, 215, 0.5); margin-left: 6px; vertical-align: middle;
}
.rc-tip .tt-rune i.rev { color: var(--red-soft); }
.rc-tip .tt-realm {
  display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(243, 234, 215, 0.45); margin: 0 0 7px;
}
.rc-tip .tt-kw { display: block; font-style: italic; font-size: 13px; color: rgba(243, 234, 215, 0.6); margin: 0 0 7px; }
.rc-tip .tt-body { display: block; font-size: 14px; line-height: 1.5; color: rgba(243, 234, 215, 0.92); }
.rc-tip .tt-lens {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: rgba(243, 234, 215, 0.5); line-height: 1.5; margin: 9px 0 0; padding-top: 8px;
  border-top: 1px solid rgba(243, 234, 215, 0.18);
}

/* ── Live casting flow (rune_cast_flow.html) ─────────────────── */
.rc-steps {
  display: flex; gap: 26px; padding: 18px var(--space-5) 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink35);
}
.rc-steps span { transition: color .2s ease; }
.rc-flow[data-phase="q"]       .rc-steps span[data-s="q"],
.rc-flow[data-phase="gather"]  .rc-steps span[data-s="gather"],
.rc-flow[data-phase="casting"] .rc-steps span[data-s="casting"],
.rc-flow[data-phase="read"]    .rc-steps span[data-s="read"] { color: var(--blood); }

/* Phase visibility — only the flow page carries data-phase; the saved
   page (.rune-cast without .rc-flow) always shows everything. */
.rc-qstage { display: none; max-width: 780px; margin: 0 auto; padding: 90px var(--space-5) 60px; }
.rc-flow[data-phase="q"] .rc-qstage { display: block; }
.rc-flow[data-phase="q"] .rc-stage,
.rc-flow[data-phase="q"] .rc-qbar { display: none; }
.rc-flow:not([data-phase="read"]) .rc-controls .rc-toggle { visibility: hidden; }
.rc-flow:not([data-phase="read"]) .silent-line { visibility: hidden; }

.rc-qdisplay { margin: 18px 0 22px; }
.rc-qlede { max-width: 640px; margin: 0 0 52px; }
.rc-qinput {
  display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink20);
  font-family: var(--display); font-style: italic; font-size: 25px; color: var(--ink); padding: 10px 2px 14px; outline: none;
  transition: border-color .18s ease;
}
.rc-qinput::placeholder { color: var(--ink35); }
.rc-qinput:focus { border-bottom-color: var(--blood); }
.rc-qfoot { display: flex; align-items: center; gap: 22px; margin: 40px 0 0; flex-wrap: wrap; }
.rc-qskip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink35); }

.rc-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #f3ead7;
  background: var(--blood); border: 1px solid var(--blood); border-radius: 22px; padding: 11px 22px; transition: all .18s ease;
}
.rc-btn:hover { background: var(--blood-dk); border-color: var(--blood-dk); }
.rc-btn:disabled { opacity: 0.4; cursor: default; }

.rc-gatherbar { display: flex; gap: 13px; flex-wrap: wrap; align-items: center; margin: 34px 0 0; }

/* Single-column fallback for the cast stage on narrower viewports. */
@media (max-width: 1380px) {
  .rc-stage { grid-template-columns: 800px; justify-content: center; }
  .rc-panel-col { position: static; }
}
@media (max-width: 900px) {
  /* The stave positions are pixel coordinates in an 800px-wide space,
     so the cloth can't shrink below that — keep the stage column from
     forcing the page wider and pan the field in its own strip. A true
     scaled-down cast is parked for the Claude Design pass. */
  .rc-stage { grid-template-columns: minmax(0, 1fr); }
  .rc-field-col {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .field { width: 800px; height: auto; aspect-ratio: 800 / 810; }
}
@media print {
  .rc-controls, .rc-steps, .rc-gatherbar { display: none; }
}

/* ====================================================================
   Tarot Table — multi-oracle builder (ported from the design handoff).
   A full-screen authoring surface + the saved-view render. Every
   selector is namespaced .tt-*; the prototype's tokens are scoped to
   the builder roots so they don't leak into the rest of the app.
   ==================================================================== */

.tt-builder, .tt-saved-table {
  --field:#e9e1cd; --panel:#ded2b6; --card:#fbf8ef; --card-edge:#e7dcc1;
  --ink:#2a2017; --ink70:rgba(42,32,23,0.70); --ink50:rgba(42,32,23,0.50);
  --ink35:rgba(42,32,23,0.35); --ink20:rgba(42,32,23,0.20); --ink12:rgba(42,32,23,0.12);
  --blood:#8a261a; --blood-dk:#5c160f; --gold:#b08a3e;
  --ttd:"Fraunces","Times New Roman",serif;
  --ttm:"DM Mono",ui-monospace,monospace;
  --tt-card-w:90px; --tt-card-h:142px; --tt-grid:34px;
}

/* full-screen shell — its own top bar replaces the site header */
body.tt-fullscreen { overflow:hidden; height:100vh; }
.tt-builder {
  position:fixed; inset:0; z-index:1; display:flex; flex-direction:column;
  background:var(--field); color:var(--ink); font-family:var(--ttd);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.tt-builder button { font-family:inherit; cursor:pointer; }
.tt-builder em, .tt-saved-table em { font-style:italic; }
.tt-eyebrow { font-family:var(--ttm); font-size:10px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; }

/* ── Top bar ─────────────────────────────────────────────────────── */
.tt-topbar { flex:0 0 auto; display:flex; align-items:center; gap:26px; padding:0 26px; height:58px;
  border-bottom:1px solid var(--ink12); position:relative; z-index:30; }
.tt-brand { display:flex; align-items:center; gap:11px; white-space:nowrap; }
.tt-sigil-link { display:flex; line-height:0; }
.tt-sigil { width:22px; height:22px; border:1.5px solid var(--blood); transform:rotate(45deg); position:relative; flex:0 0 auto; }
.tt-sigil::after { content:""; position:absolute; inset:4px; border:1px solid var(--blood); }
.tt-brand-name { font-family:var(--ttd); font-size:19px; font-weight:500; }
.tt-brand-date { font-family:var(--ttm); font-size:11px; letter-spacing:0.14em; color:var(--ink35); }

.tt-qwrap { flex:1 1 auto; display:flex; align-items:baseline; gap:14px; min-width:0; }
.tt-qlabel { font-family:var(--ttm); font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink50); white-space:nowrap; }
.tt-qinput { flex:1 1 auto; min-width:0; border:0; background:transparent; font-family:var(--ttd); font-style:italic;
  font-size:20px; color:var(--ink); padding:4px 0; border-bottom:1px solid transparent; transition:border-color .18s ease; }
.tt-qinput::placeholder { color:var(--ink35); font-style:italic; }
.tt-qinput:focus { outline:none; border-bottom-color:var(--ink20); }

.tt-topright { display:flex; align-items:center; gap:18px; white-space:nowrap; }
.tt-pile-caption { font-family:var(--ttm); font-size:11px; letter-spacing:0.12em; color:var(--ink50); }
.tt-read-btn { font-family:var(--ttm); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#f3ead7;
  background:var(--blood); border:1px solid var(--blood); border-radius:22px; padding:10px 20px; transition:background .18s ease,opacity .18s ease; }
.tt-read-btn:hover { background:var(--blood-dk); }
.tt-read-btn:disabled { opacity:.4; cursor:not-allowed; background:var(--blood); }

/* ── Canvas ──────────────────────────────────────────────────────── */
.tt-stage { flex:1 1 auto; position:relative; overflow:hidden; }
.tt-canvas { position:absolute; inset:0; }
.tt-canvas.tt-show-grid { background-image:radial-gradient(circle, var(--ink12) 1.1px, transparent 1.4px);
  background-size:var(--tt-grid) var(--tt-grid); background-position:center center; }
.tt-canvas-hint { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); text-align:center; color:var(--ink35); pointer-events:none; width:340px; }
.tt-ch-lede { font-family:var(--ttd); font-style:italic; font-size:22px; color:var(--ink50); margin:0 0 6px; }
.tt-ch-sub { font-family:var(--ttm); font-size:11px; letter-spacing:0.12em; color:var(--ink35); margin:0; }
.tt-canvas.tt-has-cards .tt-canvas-hint { display:none; }

.tt-guides { position:absolute; inset:0; pointer-events:none; z-index:18; }
.tt-guide { position:absolute; background:var(--blood); opacity:.55; }
.tt-guide.tt-v { width:1px; top:0; bottom:0; }
.tt-guide.tt-h { height:1px; left:0; right:0; }

.tt-spread-hint { position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:20;
  font-family:var(--ttm); font-size:11px; letter-spacing:0.07em; color:var(--ink70);
  background:var(--card); border:1px solid var(--ink12); border-radius:20px; padding:7px 16px;
  box-shadow:0 4px 14px rgba(42,32,23,.12); white-space:nowrap; }
.tt-spread-hint[hidden] { display:none; }

/* ── A position on the table ─────────────────────────────────────── */
.tt-position { position:absolute; transform:translate(-50%,-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:7px; touch-action:none; }
.tt-position.tt-selected { z-index:12; }
.tt-position.tt-dragging { z-index:14; }

.tt-cardstack { position:relative; display:flex; align-items:flex-start; cursor:grab; }
.tt-cardstack:active { cursor:grabbing; }
.tt-cardstack > .tt-tcard + .tt-tcard { margin-left:-50px; transition:margin-left .2s cubic-bezier(.22,1,.36,1), box-shadow .18s ease; }
.tt-position.tt-selected .tt-cardstack > .tt-tcard + .tt-tcard,
.tt-position.tt-faceup .tt-cardstack > .tt-tcard + .tt-tcard { margin-left:10px; }
.tt-position.tt-selected .tt-cardstack { outline:2px solid var(--blood); outline-offset:5px; border-radius:10px; }
.tt-cardstack.tt-drop-hot { outline:2px dashed var(--blood); outline-offset:6px; border-radius:10px; background:rgba(138,38,26,.05); }
.tt-cardstack.tt-group-hot { outline:2px solid var(--gold); outline-offset:6px; border-radius:10px; box-shadow:0 0 0 5px rgba(176,138,62,.18); }

.tt-position.tt-grouped .tt-label-wrap { display:none; }

/* group hull */
.tt-group-hull { position:absolute; z-index:2; border:1.5px solid var(--gold); border-radius:13px; background:rgba(176,138,62,.07); pointer-events:none; }
.tt-group-count { position:absolute; top:-10px; left:-10px; min-width:20px; height:20px; border-radius:10px; background:var(--gold); color:#fff;
  font-family:var(--ttm); font-size:10px; font-weight:500; display:flex; align-items:center; justify-content:center; padding:0 5px; box-shadow:0 1px 3px rgba(42,32,23,.4); pointer-events:none; }
.tt-group-del { position:absolute; top:-10px; right:-10px; width:22px; height:22px; border-radius:50%; border:1px solid var(--ink20); background:var(--card); color:var(--ink70);
  line-height:1; display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer; transition:background .14s ease,color .14s ease,border-color .14s ease; }
.tt-group-del svg { width:12px; height:12px; display:block; }
.tt-group-del:hover { background:var(--blood); color:#f3ead7; border-color:var(--blood); }
.tt-group-split { position:absolute; bottom:-10px; left:-10px; width:22px; height:22px; border-radius:50%; border:1px solid var(--ink20); background:var(--card); color:var(--ink70);
  line-height:1; display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer; transition:background .14s ease,color .14s ease,border-color .14s ease; }
.tt-group-split svg { width:12px; height:12px; display:block; }
.tt-group-split:hover { background:var(--gold); color:#fff; border-color:var(--gold); }
.tt-group-label { position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); width:170px; text-align:center; border:0; background:transparent; pointer-events:auto;
  font-family:var(--ttm); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); padding:3px 4px; border-bottom:1px solid var(--ink20); }
.tt-group-label::placeholder { color:var(--ink35); text-transform:none; letter-spacing:0.04em; }
.tt-group-label:focus { outline:none; border-bottom-color:var(--gold); }

.tt-count { position:absolute; top:-9px; left:-9px; z-index:8; min-width:19px; height:19px; border-radius:10px; background:var(--blood); color:#f3ead7;
  font-family:var(--ttm); font-size:10px; font-weight:500; display:flex; align-items:center; justify-content:center; padding:0 5px; box-shadow:0 1px 3px rgba(42,32,23,.4); pointer-events:none; }

.tt-tcard { position:relative; width:var(--tt-card-w); height:var(--tt-card-h); border-radius:7px; user-select:none; transition:box-shadow .18s ease; box-shadow:0 2px 6px rgba(42,32,23,.16); }
.tt-position.tt-dragging .tt-cardstack { transform:scale(1.04); }
.tt-position.tt-dragging .tt-tcard { box-shadow:0 10px 24px rgba(42,32,23,.32); }

/* card back — themed per oracle */
.tt-tcard.tt-back { --b1:#9a2c1d; --b2:#7d2016; --edge:#5c160f; --accent:rgba(201,162,74,.62);
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 6px, transparent 6px 12px), linear-gradient(160deg,var(--b1),var(--b2)); border:1px solid var(--edge); }
.tt-tcard.tt-back.tt-sys-lenormand { --b1:#33407a; --b2:#232c54; --edge:#1a2143; --accent:rgba(201,176,118,.6); }
.tt-tcard.tt-back.tt-sys-rune { --b1:#565d65; --b2:#3a3f46; --edge:#272b30; --accent:rgba(214,209,198,.5); }
.tt-tcard.tt-back.tt-sys-iching { --b1:#33313f; --b2:#1f1d28; --edge:#14121b; --accent:rgba(201,162,74,.55); }
.tt-tcard.tt-back::before { content:""; position:absolute; inset:5px; border:1px solid var(--accent); border-radius:4px; }
.tt-tcard.tt-back::after { content:""; position:absolute; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-50%) rotate(45deg); border:1.5px solid var(--accent); }

/* card face */
.tt-tcard.tt-face { background:var(--card); border:1px solid var(--card-edge); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:9px 7px; text-align:center; --face-accent:var(--blood); }
.tt-tcard.tt-face.tt-sys-lenormand { --face-accent:#3a4683; }
.tt-tcard.tt-face.tt-sys-rune { --face-accent:#5d5448; background:#f1ece1; }
.tt-tcard.tt-face.tt-sys-iching { --face-accent:#9a7b2e; }
.tt-tcard.tt-face::before { content:""; position:absolute; inset:4px; border:1px solid var(--ink12); border-radius:4px; pointer-events:none; }
.tt-tcard.tt-face.tt-has-art { padding:0; overflow:hidden; }
.tt-tcard.tt-face.tt-has-art::before { display:none; }
.tt-card-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--card); display:block; border-radius:7px; }
.tt-f-top, .tt-f-bot { font-family:var(--ttm); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--face-accent); z-index:1; }
.tt-f-name { font-family:var(--ttd); font-size:14px; line-height:1.15; color:var(--ink); z-index:1; display:flex; align-items:center; flex:1; }
.tt-f-rule { width:24px; height:1px; background:var(--ink20); }

.tt-rune-glyph { flex:1; display:flex; align-items:center; justify-content:center; z-index:1; font-size:50px; line-height:1; color:var(--ink);
  font-family:"Noto Sans Runic","Segoe UI Historic","Apple Symbols",var(--ttd); }

.tt-hexfig { flex:1; display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; z-index:1; }
.tt-hx { display:block; height:5px; width:44px; background:var(--ink); border-radius:1px; }
.tt-hx.tt-yin { background:linear-gradient(90deg,var(--ink) 0 40%, transparent 40% 60%, var(--ink) 60% 100%); }
.tt-hexfig.tt-hexbig { gap:4px; } .tt-hexfig.tt-hexbig .tt-hx { height:6px; width:50px; }
.tt-hexfig.tt-hexmini { flex:0 0 auto; gap:2px; } .tt-hexfig.tt-hexmini .tt-hx { height:3px; width:22px; }

.tt-tcard.tt-flipping { animation:tt-cardflip .26s ease; will-change:transform; backface-visibility:hidden; }
@keyframes tt-cardflip { 0%,100% { transform:scaleX(1); } 50% { transform:scaleX(.04); } }

/* empty / ghost slot from a loaded spread */
.tt-tcard.tt-ghost { background:transparent; border:1.5px dashed var(--ink20); box-shadow:none; display:flex; align-items:center; justify-content:center; color:var(--ink20); cursor:pointer; transition:border-color .14s ease,color .14s ease,background .14s ease; }
.tt-gmark { font-size:26px; font-weight:300; line-height:1; }
.tt-ghint { position:absolute; bottom:9px; font-family:var(--ttm); font-size:8px; letter-spacing:0.12em; text-transform:uppercase; color:var(--blood); opacity:0; transition:opacity .14s ease; }
.tt-tcard.tt-ghost:hover { border-color:var(--blood); color:var(--blood); background:rgba(138,38,26,.06); }
.tt-tcard.tt-ghost:hover .tt-ghint { opacity:1; }
.tt-tcard.tt-ghost.tt-drop-hot { border-color:var(--blood); color:var(--blood); background:rgba(138,38,26,.1); border-style:solid; box-shadow:0 0 0 2px rgba(138,38,26,.25); }

/* label under a card */
.tt-label-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; width:150px; }
.tt-pos-label { width:100%; text-align:center; border:0; background:transparent; font-family:var(--ttm); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink70); padding:3px 4px; border-bottom:1px solid transparent; transition:border-color .15s ease; }
.tt-pos-label::placeholder { color:var(--ink35); text-transform:none; letter-spacing:0.04em; }
.tt-pos-label:focus { outline:none; border-bottom-color:var(--ink20); color:var(--ink); }
.tt-position.tt-selected .tt-pos-label { border-bottom-color:var(--ink12); }

.tt-chips { display:none; flex-wrap:wrap; gap:4px; justify-content:center; max-width:150px; }
.tt-position.tt-selected.tt-label-empty .tt-chips.on { display:flex; }
.tt-chip { font-family:var(--ttm); font-size:9px; letter-spacing:0.06em; color:var(--ink70); background:var(--panel); border:1px solid var(--ink12); border-radius:11px; padding:3px 8px; }
.tt-chip:hover { border-color:var(--blood); color:var(--blood); }

/* per-card hover controls */
.tt-cbtn { position:absolute; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; border:1px solid var(--ink20);
  background:var(--card); color:var(--ink70); opacity:0; transform:scale(.85); transition:opacity .14s ease,transform .14s ease,background .14s ease,color .14s ease; z-index:3; }
.tt-position:hover .tt-cbtn, .tt-position.tt-selected .tt-cbtn { opacity:1; transform:scale(1); }
.tt-cbtn svg { width:12px; height:12px; display:block; }
.tt-cbtn.tt-trash { top:-9px; right:-9px; }
.tt-cbtn.tt-trash:hover { background:var(--blood); color:#f3ead7; border-color:var(--blood); }
.tt-cbtn.tt-minus { top:-9px; right:20px; font-size:16px; }
.tt-cbtn.tt-minus:hover { background:var(--blood); color:#f3ead7; border-color:var(--blood); }
.tt-cbtn.tt-flip { bottom:-9px; right:-9px; }
.tt-cbtn.tt-flip:hover { background:var(--ink); color:var(--field); border-color:var(--ink); }
.tt-cbtn.tt-add { bottom:-9px; left:-9px; font-size:15px; }
.tt-cbtn.tt-add:hover { background:var(--gold); color:#fff; border-color:var(--gold); }
.tt-cbtn.tt-spin { animation:tt-spin .4s ease; }
@keyframes tt-spin { to { transform:rotate(360deg) scale(1); } }

/* ── Floating dock ───────────────────────────────────────────────── */
.tt-dock { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; align-items:stretch; gap:0; z-index:25; background:var(--ink); border-radius:16px; padding:9px; box-shadow:0 10px 30px rgba(42,32,23,.34); }
.tt-dock-group { display:flex; align-items:center; gap:4px; padding:0 9px; }
.tt-dock-div { width:1px; margin:6px 0; background:rgba(243,234,215,.16); }
.tt-dock-group.tt-sources { gap:5px; padding:0 8px; }
.tt-source { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border-radius:11px; background:transparent; border:1px solid transparent; cursor:grab; user-select:none; touch-action:none; position:relative; transition:background .14s ease,border-color .14s ease; }
.tt-source:hover { background:rgba(243,234,215,.08); }
.tt-source:active { cursor:grabbing; }
.tt-source.tt-empty { opacity:.34; cursor:not-allowed; }
.tt-src-visual { position:relative; width:34px; height:48px; border-radius:6px; flex:0 0 auto; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--b1),var(--b2)); border:1px solid var(--edge); box-shadow:0 1px 3px rgba(0,0,0,.32); }
.tt-source[data-system="tarot"] .tt-src-visual { --b1:#9a2c1d; --b2:#7d2016; --edge:#5c160f; }
.tt-source[data-system="lenormand"] .tt-src-visual { --b1:#33407a; --b2:#232c54; --edge:#1a2143; }
.tt-source[data-system="rune"] .tt-src-visual { --b1:#565d65; --b2:#3a3f46; --edge:#272b30; }
.tt-source[data-system="iching"] .tt-src-visual { --b1:#33313f; --b2:#1f1d28; --edge:#14121b; }
.tt-dock-diamond { width:15px; height:15px; border:1.5px solid rgba(201,162,74,.82); transform:rotate(45deg); }
.tt-dock-pip { font-family:var(--ttm); font-size:11px; font-weight:500; color:rgba(201,176,118,.95); }
.tt-dock-rune { font-size:20px; line-height:1; color:rgba(214,209,198,.92); font-family:"Noto Sans Runic","Segoe UI Historic","Apple Symbols",serif; }
.tt-src-visual .tt-hexfig.tt-hexmini { width:16px; gap:2px; }
.tt-src-visual .tt-hexfig.tt-hexmini .tt-hx { width:16px; background:rgba(201,162,74,.85); }
.tt-src-visual .tt-hexfig.tt-hexmini .tt-hx.tt-yin { background:linear-gradient(90deg,rgba(201,162,74,.85) 0 40%, transparent 40% 60%, rgba(201,162,74,.85) 60% 100%); }
.tt-src-meta { display:flex; flex-direction:column; gap:1px; line-height:1.2; align-items:flex-start; }
.tt-src-name { font-family:var(--ttm); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:#f3ead7; white-space:nowrap; }
.tt-src-count { font-family:var(--ttm); font-size:10px; color:rgba(243,234,215,.5); }

.tt-tool { width:36px; height:36px; border-radius:9px; border:1px solid transparent; background:transparent; color:rgba(243,234,215,.66); display:flex; align-items:center; justify-content:center; transition:background .14s ease,color .14s ease,border-color .14s ease; position:relative; }
.tt-tool svg { width:18px; height:18px; display:block; }
.tt-tool:hover { background:rgba(243,234,215,.09); color:#f3ead7; }
.tt-tool.tt-active { background:var(--blood); color:#f3ead7; }
.tt-tool:disabled { opacity:.32; cursor:not-allowed; }
.tt-tool:disabled:hover { background:transparent; color:rgba(243,234,215,.66); }

.tt-tool[data-tip]:hover::after, .tt-source[data-tip]:hover::after {
  content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
  font-family:var(--ttm); font-size:10px; letter-spacing:0.06em; white-space:nowrap; background:var(--ink); color:#f3ead7;
  border:1px solid rgba(243,234,215,.18); padding:4px 8px; border-radius:5px; pointer-events:none; z-index:40; }

/* drag ghost — themed per system */
.tt-ghost-card { --b1:#9a2c1d; --b2:#7d2016; --edge:#5c160f; --accent:rgba(201,162,74,.55);
  position:fixed; width:var(--tt-card-w); height:var(--tt-card-h); border-radius:7px; pointer-events:none; z-index:60; transform:translate(-50%,-50%) rotate(-3deg);
  box-shadow:0 12px 28px rgba(42,32,23,.4); background:repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 6px, transparent 6px 12px), linear-gradient(160deg,var(--b1),var(--b2)); border:1px solid var(--edge); }
.tt-ghost-card.tt-sys-lenormand { --b1:#33407a; --b2:#232c54; --edge:#1a2143; --accent:rgba(201,176,118,.55); }
.tt-ghost-card.tt-sys-rune { --b1:#565d65; --b2:#3a3f46; --edge:#272b30; --accent:rgba(214,209,198,.45); }
.tt-ghost-card.tt-sys-iching { --b1:#33313f; --b2:#1f1d28; --edge:#14121b; --accent:rgba(201,162,74,.5); }
.tt-ghost-card::after { content:""; position:absolute; inset:5px; border:1px solid var(--accent); border-radius:4px; }

/* ── Spreads popover ─────────────────────────────────────────────── */
.tt-pop { position:absolute; bottom:84px; left:50%; transform:translateX(-50%); width:300px; background:var(--card); border:1px solid var(--ink20); border-radius:12px; box-shadow:0 16px 40px rgba(42,32,23,.3); padding:16px; z-index:35; display:none; }
.tt-pop.open { display:block; }
.tt-pop-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.tt-pop-head .tt-eyebrow { color:var(--blood); }
.tt-pop-save { font-family:var(--ttm); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink70); background:none; border:0; padding:0; border-bottom:1px solid var(--ink20); }
.tt-pop-save:hover { color:var(--blood); border-color:var(--blood); }
.tt-pop-save:disabled { opacity:.4; cursor:not-allowed; }
.tt-spread-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto; }
.tt-spread-card { display:flex; align-items:center; gap:12px; padding:9px; border:1px solid var(--ink12); border-radius:8px; background:var(--field); cursor:pointer; transition:border-color .14s ease,background .14s ease; position:relative; }
.tt-spread-card:hover { border-color:var(--blood); background:#efe7d3; }
.tt-mini { position:relative; width:52px; height:40px; flex:0 0 auto; background:var(--panel); border:1px solid var(--ink12); border-radius:4px; overflow:hidden; }
.tt-mini i { position:absolute; width:8px; height:12px; border-radius:1.5px; border:1px dashed var(--ink35); transform:translate(-50%,-50%); }
.tt-spread-meta { flex:1 1 auto; min-width:0; }
.tt-sm-name { font-family:var(--ttd); font-size:15px; color:var(--ink); }
.tt-sm-count { font-family:var(--ttm); font-size:9.5px; letter-spacing:0.08em; color:var(--ink50); text-transform:uppercase; }
.tt-spread-del { flex:0 0 auto; width:24px; height:24px; border-radius:6px; border:1px solid var(--ink12); background:var(--card); color:var(--ink50); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .14s ease,color .14s ease,border-color .14s ease; }
.tt-spread-del svg { width:12px; height:12px; }
.tt-spread-del:hover { background:var(--blood); color:#f3ead7; border-color:var(--blood); }
.tt-spread-empty { font-family:var(--ttd); font-style:italic; color:var(--ink50); font-size:14px; margin:4px 0 0; }
.tt-pop-saverow { display:none; gap:8px; margin-top:12px; }
.tt-pop-saverow.on { display:flex; }
.tt-pop-saverow input { flex:1; border:1px solid var(--ink20); border-radius:6px; background:var(--field); font-family:var(--ttm); font-size:12px; color:var(--ink); padding:7px 9px; }
.tt-pop-saverow input:focus { outline:none; border-color:var(--blood); }
.tt-pop-saverow button { font-family:var(--ttm); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:#f3ead7; background:var(--blood); border:0; border-radius:6px; padding:0 12px; }

/* ── Display settings popover ────────────────────────────────────── */
.tt-pop.tt-settings { width:236px; }
.tt-setting { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.tt-setting + .tt-setting { border-top:1px solid var(--ink12); }
.tt-s-name { font-family:var(--ttd); font-size:14px; color:var(--ink); }
.tt-s-sub { font-family:var(--ttm); font-size:9px; letter-spacing:0.04em; color:var(--ink50); margin-top:1px; }
.tt-switch { width:38px; height:22px; border-radius:11px; background:var(--ink20); border:0; position:relative; flex:0 0 auto; transition:background .16s ease; }
.tt-switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--card); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .16s ease; }
.tt-switch.on { background:var(--blood); }
.tt-switch.on::after { transform:translateX(16px); }

/* ── Read-together commit sheet ──────────────────────────────────── */
.tt-scrim { position:absolute; inset:0; background:rgba(42,32,23,.46); z-index:50; display:none; align-items:center; justify-content:center; }
.tt-scrim.open { display:flex; }
.tt-sheet { width:420px; max-width:90%; background:var(--card); border:1px solid var(--ink20); border-radius:14px; padding:30px 32px; box-shadow:0 24px 60px rgba(42,32,23,.4); }
.tt-sheet .tt-eyebrow { color:var(--blood); }
.tt-sheet h2 { font-family:var(--ttd); font-weight:500; font-size:27px; margin:10px 0 12px; letter-spacing:-0.01em; }
.tt-sheet p { font-family:var(--ttd); font-size:15.5px; color:var(--ink70); margin:0 0 22px; line-height:1.55; }
.tt-sheet-actions { display:flex; gap:12px; align-items:center; }
.tt-btn-primary { font-family:var(--ttm); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#f3ead7; background:var(--blood); border:0; border-radius:22px; padding:11px 22px; }
.tt-btn-primary:hover { background:var(--blood-dk); }
.tt-btn-primary:disabled { opacity:.5; cursor:default; }
.tt-btn-ghost { font-family:var(--ttm); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink70); background:none; border:0; padding:11px 6px; }
.tt-btn-ghost:hover { color:var(--blood); }

/* ── "+ add a draw" menu ─────────────────────────────────────────── */
.tt-add-menu { position:absolute; z-index:45; background:var(--ink); border-radius:12px; padding:10px; box-shadow:0 14px 34px rgba(42,32,23,.42); display:none; }
.tt-add-menu.open { display:block; }
.tt-am-head { font-family:var(--ttm); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(243,234,215,.5); margin:2px 4px 8px; }
.tt-am-row { display:flex; gap:6px; }
.tt-am-opt { display:flex; flex-direction:column; align-items:center; gap:6px; width:58px; padding:8px 4px; border-radius:9px; background:rgba(243,234,215,.06); border:1px solid transparent; cursor:pointer; transition:background .14s ease,border-color .14s ease; }
.tt-am-opt:hover { background:rgba(243,234,215,.13); border-color:rgba(243,234,215,.22); }
.tt-am-vis { position:relative; width:26px; height:36px; border-radius:5px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--b1),var(--b2)); border:1px solid var(--edge); }
.tt-am-opt.tt-sys-tarot .tt-am-vis { --b1:#9a2c1d; --b2:#7d2016; --edge:#5c160f; }
.tt-am-opt.tt-sys-lenormand .tt-am-vis { --b1:#33407a; --b2:#232c54; --edge:#1a2143; }
.tt-am-opt.tt-sys-rune .tt-am-vis { --b1:#565d65; --b2:#3a3f46; --edge:#272b30; }
.tt-am-opt.tt-sys-iching .tt-am-vis { --b1:#33313f; --b2:#1f1d28; --edge:#14121b; }
.tt-am-vis .tt-dock-diamond { width:13px; height:13px; }
.tt-am-vis .tt-dock-rune { font-size:16px; }
.tt-am-vis .tt-dock-pip { font-size:9px; }
.tt-am-vis .tt-hexfig.tt-hexmini .tt-hx { width:18px; height:2.5px; background:rgba(201,162,74,.85); }
.tt-am-vis .tt-hexfig.tt-hexmini .tt-hx.tt-yin { background:linear-gradient(90deg,rgba(201,162,74,.85) 0 40%, transparent 40% 60%, rgba(201,162,74,.85) 60% 100%); }
.tt-am-name { font-family:var(--ttm); font-size:8.5px; letter-spacing:0.03em; color:#f3ead7; text-transform:uppercase; }

/* ── Saved-reading view (read-only render of the bound table) ────── */
.tt-saved-table { background:var(--field); color:var(--ink); font-family:var(--ttd); border:1px solid var(--ink12); border-radius:6px; margin:var(--space-5); padding:0; }
.tt-saved-table .tt-canvas { position:relative; inset:auto; min-height:72vh; }
.tt-saved-table .tt-cardstack { cursor:default; }
.tt-saved-table .tt-pos-label-static { width:150px; text-align:center; font-family:var(--ttm); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink70); }
.tt-saved-table .tt-group-label-static { position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); width:170px; text-align:center; font-family:var(--ttm); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .tt-builder *, .tt-saved-table * { transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ====================================================================
   "Read together" — the synthesis drafting loader (ported from the
   design handoff). The aperture sigil attends, then settles and streams
   the synthesis. Built into any `.rt-mount` by static/js/read-together.js.
   All selectors namespaced .rt-*; one warm "table" palette.
   ==================================================================== */

.rt-sheet {
  --rt-card:      #f1ebdd;
  --rt-card-edge: #d4c8a4;
  --rt-ink:       #2a2017;
  --rt-ink70:     rgba(42,32,23,0.70);
  --rt-ink50:     rgba(42,32,23,0.50);
  --rt-ink20:     rgba(42,32,23,0.20);
  --rt-blood:     #8a261a;
  --rt-mono:      "DM Mono", ui-monospace, "JetBrains Mono", monospace;
  --rt-display:   var(--serif, "Fraunces", Georgia, serif);

  width: min(92%, 960px);
  margin: var(--space-3, 12px) auto 0;
  background: var(--rt-card);
  border: 1px solid var(--rt-card-edge);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(42,32,23,.40);
  padding: 44px 52px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rt-eyebrow {
  font-family: var(--rt-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rt-blood);
}

/* ── the animated aperture ─────────────────────────────────────────── */
.rt-aperture { width: 108px; height: 108px; margin: 30px auto 8px; display: block; }
.rt-aperture * { transform-box: fill-box; transform-origin: center; }
.rt-inner  { animation: rt-breathe 3.4s ease-in-out infinite; }
.rt-gnomon { animation: rt-sweep 5.6s cubic-bezier(.45,0,.55,1) infinite; }
.rt-dot    { animation: rt-pulse 1.7s ease-in-out infinite; }
.rt-ripple { animation: rt-ripple 3s ease-out infinite; }
.rt-ripple.rt-two { animation-delay: 1.5s; }

@keyframes rt-breathe { 0%,100% { transform: scale(.88); opacity: .18; } 50% { transform: scale(1); opacity: .5; } }
@keyframes rt-pulse   { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.34); opacity: .8; } }
@keyframes rt-ripple  { 0% { transform: scale(.5); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes rt-sweep   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* drafting phase: the search settles, the heartbeat stays */
.rt-sheet.rt-drafting .rt-gnomon { animation-duration: 14s; opacity: .5; }
.rt-sheet.rt-drafting .rt-ripple { animation: none; opacity: 0; }
.rt-sheet.rt-drafting .rt-inner  { animation-duration: 5s; }

/* ── status line (phase 1) ─────────────────────────────────────────── */
.rt-status { height: 18px; margin-top: 14px; font-family: var(--rt-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rt-ink50); position: relative; }
.rt-status span { position: absolute; left: 0; right: 0; opacity: 0; transition: opacity .5s ease; }
.rt-status span.rt-on { opacity: 1; }
.rt-dots::after { content: ""; animation: rt-dots 1.4s steps(4,end) infinite; }
@keyframes rt-dots { 0% { content: ""; } 25% { content: "·"; } 50% { content: "· ·"; } 75% { content: "· · ·"; } }

/* ── synthesis prose (phase 2) ─────────────────────────────────────── */
.rt-synth { margin-top: 22px; min-height: 96px; text-align: left; }
.rt-synth .rt-p { font-family: var(--rt-display); font-size: 18px; font-style: italic; font-weight: 300;
  line-height: 1.6; color: var(--rt-ink70); margin: 0 0 0.7em; text-wrap: pretty; }
.rt-synth .rt-p:last-child { margin-bottom: 0; }
.rt-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--rt-blood);
  margin-left: 1px; vertical-align: -2px; animation: rt-blink 1s steps(2,end) infinite; }
@keyframes rt-blink { 50% { opacity: 0; } }
.rt-synth.rt-done .rt-caret { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rt-inner, .rt-gnomon, .rt-dot, .rt-ripple, .rt-dots::after, .rt-caret { animation: none !important; }
  .rt-ripple { opacity: 0; }
}

/* ── Phones: text-entry floor ──────────────────────────────────────
   iOS Safari zooms the whole page when a focused control's font is
   under 16px. Hold every text-entry control at 16px on phones; the
   mono controls keep their tracking, just a step larger. */
@media (max-width: 720px) {
  input[type="text"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px;
  }
}