/* Extracted from framework/super-admin-mockup.html so the running console and
   the approved mockup cannot drift. Regenerate with server/_sync-css.py. */

  /* An operator tool should look like an operator tool. Dense, tabular,
     monospace numerals, semantic color kept separate from the brand accent
     so "needs attention" never has to compete with "this is a button". */
  :root{
    --ground:#f2f4f7; --panel:#ffffff; --panel-2:#eaeef3; --line:#d9e0e8; --hair:#e8edf2;
    --ink:#151d26; --mid:#55626f; --faint:#8593a1;
    --accent:#3f4fb8; --accent-soft:#e8eafb;
    --ok:#1a6b45; --ok-bg:#e2f2ea;
    --warn:#8a5a10; --warn-bg:#faefdc;
    --stop:#9c2f22; --stop-bg:#fae5e1;
    --ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --ground:#0d1319; --panel:#151d25; --panel-2:#101820; --line:#253039; --hair:#1e2831;
    --ink:#e4ebf1; --mid:#9aa8b5; --faint:#6b7986;
    --accent:#8e9bf0; --accent-soft:#1b2338;
    --ok:#5cc98a; --ok-bg:#0f2419;
    --warn:#e0a54a; --warn-bg:#2a2010;
    --stop:#ec8474; --stop-bg:#2b1512;
  }}
  :root[data-theme="dark"]{
    --ground:#0d1319; --panel:#151d25; --panel-2:#101820; --line:#253039; --hair:#1e2831;
    --ink:#e4ebf1; --mid:#9aa8b5; --faint:#6b7986;
    --accent:#8e9bf0; --accent-soft:#1b2338;
    --ok:#5cc98a; --ok-bg:#0f2419;
    --warn:#e0a54a; --warn-bg:#2a2010;
    --stop:#ec8474; --stop-bg:#2b1512;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);
       font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  /* ── chrome ── */
  .bar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
  .bar .in{max-width:1180px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:18px;}
  .logo{font-weight:700;letter-spacing:-.01em;}
  .logo span{color:var(--accent);}
  .tabs{display:flex;gap:3px;margin-left:10px;}
  .tabs button{font:inherit;font-size:13px;border:0;background:none;color:var(--mid);
               padding:6px 12px;border-radius:5px;cursor:pointer;}
  .tabs button:hover{background:var(--panel-2);color:var(--ink);}
  .tabs button.on{background:var(--accent-soft);color:var(--accent);font-weight:600;}
  .who{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--faint);}
  .staffpill{font-family:var(--mono);font-size:11px;background:var(--stop-bg);color:var(--stop);
             border:1px solid var(--stop);border-radius:4px;padding:2px 7px;font-weight:600;}

  main{max-width:1180px;margin:0 auto;padding:22px 20px 70px;}
  h1{font-size:21px;margin:0 0 3px;letter-spacing:-.01em;}
  .sub{font-size:13px;color:var(--faint);margin:0 0 20px;}
  h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
     font-weight:600;margin:26px 0 9px;}

  .panel{background:var(--panel);border:1px solid var(--line);border-radius:7px;}
  .pad{padding:16px 18px;}

  /* ── tables ── */
  table{width:100%;border-collapse:collapse;}
  th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
     font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;}
  td{padding:11px 14px;border-bottom:1px solid var(--hair);vertical-align:middle;}
  tr:last-child td{border-bottom:0;}
  tbody tr{cursor:pointer;}
  tbody tr:hover{background:var(--panel-2);}
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums;}
  .co{font-weight:600;}
  .co small{display:block;font-weight:400;color:var(--faint);font-size:11.5px;font-family:var(--mono);}

  .chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;
        border:1px solid;white-space:nowrap;}
  .c-ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok);}
  .c-warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn);}
  .c-stop{color:var(--stop);background:var(--stop-bg);border-color:var(--stop);}
  .c-mute{color:var(--faint);background:transparent;border-color:var(--line);}

  .meter{height:5px;background:var(--panel-2);border-radius:99px;overflow:hidden;width:104px;
         display:inline-block;vertical-align:middle;margin-right:9px;}
  .meter i{display:block;height:100%;background:var(--accent);}
  .meter i.done{background:var(--ok);}

  /* ── cards row ── */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:8px;}
  .stat{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:13px 15px;}
  .stat b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;line-height:1.1;
          font-variant-numeric:tabular-nums;}
  .stat span{font-size:11.5px;color:var(--faint);}
  .stat.att b{color:var(--warn);}

  /* ── buttons ── */
  .btn{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--panel);
       color:var(--ink);padding:7px 13px;border-radius:5px;cursor:pointer;}
  .btn:hover{border-color:var(--accent);color:var(--accent);}
  .btn.p{background:var(--accent);border-color:var(--accent);color:#fff;}
  .btn.p:hover{filter:brightness(1.09);color:#fff;}
  .btn.danger{color:var(--stop);border-color:var(--stop);}
  .btn.danger:hover{background:var(--stop-bg);}
  .row{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}

  /* ── time travel ── */
  .tt{background:var(--warn-bg);border:1px solid var(--warn);border-radius:7px;padding:15px 17px;}
  .tt .cap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
           color:var(--warn);margin-bottom:8px;}
  .tt .now{font-family:var(--mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;}
  .tt input[type=range]{width:100%;accent-color:var(--warn);margin:12px 0 4px;}
  .tt .scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;
             color:var(--faint);}
  .tt .note{font-size:12px;color:var(--mid);margin:10px 0 0;}

  .split{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;}
  @media(max-width:860px){ .split{grid-template-columns:1fr;} }

  .kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px;}
  .kv dt{color:var(--faint);white-space:nowrap;}
  .kv dd{margin:0;}

  /* ── break glass ── */
  .glass{border:1px dashed var(--stop);background:var(--stop-bg);border-radius:7px;padding:15px 17px;}
  .glass .cap{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
              color:var(--stop);margin-bottom:7px;}
  .glass p{margin:0 0 9px;font-size:12.5px;color:var(--mid);}
  .glass p b{color:var(--ink);}
  .locked{filter:blur(4.5px);user-select:none;pointer-events:none;opacity:.65;}

  .log{font-family:var(--mono);font-size:11.5px;color:var(--mid);}
  .log b{color:var(--ink);font-weight:600;}

  .hide{display:none;}
  .crumb{font-size:12.5px;color:var(--faint);margin:0 0 12px;}
  .crumb button{font:inherit;background:none;border:0;color:var(--accent);cursor:pointer;padding:0;}
  .foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;
        color:var(--faint);}