/* Atelier Attack Lab — console. Same identity as the reference map:
   ink/brass/bone ground, serif display, mono "hallmark" labels. */
:root {
  --ink:#12151A; --raised:#171B21; --raised-2:#1E232B; --raised-3:#252B34;
  --bone:#EDEAE3; --bone-dim:#A8A499; --bone-faint:#726E64;
  --brass:#9C7A3C; --brass-light:#C9A464;
  --line:#2A2E36; --line-soft:#21252C;
  --ok:#8AA07D; --ok-bg:rgba(138,160,125,.15);
  --warn:#C6853F; --warn-bg:rgba(198,133,63,.15);
  --crit:#CB5943; --crit-bg:rgba(203,89,67,.15);
  --run:#6E88A6; --run-bg:rgba(110,136,166,.16);
  --font-display:Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
  --font-mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --ink:#EFEBE1; --raised:#F7F4EC; --raised-2:#FBF9F3; --raised-3:#FFFFFF;
  --bone:#1C2027; --bone-dim:#5C5749; --bone-faint:#8A836F;
  --brass:#8A6A2E; --brass-light:#6F5320;
  --line:#DAD3C2; --line-soft:#E4DECF;
  --ok:#5E7150; --ok-bg:rgba(94,113,80,.14);
  --warn:#A66A22; --warn-bg:rgba(166,106,34,.13);
  --crit:#B0472F; --crit-bg:rgba(176,71,47,.11);
  --run:#456079; --run-bg:rgba(69,96,121,.12);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }  /* beat class rules that set display:flex */
body { margin:0; background:var(--ink); color:var(--bone); font-family:var(--font-body);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--font-display); font-weight:500; margin:0; letter-spacing:-.01em; }
a { color:var(--brass-light); }
:focus-visible { outline:2px solid var(--brass-light); outline-offset:2px; border-radius:3px; }

.hallmark { font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--bone-dim); }
.muted { color:var(--bone-dim); } .small { font-size:12.5px; }
.error { color:var(--crit); }
.mono { font-family:var(--font-mono); font-size:.86em; }

/* topbar */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb,var(--brass) 7%,transparent), transparent); }
.brand h1 { font-size:20px; line-height:1; margin-top:2px; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.whoami { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--bone-dim); }
.whoami .rolepill { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; border:1px solid var(--brass); color:var(--brass-light); }

.ghost-btn { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-dim); background:transparent; border:1px solid var(--line); padding:6px 11px;
  border-radius:999px; cursor:pointer; }
.ghost-btn:hover { border-color:var(--brass); color:var(--bone); }
.ghost-btn.small { padding:4px 9px; }
.primary-btn { font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--brass-light); border:1px solid var(--brass-light); padding:10px 16px;
  border-radius:6px; cursor:pointer; font-weight:600; }
:root[data-theme="light"] .primary-btn { color:#fff; }
.primary-btn:hover { background:var(--brass); border-color:var(--brass); }
.primary-btn:disabled { opacity:.4; cursor:not-allowed; }
.primary-btn.small { padding:7px 12px; font-size:11px; }

/* auth gate */
.gate { display:flex; justify-content:center; padding:80px 20px; }
.gate-card { max-width:420px; width:100%; background:var(--raised); border:1px solid var(--line);
  border-radius:12px; padding:28px; }
.gate-card h2 { font-size:22px; margin:8px 0 10px; }
.gate-card form { display:flex; gap:8px; margin-top:16px; }
.gate-card input { flex:1; }
/* attack playbook */
.pb-summary { cursor:pointer; list-style:none; }
.pb-summary::-webkit-details-marker { display:none; }
#playbookPanel details > summary { margin:-2px 0 0; }
#playbookPanel details[open] > summary { margin-bottom:14px; }
.playbook-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.pb-card { background:var(--raised); border:1px solid var(--line); border-radius:10px; padding:14px; }
.pb-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pb-head h3 { font-size:14px; margin:0; }
.pb-id { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em;
  color:var(--brass-light); background:color-mix(in srgb, var(--brass) 14%, transparent);
  border:1px solid var(--brass); border-radius:6px; padding:2px 6px; }
.pb-card p { font-size:12.5px; line-height:1.5; color:var(--bone-dim); margin:0 0 8px; }
.pb-meta { font-size:11.5px !important; margin:0 0 4px !important; }
.pb-meta b { color:var(--bone); font-weight:600; }
.pb-meta code { font-family:var(--font-mono); font-size:10.5px; }
.pb-foot { margin-top:12px; }

/* login form stacks username / password / button */
#loginForm { flex-direction:column; }
#loginForm input, #loginForm button { width:100%; }
/* inline set-password form in the admin accounts table */
.pw-form { display:flex; gap:6px; align-items:center; margin:0; }
.pw-form input { width:auto; flex:1; min-width:140px; }

/* layout */
.app { padding:20px 22px 60px; max-width:1240px; margin:0 auto; }
.grid { display:grid; grid-template-columns:360px 1fr; gap:16px; align-items:start; }
.panel { background:var(--raised); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:16px; min-width:0; }
/* Grid/flex children must be allowed to shrink below content width so wide
   tables scroll inside their own overflow-x box instead of blowing out the
   track. Without this, a 1fr column expands to the findings table's width. */
.results, .result-cards, .rcard { min-width:0; }
.panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }

