/* ═══════════════════════════════════════════════════════════
 *  SDG Daily HSE Report — Stylesheet
 *  Single file, four sections. Edit tokens and the rest follows.
 * ═══════════════════════════════════════════════════════════ */


/* ── Design tokens — colour, type, radius ──────────────── */
:root{
  --paper:#f4f5f2; --card:#fff; --sunken:#fafbf8;
  --rule:#e6e8e2; --hair:#eef0ea;
  --ink:#18231c; --mid:#55655b; --mute:#67716b;
  --sdg:#0b5c2e; --sdg-soft:#e8f2ea;
  --alarm:#be422f; --alarm-soft:#fbece8;
  --amber:#986414; --amber-soft:#fdf3e2;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:12px;
}


/* ── Reset, page shell, header, print + PDF sheet ──────── */
*{margin:0;padding:0;box-sizing:border-box}
/* The hidden attribute must win. Any class that sets display — .panel is
   display:flex — otherwise out-specifies the browser's [hidden]{display:none}
   and the element stays on screen with no way to dismiss it. */
[hidden]{display:none !important}
body{background:var(--paper);font-family:var(--sans);color:var(--ink);line-height:1.5;
  font-feature-settings:"tnum" 1;-webkit-text-size-adjust:100%;padding-bottom:88px}
.wrap{max-width:680px;margin:0 auto;padding:0 16px}

/* header */
header.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 0 14px;margin-bottom:14px;border-bottom:1px solid var(--rule)}
header.top .brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.mark{width:38px;height:38px;background:var(--sdg);border-radius:10px;display:grid;
  place-items:center;flex:none;font-family:var(--mono);font-size:12px;font-weight:600;color:#fff}
header.top h1{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
header.top p{font-size:12.5px;color:var(--mute)}
header.top p b{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--mid)}
.hmeta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.who{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--mute)}
.who button{font:inherit;font-size:11.5px;background:none;border:0;color:var(--mid);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:3px 2px}
.who button:hover{color:var(--alarm)}
.who button[disabled]{color:var(--mute);text-decoration:none;cursor:default}
.hdate{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;white-space:nowrap}
.state{font-size:11px;font-weight:600;padding:4px 11px;border-radius:99px;white-space:nowrap;
  letter-spacing:.02em}
