/* ============================================================
   VCR design tokens & component styles
   "Modern analog deck": deep ink, warm paper, signal accents
   ============================================================ */

:root,
[data-theme="dark"] {
  /* surfaces */
  --ink-0:   #0c0d10;        /* page */
  --ink-1:   #131418;        /* panel */
  --ink-2:   #191b20;        /* card */
  --ink-3:   #22252c;        /* hover */
  --ink-4:   #2c303a;        /* border-strong */
  --line:    #1f2127;
  --line-2:  #292c34;

  /* foregrounds */
  --paper:   #ece7dd;        /* warm off-white primary text */
  --paper-2: #b7b2a7;        /* secondary */
  --paper-3: #7c7870;        /* tertiary */
  --paper-4: #4a4843;        /* dim */

  /* signal accents */
  --rec:     oklch(0.66 0.21 25);     /* signal red */
  --rec-2:   oklch(0.42 0.16 25);
  --rec-3:   oklch(0.22 0.08 25);
  --play:    oklch(0.78 0.17 145);    /* signal green */
  --play-2:  oklch(0.42 0.13 145);
  --amber:   oklch(0.82 0.16 75);     /* armed / once */
  --amber-2: oklch(0.45 0.12 75);
  --info:    oklch(0.78 0.12 230);
  /* LCD glyph color: BRIGHT, used regardless of page theme since the LCD chrome stays dark */
  --lcd:        oklch(0.92 0.19 165);
  --lcd-glow:   oklch(0.85 0.22 165);
  --lcd-dim:    oklch(0.75 0.16 165);

  /* method colors */
  --m-get:    oklch(0.78 0.13 220);
  --m-post:   oklch(0.82 0.14 145);
  --m-put:    oklch(0.82 0.16 75);
  --m-delete: oklch(0.7 0.18 25);
  --m-patch:  oklch(0.78 0.13 290);

  /* status colors */
  --st-2xx:   oklch(0.78 0.13 145);
  --st-3xx:   oklch(0.78 0.12 230);
  --st-4xx:   oklch(0.82 0.16 75);
  --st-5xx:   oklch(0.7 0.18 25);

  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6), 0 8px 24px -10px rgba(0,0,0,.5);
  --shadow-md: 0 8px 24px -10px rgba(0,0,0,.45);
}

[data-theme="light"] {
  --ink-0:   #f6f3ec;
  --ink-1:   #ece7dd;
  --ink-2:   #e3ddd0;
  --ink-3:   #d9d2c2;
  --ink-4:   #b8b0a0;
  --line:    #d4ccbb;
  --line-2:  #c4baa8;

  --paper:   #1c1d20;
  --paper-2: #44464b;
  --paper-3: #6a6c72;
  --paper-4: #92938e;

  --rec:     oklch(0.55 0.21 25);
  --rec-2:   oklch(0.68 0.18 25);
  --rec-3:   oklch(0.88 0.06 25);
  --play:    oklch(0.55 0.16 145);
  --play-2:  oklch(0.78 0.13 145);
  --amber:   oklch(0.6 0.16 75);
  --amber-2: oklch(0.78 0.14 75);
  --info:    oklch(0.55 0.13 230);
  /* LCD chrome stays dark in light theme too; keep glyphs bright */

  --m-get:    oklch(0.5 0.16 230);
  --m-post:   oklch(0.5 0.16 145);
  --m-put:    oklch(0.55 0.16 75);
  --m-delete: oklch(0.55 0.2 25);
  --m-patch:  oklch(0.5 0.16 290);

  --st-2xx:   oklch(0.55 0.16 145);
  --st-3xx:   oklch(0.5 0.14 230);
  --st-4xx:   oklch(0.55 0.18 75);
  --st-5xx:   oklch(0.55 0.2 25);

  --shadow-lg: 0 24px 60px -22px rgba(60,40,10,.18), 0 8px 24px -10px rgba(60,40,10,.12);
  --shadow-md: 0 8px 24px -12px rgba(60,40,10,.18);
}

/* ===== type ===== */
.font-sans { font-family: 'Geist', 'Inter', system-ui, sans-serif; }
.font-mono { font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; }

/* ============================================================
   ARTBOARD frame: every prototype surface sits inside one
   ============================================================ */
