/* ui/test-range/test-range.css — Test Range picker overlay + in-run panels.
 * Inherits the FX shape language (fx-panel, corner brackets, telemetry chrome).
 * Opens from the GODMODE hub. Master-detail: compact entry list on the left
 * (firing range pinned on top, then PR scenarios), and the focused entry's
 * blurb / look-for / launch in the right-hand detail pane — one description on
 * screen at a time (playtest R: "too much text on the screen").
 */

.tr-overlay {
  position: fixed; inset: 0; z-index: 1300;
  display: none; align-items: stretch; justify-content: stretch;
  background: rgba(8, 12, 22, 0.94);
  color: #e8edf7;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  pointer-events: none;
}
.tr-overlay.tr-open { display: flex; pointer-events: auto; }

.tr-frame {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 18px 22px 16px;
  gap: 14px;
  overflow: hidden;
  position: relative;
}

.tr-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 176, 0, 0.18);
  flex-wrap: wrap;
  position: relative;
}
.tr-head-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-left: auto;
}
.tr-head-btn { padding: 6px 10px; font-size: 11px; letter-spacing: 0.14em; }
.tr-toast {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6dffa0;
  opacity: 0; transition: opacity 180ms;
  margin-left: 4px;
}
.tr-toast.tr-toast-on { opacity: 1; }
.tr-title {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 22px; letter-spacing: 0.16em;
  color: #ffb000;
}
.tr-sub {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.55);
}

/* ── Body — entry list (left) + detail pane (right) ─────────────────────── */
.tr-body {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 18px;
  min-height: 0;
}

.tr-list {
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  align-content: start;
  padding-right: 4px;
}
.tr-list-section {
  margin: 10px 2px 2px;
  font-family: 'Courier New', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.45);
}

