/* ============================================================================
   room-practice-board.css — the interior of the Training Room.

   furnishing-vessel-interiors S3 (DT authoring). Presentation only.
   Spec: docs/room-specs/09-training.md — committed before this file.
   Pattern: the S2-accepted pair (room-librarians-desk / room-lineage-dial).

   ── THE SEAM ───────────────────────────────────────────────────────────────
   buildWindow() stamps `.ffrw-shell.ffrw-vessel.ffrw-training`; the view-room
   factory reparents `#view-training-hub` into `.ffrw-body` with
   `.ffrw-hosted`. Everything below rides

       .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted

   so the flat App-Panel view and mobile are untouched by construction, and
   the single-step revert is this file plus its one <link>.

   ── WHAT THIS FILE MAY NOT DO ──────────────────────────────────────────────
   No handler, no label, no route, no truthful string, no bang-important, no
   second scroll owner (#view-training-hub is the one). The chrome layer
   (.ffvl-chromed-header) keeps custody of the header band's background,
   bottom rule and text colour — nothing here touches those three on
   .view-header. Progress-fill WIDTHS are renderer custody, untouched.
   Family headshots are content, never texture (D1 §10.4).

   WITHHELD (spec §6): the Fergi aperture, and every census behavioral
   finding (BR-64–76) — code defects, not dress; zero markup and zero
   handlers change here. The dress makes BR-68's eternal "Loading…" MORE
   visible, which is the truthful current state.
   ============================================================================ */

