/* ==========================================================================
   TYG Launchpad — restyle v2
   Built from design_handoff_launchpad_restyle/README.md (design of record).
   Tokens, geometry and motion are taken from that spec. Do not invent values
   outside it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS

   Mulish replaced Avenir LT Std on 2026-08-06. Dione holds no web-embedding
   licence for Avenir: the supplied .otf cuts are Adobe desktop fonts reporting
   fsType 4, Preview & Print. Mulish is OFL, geometric-humanist, and served
   from Google Fonts, so there is nothing to self-host or license here.

   The weights are unchanged from the original ruling: 400 / 500 / 700 / 900.
   Mulish is a variable font with a 200 to 1000 wght axis, so all four are real
   instances rather than synthesised, and all four arrive in one file.

   Its caps run slightly wider than Avenir's, so the uppercase Black H1 sits a
   touch looser. That was checked on a rendered comparison and accepted.
   -------------------------------------------------------------------------- */

:root {
  /* Colour */
  --cream: #f8f1f2;
  --card: #fffdfd;
  --offwhite: #fafaf8;
  --navy: #3b3b58;
  --plum: #493751;
  --plum-hover: #3d1a4a;
  --mauve: #b375a0;
  --mauve-hover: #c68a98;
  --dark-plum: #7d3b7a;
  --gold: #c9a45a;
  --sage: #a6c9bb;
  --periwinkle: #a7afc8;
  --wood-dark: #2a1d24;
  --wood-mid: #3e2b46;

  /* Eyebrow / italic aside. NOT --mauve: that measures 3.16:1 on cream. */
  --eyebrow: #925f83;

  /* Derived */
  --border: rgba(167, 175, 200, 0.35);
  --border-input: rgba(167, 175, 200, 0.5);
  --body-muted: rgba(59, 59, 88, 0.78); /* 5.21 on cream */
  --label-muted: rgba(59, 59, 88, 0.74); /* 4.70 on cream. Never below 0.73. */
  --on-dark-body: rgba(248, 241, 242, 0.72);
  --on-dark-muted: rgba(248, 241, 242, 0.66);
  --on-dark-border: rgba(248, 241, 242, 0.14);
  --on-dark-border-strong: rgba(248, 241, 242, 0.34);
  --track: rgba(73, 55, 81, 0.12);

  /* Type accents. Decorative only: type is carried by the chip, progress by
     the printed percentage. Never let the accent become the sole signal, and
     never use these to encode a quantity. */
  --accent-course: #b375a0;
  --accent-tool: #a6c9bb;
  --accent-app: #a7afc8;
  --accent-resource: #c9a45a;
  --accent-community: #7d3b7a;
  --accent-challenge: #c68a98;

  /* Type */
  --sans: "Mulish", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;

  /* Radii */
  --r-card: 12px;
  --r-btn: 10px;
  --r-panel: 16px;
  --r-tile: 9px;
  --r-pill: 999px;

  /* Shadow. Always plum-tinted, never rgba(0,0,0,...). */
  --sh-card: 0 2px 12px rgba(73, 55, 81, 0.08);
  --sh-card-hover: 0 8px 28px rgba(73, 55, 81, 0.14);
  --sh-aside: 0 8px 28px rgba(73, 55, 81, 0.12);
  --sh-panel: 0 22px 60px rgba(73, 55, 81, 0.22);
  --sh-toast: 0 20px 50px rgba(42, 29, 36, 0.35);
  --sh-modal: 0 30px 80px rgba(42, 29, 36, 0.4);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-micro: 140ms;
  --t-base: 240ms;
  --t-enter: 420ms;

  --rail: 252px;
}