.tr-row {
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  text-align: left;
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 0.1em;
  color: #cfe6ff;
  background: rgba(18, 24, 40, 0.6);
  border: 1px solid rgba(120, 200, 255, 0.28);
  padding: 10px 12px;
  transition: border-color 120ms, background 120ms;
}
.tr-row:hover { border-color: rgba(120, 200, 255, 0.55); }
.tr-row.tr-focused {
  border-color: rgba(255, 176, 0, 0.75);
  background: rgba(255, 176, 0, 0.08);
  color: #ffe9bf;
}
.tr-row-title {
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
/* Pinned firing-range entry — amber, reads as the range's front door. */
.tr-row-range {
  border-color: rgba(255, 176, 0, 0.5);
  color: #ffb000;
  padding: 14px 12px;
}
.tr-row-range .tr-row-title::before { content: '◎ '; }

/* Feedback status dot on a row — detail pane carries the full badge. */
.tr-row-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.tr-row-dot[data-state="good"]       { background: #6dffa0; }
.tr-row-dot[data-state="needs-work"] { background: #ffb000; }
.tr-row-dot[data-state="note"]       { background: #78c8ff; }

.tr-pr {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #ffb000;
  border: 1px solid rgba(255, 176, 0, 0.45);
  padding: 2px 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ── Detail pane ──────────────────────────────────────────────────────────── */
.tr-detail {
  overflow-y: auto;
  border: 1px solid rgba(120, 200, 255, 0.28);
  background: rgba(18, 24, 40, 0.6);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
  align-content: start;
  min-height: 0;
}
.tr-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tr-detail-title {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 15px; letter-spacing: 0.14em;
  color: #cfe6ff;
  line-height: 1.3;
}
.tr-detail-sect {
  font-family: 'Courier New', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.45);
}
.tr-detail-launch { margin-top: auto; align-self: flex-start; padding: 11px 22px; }

.tr-blurb { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(232, 237, 247, 0.78); }

.tr-look {
  margin: 0; padding-left: 16px;
  font-size: 11.5px; line-height: 1.5;
  color: rgba(232, 237, 247, 0.6);
}
.tr-look li { margin-bottom: 2px; }

.tr-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.5);
}
.tr-meta span { padding: 2px 6px; border: 1px solid rgba(232, 237, 247, 0.18); }

.tr-status-badge {
  align-self: flex-start;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid rgba(232, 237, 247, 0.3);
  background: rgba(232, 237, 247, 0.06);
}
.tr-status-badge[data-state="good"] {
  color: #6dffa0;
  border-color: rgba(109, 255, 160, 0.6);
  background: rgba(109, 255, 160, 0.12);
}
.tr-status-badge[data-state="needs-work"] {
  color: #ffb000;
  border-color: rgba(255, 176, 0, 0.6);
  background: rgba(255, 176, 0, 0.12);
}
.tr-status-badge[data-state="note"] {
  color: #cfe6ff;
  border-color: rgba(120, 200, 255, 0.5);
  background: rgba(120, 200, 255, 0.08);
}

.tr-btn {
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffb000;
  background: rgba(255, 176, 0, 0.06);
  border: 1px solid rgba(255, 176, 0, 0.5);
  padding: 9px 14px;
  transition: background 120ms, color 120ms, transform 120ms;
}
.tr-btn:hover { background: rgba(255, 176, 0, 0.18); }
.tr-btn:active { transform: scale(0.98); }
.tr-btn.tr-btn-secondary { color: #cfe6ff; border-color: rgba(120, 200, 255, 0.5); background: rgba(120, 200, 255, 0.06); }
.tr-btn.tr-btn-secondary:hover { background: rgba(120, 200, 255, 0.16); }

.tr-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.45);
  padding-top: 8px;
  border-top: 1px solid rgba(232, 237, 247, 0.08);
}

/* In-run dev panel — small floating console top-right while a scenario is active.
   z-index 25: above the HUD (10) + touch layer (20), BELOW the menu tier
   (loadout/onboarding 30, item sheet 34, results 35) so an opened menu always
   covers the panel instead of the panel blocking the menu's top-right corner. */
.tr-dev {
  position: fixed; top: 12px; right: 12px; z-index: 25;
  width: 240px;
  background: rgba(8, 12, 22, 0.92);
  border: 1px solid rgba(255, 176, 0, 0.4);
  padding: 10px 12px 12px;
  font-family: 'Courier New', monospace;
  color: #e8edf7;
  display: none;
  pointer-events: auto;
  /* playtest R — the panel had NO ceiling (max-height: none / overflow: visible), so on a
     short screen its lower rows — the feedback box and the footer — simply ran off the
     bottom of the viewport with no way to reach them. Cap it to the space between its own
     top offset and the bottom edge, and scroll the overflow. This is the guarantee; the
     checklist's own collapse above just keeps the common case from needing to scroll. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tr-dev.tr-dev-open { display: block; }
.tr-dev .tr-dev-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffb000;
  margin-bottom: 8px;
  user-select: none;
}
.tr-dev .tr-dev-caret { font-size: 11px; line-height: 1; }
.tr-dev .tr-dev-badge { margin-left: auto; }
/* playtest R — collapsed dev panel: keep only the header bar, hide the rest. */
.tr-dev.tr-dev-collapsed > *:not(.tr-dev-head) { display: none; }
.tr-dev.tr-dev-collapsed .tr-dev-head { margin-bottom: 0; }
.tr-dev .tr-dev-title { font-size: 11px; color: #cfe6ff; letter-spacing: 0.14em; margin: 0 0 6px; line-height: 1.3; }
/* playtest R — the checklist's own collapse toggle (dev-panel.js). Sits between the panel
   title and the action rows; the list itself is capped + scrollable so a long scenario can
   never push the buttons or the feedback box off the bottom of the screen. */
.tr-dev .tr-dev-sub {
  display: flex; align-items: center; gap: 6px; width: 100%;
  cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: left;
  color: rgba(207, 230, 255, 0.75);
  background: rgba(120, 200, 255, 0.05);
  border: 1px solid rgba(120, 200, 255, 0.18);
  padding: 4px 6px;
  margin: 0 0 6px;
  user-select: none;
}
.tr-dev .tr-dev-sub:hover { background: rgba(120, 200, 255, 0.12); }
.tr-dev .tr-dev-look {
  margin: 0 0 8px; padding-left: 14px;
  font-size: 10.5px; line-height: 1.4;
  color: rgba(232, 237, 247, 0.6);
  /* Scales with the screen but never collapses to nothing: a bare 34vh degenerates to 0 in
     any context where the viewport reports zero height, which would hide the checklist the
     toggle just opened. */
  max-height: max(160px, 34vh); overflow-y: auto;
  overscroll-behavior: contain;
}
.tr-dev .tr-dev-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
/* Combat-tuning stepper rows (playtest R3): − label + layout, readout centered. */
.tr-dev .tr-dev-row.tr-dev-tune { grid-template-columns: 36px 1fr 36px; align-items: stretch; }
.tr-dev .tr-dev-tune-label {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: 0.14em; color: #cfe6ff;
  border: 1px solid rgba(120, 200, 255, 0.18);
  background: rgba(120, 200, 255, 0.04);
}
.tr-dev .tr-dev-btn {
  cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #cfe6ff;
  background: rgba(120, 200, 255, 0.08);
  border: 1px solid rgba(120, 200, 255, 0.4);
  padding: 6px 4px;
  transition: background 100ms;
}
.tr-dev .tr-dev-btn:hover { background: rgba(120, 200, 255, 0.2); }
.tr-dev .tr-dev-btn.tr-dev-warn {
  color: #ffb000; border-color: rgba(255, 176, 0, 0.5); background: rgba(255, 176, 0, 0.08);
}
.tr-dev .tr-dev-btn.tr-dev-warn:hover { background: rgba(255, 176, 0, 0.2); }
.tr-dev .tr-dev-btn.tr-dev-exit {
  color: #ff7a7a; border-color: rgba(255, 122, 122, 0.5); background: rgba(255, 122, 122, 0.08);
}
.tr-dev .tr-dev-btn.tr-dev-exit:hover { background: rgba(255, 122, 122, 0.2); }
.tr-dev .tr-dev-foot {
  margin-top: 4px; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.4);
}

.tr-dev .tr-dev-cover {
  margin: 8px 0 6px;
  padding: 10px 8px;
  text-align: center;
  font-size: 14px; letter-spacing: 0.18em; font-weight: 700;
  border: 1px solid rgba(232, 237, 247, 0.3);
}
.tr-dev .tr-dev-cover[data-state="protected"] {
  color: #6dffa0;
  border-color: rgba(109, 255, 160, 0.6);
  background: rgba(109, 255, 160, 0.12);
}
.tr-dev .tr-dev-cover[data-state="exposed"] {
  color: #ff7a7a;
  border-color: rgba(255, 122, 122, 0.6);
  background: rgba(255, 122, 122, 0.12);
}

.tr-dev .tr-dev-fb {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 176, 0, 0.18);
}
.tr-dev .tr-dev-fb-head {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffb000;
  margin-bottom: 6px;
}
.tr-dev .tr-dev-fb-btn {
  cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 4px;
  border: 1px solid rgba(232, 237, 247, 0.3);
  background: rgba(232, 237, 247, 0.04);
  color: rgba(232, 237, 247, 0.7);
  transition: background 100ms, color 100ms, border-color 100ms;
}
.tr-dev .tr-dev-fb-btn:hover { background: rgba(232, 237, 247, 0.12); }
.tr-dev .tr-dev-fb-btn.tr-dev-fb-good.tr-dev-fb-active {
  color: #6dffa0;
  border-color: rgba(109, 255, 160, 0.7);
  background: rgba(109, 255, 160, 0.16);
}
.tr-dev .tr-dev-fb-btn.tr-dev-fb-needs.tr-dev-fb-active {
  color: #ffb000;
  border-color: rgba(255, 176, 0, 0.7);
  background: rgba(255, 176, 0, 0.16);
}
.tr-dev .tr-dev-fb-note {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
  color: #e8edf7;
  background: rgba(8, 12, 22, 0.7);
  border: 1px solid rgba(232, 237, 247, 0.18);
  resize: vertical;
}
.tr-dev .tr-dev-fb-note:focus {
  outline: none;
  border-color: rgba(120, 200, 255, 0.6);
}
.tr-dev .tr-dev-fb-status {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.45);
  min-height: 12px;
  margin-top: 4px;
}