/* ── The well ─────────────────────────────────────────────────────────────
   #view-training-hub is the scroll owner. Gutters + scroll padding so the
   first and last regions are reachable, not merely painted (D1 §1.3, §8.2). */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted {
  --pb-gutter: 20px;
  --pb-ink: var(--ffvr-ink, #FFF9EC);
  --pb-ink-muted: var(--ffvr-ink-muted, #C6C1B6);
  --pb-rule: color-mix(in srgb, var(--ffvr-rule, #E8CD97) 32%, transparent);
  --pb-rule-strong: color-mix(in srgb, var(--ffvr-rule, #E8CD97) 58%, transparent);
  --pb-plane: var(--ffvr-surface-raised, #2D2924);
  --pb-plane-hover: color-mix(in srgb, var(--ffvr-surface-raised, #2D2924) 90%, var(--ffvr-ink, #FFF9EC) 10%);
  --pb-accent: var(--ffvr-accent, #55C8B8);

  padding: 0 var(--pb-gutter) 24px;
  scroll-padding-block-start: 16px;
  scroll-padding-block-end: 24px;
  color: var(--pb-ink);
}

/* ── One hierarchy: the chassis title is the title ─────────────────────────
   The vessel header already says `Training / PRACTICE BOARD`. The hosted
   view repeats it as `<h2>🎯 Training Hub</h2>`. VISUALLY RETIRED, NOT
   REMOVED (D1 §2.2 outcome 2): heading node, order and outline survive for
   AT; only the pixels go. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .view-header h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── The rail, and its eyebrow (D1 §2.3) ──────────────────────────────────
   The header carries no controls; the truthful subtitle becomes the context
   slot in the eyebrow register — it says what the board is for without
   repeating the Room name. The chrome layer keeps background/rule/colour
   custody of the band; this is spacing + type only. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .view-header {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin: 0 calc(-1 * var(--pb-gutter)) 16px;
  padding: 8px var(--pb-gutter);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .view-header .view-subtitle {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-ink-muted);
  opacity: 1;
}

/* ── The scoreboard: stat cards as plates (D1 §5.4) ───────────────────────
   Already plane-grounded via tokens; they join the plate grammar so the
   scoreboard and the roster read as one board. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-stat-card {
  background: var(--pb-plane);
  border: 1px solid var(--pb-rule);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-stat-card .stat-value {
  color: var(--pb-ink);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-stat-card .stat-label {
  color: var(--pb-ink-muted);
}

/* ── Section heads as chalk lines (D1 §4.3) ───────────────────────────────
   "Family Members" and "Training Tools" become shelf headings: serif head,
   one gold rule beneath, no box. Regions separate by the contemplative gap. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-hub-section + .training-hub-section {
  margin-top: 32px;
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-hub-section h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pb-ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pb-rule);
}

/* ── The filter pills ─────────────────────────────────────────────────────
   Already the accent+on-accent RECIPE from filling-bespoke-vessels S4; the
   active pairing is untouched. Hover joins the Room's plane tint. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-filter-btn {
  min-height: 32px;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-filter-btn:hover {
  background: color-mix(in srgb, var(--pb-plane) 60%, transparent);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-filter-btn.active:hover {
  background: var(--pb-accent);
}

/* ── The roster: member cards trade white paper for the board (D1 §5.4) ───
   background:white, the primary-light hover ring and the white→#ecfdf5
   ready gradient are the Room's biggest foreigners. Plates instead; the
   ready state keeps its truth in the Room's own grammar. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-card {
  background: var(--pb-plane);
  border: 1px solid var(--pb-rule);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: transform 150ms, background 150ms, border-color 150ms, box-shadow 150ms;
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-card:hover {
  transform: translateY(-1px);
  background: var(--pb-plane-hover);
  border-color: var(--pb-rule-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 6px 18px rgba(0, 0, 0, .24);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-card.ready {
  background: color-mix(in srgb, var(--pb-accent) 12%, var(--pb-plane));
  border-color: color-mix(in srgb, var(--pb-accent) 58%, transparent);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-name {
  color: var(--pb-ink);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-progress-row .progress-count,
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-action {
  color: var(--pb-ink-muted);
}

/* The monogram disc when a person has no headshot: the Room's recessed
   ground, not a stranger's primary-light. The <img> itself is untouched. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-avatar {
  background: color-mix(in srgb, var(--pb-plane) 72%, var(--ffvr-surface-sunken, #000) 28%);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-avatar .avatar-initial {
  color: var(--pb-ink-muted);
}

/* Progress tracks and fills: the track recedes into the board; the fill is
   the Room's live edge. The WIDTH is renderer custody — truthful counts —
   and is untouched. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .progress-bar-mini {
  background: color-mix(in srgb, var(--pb-plane) 60%, var(--ffvr-surface-sunken, #000) 40%);
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .progress-bar-mini .progress-fill {
  background: var(--pb-accent);
}

/* ── The bench: tool cards join the plate grammar ─────────────────────────
   Handlers, labels and descriptions untouched; accent hover border stays
   (it is already the Room's accent by token). */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-action-card {
  background: var(--pb-plane);
  border: 1px solid var(--pb-rule);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: transform 150ms, background 150ms, border-color 150ms, box-shadow 150ms;
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-action-card:hover {
  transform: translateY(-1px);
  background: var(--pb-plane-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 6px 18px rgba(0, 0, 0, .24);
}

/* ── The tips card: amber paper becomes the board's own gold note ─────────
   #fef3c7→#fde68a with dark text is a light panel from another theme. The
   note grammar (FN-accepted): rule-gold tint ground, one strong left edge,
   Room ink. Copy untouched. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-tips-card {
  background: color-mix(in srgb, var(--ffvr-rule, #E8CD97) 10%, transparent);
  border-left: 3px solid var(--pb-rule-strong);
  border-radius: 0 12px 12px 0;
  margin-top: 32px;
}

.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-tips-card h3,
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-tips-list {
  color: var(--pb-ink);
}

/* ── The other surfaces of the same Room ──────────────────────────────────*/
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .loading-indicator,
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-empty-state {
  color: var(--pb-ink-muted);
}

/* ── Focus is the universal treatment on every control (D1 §3.6) ──────────
   Member cards are <div onclick> today (census BR-72, a code defect this
   file may not fix); their rule is authored so it engages the moment they
   become focusable. */
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-filter-btn:focus-visible,
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-action-card:focus-visible,
.ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-card:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #000000;
}

/* ── Reduced motion (the floor plus the list — pilot pattern) ─────────────*/
@media (prefers-reduced-motion: reduce) {
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted * {
    transition: none;
  }

  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-card,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-action-card,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-filter-btn,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .progress-bar-mini .progress-fill {
    transition: none;
  }

  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-card:hover,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-action-card:hover {
    transform: none;
  }
}

/* ── Forced colours ───────────────────────────────────────────────────────
   Restore system borders so plates and controls keep their shapes; the
   active filter gets the system's selected pairing; essential text never
   sits under an opacity (the pilots' masthead trap). */
@media (forced-colors: active) {
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-member-card,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-stat-card,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-action-card,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-filter-btn,
  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-tips-card {
    border: 1px solid ButtonBorder;
  }

  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .training-filter-btn.active {
    border: 2px solid Highlight;
  }

  .ffrw-training .ffrw-body > #view-training-hub.ffrw-hosted .view-header .view-subtitle {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE V14 CHASSIS — porting-perimeter-souls S4
   Everything below this line is reached ONLY through `html.ffv-modal-fleet-v14`.
   With the flag off not one selector here matches, and the room renders exactly
   as the lines above render it. The SHELL half needs the flag class because
   `.ffvc-rim-glow`, `.ffvc-body` and `.ffvc-lip` are drawn by room-windows.css
   in BOTH states; an unconditioned override would break the byte-identity that
   makes this flag a rollback path.

   ── WHAT THE PORT TOUCHES, AND WHAT IT DOES NOT ─────────────────────────
   Nothing below reaches the training hub's specialist-launch controls, its
   readiness states, its counts or its routing. The port's only geometry is
   VERTICAL, through the theme's own DERIVED keep-outs (119 / 95, from 82 / 58)
   — and every unit of that raise is the SHELL: the lip alone asks 119 / 95
   before any furniture is placed, and after all four aperture directives the
   derived numbers are unchanged. The decoration costs the workspace nothing.
   No horizontal inset moves; the room's accepted working width is untouched.

   Widths are the lab's times the geometric mean sqrt(0.625 * 0.7) = 0.6614.
   ═══════════════════════════════════════════════════════════════════════════ */

html.ffv-modal-fleet-v14 .ffrw-training {
  --v14-violet: #9d5fe0;   /* the lab's --room-a     */
  --v14-jade:   #4fd1a1;   /* the lab's --room-b     */
  --v14-sky:    #55b8ff;   /* the lab's --room-c     */
  --v14-metal:  #f2b84b;   /* the lab's --room-metal */
}

html.ffv-modal-fleet-v14 .ffrw-training .ffvc-rim-glow { stroke-width: 6.61; opacity: .24; }   /* lab 10  x 0.6614 */
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-body     { stroke-width: 2.65; }                 /* lab 4   x 0.6614 */
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-lip      { stroke: rgba(220, 246, 255, .45); stroke-width: .99; opacity: 1; }  /* lab 1.5 x 0.6614 */

html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-practice path,
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-boardwork path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the head: the board seam struck across the raised head rail */
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-board-seam {
  stroke: color-mix(in srgb, var(--v14-metal) 45%, transparent);
  stroke-width: 1.32;                                                                           /* lab 2   x 0.6614 */
}

/* the target crest, seated on the crown step (sunk 7.2 — see the theme). This
   IS the room's scoring ring: three concentric rings and a bullseye, and the
   only one of the lab's three that fits 99.4 units of head. */
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-hero-ring { fill: rgba(4, 15, 26, .96); stroke-width: 1.46; }  /* lab 2.2 x 0.6614 */
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-hero-line {
  fill: none;
  stroke: color-mix(in srgb, var(--v14-violet) 78%, #ffffff 8%);
  stroke-width: 1.32;                                                                           /* lab 2   x 0.6614 */
}
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-node {
  fill: #06131e;
  stroke: var(--v14-metal);
  stroke-width: 1.32;                                                                           /* lab 2   x 0.6614 */
}

/* the foot: the two chalk strokes the board has margin for, and the stance
   marks either side of the plinth tongue */
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-chalk {
  stroke: rgba(235, 244, 233, .55);
  stroke-width: 2.65;                                                                           /* lab 4   x 0.6614 */
}
html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-stance-marks {
  stroke: var(--v14-jade);
  stroke-width: 1.32;                                                                           /* lab 2   x 0.6614 */
}

/* ── motion: PAINT CARRIES, GEOMETRY DOES NOT (HELPER_CONTRACT §6b) ────────
   The lab gives this room exactly one animation that its carried elements
   touch: `node-breathe`, which cycles the bullseye's OPACITY between .4 and 1.
   That is paint, so it is carried verbatim. Nothing else in this room moves —
   `.corner-brackets`, `.score-ring` and `.chalk` appear nowhere in the lab's
   `prefers-reduced-motion: no-preference` block, and the two of those three
   that survive the port are static by the lab's own design.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html.ffv-modal-fleet-v14 .ffrw-training .ffvc-v14-node {
    animation: ffvc-v14-node-breathe 5.4s ease-in-out infinite;
  }
}
@keyframes ffvc-v14-node-breathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }