/* ==========================================================================
   The Human Design · site.css — the "illuminated book" design language
   (July 2026, owner-approved direction).

   ONE shared layer loaded AFTER each page's inline styles (and after
   learn.css on library pages). It re-tunes the design tokens for both
   themes, sets the book typography (EB Garamond body + Cinzel display,
   matching the keepsake book), and adds the print ornaments:

     · paper grain            (body::after, fixed, above content)
     · gate-wheel watermark   (body::before, fixed, behind content)
     · foil headings          (h1 gradient, @supports-gated)
     · rule·dot·rule ornament (h1::after)
     · engraved buttons, lifted cards, gold selection

   LIGHT is the daylight printing of the book; DARK is the night printing:
   same object, two inkings. The LANDING does not load this file (its hero
   and clock are their own composition; only the typeface reaches its type
   slides via style.css).

   Loaded by: bodygraph.html, energy-weather.html, connection.html,
   penta.html, learn/* (via learn_build.node.js template).
   BUMP THE ?v ON EVERY PAGE'S <link> WHEN EDITING THIS FILE.
   ========================================================================== */

/* ---- tokens: the night printing (dark) ---------------------------------- */
:root {
  --bg: #121110;
  --panel: #1d1913;            /* lifted from the page so cards have edges */
  --panel-2: #171310;
  --hairline: rgba(238, 194, 50, 0.22);
  --hairline-soft: rgba(238, 194, 50, 0.11);
  --text: #eae3d3;             /* brighter ivory ink (was #d9d2c2) */
  --text-dim: #b6ab92;         /* solid, ≈7.5:1 on the page (was .74 alpha) */
  --gold: #eec232;
  --gold-bright: #f3cf52;
  --gold-soft: #d8b765;
  --gold-tint: rgba(238, 194, 50, 0.12);
  --foil: linear-gradient(105deg, #d8ab26 0%, #f6dd85 40%, #eec232 58%, #c89b20 100%);
  --rule: rgba(238, 194, 50, 0.5);
  --grain-opacity: 0.035;
  --wheel-opacity: 0.06;
}

/* ---- tokens: the daylight printing (light) ------------------------------ */
:root[data-theme="light"] {
  --bg: #f3ead9;
  --panel: #fbf5e7;
  --panel-2: #f3e8d3;
  --hairline: rgba(123, 94, 28, 0.34);
  --hairline-soft: rgba(123, 94, 28, 0.17);
  --text: #2a2115;
  --text-dim: #63533a;
  --gold: #8a6914;
  --gold-bright: #a07d18;
  --gold-soft: #7c5d12;
  --gold-tint: rgba(123, 94, 28, 0.12);
  --foil: linear-gradient(105deg, #6d520e 0%, #a37c15 45%, #86660f 65%, #75570e 100%);
  --rule: rgba(123, 94, 28, 0.6);
  --grain-opacity: 0.07;
  --wheel-opacity: 0.075;
}

/* ---- book typography ----------------------------------------------------- */
/* EB Garamond runs smaller than Georgia on the same size: base goes 106.25%
   → 110% so measure stays comfortable. The landing keeps its own base (the
   clock layout is measured, not fluid). */
html { font-size: 110%; }
body {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  overflow-x: hidden; /* belt-and-braces for the fixed ornament layers */
}
p, li, .sub, .note p, .conn-lede { line-height: 1.68; }

/* gold text selection: small, everywhere, unmistakably deliberate */
::selection { background: rgba(238, 194, 50, 0.3); }
:root[data-theme="light"] ::selection { background: rgba(138, 105, 20, 0.22); }

/* ---- paper grain (above everything: ink prints INTO paper) --------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3; /* above page content, below dropdowns (50) and tooltips (60) */
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ---- gate-wheel watermark (behind content, top right, every "page") ------ */
body::before {
  content: "";
  position: fixed;
  top: -170px;
  right: -190px;
  width: 640px;
  height: 640px;
  z-index: -1; /* behind in-flow content, above the page background */
  pointer-events: none;
  opacity: var(--wheel-opacity);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23c49a20'%3E%3Ccircle cx='100' cy='100' r='97' stroke-width='0.5'/%3E%3Ccircle cx='100' cy='100' r='90' stroke-width='6' stroke-dasharray='1.2 7.63'/%3E%3Ccircle cx='100' cy='100' r='82' stroke-width='0.5'/%3E%3Ccircle cx='100' cy='100' r='58' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='100' r='30' stroke-width='0.5' stroke-dasharray='0.9 14.8'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 720px) {
  body::before { display: none; } /* phones: content is the page */
}

/* ---- foil headings + the rule·dot·rule ornament -------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
h1::after {
  content: "";
  display: block;
  width: 9.5rem;
  max-width: 60%;
  height: 7px;
  margin-top: 0.55rem;
  background:
    radial-gradient(circle, var(--rule) 0 1.5px, transparent 2.1px) center/7px 7px no-repeat,
    linear-gradient(var(--rule), var(--rule)) left center/42% 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) right center/42% 1px no-repeat;
}

/* section eyebrows: the hairline now falls away like a ruled line ending */
.eyebrow::after { background: linear-gradient(90deg, var(--hairline), transparent); }

/* ---- cards: pages of the book, lifted off the desk ----------------------- */
.card, .planet-col, .person-form {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .planet-col,
:root[data-theme="light"] .person-form {
  box-shadow: 0 14px 34px rgba(88, 62, 18, 0.13), inset 0 1px 0 rgba(255, 255, 254, 0.75);
}

/* ---- engraved gold buttons (the primary action language) ----------------- */
/* element-level so any class-styled quiet button (.coords-toggle,
   .theme-toggle, .linklike, .add-person …) still wins by specificity */
button, .btn {
  background: linear-gradient(180deg, #f7dc6d, #e7ba32 55%, #d2a31f);
  border: 1px solid rgba(120, 88, 10, 0.55);
  color: #241c08;
  box-shadow: inset 0 1px 0 rgba(255, 251, 235, 0.6), 0 3px 10px rgba(0, 0, 0, 0.26);
  text-shadow: 0 1px 0 rgba(255, 248, 220, 0.35);
}
button:hover, .btn:hover { filter: brightness(1.05); }
:root[data-theme="light"] button, :root[data-theme="light"] .btn {
  box-shadow: inset 0 1px 0 rgba(255, 251, 235, 0.6), 0 3px 10px rgba(88, 62, 18, 0.22);
}
/* quiet text-buttons must NOT pick up the engraved treatment: their own
   rules override background/border but not the shadows added above */
.view-toggle button, .coords-toggle, .theme-toggle, .linklike, .add-person,
.share-row button,
:root[data-theme="light"] .view-toggle button, :root[data-theme="light"] .coords-toggle,
:root[data-theme="light"] .theme-toggle, :root[data-theme="light"] .linklike,
:root[data-theme="light"] .add-person, :root[data-theme="light"] .share-row button {
  box-shadow: none;
  text-shadow: none;
}

/* ---- fields: inkwells (text-like controls only: bodygraph's digest
   checkbox is custom-drawn and must keep its panel background) ------------- */
input:not([type="checkbox"]):not([type="radio"]), select {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
:root[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="light"] select {
  background: #fffcf3;
  box-shadow: inset 0 1px 3px rgba(120, 92, 30, 0.13);
}

/* ---- small dark-mode readability lifts beyond the tokens ------------------ */
/* hardcoded near-invisible fills on the report rows get real edges */
.note, .pl, .day, .conn-row { border-color: var(--hairline-soft); }