/* ==========================================================================
   MLB Player Intelligence — page-specific styles (Player Page V1).

   Loaded ONLY by templates/mlb_player.html via its {% block head_extra %}, the
   same pattern /mlb/today uses for mlb-board-today.css. Nothing here can affect
   another public page.

   Built on the global tokens in curatedbets-theme.css. The V1 design palette
   maps ONE-FOR-ONE onto tokens that already exist, so nothing below re-declares
   a colour the theme already owns:
     #1F6FD6 --accent-strong   #2E8BFF --accent        #7CBEFF --cb-blue-300
     #EEF5FF --accent-wash     #DCEBFF --cb-blue-100
     #E4EAF1 --border-hairline #D2DCE7 --border-soft   #B6C3D2 --border-strong
     #93A3B6 --text-faint      #6E7F94 --text-muted    #344960 --text-body
     #0F2238 --text-strong     10px    --radius-sm
     shadow xs/sm/md and cubic-bezier(.22,.61,.36,1) are token-identical too.
   White-alpha values inside the navy command zone are written literally, since
   they are overlays on the shared gradient rather than a hard-coded dark hex.

   Layout contract:
     desktop >=1181px : 296px selector rail + 1fr workspace, gap 26px
     tablet  721-1180 : workspace stacks, selector above, signals 1 across
     mobile  <=720px  : single column, 44px minimum tap target on every row
   Nothing uses a fixed height, so no band can render as dead space.
   ========================================================================== */

/* Shell width is inherited from public-brand.css (--shell, the locked 1240px
   rail) so this page lines up with /mlb/today, /most-mentioned and the
   homepage. The design's 92px full-bleed gutter is deliberately NOT adopted:
   public_base.html's two-zone shell is locked and shared with the nav and
   footer, and breaking this one page out of it would misalign the page against
   its own chrome. Every other spacing, type and motion value is matched. */

.pi-eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 4px;
}
.pi-sep { padding: 0 6px; color: var(--border-strong); }
.pi-dot { color: var(--text-faint); }
.pi-micro { font-size: 11.5px; line-height: 1.55; color: var(--text-faint); margin: 6px 0 0; }
.pi-link { color: var(--accent-strong); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pi-link:hover { text-decoration: underline; }

/* ---- A. Compact intelligence header ------------------------------------
   Renders inside the SHARED navy command zone (public_base.html →
   .cb-shell-top.signal-room → .cb-hero), not as a contained dark card. It
   therefore declares no background, radius or shadow of its own, and every
   colour below comes from a token .signal-room has already re-mapped. */
.pi-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 48px;
  align-items: end;
  padding: 0; margin: 0;
}
.pi-head .pi-eyebrow { color: var(--cb-blue-400); font-size: 10.5px; margin-bottom: 6px; }
.pi-head-main { min-width: 0; }
/* Page H1 — V1 ramp: Archivo 800 / 44px / -.025em, flat white on the navy. */
.pi-name {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em;
  font-size: 44px; line-height: 1; margin: 0; color: #fff;
}
.pi-ident { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); margin: 10px 0 0; }
.pi-ident .pi-sep { color: rgba(255,255,255,.45); }

.pi-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
/* Status chips read as one quiet family on the navy — a translucent white pill.
   Role state is INFORMATION, not a verdict, so no role gets a colour that would
   score it as good or bad. Only the board-lock chip below is coloured, and only
   because it reports an operational deadline. */
.pi-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.14);
}
/* Board lock — operational status only, never a signal about the player. */
.pi-chip.is-lock {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 5px 12px;
}
.pi-chip.is-lock.lock-open {
  color: #5FD6A0; background: rgba(31,169,104,.14); border-color: rgba(31,169,104,.3);
}
.pi-chip.is-lock.lock-frozen {
  color: #F0C078; background: rgba(217,138,26,.14); border-color: rgba(217,138,26,.32);
}
.pi-chip.is-lock.lock-started,
.pi-chip.is-lock.lock-final {
  color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
}

.pi-matchup { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 14px 0 0; }
.pi-matchup strong { color: rgba(255,255,255,.92); font-weight: 700; }
.pi-matchup .pi-sep { color: rgba(255,255,255,.35); }
.pi-matchup .pi-link { color: var(--cb-blue-400); margin-left: 10px; }