/* Dark panel, recipe A: hero band, product detail hero, first login. */
.panel-dark {
  background:
    radial-gradient(110% 120% at 8% 6%, rgba(201, 164, 90, 0.22), transparent 56%),
    linear-gradient(150deg, #3e2b46 0%, #2a1d24 100%);
  color: var(--cream);
}
/* Recipe B: sidebar. No radial. */
.panel-rail {
  background: linear-gradient(178deg, #3e2b46 0%, #2a1d24 100%);
  color: var(--cream);
}
/* Recipe C: login art. Radial as A, 168deg linear. */
.panel-login {
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(201, 164, 90, 0.2), transparent 58%),
    linear-gradient(168deg, #3e2b46 0%, #2a1d24 100%);
  color: var(--cream);
}
/* Recipe D: purchase confirmation. Sage, not amber. */
.panel-success {
  background:
    radial-gradient(110% 120% at 8% 6%, rgba(166, 201, 187, 0.22), transparent 56%),
    linear-gradient(150deg, #3e2b46 0%, #2a1d24 100%);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(179, 117, 160, 0.28);
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--mauve);
  outline-offset: 2px;
}

@keyframes tygRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.is-hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
}

.h-page {
  color: var(--plum);
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  line-height: 0.92;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.h-section {
  color: var(--plum);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 0.94;
  font-weight: 900;
  text-transform: uppercase;
}

.h-hero {
  /* Explicit family and colour: base heading rules otherwise render this
     plum-on-plum. */
  font-family: var(--sans);
  color: var(--cream);
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.02;
  font-weight: 900;
  max-width: 16ch;
  text-wrap: balance;
}

.h-group {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1;
  color: var(--plum);
}

.h-card {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--plum);
}

.eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

.eyebrow-gold {
  color: var(--gold);
}

.aside-italic {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--eyebrow);
}

.intro {
  max-width: 56ch;
  margin: 16px 0 0;
  color: var(--body-muted);
  line-height: 1.7;
}

.label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-btn);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-micro) var(--ease), transform var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.btn-primary {
  background: var(--plum);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--plum-hover);
}

.btn-mauve {
  background: var(--mauve);
  color: var(--cream);
}
.btn-mauve:hover {
  background: var(--mauve-hover);
}

.btn-ghost-dark {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(248, 241, 242, 0.3);
}
.btn-ghost-dark:hover {
  background: rgba(248, 241, 242, 0.1);
}

.btn-outline {
  background: var(--card);
  color: var(--plum);
  border: 1px solid var(--border-input);
}
.btn-outline:hover {
  border-color: var(--mauve);
}

.btn-tall {
  min-height: 50px;
}
.btn-xl {
  min-height: 54px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field {
  display: grid;
  gap: 8px;
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0 16px;
  background: var(--offwhite);
  border: 1px solid var(--border-input);
  border-radius: var(--r-btn);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}

.input,
.select {
  height: 56px;
}

.textarea {
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--mauve);
  box-shadow: 0 0 0 3px rgba(179, 117, 160, 0.22);
}

.form-note {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--label-muted);
}

/* --------------------------------------------------------------------------
   1. Sign in
   -------------------------------------------------------------------------- */

.login {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  min-height: 100vh;
}

.login-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 4vw, 56px);
  overflow: hidden;
}

.login-art .aside-italic {
  color: #cea7c4; /* on dark: 6.07 on wood-mid. Not --eyebrow. */
}

.mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--on-dark-border-strong);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.login-slot {
  height: clamp(220px, 26vw, 320px);
  margin-top: 20px;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.login-art-note {
  max-width: 420px;
  margin: 0;
  color: var(--on-dark-muted);
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 84px);
}

.login-form {
  display: grid;
  gap: 16px;
  max-width: 460px;
  margin-top: 34px;
}

/* Replaces the form once a link is sent. */
.login-sent {
  display: grid;
  gap: 12px;
  max-width: 460px;
  margin-top: 34px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-card);
}

.login-sent-line {
  margin: 0;
  color: var(--body-muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.login-sent .btn {
  justify-self: start;
  margin-top: 6px;
}

/* Shown after sign-out. Sage, so it reads as calm rather than as an error. */
.login-notice {
  max-width: 460px;
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--sage);
  background: rgba(166, 201, 187, 0.16);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  color: var(--body-muted);
}

.preview-access {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 460px;
  margin-top: 32px;
}

.preview-access .rule {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Shell + rail
   -------------------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px 20px;
}

.rail-mark {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
}

.rail-title {
  font-weight: 900;
  line-height: 1.2;
}

.rail-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.rail-nav {
  display: grid;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--on-dark-muted);
  font-size: 0.92rem;
  font-weight: 500; /* holds separation against the on-dark muted text */
  text-align: left;
  cursor: pointer;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}

.nav-item:hover {
  background: rgba(248, 241, 242, 0.1);
}

.nav-item[aria-current="page"] {
  background: rgba(248, 241, 242, 0.14);
  color: var(--cream);
}

.nav-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(248, 241, 242, 0.28);
}

