/* ============================================================
 * draw-hub.css — the hubs /tarot/ (ink) and /runes/ (cream),
 * `[capriastro_draw_hub kind="tarot|rune"]` (Capriastro_Draws).
 *
 * Built to CD D20 · D21 (1440) and 2o · 2p (388), 30 Sep 2026 — every value read from the
 * key-screens .dc.html markup and held in the `hub` token block (--cap-hub-*; a desktop/phone
 * pair switches at 700). Hero → three draw cards (Ask · Daily · Yes/No) → The library →
 * Coming soon → the closing line. Desktop: the cards 3-up, each an icon over its copy with a
 * button and a side note; the phone: one card per row, the icon beside the copy, the side note
 * as a chip. A card holding a button keeps the box still and hovers the button (states.md).
 * 700–1279 is not designed (tablet parked, owner 2026-09-30): the desktop layout, one card a row
 * below 1024. Token-only.
 * ============================================================ */

.cap-shell .cap-dhub { background: var(--cap-color-bg); color: var(--cap-color-text); --cap-dhub-accent: var(--cap-color-primary); --cap-dhub-muted: var(--cap-color-caption); --cap-dhub-body: var(--cap-color-text-secondary); }
.cap-shell .cap-dhub--tarot { background: var(--cap-color-text); color: var(--cap-color-on-ink); --cap-dhub-accent: var(--cap-color-primary-soft); --cap-dhub-muted: var(--cap-color-on-ink-muted); --cap-dhub-body: var(--cap-color-on-ink-muted); }
.cap-shell .cap-dhub__m { display: none; }

/* ─── hero ─── */
.cap-shell .cap-dhub__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-dhub__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-dhub-accent); white-space: nowrap; line-height: normal; }
/* the two stars: the site's `.cap-eyebrow--stars` (components.css) — inline on desktop, the 10-px star 8 from the words on a
   phone (the 27 Sep rule, owner 2026-09-30: the hubs follow it like every other page, not the sheets' inline star) */
.cap-shell .cap-dhub__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-dhub__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-color-text-secondary); text-wrap: pretty; }
.cap-shell .cap-dhub--tarot .cap-dhub__lede { color: var(--cap-color-on-ink-2); }

/* ─── the draw cards ─── */
.cap-shell .cap-dhub__cards { margin-top: var(--cap-hub-cards-top); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cap-hub-cards-gap); }
.cap-shell .cap-dhub-card { display: flex; flex-direction: column; gap: var(--cap-hub-card-gap); padding: var(--cap-hub-card-pad); background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-flat); color: inherit; text-decoration: none; }
.cap-shell .cap-dhub--tarot .cap-dhub-card { background: var(--cap-color-ink-raised); border-color: var(--cap-color-line-halo-soft); }
.cap-shell .cap-dhub-card__icon { display: flex; align-items: flex-start; width: var(--cap-hub-icon); height: var(--cap-hub-icon); margin: var(--cap-hub-icon-margin); flex: none; color: var(--cap-dhub-accent); }
.cap-shell .cap-dhub-card__icon svg { display: block; width: 100%; height: auto; }
.cap-shell .cap-dhub-card__copy { display: flex; flex-direction: column; gap: var(--cap-hub-card-gap); flex: 1 1 auto; min-width: 0; }
.cap-shell .cap-dhub-card__title { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-hub-type-card-title); line-height: var(--cap-hub-leading-card-title); letter-spacing: var(--cap-hub-track-card-title); text-transform: uppercase; }
.cap-shell .cap-dhub-card__line { margin-top: var(--cap-hub-card-line-pull); font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-hub-type-card-line); line-height: var(--cap-hub-leading-card-line); color: var(--cap-dhub-body); text-wrap: pretty; }
.cap-shell .cap-dhub-card__foot { margin-top: auto; padding-top: var(--cap-hub-foot-top); display: flex; align-items: center; flex-wrap: wrap; gap: var(--cap-hub-foot-gap); }
/* the buttons (D20 / D21 revised 1 Oct 2026): the card button is the violet primary on both hubs — hover cream + ink on the
   ink hub, ink on the cream hub; the library pill is an outlined pill — a lilac edge on ink (hover violet), an ink edge on
   cream (hover ink). The card / box is the link, so its hover drives the button's. */
