/* El-Gateau admin — one palette for every view.
   Replaces the two that used to disagree: index.html ran --ink:#12245e with a blue accent,
   roster.html ran --ink:#16202e with a royal one, so the same table looked like two products
   depending on which tab you were on. (D.A. 2026-09-12) */
:root{
  --bg:#f2f4f8; --panel:#fff; --sunk:#f6f8fb; --line:#e0e6ef; --line2:#eef2f7;
  --ink:#141b26; --mut:#5d6878; --dim:#8d97a6;
  --indigo:#3d4ee0; --teal:#0d9488; --rose:#d6455f; --amber:#c07c15;
  --good:#17915f; --bad:#cc3f3f; --warn:#b8811c;
  --shadow:0 1px 2px rgba(20,27,38,.05), 0 6px 18px -8px rgba(20,27,38,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
     font:14px/1.5 "Instrument Sans",-apple-system,"Segoe UI",Roboto,sans-serif}
.mono,.code{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.hidden{display:none!important}
.mut{color:var(--mut)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--panel);
        border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand img{width:24px;height:24px;border-radius:6px}
.tabs{display:flex;gap:3px;flex-wrap:wrap}
.tab{font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px;color:var(--mut);
     background:none;border:1px solid transparent;cursor:pointer;font-family:inherit}
.tab:hover{color:var(--ink);background:var(--sunk)}
.tab.active{background:var(--sunk);color:var(--indigo);border-color:var(--line)}
.spacer{margin-left:auto}
.who{font-size:12px;color:var(--mut)}
.subtabs{display:flex;gap:3px;flex-wrap:wrap;padding:9px 18px 0}
.subtab{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:7px;color:var(--mut);
        background:none;border:1px solid transparent;cursor:pointer;font-family:inherit}
.subtab.active{background:var(--panel);color:var(--indigo);border-color:var(--line)}
.wrap{max-width:1240px;margin:0 auto;padding:16px 18px 40px}

/* ---------- surfaces ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
      box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.card > .in{padding:13px 15px 15px;border-left:3px solid var(--rail,transparent)}
.card.videos{--rail:var(--indigo)} .card.subject{--rail:var(--teal)}
.card.conv{--rail:var(--amber)} .card.sec{--rail:var(--rose)} .card.contest{--rail:var(--teal)}
.ch{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.ch h2{font-size:13px;font-weight:700;margin:0}
.ch .note{font-size:11px;color:var(--dim);margin-left:auto;text-align:right}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:820px){.row2{grid-template-columns:1fr}}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;color:var(--dim);font-size:9.5px;font-weight:700;letter-spacing:.08em;
   text-transform:uppercase;padding:9px 10px;border-bottom:1px solid var(--line);
   white-space:nowrap;background:var(--sunk);position:sticky;top:0}
td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
tbody tr:hover{background:var(--sunk)}
tbody tr:last-child td{border-bottom:0}

/* ---------- chips ---------- */
.chip{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
      background:var(--sunk);color:var(--mut);border:1px solid var(--line);white-space:nowrap}
.chip.good{color:var(--good);border-color:var(--good);background:transparent}
.chip.bad{color:var(--bad);border-color:var(--bad);background:transparent}
.chip.warn{color:var(--warn);border-color:var(--warn);background:transparent}

/* ---------- controls ---------- */
button,.btn{font-family:inherit;font-size:13px;font-weight:600;padding:7px 13px;border-radius:8px;
            border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
button:hover{background:var(--sunk)}
button.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
button.primary:hover{filter:brightness(1.08)}
button.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
button.sm{padding:4px 9px;font-size:12px}
button:disabled{opacity:.45;cursor:not-allowed}
input,select{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
             border-radius:8px;background:var(--panel);color:var(--ink)}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--indigo);outline-offset:1px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}

/* ---------- dashboard primitives: every figure arrives already explained ---------- */
.f{display:grid;grid-template-columns:1fr 96px auto;gap:11px;align-items:center;
   padding:5px 0;border-bottom:1px solid var(--line2)}
.f:last-child{border-bottom:0}
.f .l{font-size:13px}
.f .t{height:6px;border-radius:999px;background:var(--sunk);overflow:hidden}
.f .t i{display:block;height:100%;background:var(--indigo);border-radius:999px}
.f .n{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px;min-width:52px;
      text-align:right;font-variant-numeric:tabular-nums}
.f.good .t i{background:var(--good)} .f.good .n{color:var(--good)}
.f.bad .t i{background:var(--bad)} .f.bad .n{color:var(--bad)}
.f.idle .t i{background:var(--dim);opacity:.4} .f.idle .n{color:var(--mut)}
@media (max-width:520px){.f{grid-template-columns:1fr 56px auto}}

.meter{margin-top:11px;padding-top:11px;border-top:1px solid var(--line2)}
.meter .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.meter .top b{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600}
.meter .top span{font-size:11px;color:var(--dim)}
.mbar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--sunk)}
.mbar i{display:block;height:100%}
.mleg{display:flex;gap:16px;margin-top:6px;font-size:11px;color:var(--mut);flex-wrap:wrap}
.mleg b{color:var(--ink);font-family:"IBM Plex Mono",monospace;font-weight:600}