.nav-item[aria-current="page"] .nav-dot {
  background: var(--gold);
}

.nav-label {
  flex: 1;
}

.nav-count {
  font-size: 0.72rem;
  font-weight: 700;
}

.rail-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--on-dark-border);
  display: grid;
  gap: 10px;
}

.rail-foot .aside-italic {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--on-dark-body);
}

.rail-email {
  font-size: 0.82rem;
  color: var(--on-dark-muted);
  overflow-wrap: anywhere;
}

.rail-signout {
  min-height: 38px;
  justify-self: start;
  padding: 0 16px;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--on-dark-border-strong);
}
.rail-signout:hover {
  background: rgba(248, 241, 242, 0.1);
}

/* Overflow menu button, only shown in the mobile top bar. */
.rail-more {
  display: none;
}

.main {
  min-width: 0;
  padding: clamp(22px, 3vw, 44px) clamp(22px, 3.4vw, 52px) 80px;
}

.view {
  display: grid;
  gap: 34px;
  max-width: 1280px;
  animation: tygRise var(--t-enter) var(--ease);
}

.view-narrow {
  max-width: 1100px;
  gap: 26px;
}

.view-slim {
  max-width: 900px;
  gap: 26px;
}

/* --------------------------------------------------------------------------
   2a. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.masthead-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search {
  width: clamp(200px, 24vw, 300px);
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--border-input);
  box-shadow: none;
}

/* Not a pill. A pill reads as clickable and this is not. */
.count {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2b. Hero band
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  min-height: 340px;
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--sh-panel);
}

.hero-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(26px, 3vw, 42px);
}

.hero-desc {
  max-width: 46ch;
  margin: 14px 0 0;
  line-height: 1.65;
  color: var(--on-dark-body);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ring {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
}

.ring svg {
  transform: rotate(-90deg);
}

.ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.94rem;
  font-weight: 900;
  color: var(--cream);
}

.hero-slot {
  position: relative;
  min-height: 300px;
}

/* --------------------------------------------------------------------------
   2c. Also open
   -------------------------------------------------------------------------- */

.band {
  display: grid;
  gap: 14px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rule {
  flex: 1;
  height: 1px;
  background: var(--border-input);
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-input);
}

.continue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.continue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-card);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.continue-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-card-hover);
  border-color: rgba(179, 117, 160, 0.45);
}

/* Deliberately not an image slot: 56px is too small to be a usable target. */
.continue-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-tile);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--plum);
}

.continue-main {
  flex: 1;
  min-width: 0;
}

.continue-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--plum);
}

.continue-pct {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--label-muted);
}

/* --------------------------------------------------------------------------
   2d. Filter bar
   -------------------------------------------------------------------------- */

.filters {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px;
  margin: 0 -12px;
  border-radius: 14px;
  background: rgba(248, 241, 242, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-input);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--plum);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}

.pill:hover {
  border-color: var(--mauve);
}

.pill:active {
  transform: scale(0.98);
}

.pill[aria-pressed="true"] {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   2e. Grouped library
   -------------------------------------------------------------------------- */

.groups {
  display: grid;
  gap: 34px;
}

.group {
  display: grid;
  gap: 16px;
}

.group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

/* Number only. The Cormorant heading carries the name. */
.group-num {
  flex: none;
}

.group-count {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--label-muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--sh-card);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-card-hover);
  border-color: rgba(179, 117, 160, 0.45);
}

.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.card-chip,
.card-badge {
  position: absolute;
  top: 10px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

.card-chip {
  left: 10px;
  background: rgba(248, 241, 242, 0.92);
  color: var(--plum);
}

.card-badge {
  right: 10px;
  background: rgba(42, 29, 36, 0.72);
  color: var(--cream);
}

.card-badge-price {
  background: var(--gold);
  color: var(--wood-dark);
}

.card-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  pointer-events: none;
}

.card-body {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
}

.card-title {
  font-size: 1.12rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--plum);
}

.card-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--body-muted);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.track {
  flex: 1;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
}

.track-sm {
  height: 5px;
  margin-top: 8px;
}

.fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.progress-pct {
  font-size: 0.96rem;
  font-weight: 900;
  color: var(--plum);
  white-space: nowrap;
}

/* Available cards carry this instead of a progress bar. */
.card-cta {
  display: flex;
  align-items: center;
  height: 42px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--plum);
}

.card-available:hover {
  border-color: rgba(201, 164, 90, 0.55);
}

