/* ============================================================
   exam-plate.css — the exam package cover, drawn rather than fetched
   ============================================================

   ONE component, THREE shells. The public catalogue (homepage-new.css, hn-),
   the student Modern Education Shell (redesign-ui.css, eduui- and tw-) and the
   admin/teacher inner app (inner-app.css, ia-) all show the same
   package, and a student who finds a pack on the public page and then opens
   it from their dashboard should not see two different products. That is why
   this lives in a sheet of its own rather than three times over: the covers
   have to agree, and three copies would stop agreeing the first time one of
   them was edited.

   The `xp-` prefix means exactly this file. It is deliberately not `hn-`
   (homepage) or `ia-` (inner app) — a reader who meets .xp-plate-code in the
   student shell should not have to guess which of three stylesheets owns it.

   WHAT VARIES PER EXAM arrives as custom properties in an inline style
   written by ExamCatalogue::plateFor(), so adding an exam family is a row in
   plateArt() and needs no edit here:

     --xp-c1 / --xp-c2   the two stops of the ground gradient
     --xp-ac             the family accent: pattern tint, rule, reveal heading
     --xp-tc             the tier colour (Starter / Foundation / …)
     --xp-pat/--xp-pat2  the accent at two alphas, for the field pattern

   The only thing a shell must supply is the class `xp-plate-card` on whatever
   element the hover should originate from — the card, not the plate, so the
   reveal fires from anywhere on the card. Add `xp-plate-card--responsive` as
   well to opt into the phone rail (see the bottom of this file); a shell whose
   card stays a vertical card at every width should not.

   The emblems referenced by <use href="#xp-em-…"> come from
   Include/inc_plate_sprite.php.
   ============================================================ */


/* ══ The plate ═══════════════════════════════════════════════
   The package cover, drawn rather than fetched. Four layers under the type:
   a ground gradient, a field pattern, a pool of family light and a wash that
   keeps the type legible over whatever the first three produced.

   Everything that varies by exam arrives as custom properties on the element
   from ExamCatalogue::plateFor() — colours inline, pattern as a class. Adding a
   family is a row in plateArt(); it needs no edit here unless it also wants a
   pattern no other family uses.
   ══════════════════════════════════════════════════════════ */
.xp-plate {
  /* The component owns its own box. It used to borrow display / position / ratio /
     overflow from .hn-pkg-card-cover, which exists in homepage-new.css and nowhere
     else — in the student shell that left every absolutely-positioned layer resolving
     against the page instead of the plate. */
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; text-decoration: none;
  background: linear-gradient(118deg, var(--xp-c1) 0%, var(--xp-c2) 78%);
  isolation: isolate;
  --xp-pad: 15px;

  /* Motion and type, resolved once and inherited by every layer. A shell that defines
     its own tokens wins; a shell that does not still gets a working component rather
     than an unanimated, system-font plate. --hn-* exists only in homepage-new.css, and
     this file now also loads beside redesign-ui.css and inner-app.css. */
  --xp-ease: var(--hn-ease, cubic-bezier(0.4, 0, 0.2, 1));
  --xp-fast: var(--hn-fast, 150ms);
  --xp-slow: var(--hn-slow, 350ms);
  --xp-font-head: var(--hn-font-head, 'Poppins', 'Source Sans 3', system-ui, sans-serif);
}
.xp-plate-field,
.xp-plate-glow,
.xp-plate-wash,
.xp-plate-emblem { position: absolute; pointer-events: none; }

.xp-plate-field { inset: -2px; z-index: 0; opacity: .9; }

.xp-plate-glow {
  z-index: 0; width: 150%; aspect-ratio: 1; right: -58%; top: -72%; border-radius: 50%;
  background: radial-gradient(circle, var(--xp-ac) 0%, transparent 62%);
  opacity: .24;
  transition: opacity var(--xp-slow) var(--xp-ease), transform var(--xp-slow) var(--xp-ease);
}

/* Left-to-right, because the type is set on the left and the emblem on the right. */
.xp-plate-wash {
  inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgba(4,8,16,.62) 0%, rgba(4,8,16,.34) 46%, rgba(4,8,16,0) 82%);
}

.xp-plate-emblem {
  z-index: 1; right: -7%; top: 50%; width: 47%; aspect-ratio: 1;
  transform: translateY(-50%); color: var(--xp-ac); opacity: .30;
  transition: transform var(--xp-slow) var(--xp-ease), opacity var(--xp-slow) var(--xp-ease);
}
.xp-plate-emblem svg { width: 100%; height: 100%; display: block; }

