:root{
  --ground:#f4f6f8; --surface:#fff; --sunk:#eceff3;
  --ink:#131a24; --ink-soft:#3c4756; --muted:#5e6a79;
  --rule:#d9dfe6; --rule-soft:#e7ebf0;
  --navy:#1b3a63; --navy-bright:#2c5a96; --navy-bg:#e6edf6;
  --amber:#8a5a06; --amber-bg:#fbf2df;
  --green:#1d6349; --green-bg:#e3f1ea;
  --red:#8c2f2a; --red-bg:#f8e7e5;
  --shadow:0 1px 2px rgba(19,26,36,.05),0 8px 24px -18px rgba(19,26,36,.3);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0e1218; --surface:#161c25; --sunk:#1d242f;
    --ink:#e7ecf3; --ink-soft:#c2cbd7; --muted:#8d99a9;
    --rule:#2a333f; --rule-soft:#222a35;
    --navy:#8fb4e2; --navy-bright:#a8c7ee; --navy-bg:#17222f;
    --amber:#e0ac5a; --amber-bg:#2e2415;
    --green:#6fc49f; --green-bg:#14291f;
    --red:#e1877f; --red-bg:#2b1917;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -18px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy-bright)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--navy-bright); outline-offset:2px;
}

/* ---- top bar ---- */
.topbar{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:.7rem 1.25rem; background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{
  background:var(--navy); color:#fff; font-weight:700; letter-spacing:.02em;
  padding:.25rem .45rem; border-radius:3px; font-size:.8rem;
}
@media (prefers-color-scheme:dark){ .brand-mark{color:#0e1218} }
.brand-text{font-weight:600}
.nav{display:flex;gap:1.1rem;flex:1;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink-soft);padding:.2rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);border-bottom-color:var(--navy)}
.who{display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:var(--muted)}
.who-name{color:var(--ink)}
.quiet{color:var(--muted);text-decoration:none}
.quiet:hover{text-decoration:underline}
.pill{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;padding:.15rem .45rem;border-radius:3px;font-weight:600}
.pill-staff{background:var(--sunk);color:var(--muted)}
.pill-editor{background:var(--amber-bg);color:var(--amber)}
.pill-admin{background:var(--navy-bg);color:var(--navy)}

.wrap{max-width:78rem;margin:0 auto;padding:1.75rem 1.25rem 4rem;display:flex;flex-direction:column;gap:1.6rem}
.foot{max-width:78rem;margin:0 auto;padding:1rem 1.25rem 2.5rem;color:var(--muted);font-size:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

h1{font-size:1.5rem;margin:0;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:0}
.sub{color:var(--muted);margin:.25rem 0 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}

/* ---- flashes ---- */
.flash{padding:.7rem 1rem;border-radius:4px;border-left:3px solid}
.flash-ok{background:var(--green-bg);color:var(--green);border-color:var(--green)}
.flash-err{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.flash-warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber)}

/* ---- tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem}
.tile{
  background:var(--surface);border:1px solid var(--rule);border-radius:5px;
  padding:1rem 1.1rem;box-shadow:var(--shadow);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.3rem;border-top:3px solid var(--rule);
}
.tile:hover{border-color:var(--navy)}
.tile .n{font-size:1.9rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.tile .l{font-size:.82rem;color:var(--muted)}
.tile.warn{border-top-color:var(--amber)} .tile.warn .n{color:var(--amber)}
.tile.bad{border-top-color:var(--red)} .tile.bad .n{color:var(--red)}
.tile.good{border-top-color:var(--green)} .tile.good .n{color:var(--green)}
.tile.calm{border-top-color:var(--navy)}

/* ---- panels & tables ---- */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:5px;box-shadow:var(--shadow);overflow:hidden}
.panel-head{padding:.85rem 1.1rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.panel-body{padding:1.1rem}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:44rem}
th{
  text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:600;padding:.65rem .9rem;border-bottom:1px solid var(--rule);white-space:nowrap;
}
th a{color:inherit;text-decoration:none}
th a:hover{color:var(--ink)}
td{padding:.6rem .9rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tbody tr:hover{background:var(--sunk)}
tr:last-child td{border-bottom:none}
td.num,th.num{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
.empty{padding:2.5rem 1.1rem;text-align:center;color:var(--muted)}

.tag{font-size:.7rem;padding:.14rem .42rem;border-radius:3px;white-space:nowrap;font-weight:600}
.tag-out{background:var(--red-bg);color:var(--red)}
.tag-due{background:var(--amber-bg);color:var(--amber)}
.tag-done{background:var(--green-bg);color:var(--green)}
.tag-idle{background:var(--sunk);color:var(--muted)}

/* ---- forms ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=date],.field select,textarea{
  font:inherit;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--surface);color:var(--ink);width:100%;
}
.field.is-locked input,.field.is-locked select{background:var(--sunk);color:var(--muted)}
.switch{display:flex;gap:1rem}
.radio{display:flex;align-items:center;gap:.35rem;font-weight:400;font-size:.9rem}
.hint{margin:0;font-size:.78rem;color:var(--muted)}
.req{color:var(--red)}
.err{color:var(--red);font-size:.8rem;margin:.1rem 0 0}
fieldset{border:0;padding:0;margin:0 0 1.4rem;display:flex;flex-direction:column;gap:.9rem}
legend{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600;padding:0 0 .5rem}
.actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;padding-top:.4rem}

.btn{
  font:inherit;font-weight:600;font-size:.88rem;padding:.5rem .95rem;border-radius:4px;
  border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;text-decoration:none;display:inline-block;
}
@media (prefers-color-scheme:dark){ .btn{color:#0e1218} }
.btn:hover{background:var(--navy-bright);border-color:var(--navy-bright)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{background:var(--sunk);color:var(--ink);border-color:var(--rule)}

.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.filters .field{min-width:9rem}

/* ---- file detail ---- */
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.3rem;align-items:start}
@media (max-width:60rem){ .cols{grid-template-columns:1fr} }
.kv{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:.9rem}
.kv dt{color:var(--muted);font-size:.8rem}
.kv dd{margin:0}
.note{border-bottom:1px solid var(--rule-soft);padding:.7rem 0}
.note:last-child{border-bottom:none}
.note-meta{font-size:.75rem;color:var(--muted);margin-bottom:.2rem}
.note-body{white-space:pre-wrap;margin:0}
.trail{font-size:.8rem;color:var(--muted);display:flex;flex-direction:column;gap:.35rem;max-height:22rem;overflow-y:auto}

/* ---- login / install ---- */
.centre{max-width:26rem;margin:4rem auto;padding:0 1.25rem}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow);padding:1.6rem}
.card h1{margin-bottom:.3rem}
.stack{display:flex;flex-direction:column;gap:.9rem}
code{font-family:var(--mono);font-size:.85em;background:var(--sunk);padding:.1em .35em;border-radius:3px}
.steps{padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem;margin:0}
@media print{ .topbar,.foot,.actions,.filters{display:none} body{background:#fff} }

/* simple bulleted list used on the import screens */
ul.plain{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.4rem}
ul.plain li{color:var(--ink-soft)}
input[type=file]{font:inherit;padding:.4rem;border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:var(--ink);width:100%}

/* status + date, side by side */
.pairbox{display:grid;grid-template-columns:minmax(7rem,1fr) minmax(8rem,1fr);gap:.4rem}
.pairbox select,.pairbox input[type=date]{
  font:inherit;padding:.5rem .5rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--surface);color:var(--ink);width:100%;
}
.field.is-locked .pairbox select,.field.is-locked .pairbox input{background:var(--sunk);color:var(--muted)}
@media (max-width:26rem){ .pairbox{grid-template-columns:1fr} }