/* SilverEdge Daily Operations Log — house style.
   Cool graphite ground, audit-blue accent, semantic status colors kept strictly
   separate from the accent so "needs attention" never reads as decoration. */

:root {
  --paper:#F7F8FA; --card:#FFFFFF; --card-2:#FBFCFD;
  --ink:#14181F; --ink-2:#3D4655; --ink-3:#6B7687; --ink-4:#98A2B1;
  --rule:#DEE3EA; --rule-2:#EDF0F4;
  --accent:#14406B; --accent-2:#2A6199; --accent-soft:#E8EEF6;
  --ok:#1F6B4C; --ok-soft:#E4F1EB; --ok-line:#8FC7AE;
  --warn:#8A6212; --warn-soft:#FBF1DE; --warn-line:#DFBE78;
  --crit:#9E2B20; --crit-soft:#FAEAE8; --crit-line:#DFA098;
  --late:#6B4E9E; --late-soft:#EFEAF7; --late-line:#B6A2DA;
  --shadow:0 1px 2px rgba(20,24,31,.05), 0 10px 30px -20px rgba(20,24,31,.35);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --r:3px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0D1015; --card:#161A21; --card-2:#1A1F27;
    --ink:#E9ECF1; --ink-2:#B4BDCA; --ink-3:#818C9D; --ink-4:#616C7C;
    --rule:#2A313B; --rule-2:#212832;
    --accent:#7FAEDF; --accent-2:#9CC3EC; --accent-soft:#17222F;
    --ok:#7FC2A4; --ok-soft:#15241D; --ok-line:#2F5F4A;
    --warn:#D9AE5C; --warn-soft:#28211410; --warn-soft:#262014; --warn-line:#5D4C21;
    --crit:#E88A7E; --crit-soft:#2A1A17; --crit-line:#69332B;
    --late:#B79EE8; --late-soft:#211B2E; --late-line:#463A63;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0D1015; --card:#161A21; --card-2:#1A1F27;
  --ink:#E9ECF1; --ink-2:#B4BDCA; --ink-3:#818C9D; --ink-4:#616C7C;
  --rule:#2A313B; --rule-2:#212832;
  --accent:#7FAEDF; --accent-2:#9CC3EC; --accent-soft:#17222F;
  --ok:#7FC2A4; --ok-soft:#15241D; --ok-line:#2F5F4A;
  --warn:#D9AE5C; --warn-soft:#262014; --warn-line:#5D4C21;
  --crit:#E88A7E; --crit-soft:#2A1A17; --crit-line:#69332B;
  --late:#B79EE8; --late-soft:#211B2E; --late-line:#463A63;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -20px rgba(0,0,0,.8);
}
:root[data-theme="light"]{
  --paper:#F7F8FA; --card:#FFFFFF; --card-2:#FBFCFD;
  --ink:#14181F; --ink-2:#3D4655; --ink-3:#6B7687; --ink-4:#98A2B1;
  --rule:#DEE3EA; --rule-2:#EDF0F4;
  --accent:#14406B; --accent-2:#2A6199; --accent-soft:#E8EEF6;
  --ok:#1F6B4C; --ok-soft:#E4F1EB; --ok-line:#8FC7AE;
  --warn:#8A6212; --warn-soft:#FBF1DE; --warn-line:#DFBE78;
  --crit:#9E2B20; --crit-soft:#FAEAE8; --crit-line:#DFA098;
  --late:#6B4E9E; --late-soft:#EFEAF7; --late-line:#B6A2DA;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}

/* ---------------------------------------------------------------- chrome */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--card);
  border-bottom:1px solid var(--rule); display:flex; align-items:center;
  gap:22px; padding:0 20px; height:56px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; white-space:nowrap}
.brand svg{color:var(--accent); flex:none}
.brand span{font-family:var(--serif); font-size:17px; font-weight:600}
.brand small{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); font-weight:500; margin-top:-2px;
}
nav{display:flex; gap:2px; overflow-x:auto; flex:1}
nav a{
  padding:7px 12px; border-radius:var(--r); color:var(--ink-2); font-size:13.5px;
  font-weight:500; white-space:nowrap;
}
nav a:hover{background:var(--rule-2); text-decoration:none}
nav a.on{background:var(--accent-soft); color:var(--accent); font-weight:650}
.who{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-3); white-space:nowrap}
.who b{color:var(--ink); font-weight:600}

