/* Top Bins (codename: Compass) — semi-industrial tactical playbook.
 *
 * Aesthetic: white canvas framed by black structures with a punchy
 * pitch-grass green for actionable UI and tactical movement cues.
 *
 * Surface model:
 *   - Body is Crisp White (#FFFFFF). Default text is Industrial
 *     Black (#000000); secondary copy uses a steel-gray.
 *   - Cards (.pm-card / .modal-content / Bootstrap .card) are white
 *     with a 1px Light Stadium Gray (#EFEFEF) border.
 *   - The top header (.pm-navbar) and the bottom footer
 *     (.pm-footer) are both white surfaces, each carrying a
 *     grass-green hairline (.pm-navbar's runs along its bottom
 *     edge, .pm-footer's runs along its top edge). The remaining
 *     dark chrome lives in the secondary-nav strip (.bg-black /
 *     .bg-dark). Inside those dark surfaces the muted / chrome /
 *     border tokens flip to "light on dark" via the context block
 *     below, so existing rules using var(--pm-muted) etc. keep
 *     working without a per-context rewrite.
 *   - The pitch surface (.pitch-bg) keeps the classic mown-grass
 *     green so the playing field reads as a real pitch from a top-
 *     down camera. The frame around it (.pm-pitch-frame /
 *     .scenario-editor__pitch) and the off-pitch margin
 *     (.pitch-frame-bg) are white, with a 1px Pitch Grass Green
 *     hairline outlining the editor frame — the green pitch +
 *     green outline are the only chromatic notes on the board.
 *   - Pitch Grass Green (--pm-grass / --pm-accent) is reserved for
 *     CTAs, link hovers, and the pitch-frame border — the brand's
 *     single "go signal" outside the playing surface.
 *
 * Class names + token names stay .pm-* / Compass-rooted so a future
 * rename only touches strings + colours, not selectors. */

:root {
  /* Page + ink — Crisp White body, Industrial Black text. */
  --pm-page: #FFFFFF;
  --pm-ink: #000000;
  --pm-ink-muted: #4a4a4a;

  /* Light-card surface tokens. */
  --pm-card-bg: #FFFFFF;
  --pm-card-border: #EFEFEF;
  --pm-card-border-strong: #d6d6d6;

  /* Chrome surface (navbar / footer / secondary nav strip) — solid
     Industrial Black. The .pm-panel / .pm-void / .pm-black aliases
     below all map here so existing dark-surface rules keep working. */
  --pm-black: #000000;
  --pm-void: #0a0a0a;
  --pm-panel: #080808;
  --pm-panel-2: #1a1a1a;

  /* Tactical board — Dark Steel Gray, used by .pitch-bg and the
     editor's pitch frame so the in-game canvas reads as a digital
     whiteboard rather than mown grass. */
  --pm-steel: #222222;
  --pm-stadium: #EFEFEF;

  /* Brand accent — Pitch Grass Green. The neon variant is the
     vibrant interactive cue (CTA bg, glow, focus ring); the deeper
     "grass" variant is the print-grade tactical-arrow / outline
     colour. */
  --pm-accent: #39FF14;
  --pm-grass: #2EAD49;
  --pm-accent-dim: #2EAD49;
  --pm-danger-line: #ff4d4d;

  /* Borders + muted text default to "dark on light" tones for the
     content area. Inside the black chrome they get re-declared to
     light tones via the context block below. */
  --pm-border: var(--pm-card-border);
  --pm-border-strong: var(--pm-card-border-strong);
  --pm-chrome: var(--pm-ink);
  --pm-muted: var(--pm-ink-muted);
  --pm-text: var(--pm-ink);

  --bs-primary: var(--pm-grass);
  --bs-primary-rgb: 46, 173, 73;
  --bs-body-bg: var(--pm-page);
  --bs-body-color: var(--pm-ink);
  --bs-secondary-color: var(--pm-ink-muted);
  --bs-border-color: var(--pm-card-border-strong);
  --bs-dark-rgb: 0, 0, 0;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;

  /* Default link colour is the print-grade grass green; hover
     brightens to the neon variant for that "active" feel. */
  --bs-link-color: var(--pm-grass);
  --bs-link-color-rgb: 46, 173, 73;
  --bs-link-hover-color: var(--pm-accent);
  --bs-link-hover-color-rgb: 57, 255, 20;
}

/* Re-declare context-aware tokens inside the dark chrome surfaces.
   Anything inside .bg-black / .bg-dark sees the "light on dark"
   variants of muted / chrome / border / body-color tokens — so
   existing rules using var(--pm-muted) etc. inside those surfaces
   render correctly without per-context rewrites. The top .pm-navbar,
   the bottom .pm-footer, the .pm-pitch-frame, and the .scenario-editor
   workshop are intentionally NOT in this list — they are light
   surfaces on the white canvas. */
.bg-black,
.bg-dark,
.pm-iq-badge {
  --pm-chrome: #f4f4f4;
  --pm-muted: #b8b8b8;
  --pm-text: #f4f4f4;
  --pm-border: rgba(255, 255, 255, 0.10);
  --pm-border-strong: rgba(255, 255, 255, 0.20);
  --bs-body-color: #f4f4f4;
  --bs-secondary-color: #b8b8b8;
  --bs-tertiary-color: #b8b8b8;
  color: var(--pm-chrome);
}