/* Stat group — three figures, generous gap, no dividers and no card chrome. */
.pi-rail { display: flex; flex-wrap: wrap; gap: 44px; padding-bottom: 6px; }
/* Figure above, label underneath — the same reading order as the stat strip.
   `order` does it without touching the markup (which is span-then-strong). */
.pi-metric { display: flex; flex-direction: column; padding: 0; border: 0; }
.pi-metric span {
  order: 2;
  display: block; font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 9px; white-space: nowrap;
}
.pi-metric strong { order: 1; }
.pi-metric strong {
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}

/* ---- Crumbs strip ------------------------------------------------------- */
.pi-crumbs { padding-top: 4px; }
.pi-compliance { font-size: 11px; color: var(--text-faint); margin: 9px 2px 0; }

/* ---- Section shell ------------------------------------------------------ */
.pi-section { margin-top: 30px; }
.pi-section-head { margin-bottom: 14px; }
.pi-section-head h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: -.01em; color: var(--text-strong); margin: 0;
}
/* The workspace is the page's job, so its head outranks the sections below it. */
.pi-section-head.is-lead h2 { font-size: 22px; letter-spacing: -.015em; }
.pi-section-head.is-lead p { max-width: 62ch; margin-top: 8px; }
.pi-section-head p { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); margin: 4px 0 0; max-width: 78ch; }
.pi-secondary { opacity: .92; }
.pi-secondary .pi-section-head h2 { font-size: 16px; }

/* ==========================================================================
   B. EXACT PROP WORKSPACE — selector rail + Connected Signals
   ========================================================================== */
.pi-workspace {
  display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 26px;
  align-items: start; padding-top: 6px;
}

/* ---- Selector rail ------------------------------------------------------ */
/* The rail is a <form>; the rows are native <button>s. Nothing here suppresses
   the focus ring, and hover and keyboard focus deliberately share one visual
   treatment so a keyboard user sees exactly what a pointer user sees. */
.pi-prop-list { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pi-prop-row {
  appearance: none; width: 100%; margin: 0; text-align: left; cursor: pointer; font: inherit;
  padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline); background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
              border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.pi-prop-row:hover,
.pi-prop-row:focus-visible {
  border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-2px);
}
.pi-prop-row[aria-pressed="true"] {
  border-color: var(--accent-strong); background: var(--accent-wash);
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
/* One-shot ring for a signal arriving on the pinned prop. No live channel
   publishes to this page today, so nothing triggers it yet; the rule is kept
   so reinstating it is adding a class, not rebuilding the motion. */
.pi-prop-row.is-pulsing { animation: piPulse 900ms ease-out; }

.pi-prop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pi-prop-market {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
}
.pi-prop-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pi-prop-figure { display: flex; align-items: baseline; min-width: 0; }
.pi-prop-side {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  text-transform: uppercase; color: var(--text-strong);
}
.pi-prop-num {
  font-family: var(--font-mono); font-weight: 700; font-size: 21px; line-height: 1;
  color: var(--accent-strong); margin-left: 8px;
}
/* Selector card volume line — THIS exact prop's own identified-source and
   mention counts. Promoted to the card's primary metadata because "how much
   public attention is this exact prop getting" is the question the selector
   exists to answer; the numerals are mono/bold so the two figures read at a
   glance against the market/side/line above them. */
.pi-prop-meta { font-size: 11.5px; color: var(--text-body); }
.pi-prop-meta b { font-family: var(--font-mono); color: var(--text-strong); font-weight: 700; }
/* Stored-relationship count. Deliberately quieter than the volume line above:
   it answers a different question (what is linked to this prop) and must not
   read as part of the same figure. */
.pi-prop-submeta { font-size: 10px; color: var(--text-faint); }

.pi-badge {
  display: inline-flex; align-items: center; font-family: var(--font-display);
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: var(--surface-sunken); color: var(--text-muted);
  border: 1px solid var(--border-hairline);
}
.pi-badge.is-info {
  background: var(--accent-wash); color: var(--accent-strong); border-color: var(--cb-blue-100);
}

/* The Selected badge is always in the DOM and revealed by state, so switching
   selection is a single aria-pressed flip rather than a DOM rewrite.
   These MUST come after .pi-badge: both selectors have the same specificity, so
   whichever is declared last wins, and .pi-badge sets display: inline-flex. */
.pi-prop-row .pi-selected-badge { display: none; }
.pi-prop-row[aria-pressed="true"] .pi-selected-badge { display: inline-flex; }

/* ---- Workspace column --------------------------------------------------- */
.pi-ws { min-width: 0; }
.pi-ws-banner {
  border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-raised); padding: 11px 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 220ms var(--ease-out), border-left-width 220ms var(--ease-out);
}
/* Hover/focus PREVIEW: pointing at a row lights the link between the rail and
   the workspace without moving the pin. Pure CSS via :has() on the shared grid
   parent — no JS, so it works even with the enhancement script blocked. */
