/* ============================================================================
   crystal-almanac.css — puts the Crystal and Tarot readings into the
   Numerology Almanac's manuscript style.

   WHY THIS FILE EXISTS
   The crystal and tarot readings are a compiled React app; their look comes
   from Tailwind utilities and hand-written classes baked into crystal.css.
   The Numerology Almanac (/tools/numerology-almanac/) is hand-written HTML
   with its own parchment "panchang almanac" styling. The two pages therefore
   looked like different products.

   Rather than rewrite the React components, this sheet restyles the classes
   the app already emits — .card, .sec-head, .coin, .loshu-cell, .chip, .btn —
   into the almanac's visual language. Loaded AFTER crystal.css on the two
   tool pages only.

   HOW IT WORKS
   1. It re-points the app's own design tokens (--gold, --ink, --ivory …) at
      the almanac palette. crystal.css uses those tokens in many rules, so
      this alone converts a large amount of the page.
   2. It then overrides the rules where crystal.css hardcoded a hex value or a
      shape (soft 1.6rem radii, glassy blurs) that the almanac does not use.

   EVERYTHING IS SCOPED to #fyc-root / #tarot-root. Nothing here can affect
   the rest of the site, and removing the <link> reverts the pages completely.

   The almanac's palette, for reference:
     ink #38290f · ink2 #6b563a · ink3 #8d7a5c
     gild #a8853f · gild-deep #7a5a1e · rule #cbb188 · rule2 #e0cfae
     paper #f2e7d0 · paper2 #fbf5e6 · paper3 #fdfaf1
   ========================================================================= */

/* ---------- 1 · TOKENS ---------------------------------------------------- */
#fyc-root, #fyc-root-main, #tarot-root, #tarot-root-main {
  /* the almanac palette, under the names the app already uses */
  --ink:         #38290f;
  --ink2:        #6b563a;
  --ink3:        #8d7a5c;
  --gold:        #a8853f;
  --gild:        #a8853f;
  --gold-bright: #cbb188;
  --gold-deep:   #7a5a1e;
  --gild-d:      #7a5a1e;
  --rule:        #cbb188;
  --rule2:       #e0cfae;
  --paper:       #f2e7d0;
  --paper2:      #fbf5e6;
  --paper3:      #fdfaf1;
  --ivory:       #fbf5e6;

  /* the almanac leads with Marcellus for headings; Cormorant carries body */
  --font-display: Marcellus, 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;

  /* manuscript geometry: crisp edges, not soft app cards */
  --r-panel: 4px;
  --r-chip:  3px;

  color: var(--ink);
  font-family: var(--font-body);
}

/* ---------- 2 · THE PAGE SURFACE ----------------------------------------- */
/* Parchment, with the almanac's three-layer texture. Applied to the app root
   only — the shared Lady of Destiny header above it keeps the site's ivory,
   which is deliberate: the site chrome should stay consistent sitewide. */
#fyc-root, #tarot-root {
  background: var(--paper);
  background-image:
    radial-gradient(circle at 16% 8%,  rgba(255,255,255,.70), transparent 40%),
    radial-gradient(circle at 88% 84%, rgba(163,124,64,.16),  transparent 38%),
    repeating-linear-gradient(92deg, rgba(150,120,70,.032) 0 2px, transparent 2px 7px);
  background-attachment: fixed;
}

/* The hero used a violet-tinted night sky. In the almanac it is warm paper. */
#fyc-root .night, #tarot-root .night {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(168,133,63,.14), transparent 60%),
    radial-gradient(760px 520px at 84% 14%,  rgba(168,133,63,.12), transparent 55%),
    linear-gradient(180deg, var(--paper3), var(--paper2) 58%, var(--paper));
  color: var(--ink);
}
/* the drifting stars read as dust motes on paper, not stars in a sky */
#fyc-root .star, #tarot-root .star { background: rgba(168,133,63,.55); }

/* ---------- 3 · TYPOGRAPHY ----------------------------------------------- */
#fyc-root .display-xl, #tarot-root .display-xl,
#fyc-root .display-lg, #tarot-root .display-lg,
#fyc-root .display-md, #tarot-root .display-md {
  font-family: var(--font-display);
  color: #4a3512;
  font-weight: 600;
}
#fyc-root .display-xl, #tarot-root .display-xl { letter-spacing: -.01em; line-height: 1.06; }

/* the almanac eyebrow: Inter, wide tracking, deep gild */
#fyc-root .eyebrow, #tarot-root .eyebrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: .66rem;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--gild-d);
}
#fyc-root .lede, #tarot-root .lede {
  font-size: 1.08rem; line-height: 1.64; color: var(--ink2); font-weight: 400;
}
#fyc-root .hint, #tarot-root .hint { color: var(--ink3); }
#fyc-root b, #fyc-root strong,
#tarot-root b, #tarot-root strong { font-weight: 600; color: #4a3512; }