.btn,
.card,
.modal-content,
.modal-dialog,
.badge,
.alert,
.dropdown-menu,
.form-control,
.form-select,
.input-group-text {
  border-radius: 0 !important;
}

/* Bootstrap "white text" / "light link" / "outline-light" utilities
   were authored for a dark theme. On the Crisp White body they need
   to flip to Industrial Black ink. Inside the dark chrome (navbar /
   footer / .bg-dark / .bg-black) they stay white. */
body.pm-app .text-white {
  color: var(--pm-ink) !important;
}
body.pm-app .bg-dark .text-white,
body.pm-app .bg-black .text-white {
  color: #ffffff !important;
}

body.pm-app .link-light {
  color: var(--pm-ink) !important;
}
body.pm-app .link-light:hover,
body.pm-app .link-light:focus {
  color: var(--pm-grass) !important;
}
body.pm-app .bg-dark .link-light,
body.pm-app .bg-black .link-light {
  color: #f4f4f4 !important;
}
body.pm-app .bg-dark .link-light:hover,
body.pm-app .bg-dark .link-light:focus,
body.pm-app .bg-black .link-light:hover,
body.pm-app .bg-black .link-light:focus {
  color: var(--pm-grass) !important;
}

body.pm-app .btn-outline-light {
  --bs-btn-color: var(--pm-ink);
  --bs-btn-border-color: var(--pm-ink);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--pm-ink);
  --bs-btn-hover-border-color: var(--pm-ink);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--pm-ink);
  --bs-btn-active-border-color: var(--pm-ink);
  --bs-btn-disabled-color: var(--pm-ink);
  --bs-btn-disabled-border-color: var(--pm-ink);
}
body.pm-app .bg-dark .btn-outline-light,
body.pm-app .bg-black .btn-outline-light {
  --bs-btn-color: #f4f4f4;
  --bs-btn-border-color: #f4f4f4;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f4f4f4;
  --bs-btn-hover-border-color: #f4f4f4;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f4f4f4;
  --bs-btn-active-border-color: #f4f4f4;
  --bs-btn-disabled-color: #f4f4f4;
  --bs-btn-disabled-border-color: #f4f4f4;
}

html {
  scroll-behavior: smooth;
}

body.pm-app {
  font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  background-color: var(--pm-page);
  color: var(--bs-body-color);
  min-height: 100vh;
  /* Faint Industrial-Black grid + a soft grass-green hot-spot that
     fades down from below the navbar — gives the white canvas a
     "tactical playbook page" texture without competing with the
     content. */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(46, 173, 73, 0.08), transparent 55%);
  background-size: 56px 56px, 56px 56px, auto;
  background-attachment: fixed;
}

/* Display headings — Bebas Neue gives the bold, condensed,
   stadium-scoreboard look the brief calls for. Always uppercase
   for section titles. */
.pm-display {
  font-family: "Bebas Neue", "Oswald", "Impact", "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pm-mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Top header — Crisp White surface with a thin Pitch Grass Green
   accent stripe along its bottom edge. The wordmark + auth
   affordances (Sign in / Sign up / Sign out) sit on this white
   band; the secondary nav strip below it stays dark, giving the
   page a clear "header → sub-nav → content" rhythm. */
.pm-navbar {
  background: var(--pm-page) !important;
  border-bottom: 1px solid var(--pm-grass) !important;
}

.pm-navbar-brand {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.pm-brand-wordmark {
  font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
  font-weight: 400;
  font-size: clamp(1.30rem, 4.5vw, 1.7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

/* Bullseye mark sitting to the left of the TOP BINS wordmark.
   Sized in em so it tracks the wordmark's clamped font-size and
   stays proportional across breakpoints. */
.pm-brand-mark {
  display: block;
  height: 1.5em;
  width: auto;
  margin-right: 0.2em;
}

.pm-navbar-brand:hover .pm-brand-mark {
  filter: brightness(1.06);
}

/* Bebas Neue's glyphs sit high in their line-box, so even with
   `align-items: center` on the flex parent, the wordmark reads as
   slightly above the bullseye's geometric centre. A small
   translateY drops the visual centre of the text onto the centre
   of the disc. */
.pm-brand-pos,
.pm-brand-mas {
  transform: translateY(0.08em);
}

.pm-brand-pos {
  color: var(--pm-ink);
}

.pm-brand-mas {
  color: var(--pm-grass);
  margin-left: 0.28em;
}

.pm-navbar-brand:hover .pm-brand-pos {
  color: var(--pm-grass);
}

.pm-navbar-brand:hover .pm-brand-mas {
  filter: brightness(1.06);
}

.pm-iq-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--pm-panel) !important;
  color: var(--pm-accent) !important;
  border: 1px solid var(--pm-border-strong);
  padding: 0.5rem 0.75rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pm-tracking {
  letter-spacing: 0.14em;
}

.pm-footer {
  border-top: 1px solid var(--pm-grass) !important;
  background: var(--pm-page);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pm-ink-muted) !important;
}

.pm-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pm-border-strong), transparent);
  margin: 2rem 0;
}