/* subject parameters: the label sits under its own slice, so there is no legend to decode */
.pg{margin-bottom:13px} .pg:last-child{margin-bottom:0}
.pgh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.pgh .t{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.pgh .r{font-size:10.5px;color:var(--dim)}
.pbar{display:flex;height:15px;border-radius:4px;overflow:hidden;background:var(--sunk);gap:2px}
.pbar i{display:block;height:100%;border-radius:2px;min-width:2px}
.plab{display:flex;margin-top:4px;gap:2px}
.plab span{min-width:0;padding-right:5px}
.plab em{display:block;font-style:normal;font-size:9.5px;color:var(--mut);
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plab b{display:block;font-size:11.5px;font-family:"IBM Plex Mono",monospace;font-weight:600}

/* conversion, one row per interface */
.cv{display:grid;grid-template-columns:92px 1fr 66px 66px 60px;gap:10px;align-items:center;
    padding:7px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.cv:last-child{border-bottom:0}
.cv.head{padding:0 0 5px;border-bottom:1px solid var(--line);font-size:9.5px;font-weight:700;
         letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cv.tot{border-bottom:0;border-top:1px solid var(--line);font-weight:700;margin-top:2px}
.cv .who2{display:flex;align-items:center;gap:6px;font-weight:600}
.cv .who2 i{width:7px;height:7px;border-radius:2px;flex:none}
.cv .t{height:6px;border-radius:999px;background:var(--sunk);overflow:hidden}
.cv .t i{display:block;height:100%;border-radius:999px}
.cv .n,.cv .rate{font-family:"IBM Plex Mono",monospace;text-align:right}
.cv .rate{font-weight:600}
@media (max-width:640px){.cv{grid-template-columns:74px 1fr 46px 46px 50px;gap:7px;font-size:11.5px}}

.sec3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:700px){.sec3{grid-template-columns:1fr}}
.sbox{background:var(--sunk);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;
      display:flex;align-items:center;gap:11px}
.sbox .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
          justify-content:center;font-size:15px;flex:none;background:var(--panel);
          border:1px solid var(--line)}
.sbox .v{font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:600;line-height:1.05}
.sbox .k{font-size:10.5px;color:var(--mut)}
.sbox.alert .v{color:var(--warn)} .sbox.deny .v{color:var(--bad)}

.ld{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line2)}
.ld:last-child{border-bottom:0}
.ld .rk{width:20px;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;
        color:var(--dim);flex:none;text-align:center}
.ld.first .rk{color:var(--amber)}
.ld .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.ld .nm s{display:block;text-decoration:none;font-size:10.5px;color:var(--dim)}
.ld .v{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:14px}
.empty{color:var(--dim);font-size:12.5px;font-style:italic;padding:10px 0}
.err{color:var(--bad);font-size:13px;margin:8px 0}
.tiles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.tile{flex:1;min-width:118px;background:var(--sunk);border:1px solid var(--line2);
      border-radius:10px;padding:9px 12px}
.tile .n2{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;
          font-family:"IBM Plex Mono",monospace}
.tile .l2{color:var(--mut);font-size:10.5px}
.tile.warn{border-color:var(--amber)} .tile.warn .n2{color:var(--amber)}

/* ---------- submissions table, 2026-09-13 ----------
   The number replaces the long VOL- id, the subject parameters get a column each, and the
   two states a moderator cares about — prize verdict and labeling progress — are a toggle
   and a button colour rather than two more text columns. */
#subsView th[data-sort]{cursor:pointer;user-select:none}
#subsView th[data-sort]:hover{color:var(--ink)}
#subsView th.sorted{color:var(--indigo)}
#subsView th i{font-style:normal;opacity:.45;font-size:8px;margin-left:2px}
#subsView th.tiny{width:42px;text-align:right}
td.ord{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
       color:var(--mut);text-align:right}
td.res{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px}
td.res.sub{color:var(--bad)}
td.res.sub::after{content:" below spec";font-family:inherit;font-size:9px;font-weight:700;
                  color:var(--bad);border:1px solid var(--bad);border-radius:999px;
                  padding:0 5px;margin-left:5px;white-space:nowrap}
.src{display:inline-flex;align-items:center;gap:6px}
.lvl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:700}
.lvl.l0{color:var(--dim)} .lvl.l1{color:var(--ink)} .lvl.l2{color:var(--good)}

