/* ============================================================
 * draw-verdicts.css — the Yes/No meanings pages, `[capriastro_verdicts kind="…"]`
 * (Capriastro_Draws): /tarot/yes-no/meanings/ and /runes/yes-no/meanings/.
 *
 * CD D22 · D23 (1440) and 2q · 2r (388), 30 Sep 2026, measured from the key-screens markup. The hubs' centred header
 * (the --cap-hub-* values) · the count line · the verdict table — 300 | 1fr | 1fr on desktop, each item's picture (the
 * card's art, or the rune's stone) beside its numeral and name, a verdict pill over each line, a dash where a rune has no
 * merkstave — then the closing pair (the draw's pill + the library link) and the site's Questions. On a phone each row
 * stacks: picture + name, then Upright and Merkstave / Reversed, each label with its pill. The tarot page is ink, the rune
 * page cream. Values: design-system.json `vref` (--cap-vref-*). Token-only.
 * ============================================================ */

.cap-shell .cap-vref { background: var(--cap-color-bg); color: var(--cap-color-text);
  --cap-vref-accent: var(--cap-color-primary); --cap-vref-muted: var(--cap-color-caption); --cap-vref-body: var(--cap-color-text-body-steady);
  --cap-vref-lede-c: var(--cap-color-text-secondary); --cap-vref-line: var(--cap-color-line-strong); --cap-vref-box: var(--cap-color-line-strong);
  --cap-vref-fill: var(--cap-color-surface); --cap-vref-head: var(--cap-color-bg-deep);
  --cap-vref-yes: var(--cap-color-primary); --cap-vref-no: var(--cap-color-text); --cap-vref-depends: var(--cap-color-line-emphasis); }
.cap-shell .cap-vref--tarot { background: var(--cap-color-text); color: var(--cap-color-on-ink);
  --cap-vref-accent: var(--cap-color-primary-soft); --cap-vref-muted: var(--cap-color-on-ink-muted); --cap-vref-body: var(--cap-color-on-ink-2);
  --cap-vref-lede-c: var(--cap-color-on-ink-2); --cap-vref-line: var(--cap-color-line-on-ink); --cap-vref-box: var(--cap-color-line-on-ink-2);
  --cap-vref-fill: var(--cap-color-fill-on-ink); --cap-vref-head: var(--cap-color-ink-raised);
  --cap-vref-yes: var(--cap-color-primary-soft); --cap-vref-no: var(--cap-color-on-ink); --cap-vref-depends: var(--cap-vref-pill-depends-on-ink); }

/* ─── the header (the hubs' values) ─── */
.cap-shell .cap-vref__hero { padding-top: var(--cap-hub-hero-top); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-hub-hero-gap); }
.cap-shell .cap-vref__eyebrow { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-hub-type-eyebrow); letter-spacing: var(--cap-hub-track-eyebrow); text-transform: uppercase; color: var(--cap-vref-accent); white-space: nowrap; line-height: normal; }
.cap-shell .cap-vref__h1 { margin: 0; font-family: var(--cap-font-display); font-weight: 800; font-size: var(--cap-hub-type-h1); line-height: var(--cap-hub-leading-h1); letter-spacing: var(--cap-hub-track-h1); color: inherit; }
.cap-shell .cap-vref__lede { margin: 0; max-width: 46ch; font-family: var(--cap-font-serif); font-style: italic; font-weight: var(--cap-hub-weight-lede); font-size: var(--cap-hub-type-lede); line-height: var(--cap-hub-leading-lede); color: var(--cap-vref-lede-c); text-wrap: pretty; }