.pm-card {
  background: var(--pm-card-bg) !important;
  border: 1px solid var(--pm-card-border) !important;
  color: var(--pm-ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04),
              0 8px 24px rgba(0, 0, 0, 0.06);
}

.pm-card .card-footer {
  border-top: 1px solid var(--pm-card-border) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: var(--pm-ink);
}

/* Tables placed inside .pm-card. Bootstrap's CSS variable contract
   for the .table component lets us repaint the surface without
   rewriting any view markup — we just override the per-table tokens
   so the rows pick up the white card surface, black ink, light-gray
   dividers and a grass-green-tinted hover row. */
.pm-card .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--pm-ink);
  --bs-table-border-color: var(--pm-card-border);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.025);
  --bs-table-striped-color: var(--pm-ink);
  --bs-table-hover-bg: rgba(46, 173, 73, 0.08);
  --bs-table-hover-color: var(--pm-ink);
  --bs-table-active-bg: rgba(46, 173, 73, 0.14);
  --bs-table-active-color: var(--pm-ink);
  color: var(--pm-ink);
}
.pm-card .table > thead {
  background: rgba(0, 0, 0, 0.04);
  color: var(--pm-ink-muted);
}
.pm-card .table > thead th {
  border-bottom: 1px solid var(--pm-card-border-strong);
  color: var(--pm-ink-muted);
  font-weight: 600;
}

.pm-format-num {
  font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--pm-chrome);
  letter-spacing: -0.04em;
}

.pm-format-num span {
  color: var(--pm-accent);
}

.pm-hero-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pm-muted);
}

/* Page header — kicker / title / lead + a right-aligned action row.
   The actions sit on their own row ABOVE the title block so multi-
   button headers (e.g. "My custom courses" + "Assign from catalogue"
   on /team/courses) never get squished against a long title or
   description. The action row collapses to start-aligned wrap on
   narrow screens so the buttons stay readable on phones. */
.pm-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pm-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.pm-page-header__actions:empty {
  display: none;
}

@media (max-width: 575.98px) {
  .pm-page-header__actions {
    justify-content: flex-start;
  }
}

.pm-lead-muted {
  color: var(--pm-muted);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.pm-panel-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pm-muted);
  margin-bottom: 0.75rem;
}

.pm-chip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--pm-border-strong);
  background: var(--pm-void);
  color: var(--pm-chrome);
}

.pm-chip--accent {
  border-color: rgba(57, 255, 20, 0.45);
  color: var(--pm-accent);
}

.pm-chip--warn {
  border-color: rgba(255, 200, 80, 0.45);
  color: #ffc857;
}

.pm-role-callout {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid var(--pm-card-border) !important;
  color: var(--pm-ink) !important;
  border-left: 3px solid var(--pm-grass) !important;
}

