/* components.css — @layer components.
   Quiet Neutral component system: announce, chrome (header/nav/drawer/
   quicksearch), footer, buttons, product media (.pmedia) + product card,
   category pill nav, trust band, price, base form controls. All of the
   above consume ONLY scope vars (§2.1 of the redesign spec) — one attribute
   (data-realm / .scope-*) flips the accent to a muted tag/tint cue; the
   surface itself never forks per realm, and there is no decorative brand
   colour, shadow, gradient, or hover-lift anywhere in this layer.

   Retained verbatim in structure (Task 2 does not restructure these — they
   belong to templates owned by later tasks in the redesign plan, e.g.
   cart/category/search empty states, checkout dockets): .chip,
   .leader (dotted leader rows), .rule-head, .ledger-index, the BEM
   .field/.field__input form skin, .docket/.panel, .notice, .stepper,
   .stamp, .empty, .slot, #cart-drawer (owned by Task 6 via
   _cart_drawer.html), and the shared motion keyframes. Their retired
   colour tokens (--grape/--lime/--peach/--mint/--lavender) were repointed
   below to the Quiet Neutral palette so the stylesheet has zero undefined
   custom properties — values only, structure untouched. (.sigil-defs and
   .empty__plate were later retired outright — final review, zero
   `#sigil-*`/`.empty__plate` consumers remained in any template.)

   The engraved-plate skin (.plate / .plate__* / .plate--*), its .card__link/
   .card__plate hook, and the .btn--seal pre-migration alias — all retained
   here through Task 7 — were retired by Task 8 (QA gate): no template
   hand-rolls .plate anymore (product_detail's recently-viewed rail now
   emits .pmedia/.card__media, matching _product_card.html), and every
   button template migrated to .btn--primary. Re-verified dead via
   `grep -rn 'class="plate\|card__plate\|plate__\|btn--seal' templates/`
   (comment-only hits) before deletion. */

@layer components {

/* ═══════════════════════ LAYOUT ═══════════════════════════════════════ */
/* .chrome/.announce bleed full-width (their background is the point) and
   center their own content via padding; #main-content/.foot use the same
   fluid padding recipe so header/nav and the page body stay aligned above
   the --wrap breakpoint (the fluid padding does the centering). */
#main-content,
.foot { padding-inline: max(var(--s7), calc((100% - var(--wrap)) / 2)); }

#main-content {
  background: var(--surface);
  color: var(--on-surface);
  padding-block: var(--s6) var(--s8);
  min-height: 60vh;
}