.wrap{max-width:1180px; margin:0 auto; padding:28px 20px 80px}
.wrap.narrow{max-width:820px}

h1{font-family:var(--serif); font-size:28px; font-weight:600; letter-spacing:-.01em; margin:0 0 4px}
.sub{color:var(--ink-3); font-size:14px; margin:0 0 24px}
h2{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:32px 0 12px}

/* ----------------------------------------------------------------- cards */
.card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card .hd{padding:14px 18px; border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:12px}
.card .hd h3{margin:0; font-size:14px; font-weight:700; letter-spacing:-.005em}
.card .hd .meta{font-family:var(--mono); font-size:11px; color:var(--ink-4); letter-spacing:.04em}
.card .bd{padding:18px}

/* --------------------------------------------------------- status banner */
.banner{
  border:1px solid var(--rule); border-left-width:4px; border-radius:var(--r);
  background:var(--card); padding:16px 18px; display:flex; gap:14px; align-items:flex-start;
  box-shadow:var(--shadow);
}
.banner .ico{flex:none; margin-top:1px}
.banner h3{margin:0 0 3px; font-size:16px; font-weight:700; letter-spacing:-.01em}
.banner p{margin:0; font-size:13.5px; color:var(--ink-2)}
.banner.ok{border-left-color:var(--ok)} .banner.ok .ico,.banner.ok h3{color:var(--ok)}
.banner.warn{border-left-color:var(--warn)} .banner.warn .ico,.banner.warn h3{color:var(--warn)}
.banner.crit{border-left-color:var(--crit)} .banner.crit .ico,.banner.crit h3{color:var(--crit)}
.banner.info{border-left-color:var(--accent)} .banner.info .ico,.banner.info h3{color:var(--accent)}
.banner .act{margin-left:auto; flex:none}

/* ------------------------------------------------------------- form bits */
label.f{display:block; margin-bottom:14px}
label.f .lb{display:block; font-size:12.5px; font-weight:650; color:var(--ink-2); margin-bottom:5px}
label.f .hint{display:block; font-size:11.5px; color:var(--ink-4); margin-top:4px; line-height:1.45}
input[type=text],input[type=number],input[type=time],input[type=password],input[type=url],select,textarea{
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  background:var(--card-2); border:1px solid var(--rule); border-radius:var(--r);
  padding:8px 10px; transition:border-color .12s, background .12s;
}
input[type=number]{font-family:var(--mono); font-variant-numeric:tabular-nums}
input:hover,select:hover,textarea:hover{border-color:var(--ink-4)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); background:var(--card)}
textarea{min-height:74px; resize:vertical; line-height:1.5}
input.miss,textarea.miss{border-color:var(--warn-line); background:var(--warn-soft)}
input.pulled{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok); font-weight:600}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 16px}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0 16px}