.state.new{background:var(--hair);color:var(--mute)}
.state.draft{background:var(--amber-soft);color:var(--amber)}
.state.ready{background:var(--sdg-soft);color:var(--sdg)}
.state.sent{background:var(--sdg);color:#fff}
@media (max-width:480px){
  .hmeta{align-items:flex-start;flex:1 1 100%}
  header.top{gap:10px}
}

/* bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--card);
  border-top:1px solid var(--rule);padding:11px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.bar .inner{max-width:680px;margin:0 auto;width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.bar .msg{font-size:12.5px;color:var(--mid);min-width:0}
.bar .msg b{color:var(--sdg);font-weight:600}
.bar .msg.bad b{color:var(--alarm)}
.btn{font:inherit;font-size:14px;font-weight:600;padding:11px 18px;min-height:46px;
  border:1px solid var(--sdg);background:var(--sdg);color:#fff;cursor:pointer;border-radius:9px;
  flex:none}
.btn:hover{background:#0a4f27}
.btn[disabled]{background:var(--hair);border-color:var(--rule);color:#9aa39c;cursor:default}
.link{font:inherit;font-size:12.5px;background:none;border:0;color:var(--mute);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:4px}
.link:hover{color:var(--ink)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:82px;background:var(--ink);
  color:#fff;padding:11px 19px;border-radius:99px;font-size:13.5px;font-weight:600;opacity:0;
  pointer-events:none;transition:opacity .18s}
.toast.on{opacity:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sheet{display:none}

@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;padding-bottom:0}
  .bar,.toast,.add,.row .x,.link{display:none!important}
  section{break-inside:avoid;border-color:#ccc}

  /* PDF mode: print the purpose-built sheet, not the form UI */
  body.print-sheet .wrap{display:none!important}
  body.print-sheet .sheet{display:block}
  .sheet{font-size:10pt;line-height:1.45;color:#000}
  .sheet .sh-head{border-bottom:2px solid #000;padding-bottom:8pt;margin-bottom:12pt}
  .sheet .sh-org{font-family:var(--mono);font-size:7.5pt;letter-spacing:.14em;
    text-transform:uppercase;color:#444}
  .sheet h1{font-size:17pt;font-weight:600;letter-spacing:-.01em;margin:3pt 0 5pt}
  .sheet .sh-sub{font-size:9pt;color:#333}
  .sheet h2{font-size:8.5pt;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    margin:14pt 0 5pt;padding-bottom:2pt;border-bottom:1px solid #000;break-after:avoid}
  .sheet table.st{width:100%;border-collapse:collapse;margin-bottom:4pt;break-inside:avoid}
  .sheet table.st th,.sheet table.st td{border:1px solid #bbb;padding:4pt 6pt;
    text-align:left;vertical-align:top;font-size:9pt}
  .sheet table.st thead th{background:#eee;font-size:7.5pt;letter-spacing:.07em;
    text-transform:uppercase;font-weight:600}
  .sheet table.st td.n,.sheet table.st th.n{text-align:right;
    font-family:var(--mono);white-space:nowrap}
  .sheet table.st tr.tot td{font-weight:700;background:#f4f4f4}
  .sheet ol.sh-list{margin:0 0 4pt 16pt;font-size:9.5pt}
  .sheet ol.sh-list li{margin-bottom:2pt}
  .sheet .sh-none{font-size:9pt;color:#555;font-style:italic;margin-bottom:4pt}
  .sheet .sh-flag{font-size:9pt;border-left:3px solid #000;padding:4pt 7pt;
    background:#f2f2f2;margin:4pt 0}
  .sheet .sh-narr{border:1px solid #999;padding:6pt 8pt;margin:5pt 0;break-inside:avoid}
  .sheet .sh-narr b{font-size:9pt;display:block;margin-bottom:3pt}
  .sheet .sh-narr p{font-size:9pt}
  .sheet .sh-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:7pt;break-inside:avoid}
  .sheet .sh-pics img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #999}
  .sheet .sh-pics figcaption{font-size:7.5pt;color:#333;margin-top:2pt}
  .sheet .sh-sign{display:grid;grid-template-columns:1fr 1fr;gap:20pt;margin-top:20pt;
    break-inside:avoid}
  .sheet .sh-sign span{font-size:7.5pt;letter-spacing:.1em;text-transform:uppercase;color:#444}
  .sheet .sh-sign b{display:block;font-size:10.5pt;margin:3pt 0 22pt}
  .sheet .sh-sign i{display:block;border-top:1px solid #000;padding-top:3pt;
    font-size:7.5pt;font-style:normal;color:#444}
  .sheet .sh-foot{margin-top:14pt;padding-top:5pt;border-top:1px solid #bbb;
    font-family:var(--mono);font-size:7pt;color:#555}
}


/* ── Cumulative KPI strip, section cards, field grids ──── */
/* cumulative KPI strip — separate tiles on a transparent gap, so a short last
   row reads as intentional instead of leaving a hole in a bordered container */
.kpiwrap{margin-bottom:14px}
.kpiwrap .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin:0 2px 8px;display:block}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px}
.kpi{background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:12px 14px 13px;min-width:0}
.kpi .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);line-height:1.35}
.kpi .v{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.015em;
  line-height:1.2;margin:6px 0 2px}
.kpi .n{font-size:11px;color:var(--mid);line-height:1.35}
.kpi.good .v{color:var(--sdg)} .kpi.good .n{color:var(--sdg)}
.kpi.bad{border-color:#e8c3ba;background:var(--alarm-soft)}
.kpi.bad .v{color:var(--alarm)} .kpi.bad .n{color:var(--alarm)}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .kpi{padding:10px 12px 11px}
  .kpi .v{font-size:20px}
}

/* sections */
section{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:17px 17px 19px;margin-bottom:12px}
section h2{font-size:15px;font-weight:600;letter-spacing:-.012em;margin-bottom:14px}
section h2 span{font-weight:400;color:var(--mute);font-size:12.5px;margin-left:7px}


/* ── Inputs, toggles, repeat rows, photos, counters, bar ─ */
/* fields */
label{display:block;margin-bottom:5px;font-size:12.5px;color:var(--mid)}
label.req::after{content:" *";color:var(--alarm)}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--ink);padding:10px 12px;
  min-height:46px;border:1px solid var(--rule);background:var(--card);width:100%;
  border-radius:9px}
textarea{min-height:auto;font-size:15px;line-height:1.45;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sdg);
  box-shadow:0 0 0 3px var(--sdg-soft)}
[aria-invalid="true"]{border-color:var(--alarm);background:var(--alarm-soft)}
.grid{display:grid;gap:12px}
.stack{display:grid;gap:14px}
.stack label{margin-bottom:5px}
.g2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.fld{min-width:0}
.total{display:flex;align-items:baseline;gap:8px;margin-top:13px;padding-top:13px;
  border-top:1px solid var(--hair);font-size:13px;color:var(--mid)}
.total b{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--sdg);
  letter-spacing:-.02em}

/* toggles */
.togs{display:flex;flex-wrap:wrap;gap:7px}
.tog{padding:9px 14px;min-height:44px;border:1px solid var(--rule);background:var(--card);
  font:inherit;font-size:13.5px;color:var(--mid);cursor:pointer;border-radius:99px}
.tog[aria-pressed="true"]{background:var(--sdg);border-color:var(--sdg);color:#fff;font-weight:600}
.tog.bad[aria-pressed="true"]{background:var(--alarm);border-color:var(--alarm)}

/* repeat rows */
.row{border:1px solid var(--hair);background:var(--sunken);border-radius:10px;
  padding:12px;margin-bottom:9px;position:relative}
.row .x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;
  background:transparent;color:var(--mute);font-size:19px;cursor:pointer;line-height:1;
  border-radius:7px}
.row .x:hover{background:var(--alarm-soft);color:var(--alarm)}
.add{width:100%;padding:12px;min-height:46px;border:1px dashed #b9c6bc;background:var(--card);
  color:var(--sdg);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:9px}
.add:hover{background:var(--sdg-soft);border-style:solid}
.none{font-size:12.5px;color:var(--mute);padding:2px 0 11px}

/* photo attach */
.drop{position:relative;border:1px dashed #b9c6bc;background:var(--sunken);border-radius:10px;
  padding:18px 14px;text-align:center;cursor:pointer;display:block}
/* The native file input is covered by the label, not merely faded. The global
   input{} rule forces min-height, border and padding, so each has to be undone
   or the control shows through as a "Choose Files" box. */
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;
  margin:0;padding:0;border:0;background:none;opacity:0;font-size:0;cursor:pointer}
.drop:hover,.drop.over{background:var(--sdg-soft);border-color:var(--sdg);border-style:solid}
.drop b{display:block;font-size:13.5px;color:var(--sdg);font-weight:600;margin-bottom:3px}
.drop span{font-size:12px;color:var(--mute)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;
  margin-bottom:11px}
.thumb{position:relative}
.thumb .pic{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;display:block;
  background:var(--hair);border:1px solid var(--rule)}
.thumb .rm{position:absolute;top:5px;right:5px;width:26px;height:26px;border:0;border-radius:7px;
  background:rgba(24,35,28,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0}
.thumb .rm:hover{background:var(--alarm)}
.thumb .cap{margin-top:5px;font-size:12px;padding:7px 8px;min-height:36px;border-radius:7px}
.thumb .sz{font-size:10px;color:var(--mute);font-family:var(--mono);margin-top:3px}

/* checkbox */
.chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mid);
  margin-top:10px;cursor:pointer}
.chk input{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--sdg)}

/* counters */
.cts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:7px}
.ct{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 10px;
  border:1px solid var(--hair);background:var(--sunken);border-radius:9px;font-size:13px}
