/*
 * arcana-ui.css — the visual vocabulary for the 22 arcana.
 * =====================================================================================
 *
 * Pairs with inc/arcana-ui.php. Nothing here is global: every selector starts at an
 * .arcui* class, so this sheet cannot reach any existing markup. It deliberately does NOT
 * touch assets/css/screen.css — that file carries a global `.avatar-box{display:none}` which
 * invisibly hid the octagram in production, and this is not going on that pile.
 *
 * COLOUR ENCODES THE METHOD, NOT THE MOOD
 *   brass  matrix     arcana, energies, life periods       (arithmetic on the birth DATE)
 *   blue   astrology  planets, signs, transits             (astronomy on TIME + PLACE)
 *   red    shadow     arcana 15 / 16 / 18                  (the hard spots)
 * Where the two methods agree they meet on one verdict strip, drawn in both colours.
 *
 * LIGHT / DARK
 *   This site is dark, single-theme: assets/css/screen.css sets `body { background: #222 }`
 *   and there is no toggle, no `prefers-color-scheme` rule and no `data-theme` attribute
 *   anywhere in the theme. So the components are authored for the surface that actually
 *   exists. We do NOT branch on `prefers-color-scheme` — a visitor whose OS is set to light
 *   still gets the #222 page, and a light-mode branch would paint pale text onto it.
 *   The light palette below is opt-in (`[data-theme="light"]` or a `.arcui-light` ancestor)
 *   so that IF a theme toggle ever lands, these components already answer to it.
 */

:root {
  /* the two methods */
  --arc-brass:      #c9a24b;
  --arc-brass-hi:   #e8c87a;
  --arc-brass-dim:  rgba(201, 162, 75, .13);
  --arc-brass-line: rgba(201, 162, 75, .38);

  --arc-blue:       #6fa0d8;
  --arc-blue-hi:    #9cc4ee;
  --arc-blue-dim:   rgba(111, 160, 216, .13);
  --arc-blue-line:  rgba(111, 160, 216, .38);

  /* the shadow arcana */
  --arc-red:        #d2614f;
  --arc-red-hi:     #f0907e;
  --arc-red-dim:    rgba(210, 97, 79, .13);
  --arc-red-line:   rgba(210, 97, 79, .42);

  /* surface */
  --arc-ink:        #e9e7e2;
  --arc-ink-dim:    #a8a5a0;
  --arc-rule:       rgba(255, 255, 255, .10);
  --arc-surface:    rgba(255, 255, 255, .035);
  --arc-surface-2:  rgba(255, 255, 255, .055);

  /* type */
  --arc-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --arc-body:    'Literata', Georgia, 'Times New Roman', serif;
  --arc-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* opt-in light palette — see the note at the top of this file */
[data-theme="light"],
.arcui-light {
  --arc-brass:      #8a6a1e;
  --arc-brass-hi:   #6d5316;
  --arc-brass-dim:  rgba(138, 106, 30, .10);
  --arc-brass-line: rgba(138, 106, 30, .34);

  --arc-blue:       #2f5f96;
  --arc-blue-hi:    #24507f;
  --arc-blue-dim:   rgba(47, 95, 150, .10);
  --arc-blue-line:  rgba(47, 95, 150, .34);

  --arc-red:        #a63a29;
  --arc-red-hi:     #8a2e20;
  --arc-red-dim:    rgba(166, 58, 41, .10);
  --arc-red-line:   rgba(166, 58, 41, .36);

  --arc-ink:        #1d1c1a;
  --arc-ink-dim:    #5d5a55;
  --arc-rule:       rgba(0, 0, 0, .12);
  --arc-surface:    rgba(0, 0, 0, .025);
  --arc-surface-2:  rgba(0, 0, 0, .045);
}

/* ------------------------------------------------------------- the column -- */
/* Long-form is the product: 50 000 characters have to be READABLE, not merely present. */

.arcui {
  font-family: var(--arc-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--arc-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.arcui p { margin: 0 0 1.15em; }
.arcui strong { font-weight: 600; color: #fff; }

@media (min-width: 768px) {
  .arcui { font-size: 1.125rem; line-height: 1.8; }
}

/* ======================================================== 1. THE CARD ====== */
/*
 * A section anchor. On a phone it is a small portrait BESIDE its caption — a full-bleed
 * tarot card would eat the whole screen and push the reading below the fold. From 640px
 * it becomes a proper plate.
 */

.arcui-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
  margin: 0 0 28px;
  padding: 0;
}

.arcui-card__plate {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--arc-surface);
  border: 1px solid var(--arc-brass-line);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .34);
  line-height: 0;
}

.arcui-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 7;
  object-fit: cover;
}