.pm-team-panel {
  padding: 1rem 1rem 1rem 1.1rem;
  border: 1px solid var(--pm-card-border);
  background: var(--pm-card-bg);
  color: var(--pm-ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.pm-team-panel strong.text-danger {
  color: #ff6b6b !important;
}

.pm-phase-line .pm-chip {
  vertical-align: middle;
}

.pitch-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.pitch-label-yours {
  fill: rgba(57, 255, 20, 0.92);
  font-size: 2.6px;
}

.pitch-label-theirs {
  fill: rgba(255, 80, 80, 0.85);
  font-size: 2.6px;
}

.pm-role-callout strong {
  color: var(--pm-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
}

.pm-hint {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--pm-muted);
}

/* Tactical-board frame — sits flush around the pitch SVG. The
   frame stays white (matching the rest of the page) with a thin
   grass-green border so the board reads as a deliberate playbook
   page on the white canvas, with the green pitch surface and the
   green hairline as the only chromatic notes. */
.pm-pitch-frame {
  background: var(--pm-page);
  border: 1px solid var(--pm-grass);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Primary CTA — semi-industrial tactical button. The brief calls
   for "Dark Steel Gray (#222222) or black background, bordered
   tightly in Pitch Grass Green, featuring the text in white or
   green". We pick the green-on-steel combo so the button reads
   as the brand's single "go signal" against the white canvas. On
   hover it darkens to pure black and the border + text brighten
   to the neon grass variant for that "lit-up" feel. */
.btn-primary {
  --bs-btn-bg: var(--pm-steel);
  --bs-btn-border-color: var(--pm-grass);
  --bs-btn-color: var(--pm-grass);
  --bs-btn-hover-bg: var(--pm-ink);
  --bs-btn-hover-border-color: var(--pm-accent);
  --bs-btn-hover-color: var(--pm-accent);
  --bs-btn-active-bg: var(--pm-ink);
  --bs-btn-active-border-color: var(--pm-accent);
  --bs-btn-active-color: var(--pm-accent);
  --bs-btn-disabled-bg: var(--pm-steel);
  --bs-btn-disabled-border-color: var(--pm-grass);
  --bs-btn-disabled-color: var(--pm-grass);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0.65rem 1rem;
  border-width: 2px;
}

.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-danger,
.btn-outline-primary {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  border-width: 1px;
}

/* btn-lg sizing for the brand outline buttons — the brief's hero
   CTA uses .btn-lg, but Bootstrap's default .btn-lg pads + sizes
   it back up away from the rest of our industrial typography.
   This bumps padding and tracking proportionally so the large
   variant still reads like the brand's other buttons. */
.btn-lg.btn-outline-secondary,
.btn-lg.btn-outline-light,
.btn-lg.btn-outline-dark,
.btn-lg.btn-outline-danger,
.btn-lg.btn-outline-primary,
.btn-lg.btn-primary {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  padding: 0.85rem 1.4rem;
}

.btn-outline-secondary {
  --bs-btn-color: var(--pm-ink);
  --bs-btn-border-color: var(--pm-card-border-strong);
  --bs-btn-hover-bg: var(--pm-ink);
  --bs-btn-hover-border-color: var(--pm-ink);
  --bs-btn-hover-color: #fff;
}

/* btn-outline-dark — the body-context outline button (e.g. the
   landing page's "Sign in"). Black border + black ink on the
   white canvas; on hover it fills with Industrial Black to match
   the navbar wordmark. */
.btn-outline-dark {
  --bs-btn-color: var(--pm-ink);
  --bs-btn-border-color: var(--pm-ink);
  --bs-btn-hover-bg: var(--pm-ink);
  --bs-btn-hover-border-color: var(--pm-ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--pm-ink);
  --bs-btn-active-border-color: var(--pm-ink);
  --bs-btn-active-color: #fff;
}
body.pm-app .bg-dark .btn-outline-secondary,
body.pm-app .bg-black .btn-outline-secondary {
  --bs-btn-color: #f4f4f4;
  --bs-btn-border-color: rgba(255, 255, 255, 0.30);
  --bs-btn-hover-bg: #f4f4f4;
  --bs-btn-hover-border-color: #f4f4f4;
  --bs-btn-hover-color: var(--pm-ink);
}

.modal-content {
  background: var(--pm-card-bg) !important;
  border: 1px solid var(--pm-card-border-strong) !important;
  color: var(--pm-ink);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}

.modal-header,
.modal-footer {
  border-color: var(--pm-card-border) !important;
}

.modal-title {
  font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: 0.95rem !important;
}

.text-muted {
  color: var(--pm-muted) !important;
}

.text-primary {
  color: var(--pm-accent) !important;
}

.display-5.pm-display,
.display-4.pm-display,
.display-3.pm-display {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Pitch SVG — birds-eye (top-down) view */
.pitch-svg {
  display: block;
  max-height: min(72vh, 540px);
  cursor: crosshair;
  touch-action: manipulation;
  user-select: none;
}

.pitch-frame-bg {
  fill: var(--pm-page);
}

/* Pitch grass — kept on the classic mown-green look. The brand
   accent (Pitch Grass Green) lives on the move-arrows + pulse
   ring; the actual playing surface stays the recognisable green
   players already associate with the game. The stroke runs along
   the green/white boundary as a clean dark outline so the white
   perimeter touchline (drawn on top of the pitch) reads against
   the grass and doesn't bleed into the white backdrop. */
.pitch-bg {
  fill: #2c8e3f;
  stroke: rgba(0, 0, 0, 0.65);
  stroke-width: 0.7;
  stroke-linejoin: round;
}

/* Alternating mown stripes overlay the base pitch */
.pitch-stripe-a {
  fill: rgba(255, 255, 255, 0.06);
  stroke: none;
}

.pitch-stripe-b {
  fill: rgba(0, 0, 0, 0.06);
  stroke: none;
}

.pitch-line {
  stroke: #ffffff;
  stroke-width: 0.48;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pitch-line-halfway {
  stroke-width: 0.52;
}

.pitch-spot {
  fill: #ffffff;
  stroke: none;
}

.pitch-post {
  fill: #ffffff;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 0.14;
  pointer-events: none;
}

.pitch-net {
  pointer-events: none;
}

/* "Your goal" / "Opponent goal" banners drawn in the top off-pitch
   margin. Colour-matched to the team gradients so the eye links each
   label to the correct goal at a glance. Tones tuned to read on the
   white backdrop. */
.pitch-goal-label {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--pm-ink);
  pointer-events: none;
}

.pitch-goal-label-your {
  fill: var(--pm-grass);
}

.pitch-goal-label-their {
  fill: #c9302c;
}

.pitch-shadow {
  fill: rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

/* Players + ball + result markers ---------------------------------- */

/* Numbered player tokens. The four "team" variants share the same
 * disc + number layout — colour and stroke only differ. Lime green for
 * teammates, red for opponents, orange for goalkeepers (so the GK reads
 * apart from the rest of their team), and a brighter lime for the
 * player themselves (with the "YOU" label). */
.pitch-player-disc {
  stroke-linejoin: round;
  stroke-width: 0.38;
}
.pitch-player-disc-teammate {
  fill: #39ff14;
  stroke: #0c4a06;
}
.pitch-player-disc-opponent {
  fill: #ff4d4d;
  stroke: #4a0a0a;
}
.pitch-player-disc-goalkeeper {
  fill: #ffa726;
  stroke: #5a3300;
}
/* Opposition goalkeeper — same orange fill as the team GK so a
 * keeper always reads as a keeper, but with the red-tinged opponent
 * stroke so the side they're on remains obvious. */
.pitch-player-disc-goalkeeper-opponent {
  fill: #ffa726;
  stroke: #4a0a0a;
}
/* The player's own marker reuses the regular teammate colour so it
 * blends visually with the rest of the side; the lime pulse-ring is
 * what tells them which disc is theirs. */
.pitch-player-disc-you {
  fill: #39ff14;
  stroke: #0c4a06;
  stroke-width: 0.38;
}
/* …unless their assigned role is goalkeeper, in which case it
 * matches the team-GK colour so the keeper area reads consistently. */
.pitch-player-disc-you-gk {
  fill: #ffa726;
  stroke: #5a3300;
  stroke-width: 0.38;
}

.pitch-player-number {
  fill: #0c2406;
  font-size: 2.4px;
  font-weight: 700;
  font-family: var(--bs-body-font-family, system-ui), sans-serif;
  pointer-events: none;
  user-select: none;
}
.pitch-player-number-opponent {
  fill: #2a0707;
}
.pitch-player-number-goalkeeper {
  fill: #2a1a00;
}
.pitch-player-number-goalkeeper-opponent {
  fill: #2a1a00;
}
.pitch-player-number-you {
  fill: #0c2406;
}
.pitch-player-number-you-gk {
  fill: #2a1a00;
}

/* Grass-green radar-pulse rings on the player-self marker — the
 * one distinguishing cue between the player and the rest of their
 * (lime) team. */
.pitch-marker-ring-you {
  stroke: #39ff14;
}

/* Dotted move-direction guide lines drawn from the player's start
 * position to each option. Kept in muted white so they read on the
 * green grass without overpowering the option discs. Pointer-events
 * stay off so they never intercept option clicks. */
.pitch-move-line {
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 0.32;
  stroke-dasharray: 0.9 0.9;
  stroke-linecap: round;
  fill: none;
  pointer-events: none;
}

/* === Legacy figure styles (kept for editor toolbar previews) ============ */
.pitch-figure-body {
  stroke-linejoin: round;
}

.pitch-figure-body-teammate {
  stroke: #042008;
  stroke-width: 0.32;
}

.pitch-figure-body-opponent {
  stroke: #2a0707;
  stroke-width: 0.32;
}

.pitch-figure-head {
  fill: #f3cfa3;
  stroke: rgba(70, 40, 20, 0.85);
  stroke-width: 0.22;
}

.pitch-figure-head-opponent {
  fill: #f3cfa3;
}

.pitch-ball-body {
  stroke: rgba(20, 20, 20, 0.85);
  stroke-width: 0.2;
}

.pitch-marker-body {
  stroke-linejoin: round;
}

.pitch-marker-body-guess {
  stroke: #0d2347;
  stroke-width: 0.35;
}

.pitch-marker-body-ideal {
  stroke: #3a2700;
  stroke-width: 0.35;
}

.pitch-marker-body-pending {
  stroke: #0d2347;
  stroke-width: 0.45;
}

.pitch-marker-pending {
  animation: pulse-pending 1.1s ease-in-out infinite;
}

.pitch-marker-ideal {
  animation: pulse-ideal 1.2s ease-in-out infinite;
}

.pitch-marker-ring {
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
  opacity: 0;
  animation: pulse-ring 1.4s ease-out infinite;
}

.pitch-marker-ring-ideal {
  stroke: #ffd54d;
}

.pitch-marker-ring-pending {
  stroke: #6eb8ff;
}

.pitch-marker-ring-delayed {
  animation-delay: -0.7s;
}

@keyframes pulse-ring {
  0% {
    r: 0.6;
    opacity: 0;
    stroke-width: 0.85;
  }
  10% {
    opacity: 1;
  }
  100% {
    r: 4.2;
    opacity: 0;
    stroke-width: 0.2;
  }
}

@keyframes pulse-pending {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(110, 184, 255, 0.65));
  }
  50% {
    opacity: 0.7;
    filter: drop-shadow(0 0 8px rgba(110, 184, 255, 0.55));
  }
}

@keyframes pulse-ideal {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 2.5px rgba(255, 213, 77, 0.75));
  }
  50% {
    opacity: 0.78;
    filter: drop-shadow(0 0 9px rgba(255, 213, 77, 0.6));
  }
}

.pm-confirm-ready {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 0 0 2px rgba(57, 255, 20, 0.35),
    0 0 18px rgba(57, 255, 20, 0.25);
}

/* === Multiple-choice option markers =================================== */

.pitch-option {
  cursor: pointer;
}

/* Suppress the browser's default focus rectangle on the option's
 * <g> wrapper. The element has tabindex="0" for keyboard access, but
 * after a mouse click Chrome/Edge on Windows draw a chunky white-filled
 * focus ring around the wrapper's bounding box — which looks like a
 * "white blob" sitting over the marker. We provide our own focus-visible
 * indicator below, so keyboard users still get a clear cue. */
.pitch-option,
.pitch-option:focus,
.pitch-option:focus-visible {
  outline: none;
}

.pitch-option .pitch-option-disc {
  stroke: #f2f7ff;
  stroke-width: 0.45;
  fill: #1f2d52;
  transition: fill 120ms ease, stroke 120ms ease, transform 120ms ease;
}

.pitch-option .pitch-option-letter {
  fill: #ffffff;
  font-size: 2.6px;
  font-weight: 700;
  font-family: var(--bs-body-font-family, system-ui), sans-serif;
  pointer-events: none;
  user-select: none;
}

.pitch-option-state-pending .pitch-option-disc {
  fill: #2f4ea8;
}

.pitch-option-state-pending:hover .pitch-option-disc,
.pitch-option-state-pending:focus-visible .pitch-option-disc {
  fill: #4a73d9;
  stroke: #ffffff;
  filter: drop-shadow(0 0 4px rgba(74, 115, 217, 0.55));
}

.pitch-option-state-selected .pitch-option-disc {
  fill: #6eb8ff;
  stroke: #ffffff;
  filter: drop-shadow(0 0 4px rgba(110, 184, 255, 0.65));
}

.pitch-option-state-missed {
  cursor: default;
}
.pitch-option-state-missed .pitch-option-disc {
  fill: #5a1a1a;
  stroke: #b94545;
  opacity: 0.85;
}
.pitch-option-state-missed .pitch-option-letter {
  fill: #ffd5d5;
}

.pitch-option-state-correct {
  cursor: default;
}
.pitch-option-state-correct .pitch-option-disc {
  fill: #ffd54d;
  stroke: #fff4a6;
  filter: drop-shadow(0 0 6px rgba(255, 213, 77, 0.7));
}
.pitch-option-state-correct .pitch-option-letter {
  fill: #3a2700;
}

/* === Outcome badge (gold / silver / none) =============================
 *
 * Tuned for the white surface. Saturated fills + dark ink so the medal
 * reads from across the room — the dark-surface pale-translucent
 * version it replaced was invisible against the white card body. */

.pm-outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.pm-outcome-badge i {
  font-size: 1.1rem;
}
.pm-outcome-gold {
  background: #fde68a;       /* amber-200 — rich, opaque medal fill */
  border-color: #b45309;     /* amber-700 — defined rim against white */
  color: #78350f;            /* amber-900 — high-contrast ink + icon */
}
.pm-outcome-silver {
  background: #e2e8f0;       /* slate-200 — silvered fill */
  border-color: #64748b;     /* slate-500 */
  color: #1e293b;            /* slate-800 */
}
.pm-outcome-none {
  background: #f1f5f9;       /* slate-100 — quiet neutral */
  border-color: #94a3b8;     /* slate-400 */
  color: #475569;            /* slate-600 */
}

/* Bootstrap's .text-warning is #ffc107 — pale enough on white that
 * gold accents (top-of-leaderboard rank, "+N IQ" pills, trophy icons)
 * wash out. Re-point at a deeper amber so those accents stay visibly
 * gold without becoming dark-yellow chrome. */
.text-warning {
  color: #b45309 !important; /* amber-700 */
}

.pm-result-panel {
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.03);
  color: var(--pm-ink);
  border: 1px solid var(--pm-card-border);
  border-left: 3px solid var(--pm-grass);
}

