/* ACDC v6 · "volt" skin — inspired by the Amesh app (webv2), with more bite.
 * Loaded last; remaps ACDC's design tokens onto Amesh's language:
 * warm-black void, hairline borders, volt-lime accent, glowing status dots,
 * mono uppercase eyebrows, light-weight display numerals.
 * Light theme (explicit user choice) keeps the original palette.
 */

:root {
  color-scheme: dark;
  /* Surfaces: warm black, like Amesh --void */
  --bg: #0c0b0a;
  --surface: #171512;
  --surface-2: #1d1a15;
  --sunken: #100f0d;
  --overlay: #1d1a15;
  --scrim: rgba(0, 0, 0, 0.6);

  /* Ink */
  --ink: #f4f3f1;
  --ink-2: #a7a29a;
  --ink-3: #7b8189;
  --ink-4: #5b626c;
  --ink-faint: #454b52;
  --field-line: #37312a;
  --line: #2a251f;
  --line-2: #37312a;

  /* Rail: same void, hairline edge */
  --rail-bg: #100f0d;
  --rail-ink: #f4f3f1;
  --rail-ink-2: #7b8189;
  --rail-line: #2a251f;
  --rail-hover: #1d1a15;
  --rail-active: #241f19;

  /* Accent: volt lime — the bite */
  --accent: #c8f03e;
  --accent-hover: #d9f55c;
  --accent-mark: #e3ff55;
  --accent-ink: #a8cc1f;
  --accent-bg: rgba(200, 240, 62, 0.10);
  --accent-line: rgba(200, 240, 62, 0.35);
  --on-accent: #0c0b0a;

  /* Focus: volt */
  --focus: #c8f03e;
  --ref: #a6a8ff;
  --ref-hover: #c3c5ff;

  --shadow-pop: 0 0 0 1px rgba(200, 240, 62, 0.18), 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-dialog: 0 0 0 1px rgba(200, 240, 62, 0.14), 0 24px 64px rgba(0, 0, 0, 0.6);
}

/* Dark theme choice: identical volt skin */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0c0b0a; --surface: #171512; --surface-2: #1d1a15; --sunken: #100f0d;
  --overlay: #1d1a15; --ink: #f4f3f1; --ink-2: #a7a29a; --ink-3: #7b8189;
  --ink-4: #5b626c; --ink-faint: #454b52; --line: #2a251f; --line-2: #37312a;
  --rail-bg: #100f0d; --rail-line: #2a251f; --rail-hover: #1d1a15; --rail-active: #241f19;
  --accent: #c8f03e; --accent-hover: #d9f55c; --accent-mark: #e3ff55;
  --accent-ink: #a8cc1f; --accent-bg: rgba(200, 240, 62, 0.10);
  --accent-line: rgba(200, 240, 62, 0.35); --on-accent: #0c0b0a; --focus: #c8f03e;
}

/* ---------- Hairlines and glow, Amesh-style ---------- */
.panel, .table-wrap, .path {
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.panel:focus-within { border-color: var(--line-2); box-shadow: 0 0 0 1px var(--line-2); }
.callout { border-radius: 12px; box-shadow: none; }

/* ---------- Buttons: hairline chrome, volt primary with glow ---------- */
.btn { border-radius: 8px; }
.btn[data-variant='primary'] {
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  box-shadow: 0 0 0 1px rgba(200, 240, 62, 0.35), 0 4px 24px rgba(200, 240, 62, 0.18);
}
.btn[data-variant='primary']:hover { background: var(--accent-hover); box-shadow: 0 0 0 1px rgba(200, 240, 62, 0.5), 0 6px 32px rgba(200, 240, 62, 0.28); }
.btn[data-variant='primary']:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Inputs: sunken wells ---------- */
.input, .select, .textarea { background: var(--sunken); border-color: var(--line-2); border-radius: 8px; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 240, 62, 0.14);
}