/* the number, stamped on the card */
.arcui-card__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--arc-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #1a1a1a;
  background: var(--arc-brass-hi);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.arcui-card.is-shadow .arcui-card__plate { border-color: var(--arc-red-line); }
.arcui-card.is-shadow .arcui-card__badge { background: var(--arc-red-hi); }

.arcui-card__cap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.arcui-card__label {
  font-family: var(--arc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--arc-brass);
}

.arcui-card__name {
  font-family: var(--arc-display);
  font-size: clamp(1.6rem, 6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--arc-ink);
}

.arcui-card__meta {
  font-family: var(--arc-mono);
  font-size: 12px;
  color: var(--arc-ink-dim);
}

.arcui-card__warn { color: var(--arc-red-hi); }
.arcui-card.is-shadow .arcui-card__label { color: var(--arc-red); }

@media (min-width: 640px) {
  .arcui-card {
    grid-template-columns: 150px 1fr;
    gap: 24px;
    align-items: end;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--arc-rule);
  }
  .arcui-card__plate { border-radius: 12px; }
  .arcui-card__badge {
    top: 8px; left: 8px;
    min-width: 28px; height: 28px;
    font-size: 13px;
  }
}

/* ======================================================== 2. THE CHIP ====== */
/*
 * ⟨18 · Луна⟩ — inline, in running text. Brass because an arcana is a matrix value.
 * It must sit ON the line: no layout shift, no baseline wobble in a 50k-char reading.
 */

.arcui-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .32em;
  padding: .06em .5em .12em;
  margin: 0 .06em;
  border: 1px solid var(--arc-brass-line);
  border-radius: 999px;
  background: var(--arc-brass-dim);
  line-height: 1.35;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: help;
  transition: background-color .18s ease, border-color .18s ease;
}

.arcui-chip:hover { background: rgba(201, 162, 75, .22); border-color: var(--arc-brass); }

.arcui-chip__n {
  font-family: var(--arc-mono);
  font-size: .82em;
  font-weight: 600;
  color: var(--arc-brass-hi);
  font-variant-numeric: tabular-nums;
}

.arcui-chip__dot { color: var(--arc-brass-line); font-size: .8em; }

.arcui-chip__name {
  font-family: var(--arc-body);
  font-size: .88em;
  font-weight: 600;
  color: var(--arc-brass-hi);
}

/* 15 · 16 · 18 — dependency, collapse, illusion. The eye should find these. */
.arcui-chip.is-shadow {
  border-color: var(--arc-red-line);
  background: var(--arc-red-dim);
}
.arcui-chip.is-shadow:hover { background: rgba(210, 97, 79, .22); border-color: var(--arc-red); }
.arcui-chip.is-shadow .arcui-chip__n,
.arcui-chip.is-shadow .arcui-chip__name { color: var(--arc-red-hi); }
.arcui-chip.is-shadow .arcui-chip__dot { color: var(--arc-red-line); }

/* ================================================== 3. THE PULL QUOTE ====== */
/* One large line that breaks the column. Left rule, brass. */

.arcui-pull {
  position: relative;
  margin: 34px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--arc-brass);
  border-radius: 0;
  background: none;
  quotes: none;
}

.arcui-pull p {
  margin: 0;
  font-family: var(--arc-display);
  font-size: clamp(1.4rem, 4.6vw, 2rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: .002em;
  color: var(--arc-brass-hi);
}

@media (min-width: 900px) {
  /* break the measure — the quote is allowed to be wider than the text it interrupts */
  .arcui-pull { margin-left: -28px; padding-left: 26px; }
}

/* ================================================= 4. THE CONVERGENCE ====== */
/*
 * The one block that has to earn the product's central claim: two INDEPENDENT computations
 * — arithmetic on the birth date, astronomy on the birth time and place — landing on the
 * same conclusion. Two columns in their own colours; one verdict carrying both.
 */

.arcui-conv {
  margin: 32px 0;
  border: 1px solid var(--arc-rule);
  border-radius: 14px;
  background: var(--arc-surface);
  overflow: hidden;
}

.arcui-conv__cols { display: grid; grid-template-columns: 1fr; }

.arcui-conv__col { padding: 20px; min-width: 0; }

/* the divider: horizontal when stacked, vertical when side by side */
.arcui-conv__col + .arcui-conv__col { border-top: 1px solid var(--arc-rule); }

.arcui-conv__method {
  display: inline-block;
  font-family: var(--arc-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.arcui-conv__val {
  display: block;
  font-family: var(--arc-display);
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--arc-ink);
}

.arcui-conv__txt {
  margin: 0;
  font-family: var(--arc-body);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--arc-ink-dim);
}

.arcui-conv__col.is-matrix { border-left: 3px solid var(--arc-brass); }
.arcui-conv__col.is-matrix .arcui-conv__method { color: var(--arc-brass); }
.arcui-conv__col.is-matrix .arcui-conv__val    { color: var(--arc-brass-hi); }

.arcui-conv__col.is-astro { border-left: 3px solid var(--arc-blue); }
.arcui-conv__col.is-astro .arcui-conv__method { color: var(--arc-blue); }
.arcui-conv__col.is-astro .arcui-conv__val    { color: var(--arc-blue-hi); }

/* --- the verdict: where the two colours meet ------------------------------- */

.arcui-conv__verdict {
  position: relative;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--arc-rule);
  background: linear-gradient(180deg, var(--arc-surface-2), transparent);
}

/* the seam. Brass on the left, blue on the right, meeting in the middle. */
.arcui-conv__seam {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--arc-brass) 0%, var(--arc-brass) 34%,
                                     var(--arc-blue) 66%, var(--arc-blue) 100%);
}

.arcui-conv__vlabel {
  display: block;
  font-family: var(--arc-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--arc-ink-dim);
  margin-bottom: 6px;
}

.arcui-conv__vtext {
  margin: 0;
  font-family: var(--arc-display);
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--arc-ink);
}

@media (min-width: 720px) {
  .arcui-conv__cols { grid-template-columns: 1fr 1fr; }
  .arcui-conv__col + .arcui-conv__col {
    border-top: 0;
    border-left: 3px solid var(--arc-blue);
  }
  .arcui-conv__col { padding: 24px; }
  .arcui-conv__verdict { padding: 20px 24px 24px; }
}

/* ======================================================== 5. THE RAIL ====== */
/*
 * The instrument panel. Computed values in monospace, brass for matrix, blue for astro.
 * The point of the row is that these are MEASUREMENTS — it should read like a readout.
 * Scrolls horizontally on a phone rather than wrapping into a ragged block.
 */

.arcui-rail {
  display: flex;
  gap: 10px;
  margin: 0 0 28px;
  padding: 2px 0 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.arcui-rail__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 116px;
  padding: 10px 13px;
  border: 1px solid var(--arc-rule);
  border-top: 2px solid var(--arc-rule);
  border-radius: 9px;
  background: var(--arc-surface);
}

.arcui-rail__label {
  font-family: var(--arc-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--arc-ink-dim);
  white-space: nowrap;
}

.arcui-rail__value {
  font-family: var(--arc-mono);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.arcui-rail__item.is-matrix { border-top-color: var(--arc-brass); }
.arcui-rail__item.is-matrix .arcui-rail__value { color: var(--arc-brass-hi); }

.arcui-rail__item.is-astro { border-top-color: var(--arc-blue); }
.arcui-rail__item.is-astro .arcui-rail__value { color: var(--arc-blue-hi); }

/* a chip inside the rail drops its pill — the rail cell IS the frame */
.arcui-rail__value .arcui-chip {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 720px) {
  .arcui-rail { flex-wrap: wrap; overflow-x: visible; }
  .arcui-rail__item { flex: 1 1 auto; }
}

/* ================================================ the 22 arcana posts ====== */
/* The card belongs at the top of each arcana post, above the body it introduces. */

.arcui-post .arcui-card { margin-top: 4px; }

/* ----------------------------------------------- the dossier, specifically -- */
/*
 * templates/dossier.php prints its own <style> in the BODY, i.e. after this sheet in the
 * cascade, and it carries `.dsr-body { line-height: 1.7 }`. That has the same specificity as
 * `.arcui`, so it would win on source order. These two selectors are (0,2,0) and settle it
 * without editing the template's CSS or touching screen.css.
 */
.dsr-body.arcui {
  font-family: var(--arc-body);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.dsr-body.arcui p { margin: 0 0 1.15em; }

@media (min-width: 768px) {
  .dsr-body.arcui { font-size: 1.125rem; line-height: 1.8; }
}

/* the arcana section sits above the octagram and owes it a little air */
#dsr-arcana { margin-bottom: 8px; }

/* ------------------------------------------------------------ motion ------- */

@media (prefers-reduced-motion: reduce) {
  .arcui-chip { transition: none; }
}