.cap-shell .cap-dhub-card__btn,
.cap-shell .cap-dhub-lib__pill { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: var(--cap-radius-pill); font-family: var(--cap-font-ui); font-weight: 600; text-transform: uppercase; transition: background var(--cap-ease-fast), color var(--cap-ease-fast), border-color var(--cap-ease-fast); }
.cap-shell .cap-dhub-card__btn { padding: var(--cap-hub-btn-pad); font-size: var(--cap-hub-type-btn); letter-spacing: var(--cap-hub-track-btn); line-height: var(--cap-hub-leading-btn); background: var(--cap-color-primary); color: var(--cap-color-surface); }
@media (hover: hover) { .cap-shell .cap-dhub-card:hover .cap-dhub-card__btn { background: var(--cap-color-text); color: var(--cap-color-surface); } }
@media (hover: hover) { .cap-shell .cap-dhub--tarot .cap-dhub-card:hover .cap-dhub-card__btn { background: var(--cap-color-bg); color: var(--cap-color-text); } }
.cap-shell .cap-dhub-lib__pill { background: transparent; color: var(--cap-color-text); border: var(--cap-border-hairline) solid var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-dhub-lib:hover .cap-dhub-lib__pill { background: var(--cap-color-text); color: var(--cap-color-bg); } }
.cap-shell .cap-dhub--tarot .cap-dhub-lib__pill { color: var(--cap-color-on-ink); border-color: var(--cap-color-line-halo-strong); }
@media (hover: hover) { .cap-shell .cap-dhub--tarot .cap-dhub-lib:hover .cap-dhub-lib__pill { background: var(--cap-color-primary); border-color: var(--cap-color-primary); color: var(--cap-color-surface); } }
.cap-shell .cap-dhub-card__note { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-hub-type-note); letter-spacing: var(--cap-hub-track-note); text-transform: uppercase; color: var(--cap-dhub-muted); white-space: nowrap; }

/* ─── the library + coming soon ─── */
.cap-shell .cap-dhub__lib { margin-top: var(--cap-hub-lib-top); display: flex; flex-direction: column; }
.cap-shell .cap-dhub__lib-head { margin: 0 0 var(--cap-hub-lib-head-gap); padding-top: var(--cap-hub-lib-head-top); border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-hub-type-lib-head); letter-spacing: var(--cap-hub-track-lib-head); text-transform: uppercase; line-height: normal; color: inherit; }
.cap-shell .cap-dhub--tarot .cap-dhub__lib-head { border-top-color: var(--cap-color-line-on-ink); }
.cap-shell .cap-dhub-lib { display: flex; align-items: center; justify-content: space-between; gap: var(--cap-hub-lib-gap); padding: var(--cap-hub-lib-pad); background: var(--cap-color-bg-deep); color: inherit; text-decoration: none; }
.cap-shell .cap-dhub--tarot .cap-dhub-lib { background: var(--cap-color-fill-on-ink); border: var(--cap-border-hairline) solid var(--cap-color-line-on-ink-2); }   /* owner ruling 2026-10-07 (round 37), departs from D20 / 2o: the tarot card page's "On this page" panel (fill + edge), a little duller than the draw cards — all widths */
.cap-shell .cap-dhub-lib__icon, .cap-shell .cap-dhub-lib__link { display: none; }
.cap-shell .cap-dhub-lib__copy { display: flex; flex-direction: column; gap: var(--cap-hub-lib-copy-gap); min-width: 0; }
.cap-shell .cap-dhub-lib__title { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-hub-type-lib-title); letter-spacing: var(--cap-hub-track-lib-title); text-transform: uppercase; }
.cap-shell .cap-dhub-lib__line { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-hub-type-lib-line); line-height: var(--cap-hub-leading-lib-line); color: var(--cap-dhub-body); }
.cap-shell .cap-dhub-lib__pill { flex: none; padding: var(--cap-hub-lib-pill-pad); font-size: var(--cap-hub-type-lib-pill); letter-spacing: var(--cap-hub-track-lib-pill); line-height: var(--cap-hub-leading-lib-pill); }
/* the cross line to the other deck's hub (D20 / D21): italic question + an underlined caps link; on a phone the link is a 44 row */
.cap-shell .cap-dhub__cross { margin: var(--cap-hub-cross-top) 0 var(--cap-hub-cross-bottom); display: flex; justify-content: center; align-items: baseline; gap: var(--cap-hub-cross-gap); white-space: nowrap; }
.cap-shell .cap-dhub__cross-q { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-hub-type-cross-q); line-height: normal; color: var(--cap-dhub-body); }
.cap-shell .cap-dhub__cross-link { color: inherit; text-decoration: none; font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-hub-type-cross-link); letter-spacing: var(--cap-hub-track-lib-pill); text-transform: uppercase; line-height: normal; }
.cap-shell .cap-dhub__cross-link span { border-bottom: var(--cap-border-hairline) solid var(--cap-dhub-accent); padding-bottom: var(--cap-vref-link-pad); }
@media (hover: hover) { .cap-shell .cap-dhub__cross-link:hover { color: var(--cap-dhub-accent); } }
.cap-shell .cap-dhub__soon { margin-top: var(--cap-hub-soon-top); padding: var(--cap-hub-soon-pad); border: var(--cap-border-hairline) dashed var(--cap-color-line-strong); display: flex; flex-direction: column; align-items: center; gap: var(--cap-hub-soon-gap); text-align: center; }
.cap-shell .cap-dhub--tarot .cap-dhub__soon { border-color: var(--cap-color-line-halo); }
.cap-shell .cap-dhub__soon-eyebrow { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-hub-type-soon-eyebrow); letter-spacing: var(--cap-hub-track-eyebrow); text-transform: uppercase; color: var(--cap-dhub-accent); }
.cap-shell .cap-dhub__soon-title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-hub-type-soon-title); line-height: var(--cap-hub-leading-soon-title); letter-spacing: var(--cap-hub-track-soon-title); }
.cap-shell .cap-dhub__soon-sub { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-hub-type-soon-sub); line-height: var(--cap-hub-leading-soon-sub); color: var(--cap-dhub-muted); }
.cap-shell .cap-dhub__close { margin: 0; padding: var(--cap-hub-close-pad); text-align: center; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-hub-type-close); letter-spacing: var(--cap-hub-track-close); text-transform: uppercase; color: var(--cap-dhub-muted); }