.pi-workspace:has(.pi-prop-row:hover) .pi-ws-banner,
.pi-workspace:has(.pi-prop-row:focus-visible) .pi-ws-banner {
  box-shadow: 0 0 0 4px var(--accent-wash), var(--shadow-md);
  border-left-width: 5px;
}
.pi-ws-banner-label {
  font-family: var(--font-display); font-size: 9px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
}
.pi-ws-banner-value {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  color: var(--text-strong); margin: 3px 0 0;
}

.pi-lane-head {
  display: flex; align-items: center; gap: 7px;
  border-top: 3px solid var(--accent-strong); padding-top: 10px; margin-bottom: 10px;
}
/* The secondary lane is the same structure at a lower rank: a hairline rule
   instead of the accent bar, so "This line" can never read as a second lane of
   connected evidence. */
.pi-lane-head.is-quiet {
  border-top: 1px solid var(--border-hairline); margin-top: 18px;
}
.pi-lane-icon { width: 14px; height: 14px; flex: none; color: var(--accent-strong); }
.pi-lane-title {
  font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-strong); margin: 0;
}
.pi-lane-head.is-quiet .pi-lane-title { font-size: 11px; color: var(--text-muted); }
/* Player Context lane — a peer of Connected Signals, not a subordinate of it,
   but visually distinct so the two can never be read as the same claim. */
.pi-lane-head.is-context {
  border-top-color: var(--border-strong); margin-top: 22px; flex-wrap: wrap;
}
.pi-lane-head.is-context .pi-lane-icon { color: var(--text-muted); }
.pi-lane-note {
  flex: 1 1 auto; font-size: 10.5px; color: var(--text-faint); text-align: right;
}
.pi-lane-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }

.pi-signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.pi-signal-card {
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--cb-blue-300); border-radius: var(--radius-sm);
  padding: 13px 15px; box-shadow: var(--shadow-xs); min-width: 0;
  animation: piEnter 380ms var(--ease-out);
}
.pi-signal-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.pi-signal-category {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.pi-signal-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); white-space: nowrap; }
.pi-signal-text { font-size: 12px; line-height: 1.55; font-weight: 600; color: var(--text-body); margin: 0 0 8px; }

/* Full-text cards (Issue #4). The COMPLETE stored statement is always in the
   DOM — the server no longer caps these two lanes — so with JavaScript off the
   whole fact is readable and nothing is lost. mlb-player.js adds .is-clamped
   only to cards that actually overflow, plus a Read more / Show less button, so
   the page keeps its compact rhythm without hiding anything permanently. */
