/* ───────────────────────────────────────────────────
   taQu Rule Tester — style.css
   ─────────────────────────────────────────────────── */
:root {
    /* Neutral palette — developer-tool feel */
    --primary:       #1e293b;   /* Slate 800 */
    --primary-dark:  #0f172a;
    --primary-light: #f1f5f9;
    --on-primary:    #ffffff;
    --accent:        #2563eb;   /* Blue 600, interactive only */

    /* Surfaces */
    --bg:      #f1f3f5;
    --surface: #ffffff;

    /* Borders */
    --border:     #e2e8f0;
    --border-mid: #cbd5e1;

    /* Text */
    --text:      #0f172a;
    --text-sub:  #475569;
    --text-muted:#94a3b8;

    /* Elevation */
    --shadow-1: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-2: 0 3px 8px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
    --shadow-3: 0 8px 24px rgba(0,0,0,.12);

    /* Action colours */
    --c-correct:  #15803d;  --bg-correct: #f0fdf4;  --bd-correct: #bbf7d0;
    --c-wrong:    #b91c1c;  --bg-wrong:   #fef2f2;  --bd-wrong:   #fecaca;
    --c-through:  #1d4ed8;  --bg-through: #eff6ff;  --bd-through: #bfdbfe;
    --c-push:     #c2410c;  --bg-push:    #fff7ed;  --bd-push:    #fed7aa;

    /* Status */
    --bg-win:  #fefce8;  --bd-win:  #fde047;
    --bg-lose: #f8fafc;  --bd-lose: #e2e8f0;  --c-lose: #94a3b8;

    /* Team palette */
    --tp0:#2563eb; --tp1:#dc2626; --tp2:#16a34a; --tp3:#9333ea;
    --tp4:#ea580c; --tp5:#0891b2; --tp6:#db2777; --tp7:#ca8a04;
    --tp8:#475569; --tp9:#0284c7;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); }
body {
    font-family:'Roboto','Helvetica Neue',Arial,sans-serif;
    color:var(--text);
    height:100vh;
    overflow:hidden;
    background:var(--bg);
    font-size:14px;
}

/* ══ Layout ══ */
.layout { display:flex; width:100%; height:100vh; }
.hstack { display:flex; align-items:center; gap:6px; }

/* ══ Editor Column ══ */
.col-editor {
    width:46%;
    min-width:280px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border-right:1px solid var(--border);
    overflow:hidden;
}
.col-editor .CodeMirror-wrap,
.col-editor .CodeMirror { flex:1; min-height:0; overflow:auto; }

/* ── Editor header (neutral, not colored) ── */
.col-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 12px 0 16px;
    height:48px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.col-header-title {
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-muted);
}

/* ── Theme selector ── */
.theme-select {
    height:26px;
    padding:0 6px;
    border:1px solid var(--border-mid);
    border-radius:4px;
    background:var(--surface);
    color:var(--text-sub);
    font-size:.7rem;
    font-family:inherit;
    cursor:pointer;
    outline:none;
    transition:border-color .12s;
}
.theme-select:hover, .theme-select:focus { border-color:var(--accent); }

/* ── CodeMirror ── */
#code-input { display:none; }