/* the sheets set these lines at the face's own line height (`normal`) — never the page's body leading */
.cap-shell .cap-dhub-card__note, .cap-shell .cap-dhub-lib__title, .cap-shell .cap-dhub-lib__link, .cap-shell .cap-dhub__soon-eyebrow, .cap-shell .cap-dhub__close { line-height: normal; }

/* ─── 700–1279 · T15 / T16 (1024) and T15-820: the draw cards one a row, the drawing left (122; 101 at 820) and centred,
   32 from the copy (24 at 820), 32 padding, 16 between cards ─── */
@media (max-width: 1279px) { .cap-shell .cap-dhub__cards { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-dhub__cards { gap: var(--cap-space-md); }
  .cap-shell .cap-dhub-card { flex-direction: row; align-items: center; gap: var(--cap-space-lg); padding: var(--cap-space-lg); }
  .cap-shell .cap-dhub-card__icon { width: 122px; height: 122px; margin: 0; }   /* geometry: T15's drawing */
  .cap-shell .cap-dhub-card__copy { gap: var(--cap-space-gap-6); }
  .cap-shell .cap-dhub-card__line { margin-top: 0; }
  .cap-shell .cap-dhub-card__foot { padding-top: var(--cap-space-sm); }
  /* THE LIBRARY LINK ON TABLETS (owner ruling 2026-10-04, round 29): T15 / T16 draw "All 22 cards →" / "All 25 runes →" as an
     underlined text link at the row's end — 13 · 600 · .14em, the hub's accent 1 px under the words, 2 below them (lilac on the ink
     tarot hub, violet on the cream rune hub). The outlined pill is D20 / D21's, desktop only (it had carried down to 700). */
  .cap-shell .cap-dhub-lib__pill { display: none; }
  .cap-shell .cap-dhub-lib__link { display: block; flex: none; white-space: nowrap; padding-bottom: var(--cap-space-gap-1); border-bottom: var(--cap-border-hairline) solid var(--cap-dhub-accent); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-hub-type-lib-pill); letter-spacing: var(--cap-hub-track-lib-pill); text-transform: uppercase; color: inherit; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-dhub-card { gap: var(--cap-gutter); }
  .cap-shell .cap-dhub-card__icon { width: 101px; height: 101px; }   /* geometry: T15-820's drawing */
}

/* ─── < 700: 2o · 2p ─── */
@media (max-width: 699px) {
  .cap-shell .cap-dhub__cross { align-items: center; }
  .cap-shell .cap-dhub__cross-link { display: inline-flex; align-items: center; min-height: var(--cap-tap-min); }   /* 2o / 2p: the link on a 44 row */
  .cap-shell .cap-dhub__d { display: none; }
  .cap-shell .cap-dhub__m { display: inline; }
  .cap-shell .cap-dhub__h1 { font-family: var(--cap-font-display-sm); }
  .cap-shell .cap-dhub__lede { max-width: none; }
  .cap-shell .cap-dhub--rune .cap-dhub__lede { color: var(--cap-color-text); }   /* 2p: the phone lede in ink (D21 draws it in the body grey) */
  .cap-shell .cap-dhub-card { flex-direction: row; align-items: center; }
  .cap-shell .cap-dhub-card__icon { align-items: center; }
  .cap-shell .cap-dhub-card__copy { gap: var(--cap-hub-card-text-gap); }
  .cap-shell .cap-dhub-card__line { margin-top: 0; }
  .cap-shell .cap-dhub--tarot .cap-dhub-card { border-color: var(--cap-color-line-halo); }
  .cap-shell .cap-dhub-card__foot { margin-top: var(--cap-hub-chip-top); padding-top: 0; }
  .cap-shell .cap-dhub-card__btn { display: none; }
  .cap-shell .cap-dhub-card__note { font-weight: 600; font-size: var(--cap-hub-type-chip); line-height: var(--cap-hub-leading-chip); color: var(--cap-color-surface); background: var(--cap-color-primary); border: var(--cap-border-hairline) solid var(--cap-color-primary); border-radius: var(--cap-radius-pill); padding: var(--cap-hub-chip-pad); }   /* 2o / 2p (1 Oct 2026): the chip filled violet on both hubs */
  .cap-shell .cap-dhub__lib-head { border-top: 0; padding-top: 0; }
  .cap-shell .cap-dhub-lib { flex-direction: column; align-items: stretch; gap: var(--cap-hub-lib-copy-gap); }
  .cap-shell .cap-dhub-lib__icon { display: block; color: var(--cap-dhub-accent); }
  .cap-shell .cap-dhub-lib__icon svg { display: block; width: auto; height: calc(var(--cap-hub-lib-icon-tarot-w) * 346.37 / 220.49); }   /* the owner's pair in one frame (icon-*.svg, 2026-10-08): sized by height, the card as before, the stone as drawn beside it */
  .cap-shell .cap-dhub-lib__title { margin-top: var(--cap-hub-chip-top); }
  .cap-shell .cap-dhub-lib__pill { display: none; }
  .cap-shell .cap-dhub-lib__link { display: block; align-self: flex-start; margin-top: var(--cap-hub-chip-top); padding-bottom: var(--cap-border-hairline); border-bottom: var(--cap-border-hairline) solid var(--cap-dhub-accent); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-hub-type-lib-link); letter-spacing: var(--cap-hub-track-lib-link); text-transform: uppercase; white-space: nowrap; }
}