.pm-result-panel #result-stars {
  letter-spacing: 0.1em;
}

/* === Scenario editor (manager custom scenarios) =======================
   Shares the white-canvas surface model with the rest of the site —
   white card backgrounds, ink-on-white text, light gray borders, and
   the grass-green accent for the active tool / "You" pill / pitch
   frame. The pitch SVG itself keeps its mown-grass green so the
   board still reads as a real pitch from above. */

.scenario-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .scenario-editor { grid-template-columns: 1fr; }
}

/* Left column wrapper — holds the pitch on top of a two-column
   roster row (teammates | opponents). Lifts those two lists out
   of the right rail so the sidebar can stay focused on the
   pitch-action controls and the option-text authoring. */
.scenario-editor__pitch-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.scenario-editor__pitch {
    background: var(--pm-page);
    border: 1px solid var(--pm-grass);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 12px;
}
.scenario-editor__rosters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}
@media (max-width: 600px) {
    .scenario-editor__rosters { grid-template-columns: 1fr; }
}
.scenario-editor__sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.editor-toolbar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.editor-tool {
    background: var(--pm-stadium);
    border: 1px solid var(--pm-card-border-strong);
    color: var(--pm-ink);
    padding: 10px 8px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: left;
    line-height: 1.2;
}
.editor-tool:hover { border-color: var(--pm-grass); }
.editor-tool[aria-pressed="true"] {
    background: rgba(46, 173, 73, 0.08);
    border-color: var(--pm-grass);
    color: var(--pm-grass);
    box-shadow: inset 0 0 0 1px var(--pm-grass);
}
.editor-tool--danger[aria-pressed="true"] {
    background: rgba(217, 45, 57, 0.08);
    border-color: var(--pm-danger, #d92d39);
    color: var(--pm-danger, #d92d39);
    box-shadow: inset 0 0 0 1px var(--pm-danger, #d92d39);
}

.editor-status {
    border: 1px solid var(--pm-card-border-strong);
    background: var(--pm-card-bg);
    padding: 8px 12px;
    color: var(--pm-ink-muted);
    font-size: 12px;
    min-height: 38px;
}
.editor-status strong { color: var(--pm-ink); text-transform: none; letter-spacing: 0; }

.editor-section {
    border: 1px solid var(--pm-card-border-strong);
    background: var(--pm-card-bg);
    padding: 12px;
}
.editor-section h3 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pm-ink-muted);
}
.editor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.editor-list li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    align-items: center;
    background: var(--pm-page);
    border: 1px solid var(--pm-card-border);
    padding: 6px 8px;
    font-size: 12.5px;
}
.editor-list li .index {
    color: var(--pm-ink-muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    text-align: center;
}

/* Teammate rows render their index pill as a clickable button —
   it doubles as the "You" toggle. Default look matches the
   non-clickable Opponent index span so both lists stay visually
   identical until a teammate is marked as the player. */
button.editor-list__index-toggle {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--pm-ink-muted);
    padding: 1px 0;
    line-height: 1.2;
    cursor: pointer;
    border-radius: 3px;
}
button.editor-list__index-toggle:hover {
    color: var(--pm-ink);
    border-color: var(--pm-card-border-strong);
}
button.editor-list__index-toggle[aria-pressed="true"] {
    color: var(--pm-grass);
    border-color: var(--pm-grass);
    box-shadow: inset 0 0 0 1px var(--pm-grass);
    font-weight: 700;
}
.editor-list li input {
    padding: 4px 6px;
    border: 1px solid var(--pm-card-border-strong);
    background: var(--pm-page);
    color: var(--pm-ink);
    font-size: 12.5px;
}
.editor-list li button.icon-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--pm-ink-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1;
}
.editor-list li button.icon-btn:hover {
    color: var(--pm-danger, #d92d39);
    border-color: var(--pm-danger, #d92d39);
}
.editor-list--empty {
    color: var(--pm-ink-muted);
    font-size: 12px;
    font-style: italic;
}

.editor-coord {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--pm-ink-muted);
}
.editor-coord__value {
    font-family: "JetBrains Mono", monospace;
    color: var(--pm-ink);
}

.scenario-editor svg.pitch-svg { cursor: crosshair; }
.scenario-editor[data-tool="delete"] svg.pitch-svg { cursor: not-allowed; }
.scenario-editor svg.pitch-svg .pitch-player,
.scenario-editor svg.pitch-svg .pitch-ball {
    cursor: pointer;
}

.pitch-token-selected {
    filter: drop-shadow(0 0 0.6px rgba(57, 255, 20, 0.95))
            drop-shadow(0 0 2.4px rgba(57, 255, 20, 0.6));
}

/* --- Multiple-choice option authoring (editor sidebar) -------------- */
.editor-option-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.editor-option-row {
    background: var(--pm-card-bg);
    border: 1px solid var(--pm-card-border-strong);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.editor-option-row__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.editor-option-letter {
    font-weight: 700;
    font-size: 1.1em;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pm-grass);
    color: #fff;
    border-radius: 999px;
}
.editor-option-place {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    padding: 6px 10px;
}
.editor-option-place[aria-pressed="true"] {
    background: var(--pm-grass);
    color: #fff;
}
.editor-option-correct {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--pm-ink);
}
.editor-option-text {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
    padding: 6px 8px;
    background: var(--pm-page);
    color: var(--pm-ink);
    border: 1px solid var(--pm-card-border-strong);
    border-radius: 4px;
}
.editor-option-coord {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: var(--pm-ink-muted);
}