.ct.on{border-color:var(--alarm);background:var(--alarm-soft)}
.stp{display:flex;align-items:center;gap:3px;flex:none}
.stp button{width:34px;height:34px;border:1px solid var(--rule);background:var(--card);
  font:inherit;font-size:17px;color:var(--mid);cursor:pointer;border-radius:7px;line-height:1}
.stp button:hover:not([disabled]){border-color:var(--sdg);color:var(--sdg)}
.stp button[disabled]{opacity:.35;cursor:default}
.stp b{font-family:var(--mono);font-size:15px;min-width:22px;text-align:center}
.ct.on .stp b{color:var(--alarm)}

.dayhint{font-size:11.5px;color:var(--mute);margin-top:5px}
.flag{font-size:11.5px;color:var(--amber);margin-top:5px;font-weight:500}

/* quiet notes */
.hint{font-size:12.5px;color:var(--mute);margin-top:9px;line-height:1.5}
.warn{font-size:12.5px;line-height:1.5;margin-top:11px;padding:10px 12px;border-radius:9px;
  background:var(--amber-soft);color:#6f4a0e}
.warn b{color:var(--ink)}
.due{font-size:12.5px;line-height:1.5;margin-top:11px;padding:10px 12px;border-radius:9px;
  background:var(--alarm-soft);color:var(--alarm);font-weight:500}


/* ── Small layout helpers ──────────────────────────────── */
/* These replace style="" attributes. A Content-Security-Policy with
   style-src 'self' blocks inline style attributes as well as <style> blocks,
   so nothing in this app may carry one. */
.hd-txt{min-width:0}
.foot-note{font-size:12px;color:var(--mute);margin:16px 0 8px;text-align:center}
.bar-actions{display:flex;align-items:center;gap:10px;flex:none}

/* ── Login and setup pages ─────────────────────────────── */
/* Kept here rather than in a <style> block: a Content-Security-Policy
   with style-src 'self' blocks inline styles, which is exactly how this
   page came to render unstyled in production. */
body.login,body.setup{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
body.setup .box{max-width:620px}
.box{width:100%;max-width:390px}
.lg{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.lg .mk{width:42px;height:42px;background:var(--sdg);border-radius:11px;display:grid;
  place-items:center;flex:none;font-family:var(--mono);font-size:13px;font-weight:600;color:#fff}
.lg h1{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.lg p{font-size:12.5px;color:var(--mute)}
form{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:22px 20px 24px;
  box-shadow:0 1px 2px rgba(24,35,28,.05),0 10px 26px -14px rgba(24,35,28,.16)}
form h2{font-size:15px;font-weight:600;margin-bottom:16px}
.fld{margin-bottom:13px}
.pw{position:relative}
.pw button{position:absolute;right:6px;top:6px;height:34px;padding:0 10px;border:0;
  background:transparent;color:var(--mute);font:inherit;font-size:12px;cursor:pointer;border-radius:7px}
.pw button:hover{color:var(--ink);background:var(--sunken)}
button.go{width:100%;font-family:inherit;font-size:14px;font-weight:600;padding:12px;min-height:48px;
  border:1px solid var(--sdg);background:var(--sdg);color:#fff;cursor:pointer;border-radius:9px;margin-top:4px}
button.go:hover{background:#0a4f27}
.msg{background:var(--alarm-soft);border:1px solid #eec6bc;color:var(--alarm);font-size:12.5px;
  padding:10px 12px;border-radius:9px;margin-bottom:14px;line-height:1.45}
.ft{font-size:11.5px;color:var(--mute);text-align:center;margin-top:16px;line-height:1.5}

/* setup page only */
.card{background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:22px 20px 24px;box-shadow:0 1px 2px rgba(24,35,28,.05),0 10px 26px -14px rgba(24,35,28,.16)}
.card h2{font-size:15px;font-weight:600;margin-bottom:14px}
.note{font-size:13px;color:var(--mid);line-height:1.55;margin-bottom:12px}
.note code{font-family:var(--mono);font-size:12px;background:var(--sunken);
  border:1px solid var(--hair);border-radius:5px;padding:1px 5px}
.note.warn{background:var(--amber-soft);border:1px solid #e3c68f;color:#6f4a0e;
  border-radius:9px;padding:10px 12px}
table.acct{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:12.5px}
table.acct th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);padding:7px 8px;border-bottom:1px solid var(--rule)}
table.acct td{padding:8px;border-bottom:1px solid var(--hair);vertical-align:top}
table.acct td.pw{font-family:var(--mono);font-weight:600;color:var(--sdg);white-space:nowrap}
.btn-link{display:inline-block;font-size:13px;font-weight:600;padding:10px 16px;min-height:44px;
  border:1px solid var(--sdg);background:var(--sdg);color:#fff;border-radius:9px;
  text-decoration:none;line-height:24px}
.btn-link:hover{background:#0a4f27}
.chk{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mid);margin:4px 0 14px}
.chk input{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--sdg)}

/* ── Management page ───────────────────────────────────── */
body.admin{padding:0 0 60px}
body.admin .wrap{max-width:1180px;margin:0 auto;padding:0 18px}
body.admin .top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;padding:18px 0 14px;margin-bottom:6px;
  border-bottom:1px solid var(--rule)}
body.admin .hd{display:flex;align-items:center;gap:12px;min-width:0}
body.admin .mk{width:38px;height:38px;background:var(--sdg);border-radius:10px;display:grid;
  place-items:center;flex:none;font-family:var(--mono);font-size:12px;font-weight:600;color:#fff}
body.admin h1{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
body.admin .sub{font-size:12.5px;color:var(--mute)}
.lnk{font-size:12.5px;color:var(--sdg);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;background:none;border:0;font-family:inherit}
.lnk:hover{color:var(--ink)}

.tabs{display:flex;gap:6px;margin:14px 0}
.tabs button{font:inherit;font-size:13px;font-weight:600;padding:9px 16px;min-height:42px;
  border:1px solid var(--rule);background:var(--card);color:var(--mid);cursor:pointer;
  border-radius:99px}
.tabs button[aria-pressed="true"]{background:var(--sdg);border-color:var(--sdg);color:#fff}

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.filters .f{display:flex;flex-direction:column;gap:4px}
.filters .f span{font-size:11.5px;color:var(--mid)}
.filters input,.filters select{min-height:42px;font-size:14px;padding:8px 10px;
  border:1px solid var(--rule);border-radius:9px;background:var(--card);width:auto;min-width:150px}
.hint{font-size:12.5px;color:var(--mute)}

.summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.summary .st{background:var(--card);border:1px solid var(--rule);border-radius:10px;
  padding:9px 14px;display:flex;flex-direction:column;gap:2px;min-width:110px}
.summary .st .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}
.summary .st b{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:-.02em}
.summary .st b.bad{color:var(--alarm)}

.tablewrap{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);font-weight:500;padding:11px 12px;
  border-bottom:1px solid var(--rule);white-space:nowrap}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr{cursor:pointer}
table.tbl tbody tr:hover{background:var(--sunken)}
table.tbl tr.off td{opacity:.55}
table.tbl th.r,table.tbl td.r{text-align:right;font-family:var(--mono);white-space:nowrap}
table.tbl td.empty{text-align:center;color:var(--mute);padding:30px;cursor:default}
table.tbl.sm{font-size:12.5px}
table.tbl.sm th,table.tbl.sm td{padding:7px 9px}

.tag{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:99px;
  background:var(--hair);color:var(--mid);margin-left:6px}
.tag.ok{background:var(--sdg-soft);color:var(--sdg)}
.tag.bad{background:var(--alarm-soft);color:var(--alarm)}
.tag.role-admin{background:var(--amber-soft);color:var(--amber)}
.tag.role-editor{background:var(--sdg-soft);color:var(--sdg)}
.tag.role-viewer{background:var(--hair);color:var(--mid)}

.pager{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}

/* slide-over */
.scrim{position:fixed;inset:0;background:rgba(24,35,28,.4);z-index:50}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--paper);
  z-index:51;display:flex;flex-direction:column;box-shadow:-10px 0 44px rgba(24,35,28,.22)}
.panel .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:var(--card);border-bottom:1px solid var(--rule)}
.panel .ph h2{font-size:16px;font-weight:600;letter-spacing:-.02em}
.panel .x{width:36px;height:36px;border:1px solid var(--rule);background:var(--sunken);
  border-radius:9px;font-size:19px;line-height:1;color:var(--mid);cursor:pointer}
.panel .x:hover{background:var(--alarm-soft);border-color:var(--alarm);color:var(--alarm)}
.panel .pb{overflow-y:auto;padding:18px 20px 40px;flex:1}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;
  margin-bottom:16px}