.pi-signal-text.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.pi-text-toggle {
  appearance: none; background: none; border: 0; padding: 0; margin: 0 0 8px;
  font: inherit; font-size: 11px; font-weight: 700; color: var(--cb-info);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.pi-text-toggle:hover { opacity: .8; }
.pi-text-toggle:focus-visible { outline: 2px solid var(--cb-info); outline-offset: 2px; border-radius: 3px; }
.pi-signal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pi-signal-prov { font-size: 10.5px; color: var(--text-faint); }
/* A player-context card carries a neutral edge, never the connected-signal blue,
   so the two lanes stay distinguishable at a glance and on a small screen. */
.pi-signal-card.is-context { border-left-color: var(--border-strong); }

/* Zero connected signals — a compact inline note, never a large empty card.
   This is the expected state, not an error, and is styled accordingly. */
.pi-ws-empty {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 26px 14px; border: 1px dashed var(--border-soft);
  border-radius: var(--radius-sm); background: var(--surface-raised);
}
.pi-ws-empty p { font-size: 11.5px; color: var(--text-muted); margin: 0; }
.pi-empty-icon { width: 15px; height: 15px; flex: none; color: var(--text-faint); }

/* ---- "This line" — prop-scoped volume, market and history --------------- */
.pi-line-detail {
  display: flex; flex-direction: column; gap: 12px;
  animation: piEnter 380ms var(--ease-out);
}
.pi-prop-meta-row {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11.5px; color: var(--text-muted);
}
.pi-prop-meta-row b { font-family: var(--font-mono); color: var(--text-body); font-weight: 700; }
/* Source-less mention activity: an explicit state, never "0 identified sources". */
.pi-unattributed { color: var(--text-faint); font-style: italic; }
.pi-workspace-note { margin-top: 16px; max-width: 96ch; }

/* Re-entry when the selection changes. Restarted from JS by toggling the class,
   which is why the animation lives on a modifier rather than the base rule. */
.pi-signal-card.is-entering,
.pi-line-detail.is-entering { animation: piEnter 380ms var(--ease-out); }

@keyframes piEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes piPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,139,255,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(46,139,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,139,255,0); }
}

/* Line Movement — the reference sportsbook's own STANDARD line at opening /
   current / closing. Deliberately quiet and neutral: no colour coding, no
   arrows, no up/down semantics. A move is a fact, not a verdict, so the delta
   note uses the same muted treatment whichever way the line went. */
.pi-move {
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.pi-move-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 7px;
}
.pi-move-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.pi-move-cell { min-width: 0; }
.pi-move-cell dt {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 2px;
}
.pi-move-cell dd {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; line-height: 1.1;
  color: var(--text-strong); margin: 0;
}
.pi-move-delta {
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--border-hairline);
}

/* Factual trend nested INSIDE its prop card — visually distinct from the
   source-observed figures above it, because it is CuratedBets' own arithmetic. */
.pi-trend {
  background: var(--surface-sunken); border-radius: var(--radius-sm);
  padding: 12px 14px; border-left: 3px solid var(--cb-gold-600);
}
.pi-trend.is-standalone { border-left-color: var(--border-strong); }
.pi-trend-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cb-gold-600); margin: 0 0 5px;
}
.pi-trend.is-standalone .pi-trend-label { color: var(--text-faint); }
.pi-trend-text { font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--text-strong); margin: 0; }
.pi-trend-stats { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.pi-trend-stats span {
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap;
}
.pi-trend-empty { margin-top: 0; }
.pi-seq { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pi-seq-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-body);
  background: var(--surface-raised); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 2px 7px; min-width: 26px; text-align: center;
}
.pi-trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* ---- C/D. Two-column layout --------------------------------------------- */
.pi-layout {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 26px; align-items: start; margin-top: 30px;
}
.pi-main { min-width: 0; }
.pi-rail-col { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }

.pi-context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.pi-card {
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: 14px 16px; min-width: 0;
}
.pi-card-label {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 6px;
}
.pi-card-value {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3;
  color: var(--text-strong); margin: 0;
}
.pi-card-value.is-muted { color: var(--text-faint); font-weight: 600; }
.pi-card-sub { font-size: 12px; color: var(--text-muted); margin: 3px 0 0; }
.pi-card-body { font-size: 12.5px; line-height: 1.55; color: var(--text-body); margin: 7px 0 0; }
.pi-card-body.is-muted { color: var(--text-faint); }

/* Inline caution — sits beside the context item it affects, never standalone. */
.pi-note {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 12px; line-height: 1.5; color: #7a4c05; margin: 9px 0 0;
  background: var(--cb-caution-soft); border-radius: var(--radius-sm); padding: 8px 10px;
}
.pi-note-mark {
  flex: none; width: 15px; height: 15px; border-radius: 50%; margin-top: 1px;
  background: var(--cb-caution); color: var(--cb-white);
  font-size: 10px; font-weight: 800; line-height: 15px; text-align: center;
}

/* ---- D. Recent performance strip --------------------------------------- */
.pi-form-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pi-form-window {
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--cb-navy-500); border-radius: var(--radius-sm);
  padding: 12px 14px; min-width: 0;
}
.pi-form-key {
  font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 4px;
}
.pi-form-line {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; line-height: 1.5;
  color: var(--text-strong); margin: 0; overflow-wrap: anywhere;
}