/* ═══════════════════════ ANNOUNCEMENT BAR ══════════════════════════════ */
.announce {
  background: var(--surface-well);
  color: var(--ink);
  text-align: center;
  padding-inline: max(var(--s7), calc((100% - var(--wrap)) / 2));
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--hairline);
}
.announce__text {
  margin: 0;
  font: 600 var(--t-micro)/1.4 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════ HEADER CHROME ═════════════════════════════════ */
.chrome {
  position: sticky;
  top: 0;
  z-index: var(--z-chrome);
  /* 3-column grid — brand pinned left, nav dead-centred on the page, tools
     pinned right — so the menu sits at the true middle regardless of the
     (unequal) brand vs. tools widths. The hidden burger (display:none on
     desktop) is removed from grid flow, so brand/nav/tools map cleanly to
     the three tracks. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s5);
  padding-block: var(--s3);
  padding-inline: max(var(--s7), calc((100% - var(--wrap)) / 2));
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.chrome__brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  justify-self: start;
  font: 700 1.15rem/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--on-surface);
}
.chrome__nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  justify-self: center;
}
.chrome__link {
  font: 600 var(--t-label)/1 var(--font-text);
  color: var(--on-surface);
  padding: var(--s2) 0;
  border-bottom: 2px solid transparent;
}
.chrome__link:hover,
.chrome__link[aria-current] { color: var(--realm-accent); border-bottom-color: var(--realm-accent); }
.chrome__link--wellness:hover,
.chrome__link--wellness[aria-current] { color: var(--sage-deep); border-bottom-color: var(--sage); }
.chrome__link--arcana:hover,
.chrome__link--arcana[aria-current] { color: var(--violet-deep); border-bottom-color: var(--violet); }

.chrome__tools { display: flex; align-items: center; gap: var(--s4); flex-shrink: 0; justify-self: end; }
.chrome__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: 44px;
  min-height: 44px;
  font: 600 var(--t-label)/1 var(--font-text);
  color: var(--on-surface);
}
.chrome__tool:hover { color: var(--realm-accent); }
.chrome__tool kbd {
  font: 500 10px/1 var(--font-mono);
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px 5px;
}
.chrome__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
  transition: background var(--dur-fast) var(--ease);
}
.chrome__cart:hover { background: var(--accent-deep); color: #fff; }
.chrome__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 var(--t-micro)/1 var(--font-mono);
}
.chrome__badge[hidden] { display: none; }

/* Checkout-simplified chrome: page adds .chrome--minimal to hide nav/tools. */
.chrome--minimal .chrome__nav,
.chrome--minimal .chrome__tools { display: none; }
.chrome--minimal .chrome__return {
  margin-left: auto;
  display: inline-flex;
  font: 600 var(--t-label)/1 var(--font-text);
  color: var(--on-surface);
}

/* ═══════════════════════ MOBILE CHROME + DRAWER ════════════════════════ */
.chrome__burger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--on-surface);
}

/* 768px (not the theme's usual 720px breakpoint): the full wordmark + 4-link
   nav + search/account/cart tools row measurably overflows a 768px tablet
   viewport (QA gate, Task 8) — .chrome__nav must already be collapsed to the
   burger by the standard 768px tablet breakpoint, not just narrower phones. */
@media (max-width: 768px) {
  .chrome { gap: var(--s3); }
  .chrome__nav { display: none; }
  .chrome__tool--account { display: none; }
  .chrome__tool kbd { display: none; }
  .chrome__burger { display: inline-flex; align-items: center; margin-right: auto; }
  .chrome__brand { margin-inline: auto; }
  .chrome__tools { gap: var(--s3); }
}

