/* moo.lacey.me — Chris's status board, built for John.
   Scanned, not read: summary first, freshness always visible. */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --sky:#0EA5E9; --sky-deep:#0369A1; --sky-soft:#E0F2FE;
  --ground:#F4F7FA; --panel:#fff; --panel-2:#FAFCFE;
  --ink:#0B1522; --ink-2:#33475B; --ink-3:#6B8199;
  --line:#DDE7F0; --line-2:#EAF1F7;
  --live:#0F9D66; --live-bg:#E4F6EE;
  --recent:#0284C7; --recent-bg:#E2F1FC;
  --stale:#B45309; --stale-bg:#FEF3E2;
  --none:#6B7C8F; --none-bg:#EDF1F5;
  --bad:#D0413C; --bad-bg:#FCEAE9;
  --radius:14px;
  --shadow:0 1px 2px rgba(11,21,34,.05), 0 8px 24px -12px rgba(11,21,34,.15);
}
:root[data-theme="dark"]{
    --sky:#38BDF8; --sky-deep:#7DD3FC; --sky-soft:#0C2A3E;
    --ground:#080F18; --panel:#101B27; --panel-2:#0C1520;
    --ink:#EAF2F9; --ink-2:#A8BDD0; --ink-3:#728BA1;
    --line:#1E2E3E; --line-2:#182534;
    --live:#34D399; --live-bg:#0C2B21;
    --recent:#38BDF8; --recent-bg:#0A2637;
    --stale:#FBBF24; --stale-bg:#2C2010;
    --none:#8AA0B4; --none-bg:#18242F;
    --bad:#F87171; --bad-bg:#311616;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--sky-deep)} :root[data-theme="dark"] a{color:var(--sky)}
main{max-width:1040px; margin:0 auto; padding:24px 20px 60px}

/* ---------------- top bar ---------------- */
.top{background:var(--panel); border-bottom:1px solid var(--line)}
.top-in{
  max-width:1040px; margin:0 auto; padding:15px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.id{display:flex; align-items:center; gap:12px}
.id .dot{
  width:11px; height:11px; border-radius:50%; background:var(--sky);
  box-shadow:0 0 0 4px var(--sky-soft); flex-shrink:0;
}
.id h1{margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.id .for{margin:1px 0 0; font-size:12px; color:var(--ink-3); font-weight:500}
.acct{font-size:12.5px; color:var(--ink-3); text-align:right; display:flex; flex-direction:column; gap:1px}

/* ---------------- tabs ---------------- */
.tabs{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5}
.tabs-in{max-width:1040px; margin:0 auto; padding:0 20px; display:flex; gap:2px; overflow-x:auto}
.tab{
  appearance:none; background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600; color:var(--ink-3); padding:12px 15px;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--sky); border-bottom-color:var(--sky)}
.tab:focus-visible{outline:2px solid var(--sky); outline-offset:-3px; border-radius:4px}
.pane[hidden]{display:none!important}

/* ---------------- freshness chips ---------------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; white-space:nowrap; line-height:1.4;
}
.chip::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.chip.live{color:var(--live); background:var(--live-bg)}
.chip.recent{color:var(--recent); background:var(--recent-bg)}
.chip.stale{color:var(--stale); background:var(--stale-bg)}
.chip.none{color:var(--none); background:var(--none-bg)}

/* ---------------- hero ---------------- */
.hero{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--sky);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; margin-bottom:16px;
}
.hero-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.hero h2{margin:0; font-size:29px; font-weight:800; letter-spacing:-.026em; line-height:1.15; text-wrap:balance}
.hero h2.muted{color:var(--ink-3); font-weight:700; font-size:23px}
.hero-meta{
  margin:8px 0 0; font-family:"JetBrains Mono",monospace; font-size:12.5px;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.cat{
  display:inline-block; margin-top:14px; padding:5px 11px; border-radius:7px;
  font-size:13px; font-weight:700; color:var(--c, var(--sky));
  background:color-mix(in srgb, var(--c, #0EA5E9) 14%, transparent);
}

/* ---------------- grid + cards ---------------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px;
}
.card.urgent{border-left:3px solid var(--bad)}
.card-h{
  padding:13px 18px; border-bottom:1px solid var(--line-2); background:var(--panel-2);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.card-h h3{margin:0; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.card-h .count{font-size:11px; color:var(--ink-3); font-weight:600}
.card-b{padding:18px}
.lead{font-size:14px; color:var(--ink-2); max-width:66ch; margin:0 0 16px; line-height:1.6}

/* ---------------- map ---------------- */
.mapwrap{aspect-ratio:16/10; background:var(--panel-2); border-bottom:1px solid var(--line-2)}
.mapwrap iframe{width:100%; height:100%; border:0; display:block}
.mapless{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px}
.mapless svg{width:100%; height:auto; max-height:78%}
.mapless-note{margin:0 0 12px; font-size:12px; color:var(--ink-3); text-align:center; padding:0 16px}

/* ---------------- key/value ---------------- */
dl.kv{margin:0; display:flex; flex-direction:column}
dl.kv > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line-2);
}
dl.kv > div:last-child{border-bottom:0; padding-bottom:0}
dl.kv > div:first-child{padding-top:0}
dl.kv dt{margin:0; font-size:13px; color:var(--ink-3); flex-shrink:0}
dl.kv dd{
  margin:0; font-size:13px; font-weight:600; text-align:right;
  font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums;
}
.warn{
  margin:14px 0 0; padding:9px 12px; border-radius:8px; font-size:12.5px;
  background:var(--stale-bg); color:var(--stale); font-weight:600;
}

/* ---------------- day strip ---------------- */
.strip{display:flex; height:32px; border-radius:8px; overflow:hidden; border:1px solid var(--line); margin-bottom:12px}
.seg{min-width:2px}
ul.legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ink-2)}
ul.legend li{display:inline-flex; align-items:center; gap:6px}
ul.legend i{width:9px; height:9px; border-radius:2px; flex-shrink:0}
ul.legend span{font-family:"JetBrains Mono",monospace; color:var(--ink-3); font-size:11.5px}

