/* nes-save-state.css: styles for R-Z5.5.Y-SAVE-STATE-2026-05-16.
 *
 * Houses the .va-cog-nes-save-* token namespace used by the wk-6 NES
 * debugger's 4-slot save/load surface. Lives in a separate file (NOT
 * portal.css, NOT nes-debugger.css) per the now-sextuple-vouched
 * scoped-CSS-file pattern (portal-toc.css + six-oh-two-illegal.css +
 * nes20-extension.css + tilemap-palette.css + nes-debugger.css +
 * this file). render.py copy_theme() auto-discovers it under
 * courses/_pipeline/theme/.
 *
 * Mobile-first per Z5.1 L1: 4 slot pills + 2 action buttons stay
 * within a 320px viewport with no horizontal scroll.
 *
 * Tap-target floors:
 *   - slot-pill buttons (S1 / S2 / S3 / S4) are PRIMARY tap affordances
 *     for slot selection; 44x44 minimum per WCAG 2.5.5.
 *   - Save + Load action buttons share the .va-cog-nes-debugger-control-btn
 *     class so they inherit the same 44x44 floor from nes-debugger.css.
 *   - per-slot clear (×) button is a DENSE row-internal affordance;
 *     28x28 floor per the essential-density exception nes-debugger.css
 *     uses for the flag-row cells.
 *
 * License: (c) 2026 Virtus Cyber Academy.
 */

/* ============================================================
 * Top-level save-state row wrapper.
 * Sits above the panel stage; full-width band.
 * ============================================================ */
.va-cog-nes-save-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.9rem 0;
  padding: 0.7rem 0.8rem;
  background: var(--bg-card-sunken, #0c0c0c);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
}

.va-cog-nes-save-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold, #fbbf24);
}

/* ============================================================
 * 4-slot pill row.
 * Wide layout: 4 slots in a single row.
 * Narrow layout: 2x2 grid so 360px viewports do not horizontal-scroll.
 * ============================================================ */
.va-cog-nes-save-slot-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.va-cog-nes-save-slot {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "key clear"
    "status status";
  align-items: center;
  gap: 0.2rem 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.5rem;
  background: var(--bg-card, #111);
  border: 1px solid var(--border, #333);
  border-radius: 5px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
}

.va-cog-nes-save-slot:hover {
  border-color: var(--green, #4ade80);
}

.va-cog-nes-save-slot[data-selected="true"] {
  border-color: var(--green, #4ade80);
  background: rgba(74, 222, 128, 0.08);
  outline: 1px solid var(--green, #4ade80);
  outline-offset: -1px;
}

.va-cog-nes-save-slot-key {
  grid-area: key;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fg, #e2e8f0);
}

.va-cog-nes-save-slot-clear {
  grid-area: clear;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--fg-muted, #94a3b8);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.va-cog-nes-save-slot-clear:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg, #e2e8f0);
}

.va-cog-nes-save-slot-clear[hidden] {
  display: none;
}

.va-cog-nes-save-slot-status {
  grid-area: status;
  font-size: 0.72rem;
  color: var(--fg-muted, #94a3b8);
  font-family: var(--mono, ui-monospace, monospace);
}

.va-cog-nes-save-slot[data-slot-state="occupied"] .va-cog-nes-save-slot-status {
  color: var(--green, #4ade80);
}

.va-cog-nes-save-slot[data-slot-state="wrong-rom"] .va-cog-nes-save-slot-status {
  color: var(--amber, #f59e0b);
}

.va-cog-nes-save-slot[data-slot-state="empty"] .va-cog-nes-save-slot-status {
  color: var(--fg-muted, #94a3b8);
  font-style: italic;
}

/* ============================================================
 * Action row: Save + Load buttons.
 * Reuse the existing .va-cog-nes-debugger-control-btn for visual
 * parity with the Step / Run / Pause / Reset buttons; an additional
 * `.va-cog-nes-save-action-btn` hook lets us style the disabled
 * Load button distinctly when the selected slot is EMPTY / WRONG_ROM.
 * ============================================================ */
.va-cog-nes-save-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.va-cog-nes-save-action-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
 * Mobile breakpoint: 2x2 slot grid + a touch more padding so the
 * 360px-wide viewports stay clean. Action buttons remain full-width
 * via the existing nes-debugger.css control-btn rules.
 * ============================================================ */
@media (max-width: 480px) {
  .va-cog-nes-save-slot-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .va-cog-nes-save-slot {
    min-height: 48px;
    padding: 0.45rem 0.55rem;
  }
  .va-cog-nes-save-slot-status {
    font-size: 0.7rem;
  }
}