/* Tier as an edge, carried on both layouts. On the phone rail it is the whole
   of the tier signal; on the card it doubles the pill for a scanning eye. */
.xp-plate-tick {
  position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--xp-tc); pointer-events: none;
}

.xp-plate-inner {
  position: relative; z-index: 2; height: 100%; padding: var(--xp-pad);
  display: flex; flex-direction: column; justify-content: space-between;
}
.xp-plate-tier {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: #fff; background: var(--xp-tc); border-radius: 999px;
  padding: 4px 10px 4px 8px; line-height: 1;
  box-shadow: 0 2px 8px rgba(2,6,14,.32);
}
.xp-plate-tier i {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.85); flex: none;
}
.xp-plate-id { display: flex; flex-direction: column; gap: 2px; max-width: 82%; }
.xp-plate-code {
  font-family: var(--xp-font-head); font-weight: 800; color: #fff; line-height: .92;
  font-size: clamp(22px, 3.1vw, 40px); letter-spacing: -.032em;
  text-shadow: 0 2px 14px rgba(2,6,14,.45);
}
.xp-plate-full {
  font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.74); line-height: 1.3;
}
.xp-plate-rule {
  width: 26px; height: 3px; border-radius: 2px; background: var(--xp-ac); margin-top: 5px;
  transition: width var(--xp-slow) var(--xp-ease);
}

/* The reveal. Focus-within as well as hover: the cover itself is aria-hidden and
   not tabbable, but the title link inside the card is, so a keyboard user reaches
   the same information by tabbing to the card. */
.xp-plate-peek {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  /* The top padding is the fade. Content starts below where the scrim reaches full
     opacity, so the soft edge stays decorative instead of running behind the label —
     the exam code was showing through its own "Inside" heading. */
  padding: 17px var(--xp-pad) 10px;
  background: linear-gradient(to top, rgba(3,7,14,.97) 0 76%, rgba(3,7,14,0) 100%);
  transform: translateY(102%); opacity: 0;
  transition: transform var(--xp-slow) var(--xp-ease), opacity var(--xp-fast) var(--xp-ease);
}
.xp-plate-card:hover .xp-plate-peek,
.xp-plate-card:focus-within .xp-plate-peek { transform: translateY(0); opacity: 1; }
.xp-plate-card:hover .xp-plate-emblem,
.xp-plate-card:focus-within .xp-plate-emblem { transform: translateY(-50%) scale(1.07); opacity: .42; }
.xp-plate-card:hover .xp-plate-glow,
.xp-plate-card:focus-within .xp-plate-glow { opacity: .38; transform: scale(1.06); }
.xp-plate-card:hover .xp-plate-rule,
.xp-plate-card:focus-within .xp-plate-rule { width: 44px; }

.xp-plate-peek-h {
  display: block; font-size: 8.8px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--xp-ac); margin-bottom: 5px;
}
.xp-plate-subs { display: flex; flex-wrap: wrap; gap: 4px; }
.xp-plate-sub {
  font-size: 10.2px; font-weight: 600; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16);
  border-radius: 5px; padding: 2.5px 7px; line-height: 1.35; white-space: nowrap;
}
.xp-plate-sub b {
  font-weight: 700; color: var(--xp-ac); font-variant-numeric: tabular-nums; margin-left: 3px;
}

/* The subject row in the card body. Desktop already shows this on the cover, so
   here it is clipped rather than display:none'd — a screen reader still reads it,
   which the aria-hidden cover cannot provide. The phone reveals it (see below). */