/* ---------------- people ---------------- */
ul.people{list-style:none; margin:0; padding:0}
ul.people li{
  display:grid; grid-template-columns:1.1fr .7fr 1fr; gap:12px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13.5px;
}
ul.people li:last-child{border-bottom:0}
ul.people .pn{font-weight:700}
ul.people .pr{color:var(--ink-3); font-size:12.5px}

/* ---------------- medical ---------------- */
ul.med{list-style:none; margin:0; padding:0}
ul.med li{padding:10px 0; border-bottom:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:8px; align-items:baseline}
ul.med li:last-child{border-bottom:0}
ul.med .ml{font-size:14.5px; font-weight:700}
ul.med .sev{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  background:var(--bad-bg); color:var(--bad); padding:2px 7px; border-radius:5px;
}
ul.med .dose{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-2)}
ul.med .md{flex-basis:100%; font-size:13px; color:var(--ink-3)}

/* ---------------- timeline ---------------- */
.filters{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px;
  padding:15px 18px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.filters .floor{margin-left:auto; font-size:11.5px; color:var(--ink-3); font-family:"JetBrains Mono",monospace}
p.f{margin:0; display:flex; flex-direction:column; gap:5px}
p.f label{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
p.f input{
  font-family:inherit; font-size:16px; padding:8px 11px; border:1px solid var(--line);
  border-radius:9px; background:var(--panel-2); color:var(--ink);
}
p.f input:focus-visible{outline:2px solid var(--sky); outline-offset:1px}
.btn{
  font-family:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:9px;
  border:1px solid var(--sky); background:var(--sky); color:#00212f; cursor:pointer; text-decoration:none;
}
.btn.ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn:focus-visible{outline:2px solid var(--sky); outline-offset:2px}

ol.tl{list-style:none; margin:0; padding:0; position:relative}
ol.tl::before{content:""; position:absolute; left:79px; top:8px; bottom:8px; width:1px; background:var(--line)}
ol.tl li{position:relative; display:grid; grid-template-columns:66px 1fr; gap:22px; padding:10px 0}
.tl-t{
  font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-3);
  text-align:right; padding-top:2px; font-variant-numeric:tabular-nums;
}
.tl-d{
  position:absolute; left:75px; top:16px; width:9px; height:9px; border-radius:50%;
  border:2px solid var(--panel); box-shadow:0 0 0 1px var(--line);
}
.tl-b{display:flex; flex-direction:column; gap:4px; padding-left:10px}
.tl-n{font-size:15px; font-weight:600; letter-spacing:-.008em}
.tl-m{font-size:12px; color:var(--ink-3); display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.pill{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:2px 7px; border-radius:5px; color:var(--c);
  background:color-mix(in srgb, var(--c) 14%, transparent);
}
.src{font-family:"JetBrains Mono",monospace; font-size:11px}

/* ---------------- tables ---------------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:600px; font-size:13.5px}
th{
  text-align:left; padding:10px 15px; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); background:var(--panel-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:11px 15px; border-bottom:1px solid var(--line-2); vertical-align:top}
tr:last-child td{border-bottom:0}
td.mono{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-2)}
.tiny{font-size:11.5px}
.muted{color:var(--ink-3)}

/* ---------------- empty states ---------------- */
.empty{color:var(--ink-3); font-size:13.5px; line-height:1.6}
.empty p{margin:0 0 6px} .empty p:last-child{margin-bottom:0}
.empty strong{color:var(--ink-2); font-size:14.5px}
.empty.big{
  text-align:center; padding:44px 24px; border:1px dashed var(--line);
  border-radius:var(--radius); background:var(--panel-2);
}
code{
  font-family:"JetBrains Mono",monospace; font-size:.88em;
  background:var(--sky-soft); color:var(--sky-deep); padding:1px 5px; border-radius:4px;
}
:root[data-theme="dark"] code{color:var(--sky)}

/* ---------------- big link ---------------- */
.bigl{
  display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); text-decoration:none; color:inherit;
}
.bigl:hover{border-color:var(--sky)}
.bigl-n{display:block; font-size:16px; font-weight:700; letter-spacing:-.012em; margin-bottom:3px}
.bigl-d{display:block; font-size:13px; color:var(--ink-3)}
.bigl-a{color:var(--sky); font-size:20px}

/* ---------------- flashes + footer ---------------- */
.flash{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; font-weight:600}
.flash.bad{background:var(--bad-bg); color:var(--bad)}
.foot{max-width:1040px; margin:0 auto; padding:0 20px 40px; font-size:12px; color:var(--ink-3)}

/* ---------------- signed-out pages ---------------- */
body.auth-page{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:linear-gradient(160deg, var(--sky-soft) 0%, var(--ground) 55%);
}
:root[data-theme="dark"] body.auth-page{background:linear-gradient(160deg, #0C2A3E 0%, var(--ground) 55%)}
.auth-box{width:100%; max-width:400px; padding:24px}
.auth-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:28px;
}
.auth-card h1{margin:0 0 5px; font-size:24px; font-weight:800; letter-spacing:-.022em}
.auth-card .sub{margin:0 0 20px; font-size:13.5px; color:var(--ink-3); line-height:1.55}
.auth-card p.f{margin-bottom:14px}
.auth-card p.f input{width:100%}
.btn-primary{
  font-family:inherit; font-size:15px; font-weight:700; width:100%; padding:12px;
  border:0; border-radius:10px; background:var(--sky); color:#00212f; cursor:pointer;
  display:block; text-align:center; text-decoration:none;
}
.btn-primary.as-link{width:auto; padding:12px 22px}
.btn-primary:focus-visible{outline:2px solid var(--sky); outline-offset:2px}
.alt{margin:16px 0 0; font-size:13.5px; text-align:center}
.auth-foot{margin:16px 0 0; text-align:center; font-size:11.5px; color:var(--ink-3)}

a:focus-visible, button:focus-visible{outline:2px solid var(--sky); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

.theme-fab{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;width:42px;height:42px;border-radius:50%;border:1px solid rgba(127,127,127,.35);background:rgba(127,127,127,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:18px;cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}