/* Drawer: a paper leaf sliding from the left over an ink scrim. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.drawer.open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--paper);
  color: var(--ink);
  border-right: 1px solid var(--hairline);
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
  padding: var(--s4) 0;
}
.drawer.open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s2) var(--s5) var(--s4);
  border-bottom: 1px solid var(--hairline);
}
.drawer__word { font: 700 var(--t-h3)/1 var(--font-display); color: var(--ink); }
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font: 400 1.7rem/1 var(--font-display);
  color: var(--ink-muted);
  line-height: 0.6;
}
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link,
.drawer__nav .slot a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s5);
  font: 600 0.95rem/1 var(--font-text);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.drawer__link:hover { color: var(--realm-accent); }
.drawer__link--wellness { border-left: 3px solid var(--sage); }
.drawer__link--arcana { border-left: 3px solid var(--violet); }
.drawer__nav .slot { display: contents; }

/* ═══════════════════════ QUICKSEARCH OVERLAY ═══════════════════════════ */
/* [hidden] defense lives UNLAYERED in base.css (#quicksearch-panel[hidden]). */
.quicksearch {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s7) var(--s4) var(--s4);
}
.quicksearch__backdrop {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background: var(--scrim);
  border: 0; padding: 0;
  cursor: pointer;
}
.quicksearch__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.quicksearch__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.quicksearch__icon { color: var(--ink-muted); flex-shrink: 0; }
#quicksearch-input { flex: 1; min-width: 0; background: transparent; border: 0; font: 500 var(--t-lede)/1.3 var(--font-text); color: var(--ink); }
.quicksearch__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-muted);
  border-radius: var(--r-sm);
  padding: var(--s1);
}
.quicksearch__close:hover { color: var(--ink); }
.quicksearch__results { max-height: 60vh; overflow-y: auto; }
.quicksearch__hit { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); color: inherit; }
.quicksearch__hit:last-child { border-bottom: 0; }
.quicksearch__hit:hover, .quicksearch__hit.is-focused { background: var(--surface-well); }
.quicksearch__hit-cover { width: 44px; height: 44px; flex-shrink: 0; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-well); }
.quicksearch__hit-meta { flex: 1; min-width: 0; }
.quicksearch__hit-name { font: 600 var(--t-body)/1.25 var(--font-text); color: var(--ink); margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quicksearch__hit-price { font: 700 var(--t-micro)/1 var(--font-mono); color: var(--ink-muted); margin: 0; font-variant-numeric: tabular-nums; }
.quicksearch__empty { padding: var(--s6) var(--s5); text-align: center; color: var(--ink-muted); font: 400 var(--t-body)/1.4 var(--font-text); }
.quicksearch__foot { padding: var(--s3) var(--s5); background: var(--surface-well); border-top: 1px solid var(--line); }
.quicksearch__foot .meta { font: 400 var(--t-micro)/1 var(--font-text); color: var(--ink-muted); }
.quicksearch__foot kbd { font: 500 10px/1 var(--font-mono); padding: 2px 4px; border-radius: var(--r-sm); background: var(--surface-raised); border: 1px solid var(--line); }

/* ═══════════════════════ FOOTER ═════════════════════════════════════════ */
.foot {
  padding-block: var(--s8) var(--s6);
  margin-top: var(--s8);
  border-top: 1px solid var(--hairline);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
}
@media (min-width: 1024px) {
  .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
.foot__word { display: inline-flex; align-items: center; gap: 4px; font: 700 1.2rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--on-surface); }
.foot__tagline { font: 500 var(--t-body)/1.5 var(--font-text); color: var(--ink-muted); margin: var(--s3) 0 0; max-width: 32ch; }
.foot__title {
  font: 700 var(--t-micro)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin: 0 0 var(--s3);
}
.foot__col { display: flex; flex-direction: column; gap: 2px; }
.foot__col a {
  display: block;
  padding: var(--s2) 0;
  font: 500 0.86rem/1.4 var(--font-text);
  color: var(--ink-muted);
}
.foot__col a:hover { color: var(--realm-accent); }
.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
  font: 500 var(--t-micro)/1.5 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
/* Legal links (Privacy/Terms/Imprint/cookie-preferences, contributed by the
   gdpr plugin's `footer_legal` slot) share the signoff bar's quiet mono
   micro-label voice; `.slot:empty` collapses this to nothing when the
   contributing plugin is disabled. */
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.foot__legal a:hover { text-decoration: underline; }

/* ═══════════════════════ BUTTONS ═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s5);
  background: var(--ink);
  color: #fff;
  font: 700 var(--t-label)/1 var(--font-text);
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-muted); }

.btn--quiet {
  background: transparent;
  color: var(--on-surface-muted);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.btn--quiet:hover { transform: none; box-shadow: none; background: transparent; color: var(--on-surface); text-decoration: underline; text-underline-offset: 3px; }

.btn[disabled], .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Add-to-cart success (cart-drawer JS adds .is-added, reverts after ~1.5s). */
.btn.is-added { animation: stamp-in var(--dur-slow) var(--ease); }

/* ═══════════════════════ PRODUCT MEDIA — .pmedia ═══════════════════════ */
/* Photo-forward tile (_specimen_plate.html). Fills whatever box it's given;
   size modifiers set the box itself so the include works standalone (card
   grids, PDP gallery, cart/checkout line thumbs) without depending on a
   .card__media ancestor. data-realm lives on this element too (§ arg
   contract) so the tint/initial resolve even without a realm-scoped parent. */
.pmedia {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--realm-tint);
}
.pmedia picture,
.pmedia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pmedia__initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 2.5rem/1 var(--font-display);
  color: var(--realm-deep);
  background: var(--realm-tint);
}
/* .pmedia--card always sits inside .card__media (~398), which already rounds
   top-only — inherit its shape rather than re-rounding all four corners
   (that double-rounded the bottom against .card__media's overflow:hidden). */