.vcr {
  font-family: 'Geist', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv01';
  color: var(--paper);
  background: var(--ink-0);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
.vcr *, .vcr *::before, .vcr *::after { box-sizing: border-box; }

/* ============================================================
   POPUP: compact toolbar surface (380 wide)
   ============================================================ */
.vcr-popup {
  width: 380px;
  height: 560px;
  background: var(--ink-0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

/* Title bar */
.pop-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.pop-logo {
  width: 32px; height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #1a1c22, #0d0e12);
  border: 1px solid var(--ink-4);
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pop-logo::before, .pop-logo::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1px var(--ink-0);
}
.pop-logo::before { left: 6px; }
.pop-logo::after  { right: 6px; }
.pop-logo-strip {
  position: absolute;
  left: 16px; right: 16px;
  top: 50%; transform: translateY(-50%);
  height: 4px;
  background: var(--rec);
  border-radius: 1px;
  box-shadow: 0 0 6px var(--rec);
}
.pop-title h1 {
  font-size: 13px;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pop-title-sub {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--paper-3);
  margin-top: 1px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pop-title-meta {
  margin-left: auto;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--paper-3);
  letter-spacing: 0.06em;
}

/* LCD status display */
.lcd {
  margin: 12px 12px 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, #0a0b0e, #050608);
  border: 1px solid #1a1c22;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  position: relative;
}
[data-theme="light"] .lcd {
  background: linear-gradient(180deg, #1a1b1e, #0e0f12);
  border-color: #2a2b30;
}
/* LCD glyphs stay bright in both themes (the LCD chrome is always dark) */
.lcd-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper-4);
  flex-shrink: 0;
}
.lcd-dot.rec   { background: var(--rec);   box-shadow: 0 0 10px var(--rec); animation: pulse 1.3s infinite; }
.lcd-dot.play  { background: var(--play);  box-shadow: 0 0 10px var(--play); }
.lcd-dot.armed { background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.lcd-state {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--lcd);
  text-shadow: 0 0 8px var(--lcd-glow), 0 0 2px var(--lcd-glow);
  font-weight: 500;
}
.lcd-meta {
  margin-left: auto;
  font-size: 10px;
  color: var(--lcd-dim);
  letter-spacing: 0.08em;
}
.lcd-timer {
  font-size: 10px;
  color: var(--lcd-dim);
  letter-spacing: 0.1em;
}

/* Transport buttons */
.transport {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 12px;
}
.t-btn {
  position: relative;
  padding: 14px 0 12px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--paper-2);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
  font-family: inherit;
}
.t-btn:hover { background: var(--ink-3); border-color: var(--ink-4); }
.t-btn:active { transform: translateY(1px); }
.t-btn-icon {
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
}
.t-btn-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 500;
  text-transform: uppercase;
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.t-btn.active.rec {
  background: color-mix(in oklab, var(--rec) 18%, var(--ink-2));
  border-color: var(--rec);
  color: var(--rec);
}
.t-btn.active.play {
  background: color-mix(in oklab, var(--play) 18%, var(--ink-2));
  border-color: var(--play);
  color: var(--play);
}
.t-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Section title */
.pop-section {
  padding: 14px 14px 0;
}
.pop-section-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-3);
  font-family: 'Geist Mono', ui-monospace, monospace;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pop-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Mode selector (New / Once / None) */
.mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.mode-opt {
  text-align: center;
  padding: 8px 4px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--paper-2);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mode-opt:hover { color: var(--paper); }
.mode-opt.active {
  background: var(--ink-3);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
.mode-opt-glyph {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mode-opt-label {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--paper-3);
  text-transform: uppercase;
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.mode-opt.active .mode-opt-label { color: var(--paper-2); }
.mode-opt.active.once .mode-opt-glyph { color: var(--amber); }
.mode-opt.active.new .mode-opt-glyph  { color: var(--play); }
.mode-help {
  font-size: 11px;
  color: var(--paper-3);
  margin-top: 8px;
  line-height: 1.5;
  font-family: inherit;
  min-height: calc(11px * 1.5 * 3); /* reserve 3 lines so domain filter below doesn't jump */
}
.mode-help strong { color: var(--paper-2); font-weight: 500; }

/* Domain filter */
.field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .12s;
}
.field:focus-within { border-color: var(--ink-4); }
.field-icon { color: var(--paper-3); flex-shrink: 0; }
.field input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
}
.field input::placeholder { color: var(--paper-4); }

/* Secondary actions */
.pop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 14px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.s-btn {
  padding: 9px 10px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--paper-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .12s, color .12s, border-color .12s;
}
.s-btn:hover { background: var(--ink-2); color: var(--paper); border-color: var(--ink-4); }
.s-btn.danger:hover { color: var(--rec); border-color: var(--rec); background: color-mix(in oklab, var(--rec) 6%, transparent); }

/* Toggle chips for ignore options */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-size: 11px;
  border-radius: 999px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  color: var(--paper-3);
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.chip:hover { color: var(--paper-2); border-color: var(--ink-4); }
.chip.on {
  background: color-mix(in oklab, var(--play) 10%, var(--ink-1));
  border-color: color-mix(in oklab, var(--play) 35%, var(--line));
  color: var(--paper);
}
.chip-check {
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1px solid var(--paper-4);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chip.on .chip-check {
  background: var(--play);
  border-color: var(--play);
}