/*
 * record-design.css — scoped enhancements for /record.
 * Owns: rts-* classes, mobile workspace layout overrides.
 * Does NOT override stripe-style.css base tokens or shared nav.
 */

/* ── Panel placeholder (shown when no recap is selected) ───────────── */
.rts-panel-placeholder {
  display: none;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px);
  text-align: center;
  border: 1px dashed var(--hairline, rgba(100,116,139,0.3));
  margin: 0 0 24px;
}
/* JS-managed via emptyState.hidden + .is-active; SSR fallback via body attr */
.rts-panel-placeholder.is-active {
  display: block;
}
[data-view-mode="summary"] .rts-panel-placeholder:not([hidden]) {
  display: block;
}
.rts-panel-placeholder__msg {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin: 0 0 6px;
}
.rts-panel-placeholder__sub {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  margin: 0;
}

/* ── Track filter widget ────────────────────────────────────────────── */
.rts-track-filter {
  padding: 10px 14px 2px;
  background: rgba(200,167,74,0.05);
  border-left: 3px solid #c8a74a;
  margin-bottom: 10px;
}
.rts-track-filter__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary, #64748b);
  margin-bottom: 5px;
}
.rts-track-filter__select {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 0.85rem;
  border: 1px solid var(--hairline, rgba(100,116,139,0.3));
  background: #fff;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
  appearance: auto;
}
.rts-track-filter__select:focus {
  outline: 2px solid #c8a74a;
  outline-offset: 1px;
}

/* ── Scope label (under filter widget and in evidence notes) ────────── */
.rts-scope-label {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-secondary, #64748b);
  margin: 6px 0 10px;
}
.rts-scope-label--active {
  color: #0f3d2c;
  font-weight: 600;
}

/* ── Filter utility: hides a list row from JS track-filter ──────────── */
.rts-hidden-by-filter {
  display: none !important;
}

/* ── Missing-value hint (zero vs null) ─────────────────────────────── */
.rts-missing {
  color: var(--text-secondary, #94a3b8);
  font-style: italic;
}

/* ── Mobile workspace layout improvements ───────────────────────────── */
/*
 * On narrow viewports the sidebar list should stack above the panel,
 * stay compact, and the track filter control should be finger-friendly.
 */
@media (max-width: 800px) {
  /* Collapse sidebar to a horizontal scroll strip */
  .record-workspace__list {
    order: -1;           /* list appears above panels on mobile */
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* The rec-list rows become horizontal chips in a flex strip */
  .rec-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .rec-list-row {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 220px;
    border-right: 1px solid var(--hairline, rgba(100,116,139,0.2));
  }

  /* Collapse the stat row inside each list item to save horizontal space */
  .rec-list-stats {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .rec-list-stat-label {
    display: inline; /* Keep every number identifiable on narrow screens. */
  }
  .rec-br-pill {
    font-size: 0.75rem;
    padding: 1px 6px;
  }

  /* Track filter: full-width tap target */
  .rts-track-filter {
    border-left: none;
    border-top: 3px solid #c8a74a;
    padding: 10px 14px 6px;
  }
  .rts-track-filter__select {
    font-size: 1rem;    /* avoids iOS auto-zoom on focus */
    padding: 8px 10px;
  }

  /* Recap panel shell takes full width */
  .recap-panel-shell {
    width: 100%;
  }
}

/* ── Recap panel heading: make focusable heading visually inert ─────── */
/*
 * When record.js sets tabindex="-1" on .recap-panel-title for keyboard focus
 * transfer, suppress the default :focus ring (we rely on the panel's is-active
 * border to communicate selection).
 */
.recap-panel-title:focus {
  outline: none;
}
.recap-panel-title:focus-visible {
  outline: 2px solid #c8a74a;
  outline-offset: 2px;
}