/* OCSI SAP — extracted verbatim from docs/prototype/ocsi_sap_prototype_v05.html <style>.
   Production additions (login card, header user chip) are appended at the bottom. */
:root{
  --maroon:#8C1D2F; --maroon-soft:#F4E6E8; --ink:#20242C; --paper:#FBFAF7;
  --slate:#6A7280; --line:#E5E1D8; --teal:#1F7A8C; --gold:#C99532; --usa:#9AA0AB;
  --flag:#C0392B; --ok:#2E7D5B;
  --display:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
header{border-bottom:3px solid var(--maroon);padding:28px 32px 0;background:#fff}
.brand{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand h1{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em}
.brand h1 span{color:var(--maroon)}
.brand .tag{font-family:var(--mono);font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.08em}
nav{display:flex;gap:2px;margin-top:20px;overflow-x:auto}
nav button{font-family:var(--display);font-size:13px;font-weight:600;background:none;border:none;border-bottom:3px solid transparent;padding:10px 16px;cursor:pointer;color:var(--slate);white-space:nowrap;margin-bottom:-3px}
nav button:hover{color:var(--ink)}
nav button.active{color:var(--maroon);border-bottom-color:var(--maroon)}
nav button:focus-visible{outline:2px solid var(--maroon);outline-offset:-2px}
main{max-width:1080px;margin:0 auto;padding:32px 24px 80px}
section{display:none}section.active{display:block}
h2{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.sub{color:var(--slate);margin-bottom:28px;max-width:66ch}
.grid{display:grid;gap:20px}
@media(min-width:820px){.grid.two{grid-template-columns:1fr 1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;position:relative}
.card h3{font-family:var(--display);font-size:15px;font-weight:600;margin-bottom:4px;padding-right:70px}
.card .note{font-size:12.5px;color:var(--slate);margin-bottom:16px}
.chartbox{position:relative;height:300px}
.chartbox.tall{height:340px}
.tools{position:absolute;top:16px;right:16px;display:flex;gap:6px}
.tools button{font-family:var(--mono);font-size:11px;border:1px solid var(--line);background:#fff;color:var(--slate);border-radius:6px;padding:4px 8px;cursor:pointer}
.tools button:hover{color:var(--maroon);border-color:var(--maroon)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.stat .v{font-family:var(--mono);font-size:25px;font-weight:500;color:var(--maroon)}
.stat .v small{font-size:13px;color:var(--slate);font-weight:400}
.stat .l{font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.stat .d{font-family:var(--mono);font-size:11.5px;margin-top:4px}
.d.up{color:var(--ok)}.d.dn{color:var(--flag)}.d.flat{color:var(--slate)}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
select{font-family:var(--body);font-size:13.5px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-family:var(--display);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);text-align:left;padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line)}
td.mono{font-family:var(--mono)}
tbody tr:hover td{background:var(--maroon-soft)}
.pill{display:inline-block;font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:20px}
.pill.flag{background:#FBE9E7;color:var(--flag)}
.pill.ok{background:#E6F2EC;color:var(--ok)}
.pill.na{background:#F0EEE8;color:var(--slate)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--slate);margin-top:14px}
.legend span{display:flex;align-items:center;gap:6px}
.covgrid td:first-child{font-weight:500}
.yrbar{display:inline-flex;gap:3px}
.yr{font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:4px;background:var(--maroon-soft);color:var(--maroon)}
.yr.empty{background:#F0EEE8;color:#B4AFA3}
.banner{background:var(--maroon-soft);border:1px solid #E8CDD1;border-radius:10px;padding:12px 16px;font-size:13px;color:#6E2430;margin-bottom:24px}
.hint{font-size:12px;color:var(--slate);font-style:italic;margin-top:10px}
footer{text-align:center;font-family:var(--mono);font-size:11.5px;color:var(--slate);padding:20px}
/* comments */
.tools button.hasc{color:var(--maroon);border-color:var(--maroon)}
.cmt{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.cmt .who{font-family:var(--mono);font-size:11.5px;color:var(--slate);margin-bottom:3px}
.cmt .txt{font-size:14px}
.cform{display:grid;gap:8px;margin-top:14px}
.cform input,.cform textarea{font-family:var(--body);font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff}
.cform textarea{min-height:70px;resize:vertical}
.cform .row{display:flex;gap:8px;justify-content:space-between;align-items:center}
.cform button{font-family:var(--display);font-size:13px;font-weight:600;background:var(--maroon);color:#fff;border:none;border-radius:7px;padding:8px 16px;cursor:pointer}
.cform button.ghost{background:none;color:var(--slate);border:1px solid var(--line)}
.cform input:disabled{background:#F0EEE8;color:var(--slate)}
.cempty{font-size:13px;color:var(--slate);font-style:italic}
/* modal */
#modal{display:none;position:fixed;inset:0;background:rgba(32,36,44,.55);z-index:50;padding:4vh 4vw;align-items:center;justify-content:center}
#modal.open{display:flex}
#modalCard{background:#fff;border-radius:12px;padding:26px;width:100%;max-width:1000px;max-height:92vh;overflow:auto;position:relative}
#modalCard h3{font-family:var(--display);font-size:18px;margin-bottom:14px;padding-right:40px}
#modalClose{position:absolute;top:14px;right:14px;font-size:18px;border:none;background:none;cursor:pointer;color:var(--slate)}
#modalClose:hover{color:var(--maroon)}
#modalBody .chartbox{height:60vh}
.ddgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.ddstat{border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.ddstat .v{font-family:var(--mono);font-size:20px;color:var(--maroon)}
.ddstat .l{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.05em}
@media(prefers-reduced-motion:no-preference){section.active{animation:fade .25s ease}}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}

/* ---- production additions (not in prototype): auth UI in the same design system ---- */
.brand .user{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--slate)}
.brand .user button{font-family:var(--mono);font-size:11px;border:1px solid var(--line);background:#fff;color:var(--slate);border-radius:6px;padding:4px 10px;cursor:pointer}
.brand .user button:hover{color:var(--maroon);border-color:var(--maroon)}
.login-wrap{max-width:420px;margin:8vh auto 0}
.login-wrap .card{padding:30px}
.login-wrap .card h3{font-size:18px;padding-right:0;margin-bottom:8px}
.login-err{background:#FBE9E7;color:var(--flag);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px}
.btn-primary{font-family:var(--display);font-size:14px;font-weight:600;background:var(--maroon);color:#fff;border:none;border-radius:7px;padding:10px 18px;cursor:pointer;width:100%}
.btn-primary:hover{background:#7A1929}
.btn-primary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- production additions: admin tab + local sign-in (appended; existing classes reused where possible) ---- */
.login-alt{display:block;margin:12px auto 0;background:none;border:none;color:var(--slate);font-family:var(--body);font-size:13px;cursor:pointer;text-decoration:underline}
.login-alt:hover{color:var(--maroon)}
.local-form{display:grid;gap:8px;margin-top:14px}
.local-form input{font-family:var(--body);font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#fff}
.btn-admin{font-family:var(--display);font-size:13px;font-weight:600;background:var(--maroon);color:#fff;border:none;border-radius:7px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.btn-admin:hover{background:#7A1929}
.btn-admin:disabled{opacity:.55;cursor:default}
.btn-admin.ghost{background:none;color:var(--slate);border:1px solid var(--line)}
.btn-admin.ghost:hover{color:var(--maroon);border-color:var(--maroon)}
.admin-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.admin-row input[type="text"]{font-family:var(--body);font-size:13.5px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#fff}
.admin-subhead{font-family:var(--display);font-size:14px;font-weight:600;margin:22px 0 8px}
.admin-msg{font-size:12.5px;color:var(--slate)}
.admin-msg.ok{color:var(--ok)}
.admin-msg.err{color:var(--flag)}
.admin-dim{font-size:12.5px;color:var(--slate)}
.admin-mtime{font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.admin-file{font-size:12px;color:var(--slate);max-width:220px}
.admin-errs{display:inline-block;margin-left:8px;font-size:12px}
.admin-errs summary{cursor:pointer;color:var(--flag)}
.admin-errdetail{font-family:var(--mono);font-size:11.5px;white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin:6px 0 0;max-width:520px;overflow-x:auto}
.admin-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:end;margin-top:10px}
.admin-form input,.admin-form select{font-family:var(--body);font-size:13.5px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#fff;width:100%}
.admin-th{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.05em}
#adUserMsg{display:block;margin-top:10px}