/* ---------- 4 · PANELS (was: glassy app cards) --------------------------- */
/* The almanac's .panel + .gilt: flat parchment, hairline rule, and a gilt
   edge made of stacked shadows rather than a blur. */
#fyc-root .card, #tarot-root .card {
  background: linear-gradient(#fdf9ee, #f8f0dd);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow:
    0 0 0 5px var(--paper),
    0 0 0 6px var(--rule),
    0 16px 34px rgba(90,66,26,.13);
  padding: clamp(1.1rem, 2vw, 1.9rem);
}

/* ---------- 5 · SECTION HEADINGS ---------------------------------------- */
/* The numbered circle becomes the almanac's .sno; the gold underline becomes
   the ❖ ornamented rule. */
#fyc-root .sec-head, #tarot-root .sec-head { align-items: baseline; gap: .85rem; }
#fyc-root .sec-index, #tarot-root .sec-index {
  font-family: var(--font-display);
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--rule);
  background: var(--paper3);
  color: var(--gild-d);
  font-size: .8rem;
}
#fyc-root .flourish, #tarot-root .flourish {
  position: relative;
  height: 0; width: 100%;
  background: none;
  border-top: 1px solid var(--rule);
  margin: 1.15rem 0 1.4rem;
}
#fyc-root .flourish::after, #tarot-root .flourish::after {
  content: "❖";
  position: absolute; top: -.74rem; left: 50%; transform: translateX(-50%);
  background: var(--paper2); padding: 0 .6rem;
  color: var(--gild); font-size: .8rem;
}

/* ---------- 6 · THE NUMBER TILES (Driver, Conductor, Kua …) -------------- */
#fyc-root .coin, #tarot-root .coin {
  background: linear-gradient(#fdf9ee, #f6ecd6);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  padding: .9rem .55rem .8rem;
}
#fyc-root .coin::before, #tarot-root .coin::before {
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
#fyc-root .coin-label, #tarot-root .coin-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: .55rem; letter-spacing: .14em; color: var(--gild-d); opacity: .95;
}
#fyc-root .coin-num, #tarot-root .coin-num {
  font-family: var(--font-display);
  color: var(--gild-d);
  font-size: 1.9rem;
}

/* ---------- 7 · THE LO SHU GRID ----------------------------------------- */
/* The almanac plate: double-rule frame with ❖ at two corners. */
#fyc-root .loshu-plate, #tarot-root .loshu-plate {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--paper3);
  box-shadow: 0 0 0 5px var(--paper2), 0 0 0 6px var(--rule2);
  padding: 1.25rem;
}
#fyc-root .loshu-plate::before, #tarot-root .loshu-plate::before,
#fyc-root .loshu-plate::after,  #tarot-root .loshu-plate::after {
  content: "❖";
  width: auto; height: auto; border: 0;
  color: var(--gild); font-size: .78rem; opacity: 1;
}
#fyc-root .loshu-plate::before, #tarot-root .loshu-plate::before { top: .45rem; left: .6rem; }
#fyc-root .loshu-plate::after,  #tarot-root .loshu-plate::after  { bottom: .45rem; right: .6rem; }

#fyc-root .loshu, #tarot-root .loshu { gap: .5rem; }
#fyc-root .loshu-cell, #tarot-root .loshu-cell {
  border-radius: var(--r-panel);
  font-family: var(--font-display);
  font-size: 1.45rem;
}
/* present: filled gild, white numeral — matches the almanac's .c.on */
#fyc-root .loshu-cell.on, #tarot-root .loshu-cell.on {
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(160deg, var(--gild), var(--gild-d));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 4px 12px rgba(80,60,20,.18);
}
/* absent: dashed hairline, quiet numeral. Kept at .38 rather than the .28 the
   old design used — any lighter and the missing numbers are unreadable, which
   matters because "which numbers are missing" is the point of the grid. */
#fyc-root .loshu-cell.off, #tarot-root .loshu-cell.off {
  border: 1px dashed var(--rule2);
  color: rgba(56,41,15,.38);
  background: transparent;
}
/* strengthened by Driver/Conductor/Name — marked, as in the almanac */
#fyc-root .loshu-cell.plus, #tarot-root .loshu-cell.plus { border-color: var(--gild); }
#fyc-root .loshu-cell.plus::after, #tarot-root .loshu-cell.plus::after {
  content: "❖"; color: var(--gold-bright); font-size: .55rem; top: 3px; right: 6px;
}

/* ---------- 8 · CHIPS ---------------------------------------------------- */
#fyc-root .chip, #tarot-root .chip {
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: var(--paper3);
  color: var(--ink2);
  font-size: .82rem;
  padding: .32rem .8rem;
}

