/* Amnesia panel — base + lightweight components over the _ds tokens. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg-app); color: var(--fg-1); font-family: var(--font-mono, monospace); }
a { color: var(--fg-accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: rgba(102,255,0,.28); }
/* Scrollbars: thin, invisible until the pane is hovered, so a scrollable page
   does not draw a permanent browser-default gutter. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
*:hover::-webkit-scrollbar-thumb { background: var(--ink-400); background-clip: content-box; }
*:hover::-webkit-scrollbar-thumb:hover { background: var(--ink-600); background-clip: content-box; }
/* Firefox fallback (no hover reveal available) */
html { scrollbar-width: thin; scrollbar-color: var(--ink-400) transparent; }

h1 { margin: 0; font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 32px; text-transform: uppercase; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.mono-num { font-variant-numeric: tabular-nums; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  background: var(--accent); color: var(--fg-on-accent); transition: background 120ms linear, color 120ms; clip-path: var(--clip-chamfer-sm, none); }
.btn:hover { background: var(--accent-hover); }
.btn.sm { height: 28px; padding: 0 12px; font-size: 12px; }
.btn.secondary { background: transparent; border-color: var(--border-2); color: var(--fg-1); }
.btn.secondary:hover { background: var(--bg-hover); }
.btn.ghost { background: transparent; color: var(--fg-2); }
.btn.ghost:hover { color: var(--fg-1); background: var(--bg-hover); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.full { width: 100%; }

/* inputs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; color: var(--fg-3); letter-spacing: .04em; }
.input, .select { width: 100%; height: 36px; padding: 0 12px; background: var(--bg-sunken); color: var(--fg-1);
  border: 1px solid var(--border-2); font-family: var(--font-mono); font-size: 13px; }
.input.sm, .select.sm { height: 28px; font-size: 12px; }
.input:focus, .select:focus { outline: none; border-color: var(--accent); }
.input.lg { height: 44px; font-size: 15px; letter-spacing: .08em; }
.err { font-size: 11px; color: var(--danger); }
.hint { font-size: 11px; color: var(--fg-3); }

/* card with chamfer frame */
.frame { clip-path: var(--clip-chamfer-md, none); background: var(--border-2); padding: 1px; }
.frame > .inner { clip-path: var(--clip-chamfer-md, none); background: var(--bg-surface); }
.card { border: 1px solid var(--border-1); background: var(--bg-surface); }
.card > .card-h { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border-1); }
.card > .card-h .title { font-size: 13px; font-weight: 600; }
.card > .card-h .meta { font-size: 11px; color: var(--fg-3); }
.card > .card-b { padding: 16px; }

/* badge */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.accent { color: var(--accent); border-color: var(--accent-dim); }
.badge.info { color: var(--info); border-color: var(--info); }
.badge.warning { color: var(--warning); border-color: var(--warning); }
.badge.danger { color: var(--danger); border-color: var(--danger); }

/* switch */
.switch { position: relative; width: 40px; height: 22px; background: var(--ink-300); border: 1px solid var(--border-2); cursor: pointer; flex: none; transition: background 120ms; }
.switch.on { background: var(--accent); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--ink-0); transition: left 120ms; }
.switch.on .knob { left: 20px; }

/* tabs */
.tabs { display: inline-flex; gap: 4px; }
.tab { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-3); cursor: pointer; border: 1px solid transparent; }
.tab.active { color: var(--fg-1); border-color: var(--border-2); background: var(--bg-surface); }
.tab .count { font-size: 10px; color: var(--fg-3); }

/* table rows */
.row:hover { background: var(--bg-hover); }

/* toasts + dialog */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: 340px; }
.toast { clip-path: var(--clip-chamfer-sm, none); background: var(--bg-raised); border-left: 3px solid var(--accent); padding: 12px 14px; }
.toast.danger { border-color: var(--danger); } .toast.warning { border-color: var(--warning); } .toast.info { border-color: var(--info); } .toast.success { border-color: var(--accent); }
.toast .tt { font-size: 12px; font-weight: 700; }
.toast .tm { font-size: 11px; color: var(--fg-2); margin-top: 2px; word-break: break-all; }
#dialog .scrim { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; }
#dialog .box { width: 420px; max-width: calc(100vw - 32px); }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px), 1fr)); gap: 16px; }
.hidden { display: none !important; }

/* probe */