/* DOS Audit — workshop slate + signal red. Mobile-first, sunlight-readable. */
:root{
  --ink:#1B2030; --ink2:#5A6172; --paper:#F4F5F8; --card:#FFFFFF;
  --navy:#262B3A; --red:#E0301E; --ok:#1F9D55; --okbg:#E8F6EE;
  --no:#C62828; --nobg:#FBEAE9; --na:#5A6172; --nabg:#EDEFF3;
  --warn:#C77700; --warnbg:#FFF4E0; --blue:#2456A6; --bluebg:#E8F0FB;
  --line:#E3E6EC; --r:14px; --shadow:0 1px 3px rgba(27,32,48,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
body{font-size:15.5px;line-height:1.45}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;width:100%;padding:11px 12px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2.5px solid var(--ink);outline-offset:1px}
textarea{min-height:64px;resize:vertical}
a{color:inherit}

/* ---- chrome ---- */
.topbar{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.4px;font-size:15px}
.brand .mark{width:22px;height:22px;background:var(--red);border-radius:5px;display:grid;place-items:center;
  color:#fff;font-size:11px;font-weight:900}
.topbar .spacer{flex:1}
.topbar button{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;
  border-radius:9px;padding:6px 12px;font-size:13px;font-weight:600}
.wrap{max-width:760px;margin:0 auto;padding:16px 14px 110px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
h1{font-size:24px;font-weight:800;margin:6px 0 2px;letter-spacing:-.01em}
h2{font-size:17px;font-weight:800;margin:0}
.muted{color:var(--ink2);font-size:13.5px}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px;margin:12px 0}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;
  padding:13px 18px;font-weight:700;border:1.5px solid var(--ink);background:var(--ink);color:#fff;width:100%}
.btn.secondary{background:#fff;color:var(--ink)}
.btn.small{width:auto;padding:8px 14px;font-size:13.5px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.danger{background:#fff;border-color:var(--no);color:var(--no)}

/* ---- login ---- */
.login{max-width:380px;margin:9vh auto 0;padding:0 18px}
.login .mark-lg{width:52px;height:52px;border-radius:14px;background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:21px;margin-bottom:14px}
.login h1{font-size:27px}
.field{margin:13px 0}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink2)}

/* ---- home start cards ---- */
.start{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.start{grid-template-columns:1fr}}
.start .card{margin:0;cursor:pointer;border-width:1.5px}
.start .card:active{transform:scale(.985)}
.start .count{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---- audit list ---- */
.audit-row{display:flex;gap:12px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line)}
.audit-row:last-child{border-bottom:0}
.pill{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;white-space:nowrap}
.pill.draft{background:var(--warnbg);color:var(--warn)}
.pill.submitted{background:var(--okbg);color:var(--ok)}
.score-chip{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px}

/* ---- section nav ---- */
.sections{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.sections::-webkit-scrollbar{display:none}
.sec-chip{flex:0 0 auto;border:1.5px solid var(--line);background:#fff;border-radius:99px;
  padding:7px 13px;font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap}
.sec-chip .n{font-variant-numeric:tabular-nums}
.sec-chip.active{border-color:var(--ink);color:var(--ink);background:var(--ink);color:#fff}
.sec-chip.done{border-color:var(--ok);color:var(--ok)}
.sec-chip.done.active{background:var(--ok);color:#fff}

/* ---- item card ---- */
.item{padding:15px;margin:11px 0}
.item .no{font-size:11.5px;font-weight:800;color:var(--ink2);letter-spacing:.08em}
.item .q{font-weight:700;font-size:15.5px;margin:3px 0 1px}
.item .sq{font-size:14.5px;color:var(--ink);margin:2px 0 8px}
.detail{border-top:1px dashed var(--line);margin-top:10px;padding-top:9px;font-size:13.5px;color:var(--ink2)}
.detail b{color:var(--ink)}
.toggle-detail{background:none;border:none;color:var(--ink2);font-size:13px;font-weight:700;
  padding:4px 0;text-decoration:underline;text-underline-offset:3px}

/* answer segmented */
.answers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0 4px}
.ans{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:12px 0;
  font-weight:800;font-size:14.5px;color:var(--ink2)}
.ans.yes.on{background:var(--ok);border-color:var(--ok);color:#fff}
.ans.no.on{background:var(--no);border-color:var(--no);color:#fff}
.ans.na.on{background:var(--na);border-color:var(--na);color:#fff}

/* photos */
.photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.ph{position:relative;width:64px;height:64px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
  border:none;background:rgba(22,24,29,.8);color:#fff;font-size:11px;line-height:1;padding:0}
.add-photo{width:64px;height:64px;border:1.5px dashed var(--ink2);border-radius:9px;background:#fff;
  color:var(--ink2);font-size:22px;font-weight:300}

/* fail follow-up */
.followup{background:var(--nobg);border:1px solid #F0CCCA;border-radius:10px;padding:11px;margin-top:10px}
.followup .eyebrow{color:var(--no)}

/* ---- score rail (signature) ---- */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--navy);color:#fff;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.rail .inner{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:14px}
.rail .nums{font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;white-space:nowrap}
.rail .nums small{font-weight:600;color:#AEB3BF;font-size:11px;display:block;letter-spacing:.08em;text-transform:uppercase}
.gauge{flex:1;height:8px;border-radius:99px;background:#3A3F4C;overflow:hidden}
.gauge i{display:block;height:100%;background:var(--red);border-radius:99px;transition:width .25s}
.gauge i.full{background:var(--ok)}
.rail .btn{width:auto;padding:10px 16px;background:var(--red);border-color:var(--red);font-size:14px}
.rail .btn:disabled{background:#3A3F4C;border-color:#3A3F4C}

/* ---- admin tables ---- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2);
  padding:8px 8px;border-bottom:2px solid var(--ink)}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.t-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.num{font-variant-numeric:tabular-nums;font-weight:700}

/* toast */
#toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);z-index:60;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center}
#toast.show{opacity:1}
#toast.err{background:var(--no)}

.offline-bar{background:var(--warn);color:#fff;text-align:center;font-size:12.5px;font-weight:700;
  padding:5px;letter-spacing:.04em}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* score class bands (matches MMMEA: >=90 pass, 80-89 mid, <80 fail) */
.band{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;padding:4px 11px;border-radius:9px}
.band.hi{background:var(--okbg);color:var(--ok)}
.band.mid{background:var(--warnbg);color:var(--warn)}
.band.lo{background:#FDEBE5;color:#E0532D}

/* action status pills */
.pill.open{background:var(--nobg);color:var(--no)}
.pill.in_progress{background:var(--bluebg);color:var(--blue)}
.pill.done{background:var(--warnbg);color:var(--warn)}
.pill.approved{background:var(--okbg);color:var(--ok)}
.chronic-badge{background:#3B1113;color:#FF8A80;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px}

/* counter strip (like MMMEA tracker header) */
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px;margin:12px 0}
.counter{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.counter .n{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.counter .l{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.counter.c-open .n{color:var(--no)} .counter.c-prog .n{color:var(--blue)}
.counter.c-done .n{color:var(--warn)} .counter.c-appr .n{color:var(--ok)}
.counter.c-chronic .n{color:#8C1D18} .counter.c-due .n{color:#E0532D}

/* branch hero card with photo */
.branch-hero{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--navy);min-height:150px;margin:12px 0;cursor:pointer}
.branch-hero img{width:100%;height:190px;object-fit:cover;display:block}
.branch-hero .overlay{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;
  background:linear-gradient(transparent,rgba(27,32,48,.85));color:#fff}
.branch-hero .overlay h2{color:#fff}
.branch-hero .setphoto{position:absolute;top:10px;right:10px;background:rgba(27,32,48,.75);color:#fff;
  border:1px solid rgba(255,255,255,.35);border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:700}
.branch-hero .empty{display:grid;place-items:center;height:150px;color:#AEB3BF;font-size:13.5px}

/* full-screen photo lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(12,14,22,.94);display:grid;place-items:center;
  padding:14px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:92vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lightbox .cap{position:fixed;bottom:14px;left:0;right:0;text-align:center;color:#AEB3BF;font-size:13px}
.ph{cursor:zoom-in}

/* unanswered item finder */
.rail .btn.findbtn{background:var(--warn);border-color:var(--warn);white-space:nowrap}
.flash{outline:3px solid var(--warn);outline-offset:3px;animation:flashfade 1.8s ease-out}
@keyframes flashfade{0%{outline-color:var(--warn)}100%{outline-color:transparent}}

/* missed-items sheet */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(12,14,22,.55);display:grid;place-items:end center;padding:0}
.sheet-box{background:var(--card);width:100%;max-width:760px;max-height:78vh;overflow-y:auto;
  border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.missed-row{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:11px;padding:11px 13px;margin:7px 0}
.missed-row:active{background:var(--warnbg)}
.mr-no{font-weight:800;font-size:12.5px;color:var(--warn);letter-spacing:.06em;margin-right:8px}
.mr-sec{font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.07em}
.mr-q{display:block;font-size:14px;color:var(--ink);margin-top:3px}

/* non-image evidence chip */
.ph-file{display:grid;place-items:center;background:var(--bluebg);cursor:pointer}
.ph-ext{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--blue)}

/* sticky audit header (freeze-frame) */
.audit-head{position:sticky;z-index:25;background:var(--paper);
  margin:0 -14px;padding:2px 14px 0;box-shadow:0 6px 12px -10px rgba(27,32,48,.35)}

/* section chips: two lines with item range */
.sec-chip{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;padding:7px 13px}
.sc-name{font-size:13px;font-weight:700}
.sc-sub{font-size:10.5px;font-weight:600;opacity:.75;font-variant-numeric:tabular-nums}

/* item number strip */
.numstrip{display:flex;gap:6px;overflow-x:auto;padding:7px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.numstrip::-webkit-scrollbar{display:none}
.numbtn{flex:0 0 auto;min-width:40px;height:34px;border-radius:8px;border:1.5px solid var(--line);
  background:#fff;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.numbtn.answered{background:var(--okbg);border-color:#BCE0C9;color:var(--ok)}
.numbtn:active{transform:scale(.93)}

/* item card header band */
.item-head{display:flex;align-items:center;gap:10px;margin:-15px -15px 11px;
  padding:9px 15px;background:#EAEDF3;border-bottom:1px solid var(--line);border-radius:14px 14px 0 0}
.ino{background:var(--navy);color:#fff;font-weight:800;font-size:12px;letter-spacing:.07em;
  padding:4px 10px;border-radius:7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.imeta{font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}

/* RTL support */
[dir=rtl] .brand,[dir=rtl] .row{direction:rtl}
[dir=rtl] .item-head,[dir=rtl] .audit-row{direction:rtl}
[dir=rtl] input,[dir=rtl] textarea,[dir=rtl] select{direction:rtl;text-align:right}
[dir=rtl] .sections,[dir=rtl] .numstrip{direction:ltr}
[dir=rtl] .rail .inner{direction:rtl}

/* branch program lock */
.card.prog-off{opacity:.55;cursor:default}
.card.prog-off:active{transform:none}
.prog-lock{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink2);
  background:var(--nabg);border-radius:9px;padding:8px 11px;display:inline-block}