/* form fields */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:13px; }
.field .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-faint); }
.field .k em { font-style:normal; color:var(--bone-faint); text-transform:none; letter-spacing:0; }
input, select { font-family:var(--font-body); font-size:14px; color:var(--bone); background:var(--raised-2);
  border:1px solid var(--line); border-radius:6px; padding:9px 11px; width:100%; }
input:focus, select:focus { border-color:var(--brass); outline:none; }
.advanced { margin:6px 0 14px; }
.advanced summary { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-dim); cursor:pointer; }
.adv-grid { display:grid; gap:10px; margin-top:12px; }
#runHint { margin:10px 0 0; }

/* results */
.results { min-height:220px; }
.result-cards { display:grid; gap:14px; }
.empty { text-align:center; padding:30px 10px; }
.rcard { border:1px solid var(--line); border-radius:9px; background:var(--raised-2); padding:14px; }
.rcard-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rcard-head h3 { font-size:16px; flex:1; }

.status { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status.queued { color:var(--bone-dim); background:var(--line-soft); }
.status.running { color:var(--run); background:var(--run-bg); }
.status.running::before { animation:pulse 1s infinite; }
.status.done { color:var(--ok); background:var(--ok-bg); }
.status.error { color:var(--crit); background:var(--crit-bg); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
@media (prefers-reduced-motion:reduce){ .status.running::before{ animation:none; } }

/* stat tiles */
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-bottom:12px; }
.tile { border:1px solid var(--line); border-radius:7px; padding:9px 10px; background:var(--raised); min-width:0; }
.tile .tk { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-faint); }
.tile .tv { font-family:var(--font-mono); font-size:17px; color:var(--bone); margin-top:3px; font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere; word-break:break-word; }
.tile.flag-true .tv { color:var(--crit); } .tile.flag-false .tv { color:var(--ok); }

/* findings + tables */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:9px 11px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
thead th { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bone-dim); background:var(--raised-2); font-weight:500; }
tbody tr:hover td { background:color-mix(in srgb,var(--brass) 5%,transparent); }
.findings-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-faint); margin:4px 0 6px; }
.rcard .error-box { color:var(--crit); font-size:13px; background:var(--crit-bg); border-radius:6px; padding:8px 10px; }
.reset-row { margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.reset-btn { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--warn); background:transparent; border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));
  border-radius:5px; padding:6px 12px; cursor:pointer; }
.reset-btn:hover { background:var(--warn-bg); }
.reset-btn:disabled { opacity:.6; cursor:default; }
.pager { display:flex; align-items:center; gap:12px; margin-top:10px; }
.page-btn { cursor:pointer; }
.page-btn:disabled { opacity:.4; cursor:default; }
.page-ind { font-family:var(--font-mono); font-size:11px; color:var(--bone-dim); font-variant-numeric:tabular-nums; }
.hist-row { cursor:pointer; }
.hist-row td .mini { font-family:var(--font-mono); font-size:11px; }

/* admin */
.add-target { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.add-target input, .add-target select { width:auto; flex:1; min-width:120px; }
.del-btn { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--crit); background:transparent; border:1px solid color-mix(in srgb,var(--crit) 45%,var(--line));
  border-radius:5px; padding:4px 9px; cursor:pointer; }
.del-btn:hover { background:var(--crit-bg); }

/* toast */
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--raised-3);
  border:1px solid var(--line); border-radius:8px; padding:11px 16px; font-size:13px; box-shadow:0 6px 24px rgba(0,0,0,.3); z-index:50; }
.toast.err { border-color:color-mix(in srgb,var(--crit) 50%,var(--line)); color:var(--crit); }

@media (max-width:880px){
  .grid { grid-template-columns:1fr; }
}