.kv > div{display:flex;flex-direction:column;gap:2px}
.kv span{font-size:11px;color:var(--mute)}
.kv b{font-size:13.5px;font-weight:600}
.sect{margin-bottom:16px}
.sect h3{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);margin-bottom:7px}
.sect .list{margin:0 0 0 18px;font-size:13px}
.sect .list li{margin-bottom:3px}
.narr{font-size:13px;line-height:1.55;color:var(--mid);background:var(--card);
  border:1px solid var(--rule);border-radius:9px;padding:10px 12px}
.meta{font-size:12px;color:var(--mute);margin-bottom:5px}

.form .f{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.form .f > span{font-size:12.5px;color:var(--mid)}
.form .f small{font-size:11.5px;color:var(--mute)}
.form input[type=text],.form input[type=email],.form select{min-height:46px;font-size:15px;
  padding:10px 12px;border:1px solid var(--rule);border-radius:9px;background:var(--card);
  width:100%}
.form .chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mid);
  margin-bottom:14px}
.form .chk input{width:20px;height:20px;flex:none;accent-color:var(--sdg)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:12px;padding:7px 12px;min-height:38px;border:1px solid var(--rule);
  background:var(--card);color:var(--mid);border-radius:99px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--sdg);border-color:var(--sdg);color:#fff;font-weight:600}