/* prize: not reviewed (grey, centred) · accepted (green, right) · rejected (red, left) */
.pz{width:40px;height:21px;border-radius:999px;border:1px solid var(--line);background:var(--sunk);
    position:relative;cursor:pointer;display:inline-block;vertical-align:middle}
.pz::after{content:"";position:absolute;top:2px;width:15px;height:15px;border-radius:50%;
           background:var(--dim)}
.pz.pending::after{left:11px}
.pz.yes{background:color-mix(in srgb,var(--good) 18%,transparent);border-color:var(--good)}
.pz.yes::after{left:21px;background:var(--good)}
.pz.no{background:color-mix(in srgb,var(--bad) 16%,transparent);border-color:var(--bad)}
.pz.no::after{left:2px;background:var(--bad)}

/* label button: the colour IS the labeling status */
.lb{font:inherit;font-size:11px;font-weight:700;padding:4px 11px;border-radius:7px;
    border:1px solid;cursor:pointer;background:transparent}
.lb.notstarted{color:var(--indigo);border-color:var(--indigo)}
.lb.progress{color:var(--warn);border-color:var(--warn)}
.lb.done{color:#fff;background:var(--good);border-color:var(--good)}
.lb:disabled{opacity:.4;cursor:not-allowed}
.lb small{display:block;font-size:8.5px;font-weight:500;opacity:.75;letter-spacing:.03em}

/* level as a transition, and uploads this session / in total */
.trans{display:inline-flex;align-items:baseline;gap:5px;font-family:"IBM Plex Mono",ui-monospace,monospace;
       font-size:12.5px;font-weight:700;white-space:nowrap}
.trans .was{color:var(--dim)}
.trans .arw{color:var(--dim);font-weight:400;font-size:11px}
.when{display:block;font-size:9.5px;color:var(--dim);font-family:"IBM Plex Mono",ui-monospace,monospace;
      margin-top:2px;letter-spacing:-.2px;white-space:nowrap}
td.vids{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:600}
th .sub2{font-weight:400;text-transform:none;letter-spacing:0}

/* a device id links to its own security record */
a.devlink{color:var(--mut);text-decoration:none;border-bottom:1px dotted var(--line)}
a.devlink:hover{color:var(--indigo);border-bottom-color:var(--indigo)}
.card.targeted{border-color:var(--indigo);box-shadow:0 0 0 3px color-mix(in srgb,var(--indigo) 15%,transparent)}


/* ---- Users page: three blocks, drill-down on click (D.A. 2026-09-13) ---- */
tr.clk { cursor: pointer; }
tr.clk:hover { background: var(--sunk, #f6f8fb); }
tr.clk.on { background: var(--sunk, #f6f8fb); }
tr.clk .caret { color: var(--dim, #8d97a6); font-size: 10px; margin-right: 5px; }
tr.drow > td { padding: 0 !important; background: var(--sunk, #f6f8fb); }
.drill { padding: 4px 0 8px; }
.drill table.sess { width: 100%; border-collapse: collapse; font-size: 12px; }
.drill table.sess th { font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dim, #8d97a6); text-align: left; padding: 7px 12px 5px; font-weight: 700; }
.drill table.sess td { padding: 6px 12px; border-top: 1px solid var(--line2, #eef2f7); }
.drill .empty { padding: 10px 14px; color: var(--dim, #8d97a6); font-size: 12px; }
.chip.o-up  { background: rgba(23,145,95,.13);  color: #17915f; border: 1px solid #17915f; }
.chip.o-ref { background: rgba(123,63,196,.13); color: #7b3fc4; border: 1px solid #7b3fc4; }
.chip.o-non { background: transparent; color: var(--dim, #8d97a6); border: 1px solid var(--line, #e0e6ef); }
.recon { margin-left: 6px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim, #8d97a6); border: 1px dashed var(--line, #e0e6ef); border-radius: 3px;
  padding: 1px 4px; }
.arw { color: var(--dim, #8d97a6); margin: 0 3px; }

.loc-conf { margin-left: 6px; font-size: 9.5px; font-weight: 700; color: var(--dim, #8d97a6);
  border: 1px solid var(--line, #e0e6ef); border-radius: 3px; padding: 0 4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; }

.chip.o-rej { background: rgba(204,63,63,.13); color: #cc3f3f; border: 1px solid #cc3f3f; }
.chip.bad, .st.bad { background: rgba(204,63,63,.12); color: #cc3f3f; border: 1px solid #cc3f3f; }

/* Product documentation control — a reference work, not a view of the data, so it sits apart
   from the tabs. (D.A. 2026-09-14) */
.isobtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-decoration: none; padding: 5px 10px; border-radius: 7px;
  color: var(--indigo, #3d4ee0); border: 1px solid var(--indigo, #3d4ee0);
  background: rgba(61,78,224,.08); }
.isobtn::before { content: "\1F4D8"; font-size: 12px; }
.isobtn:hover { background: rgba(61,78,224,.16); }