/* A BOX WHOSE BUTTON IS HIDDEN TAKES THE HOVER ITSELF (owner 2026-10-07, round 37; states.md "where the hover lands"): below 700
   the card's button is hidden and below 1280 the library box's pill is, so the button's hover had nothing to show and, on touch,
   the press nothing either (the phone's own tap flash, the only reaction before, is off since 0.51.566). There the box takes the
   violet glow — the Play hub cards' look (round 23 ruling 4); press.css carries it to a press. (On a phone the violet "Ask any time"
   pill on a card is the card's NOTE drawn as a chip, not its button — it has no press of its own; the whole card reacts.) */
@media (hover: hover) and (max-width: 699px) { .cap-shell .cap-dhub-card:hover { box-shadow: var(--cap-shadow-halo); } }
/* the LIBRARY box takes no glow (owner 2026-10-07, round 37): on the cream rune hub the cream cards' lift shadow, on the ink tarot
   hub its edge brightens to the on-ink hover edge (the ghost-on-ink buttons' and on-ink chips' edge) — the dark draw cards keep the glow */
@media (hover: hover) and (max-width: 1279px) { .cap-shell .cap-dhub--rune .cap-dhub-lib:hover { box-shadow: var(--cap-shadow-lift); } }
@media (hover: hover) and (max-width: 1279px) { .cap-shell .cap-dhub--tarot .cap-dhub-lib:hover { border-color: var(--cap-color-line-on-ink-hover); } }

/* 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-dhub__close { padding-bottom: var(--cap-space-footer-gap); }