:root{
  --bg:#E6E8E9; --surface:#FFFFFF; --ink:#1E2A31; --muted:#5D6B73; --line:#C9CFD2;
  --hivis:#FFC72C; --hivis-ink:#1E2A31; --go:#23784A; --go-soft:#DDF0E4; --stop:#B83227; --stop-soft:#F7E0DD;
  --head:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#12181C; --surface:#1C252B; --ink:#E8ECEE; --muted:#97A5AD; --line:#33414A;
  --go:#4FBF7E; --go-soft:#1B3527; --stop:#F0705F; --stop-soft:#3D211E;}}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);padding-bottom:90px}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.1;margin:0}
h2{font-size:26px} h3{font-size:21px;margin-bottom:8px}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--hivis);outline-offset:2px}
.hidden{display:none!important}
.grow{flex:1}
header.top{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#1E2A31;color:#E6E8E9}
header.top h1{font-size:24px;letter-spacing:.02em}
header.top small{display:block;font:500 13px var(--body);opacity:.75}
button.link{background:none;border:1px solid #5D6B73;color:#E6E8E9;border-radius:4px;padding:6px 10px;cursor:pointer;font-weight:600}
main{max-width:760px;margin:0 auto;padding:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;margin-bottom:14px}
label.f{display:block;font-weight:600;margin:0 0 6px}
select,input[type=text],input[type=number],input[type=password],input[type=datetime-local],textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);font-size:17px}
textarea{min-height:130px;font-size:15px}
.row{display:grid;gap:12px}
@media(min-width:560px){.row.two{grid-template-columns:1fr 1fr}}
.status{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:4px;margin:14px 0;font-weight:600}
.status.in{background:var(--go-soft);color:var(--go)}
.status.out{background:var(--bg);color:var(--muted)}
.dot{width:12px;height:12px;border-radius:50%;background:currentColor;flex:none}
.bigbtn{display:block;width:100%;border:0;border-radius:6px;padding:22px 16px;font:800 30px/1 var(--head);letter-spacing:.03em;cursor:pointer;
  background:var(--hivis);color:var(--hivis-ink);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.bigbtn.out{background:var(--ink);color:var(--bg)}
.bigbtn:disabled{opacity:.45;cursor:not-allowed}
.btn{display:inline-block;text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:10px 14px;font-weight:600;cursor:pointer}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.small{padding:6px 10px;font-size:14px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.msg{margin-top:12px;padding:12px;border-radius:4px;font-weight:500}
.msg.ok{background:var(--go-soft);color:var(--go)}
.msg.warn{background:var(--stop-soft);color:var(--stop)}
.muted{color:var(--muted)} .small{font-size:14px}
p{margin:4px 0 10px}
.rams{background:var(--bg);border-left:6px solid var(--hivis);padding:12px 14px;white-space:pre-wrap;font-size:15px;max-height:280px;overflow:auto;margin:10px 0}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-weight:500}
.check input{width:22px;height:22px;flex:none;margin-top:2px}
.sitehead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.count{font:800 34px/1 var(--head)}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
ul.plain li:first-child{border-top:0}
.who{flex:1;min-width:0} .who b{display:block}
.flag{display:inline-block;font-size:12px;font-weight:600;padding:2px 7px;border-radius:3px;background:var(--stop-soft);color:var(--stop);white-space:nowrap}
.flag.ok{background:var(--go-soft);color:var(--go)}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-family:var(--head);font-size:16px}
tfoot td{font-weight:700}
.weeknav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.weeknav h2{font-size:22px;text-align:center;flex:1}
nav.tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
nav.tabs button{border:0;background:none;padding:12px 4px 10px;font:700 17px var(--head);color:var(--muted);cursor:pointer;border-top:4px solid transparent}
nav.tabs button[aria-selected="true"]{color:var(--ink);border-top-color:var(--hivis)}
details{border-top:1px solid var(--line);padding:10px 0}
details summary{cursor:pointer;font-weight:600}
.banner{background:var(--stop-soft);color:var(--stop);padding:12px;border-radius:4px;margin-bottom:14px;font-weight:500}
.clock{font:800 46px/1 var(--head);text-align:center;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.date{text-align:center;color:var(--muted);margin-bottom:12px}

/* RAMS PDF viewer (full screen) */
.viewer{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:#525659;padding-top:env(safe-area-inset-top,0px)}
.vbar{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 14px;background:#1E2A31;color:#E6E8E9}
.vbar b{font:700 18px/1.2 var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpages{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px}
.vpage{background:#fff;max-width:100%;box-shadow:0 1px 4px rgba(0,0,0,.4);display:grid;place-items:center}
.vpage img{width:100%;height:100%;display:block}
.vnote{color:#E6E8E9;text-align:center;padding:20px}
.vpage .vnote{color:#5D6B73}
.vfoot{background:var(--surface);color:var(--ink);padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.vfoot .check{margin:8px 0}
.vfoot .bigbtn{padding:14px;font-size:24px}
.vprogress{font-weight:600}

/* Quality records */
nav.tabs.many button{font-size:15px;padding-left:2px;padding-right:2px}
.flag.wait{background:var(--hivis);color:var(--hivis-ink)}
.flag.grey{background:var(--bg);color:var(--muted)}
textarea.short{min-height:80px}
label.btn.disabled{opacity:.45;pointer-events:none}
.qthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:10px}
.qthumbs:empty{display:none}
.qthumb{position:relative;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--bg)}
.qthumb img{width:100%;height:100%;object-fit:cover;display:block}
.qthumb button{position:absolute;top:4px;right:4px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(30,42,49,.85);color:#fff;font-weight:700;cursor:pointer}
.qrow{cursor:pointer}
.qmini{width:56px;height:56px;flex:none;border-radius:4px;object-fit:cover;background:var(--bg);display:block}
.qdetail{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--surface);color:var(--ink);padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.qdetail > *{max-width:760px;margin-left:auto;margin-right:auto}
.qtable th,.qtable td{text-align:left;white-space:normal;vertical-align:top}
.qtable th{width:34%;color:var(--muted);font:600 15px var(--body)}
.qphotos{display:grid;gap:10px}
.qphotos img{width:100%;display:block;border-radius:4px}