:root{--bg:#f6f7f9;--card:#fff;--fg:#1b1c1e;--dim:#5f6368;--line:#dfe1e5;
        --accent:#1a73e8;--ok:#137333;--okbg:#e6f4ea;--warn:#e8710a;--warnbg:#fef7e0;
        --danger:#d93025;--dangerbg:#fce8e6;--code:#f1f3f4}
  @media (prefers-color-scheme:dark){
    :root{--bg:#131517;--card:#1c1f21;--fg:#e8eaed;--dim:#9aa0a6;--line:#2f3336;
          --accent:#8ab4f8;--ok:#81c995;--okbg:#1e3a28;--warnbg:#3d2f14;
          --danger:#f28b82;--dangerbg:#3d2320;--code:#26292b}
  }
  *{box-sizing:border-box}
  /* clip, not hidden: `hidden` would create a scroll container and break the
     sticky header. `clip` contains stray overflow without that side effect. */
  html{overflow-x:clip}
  body{margin:0;background:var(--bg);color:var(--fg);font:14px system-ui,sans-serif;
       overflow-x:clip;max-width:100vw}
  header{background:var(--card);border-bottom:1px solid var(--line);padding:.8rem 1.25rem;
         display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:10}
  header h1{font-size:1rem;margin:0;font-weight:600}
  header .sp{flex:1}
  .wrap{max-width:1180px;margin:0 auto;padding:1.5rem 1.25rem 4rem}
  .card{background:var(--card);border:1px solid var(--line);border-radius:10px;
        margin-bottom:1.5rem;overflow:hidden}
  .card h2{font-size:.95rem;margin:0;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);
           display:flex;align-items:center;gap:.6rem}
  .card h2 .sp{flex:1}
  /* The table scrolls horizontally inside its card; the page itself never does. */
  .tw{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  table{width:100%;border-collapse:collapse;min-width:740px}
  th,td{text-align:left;padding:.6rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:middle}
  th{font-size:12px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
  tr:last-child td{border-bottom:0}
  td.empty{text-align:center;color:var(--dim);padding:2rem 1.1rem}
  .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);
       opacity:.4;margin-right:.45rem}
  .dot.on{background:var(--ok);opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
  button,.btn{font:inherit;padding:.35rem .7rem;border:1px solid var(--line);border-radius:6px;
              background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none;display:inline-block}
  button:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}
  button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
  button.primary:hover{color:#fff;filter:brightness(1.08)}
  button.danger:hover{border-color:var(--danger);color:var(--danger)}
  /* Treact sets .treact-processing while a request is in flight — the
     pending beat that makes pessimistic UI read as deliberate, not broken. */
  .treact-processing,button:disabled{opacity:.55;cursor:progress}
  .ico{width:1em;height:1em;flex:none;vertical-align:-.125em}
  .card h2 .ico{width:1.05em;height:1.05em;color:var(--dim)}
  button .ico,.btn .ico{width:.95em;height:.95em}
  button,.btn{display:inline-flex;align-items:center;gap:.4em}
  .pill .ico{width:.9em;height:.9em;margin-right:.2em;vertical-align:-.15em}
  .actions button .ico{margin:0}
  /* Below ~1100px the row actions get tight: drop the labels, keep the icons
     (title attribute carries the meaning for pointer + screen reader). */
  @media (max-width:1100px){
    /* Icon-only actions. The canonical visually-hidden pattern, and the button is
       position:relative so the absolute span is contained by it — otherwise its
       containing block is the page and it extends the document scroll width. */
    .actions button span,.actions .btn span{position:absolute;width:1px;height:1px;padding:0;
                         margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
    .actions button,.actions .btn{padding:.35rem .5rem}
  }
  code{font-family:ui-monospace,Menlo,monospace;background:var(--code);padding:.12em .4em;
       border-radius:3px;font-size:12.5px}
  .muted{color:var(--dim);font-size:12.5px}
  .actions{white-space:nowrap;text-align:right}
  .actions button,.actions .btn{margin-left:.3rem;position:relative}
  /* The row actions sheet: one column of full-width targets, labels always visible — the opposite
     of the row itself, where space is scarce and the icons carry the meaning. */
  .actionlist{display:flex;flex-direction:column;gap:.4rem;margin:.2rem 0 .8rem}
  .actionlist button,.actionlist .btn{width:100%;justify-content:flex-start;padding:.5rem .7rem}
  .pill{font-size:11px;padding:.1rem .45rem;border-radius:10px;border:1px solid var(--line);color:var(--dim)}
  .pill.ok{background:var(--okbg);color:var(--ok);border-color:transparent}
  .pill.warn{background:var(--warnbg);color:var(--warn);border-color:transparent}
  .pill.bad{background:var(--dangerbg);color:var(--danger);border-color:transparent}
  tr.total td{background:var(--code);border-top:2px solid var(--line)}

  /* ---- Modal body content (treact builds the shell; we style the inside) ---- */
  label{display:block;font-size:12.5px;color:var(--dim);margin:.85rem 0 .3rem}
  label.chk{display:flex;align-items:center;gap:.45rem;color:var(--fg)}
  label.chk input{width:auto;margin:0}
  input,select,textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--line);
                        border-radius:6px;background:var(--bg);color:var(--fg);font:inherit}
  textarea{resize:vertical}
  textarea.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
  input.invalid,textarea.invalid{border-color:var(--danger);background:var(--dangerbg)}
  .row{display:flex;gap:.75rem}.row>*{flex:1}
  .foot{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.2rem;
        padding-top:.9rem;border-top:1px solid var(--line)}
  .note{background:var(--code);border-left:3px solid var(--warn);padding:.7rem .9rem;
        border-radius:0 6px 6px 0;font-size:13px;margin:.9rem 0}
  .note.bad{border-left-color:var(--danger)}
  .warn-box{background:var(--warnbg);padding:.7rem .9rem;border-radius:6px;font-size:13px}
  .preview{aspect-ratio:16/9;background:#000;border:1px solid var(--line);
           border-radius:6px;overflow:hidden;margin:.4rem 0}
  .preview iframe{width:100%;height:100%;border:0;display:block}

  /* treact.min.css hardcodes a white modal; theme it here rather than
     editing the framework stylesheet. */
  @media (prefers-color-scheme:dark){
    .treact-modal{background:var(--card);color:var(--fg)}
    .treact-modal-header{border-bottom-color:var(--line)}
    .treact-modal-close{color:var(--dim)}
    .treact-modal-close:hover{background:var(--code);color:var(--fg)}
  }
  .treact-modal{border-radius:10px;overflow:hidden}
  .treact-modal-header.gradient{background:linear-gradient(90deg,
        color-mix(in srgb,var(--accent) 12%,transparent), transparent)}

  /* Watch modal is wider than treact's 500px default — 16:9 video needs room. */
  #watchmodal .treact-modal{width:min(900px,94vw)}
  .watchbar{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
  /* Debug-only affordance: tinted so it reads as not-for-production. */
  button.watch{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
  button.watch:hover{border-color:var(--warn);color:var(--warn)}

  /* Toast container — treact appends .treact-toast children here. */
  #toaster{position:fixed;bottom:1rem;right:1rem;z-index:10001;
           display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}

  /* ---- Top bar nav ---- */
  header h1{font-size:.95rem;margin:0;font-weight:700;letter-spacing:-.01em;
            padding-right:.4rem;border-right:1px solid var(--line)}
  nav{display:flex;gap:.15rem;align-items:center;flex-wrap:wrap}
  a.nav{display:inline-flex;align-items:center;gap:.4em;padding:.4rem .7rem;
        border-radius:6px;text-decoration:none;color:var(--dim);font-weight:500;
        border:1px solid transparent}
  a.nav:hover{color:var(--fg);background:var(--code)}
  a.nav.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
           border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
  a.nav .ico{width:1em;height:1em}
  /* Narrow: nav collapses to icons, the section title carries the meaning. */
  @media (max-width:820px){
    header{gap:.5rem;padding:.7rem .8rem}
    header h1{border:0;padding:0}
    a.nav span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
               overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
    a.nav{padding:.4rem .55rem;position:relative}
    .btn span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
              overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
    .btn{position:relative}
  }

  /* ---- Scaffold placeholder ---- */
  .stub{padding:1.6rem 1.1rem;color:var(--fg)}
  .stub p{margin:.3rem 0}
  .stub ul{margin:.4rem 0 0;padding-left:1.2rem;line-height:1.7}
  .kv{width:100%;border-collapse:collapse}
  .kv th{width:34%;font-weight:500;color:var(--dim);text-transform:none;letter-spacing:0;font-size:13px}
  .kv td{font-size:13px}

  .who{display:flex;flex-direction:column;line-height:1.25;font-size:12.5px;text-align:right}
  @media (max-width:820px){.who{display:none}}

/* ---- Brand logo ------------------------------------------------------------
   The supplied artwork has a white wordmark, invisible on the light theme, so a
   dark-ink variant is generated for it. Same <img>, swapped via content: — the
   markup stays single-source and there is no flash of the wrong variant. */
.logo{display:block;height:26px;width:auto;content:url("/lib/logo-light.png")}
@media (prefers-color-scheme:dark){
  .logo{content:url("/lib/logo-dark.png")}
}
a.brand{display:inline-flex;align-items:center;text-decoration:none;
        padding-right:.5rem;border-right:1px solid var(--line);margin-right:.15rem}
@media (max-width:820px){
  a.brand{border:0;padding-right:0}
  .logo{height:22px}
}
/* Login screen: larger, centred, with breathing room above the form. */
.login-logo{display:block;height:44px;width:auto;margin:0 auto 1.5rem;
            content:url("/lib/logo-light.png")}
@media (prefers-color-scheme:dark){
  .login-logo{content:url("/lib/logo-dark.png")}
}