/* ---------- Rail: glowing active marker, Amesh pulse ---------- */
.rail-item[aria-current='page']::before {
  background: var(--accent-mark); box-shadow: 0 0 10px rgba(227, 255, 85, 0.6);
}
.rail-badge { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 12px rgba(200, 240, 62, 0.35); }
.rail :focus-visible { outline-color: var(--accent); }

/* ---------- Eyebrows and mono: Amesh voice ---------- */
.eyebrow { font-family: var(--font-mono); letter-spacing: 0.09em; }

/* ---------- Tables: hairline strips ---------- */
.table tbody tr { transition: background var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr[aria-selected='true'] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- Selection, scrollbars ---------- */
::selection { background: rgba(200, 240, 62, 0.25); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ---------- Sign-in: the Amesh onboard treatment ---------- */
.signin {
  background:
    radial-gradient(circle at 12% -10%, rgba(200, 240, 62, 0.10), transparent 28rem),
    radial-gradient(circle at 90% 110%, rgba(139, 143, 255, 0.10), transparent 26rem),
    var(--bg);
}
.signin-panel { width: min(460px, 100%); gap: var(--s4); animation: signin-rise 420ms var(--ease) both; }
@keyframes signin-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .signin-panel { animation: none; } }
.signin-brand-mark { height: 30px; width: auto; fill: var(--ink); filter: drop-shadow(0 0 12px rgba(200, 240, 62, 0.25)); }
.signin-panel h1 { font-size: 28px; font-weight: 400; letter-spacing: -0.03em; }
.signin-note { font-size: var(--text-md); line-height: 1.5; }
.signin-list, .signin-form, .signin-gh {
  border-radius: 12px; border-color: var(--line); box-shadow: none;
  background: var(--surface);
}
.signin-list:focus-within, .signin-form:focus-within, .signin-gh:focus-within { border-color: var(--line-2); }
.signin-person:hover { background: var(--surface-2); }
.signin-gh-code { background: var(--sunken); border: 1px solid var(--line-2); color: var(--accent-mark); text-shadow: 0 0 14px rgba(227, 255, 85, 0.35); }
.signin-panel > * { width: 100%; }
.signin-brand { margin-bottom: var(--s2); }
.signin-actions .btn { width: 100%; }
.signin-gh-start { align-self: stretch; width: 100%; }
.signin footer.signin-note { margin-top: var(--s2); font-size: var(--text-xs); color: var(--ink-faint); text-align: center; }

/* ---------- Page heads: light display weight, Amesh-style ---------- */
.page-head h1, .page-title { font-weight: 400; letter-spacing: -0.025em; }

/* ---------- Create screen: join link glows ---------- */
.cr-join-url { background: var(--sunken); border-color: var(--line-2); color: var(--accent-ink); }
.cr-panel { border-radius: 12px; box-shadow: none; }
.cr-panel:focus-within { border-color: var(--line-2); box-shadow: 0 0 0 1px var(--line-2); }
.cr-foot { border-radius: 12px; box-shadow: none; }

/* ---------- Agent registry: human items BLOCK, agent items wait ---------- */
/* Human items: volt hold tone — they block the queue until a person acts. */
#queue-human .section-head h2 { color: var(--accent-mark); }
#queue-human .table tbody tr { box-shadow: inset 3px 0 0 var(--accent); }
#queue-human .table tbody tr:hover { background: var(--surface-2); }
#queue-human .section-note { color: var(--accent-ink); font-weight: 600; }
/* Agent items: neutral — waiting for capacity only. */
#queue-agent .table tbody tr { box-shadow: inset 3px 0 0 var(--ink-4); }
#queue-agent .table tbody tr:hover { background: var(--surface-2); }
/* Working agents glow; watching ones are steady; offline dim. */
#roster .table tbody tr[data-state='working'] { box-shadow: inset 3px 0 0 var(--accent); }
#roster .table tbody tr[data-state='watching'] { box-shadow: inset 3px 0 0 var(--ok-mark, #4bd6a0); }
#roster .table tbody tr[data-state='offline'] { opacity: 0.55; }