/* ── Firing-range panel (ui/test-range/range-panel.js) ────────────────────
   Shares the tr-dev floating-card family; adds a DPS/total scoreboard and
   section labels between spawn rows. */
.tr-range .tr-range-board {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: stretch;
  margin-bottom: 8px;
}
.tr-range .tr-range-dps,
.tr-range .tr-range-total {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px;
  border: 1px solid rgba(109, 255, 160, 0.45);
  background: rgba(109, 255, 160, 0.07);
}
.tr-range .tr-range-total { border-color: rgba(120, 200, 255, 0.4); background: rgba(120, 200, 255, 0.06); }
.tr-range .tr-range-num {
  font-size: 18px; font-weight: 700; letter-spacing: 0.06em;
  color: #6dffa0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tr-range .tr-range-total .tr-range-num { color: #cfe6ff; }
.tr-range .tr-range-unit {
  font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.5);
}
.tr-range .tr-range-reset { align-self: stretch; }
.tr-range .tr-range-section {
  margin: 8px 0 4px;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.45);
}
/* Combatant rows pack 3–4 buttons; drop to a 3-col grid so labels fit. */
.tr-range .tr-dev-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* ── Encounter Lab panel (ui/test-range/lab-panel.js) ─────────────────────
   Shares the tr-dev + tr-range families; adds preset-selection highlight and
   the status/scorecard readouts. */