.pmedia--card { aspect-ratio: 1 / 1; width: 100%; border-radius: inherit; }
.pmedia--pdp { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--r-card); }
.pmedia--pdp .pmedia__initial { font-size: 5rem; }
.pmedia--line,
.pmedia--thumb { aspect-ratio: 1; flex-shrink: 0; border-radius: var(--r-sm); }
.pmedia--line { width: 56px; }
.pmedia--thumb { width: 40px; }
.pmedia--line .pmedia__initial,
.pmedia--thumb .pmedia__initial { font-size: 1.1rem; }
.pmedia.is-oos { opacity: 0.55; filter: grayscale(0.4); }

/* ═══════════════════════ PRODUCT CARD ══════════════════════════════════ */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* grid/flex item safety: never widen the track past its cell */
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.card:hover,
.card:focus-within { border-color: var(--ink-muted); background: var(--surface-well); }
.card--oos .card__name,
.card--oos .price { opacity: 0.6; }

.card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-card) var(--r-card) 0 0; }

.card__tag {
  position: absolute;
  top: var(--s3); left: var(--s3);
  font: 700 var(--t-micro)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--realm-tint);
  color: var(--realm-deep);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
/* Persistent — not hover/focus-gated. It lives in .card__body (not the media
   anchor), so it is always visible/tappable on touch devices, which have no
   hover state and would otherwise never see a card-level add-to-cart. */
.card__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-left: auto;
  min-height: 44px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  font: 700 0.76rem/1 var(--font-text);
  padding: var(--s2) var(--s4);
  transition:
    background var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.card__add:hover { background: var(--accent-deep); }

/* Quiet Neutral spec: quick-add reveals on hover, but touch devices still need
   a persistently visible affordance. Hide/reveal only on fine-pointer + hover
   devices; coarse-pointer devices keep the button visible. */