/* ---------- 9 · BUTTONS -------------------------------------------------- */
/* The almanac .cta: solid deep gild, cream text, square-ish, no shimmer. */
#fyc-root .btn, #tarot-root .btn {
  border-radius: var(--r-chip);
  font-family: Inter, system-ui, sans-serif;
  font-size: .9rem;
  letter-spacing: .01em;
}
#fyc-root .btn-primary, #tarot-root .btn-primary {
  background: var(--gild-d);
  color: #f9f2e0;
  box-shadow: 0 8px 20px -12px rgba(90,66,26,.55);
  border: 1px solid var(--gild-d);
}
#fyc-root .btn-primary:hover, #tarot-root .btn-primary:hover {
  background: #6a4d18; transform: translateY(-1px);
}
/* the diagonal shine belongs to the app look, not a manuscript */
#fyc-root .btn-primary::after, #tarot-root .btn-primary::after { content: none; }

#fyc-root .btn-ghost, #tarot-root .btn-ghost,
#fyc-root .gbtn,      #tarot-root .gbtn {
  background: var(--paper3);
  border: 1px solid var(--rule);
  color: #5b4526;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-radius: var(--r-chip);
}
#fyc-root .btn-ghost:hover, #tarot-root .btn-ghost:hover,
#fyc-root .gbtn:hover,      #tarot-root .gbtn:hover {
  background: #fff; border-color: var(--gild); color: var(--gild-d);
}
#fyc-root .btn-dark, #tarot-root .btn-dark {
  background: #4a3512; color: #f9f2e0; border: 1px solid #4a3512;
}

/* ---------- 10 · FORM --------------------------------------------------- */
#fyc-root .field, #tarot-root .field {
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: var(--paper3);
  color: var(--ink);
  font-family: var(--font-body);
}
#fyc-root .field:focus, #tarot-root .field:focus {
  border-color: var(--gild-d);
  box-shadow: 0 0 0 3px rgba(168,133,63,.22);
}
#fyc-root .field-label, #tarot-root .field-label { color: #4a3512; }
#fyc-root .err, #tarot-root .err { color: #b23b2e; }

#fyc-root .seg, #tarot-root .seg {
  background: var(--paper2);
  border: 1px solid var(--rule2);
  border-radius: var(--r-chip);
  padding: .26rem;
}
#fyc-root .seg-item, #tarot-root .seg-item { border-radius: 2px; color: var(--ink2); }
#fyc-root .seg-item[aria-pressed=true], #tarot-root .seg-item[aria-pressed=true] {
  background: var(--gild-d); color: #f9f2e0; box-shadow: none;
}

/* ---------- 11 · BARS (element balance) --------------------------------- */
#fyc-root .bar-track, #tarot-root .bar-track {
  height: 7px; background: rgba(120,95,55,.15);
}

/* ---------- 12 · CHROME ------------------------------------------------- */
/* The almanac's header rule is a 3px double line. */
#fyc-root .glassbar, #tarot-root .glassbar {
  background: rgba(253,250,241,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 3px double var(--rule);
}
/* the seam between hero and body becomes the ❖ ornament */
#fyc-root .seam, #tarot-root .seam {
  background: linear-gradient(180deg, rgba(242,231,208,0), var(--paper) 70%, var(--paper));
}
#fyc-root .seam::after, #tarot-root .seam::after { color: var(--gild); }
#fyc-root .seam-rule, #tarot-root .seam-rule {
  background: linear-gradient(90deg, transparent, var(--gild), transparent);
}
#fyc-root .orbit::before, #tarot-root .orbit::before { border-color: rgba(168,133,63,.35); }

/* ---------- 13 · TAROT CARD FACES --------------------------------------- */
/* These were near-black; on parchment they read as inked card stock. */
#tarot-root .tface-back, #fyc-root .tface-back {
  background: radial-gradient(circle at 50% 32%, #4a3512, #2c1f0a 78%);
  border: 1px solid var(--gild);
  box-shadow: inset 0 0 0 4px rgba(168,133,63,.22);
  border-radius: var(--r-panel);
}
#tarot-root .tface-front, #fyc-root .tface-front {
  background: linear-gradient(180deg, #fdf9ee, #f3e7cd);
  border: 1px solid var(--gild);
  box-shadow: inset 0 0 0 4px rgba(168,133,63,.16);
  color: #4a3512;
  border-radius: var(--r-panel);
}
#tarot-root .tface-corner, #fyc-root .tface-corner { color: var(--gild-d); }
#tarot-root .tface-label,  #fyc-root .tface-label  { color: var(--ink3); }
#tarot-root .tface-glyph,  #fyc-root .tface-glyph  { color: var(--gild-d); }
#tarot-root .tface-name,   #fyc-root .tface-name   { color: #4a3512; }
#tarot-root .tface-rev,    #fyc-root .tface-rev    {
  color: var(--gild-d); border-color: var(--rule); border-radius: var(--r-chip);
}

/* ---------- 14 · FOCUS + PRINT ------------------------------------------ */
#fyc-root :focus-visible, #tarot-root :focus-visible {
  outline: 3px solid var(--gild-d); outline-offset: 2px; border-radius: 3px;
}
@media print {
  #fyc-root, #tarot-root { background: #fff !important; background-image: none !important; }
  #fyc-root .card, #tarot-root .card { box-shadow: none !important; }
}