/* --- Option markers rendered on editor pitch (preview) -------------- */
.pitch-option-correct-author .pitch-option-correct-halo {
    fill: rgba(255, 213, 77, 0.18);
    stroke: rgba(255, 213, 77, 0.6);
    stroke-width: 0.3;
}
.pitch-option-correct-author .pitch-option-disc {
    fill: #ffd54d;
    stroke: #fff4a6;
}
.pitch-option-correct-author .pitch-option-letter {
    fill: #3a2700;
}

/* === Help / tutorial deck ============================================== */

/* The deck sits on the white body as a clean playbook page — light
   border, soft drop shadow, grass-green progress bar. No neon glow
   on the white surface. */
.pm-deck {
    position: relative;
    border: 1px solid var(--pm-card-border-strong);
    background: var(--pm-card-bg);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.pm-deck__progress {
    height: 2px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.pm-deck__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--pm-grass);
    transition: width 220ms ease-out;
}

.pm-deck__viewport {
    position: relative;
    min-height: 460px;
}

.pm-slide {
    display: none;
    padding: 2rem 2rem 1.5rem;
    animation: pm-slide-in 220ms ease-out;
}

.pm-slide[data-active="true"] {
    display: block;
}

@keyframes pm-slide-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pm-slide__kicker {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pm-muted);
    margin-bottom: 0.6rem;
}

