/* =====================================================================
   CODEX ANTI-CHEAT — Control Plane UI
   Aligned to the CodeX site theme (navy + blue accent, Readex Pro, site radii)
   with an iOS-17 "grouped list / inset settings" aesthetic. Scoped under .ac.
   All colors come from the site's :root tokens — no bespoke palette.
   ===================================================================== */
.ac {
  --ac-accent: var(--accent);
  --ac-accent-2: var(--accent-2);
  --ac-soft: rgba(31, 143, 255, 0.12);
  --ac-line: var(--border);
  --ac-sep: rgba(120, 160, 210, 0.12);
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--text-normal);
}

/* ── product hero (feels like a CodeX product tile) ───────────────────── */
.ac-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid var(--ac-line);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(31, 143, 255, 0.10), transparent 55%),
    var(--bg-secondary);
}
.ac-hero-icon {
  width: 66px; height: 66px; flex-shrink: 0;
  border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep));
  box-shadow: 0 12px 30px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
}
.ac-hero-txt { flex: 1; min-width: 0; }
.ac-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--accent-2); text-transform: uppercase; }
.ac-title { margin: 7px 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.ac-sub { margin: 0; color: var(--text-faint); font-size: 13.5px; max-width: 64ch; line-height: 1.6; }
.ac-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.ac-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── pills / chips ────────────────────────────────────────────────────── */
.ac-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-faint); background: var(--bg-tertiary); border: 1px solid var(--ac-line); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }

/* ── license bar (single grouped row) ─────────────────────────────────── */
.ac-licbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--ac-line); border-radius: var(--radius-sm); flex-wrap: wrap; }
.ac-licbar > label { font-size: 12px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.ac-licbar select { flex: 1; min-width: 260px; }

/* ── status strip (compact, real numbers) ─────────────────────────────── */
.ac-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ac-chip { background: var(--bg-secondary); border: 1px solid var(--ac-line); border-radius: var(--radius-sm); padding: 15px 16px; }
.ac-chip-l { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.ac-chip-v { font-size: 26px; font-weight: 800; margin-top: 7px; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.ac-chip-s { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.ac-chip.good .ac-chip-v { color: #4ce0a0; }
.ac-chip.warn .ac-chip-v { color: #f0b34a; }
.ac-chip.accent .ac-chip-v { color: var(--accent-2); }

/* ── iOS-17 grouped sections ──────────────────────────────────────────── */
.ac-group { display: flex; flex-direction: column; gap: 9px; }
.ac-glabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; }
.ac-glabel h3 { font-size: 12.5px; font-weight: 800; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.ac-glabel h3 svg { color: var(--accent-2); }
.ac-glabel .ac-glabel-act { display: flex; gap: 8px; align-items: center; }
.ac-card { background: var(--bg-secondary); border: 1px solid var(--ac-line); border-radius: var(--radius); overflow: hidden; }
.ac-card.pad { padding: 6px 0; }

/* rows with iOS inset separators */
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 11px 16px; position: relative; }
.ac-row + .ac-row::before { content: ''; position: absolute; top: 0; inset-inline-start: 16px; inset-inline-end: 0; height: 1px; background: var(--ac-sep); }
.ac-row.off { opacity: .55; }
.ac-row.tap { cursor: pointer; transition: background .14s; }
.ac-row.tap:hover { background: var(--bg-hover); }
.ac-row-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-row-l b { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ac-row-l small { color: var(--text-faint); font-size: 12px; }
.ac-row-c { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ac-row-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ac-soft); color: var(--accent-2); flex-shrink: 0; }
.ac-chev { color: var(--text-dim); flex-shrink: 0; }

/* ── controls ─────────────────────────────────────────────────────────── */
.ac { color-scheme: dark; } /* native controls (number spinners, dropdowns) render dark, never white */
.ac select, .ac input[type="text"], .ac input[type="number"], .ac input:not([type]), .ac textarea {
  background: var(--bg-input); color: var(--text); border: 1px solid var(--bg-floating);
  border-radius: var(--radius-xs); padding: 9px 12px; font: inherit; outline: none;
  color-scheme: dark;
  transition: border-color .15s, box-shadow .15s;
}
.ac select:focus, .ac input:focus, .ac textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ac-soft); }
/* the number spinner turned the field white — force it dark, keep it usable */
.ac input[type="number"]::-webkit-inner-spin-button,
.ac input[type="number"]::-webkit-outer-spin-button { opacity: 1; filter: invert(0.85) hue-rotate(180deg); }
/* autofill paints inputs white/yellow — override to the dark field */
.ac input:-webkit-autofill, .ac input:-webkit-autofill:hover, .ac input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset; caret-color: var(--text);
}
.ac .btn-accent { background: var(--accent); color: #fff; }
.ac .btn-accent:hover { background: var(--accent-deep); }
.ac .btn-accent:disabled { opacity: .5; cursor: not-allowed; }
.ac .btn.active { border-color: var(--accent); color: var(--accent-2); background: var(--ac-soft); }
.ac .btn-sm { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 13px; }

/* ── iOS toggle ───────────────────────────────────────────────────────── */
.ac-toggle { width: 46px; height: 28px; border-radius: 999px; border: 1px solid var(--ac-line); background: var(--bg-elevated); position: relative; cursor: pointer; padding: 0; transition: background .2s, border-color .2s; flex-shrink: 0; }
.ac-toggle-dot { position: absolute; top: 2px; inset-inline-start: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); transition: inset-inline-start .2s; }
.ac-toggle.on { background: var(--accent); border-color: transparent; }
.ac-toggle.on .ac-toggle-dot { inset-inline-start: 22px; }

/* ── help badge ───────────────────────────────────────────────────────── */
.ac-help { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--ac-soft); color: var(--accent-2); font-size: 11px; font-weight: 700; cursor: help; }

/* ── settings editor ──────────────────────────────────────────────────── */
.ac-editor { display: flex; flex-direction: column; gap: 18px; }
.ac-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-toolbar-l, .ac-toolbar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-search { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--bg-floating); border-radius: var(--radius-xs); padding: 0 12px; }
.ac-search svg { color: var(--text-dim); }
.ac-search input, .ac .ac-search input:focus { border: none; background: transparent; padding: 9px 4px; min-width: 190px; box-shadow: none; }
.ac-back { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--accent-2); font: inherit; font-weight: 700; cursor: pointer; padding: 4px 2px; }