button,.btn{
  font-family:inherit; font-size:13.5px; font-weight:600; padding:8px 15px;
  border-radius:var(--r); border:1px solid var(--rule); background:var(--card);
  color:var(--ink); cursor:pointer; transition:background .12s, border-color .12s;
}
button:hover,.btn:hover{background:var(--rule-2); text-decoration:none}
button.primary,.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] button.primary,:root[data-theme="dark"] .btn.primary{color:#0D1015}
@media (prefers-color-scheme: dark){button.primary,.btn.primary{color:#0D1015}}
button.primary:hover,.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
button:disabled{opacity:.45; cursor:not-allowed}
button.sm{font-size:12px; padding:5px 10px}
button.ghost{background:transparent}

/* ----------------------------------------------------------- checklist */
.meter{height:5px; background:var(--rule-2); border-radius:99px; overflow:hidden}
.meter i{display:block; height:100%; background:var(--accent); transition:width .2s ease}
.meter i.full{background:var(--ok)}
.checklist{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:1px}
.checklist li{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ink-3); padding:3px 0}
.checklist li.ok{color:var(--ink-4)}
.checklist li.no{color:var(--ink)}
.checklist svg{flex:none; margin-top:3px}
.checklist li.ok svg{color:var(--ok)}
.checklist li.no svg{color:var(--warn)}

.problems{list-style:none; margin:10px 0 0; padding:0}
.problems li{
  font-size:13px; color:var(--crit); padding:6px 10px; background:var(--crit-soft);
  border-left:2px solid var(--crit-line); margin-bottom:3px; border-radius:0 var(--r) var(--r) 0;
}

/* ---------------------------------------------------------------- tables */
.scroll{overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r); background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th{
  text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:9px 12px; background:var(--rule-2);
  border-bottom:1px solid var(--rule); white-space:nowrap; position:sticky; top:0; z-index:2;
}
td{padding:9px 12px; border-bottom:1px solid var(--rule-2); color:var(--ink-2); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--card-2)}
td.num,th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
td.key{color:var(--ink); font-weight:600; white-space:nowrap}

/* ------------------------------------------------------------ the board */
.board{border-collapse:separate; border-spacing:0}
.board th.d{
  text-align:center; padding:6px 0; font-family:var(--mono); font-size:9.5px;
  letter-spacing:0; text-transform:none; min-width:34px;
}
.board th.d b{display:block; font-size:11px; color:var(--ink-2); font-weight:700}
.board th.d.we{color:var(--ink-4); opacity:.5}
.board td.nm{
  position:sticky; left:0; background:var(--card); z-index:1; border-right:1px solid var(--rule);
  min-width:170px; padding:6px 12px;
}
.board tbody tr:hover td.nm{background:var(--card-2)}
.board td.nm .n{color:var(--ink); font-weight:600; font-size:13px; display:block; line-height:1.3}
.board td.nm .d{font-size:10.5px; color:var(--ink-4); text-transform:uppercase; letter-spacing:.05em}
.board td.c{padding:2px; text-align:center}
.cell{
  width:26px; height:26px; margin:0 auto; border-radius:2px; display:flex;
  align-items:center; justify-content:center; font-family:var(--mono); font-size:10px;
  font-weight:700; cursor:default; border:1px solid transparent;
}
.cell.s-complete{background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)}
.cell.s-late{background:var(--late-soft); color:var(--late); border-color:var(--late-line)}
.cell.s-incomplete{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}
.cell.s-missing{background:var(--crit-soft); color:var(--crit); border-color:var(--crit-line)}
.cell.s-excused{background:var(--rule-2); color:var(--ink-4)}
.cell.s-legacy{background:repeating-linear-gradient(-45deg,var(--rule-2),var(--rule-2) 3px,transparent 3px,transparent 6px); color:var(--ink-4); border-color:var(--rule)}
.cell.s-pending{background:transparent; border:1px dashed var(--rule); color:var(--ink-4)}
.cell.s-off{background:transparent; color:var(--ink-4); opacity:.35}
.legend{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; font-size:12px; color:var(--ink-3)}
.legend span{display:flex; align-items:center; gap:7px}
.legend i{width:13px; height:13px; border-radius:2px; border:1px solid transparent; display:block}

/* ----------------------------------------------------------------- pills */
.pill{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 7px; border-radius:2px; font-weight:600; white-space:nowrap;
}
.p-ok{background:var(--ok-soft); color:var(--ok)}
.p-warn{background:var(--warn-soft); color:var(--warn)}
.p-crit{background:var(--crit-soft); color:var(--crit)}
.p-late{background:var(--late-soft); color:var(--late)}
.p-flat{background:var(--rule-2); color:var(--ink-3)}
.p-acc{background:var(--accent-soft); color:var(--accent)}

/* ----------------------------------------------------------------- tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden}
.tile{background:var(--card); padding:15px 16px}
.tile .n{font-family:var(--mono); font-size:25px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15}
.tile .n.ok{color:var(--ok)} .tile .n.warn{color:var(--warn)} .tile .n.crit{color:var(--crit)}
.tile .l{font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.4}

/* --------------------------------------------------------------- spark */
.spark{display:block}
.delta{font-family:var(--mono); font-size:11.5px; font-weight:600}
.delta.up{color:var(--ok)} .delta.dn{color:var(--crit)} .delta.flat{color:var(--ink-4)}

.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.right{text-align:right}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}
.empty{padding:34px 18px; text-align:center; color:var(--ink-4); font-size:13.5px}

/* ----------------------------------------------------------------- login */
.loginwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.loginbox{width:100%; max-width:390px}
.loginbox .card .bd{padding:26px}
.codein{
  font-family:var(--mono); font-size:26px; letter-spacing:.28em; text-align:center;
  text-transform:uppercase; padding:12px 10px;
}
.err{color:var(--crit); font-size:13px; margin-top:12px; min-height:18px}

@media (max-width:720px){
  .topbar{height:auto; flex-wrap:wrap; padding:10px 14px; gap:10px}
  nav{width:100%; order:3}
  .wrap{padding:20px 14px 60px}
  h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}