/* Slide titles share the .pm-display playbook treatment used by
   page headers — Bebas Neue 400-weight, light positive tracking,
   uppercase, ink-on-white — so a slide reads as a continuation of
   the page rather than a separate panel typeface. */
.pm-slide__title {
    font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pm-ink);
    font-size: 1.65rem;
    line-height: 1.05;
    margin-bottom: 1rem;
}

.pm-slide__lede {
    color: var(--pm-ink);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    max-width: 56ch;
}

.pm-slide__body {
    color: var(--pm-ink);
    font-size: 0.95rem;
    line-height: 1.55;
}

.pm-slide__body p {
    max-width: 60ch;
}

.pm-slide__body ul,
.pm-slide__body ol {
    padding-left: 1.1rem;
    max-width: 62ch;
}

.pm-slide__body li {
    margin-bottom: 0.35rem;
}

.pm-slide__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .pm-slide__split {
        grid-template-columns: 1fr;
    }
    .pm-slide {
        padding: 1.5rem 1.25rem 1rem;
    }
    .pm-slide__title {
        font-size: 1.35rem;
    }
    .pm-deck__viewport {
        min-height: 380px;
    }
}

/* Inline UI mockups: small simulated screens that illustrate a slide
   without needing real screenshots. Tuned for the white surface so
   they read as a clean light card with grass-green accents. */