.CodeMirror {
    flex:1;
    height:auto;
    min-height:0;
    font-family:'Menlo','Consolas','Monaco',monospace;
    font-size:13px;
    line-height:1.7;
    background:#fafafa;
    color:#1e1e1e;
    border:none;
    padding:4px 0;
}
.CodeMirror-scroll { min-height:120px; }
.CodeMirror-lines { padding:12px 16px; }
.CodeMirror-gutters {
    background:#f4f6f8;
    border-right:1px solid var(--border);
}
.CodeMirror-linenumber {
    color:#94a3b8;
    font-size:11px;
    padding:0 8px 0 6px;
    min-width:28px;
}
.CodeMirror-cursor { border-left:2px solid #555; }
.CodeMirror-selected { background:#dbeafe !important; }
.CodeMirror-focused .CodeMirror-selected { background:#bfdbfe !important; }

/* Syntax tokens (default theme) */
.cm-keyword    { color:#7c3aed; font-weight:600; }
.cm-builtin    { color:#0369a1; }
.cm-deprecated { color:#d97706; text-decoration:line-through wavy #d97706; }
.cm-atom       { color:#b45309; }
.cm-variable-2 { color:#059669; }
.cm-variable-3 { color:#374151; }
.cm-number     { color:#dc2626; }
.cm-string     { color:#15803d; }
.cm-comment    { color:#94a3b8; font-style:italic; }
.cm-operator   { color:#374151; }

/* ── Hover doc tooltip ── */
.hover-doc {
    position:fixed;
    z-index:150;
    background:var(--surface);
    border:1px solid var(--border-mid);
    border-top:2px solid var(--accent);
    border-radius:0 0 4px 4px;
    box-shadow:var(--shadow-3);
    padding:8px 12px;
    max-width:340px;
    min-width:160px;
    font-size:.75rem;
    line-height:1.55;
    pointer-events:none;
}
.hover-doc.hidden { display:none; }
.hover-doc.deprecated { border-top-color:#d97706; }
.hover-doc-sig {
    font-family:'Menlo','Consolas',monospace;
    font-size:.76rem;
    font-weight:700;
    color:var(--accent);
    margin-bottom:3px;
}
.hover-doc-desc { color:var(--text-sub); }
.hover-doc-type {
    display:inline-block;
    font-size:.56rem;
    font-weight:500;
    letter-spacing:.05em;
    text-transform:uppercase;
    border-radius:3px;
    padding:0 5px;
    margin-right:5px;
    vertical-align:middle;
}
.docs-type-cfg        { background:#ede9fe; color:#6d28d9; }
.docs-type-event      { background:#fef3c7; color:#b45309; }
.docs-type-kw         { background:#eff6ff; color:#1d4ed8; }
.docs-type-cmd        { background:#f0fdf4; color:#15803d; }
.docs-type-fn         { background:#ecfeff; color:#0e7490; }
.docs-type-var        { background:#f1f5f9; color:#475569; }
.docs-type-uservar    { background:#fce7f3; color:#9d174d; }
.docs-type-deprecated { background:#fef3c7; color:#b45309; }
.hover-doc-deprecated-sig  { color:#d97706 !important; }
.hover-doc-deprecated-desc { color:#b45309; }
.hover-doc-instead  { color:var(--accent); font-weight:700; }

/* ── Autocomplete hint dropdown ── */
.CodeMirror-hints {
    font-family:'Menlo','Consolas',monospace;
    font-size:12px;
    border:1px solid var(--border-mid);
    border-radius:4px;
    box-shadow:var(--shadow-2);
    background:var(--surface);
    padding:2px 0;
    max-height:220px;
    z-index:200;
}
.CodeMirror-hint {
    padding:4px 12px;
    color:var(--text);
    cursor:pointer;
    white-space:pre;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.78rem;
}
.CodeMirror-hint-active { background:#eff6ff; color:#1d4ed8; }
.hint-dot {
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    flex-shrink:0;
}
.hint-cfg     .hint-dot { background:#7c3aed; }
.hint-event   .hint-dot { background:#d97706; }
.hint-kw      .hint-dot { background:#2563eb; }
.hint-cmd     .hint-dot { background:#16a34a; }
.hint-fn      .hint-dot { background:#0891b2; }
.hint-var     .hint-dot { background:#64748b; }
.hint-uservar .hint-dot { background:#db2777; }
.hint-sub { color:var(--text-muted); font-size:.68rem; margin-left:auto; padding-left:8px; }

/* ══ Preview Column ══ */
.col-preview {
    flex:1;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    background:var(--bg);
    padding:12px;
    gap:10px;
}

/* ── Material Cards ── */
.panel {
    background:var(--surface);
    border-radius:6px;
    box-shadow:var(--shadow-1);
    padding:14px 16px;
    flex-shrink:0;
}
.panel-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}
.panel-title {
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-muted);
}

/* ── Meta ── */
.panel-meta {}
.meta-top { display:flex; gap:24px; margin-bottom:10px; align-items:flex-end; }
.meta-item { display:flex; flex-direction:column; gap:2px; }
.meta-label {
    font-size:.58rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-muted);
}
.meta-value { font-size:.92rem; font-weight:500; }
.meta-value-sm { font-size:.8rem; }
.meta-desc-row {
    display:flex; gap:8px; align-items:baseline;
    border-top:1px solid var(--border); padding-top:10px;
}
.meta-desc { font-size:.8rem; color:var(--text-sub); }

/* ── Players ── */
.players-list { display:flex; flex-direction:column; gap:6px; }
.team-group {
    border:1px solid var(--border);
    border-radius:6px;
    overflow:hidden;
    box-shadow:var(--shadow-1);
}
.team-group-hdr {
    display:flex; align-items:center; gap:7px;
    padding:6px 12px;
    background:#f8fafc;
    border-bottom:1px solid var(--border);
    font-size:.65rem; font-weight:500; letter-spacing:.06em; color:var(--text-sub);
}
.team-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.meta-frame-row {
    display:flex; align-items:center; gap:6px;
    padding:4px 12px;
    background:#fafbfc;
    border-bottom:1px dashed var(--border);
    font-size:.65rem; font-weight:500; color:var(--text-sub);
}
.player-card {
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding:9px 14px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition:background .12s;
    position:relative;
}
.player-card:last-child { border-bottom:none; }
.player-card:hover { background:#f8fafc; }
.player-card.active { background:#eff6ff; }
.player-card.active::before {
    content:''; position:absolute;
    left:0; top:0; bottom:0; width:3px;
    background:var(--accent);
}
.solo-card { border:1px solid var(--border) !important; border-radius:6px; box-shadow:var(--shadow-1); }
.card-win  { background:var(--bg-win)  !important; border-color:var(--bd-win)  !important; }
.card-lose { background:var(--bg-lose) !important; border-color:var(--bd-lose) !important; color:var(--c-lose) !important; }

.card-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.card-name-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.card-name { font-weight:500; font-size:.88rem; }
.card-sub  { font-size:.67rem; color:var(--text-muted); }
.badges { display:flex; gap:4px; flex-wrap:wrap; }
.badge {
    padding:1px 6px; font-size:.59rem; border-radius:3px;
    font-weight:500; text-transform:uppercase; letter-spacing:.03em;
}
.bdg-win   { background:#fde047; color:#000; }
.bdg-lose  { background:#64748b; color:#fff; }
.bdg-lock  { background:#e2e8f0; color:#64748b; }
.bdg-tlock { background:#fed7aa; color:#c2410c; }

.custom-chips { display:flex; gap:4px; flex-wrap:wrap; }
.custom-chip {
    font-size:.63rem; font-family:'Menlo',monospace;
    background:#f1f5f9; border:1px solid var(--border);
    padding:0 5px; border-radius:3px; color:var(--text-sub);
}

.card-stats { display:flex; gap:10px; flex-shrink:0; }
.stat-box { text-align:center; min-width:34px; }
.stat-lbl {
    font-size:.55rem; font-weight:500; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text-muted); display:block;
}
.stat-val {
    font-size:1.1rem; font-weight:500;
    font-family:'Menlo',monospace; display:block; line-height:1.2;
}
.stat-box.synced .stat-lbl, .stat-box.synced .stat-val { color:var(--accent); }
.stat-box.editable {
    cursor:pointer; border-radius:4px;
    border:1px solid transparent; padding:2px 4px;
    transition:background .12s, border-color .12s;
}
.stat-box.editable:hover { background:#eff6ff; border-color:#93c5fd; }

/* ── Action panel ── */
.action-for { font-size:.85rem; font-weight:500; }
.action-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.action-btn {
    height:44px; font-size:.76rem; font-weight:500; font-family:inherit;
    border-radius:4px; border:1px solid transparent; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:4px;
    transition:filter .15s, box-shadow .15s;
}
.action-btn .material-icons { font-size:17px; }
.correct-btn { background:var(--bg-correct); color:var(--c-correct); border-color:var(--bd-correct); }
.wrong-btn   { background:var(--bg-wrong);   color:var(--c-wrong);   border-color:var(--bd-wrong); }
.through-btn { background:var(--bg-through); color:var(--c-through); border-color:var(--bd-through); }
.push-btn    { background:var(--bg-push);    color:var(--c-push);    border-color:var(--bd-push); }
.action-btn:hover { filter:brightness(.93); box-shadow:var(--shadow-1); }

/* ── Log ── */
.panel-log { flex:1; display:flex; flex-direction:column; min-height:80px; }
.log-body {
    flex:1; overflow-y:auto;
    font-family:'Menlo','Consolas',monospace;
    font-size:.7rem; max-height:180px;
}
.log-line {
    padding:2px 0; border-bottom:1px solid #f8fafc;
    color:var(--text-sub); line-height:1.5;
}
.log-line.err  { color:var(--c-wrong); }
.log-line.ok   { color:var(--c-correct); font-weight:500; }
.log-line.info { color:var(--c-through); }
.log-line.team { color:var(--c-push); }
.log-line.dim  { color:var(--text-muted); font-style:italic; }

/* ══ Buttons ══ */
.btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:0 14px; height:32px;
    border-radius:4px; border:none; cursor:pointer;
    font-weight:500; font-size:.74rem; font-family:inherit;
    letter-spacing:.02em; line-height:1;
    transition:background .12s, box-shadow .12s;
    white-space:nowrap; text-decoration:none;
}
.btn .material-icons { font-size:15px; }

.btn-contained { background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-1); }
.btn-contained:hover { background:var(--primary-dark); box-shadow:var(--shadow-2); }

/* Header buttons (on white background) */
.btn-header-ghost {
    background:transparent; color:var(--text-sub);
    border:1px solid var(--border-mid);
}
.btn-header-ghost:hover { background:var(--bg); }
.btn-header-contained {
    background:var(--primary); color:var(--on-primary);
    box-shadow:var(--shadow-1);
}
.btn-header-contained:hover { background:var(--primary-dark); }

.btn-outlined {
    background:transparent; border:1px solid var(--border-mid);
    color:var(--text-sub);
}
.btn-outlined:hover { background:var(--bg); }
.btn-outlined-red { border-color:#fca5a5; color:var(--c-wrong); }
.btn-outlined-red:hover { background:var(--bg-wrong); }

.btn-text { background:transparent; color:var(--accent); padding:0 10px; }
.btn-text:hover { background:#eff6ff; }
.btn-text-muted { background:transparent; color:var(--text-muted); padding:0 10px; }
.btn-text-muted:hover { background:var(--bg); color:var(--text-sub); }

/* Legacy aliases */
.btn-primary { background:var(--primary); color:var(--on-primary); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-ghost { background:transparent; border:1px solid var(--border-mid); color:var(--text); }
.btn-ghost:hover { background:var(--bg); }
.btn-sm { padding:0 10px; height:28px; font-size:.7rem; }
.btn-red-outline { border:1px solid #fca5a5; color:var(--c-wrong); }
.btn-red-outline:hover { background:var(--bg-wrong); }

/* ══ Modal ══ */
.modal-wrap {
    position:fixed; inset:0;
    background:rgba(15,23,42,.4);
    display:flex; align-items:center; justify-content:center;
    z-index:100;
}
.modal-wrap.hidden { display:none; }
.modal {
    background:var(--surface);
    border-radius:8px; padding:24px; width:380px;
    box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.modal-title { font-size:1rem; font-weight:500; margin-bottom:20px; }
.field { margin-bottom:16px; }
.field-label {
    display:block; font-size:.73rem; font-weight:500;
    color:var(--text-sub); margin-bottom:6px;
}
.field-hint { font-size:.66rem; color:var(--text-muted); font-weight:400; }
.field-input {
    width:100%; padding:9px 12px;
    border:1px solid var(--border-mid); border-radius:4px;
    font-size:.88rem; font-family:inherit;
    outline:none; transition:border-color .12s, box-shadow .12s;
}
.field-input:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(37,99,235,.15);
}
.modal-footer {
    display:flex; justify-content:flex-end;
    gap:8px; margin-top:24px;
}