/* 2f. Empty state */
.empty {
  display: grid;
  gap: 10px;
  padding: 56px;
  border: 1px dashed rgba(167, 175, 200, 0.7);
  border-radius: var(--r-panel);
  text-align: center;
  justify-items: center;
}

.empty p {
  margin: 0;
  color: var(--body-muted);
}

/* --------------------------------------------------------------------------
   Panels and cards on light
   -------------------------------------------------------------------------- */

.panel {
  padding: clamp(26px, 3vw, 42px);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
}

.surface {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-card);
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.fact {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-card);
}

.fact-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-muted);
}

.fact-value {
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--plum);
  overflow-wrap: anywhere;
}

/* 5. Support */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  align-items: start;
  gap: 18px;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--card);
  box-shadow: var(--sh-card);
}

.faq summary {
  font-weight: 700;
  color: var(--plum);
  cursor: pointer;
}

.faq p {
  margin: 12px 0 0;
  color: var(--body-muted);
  line-height: 1.65;
}

.form-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-card);
}

/* 8. Product detail */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 18px;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  min-height: 320px;
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--sh-panel);
}

.detail-hero-body {
  display: grid;
  gap: 16px;
  align-content: center;
  padding: clamp(26px, 3vw, 44px);
}

.detail-hero-body h1 {
  font-family: var(--sans);
  color: var(--cream);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  font-weight: 900;
  max-width: 16ch;
}

.detail-hero-body p {
  max-width: 52ch;
  margin: 0;
  color: var(--on-dark-body);
  line-height: 1.65;
}

.detail-slot {
  position: relative;
  min-height: 280px;
}

.detail-col {
  display: grid;
  gap: 18px;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--body-muted);
  line-height: 1.6;
}

.aside-buy {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-aside);
}

.price {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--plum);
}

.back {
  justify-self: start;
  min-height: 40px;
  padding: 0 18px;
}

/* --------------------------------------------------------------------------
   Overlays
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: var(--r-card);
  background: var(--wood-dark);
  color: var(--cream);
  box-shadow: var(--sh-toast);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Image slots

   Placeholders until real photography lands. 31 images: 28 product plus 3
   editorial. See the handoff Assets section for the id map.
   -------------------------------------------------------------------------- */

.slot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg, #efe7ea, #efe7ea 10px, #e4dade 10px, #e4dade 20px);
  color: rgba(59, 59, 88, 0.74);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Responsive

   Two breakpoints, per the handoff. No explicit one-column rule for the
   library: auto-fill minmax(258px,1fr) already collapses at 578px, and a
   media query on top of it creates an 18px fight.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 64px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
  }

  .rail-brand,
  .rail-foot {
    display: none;
  }

  .rail-nav {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .rail-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    /* Reset the rail's column-layout width, or each item fills the row and
       items two onward land off-screen. */
    width: auto;
    flex: none;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .rail-more {
    display: inline-flex;
    flex: none;
  }

  .rail-menu {
    position: absolute;
    top: 64px;
    right: 12px;
    display: grid;
    gap: 10px;
    min-width: 220px;
    padding: 16px;
    border-radius: var(--r-card);
    box-shadow: var(--sh-panel);
  }

  .main {
    padding: 20px 20px 64px;
  }

  /* Tucks under the pinned nav instead of fighting it for top: 0. */
  .filters {
    top: 64px;
    z-index: 4;
  }

  .hero,
  .detail-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Image on top, text below. The ring keeps 76px and wraps rather than
     scaling: it is the signature element. */
  .hero-slot,
  .detail-slot {
    order: -1;
    min-height: 200px;
    height: 200px;
  }

  .login {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-art {
    display: none;
  }

  .split,
  .detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .aside-buy {
    position: static;
  }
}

@media (max-width: 560px) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .pill-group {
    flex-wrap: nowrap;
  }

  .masthead {
    align-items: flex-start;
  }

  .masthead-right {
    width: 100%;
    flex-wrap: wrap;
  }

  .search {
    width: 100%;
  }

}

/* Foundry suite destinations retain their configured order at every width. */
.foundry-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foundry-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

a.foundry-item:hover,
a.foundry-item:focus-visible {
  outline: 2px solid var(--mauve);
  outline-offset: 3px;
}

.foundry-status {
  color: var(--body-muted);
  font-size: 0.9rem;
}