.pfoot{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--rule)}
.btn.ghost{background:var(--card);border-color:var(--rule);color:var(--mid)}
.btn.ghost:hover{border-color:var(--mute);color:var(--ink)}
.btn.danger{background:var(--card);border-color:var(--alarm);color:var(--alarm)}
.btn.danger:hover{background:var(--alarm);color:#fff}
.btn[disabled]{opacity:.5;cursor:default}

.warn{background:var(--amber-soft);border:1px solid #e3c68f;color:#6f4a0e;font-size:12.5px;
  padding:10px 12px;border-radius:9px;margin-bottom:12px;line-height:1.5}
.pwbox{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:14px;
  display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.pwbox > div{display:flex;flex-direction:column;gap:2px}
.pwbox span{font-size:11px;color:var(--mute)}
.pwbox b{font-size:14px}
.good{background:var(--sdg-soft);border:1px solid #bcdcae;color:var(--sdg);
  font-size:12.5px;padding:10px 12px;border-radius:9px;margin-bottom:14px;line-height:1.45}
.pwbox b.pw{font-family:var(--mono);font-size:17px;color:var(--sdg);letter-spacing:.01em}

.denied{background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:22px 22px 24px;max-width:620px;margin-top:18px}
.denied h2{font-size:16px;font-weight:600;margin-bottom:10px}
.denied p{font-size:13.5px;color:var(--mid);line-height:1.6;margin-bottom:12px}
.denied b{color:var(--ink)}
.denied code{font-family:var(--mono);font-size:12px;background:var(--sunken);
  border:1px solid var(--hair);border-radius:6px;padding:2px 6px;display:inline-block;
  margin-top:4px}
.denied .btn{display:inline-block;text-decoration:none;background:var(--sdg);
  border-color:var(--sdg);color:#fff;padding:11px 17px;border-radius:9px;font-size:13px;
  font-weight:600}