.xp-plate-subs-body {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.xp-plate-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.xp-plate-chip {
  font-size: 11px; font-weight: 600; color: #1a3a6b;
  background: #eff6ff; border-radius: 6px; padding: 3px 8px; line-height: 1.3;
}

/* ── Field patterns ──────────────────────────────────────────
   Twelve archetypes, tinted with the family accent through --xp-pat.
   A pattern is shared only between exams that are genuinely cousins; the
   gradient and the emblem still separate them.
   ────────────────────────────────────────────────────────── */
.xp-plate--grid .xp-plate-field {
  background-image:
    repeating-linear-gradient(0deg,  var(--xp-pat) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, var(--xp-pat) 0 1px, transparent 1px 22px);
}
.xp-plate--lattice .xp-plate-field {
  background-image:
    radial-gradient(circle, var(--xp-pat2) 1.7px, transparent 2px),
    repeating-linear-gradient(30deg, var(--xp-pat) 0 1px, transparent 1px 26px);
  background-size: 26px 26px, auto;
}
.xp-plate--hex .xp-plate-field {
  background-image:
    repeating-linear-gradient(60deg,  var(--xp-pat) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-60deg, var(--xp-pat) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg,   var(--xp-pat) 0 1px, transparent 1px 19px);
}
.xp-plate--circuit .xp-plate-field {
  background-image:
    repeating-linear-gradient(90deg, var(--xp-pat) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg,  var(--xp-pat) 0 1px, transparent 1px 30px),
    radial-gradient(circle, var(--xp-pat2) 2.2px, transparent 2.5px);
  background-size: auto, auto, 30px 30px;
}
.xp-plate--steps .xp-plate-field {
  background-image: repeating-linear-gradient(90deg, var(--xp-pat2) 0 9px, transparent 9px 22px);
  -webkit-mask-image: linear-gradient(66deg, transparent 26%, #000 96%);
          mask-image: linear-gradient(66deg, transparent 26%, #000 96%);
}
.xp-plate--columns .xp-plate-field {
  background-image: repeating-linear-gradient(90deg, var(--xp-pat2) 0 6px, transparent 6px 26px);
  background-size: 100% 62%; background-position: 0 100%; background-repeat: no-repeat;
}
.xp-plate--rules .xp-plate-field {
  background-image: repeating-linear-gradient(0deg, var(--xp-pat) 0 1px, transparent 1px 15px);
}
.xp-plate--rings .xp-plate-field {
  background-image: repeating-radial-gradient(circle at 78% 26%, var(--xp-pat) 0 1px, transparent 1px 19px);
}
.xp-plate--rails .xp-plate-field {
  background-image:
    repeating-linear-gradient(90deg, var(--xp-pat2) 0 3px, transparent 3px 30px),
    linear-gradient(90deg, transparent 30%, var(--xp-pat2) 30% 31.4%,
                    transparent 31.4% 68.6%, var(--xp-pat2) 68.6% 70%, transparent 70%);
  transform: perspective(200px) rotateX(46deg) scale(1.5);
  transform-origin: bottom center;
}
.xp-plate--chevron .xp-plate-field {
  background-image:
    repeating-linear-gradient(45deg,  var(--xp-pat) 0 3px, transparent 3px 20px),
    repeating-linear-gradient(-45deg, var(--xp-pat) 0 3px, transparent 3px 20px);
  background-size: 50% 100%, 50% 100%;
  background-position: 0 0, 100% 0;
  background-repeat: repeat-y, repeat-y;
}
.xp-plate--arcs .xp-plate-field {
  background-image: repeating-radial-gradient(circle at 96% 104%, transparent 0 17px, var(--xp-pat) 17px 18.4px);
}
.xp-plate--dots .xp-plate-field {
  background-image: radial-gradient(circle, var(--xp-pat2) 1.5px, transparent 1.8px);
  background-size: 15px 15px;
}
.xp-plate--meridians .xp-plate-field {
  background-image:
    repeating-radial-gradient(circle at 76% 50%, transparent 0 13px, var(--xp-pat) 13px 14.2px),
    repeating-linear-gradient(0deg, var(--xp-pat) 0 1px, transparent 1px 17px);
}

/* ── Phone: the plate as a rail ─────────────────────────────── */
@media (max-width: 767.98px) {

  /* ── The plate as a rail ──────────────────────────────────
     Not the 16:9 composition cropped to 116px — that is what sliced "Police" and
     "Sub Inspector" through the letterforms. The code is set for this width and
     centred in it, the tier drops to the edge tick plus a small outline, and the
     emblem sinks to the bottom as texture. Same DOM, different arrangement. */
  .xp-plate-card--responsive .xp-plate {
    --xp-pad: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; min-height: 118px;
    background: linear-gradient(158deg, var(--xp-c1) 0%, var(--xp-c2) 84%);
  }
  .xp-plate-card--responsive .xp-plate-wash { background: linear-gradient(180deg, rgba(4,8,16,.30) 0%, rgba(4,8,16,.52) 100%); }
  .xp-plate-card--responsive .xp-plate-glow { width: 190%; right: -45%; top: -60%; opacity: .30; }
  .xp-plate-card--responsive .xp-plate-emblem {
    width: 88%; right: auto; left: 6%; top: auto; bottom: -30%;
    transform: none; opacity: .20;
  }
  .xp-plate-card--responsive .xp-plate-inner {
    height: auto; padding: var(--xp-pad); gap: 5px;
    align-items: center; justify-content: center;
  }
  .xp-plate-card--responsive .xp-plate-tier {
    order: 2; font-size: 8px; padding: 2.5px 7px; letter-spacing: .1em;
    color: var(--xp-tc); background: rgba(3,7,14,.42);
    border: 1px solid var(--xp-tc); box-shadow: none; align-self: center;
  }
  .xp-plate-card--responsive .xp-plate-tier i { display: none; }
  .xp-plate-card--responsive .xp-plate-id { order: 1; max-width: 100%; align-items: center; gap: 0; }
  .xp-plate-card--responsive .xp-plate-code {
    font-size: 19px; text-align: center; overflow-wrap: anywhere;
    text-shadow: 0 2px 10px rgba(2,6,14,.5);
  }
  .xp-plate-card--responsive .xp-plate-code.is-long  { font-size: 14px; }
  .xp-plate-card--responsive .xp-plate-code.is-xlong { font-size: 11.5px; letter-spacing: -.01em; }
  /* The board name wraps to three lines in 108px and the rule has nothing to sit
     under once it is gone. The card title beside the rail names the pack anyway. */
  .xp-plate-card--responsive .xp-plate-full,
  .xp-plate-card--responsive .xp-plate-rule { display: none; }

  /* No hover on a phone, so the reveal moves into the body rather than being lost
     with the interaction that used to trigger it. */
  .xp-plate-card--responsive .xp-plate-peek { display: none; }
  .xp-plate-card--responsive .xp-plate-subs-body {
    position: static; width: auto; height: auto; margin: 0; overflow: visible;
    clip: auto; white-space: normal;
    display: flex; flex-wrap: wrap; gap: 5px;
  }

  /* ── Shells that keep the desktop card on a phone ─────────
     Two of them put the cover back above the body instead of beside it: the
     marketplace homepage template, and the Android app shell on the auth-layout
     outer pages (see homepage-templates.css §3d and clients/practicenexa.css §5).
     A cover above the body is a picture again, not a rail, so the plate goes back
     to its wide composition.

     This cancellation lives here, beside the rail it cancels, rather than once in
     each of those two sheets — the shells disagree about the card, not about how a
     plate is built, and two copies would drift the first time the plate changes.
     It is load-bearing beyond composition: the shared rule above gives the cover
     `height:100%`, which inside a flex-column card resolves to zero now that there
     is no <img> left to give it intrinsic height. */
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate {
    display: block; min-height: 0; height: auto; aspect-ratio: 16 / 9;
    background: linear-gradient(118deg, var(--xp-c1) 0%, var(--xp-c2) 78%);
    --xp-pad: 14px;
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-wash,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-wash {
    background: linear-gradient(96deg, rgba(4,8,16,.62) 0%, rgba(4,8,16,.34) 46%, rgba(4,8,16,0) 82%);
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-glow,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-glow {
    width: 150%; right: -58%; top: -72%; opacity: .24;
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-emblem,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-emblem {
    width: 47%; left: auto; right: -7%; top: 50%; bottom: auto;
    transform: translateY(-50%); opacity: .30;
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-inner,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-inner {
    height: 100%; align-items: stretch; justify-content: space-between;
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-tier,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-tier {
    order: 0; align-self: flex-start; font-size: 9.5px; padding: 4px 10px 4px 8px;
    color: #fff; background: var(--xp-tc); border: 0;
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-tier i,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-tier i {
    display: block;
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-id,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-id {
    order: 0; align-items: flex-start; gap: 2px;
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-code,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-code {
    font-size: 30px; text-align: left;
  }
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-full,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-full,
  body.hn-app-shell[data-hn-template="marketplace"] .xp-plate-card--responsive .xp-plate-rule,
  body.hn-app-shell.au-body .xp-plate-card--responsive .xp-plate-rule {
    display: block;
  }

}

/* ── Reduced motion ─────────────────────────────────────────
   The reveal still reveals — it just stops travelling. Suppressing it outright
   would take the subject split away from the readers most likely to want it
   without a hover to hunt for. */
@media (prefers-reduced-motion: reduce) {
  .xp-plate-field,
  .xp-plate-glow,
  .xp-plate-emblem,
  .xp-plate-rule,
  .xp-plate-peek { transition: none; }
  .xp-plate-peek { transform: none; }
  .xp-plate-card:hover .xp-plate-emblem,
  .xp-plate-card:focus-within .xp-plate-emblem { transform: translateY(-50%); }
  .xp-plate-card:hover .xp-plate-glow,
  .xp-plate-card:focus-within .xp-plate-glow { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   The notes volume — .xp-plate--book
   ═══════════════════════════════════════════════════════════
   Study material is bought by the same student, for the same exam, from the
   same shelf as an exam package, so it keeps the family's ground, accent,
   field pattern and emblem: the SSC notes and the SSC pack are recognisably
   one shop.

   What it must NOT do is look like the pack. A pack and a series appear side
   by side on the dashboard and in search, and a 9.5px tier pill is not enough
   to tell a student that one is exams and the other is reading. So the same
   ingredients are composed as a bound volume instead: a stitched spine down
   the left carrying the tier tick, page edges on the trailing edge, and an
   OUTLINED wafer where the pack has a FILLED pill. Filled vs outlined is the
   difference the eye catches before it reads either word.

   Nothing here is family-specific — adding an exam is still one row in
   ExamCatalogue::plateArt() and no edit to this file.

   Rendered by getStudyPlateHtml() in Include/inc_plate_markup.php. */

/* The spine occupies the left edge, so the type has to start clear of it.
   Padding rather than a margin on .xp-plate-id: the wafer is in the same
   flex column and would otherwise sit over the stitching. */
.xp-plate--book .xp-plate-inner { padding-left: calc(var(--xp-pad) + 16px); }

.xp-plate-spine {
  position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 0 100%),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.16) 9px 10px);
  border-right: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}
/* The tier tick lives on the spine here rather than as its own element: on a
   volume the coloured band IS the binding, and a separate 4px bar beside a
   20px spine reads as two unrelated rules. */
.xp-plate-spine::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--xp-tc);
}

.xp-plate-leaves {
  position: absolute; z-index: 2; right: 0; top: 12%; bottom: 12%; width: 9px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.xp-plate-wafer {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--xp-ac); background: rgba(3,7,14,.42);
  border: 1px solid var(--xp-ac); border-radius: 3px;
  padding: 3.5px 8px; line-height: 1;
}
.xp-plate-wafer .material-symbols-outlined { font-size: 12px; font-variation-settings: 'wght' 600; }
/* The examiner shell has Font Awesome and no Material Symbols font, so a
   ligature span there prints its own name as text. See StudyMaterialCard. */
.xp-plate-wafer .fa { font-size: 10px; }

/* One step down from the pack code: the volume gives up 20px to the spine and
   another 9px to the leaves, and the count sits in the lower right. */
.xp-plate--book .xp-plate-code { font-size: clamp(20px, 2.7vw, 34px); }

/* What a notes buyer actually wants off the cover. A pack plate has no
   equivalent line — its count is exams, and it lives in the card body. */
.xp-plate-count {
  position: absolute; z-index: 2; right: 16px; bottom: 12px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .07em;
  color: rgba(255,255,255,.72); text-align: right; line-height: 1.5;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.xp-plate-count b { color: #fff; font-weight: 700; }
/* The reveal covers the lower half; the count would show through its scrim. */
.xp-plate-card:hover .xp-plate-count,
.xp-plate-card:focus-within .xp-plate-count { opacity: 0; }
.xp-plate-count { transition: opacity var(--xp-fast) var(--xp-ease); }

/* ── Phone: the volume as a rail ────────────────────────────
   Same reasoning as the pack rail above — the composition is rearranged, not
   cropped. The spine narrows to the tier tick it carries and the leaves go:
   at 118px there is no room for an edge that means nothing on its own. */
@media (max-width: 767.98px) {
  .xp-plate-card--responsive .xp-plate--book .xp-plate-inner { padding-left: var(--xp-pad); }
  .xp-plate-card--responsive .xp-plate-spine { width: 4px; background: none; border-right: 0; }
  .xp-plate-card--responsive .xp-plate-leaves,
  .xp-plate-card--responsive .xp-plate-count { display: none; }
  .xp-plate-card--responsive .xp-plate-wafer {
    order: 2; align-self: center; font-size: 8px; padding: 2.5px 7px; letter-spacing: .1em;
  }
}