/* ─── the table ─── */
.cap-shell .cap-vref__wrap { margin-top: var(--cap-vref-table-top); }
.cap-shell .cap-vref__table { border: var(--cap-border-hairline) solid var(--cap-vref-box); background: var(--cap-vref-fill); }
.cap-shell .cap-vref__thead,
.cap-shell .cap-vref__row { display: grid; grid-template-columns: var(--cap-vref-col-card) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cap-shell .cap-vref__thead { background: var(--cap-vref-head); }
.cap-shell .cap-vref__thead span { padding: var(--cap-vref-head-pad); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-vref-type-head); letter-spacing: var(--cap-vref-track-head); text-transform: uppercase; line-height: normal; color: inherit; }
.cap-shell .cap-vref__row { border-top: var(--cap-border-hairline) solid var(--cap-vref-line); }
.cap-shell .cap-vref__card { padding: var(--cap-vref-card-pad); display: flex; align-items: center; gap: var(--cap-vref-card-gap); min-width: 0; }
.cap-shell .cap-vref__art { flex: none; display: block; text-decoration: none; }
.cap-shell .cap-vref__art img { display: block; width: var(--cap-vref-art-w); height: var(--cap-vref-art-h); object-fit: cover; border-radius: var(--cap-radius-card-face-xs); box-shadow: var(--cap-vref-shadow-art); }
.cap-shell .cap-vref__stone { display: flex; align-items: center; justify-content: center; container-type: size; width: var(--cap-vref-stone-w); height: var(--cap-vref-stone-h); border-radius: 50%; background: radial-gradient(70% 62% at 46% 38%, var(--cap-color-stone-1) 0%, var(--cap-color-stone-2) 46%, var(--cap-color-stone-3) 82%, var(--cap-color-stone-4) 100%); box-shadow: var(--cap-vref-shadow-stone); }
.cap-shell .cap-vref__face { font-family: var(--cap-font-rune), var(--cap-font-ui); font-size: calc(100cqh * var(--cap-rune-glyph)); line-height: 1; color: var(--cap-color-primary-pale); }
.cap-shell .cap-vref__id { display: flex; flex-direction: column; gap: var(--cap-vref-name-gap); min-width: 0; }
.cap-shell .cap-vref__num { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-vref-type-num); letter-spacing: var(--cap-vref-track-count); text-transform: uppercase; line-height: var(--cap-vref-leading-name); color: var(--cap-vref-muted); }
.cap-shell .cap-vref__num--blank { font-size: var(--cap-vref-type-blank-label); }   /* Wyrd: "Not of the Futhark" in the numeral slot */
.cap-shell .cap-vref__name { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-vref-type-name); letter-spacing: var(--cap-vref-track-name); text-transform: uppercase; line-height: var(--cap-vref-leading-name); color: inherit; text-decoration: none; }
@media (hover: hover) { .cap-shell .cap-vref__name:hover { color: var(--cap-vref-accent); } }
.cap-shell .cap-vref__cell { padding: var(--cap-vref-cell-pad); display: flex; flex-direction: column; gap: var(--cap-vref-cell-gap); min-width: 0; }
.cap-shell .cap-vref__lab { display: flex; align-items: center; gap: var(--cap-vref-label-gap); }
.cap-shell .cap-vref__lab:not(:has(.cap-vref__pill)) { display: none; }   /* desktop: the column head names the orientation; an empty cell is its dash alone */
.cap-shell .cap-vref__o { display: none; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-vref-type-label); letter-spacing: var(--cap-vref-track-count); text-transform: uppercase; line-height: normal; color: var(--cap-vref-muted); }
.cap-shell .cap-vref__pill { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: var(--cap-vref-pill-pad); border: var(--cap-border-hairline) solid var(--cap-vref-depends); border-radius: var(--cap-radius-pill); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-vref-type-pill); letter-spacing: var(--cap-vref-track-count); text-transform: uppercase; line-height: var(--cap-vref-leading-name); color: inherit; }
.cap-shell .cap-vref__pill--yes { border-color: var(--cap-vref-yes); }
.cap-shell .cap-vref__pill--no { border-color: var(--cap-vref-no); }
.cap-shell .cap-vref__why { margin: 0; font-family: var(--cap-font-serif); font-size: var(--cap-vref-type-why); line-height: var(--cap-vref-leading-why); color: var(--cap-vref-body); text-wrap: pretty; }
.cap-shell .cap-vref__dash { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-vref-type-dash); line-height: var(--cap-vref-leading-dash); color: var(--cap-vref-muted); }

/* ─── the closing pair: the draw's pill + the library link ─── */
.cap-shell .cap-vref__close { padding-top: var(--cap-vref-close-top); display: flex; flex-wrap: wrap; align-items: center; gap: var(--cap-vref-close-gap); }
.cap-shell .cap-vref__draw { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: var(--cap-hub-btn-pad); border-radius: var(--cap-radius-pill); background: var(--cap-color-text); color: var(--cap-color-bg); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-vref-type-btn); letter-spacing: var(--cap-hub-track-btn); text-transform: uppercase; line-height: var(--cap-vref-leading-btn); text-decoration: none; transition: background var(--cap-ease-fast), color var(--cap-ease-fast); }
.cap-shell .cap-vref--tarot .cap-vref__draw { background: var(--cap-color-bg); color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-vref__draw:hover, .cap-shell .cap-vref--tarot .cap-vref__draw:hover { background: var(--cap-color-primary); color: var(--cap-color-surface); } }
.cap-shell .cap-vref__lib { color: inherit; text-decoration: none; white-space: nowrap; font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-vref-type-link); letter-spacing: var(--cap-vref-track-count); text-transform: uppercase; line-height: normal; }   /* the face on the link itself, so its line box is the caps' own */
.cap-shell .cap-vref__lib span { display: inline-block; border-bottom: var(--cap-border-hairline) solid var(--cap-vref-accent); padding-bottom: var(--cap-vref-link-pad); }
@media (hover: hover) { .cap-shell .cap-vref__lib:hover { color: var(--cap-vref-accent); } }