.pm-mock {
    border: 1px solid var(--pm-card-border-strong);
    background: var(--pm-card-bg);
    padding: 0.85rem 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    font-size: 0.8rem;
}

.pm-mock__chrome {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border-bottom: 1px dashed var(--pm-card-border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.65rem;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pm-ink-muted);
}

.pm-mock__chrome::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pm-grass);
    flex-shrink: 0;
}

.pm-mock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--pm-card-border);
    font-family: "IBM Plex Sans", sans-serif;
}

.pm-mock-row:last-child {
    border-bottom: none;
}

.pm-mock-row__name {
    color: var(--pm-ink);
    font-weight: 600;
}

.pm-mock-row__meta {
    color: var(--pm-ink-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pm-mock-row__chip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--pm-card-border-strong);
    color: var(--pm-ink);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pm-mock-row__chip--accent {
    border-color: var(--pm-grass);
    color: var(--pm-grass);
}

.pm-mock-cta {
    margin-top: 0.65rem;
    text-align: right;
}

.pm-mock-cta span {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--pm-grass);
    color: #ffffff;
    background: var(--pm-grass);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pm-mock-stars {
    color: var(--pm-grass);
    letter-spacing: 0.18em;
    font-size: 1.1rem;
}

.pm-mock-stars .pm-mock-star-empty {
    color: rgba(0, 0, 0, 0.18);
}

/* Deck nav strip */
.pm-deck__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--pm-card-border);
    background: var(--pm-card-bg);
}

.pm-deck__counter {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pm-ink-muted);
    user-select: none;
}

.pm-deck__counter strong {
    color: var(--pm-grass);
    font-weight: 700;
}

.pm-deck__dots {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pm-deck__dot {
    appearance: none;
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: transparent;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.pm-deck__dot:hover {
    border-color: var(--pm-ink);
}

.pm-deck__dot[data-active="true"] {
    background: var(--pm-grass);
    border-color: var(--pm-grass);
}

.pm-deck__buttons {
    display: flex;
    gap: 0.4rem;
}

.pm-deck__buttons .btn:disabled {
    opacity: 0.4;
}

/* Help index hub cards — sit on the white body as light playbook
   tiles. Border lifts to grass-green on hover so the role choice
   reads as the brand "go signal". */
.pm-help-card {
    display: block;
    height: 100%;
    text-decoration: none;
    border: 1px solid var(--pm-card-border-strong);
    background: var(--pm-card-bg);
    padding: 1.5rem 1.4rem;
    transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}

.pm-help-card:hover {
    border-color: var(--pm-grass);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    text-decoration: none;
}

.pm-help-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pm-grass);
    color: var(--pm-grass);
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}

.pm-help-card__role {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pm-ink-muted);
    margin-bottom: 0.4rem;
}

.pm-help-card__title {
    font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
    font-weight: 700;
    color: var(--pm-ink);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.pm-help-card__body {
    color: var(--pm-ink-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ── Pricing slide deck ───────────────────────────────────────
   Reuses the help-deck chrome; the per-tier slide replaces the
   "mockup" half with a real call-to-action card. The card sits
   inside the slide grid so the feature bullets and the price
   sit on the same horizontal band. */
.pm-pricing-slide__split {
    align-items: stretch;
}

.pm-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.pm-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.95rem;
    color: var(--pm-ink);
    line-height: 1.4;
}

.pm-pricing-features .bi {
    color: var(--pm-grass);
    font-size: 1.05rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.pm-pricing-card {
    border: 1px solid var(--pm-card-border-strong);
    background: var(--pm-card-bg);
    padding: 1.5rem 1.4rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pm-pricing-card--featured {
    border-color: var(--pm-grass);
    box-shadow: 0 12px 28px rgba(46, 125, 50, 0.18);
}

.pm-pricing-card__name {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pm-ink-muted);
    margin: 0;
}

.pm-pricing-card__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pm-pricing-card__amount {
    font-family: "Bebas Neue", "Oswald", "Impact", sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--pm-ink);
    font-size: 2.4rem;
    line-height: 1;
}

.pm-pricing-card__period {
    font-size: 0.85rem;
    color: var(--pm-ink-muted);
}

.pm-pricing-card__meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--pm-ink-muted);
    text-align: center;
}

.pm-pricing-slide__badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--pm-grass);
    color: var(--pm-grass);
    background: rgba(46, 125, 50, 0.08);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}