/* Neue Fit Roster — design system. Single source of truth; see DESIGN.md. */

:root{
  --bg:#faf9f7; --panel:#ffffff; --panel-2:#f3f0ea; --ink:#211e1a; --muted:#8a857c;
  --line:#e7e3dc; --accent:#e85d4a; --danger:#c73a2a; --ok:#2aa876; --amber:#a07a00;
  --lane:rgba(0,0,0,.045); --ruler:#b9b4aa; --shadow:0 10px 30px rgba(30,25,18,.10);
  --day-a:#ffffff; --day-b:#f3f0ea;
  --z-sticky:30; --z-menu:40; --z-pop:50; --z-toast:60;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#161514; --panel:#1f1e1c; --panel-2:#242220; --ink:#edeae5; --muted:#8f8a82;
         --line:#2e2c28; --danger:#e06552; --amber:#d4a72c;
         --lane:rgba(255,255,255,.05); --ruler:#6b665e; --shadow:0 10px 30px rgba(0,0,0,.5);
         --day-a:#1e1d1b; --day-b:#242220; }
}
:root[data-theme="dark"]{ --bg:#161514; --panel:#1f1e1c; --panel-2:#242220; --ink:#edeae5;
         --muted:#8f8a82; --line:#2e2c28; --danger:#e06552; --amber:#d4a72c;
         --lane:rgba(255,255,255,.05); --ruler:#6b665e; --shadow:0 10px 30px rgba(0,0,0,.5);
         --day-a:#1e1d1b; --day-b:#242220; }
:root[data-theme="light"]{ --bg:#faf9f7; --panel:#ffffff; --panel-2:#f3f0ea; --ink:#211e1a;
         --muted:#8a857c; --line:#e7e3dc; --danger:#c73a2a; --amber:#a07a00;
         --lane:rgba(0,0,0,.045); --ruler:#b9b4aa; --shadow:0 10px 30px rgba(30,25,18,.10);
         --day-a:#ffffff; --day-b:#f3f0ea; }

*{box-sizing:border-box}
[hidden]{display:none !important;}
body{background:var(--bg); color:var(--ink); margin:0;
     font:13.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- app bar (every page) ---------- */
.appbar{position:sticky; top:0; z-index:var(--z-sticky); background:var(--bg);
        border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px;
        padding:0 20px; height:52px;}
.appbar .wordmark{font-size:15.5px; font-weight:800; letter-spacing:-.3px; color:var(--ink);
        white-space:nowrap;}
.appbar .wordmark em{color:var(--accent); font-style:normal;}
.appbar nav{display:flex; gap:2px; align-items:center;}
.appbar nav a{padding:5px 11px; border-radius:8px; color:var(--muted); font-size:13px;
        font-weight:500; text-decoration:none; transition:color .15s, background .15s;}
.appbar nav a:hover{color:var(--ink); background:var(--panel-2); text-decoration:none;}
.appbar nav a.on{color:var(--ink); background:var(--panel-2); font-weight:700;}
.appbar .right{margin-left:auto; display:flex; align-items:center; gap:10px;}
.period-pill{font-size:12px; color:var(--muted); background:var(--panel); border:1px solid var(--line);
        border-radius:99px; padding:3px 12px; white-space:nowrap;}
.period-pill b{color:var(--ink); font-weight:600;}

/* needs-action badge + urgent banner */
.navbadge{display:inline-grid; place-items:center; min-width:17px; height:17px; border-radius:99px;
  background:var(--danger); color:#fff; font-size:10.5px; font-weight:700; padding:0 5px;
  margin-left:6px; vertical-align:1px;}
.urgentbar{background:var(--danger); color:#fff; padding:8px 20px; font-size:13px; font-weight:600;}
.urgentbar a{color:#fff; text-decoration:underline;}

/* user menu */
.usermenu{position:relative;}
.usermenu>button{width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
        background:var(--panel-2); color:var(--ink); font-weight:700; font-size:12.5px;
        cursor:pointer; display:grid; place-items:center; padding:0;}
.usermenu>button:hover{border-color:var(--muted);}

/* ---------- menus (dropdown) ---------- */
.menu{position:absolute; right:0; top:calc(100% + 6px); min-width:184px; background:var(--panel);
      border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:5px;
      z-index:var(--z-menu); display:none;}
.menu.open{display:block; animation:rise .15s cubic-bezier(.22,1,.36,1);}
.menu a, .menu button{display:flex; width:100%; align-items:center; gap:8px; text-align:left;
      padding:7px 10px; border:none; background:none; border-radius:7px; color:var(--ink);
      font:inherit; font-size:13px; cursor:pointer; text-decoration:none;}
.menu a:hover, .menu button:hover{background:var(--panel-2); text-decoration:none;}
.menu .sep{height:1px; background:var(--line); margin:5px 6px;}
.menu .mlabel{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
      padding:6px 10px 3px; font-weight:700;}
.menu button.danger{color:var(--danger);}
.menu .who{padding:7px 10px 4px; font-size:12px; color:var(--muted);}
@keyframes rise{from{opacity:0; transform:translateY(2px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .menu.open{animation:none;} *{transition:none !important;} }

/* ---------- buttons ---------- */
button, .btn{font:inherit; font-size:13px; cursor:pointer; border:1px solid var(--line);
      background:var(--panel); color:var(--ink); border-radius:8px; padding:6px 13px;
      display:inline-flex; align-items:center; gap:6px; text-decoration:none;
      transition:border-color .15s, background .15s, color .15s;}
button:hover, .btn:hover{border-color:var(--muted); text-decoration:none;}
button:focus-visible, .btn:focus-visible, .chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
button.primary, .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
button.primary:hover, .btn.primary:hover{filter:brightness(.95);}
button.ghost, .btn.ghost{border-color:transparent; background:none; color:var(--muted);}
button.ghost:hover, .btn.ghost:hover{color:var(--ink); background:var(--panel-2);}
button.danger, .btn.danger{color:var(--danger); border-color:var(--danger);}
button.small, .btn.small{padding:3px 10px; font-size:12.5px;}
button:disabled{opacity:.45; cursor:default;}

/* ---------- forms ---------- */
input, select, textarea{font:inherit; font-size:13px; padding:6px 10px; border:1px solid var(--line);
      border-radius:8px; background:var(--panel); color:var(--ink);}
input::placeholder{color:var(--muted);}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
textarea{width:100%; min-height:260px; font:12.5px/1.55 ui-monospace,Menlo,monospace;}
label.field{display:block; font-size:11px; letter-spacing:.6px; text-transform:uppercase;
      color:var(--muted); font-weight:700; margin:0 0 4px;}

/* ---------- page scaffolding ---------- */
main{max-width:1080px; margin:28px auto 64px; padding:0 20px;}
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
      margin:0 0 20px; flex-wrap:wrap;}
.pagehead h2{font-size:18px; font-weight:700; letter-spacing:-.2px; margin:0 0 2px;}
.pagehead .desc{color:var(--muted); font-size:13px; max-width:64ch; margin:0;}
h3.section{font-size:15.5px; font-weight:700; margin:32px 0 10px;}
h3.section:first-of-type{margin-top:0;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
      padding:16px 18px; margin-bottom:14px;}
.muted{color:var(--muted);}
.mono{font:12px ui-monospace,Menlo,monospace;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

/* tabs */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin:0 0 18px;}
.tabs a{padding:7px 14px; font-size:13px; color:var(--muted); border-radius:8px 8px 0 0;
      border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none;}
.tabs a:hover{color:var(--ink); text-decoration:none;}
.tabs a.on{color:var(--ink); font-weight:700; border-bottom-color:var(--accent);}

/* ---------- tables ---------- */
table{border-collapse:collapse; width:100%; background:var(--panel); border:1px solid var(--line);
      border-radius:10px; overflow:hidden; font-size:13px;}
th{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); text-align:left;
   padding:9px 12px; border-bottom:1px solid var(--line); font-weight:700; background:var(--panel-2);}
td{padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr:hover td, tr.hoverable:hover td{background:var(--panel-2);}

/* ---------- pills & banners ---------- */
.pill{display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:2px 10px;
      font-size:11.5px; font-weight:600; background:var(--panel); border:1px solid var(--line);
      color:var(--muted);}
.pill.ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, var(--line));}
.pill.warn{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, var(--line));}
.pill.dry{color:var(--amber); border-color:color-mix(in srgb, var(--amber) 45%, var(--line));}
.banner{background:var(--panel); border:1px solid var(--line); border-radius:10px;
      padding:11px 14px; margin-bottom:16px; font-size:13px;}
.banner b:first-child{color:var(--accent);}

/* ---------- details / logs ---------- */
details.msg summary{cursor:pointer; font-size:12px; color:var(--muted); list-style:none;}
details.msg summary::before{content:'▸ '; font-size:10px;}
details.msg[open] summary::before{content:'▾ ';}
details.msg pre{white-space:pre-wrap; background:var(--bg); border:1px solid var(--line);
      border-radius:8px; padding:10px; font-size:12px; margin:8px 0 0;}

/* SOP prose */
.sopbody{max-width:72ch;}
.sopbody h1,.sopbody h2,.sopbody h3{font-size:14px; margin:14px 0 6px;}
.sopbody p,.sopbody li{font-size:13.5px;}
.sopbody code{background:var(--bg); border:1px solid var(--line); border-radius:4px;
      padding:0 4px; font-size:12px;}

/* SOP playbook cards (collapsible, tickable steps) */
details.sop{background:var(--panel); border:1px solid var(--line); border-radius:12px;
      margin-bottom:10px; overflow:hidden;}
details.sop summary{display:flex; align-items:center; gap:12px; padding:13px 18px;
      cursor:pointer; list-style:none; user-select:none;}
details.sop summary::-webkit-details-marker{display:none;}
details.sop summary:hover{background:var(--panel-2);}
details.sop[open] summary{border-bottom:1px solid var(--line);}
.sopnum{width:24px; height:24px; border-radius:50%; background:var(--panel-2); color:var(--muted);
      font-size:12px; font-weight:700; display:grid; place-items:center; flex:0 0 auto;}
details.sop[open] .sopnum{background:var(--ink); color:var(--bg);}
.soptitle{font-weight:700; font-size:14px;}
.sopmeta{margin-left:auto; display:flex; gap:10px; align-items:center;}
.sopmeta .progress{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.sopmeta .progress.alldone{color:var(--ok); font-weight:700;}
.sopinner{padding:6px 18px 14px;}
.soptools{justify-content:flex-end; margin-top:4px;}
.sopbody ol{padding-left:0; list-style:none; counter-reset:steps;}
.sopbody ol > li{position:relative; padding:8px 10px 8px 34px; margin:0 0 6px;
      background:var(--bg); border:1px solid var(--line); border-radius:9px;}
.sopbody ol > li .steptick{position:absolute; left:10px; top:11px; width:15px; height:15px;
      accent-color: var(--ok); cursor:pointer;}
.sopbody ol > li.ticked{opacity:.45;}
.sopbody ol > li ul{margin:6px 0 0;}
.sopbody ol ol{list-style:decimal; padding-left:20px;}

/* toast (shared) */
.toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--ink);
      color:var(--bg); padding:9px 18px; border-radius:99px; font-size:13px; z-index:var(--z-toast);
      opacity:0; transition:opacity .2s; pointer-events:none;}
.toast.show{opacity:1;}