/* category segmented control */
.ac-seg { display: flex; gap: 6px; overflow-x: auto; padding: 6px 6px 11px; background: var(--bg-tertiary); border: 1px solid var(--ac-line); border-radius: 15px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
.ac-seg::-webkit-scrollbar { height: 8px; }
.ac-seg::-webkit-scrollbar-track { background: transparent; margin: 0 12px; }
.ac-seg::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 8px; border: 2px solid var(--bg-tertiary); min-width: 40px; }
.ac-seg::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }
.ac-seg.dragging { cursor: grabbing; scroll-behavior: auto; }
.ac-seg-item { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: none; background: transparent; color: var(--text-faint); font: inherit; font-weight: 600; cursor: pointer; border-radius: 10px; white-space: nowrap; transition: color .15s, background .15s; }
.ac-seg-item svg { color: inherit; opacity: .8; flex-shrink: 0; }
.ac-seg-item:hover { color: var(--text-normal); background: rgba(255, 255, 255, .03); }
.ac-seg-item.active { background: var(--bg-elevated); color: var(--accent-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.ac-seg-item.muted { opacity: .5; }

/* small always-visible draggable scrollbar under the category rail (iOS-17) —
   the native bar auto-hides on Windows, so inside a rail we hide it and draw a
   slim thumb the user can grab and slide right/left; clicks on tabs still work */
.ac-railwrap { display: flex; flex-direction: column; gap: 8px; }
.ac-railwrap .ac-seg { padding-bottom: 6px; scrollbar-width: none; }
.ac-railwrap .ac-seg::-webkit-scrollbar { height: 0; display: none; }
.ac-sbar { height: 6px; border-radius: 999px; background: var(--bg-input); position: relative; margin: 3px 10px 0; }
.ac-sbar.hidden { display: none; }
.ac-sbar-thumb { position: absolute; top: 0; height: 100%; min-width: 44px; border-radius: 999px; background: var(--text-faint); opacity: .6; cursor: grab; transition: background .15s, opacity .15s; }
.ac-sbar-thumb:hover { background: var(--accent-2); opacity: 1; }
.ac-sbar-thumb:active { cursor: grabbing; background: var(--accent); opacity: 1; }
body.ac-dragsel { user-select: none !important; cursor: grabbing !important; }

.ac-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; }
.ac-panel-head .t { display: flex; align-items: center; gap: 10px; }
.ac-panel-head .t b { font-size: 15px; color: var(--text); }
.ac-panel-head .t .ac-row-ic { width: 30px; height: 30px; }
.ac-policy { font-size: 11px; color: var(--accent-2); background: var(--ac-soft); padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.ac-catdesc { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; background: var(--ac-soft); border-bottom: 1px solid var(--ac-sep); color: var(--text-normal); font-size: 13px; line-height: 1.65; }
.ac-catdesc svg { color: var(--accent-2); flex-shrink: 0; margin-top: 2px; }

/* field rows reuse .ac-row; list + wide field takes the whole row */
.ac-fieldctl { display: flex; align-items: center; }
.ac-fieldctl input:not([type="checkbox"]), .ac-fieldctl select {
  min-width: 128px; max-width: 184px; padding: 10px 13px; border-radius: 11px;
  font-weight: 600; border: 1px solid var(--ac-line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ac-fieldctl input[type="number"] { text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .4px; }
.ac-fieldctl input[type="text"] { text-align: start; }
.ac-fieldctl select { text-align: start; cursor: pointer; }
.ac-fieldctl input:not([type="checkbox"]):hover, .ac-fieldctl select:hover { border-color: var(--accent-deep); }
.ac-fieldctl input:not([type="checkbox"]):focus, .ac-fieldctl select:focus { border-color: var(--accent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 3px var(--ac-soft); background: var(--bg-secondary); }
.ac-row.wide { flex-direction: column; align-items: stretch; gap: 9px; }
.ac-row.wide .ac-fieldctl { width: 100%; }
.ac textarea.ac-listbox,
.ac-listbox {
  width: 100%; resize: vertical; font-family: ui-monospace, "Cascadia Mono", monospace;
  font-size: 12.5px; line-height: 1.6; min-height: 92px;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--bg-floating); border-radius: var(--radius-xs);
  padding: 11px 13px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.ac-listbox:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ac-soft); }
.ac-listbox::placeholder { color: var(--text-dim); }

/* fixed-position hover tooltip for (?) — escapes card overflow */
.ac-tip {
  position: fixed; transform: translate(-50%, -100%);
  width: max-content; max-width: 300px; white-space: normal; text-align: right; direction: rtl;
  background: var(--bg-floating); color: var(--text-normal);
  border: 1px solid var(--border-hi); border-radius: 12px;
  padding: 11px 13px; font-size: 12.5px; font-weight: 500; line-height: 1.65;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7); z-index: 300; pointer-events: none;
}
.ac-help:hover, .ac-help:focus { background: var(--accent); color: #fff; outline: none; }

/* text-config editor */
.ac-textcfg textarea { width: 100%; min-height: 360px; resize: vertical; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; line-height: 1.65; background: var(--bg-floating); color: var(--text); border: 1px solid var(--ac-line); border-radius: var(--radius-sm); padding: 14px; outline: none; }
.ac-textcfg-act { display: flex; gap: 10px; margin-top: 12px; }

/* enroll token reveal */
.ac-token { display: flex; align-items: center; gap: 10px; background: var(--bg-floating); border: 1px dashed var(--accent); border-radius: var(--radius-xs); padding: 12px 14px; margin: 4px 0 2px; }
.ac-token code { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; color: var(--accent-2); word-break: break-all; flex: 1; }

/* misc */
.ac-mask { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 12px; color: var(--text-faint); }
.ac-ver { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ac-ck { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 12px; color: var(--text-dim); }
.ac-empty { text-align: center; color: var(--text-faint); padding: 30px 16px; font-size: 13.5px; }
.ac-sevdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sev-low { background: #6b7a90; } .sev-medium { background: #f0b34a; } .sev-high { background: #f0813a; } .sev-critical { background: #e5484d; }
.sevtext-low { color: var(--text-faint); } .sevtext-medium { color: #f0b34a; } .sevtext-high { color: #f0813a; } .sevtext-critical { color: #e5484d; }

/* top-level panel nav (reuses ac-seg visuals) */
.ac-nav { position: sticky; top: 8px; z-index: 5; }

/* player risk bar */
.ac-risk { width: 72px; height: 7px; border-radius: 999px; background: var(--bg-elevated); overflow: hidden; display: inline-block; }
.ac-riskbar { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.ac-riskbar.sev-low { background: #4ce0a0; }

/* incident explorer filter bar */
.ac-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ac-filters .ac-search { flex: 1; min-width: 180px; }
.ac-filters select { min-width: 130px; }

@media (max-width: 720px) {
  .ac-hero { flex-direction: column; align-items: flex-start; }
  .ac-hero-side { align-items: flex-start; }
  .ac-title { font-size: 22px; }
  .ac-licbar select { min-width: 0; }
}