/* Microflex FSQMS / MFX-OS · document-control & checklist platform · b470docs
   Brand: navy #091B2A · teal #087F88 · cyan #00B5C9 · white / light gray. Light theme by design (print-quality, floor-readable). */
:root{
  --navy:#091B2A; --navy-2:#12283A; --teal:#087F88; --teal-2:#0A9BAA; --cyan:#00B5C9; --cyan-soft:#E3F6F8;
  --bg:#F4F7F9; --surface:#FFFFFF; --surface-2:#F8FAFB; --line:#DCE3E8; --line-2:#EDF1F4;
  --ink:#0F1B26; --ink-2:#3B4A57; --muted:#5B6B7A; --muted-2:#8593A0;
  --good:#1E8E5A; --good-bg:#E7F5EE; --warn:#B26A00; --warn-bg:#FFF3E0; --bad:#C8102E; --bad-bg:#FCE9EC; --info:#0097A7; --info-bg:#E3F6F8; --hold:#5B5FC7; --hold-bg:#ECEDFB;
  --cat-1:#0097A7; --cat-2:#B26A00; --cat-3:#5B5FC7;
  --r:12px; --r-sm:8px; --r-lg:16px; --shadow:0 1px 2px rgba(9,27,42,.06),0 4px 14px rgba(9,27,42,.06); --shadow-2:0 8px 30px rgba(9,27,42,.14);
  --font:"Sora","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --nav-w:248px; --rail-w:300px; --header-h:60px;
  --m-state:140ms; --m-arrive:280ms; --m-complete:420ms;
}
@media (prefers-reduced-motion:reduce){:root{--m-state:0ms;--m-arrive:0ms;--m-complete:0ms}*{animation:none!important;transition:none!important}}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font)}
body{min-height:100vh;overflow-x:hidden}
a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline}
button{font:inherit;color:inherit} input,select,textarea{font:inherit}
img{max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em} h1{font-size:24px;font-weight:700} h2{font-size:18px;font-weight:700} h3{font-size:15px;font-weight:700} h4{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
p{margin:0}
.es{display:block;font-size:12.5px;color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.35;margin-top:1px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:max(.92em,12.5px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}
/* ── layout ───────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);grid-template-rows:var(--header-h) minmax(0,1fr);min-height:100vh}
.hdr{grid-column:1/-1;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--navy);color:#fff;height:var(--header-h);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.hdr .logo{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:0 4px}
.hdr .logo img{height:30px;width:auto;display:block}
.hdr .logo .tag{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#9FD9E2;white-space:nowrap}
.hdr .search{flex:1;display:flex;align-items:center;gap:8px;max-width:640px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:0 10px;height:42px;min-width:0}
.hdr .search input{flex:1;min-width:0;background:none;border:0;color:#fff;height:40px;font-size:14px;outline:none}
.hdr .search input::placeholder{color:#B9C7D1}
.hdr .who{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap;min-height:44px}
.btn-nav{display:none;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;width:44px;height:44px;font-size:20px;cursor:pointer}
.nav{background:var(--surface);border-right:1px solid var(--line);padding:14px 10px;position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:auto}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink-2);min-height:44px;font-weight:500}
.nav a .ico{width:22px;text-align:center;font-size:16px;opacity:.85}
.nav a:hover{background:var(--surface-2);text-decoration:none}
.nav a.on{background:var(--cyan-soft);color:var(--navy);font-weight:700;box-shadow:inset 3px 0 0 var(--cyan)}
.nav a .es{margin-top:0}
.nav .navsec{margin:12px 12px 4px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.main{padding:20px 24px 96px;min-width:0}
.main.with-rail{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);gap:24px;align-items:start}
.rail{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:12px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.crumbs a{color:var(--muted)} .crumbs .sep{opacity:.5}
.pagehead{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.pagehead .t{min-width:0;flex:1 1 320px}
.pagehead .actions{display:flex;flex-wrap:wrap;gap:8px}
/* ── cards, grids ─────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);min-width:0;container-type:inline-size}
.card.pad-0{padding:0;overflow:hidden}
.card h3{margin-bottom:8px}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spread{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.mt{margin-top:14px} .mb{margin-bottom:14px} .mt-s{margin-top:8px}
/* ── stat tiles ───────────────────────────────────────── */
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);min-width:0;cursor:pointer;text-align:left;display:block;width:100%}
.tile:hover{border-color:var(--cyan)}
.tile .n{font-size:28px;font-weight:700;line-height:1.1;color:var(--navy);display:flex;align-items:baseline;gap:8px}
.tile .n small{font-size:13px;color:var(--muted);font-weight:500}
.tile .l{font-size:13px;color:var(--ink-2);margin-top:6px;font-weight:600}
.tile.good .n{color:var(--good)} .tile.warn .n{color:var(--warn)} .tile.bad .n{color:var(--bad)} .tile.info .n{color:var(--info)} .tile.muted .n{color:var(--muted-2)}
.tile .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
/* ── status pills (always icon + label, never colour alone) ── */
.pill{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px;border-radius:14px;padding:3px 10px;font-size:12.5px;font-weight:600;line-height:1.35;border:1px solid transparent;white-space:normal;max-width:100%;text-align:left}
.pill .es{display:inline;font-size:12.5px;margin-left:4px;font-weight:500}
.pill.good{background:var(--good-bg);color:var(--good);border-color:#BFE4CF}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:#F3D9A8}
.pill.bad{background:var(--bad-bg);color:var(--bad);border-color:#F2B8C2}
.pill.info{background:var(--info-bg);color:var(--info);border-color:#B7E3EA}
.pill.hold{background:var(--hold-bg);color:var(--hold);border-color:#C9CBF3}
.pill.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.pill.navy{background:var(--navy);color:#fff;white-space:normal;text-align:left;line-height:1.3}
/* ── buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;text-decoration:none;line-height:1.2;text-align:center;transition:background var(--m-state),border-color var(--m-state),transform var(--m-state)}
.btn:hover{border-color:var(--teal);text-decoration:none} .btn:active{transform:translateY(1px)}
.btn .es{display:block;font-size:12.5px;color:inherit;opacity:.75;margin-top:0;font-weight:500}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#fff} .btn.primary:hover{background:var(--teal-2)}
.btn.cyan{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.btn.ghost{background:transparent} .btn.danger{color:var(--bad);border-color:#F2B8C2} .btn.danger:hover{background:var(--bad-bg)}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px;border-radius:8px}
.btn.lg{min-height:52px;padding:0 22px;font-size:16px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.stack{flex-direction:column;gap:0;padding:8px 16px}
/* ── forms ────────────────────────────────────────────── */
label.f{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:10px 0 4px}
label.f .es{font-weight:400}
.in,select.in,textarea.in{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink);font-size:15px}
textarea.in{min-height:88px;resize:vertical}
.in:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,181,201,.18);outline:none}
.in.err{border-color:var(--bad)}
.help{font-size:12.5px;color:var(--muted);margin-top:4px}
.errmsg{font-size:13px;color:var(--bad);margin-top:4px;font-weight:600}
.fieldgrid{display:grid;gap:0 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* ── tabs ─────────────────────────────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;padding-bottom:0}
@media (max-width:699px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}}
.tabs a{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:6px 14px;border-radius:10px 10px 0 0;color:var(--ink-2);font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a:hover{background:var(--surface-2);text-decoration:none}
.tabs a.on{color:var(--navy);border-bottom-color:var(--cyan);background:var(--surface)}
.tabs a .es{font-size:12.5px}
/* ── tables ───────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.tbl th .es{text-transform:none;letter-spacing:0;font-size:12.5px}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr:hover td{background:var(--surface-2)}
.tbl tr.click{cursor:pointer}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
/* ── list rows ────────────────────────────────────────── */
.li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line-2);cursor:pointer;min-height:56px}
.li:last-child{border-bottom:0} .li:hover{background:var(--surface-2)}
.li .ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--cyan-soft);color:var(--teal);font-size:16px;flex:0 0 36px}
.li .body{flex:1;min-width:0} .li .body b{display:block;font-weight:600;overflow-wrap:anywhere}
.li .meta{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:6px 12px}
.li .right{flex:0 1 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0;max-width:52%}
.li .right .pill{white-space:normal}
/* ── empty / loading / error states ───────────────────── */
.state{padding:28px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r);background:var(--surface-2)}
.state b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:4px}
.state .ico{font-size:26px;margin-bottom:6px;opacity:.8}
.state.err{border-color:#F2B8C2;background:var(--bad-bg);color:var(--bad)} .state.err b{color:var(--bad)}
.skel{background:linear-gradient(90deg,#EEF2F5 25%,#F7F9FA 37%,#EEF2F5 63%);background-size:400% 100%;animation:sk 1.2s ease infinite;border-radius:8px;min-height:14px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
.skel.card{min-height:96px}
.banner{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r);padding:12px 14px;font-size:14px;border:1px solid}
.banner.warn{background:var(--warn-bg);border-color:#F3D9A8;color:#6b4200} .banner.info{background:var(--info-bg);border-color:#B7E3EA;color:#045B65} .banner.bad{background:var(--bad-bg);border-color:#F2B8C2;color:#8a0b20} .banner.good{background:var(--good-bg);border-color:#BFE4CF;color:#135f3c}
.banner .ico{font-size:18px;line-height:1.2}
.banner b{display:block}
/* ── progress ring ────────────────────────────────────── */
.ring{position:relative;width:96px;height:96px;flex:0 0 96px}
.ring svg{width:96px;height:96px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .bg{stroke:var(--line-2)} .ring .fg{stroke:var(--cyan);transition:stroke-dashoffset var(--m-complete) ease}
.ring .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:20px;line-height:1;color:var(--navy)}
.ring .txt small{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px}
/* ── related rail ─────────────────────────────────────── */
.rail .card h4{margin-bottom:8px}
.rail .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:13px}
.rail .kv b{color:var(--muted);font-weight:500;white-space:nowrap}
.rail .kv span{overflow-wrap:anywhere}
.qrbox{display:flex;gap:12px;align-items:center}
.qrbox canvas,.qrbox img,.qrbox svg{width:112px;height:112px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px;flex:0 0 112px}
.qrbox .u{font-size:12.5px;overflow-wrap:anywhere}
/* ── document header block ────────────────────────────── */
.dochead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.dochead .id{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--teal)}
.dochead h1{margin-top:2px}
.dochead .facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.dochead .facts b{color:var(--muted);font-weight:500;margin-right:4px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* ── checklist runner ─────────────────────────────────── */
.runner{max-width:760px;margin:0 auto}
.runner .prog{position:sticky;top:var(--header-h);z-index:5;background:var(--bg);padding:10px 0;display:flex;align-items:center;gap:12px}
.pbar{flex:1;height:8px;background:var(--line-2);border-radius:999px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--cyan);border-radius:999px;transition:width var(--m-complete) ease}
.item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);margin-bottom:12px;animation:arrive var(--m-arrive) ease both}
@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.item.critical{border-left:5px solid var(--bad)}
.item .q{font-size:17px;font-weight:600;line-height:1.4}
.item .q .es{font-size:14px;margin-top:4px}
.item .num{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.08em;margin-bottom:6px}
.pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.pf button{min-height:56px;border-radius:12px;border:2px solid var(--line);background:var(--surface);font-weight:700;font-size:16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.pf button .es{font-size:12.5px;font-weight:500}
.pf button:hover{border-color:var(--teal)}
.pf button.on.pass{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.pf button.on.fail{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.pf button.on.na{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.item .extra{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.item.done{border-color:#BFE4CF}
.item .saved{font-size:12.5px;color:var(--good);font-weight:600}
.item .refused{font-size:13px;color:var(--bad);font-weight:600;margin-top:6px}
.sigpad{border:1px dashed var(--line);border-radius:10px;background:#fff;touch-action:none;width:100%;height:140px;display:block}
.sticky-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(244,247,249,0),var(--bg) 30%);padding:12px 0 0;display:flex;gap:10px;flex-wrap:wrap;z-index:5}
/* ── toast ────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-2);display:flex;gap:12px;align-items:center;z-index:60;max-width:min(92vw,560px);font-size:14px;animation:arrive var(--m-arrive) ease}
.toast .es{color:#B9C7D1;font-size:12.5px}
.toast button{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;min-height:36px;padding:0 10px;cursor:pointer;font-weight:600}
/* ── sheet (bottom on phones, dialog on desktop) ──────── */
.sheet-bg{position:fixed;inset:0;background:rgba(9,27,42,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);border-radius:18px 18px 0 0;width:100%;max-width:680px;max-height:92vh;overflow:auto;padding:18px 18px 28px;box-shadow:var(--shadow-2);animation:up var(--m-arrive) ease}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){.sheet-bg{align-items:center}.sheet{border-radius:18px}}
.sheet h2{margin-bottom:8px}
/* ── charts ───────────────────────────────────────────── */
.chart{width:100%;overflow:hidden}
.chart svg{width:100%;height:auto;display:block}
.chart .axis{stroke:var(--line);stroke-width:1} .chart .grid{stroke:var(--line-2);stroke-width:1}
.chart text{font-family:var(--font);fill:var(--muted);font-size:11px}
.chart .lbl{fill:var(--ink-2);font-weight:600}
.chart rect.bar{rx:3} .chart rect.bar:hover,.chart rect.cell:hover{stroke:var(--navy);stroke-width:1.5}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-2);margin-top:6px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.tip{position:fixed;z-index:70;background:var(--navy);color:#fff;font-size:12.5px;padding:8px 10px;border-radius:8px;pointer-events:none;max-width:280px;box-shadow:var(--shadow-2)}
.tip b{display:block;color:#9FD9E2}
.heat{display:grid;gap:3px}
.heat .hc{aspect-ratio:1;min-height:22px;border-radius:3px;min-width:0;border:1px solid transparent;display:block}
.heat .hc:hover{border-color:var(--navy)}
/* ── calendar ─────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .d{background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:74px;padding:6px;font-size:12.5px;cursor:pointer;min-width:0}
.cal .d:hover{border-color:var(--cyan)} .cal .d.today{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.cal .d.off{opacity:.45} .cal .d b{display:block;color:var(--ink-2)} .cal .d .dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.cal .d .dots i{width:9px;height:9px;border-radius:50%;display:inline-block}
.cal .dow{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;padding:4px 0}
/* ── search results ───────────────────────────────────── */
.results{position:absolute;top:calc(var(--header-h) - 4px);left:50%;transform:translateX(-50%);width:min(92vw,640px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);max-height:70vh;overflow:auto;z-index:40}
.results .li{min-height:52px}
.results .grp{padding:8px 14px 2px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
/* ── login ────────────────────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#F4F7F9,#E9F1F4)}
.login .box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;max-width:460px;width:100%;box-shadow:var(--shadow-2);text-align:center}
.login img{max-width:280px;margin:0 auto 18px;display:block}
/* ── timeline ─────────────────────────────────────────── */
.tl{position:relative;padding-left:22px}
.tl:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl .ev{position:relative;padding:8px 0 12px}
.tl .ev:before{content:"";position:absolute;left:-19px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--cyan);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.tl .ev.paper:before{background:var(--warn)} .tl .ev.print:before{background:var(--muted-2)} .tl .ev.fail:before{background:var(--bad)} .tl .ev.ver:before{background:var(--good)}
.tl .ev b{display:block} .tl .ev .meta{font-size:12.5px;color:var(--muted)}
/* ── print form (blank controlled form + record print) ── */
.printform{background:#fff;color:#000;border:1px solid var(--line);border-radius:8px;padding:22px;max-width:900px;font-size:12.5px;overflow-x:auto}
.printform .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px solid var(--navy);padding-bottom:8px;margin-bottom:10px}
.printform .ph .lg img{height:34px} .printform .ph .qr svg{width:80px;height:80px}
.printform h1{font-size:18px} .printform table{width:100%;border-collapse:collapse;margin-top:8px} .printform th,.printform td{border:1px solid #444;padding:5px 6px;font-size:11.5px;vertical-align:top}
.printform th{background:#EEF2F5} .printform .es{font-size:10.5px;color:#444}
.printform .cell{min-width:58px;height:26px}
.printform .pf{margin-top:8px;font-size:10.5px;color:#333;border-top:1px solid #444;padding-top:6px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.printform .idrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:6px 0}
.printform .idrow div{border-bottom:1px solid #999;padding:3px 0;min-height:24px}
@media print{
  body{background:#fff}
  .hdr,.nav,.rail,.tabs,.crumbs,.cta,.sticky-actions,.no-print,.toast,.btn-nav{display:none!important}
  .app{display:block} .main{padding:0} .main.with-rail{display:block}
  .card{box-shadow:none;border-color:#999;break-inside:avoid}
  .printform{border:0;padding:0;max-width:none}
  .printform .page{break-after:page}
  a{color:#000}
}
/* ── responsive ───────────────────────────────────────── */
@media (max-width:1240px){.main.with-rail{grid-template-columns:minmax(0,1fr)}.rail{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr)}
  .btn-nav{display:inline-flex;align-items:center;justify-content:center}
  .nav{position:fixed;left:0;top:var(--header-h);bottom:0;width:min(84vw,300px);transform:translateX(-102%);transition:transform var(--m-arrive) ease;z-index:35;box-shadow:var(--shadow-2)}
  .nav.open{transform:none}
  .nav-bg{position:fixed;inset:var(--header-h) 0 0 0;background:rgba(9,27,42,.4);z-index:34}
  .hdr .logo .tag{display:none}
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .main{padding:14px 12px 96px}
  .li{flex-wrap:wrap} .li .right{flex:1 1 100%;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;padding-left:48px}
  .results .li .right{padding-left:0}
  .grid.c2,.grid.c3{grid-template-columns:minmax(0,1fr)} .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fieldgrid{grid-template-columns:minmax(0,1fr)}
  .dochead{grid-template-columns:minmax(0,1fr)}
  .hdr{gap:8px;padding:0 8px} .hdr .search{max-width:none;flex:1 1 120px;padding:0 8px} .hdr .who .name{display:none} .hdr .logo img{height:24px} .hdr .who .btn{padding:0 10px} .hdr .who .btn .es{display:none}
  .pf{grid-template-columns:repeat(3,minmax(0,1fr))} .pf button{min-height:52px;font-size:15px}
  h1{font-size:21px}
  .printform .idrow{grid-template-columns:minmax(0,1fr)}
  .cal .d{min-height:54px;padding:4px}
}

.dl{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}.dl:last-child{border-bottom:0}.dl a{font-weight:600}.dl span{color:var(--muted)}

@container (max-width:460px){.li{flex-wrap:wrap}.li .right{flex:1 1 100%;max-width:none;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;padding-left:48px}}
.dochead.compact{grid-template-columns:minmax(0,1fr) auto;align-items:center}.dochead.compact h1{font-size:18px}.dochead.compact .qrbox svg{width:56px;height:56px;flex-basis:56px;padding:3px}
/* gated (signed out): no navigation, no search, no document content — only the sign-in gate */
.app.gated{grid-template-columns:minmax(0,1fr)}
.app.gated .nav,.app.gated .search,.app.gated .btn-nav{display:none}
.gate h1{font-size:26px;line-height:1.15}
.gate .card{box-shadow:0 10px 30px rgba(9,27,42,.08)}

/* b472 — employee-code entry on the gate (phone first: big digits, numeric keypad, one tap) */
.codebox{margin-top:16px;padding:14px 14px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.codebox label{display:block;margin-bottom:8px}
.codebox input.code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:26px;letter-spacing:.32em;text-align:center;padding:8px 10px;min-height:52px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.codebox input.code:focus{outline:2px solid var(--cyan, #00B5C9);outline-offset:1px}
.codebox input.code::placeholder{letter-spacing:.2em;color:var(--muted-2)}
.codebox .btn{min-height:52px}
.or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.codes .code-once{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:30px;letter-spacing:.3em;padding:10px 14px;border:2px dashed var(--cyan, #00B5C9);border-radius:12px;display:inline-block;background:var(--surface)}

/* b473 — QR master */
.grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.grid.c5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.grid.c5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qrtiles .tile .n{font-size:22px}
.qrmaster td.qrcell{width:84px;padding:6px} .qrmaster td.qrcell svg{width:72px;height:72px;display:block}
.qrmaster table{min-width:1040px} .qrmaster th,.qrmaster td{vertical-align:top}
.qrmaster td.links{width:250px;max-width:250px} .qrmaster td.links a{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qrmaster td.links .help{display:block;margin-bottom:6px}
.qrmaster .pill{white-space:nowrap} .qrmaster td:nth-child(2){min-width:150px} .qrmaster td:nth-child(3){min-width:200px} .qrmaster td .es{max-width:260px}
.qrmaster a.b{font-weight:700} .qrmaster tr.idx td{background:var(--surface-2)}
#qrQ{min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.print-only{display:none}
.qrsheet h1{font-size:18px;margin:0 0 4px} .qrsheet p{font-size:12px;margin:0 0 12px}
.qrgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qrcard{display:flex;gap:8px;align-items:flex-start;border:1px solid #999;border-radius:8px;padding:8px;break-inside:avoid}
.qrcard svg{width:118px;height:118px;display:block} .qrcard .t{font-size:11.5px;line-height:1.3;min-width:0} .qrcard .t .mono{font-size:10.5px;overflow-wrap:anywhere} .qrcard .st{margin-top:4px;color:#333}
@media print{
  .print-only{display:block} .qrmaster,.qrtiles,.pagehead .actions,.tabs,#qrQ{display:none!important}
  .qrgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ── FSQMS Home (b477home) — one home for the 20 core documents and 16 registers; states computed from reads ── */
.hfam summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-2);min-height:52px}
.hfam summary::-webkit-details-marker{display:none}
.hfam summary h3{margin:0} .hfam:not([open]) summary{border-bottom:0}
.hfam .hm{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.hmini{font-size:12.5px;font-weight:600;border-radius:12px;padding:1px 8px;border:1px solid transparent;white-space:nowrap}
.hmini.good{background:var(--good-bg);color:var(--good);border-color:#BFE4CF} .hmini.warn{background:var(--warn-bg);color:var(--warn);border-color:#F3D9A8} .hmini.bad{background:var(--bad-bg);color:var(--bad);border-color:#F2B8C2} .hmini.info{background:var(--info-bg);color:var(--info);border-color:#B7E3EA} .hmini.neutral{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.hchev{display:inline-block;transition:transform var(--m-state);color:var(--muted);font-size:20px;line-height:1;margin-left:2px} .hfam[open] .hchev{transform:rotate(90deg)}
.hrow{text-decoration:none} .hrow:hover{text-decoration:none}
.li .ico.hk{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.06em;font-weight:600}
.li .ico.hk.reg{background:var(--hold-bg);color:var(--hold)} .li .ico.hk.rec{background:var(--good-bg);color:var(--good)}
.li .meta.hids .mono{background:var(--surface-2);border-radius:4px;padding:0 5px}
.hneeds .hhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.hneeds .li{text-decoration:none} .hneeds .li:hover{text-decoration:none}
.hnum{flex:0 0 52px;font-size:22px;font-weight:700;line-height:36px;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted)}
.hnum.bad{color:var(--bad)} .hnum.warn{color:var(--warn)} .hnum.info{color:var(--info)} .hnum.good{color:var(--good)}
.hfacts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-2);margin-top:10px;padding:10px 12px;background:var(--surface-2);border-radius:var(--r-sm)}
.hlegend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px} .hlegend > span{display:inline-flex;align-items:center;gap:6px}
.hshelf{font-size:13px;padding:6px 0;border-bottom:1px solid var(--line-2)} .hshelf:last-of-type{border-bottom:0}
.hcontacts{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);font-size:13px}
.hcontacts > div{display:grid;grid-template-columns:1fr auto;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line-2)} .hcontacts > div:last-child{border-bottom:0}
.hcontacts .hmiss{color:var(--warn);text-align:right;overflow-wrap:anywhere;font-size:12.5px}
.hw{cursor:default} .hw:hover{background:transparent}
@media (max-width:640px){.hnum{flex-basis:44px;font-size:19px}.hcontacts > div{grid-template-columns:minmax(0,1fr)}.hcontacts .hmiss{text-align:left}}