.tr-lab .tr-lab-preset { font-size: 10px; letter-spacing: 0.08em; }
.tr-lab .tr-dev-btn.tr-lab-active {
  border-color: rgba(109, 255, 160, 0.75);
  background: rgba(109, 255, 160, 0.16);
  color: #6dffa0;
}
.tr-lab .tr-lab-status {
  margin: 6px 0 2px;
  font-size: 10.5px; line-height: 1.4;
  color: rgba(232, 237, 247, 0.75);
  font-variant-numeric: tabular-nums;
}
.tr-lab .tr-lab-score { margin-bottom: 4px; }
.tr-lab .tr-lab-score-row {
  font-size: 10.5px; line-height: 1.5;
  color: rgba(207, 230, 255, 0.85);
  font-variant-numeric: tabular-nums;
}
.tr-lab .tr-lab-score-row b {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(232, 237, 247, 0.5);
  margin-right: 4px;
}

/* ── iPhone / narrow portrait ────────────────────────────────────────────
   The master-detail grid collapses to a single column: the list stays
   compact on top, the detail pane (with LAUNCH) below it. Bump tap targets
   and body text like the gear-card narrow-viewport pattern. */
@media (max-width: 560px) {
  .tr-frame { padding: 14px 14px 12px; gap: 12px; }

  .tr-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 6px; }
  .tr-title { font-size: 24px; letter-spacing: 0.14em; }
  .tr-sub { font-size: 12px; letter-spacing: 0.12em; }
  .tr-head-actions { margin-left: 0; gap: 6px; }
  .tr-head-btn { padding: 7px 10px; font-size: 11.5px; }

  .tr-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 40%) 1fr;
    gap: 12px;
    overflow: hidden;
  }
  .tr-row { font-size: 13.5px; padding: 12px; }
  .tr-detail { padding: 14px; gap: 10px; }
  .tr-detail-title { font-size: 15px; letter-spacing: 0.1em; }
  .tr-blurb { font-size: 14px; line-height: 1.5; color: rgba(232, 237, 247, 0.88); }
  .tr-look { font-size: 13px; line-height: 1.5; padding-left: 18px; color: rgba(232, 237, 247, 0.72); }
  .tr-meta { gap: 6px 8px; font-size: 11px; letter-spacing: 0.08em; }
  .tr-meta span { padding: 3px 8px; }
  .tr-status-badge { font-size: 11px; padding: 5px 9px; letter-spacing: 0.12em; }

  /* Bigger, tappable LAUNCH. iPhones lose the desktop amber outline against
     the dark frame; raise contrast + size for thumbs. */
  .tr-btn {
    font-size: 14px; letter-spacing: 0.14em;
    padding: 12px 16px;
    background: rgba(255, 176, 0, 0.14);
  }
  .tr-btn.tr-btn-secondary { background: rgba(120, 200, 255, 0.14); }
  .tr-detail-launch { align-self: stretch; text-align: center; }

  .tr-foot { font-size: 11px; letter-spacing: 0.1em; padding-top: 6px; flex-wrap: wrap; gap: 4px 12px; }
}

/* ── Short viewports — iPhone landscape / split-screen tablet ─────────────
   Keep the two-pane layout (it's exactly what a short-wide screen wants) but
   compress the chrome so the list + detail both stay usable. */
@media (min-width: 561px) and (max-height: 500px) {
  .tr-frame { padding: 10px 16px 8px; gap: 8px; }

  .tr-head { padding-bottom: 4px; }
  .tr-title { font-size: 16px; letter-spacing: 0.14em; }
  .tr-sub { font-size: 10.5px; }
  .tr-head-btn { padding: 5px 9px; font-size: 10.5px; }

  .tr-body { gap: 12px; }
  .tr-row { padding: 8px 10px; font-size: 11.5px; }
  .tr-row-range { padding: 10px; }
  .tr-detail { padding: 12px 14px; gap: 8px; }
  .tr-detail-title { font-size: 13px; }
  .tr-blurb { font-size: 12px; line-height: 1.45; color: rgba(232, 237, 247, 0.82); }
  .tr-look { font-size: 11.5px; line-height: 1.4; padding-left: 16px; color: rgba(232, 237, 247, 0.68); }
  .tr-meta { font-size: 10px; gap: 4px 6px; }
  .tr-btn { font-size: 12px; padding: 9px 14px; }

  .tr-foot { font-size: 10.5px; padding-top: 4px; }
}