/* ─── the Questions (the site's FAQ row, 760 wide) ─── */
.cap-shell .cap-vref__faq-wrap { padding-top: var(--cap-vref-faq-top); padding-bottom: var(--cap-vref-faq-bottom); }
.cap-shell .cap-vref__faq { max-width: var(--cap-vref-faq-w); }

/* ─── the phone (2q / 2r): each row stacks — picture + name, then each orientation with its label and pill ─── */
@media (max-width: 699px) {
  .cap-shell .cap-vref__h1 { font-family: var(--cap-font-display-sm); }
  .cap-shell .cap-vref__thead { display: none; }
  .cap-shell .cap-vref__row { display: flex; flex-direction: column; gap: var(--cap-vref-row-gap); padding: var(--cap-vref-card-pad); }
  .cap-shell .cap-vref__thead + .cap-vref__row { border-top: 0; }
  .cap-shell .cap-vref__card, .cap-shell .cap-vref__cell { padding: 0; }
  .cap-shell .cap-vref__lab, .cap-shell .cap-vref__lab:not(:has(.cap-vref__pill)) { display: flex; }
  .cap-shell .cap-vref__o { display: block; }
  .cap-shell .cap-vref__close { flex-direction: column; flex-wrap: nowrap; }
  .cap-shell .cap-vref__draw { align-self: center; }
  .cap-shell .cap-vref__lib { display: flex; align-items: center; justify-content: center; min-height: var(--cap-tap-min); }   /* 2q / 2r: the link on a 44 row */
}

/* ─── the site's FAQ on the tarot page's ink (unchanged from the previous build) ─── */
.cap-shell .cap-vref--tarot .cap-faq__q { color: var(--cap-color-on-ink); }
.cap-shell .cap-vref--tarot .cap-faq__head { border-top-color: var(--cap-color-line-on-ink-3); color: var(--cap-color-on-ink-muted); }
.cap-shell .cap-vref--tarot .cap-faq__list, .cap-shell .cap-vref--tarot .cap-faq__item { border-color: var(--cap-color-line-on-ink); }
.cap-shell .cap-vref--tarot .cap-faq__body, .cap-shell .cap-vref--tarot .cap-faq__body * { color: var(--cap-color-on-ink-2); }
.cap-shell .cap-vref--tarot .cap-faq__q *, .cap-shell .cap-vref--tarot .cap-faq__head * { color: inherit; }
/* below 1280 the Questions run the table's full width, on its edges (owner 2026-10-01) */
@media (min-width: 700px) and (max-width: 1279px) { .cap-shell .cap-vref__faq { max-width: none; } }
/* round 22 C8 (owner): at 700–1023 the 300 card column left each meaning 149 wide at 712 — the card column narrows (the
   names wrap, the phone's tighter card padding) and the two meaning columns stay equal */
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell :is(.cap-vref__row, .cap-vref__thead) { grid-template-columns: minmax(0, 7fr) minmax(0, 8fr) minmax(0, 8fr); }
  /* the card cell stacks — the art, then the numeral + name under it — so the column holds the longest name word
     ("Temperance", 140) without the art beside it */
  .cap-shell .cap-vref__card { flex-direction: column; align-items: flex-start; }
  .cap-shell .cap-vref { --cap-vref-card-pad: var(--cap-space-gap-8) var(--cap-space-gap-8) var(--cap-space-tile-gap-x); --cap-vref-card-gap: var(--cap-space-gap-7); }   /* about the phone card's own (18 16 20 · 14) */
}

/* THE FOOTER GAP (owner 2026-10-02): from the last thing on the page to the footer, 64 from 700 up and 40 on a phone — the
   token's pair (--cap-space-footer-gap). Appended last so it wins over the page's earlier end spacing. */
.cap-shell .cap-vref__faq-wrap { padding-bottom: var(--cap-space-footer-gap); }