/* ===========================================================================
   best-plotter-printers — page-scoped design language.
   Loaded only on that page (PP_Best_Page::assets), so nothing here can leak
   into the shop or the other silos.

   Palette: the brand navy stays the ground; four category accents carry the
   four answers the page exists to give, and a warm ochre marks anything that is
   our judgement rather than a measurement.
   =========================================================================== */
/* This file is enqueued ONLY on /best-plotter-printers/ (PP_Best_Page::assets),
   so the tokens live on :root. They were first scoped to a
   .page-best-plotter-printers body class — WordPress does not emit slug classes
   for pages, so every var() was undefined and each declaration using one was
   dropped, which is why the cards rendered as bare text. */
:root {
  --bx-ink: #101826;
  --bx-soft: #4d5a6d;
  --bx-line: #dfe5ee;
  --bx-surface: #fff;
  --bx-tint: #f5f8fc;
  --bx-navy: #12294d;
  --bx-a: #1B5FAD;   /* 24" CAD  — blue   */
  --bx-b: #0f766e;   /* 36" CAD  — teal   */
  --bx-c: #7c3aed;   /* MFP      — violet */
  --bx-d: #b45309;   /* colour   — ochre  */
  --bx-radius: 14px;
  --bx-shadow: 0 1px 2px rgba(16,24,38,.05), 0 8px 24px -12px rgba(16,24,38,.12);
}