@media (hover: hover) and (pointer: fine) {
  .card__add {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
  }
  .card:hover .card__add,
  .card:focus-within .card__add {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.card__body { display: flex; flex-direction: column; padding: var(--s4) var(--s4) var(--s5); }
.card__name {
  margin: var(--s2) 0 2px;
  font: 700 1.05rem/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.05rem * 1.3 * 2);
}
.card__name a { color: inherit; }
.card__name a:hover { color: var(--realm-deep); }
.card__sub {
  margin: 0;
  color: var(--ink-muted);
  font: 500 0.82rem/1.3 var(--font-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__pricerow { margin: var(--s3) 0 0; min-width: 0; }
.card__notify { margin: 0 var(--s4) var(--s4); }
.card__addform { display: none; }

/* ═══════════════════════ CATEGORY PILL NAV ═════════════════════════════ */
.pillnav { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: transparent;
  color: var(--on-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
  font: 700 0.88rem/1 var(--font-text);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pill:hover { border-color: var(--realm-deep); color: var(--realm-deep); }
.pill--wellness:hover { border-color: var(--sage); color: var(--sage-deep); }
.pill--arcana:hover { border-color: var(--violet); color: var(--violet-deep); }

/* ═══════════════════════ TRUST BAND ═════════════════════════════════════ */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
  max-width: 60rem;
  margin-inline: auto;
  background: var(--surface-well);
  color: var(--on-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
  margin-block: var(--s8);
}
.trust__item {
  display: grid;
  gap: var(--s2);
  align-content: start;
}
.trust__item b { display: block; font: 700 1rem/1.3 var(--font-text); }
.trust__item span { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-top: 2px; }
@media (max-width: 700px) { .trust { grid-template-columns: 1fr 1fr; gap: var(--s5); padding: var(--s6) var(--s5); } }
@media (max-width: 460px) { .trust { grid-template-columns: 1fr; } }

/* ═══════════════════════ PRICE ══════════════════════════════════════════ */
.price { font: 700 1.05rem/1 var(--font-text); color: var(--on-surface); font-variant-numeric: tabular-nums; }
.price--sale { display: inline-flex; gap: var(--s2); align-items: baseline; }
.price__was { font-weight: 600; font-size: 0.85em; color: var(--ink-muted); text-decoration: line-through; }
.price__now { color: var(--ink); }
/* "From $x" qualifier for variant products whose lowest-priced variant is
   shown as a starting price (card__pricerow below, mirrors .pdp__price-from
   in pages/pdp.css so the PLP/PDP price voice matches). */
.price__from { font: 500 var(--t-label)/1 var(--font-text); color: var(--on-surface-muted); }

/* ═══════════════════════ BASE FORM CONTROLS ═════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]),
select,
textarea {
  min-height: 44px;
  padding: 0 var(--s3);
  background: var(--surface-raised);
  color: var(--on-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: 400 var(--t-body)/1.4 var(--font-form);
}
textarea { min-height: 96px; padding: var(--s3); resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ═══════════════════════ CHIP (legacy — retained for out-of-scope pages) */
.chip {
  display: inline-block;
  padding: var(--s1) var(--s2);
  font: 500 var(--t-micro)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--realm-deep);
  border: 1px solid var(--realm-accent);
  border-radius: var(--r-sm);
  background: transparent;
}
.chip[data-realm="wellness"] { color: var(--sage-deep); border-color: var(--sage); }
.chip[data-realm="arcana"] { color: var(--violet-deep); border-color: var(--violet); }
[data-realm="arcana"] .chip[data-realm="arcana"],
.scope-night .chip[data-realm="arcana"] { color: var(--violet-deep); }

/* ═══════════════════════ LEADER (legacy — dotted alignment rows) ═══════ */
.leader { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.leader__dots { flex: 1; border-bottom: 1px dotted var(--hairline); transform: translateY(-4px); min-width: 16px; }

/* ═══════════════════════ SECTION RULE — .rule-head (legacy) ════════════ */
.rule-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s7) 0 var(--s5);
}
.rule-head__line { height: 1px; background: var(--hairline); }
.rule-head > .rule-head__line:first-child { flex: 0 0 48px; }
.rule-head__line--fill { flex: 1; }
.rule-head__seal { font: 400 var(--t-lede)/1 var(--font-display); color: var(--on-surface-muted); flex: 0 0 auto; }
.rule-head__title { font: 400 var(--t-h2)/1.1 var(--font-display); color: var(--on-surface); flex: 0 0 auto; }
.rule-head__title--utility { font: 500 var(--t-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.rule-head__aux { font: 500 var(--t-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--realm-deep); flex: 0 0 auto; }
/* Durable narrow-leaf guard (flagged by Agent B from home.css — the fixed
   48px lead line + non-shrinking display title + aux forces horizontal
   scroll on a <=400px leaf regardless of page). Lives here so every
   consumer (home/category/PDP/…) inherits it, not just home. */
@media (max-width: 400px) {
  .rule-head { flex-wrap: wrap; }
  .rule-head__title { flex-shrink: 1; min-width: 0; }
}

/* ═══════════════════════ LEDGER INDEX (legacy) ═════════════════════════ */
.ledger-index { list-style: none; margin: 0; padding: 0; }
.ledger-index li { border-bottom: 1px solid var(--hairline); }
.ledger-index li a { display: flex; align-items: baseline; gap: var(--s2); min-height: 48px; color: var(--on-surface); }
.ledger-index__name { font: 400 var(--t-lede)/1.2 var(--font-text); }
.ledger-index__count { font: 500 var(--t-body)/1 var(--font-mono); color: var(--on-surface-muted); font-variant-numeric: tabular-nums; }
/* Arcana row accent — a plain modifier class, NOT `[data-realm="arcana"]` on
   the <li> (that selector also matches tokens.css's realm-scope block and
   would flip the whole day-page row to night). Day-scope-safe violet text
   only; put `.ledger-index__count--arcana` on the count span itself. */
.ledger-index__count--arcana,
.ledger-index li:hover .ledger-index__count--arcana { color: var(--violet-deep); }

/* ═══════════════════════ FORM FIELDS (legacy BEM skin) ═════════════════ */
/* The bare input/select/textarea reset above (BASE FORM CONTROLS) already
   covers every field on the site; this BEM-scoped skin is kept only for
   out-of-scope templates (cart/checkout/account) that still wrap fields in
   .field/.field__label markup. */
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field__label { font: 500 var(--t-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-surface-muted); }
.field__input,
.field select,
.field textarea {
  min-height: 44px;
  padding: var(--s3) var(--s3);
  background: var(--surface-raised);
  color: var(--on-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font: 400 var(--t-body)/1.4 var(--font-form);
}
.field__input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field--invalid .field__input,
.field__input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { font: 400 var(--t-micro)/1.4 var(--font-form); color: var(--danger); }
.field input[type="checkbox"], .field input[type="radio"] { accent-color: var(--accent); }

/* Ruled ledger rows for radio groups (shipping rates, payment methods). */
.ledger-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.ledger-row__label { font: 400 var(--t-body)/1.3 var(--font-form); color: var(--on-surface); }
.ledger-row__price { font: 500 var(--t-body)/1 var(--font-mono); color: var(--on-surface); font-variant-numeric: tabular-nums; }

/* ═══════════════════════ PANELS (legacy) ════════════════════════════════ */
.docket {
  position: relative;
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s5);
}
.docket::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--hairline);
  border-radius: 1px;
  pointer-events: none;
}
.panel { border-radius: var(--r-card); padding: var(--s5); }
.panel--night { background: var(--ink); color: var(--surface); }
.panel--day { background: var(--surface); color: var(--ink); }
.panel--wash { background: var(--sage-tint); color: var(--ink); }
[data-realm="arcana"] .panel--wash,
.scope-night .panel--wash { background: var(--violet-tint); color: var(--ink); }

/* ═══════════════════════ NOTICE (legacy) ════════════════════════════════ */
.notice {
  font: 500 var(--t-micro)/1.5 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-left: var(--s3);
  border-left: 3px solid var(--success);
  color: var(--success);
}
.notice--error { border-left-color: var(--danger); color: var(--danger); }
.notice:empty { display: none; }

/* ═══════════════════════ STEPPER (legacy) ══════════════════════════════ */
.stepper { display: flex; gap: 0; list-style: none; margin: var(--s4) 0; padding: 0; }
.stepper__step {
  font: 500 var(--t-micro)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-muted);
  padding: var(--s2) var(--s3);
  border-right: 1px solid var(--hairline);
}
.stepper__step:last-child { border-right: 0; }
.stepper__step[aria-current] { color: var(--on-surface); }
.stepper__step--done::before { content: "§ "; }

/* ═══════════════════════ STAMP (legacy) ═════════════════════════════════ */
.stamp {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 2px solid var(--success);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transform: rotate(-6deg);
  color: var(--success);
  text-align: center;
}
.stamp span { font: 500 var(--t-micro)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.10em; }
@media (max-width: 720px) { .stamp { width: 96px; height: 96px; } }

/* ═══════════════════════ EMPTY STATES (legacy) ═════════════════════════ */
.empty { max-width: 40ch; margin: var(--s8) auto; text-align: center; }
.empty h2 { font: 400 var(--t-h2)/1.2 var(--font-display); margin-bottom: var(--s3); }
.empty p { color: var(--on-surface-muted); margin-bottom: var(--s5); }
.empty__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════ SLOT CONTRACT (§3.7) ═════════════════════════ */
.slot:empty { display: none; }
.slot :where(h3, h4) { font: 400 var(--t-h3)/1.3 var(--font-display); margin: var(--s4) 0 var(--s2); }
.slot :where(p, li) { font: 400 var(--t-body)/1.6 var(--font-form); color: var(--on-surface); }
.slot :where(a) { color: var(--realm-deep); text-underline-offset: 2px; }
.slot :where(progress) { accent-color: var(--ink); width: 100%; height: 6px; }
.slot :where(ol, ul) { list-style: none; padding: 0; margin: var(--s3) 0; }
.slot :where(li) { padding: var(--s2) 0; border-bottom: 1px solid var(--hairline); }

/* ═══════════════════════ CART DRAWER SKIN (legacy — Task 6 owns) ═══════ */
/* Behaviour (ids, submit-intercept, JSON shape) preserved; skin re-tokened.
   Drawer stays display:flex and is shown/hidden via .is-shown transform. */
#cart-drawer-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-overlay); opacity: 0; transition: opacity var(--dur) var(--ease); }
#cart-drawer-backdrop.is-shown { opacity: 1; }
#cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, calc(100vw - var(--s6)));
  background: var(--surface-raised);
  color: var(--ink);
  border-left: 1px solid var(--hairline);
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
#cart-drawer.is-shown { transform: translateX(0); }
#cart-drawer header { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; }
#cart-drawer header .eyebrow { margin: 0; font: 500 var(--t-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-muted); }
#cart-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font: 400 var(--t-h2)/1 var(--font-display);
  line-height: 0.6;
  color: var(--ink-muted);
}
#cart-drawer-empty { padding: var(--s7) var(--s5); text-align: center; }
#cart-drawer-empty p { color: var(--ink-muted); margin-bottom: var(--s5); }
#cart-drawer ul { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
#cart-drawer ul li { display: flex; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--hairline); }
.cart-drawer-thumb { flex-shrink: 0; }
.cart-drawer-line { flex: 1; min-width: 0; }
.cart-drawer-line .name { font: 400 var(--t-body)/1.3 var(--font-text); margin: 0; color: var(--ink); }
.cart-drawer-line .meta { font: 500 var(--t-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: var(--s1) 0 var(--s2); }
.cart-drawer-line .price { font: 500 var(--t-body)/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
#cart-drawer footer { padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--hairline); display: grid; gap: var(--s3); background: var(--surface-well); }
#cart-drawer footer .row { display: flex; justify-content: space-between; align-items: baseline; }
#cart-drawer footer .row span { font: 500 var(--t-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
#cart-drawer-subtotal { display: inline-block; font: 500 var(--t-lede)/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
#cart-drawer footer .meta { font: 400 var(--t-micro)/1.4 var(--font-form); color: var(--ink-muted); margin: 0; }
#cart-drawer footer .btn { width: 100%; }

/* ═══════════════════════ MOTION ════════════════════════════════════════ */
/* Rule draw (motion 3) — lines start collapsed only when JS gates has-motion;
   without JS the lines render complete. Content is NEVER opacity 0. */
html.has-motion .rule-head__line { transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease); }
html.has-motion .rule-head.is-drawn .rule-head__line { transform: scaleX(1); }

@keyframes stamp-in { from { transform: scale(.92); } to { transform: scale(1); } }
@keyframes ko-pop { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes cart-item-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes confirm-stamp { from { transform: rotate(-2deg) scale(.9); } to { transform: rotate(-6deg) scale(1); } }
.stamp--enter { animation: confirm-stamp var(--dur-slow) var(--ease); }

/* Cart line items cascade in behind the sheet (from _cart_drawer). */
#cart-drawer.is-shown ul li { animation: cart-item-in var(--dur) var(--ease) both; animation-delay: calc(80ms + var(--i, 0) * 40ms); }

}