/* ---- E. Evidence activity — NOT CURRENTLY RENDERED ----------------------
   Styled the retired "Source & Signal Activity" section (DECISIONS 0154,
   second amendment). Kept, unused and inert, deliberately: the removal was
   template-only, so leaving these rules keeps the revert template-only too.
   Delete them only when that revert is ruled out for good. ---------------- */
.pi-evidence-group { margin-top: 18px; }
.pi-evidence-group:first-of-type { margin-top: 0; }
.pi-group-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.pi-group-count {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-faint);
  background: var(--surface-sunken); border-radius: var(--radius-pill); padding: 1px 7px;
}
.pi-evidence-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pi-evidence {
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0;
}
.pi-evidence-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; }
.pi-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--accent-wash);
  border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap;
}
.pi-tag.is-warn { color: #7a4c05; background: var(--cb-caution-soft); }
.pi-sid { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); }
.pi-evidence-title { font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--text-strong); margin: 0; }
.pi-evidence-body { font-size: 12.5px; line-height: 1.55; color: var(--text-body); margin: 5px 0 0; }

/* ---- Secondary rail cards ---------------------------------------------- */
.pi-side-card {
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs); padding: 14px 16px;
}
.pi-coverage { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pi-coverage li {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-body);
}
.pi-coverage li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
}
.pi-coverage li.is-on { color: var(--text-body); }
.pi-coverage li.is-on::before { background: var(--cb-positive); }
.pi-coverage li.is-off { color: var(--text-faint); }

/* ---- F. Secondary detail ------------------------------------------------ */
.pi-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pi-details { margin-top: 8px; }
.pi-details summary { font-size: 11.5px; color: var(--text-muted); cursor: pointer; }
.pi-alt { margin: 7px 0 0; padding-left: 18px; font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }

/* ==========================================================================
   Responsive — tablet then mobile. Single column at each break; nothing is
   hidden purely to save space, and no element keeps a fixed desktop height.
   ========================================================================== */
/* Workspace collapses first: the selector moves above the workspace and the
   signal grid drops to one column, so a signal card never gets a half-column. */
@media (max-width: 1180px) {
  .pi-workspace { grid-template-columns: 1fr; }
  .pi-signal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1079px) {
  .pi-layout { grid-template-columns: 1fr; }
  .pi-rail-col { position: static; }
  /* Rail cards sit side by side on tablet rather than stacking full-width. */
  .pi-rail-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 860px) {
  .pi-head { grid-template-columns: 1fr; align-items: start; gap: 16px; padding: 0; }
  .pi-rail { gap: 32px; }
}

@media (max-width: 720px) {
  .pi-trend-grid,
  .pi-book-grid,
  .pi-context-grid,
  .pi-form-strip,
  .pi-evidence-list,
  .pi-rail-col { grid-template-columns: 1fr; }

  .pi-name { font-size: 32px; }
  .pi-rail { gap: 28px; }
  .pi-metric strong { font-size: 24px; }

  /* Every selector row keeps a full tap target even with one short line. */
  .pi-prop-row { min-height: 44px; }

  /* Comfortable touch targets for the other interactive controls on the page. */
  .pi-link, .pi-details summary { display: inline-block; min-height: 44px; line-height: 44px; }
  .pi-matchup .pi-link { margin-left: 0; display: block; }

  /* Body copy never shrinks below the readable floor on mobile. */
  .pi-card-body, .pi-evidence-body, .pi-trend-text { font-size: 13px; }
  .pi-micro { font-size: 12px; }
  .pi-signal-text { font-size: 12.5px; }
}

/* Long stat lines and sequences wrap instead of forcing a horizontal scroll. */
.pi-prop-row, .pi-signal-card, .pi-ws-banner,
.pi-card, .pi-evidence, .pi-form-window, .pi-side-card { overflow-wrap: anywhere; }

/* Reduced motion clamps every transition and animation on the page, including
   the workspace re-entry and the selector lift. State changes become instant;
   nothing is left half-animated. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .pi-prop-row:hover,
  .pi-prop-row:focus-visible,
  .pi-prop-row[aria-pressed="true"] { transform: none; }
}