/* --- band shell ---------------------------------------------------------- */
.pp-bx { padding: clamp(2.5rem, 5vw, 4rem) 1.25rem; }
.pp-bx-in { max-width: 1140px; margin: 0 auto; }
.pp-bx--verdict { background: linear-gradient(180deg, var(--bx-tint), var(--bx-surface)); border-bottom: 1px solid var(--bx-line); }
.pp-bx--matcher { background: var(--bx-navy); color: #eef3fa; }
.pp-bx-kicker {
  margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bx-a);
}
.pp-bx--matcher .pp-bx-kicker { color: #7fb2f0; }
.pp-bx-h { margin: 0 0 .4rem; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.15; }
.pp-bx-lead { margin: 0 0 1.6rem; max-width: 60ch; color: var(--bx-soft); }
.pp-bx--matcher .pp-bx-lead { color: #b9c8dc; }
.pp-bx--matcher .pp-bx-h { color: #fff; }   /* the theme h2 colour is ink-dark: unreadable on navy */

/* --- verdict cards ------------------------------------------------------- */
.pp-vgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pp-vc {
  display: grid; gap: .5rem; padding: 1.1rem 1.1rem 1rem; text-decoration: none;
  background: var(--bx-surface); border: 1px solid var(--bx-line);
  border-top: 3px solid var(--accent, var(--bx-a));
  border-radius: var(--bx-radius); box-shadow: var(--bx-shadow);
  color: var(--bx-ink); transition: transform .18s ease, box-shadow .18s ease;
}
.pp-vc:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,24,38,.06), 0 18px 40px -16px rgba(16,24,38,.24); }
.pp-vc--a { --accent: var(--bx-a); } .pp-vc--b { --accent: var(--bx-b); }
.pp-vc--c { --accent: var(--bx-c); } .pp-vc--d { --accent: var(--bx-d); }
.pp-vc-cat { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pp-vc-img { display: block; height: 96px; }
.pp-vc-img img { width: 100%; height: 100%; object-fit: contain; }
.pp-vc-name { font-family: var(--wp--preset--font-family--display); font-weight: 650; line-height: 1.25; }
.pp-vc-why { font-size: .86rem; color: var(--bx-soft); line-height: 1.45; }
.pp-vc-foot { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: .2rem; padding-top: .6rem; border-top: 1px solid var(--bx-line); }
.pp-vc-score { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 1.15rem; color: var(--accent); }
.pp-vc-score small { font-size: .62rem; opacity: .55; font-weight: 500; }
.pp-vc-price { font-weight: 650; font-size: .92rem; }

/* --- matcher ------------------------------------------------------------- */
.pp-mform { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1.5rem; }
.pp-mq { border: 0; margin: 0; padding: 0; }
.pp-mq legend { padding: 0 0 .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #b9c8dc; }
.pp-mopts { display: flex; flex-wrap: wrap; gap: .4rem; }
.pp-mopt {
  appearance: none; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600;
  padding: .5em .9em; border-radius: 999px; color: #eef3fa;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.pp-mopt:hover { background: rgba(255,255,255,.13); }
.pp-mopt[aria-pressed="true"] { background: #fff; color: var(--bx-navy); border-color: #fff; }
.pp-mopt:focus-visible { outline: 2px solid #7fb2f0; outline-offset: 2px; }

.pp-mout { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: var(--bx-radius); padding: 1.1rem; min-height: 120px; }
.pp-mout-idle { margin: 0; color: #9fb3cc; font-size: .92rem; }
.pp-mpanel-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .15rem; font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; font-weight: 650; }
.pp-mpanel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot, #7fb2f0); }
.pp-mpanel-dot--a { --dot: #7fb2f0; } .pp-mpanel-dot--b { --dot: #5eead4; }
.pp-mpanel-dot--c { --dot: #c4b5fd; } .pp-mpanel-dot--d { --dot: #fcd34d; }
.pp-mpanel-sub { margin: 0 0 .9rem; color: #b9c8dc; font-size: .9rem; }
.pp-mpanel-wrong { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px dashed rgba(255,255,255,.22); font-size: .86rem; color: #cfe0f2; }
.pp-mpanel-wrong strong { color: #fcd34d; }

.pp-mr { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 10px; text-decoration: none; color: #eef3fa; transition: background .15s ease; }
.pp-mr:hover { background: rgba(255,255,255,.09); }
.pp-mr + .pp-mr { margin-top: .2rem; }
.pp-mr-rank { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); font-family: var(--wp--preset--font-family--mono); font-size: .72rem; font-weight: 700; }
.pp-mr-img { flex: 0 0 auto; width: 54px; height: 40px; object-fit: contain; background: #fff; border-radius: 6px; }
.pp-mr-body { flex: 1 1 auto; min-width: 0; }
.pp-mr-name { display: block; font-weight: 650; line-height: 1.25; }
.pp-mr-meta { display: block; font-size: .8rem; color: #a9bdd6; font-variant-numeric: tabular-nums; }
.pp-mr-go { flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: #7fb2f0; white-space: nowrap; }

/* --- callout ------------------------------------------------------------- */
.pp-cal {
  margin: 1.4rem 0; padding: 1.1rem 1.2rem; border-radius: var(--bx-radius);
  background: var(--bx-tint); border: 1px solid var(--bx-line); border-left: 3px solid var(--bx-b);
  max-width: 39rem;
}
.pp-cal-h { margin: 0 0 .7rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bx-b); }
.pp-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.pp-chip { font-size: .78rem; font-weight: 600; padding: .28em .7em; border-radius: 999px; background: var(--bx-surface); border: 1px solid var(--bx-line); color: var(--bx-soft); }
.pp-cal-note { margin: .8rem 0 0; font-size: .84rem; color: var(--bx-soft); }

/* --- motion -------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pp-vc:hover { transform: none; }
}

/* The whole-page layout that used to live here — band grids, figure columns,
   callout placement, card and rail restyling — is now owned by sheet-set.css and
   applies to all 36 silo pages. Keeping a second copy here meant two grids
   fighting over the same bands, which drew the plate on top of the prose. What
   remains below is only what is unique to this page: the verdict cards, the
   matcher, and the scoring callout. */

/* ---------------------------------------------------------------------------
   Sheet Set alignment (Wave 4). This page's matcher shipped before the site-wide
   language and kept a navy ground — the one dark band left on any silo page, and
   the thing the brief rejected. Same component, repainted as a sheet.
   --------------------------------------------------------------------------- */
.pp-bx--matcher { background:#FFFFFF; color:#0E1622; border-block:1px solid #C3CEDC; }
.pp-bx--matcher .pp-bx-h { color:#0E1622; font-family:var(--wp--preset--font-family--display); text-transform:uppercase; }
.pp-bx--matcher .pp-bx-kicker { color:#1B3A8C; }
.pp-bx--matcher .pp-bx-lead { color:#3E4A5C; }
.pp-mq legend { color:#6B7A8D; }
.pp-mopt { background:#fff; color:#0E1622; border:1px solid #C3CEDC; }
.pp-mopt:hover { border-color:#1B3A8C; color:#1B3A8C; background:#fff; }
.pp-mopt[aria-pressed="true"] { background:#1B3A8C; border-color:#1B3A8C; color:#fff; }
.pp-mout { background:#F7F9FB; border:1px solid #C3CEDC; border-radius:2px; }
.pp-mout-idle { color:#6B7A8D; }
.pp-mpanel-h { color:#0E1622; }
.pp-mpanel-sub { color:#3E4A5C; }
.pp-mpanel-wrong { color:#3E4A5C; border-top:1px dashed #C3CEDC; }
.pp-mpanel-wrong strong { color:#8A5A12; }
.pp-mr { color:#0E1622; }
.pp-mr:hover { background:#EDF0F4; }
.pp-mr-rank { background:#EDF0F4; color:#0E1622; }
.pp-mr-meta { color:#6B7A8D; }
.pp-mr-go { color:#1B3A8C; }
.pp-mpanel-dot--a{--dot:#1B3A8C}.pp-mpanel-dot--b{--dot:#0E6B62}
.pp-mpanel-dot--c{--dot:#6B4FA8}.pp-mpanel-dot--d{--dot:#A8532B}