/* ── BLOCK 11: Safety module (w80a) ──────────────────────────────────────────
   Leans on the design system in block02-base.css (:root tokens; the dark
   theme is the inline adeThemeCss override layer) — everything here uses
   var() tokens with light fallbacks so both themes hold, the block10 rule. */

#module-safety .sf-tab { padding:7px 14px; border:none; background:none;
  font:inherit; font-size:13px; color:var(--muted,#6b6b70); cursor:pointer;
  border-bottom:2px solid transparent; }
#module-safety .sf-tab.active { color:var(--green,#399845); font-weight:700;
  border-bottom-color:var(--green,#399845); }

/* the greyed "coming soon" sub-nav children (fork F16) — NOT nav-* ids, no
   setModule, no click; they answer with a toast so a tap is never silent */
.sidebar .nav-item.sf-soon { opacity:.45; cursor:default; }
.sidebar .nav-item.sf-soon:hover { background:transparent; }
/* W80b (report §6 m): the label is an ellipsised span and the tag a compact
   clock — no more three-line rows beside a SOON pill at the 200 px sidebar */
.sf-soon-lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-soon-tag { margin-left:auto; flex-shrink:0; font-size:12px !important; color:var(--muted,#6b6b70); opacity:.8; }

.sf-loading { padding:40px; text-align:center; color:var(--muted,#6b6b70); }
.sf-empty { padding:50px 24px; text-align:center; color:var(--muted,#6b6b70); }
.sf-empty i { font-size:40px; }
.sf-empty h3 { margin:10px 0 6px; color:var(--text,#222); }
.sf-empty p { font-size:13px; margin:0; }

#module-safety .muted, #sdsDrawer .muted, #sdsForm .muted, #sdsManage .muted,
#sdsLocDlg .muted, #sdsAttach .muted { color:var(--muted,#6b6b70); }

/* ── Dashboard ── */
.sf-kpi-red .stat-val { color:#c0392b; }
.sf-dash-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 18px 18px; }
@media (max-width: 900px) { .sf-dash-cols { grid-template-columns:1fr; } }
.sf-card { background:var(--surface,#fff); border:1px solid var(--gray-m,#e2e2e5);
  border-radius:10px; padding:12px 14px; min-width:0; }
.sf-card-wide { grid-column:1/-1; }
.sf-card-head { font-size:12.5px; font-weight:700; display:flex; gap:7px; align-items:center; margin-bottom:8px; }
.sf-card-sub { font-weight:400; font-size:11px; color:var(--muted,#6b6b70); margin-left:auto; }
.sf-card-empty { font-size:12px; color:var(--muted,#6b6b70); padding:8px 0; }
.sf-gauge { height:12px; border-radius:6px; background:var(--gray-l,#f0f0f2); overflow:hidden; margin-top:6px; }
.sf-gauge-fill { display:block; height:100%; background:var(--green,#399845); border-radius:6px; transition:width .3s; }
.sf-gauge-lbl { font-size:12px; color:var(--muted,#6b6b70); margin-top:6px; }
.sf-bar-row { display:flex; align-items:center; gap:8px; padding:5px 4px; cursor:pointer; border-radius:6px; }
.sf-bar-row:hover { background:var(--gray-l,#f4f4f5); }
.sf-bar-label { font-size:12px; width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sf-bar-track { flex:1; height:8px; background:var(--gray-l,#f0f0f2); border-radius:4px; overflow:hidden; }
.sf-bar-fill { display:block; height:100%; border-radius:4px; background:var(--blue,#1865b0); }
.sf-bar-n { font-size:12px; font-weight:700; width:28px; text-align:right; }
.sf-soon-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.sf-soon-tile { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  border:1px dashed var(--gray-m,#e2e2e5); color:var(--muted,#6b6b70); font-size:12px; }
.sf-soon-tile i { font-size:20px; }
.sf-soon-tile b { display:block; font-size:12.5px; }
.sf-soon-tile span { font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; }
.sf-soon-tile.sf-soon-live { border-style:solid; border-color:var(--green,#399845); color:var(--text,#222); cursor:pointer; }
.sf-soon-tile.sf-soon-live i, .sf-soon-tile.sf-soon-live span { color:var(--green,#399845); }
.sf-soon-tile.sf-soon-live:hover { background:var(--green-l,#e7f4e9); }

/* ── SDS list ── */
.sf-fbar-tgl:empty { display:none; }
.sf-active-strip { display:flex; gap:6px; flex-wrap:wrap; padding:6px 16px 0; }
.sf-achip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:16px;
  background:var(--green-l,#e7f4e9); color:var(--green,#399845); font-size:11.5px; font-weight:700; }
.sf-achip i { cursor:pointer; }
.sf-togglechip.active { background:var(--green-l,#e7f4e9); border-color:var(--green,#399845);
  color:var(--green,#399845); font-weight:700; }
.sf-row { cursor:pointer; }
.sf-name { font-size:12.5px; font-weight:600; }
.sf-sub { font-size:11px; color:var(--muted,#6b6b70); }
.sf-late { color:#c0392b; font-weight:600; }
.sf-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:20px;
  font-size:11px; font-weight:700; white-space:nowrap; text-decoration:none; }
.sf-st-active   { background:rgba(57,152,69,.14); color:#2c7d38; }
.sf-st-inactive { background:rgba(110,110,115,.14); color:#6b6b70; }
.sf-chip-tier2  { background:rgba(194,124,14,.14); color:#a36a08; }
.sf-chip-type   { background:rgba(24,101,176,.12); color:#1865b0; }
.sf-chip-file   { background:rgba(57,152,69,.14); color:#2c7d38; }
.sf-chip-link   { background:rgba(24,101,176,.12); color:#1865b0; }
.sf-chip-missing{ background:rgba(192,57,43,.14); color:#c0392b; }
.sf-chip-muted  { background:rgba(110,110,115,.14); color:#6b6b70; }
a.sf-chip:hover { filter:brightness(.92); }
.sf-pager { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:8px 16px;
  border-top:1px solid var(--gray-m,#e2e2e5); font-size:12px; color:var(--muted,#6b6b70);
  background:var(--surface,#fff); }
.sf-pager .btn[disabled] { opacity:.4; pointer-events:none; }

/* ── Card / forms (modal-card bodies) ── */
.sf-drawer-head { display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--gray-m,#e2e2e5); }
.sf-drawer-title { flex:1; min-width:0; font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }   /* W85b RIDER 2: the house `.modal-head h3 { flex:1 }` pattern — the title grows, the controls sit right; min-width:0 is what lets it ellipse */
.sf-drawer-sub { margin-top:5px; display:flex; gap:6px; flex-wrap:wrap; }
.sf-drawer-body { padding:14px 18px; overflow:auto; }
.sf-actions { display:flex; gap:8px; flex-wrap:wrap; }
.sf-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
@media (max-width: 700px) { .sf-fgrid { grid-template-columns:1fr; } }
.sf-f-l { font-size:10.5px; font-weight:700; color:var(--muted,#6b6b70); text-transform:uppercase; margin-bottom:2px; }
.sf-f-v { font-size:12.5px; word-break:break-word; }
.sf-notes { margin-top:12px; font-size:12.5px; line-height:1.55; white-space:pre-wrap;
  background:var(--gray-l,#f7f7f8); border-radius:8px; padding:10px 12px; }
.sf-sect { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; margin:18px 0 8px;
  padding-top:12px; border-top:1px solid var(--gray-l,#f0f0f2); }
.sf-sect-sub { font-weight:400; font-size:11px; color:var(--muted,#6b6b70); }
.sf-form-sect { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; margin-top:6px; }
.sf-meta { margin-top:16px; font-size:11px; color:var(--muted,#6b6b70); }
.sf-hint { font-size:11.5px; color:var(--muted,#6b6b70); margin:10px 0; }
.sf-versions, .sf-locs { display:flex; flex-direction:column; gap:4px; }
.sf-vrow, .sf-lrow { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px;
  border:1px solid var(--gray-l,#f0f0f2); font-size:12.5px; }
.sf-vrow.sf-vcur { border-color:var(--green,#399845); background:var(--green-l,#e7f4e9); }
.sf-vmain { flex:1; min-width:0; }
.sf-drawer-body .btn-sm, .sf-mgrow .btn-sm { padding:4px 8px; font-size:12px; line-height:1.2; }
.sf-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
@media (max-width: 700px) { .sf-form-grid { grid-template-columns:1fr; } }
.sf-lbl { display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--muted,#6b6b70); }
.sf-lbl .filter-input { font-weight:400; width:100%; box-sizing:border-box; }
.sf-lbl-row { flex-direction:row; align-items:center; gap:8px; align-self:end; padding-bottom:8px; }
.sf-inline-add { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.sf-inline-add .filter-input { flex:1; min-width:140px; }
.sf-mgrow { display:flex; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px solid var(--gray-l,#f0f0f2); font-size:12.5px; }
.sf-mgrow > span { flex:1; min-width:0; }
.sf-mg-off > span { opacity:.6; }

/* sort direction on the list headers (R1-B LOW: the classes were toggled
   but nothing drew them) */
#sdsTable th.sort-asc::after  { content:" \2191"; font-size:11px; color:var(--blue,#1865b0); }
#sdsTable th.sort-desc::after { content:" \2193"; font-size:11px; color:var(--blue,#1865b0); }

/* ── Phones (the W19 standard: ≤ 860 px) ── */
@media (max-width: 860px) {
  /* R1-B MED: base collapses every .stats-bar on phones behind a "Stats"
     toggle that only modules present at boot receive — the Safety tiles
     stay visible (they are the dashboard) */
  #sfDash .stats-bar { max-height:none; opacity:1; padding:9px 12px; }
  #sdsFilters.ade-fbar .filter-group { width:100%; }
  #sdsFilters.ade-fbar .filter-input { width:100%; }
  .sf-col-mfr, .sf-col-rev { display:none; }
  .sf-active-strip { padding:6px 12px 0; }
  .sf-drawer-body { padding:12px 14px; }
}
@media (max-width: 600px) {
  .sf-col-loc { display:none; }
  #sfDash .stat-card { flex:1 1 calc(50% - 7px); }   /* R2-B 7: five tiles wrap as 2+2+1, never a ragged row */
}
.modal-overlay[tabindex]:focus { outline:none; }

/* ── Dark theme ── */
html[data-theme="dark"] .sf-soon-tag { color:#b5b5ba; }   /* W80b: an icon now — no pill background */
html[data-theme="dark"] .sf-vrow.sf-vcur { background:rgba(57,152,69,.16); }
html[data-theme="dark"] .sf-achip, html[data-theme="dark"] .sf-togglechip.active { background:rgba(57,152,69,.18); }
html[data-theme="dark"] .sf-soon-tile.sf-soon-live:hover { background:rgba(57,152,69,.16); }
html[data-theme="dark"] .sf-st-active, html[data-theme="dark"] .sf-chip-file { color:#6fcf7e; }
html[data-theme="dark"] .sf-chip-type, html[data-theme="dark"] .sf-chip-link { color:#7fb4ea; }
html[data-theme="dark"] .sf-chip-tier2 { color:#e0a94a; }
html[data-theme="dark"] .sf-chip-missing, html[data-theme="dark"] .sf-late { color:#f08a7e; }

/* ── W80b: selection, bulk edit, the importer, the import card ───────────── */
#sdsTable .sf-col-sel { width:28px; text-align:center; padding-right:0; }
#sdsTable .sf-col-sel input { accent-color:var(--green,#399845); cursor:pointer; margin:0; }
#sdsTable.sf-nosel .sf-col-sel { display:none; }          /* R1-B MED-5: no boxes without the edit permission */
#sdsTable td.sf-col-sel { cursor:pointer; }
.sf-selbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 16px 0; }
.sf-sel-n { font-size:12px; font-weight:700; color:var(--green,#399845); }
.sf-imp-line { font-size:12.5px; margin:6px 0; line-height:1.5; }
.sf-imp-stats { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--muted,#6b6b70); margin:6px 0 4px; }
.sf-imp-stats b { color:var(--text,#222); font-size:13px; }
.sf-imp-stats .sf-late b { color:#c0392b; }
.sf-imp-steps { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.sf-imp-steps span { font-size:11px; font-weight:700; padding:3px 10px; border-radius:14px;
  background:var(--gray-l,#f0f0f2); color:var(--muted,#6b6b70); }
.sf-imp-steps span.on { background:var(--green-l,#e7f4e9); color:var(--green,#399845); }
.sf-imp-steps span.done { color:var(--green,#399845); }
.sf-imp-warn { margin:8px 0; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.5;
  background:rgba(194,124,14,.10); color:#7a4f06; }
.sf-imp-warn div { display:flex; gap:6px; align-items:flex-start; }
.sf-imp-warn i { flex-shrink:0; margin-top:2px; }
.sf-imp-tw { max-height:300px; overflow:auto; border:1px solid var(--gray-l,#f0f0f2); border-radius:8px; }
.sf-imp-table { width:100%; border-collapse:collapse; font-size:12px; }
.sf-imp-table th { position:sticky; top:0; background:var(--surface,#fff); text-align:left; padding:6px 8px;
  font-size:10.5px; text-transform:uppercase; color:var(--muted,#6b6b70); border-bottom:1px solid var(--gray-m,#e2e2e5); }
.sf-imp-table td { padding:5px 8px; border-bottom:1px solid var(--gray-l,#f0f0f2); vertical-align:top; }
.sf-imp-table tr.sf-imp-skip td { opacity:.55; }
.sf-imp-samples { max-width:360px; word-break:break-word; color:var(--muted,#6b6b70); }
.sf-imp-auto { margin-top:4px; display:flex; flex-wrap:wrap; gap:4px; }
.sf-imp-target { min-width:190px; font-weight:400; }
.sf-imp-url { word-break:break-all; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:11px; color:var(--muted,#6b6b70); }
.sf-imp-details { margin-top:10px; font-size:12px; }
.sf-imp-details summary { cursor:pointer; font-weight:700; color:var(--muted,#6b6b70); }
@media (max-width: 860px) {
  .sf-imp-samples { max-width:200px; }
  .sf-imp-target { min-width:150px; }
  .sf-selbar { padding:6px 12px 0; }
}
.sf-imp-sheet { display:inline-flex; align-items:center; gap:6px; font-size:12px; }
.sf-imp-sheet .filter-input { width:auto; min-width:140px; padding:3px 8px; }
html[data-theme="dark"] .sf-imp-warn { background:rgba(224,169,74,.16); color:#e6d9ad; }
html[data-theme="dark"] .sf-imp-stats .sf-late b { color:#f08a7e; }   /* R1-B LOW-9 */
html[data-theme="dark"] .sf-imp-steps span.on { background:rgba(57,152,69,.18); }

/* ── W81: the hazard-communication fields, the review cycle, find online, auto-fill ── */
/* GHS pictograms — original simplified drawings of the UN symbols as inline SVG data URIs (fork F17: no external hosts). */
.sf-ghs { display:inline-block; width:34px; height:34px; background-size:contain; background-repeat:no-repeat; background-position:center; vertical-align:middle; }
.sf-ghs-sm { width:18px; height:18px; margin-right:1px; }
.sf-ghs01 { background-image:url("/static/img/ghs/ghs01.png?v=w102"); }
.sf-ghs02 { background-image:url("/static/img/ghs/ghs02.png?v=w102"); }
.sf-ghs03 { background-image:url("/static/img/ghs/ghs03.png?v=w102"); }
.sf-ghs04 { background-image:url("/static/img/ghs/ghs04.png?v=w102"); }
.sf-ghs05 { background-image:url("/static/img/ghs/ghs05.png?v=w102"); }
.sf-ghs06 { background-image:url("/static/img/ghs/ghs06.png?v=w102"); }
.sf-ghs07 { background-image:url("/static/img/ghs/ghs07.png?v=w102"); }
.sf-ghs08 { background-image:url("/static/img/ghs/ghs08.png?v=w102"); }
.sf-ghs09 { background-image:url("/static/img/ghs/ghs09.png?v=w102"); }
.sf-haz { margin-top:6px; }
.sf-haz-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.sf-haz-pre { white-space:pre-wrap; line-height:1.5; }
.sf-haz-ppe { display:flex; flex-wrap:wrap; gap:4px; }
.sf-chip-ppe     { background:rgba(24,101,176,.10); color:#1865b0; }
.sf-chip-danger  { background:#c0392b; color:#fff; font-weight:800; letter-spacing:.4px; }
.sf-chip-warning { background:#e0a106; color:#222; font-weight:800; letter-spacing:.4px; }
.sf-chip-pending { background:rgba(224,161,6,.18); color:#8a6100; }
.sf-kpi-amber .stat-val { color:#b07a00; }
.sf-ghs-pick, .sf-ppe-pick { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.sf-ghs-opt, .sf-ppe-opt { display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 6px; border:1px solid var(--gray-m,#e2e2e5); border-radius:8px;
  font-size:11.5px; font-weight:600; color:var(--text,#222); cursor:pointer; background:var(--surface,#fff); user-select:none; }
.sf-ghs-opt input, .sf-ppe-opt input { position:absolute; opacity:0; width:0; height:0; }
.sf-ghs-opt.on, .sf-ppe-opt.on { border-color:var(--green,#399845); background:var(--green-l,#e7f4e9); }
.sf-ghs-opt .sf-ghs { width:26px; height:26px; }
.sf-ghs-txt { max-width:110px; line-height:1.15; }
.sf-vrow.sf-vpend { border-color:#e0a106; background:rgba(224,161,6,.07); }
.sf-vbtns { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.sf-fill-tw { max-height:52vh; overflow:auto; border:1px solid var(--gray-l,#f0f0f2); border-radius:8px; }
.sf-fill-table { width:100%; border-collapse:collapse; font-size:12px; }
.sf-fill-table th { position:sticky; top:0; background:var(--surface,#fff); text-align:left; padding:6px 8px; border-bottom:1px solid var(--gray-m,#e2e2e5); font-size:11px; }
.sf-fill-table td { padding:6px 8px; border-bottom:1px solid var(--gray-l,#f0f0f2); vertical-align:top; word-break:break-word; }
.sf-find-list { display:flex; flex-direction:column; gap:4px; }
.sf-find-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border:1px solid var(--gray-l,#f0f0f2); border-radius:7px; }
.sf-run-card { margin:8px 16px 0; padding:10px 12px; border:1px solid var(--gray-m,#e2e2e5); border-radius:10px; background:var(--surface,#fff); }
.sf-tab-badge { display:inline-block; min-width:16px; padding:0 5px; margin-left:4px; border-radius:9px; background:#e0a106; color:#222; font-size:10.5px; font-weight:800; line-height:16px; text-align:center; }
#sfTabs { flex-wrap:wrap; }                                                     /* R1-B 16: three tabs wrap on a phone */
#sfRvTable .sf-col-sel { width:28px; text-align:center; padding-right:0; }      /* R1-B 1: the queue's selection column, scoped like #sdsTable's */
#sfRvTable .sf-col-sel input { accent-color:var(--green,#399845); cursor:pointer; margin:0; }
#sfRvTable.sf-nosel .sf-col-sel { display:none; }
#sfRvTable td.sf-col-sel { cursor:pointer; }
.sf-ghs-opt:focus-within, .sf-ppe-opt:focus-within { outline:2px solid var(--blue,#1865b0); outline-offset:1px; }   /* R1-B 17: keyboard focus stays visible */
@media (max-width: 860px) {
  #sfRvFilters.ade-fbar .filter-group { width:100%; }                          /* R1-B 2: the queue's filters stack like the library's */
  #sfRvFilters.ade-fbar .filter-input { width:100%; }
}
@media (max-width: 700px) {
  .sf-find-row, .sf-vrow { flex-wrap:wrap; }
  .sf-vbtns { width:100%; justify-content:flex-start; }
  .sf-ghs-txt { max-width:80px; }
}
html[data-theme="dark"] .sf-ghs-opt, html[data-theme="dark"] .sf-ppe-opt { background:transparent; }
html[data-theme="dark"] .sf-ghs-opt.on, html[data-theme="dark"] .sf-ppe-opt.on { background:rgba(57,152,69,.16); }
html[data-theme="dark"] .sf-vrow.sf-vpend { background:rgba(224,161,6,.12); }
html[data-theme="dark"] .sf-run-card, html[data-theme="dark"] .sf-find-row { border-color:#3a3a40; }
html[data-theme="dark"] .sf-chip-pending { color:#f0c060; }                    /* R1-B 15: the three new chip colours on a dark surface */
html[data-theme="dark"] .sf-chip-ppe { color:#7fb4ea; }
html[data-theme="dark"] .sf-kpi-amber .stat-val { color:#e0b040; }

/* ═══ W82 — labels, email, the scheduled check, drafts, Dismiss (2026-09-16) ═══ */
.sf-chip-draft { background:rgba(74,120,200,.16); color:#2c5aa0; }
.sf-vrow.sf-vdraft { background:rgba(74,120,200,.07); }
.sf-lbl-preview { border:1px dashed var(--gray-m,#e2e2e5); border-radius:10px; padding:12px; background:var(--gray-l,#f6f6f8); overflow:auto; max-height:52vh; }
.sf-lbl-pvwrap { display:flex; justify-content:center; }
/* the in-app preview mirrors the print document's rules (the print window carries its own copy) */
.sf-lbl-preview .sfl { box-sizing:border-box; border:1.5px solid #111; border-radius:4px; padding:12px; background:#fff; color:#111; font-family:Arial,Helvetica,sans-serif; overflow:hidden; display:flex; flex-direction:column; }
/* R2-B LOW-2: the three stock sizes are a FIXED height in the preview so it clips exactly where the paper will */
.sf-lbl-preview .sfl-4x6 { width:288px; height:432px; } .sf-lbl-preview .sfl-3x5 { width:240px; height:400px; }
.sf-lbl-preview .sfl-2x3 { width:192px; height:288px; } .sf-lbl-preview .sfl-letter { width:340px; min-height:150px; }
.sf-lbl-preview .sfl-f-sm { font-size:11px; } .sf-lbl-preview .sfl-f-md { font-size:13px; } .sf-lbl-preview .sfl-f-lg { font-size:15px; }
.sf-lbl-preview .sfl-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; border-bottom:1.5px solid #111; padding-bottom:4px; margin-bottom:6px; }
.sf-lbl-preview .sfl-name { font-weight:800; font-size:1.35em; line-height:1.1; } .sf-lbl-preview .sfl-sub { font-weight:400; font-size:.8em; color:#444; }
.sf-lbl-preview .sfl-signal { font-weight:900; letter-spacing:.5px; padding:2px 8px; border:2px solid #111; white-space:nowrap; }
.sf-lbl-preview .sfl-signal-danger { background:#c0392b; color:#fff; border-color:#c0392b; } .sf-lbl-preview .sfl-signal-warning { background:#f0b400; color:#111; border-color:#b07a00; }
.sf-lbl-preview .sfl-ghs { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; } .sf-lbl-preview .sfl-ghs .sf-ghs { width:40px; height:40px; }
.sf-lbl-preview .sfl-row { display:flex; gap:6px; font-size:.95em; line-height:1.3; } .sf-lbl-preview .sfl-k { color:#555; min-width:5.5em; } .sf-lbl-preview .sfl-v { font-weight:600; }
.sf-lbl-preview .sfl-pre { white-space:pre-wrap; font-size:.9em; line-height:1.25; margin:4px 0; max-height:120px; min-height:0; overflow:hidden; } .sf-lbl-preview .sfl-small { font-size:.8em; color:#333; }
.sf-lbl-preview .sfl-ppe { display:flex; flex-wrap:wrap; gap:3px; margin:4px 0; } .sf-lbl-preview .sfl-chip { border:1px solid #555; border-radius:10px; padding:1px 7px; font-size:.8em; }
.sf-lbl-preview .sfl-foot { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.75em; color:#444; margin-top:auto; padding-top:4px; flex-shrink:0; }
.sf-lbl-preview .sfl-inactive { font-weight:800; color:#a32d2d; border:1px solid #a32d2d; padding:0 4px; }   /* R2-B LOW-3: the preview shows the flag the paper shows */
.sf-lbl-preview .sfl-barcode { font-family:monospace; letter-spacing:2px; border:1px dashed #888; padding:0 4px; }
#sfCheckCard .sf-imp-stats { margin-top:6px; }
.sf-view-cap { margin:6px 16px 0; padding:8px 10px; border:1px solid rgba(74,120,200,.35); border-radius:8px; background:rgba(74,120,200,.08); color:var(--text,#222); }
html[data-theme="dark"] .sf-view-cap { background:rgba(74,120,200,.16); }
#sdsMgSettings input[type=number] { max-width:140px; }
#sdsMgSettings .sf-lbl-row { font-weight:400; color:var(--text,#222); font-size:12.5px; }
@media (max-width: 600px) {
  .sf-lbl-preview { padding:6px; max-height:40vh; }
  .sf-lbl-preview .sfl-4x6, .sf-lbl-preview .sfl-3x5, .sf-lbl-preview .sfl-2x3 { width:100%; height:auto; min-height:0; } .sf-lbl-preview .sfl-letter { width:100%; }
}
html[data-theme="dark"] .sf-chip-draft { color:#8fb3ef; }
html[data-theme="dark"] .sf-vrow.sf-vdraft { background:rgba(74,120,200,.14); }
html[data-theme="dark"] .sf-lbl-preview { background:#232327; border-color:#3a3a40; }

/* ═══ W83 — inventory, barcodes, vendors, the scanner (2026-09-17) ═══ */
.sf-bc { display:inline-block; vertical-align:middle; max-width:100%; }
.sf-code-box { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:12px; border:1px solid var(--gray-l,#e5e5ea); border-radius:8px; background:#fff; }
.sf-code-box .sf-bc-128 { height:64px; width:auto; max-width:min(100%, 380px); }
.sf-inv-line b { font-weight:700; color:var(--text,#222); }
.sf-lrow.sf-low { border-color:#d98a00; background:rgba(240,180,0,.10); }
.sf-chip-low { background:#f7d774; color:#5a3d00; }
.sf-inv-photo { flex:0 0 auto; }
.sf-inv-photo img { width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--gray-l,#e5e5ea); display:block; }
.sf-inv-now { margin:0 0 10px; padding:8px 10px; border-radius:8px; background:var(--gray-l,#f2f2f5); font-size:13px; }
.sf-inv-qty { display:flex; gap:8px; align-items:center; }
.sf-inv-qty .filter-input { flex:1; min-width:0; }
.sf-inv-qty select.filter-input { flex:0 0 120px; }
.sf-inv-unit { font-weight:700; white-space:nowrap; padding:0 4px; }
.sf-inv-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.sf-inv-table th, .sf-inv-table td { padding:6px 8px; border-bottom:1px solid var(--gray-l,#f0f0f2); text-align:left; vertical-align:top; }
.sf-inv-table th { font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; color:var(--muted,#666); }
.sf-lrow .sf-vbtns { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }
.sf-tag { text-align:center; }
/* the scanner (the block10 mx-scan shapes, re-stated so block11 never depends on block10's stylesheet) */
.sf-scan-body { position:relative; min-height:200px; background:#111; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin:0 16px; }
.sf-scan-body video { width:100%; max-height:52vh; display:block; object-fit:cover; }
.sf-scan-frame { position:absolute; inset:14% 12%; border:2px solid rgba(255,255,255,.85); border-radius:10px; box-shadow:0 0 0 2000px rgba(0,0,0,.25); pointer-events:none; }
.sf-scan-wait { color:#eee; padding:28px 16px; text-align:center; font-size:13px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.sf-scan-status { min-height:20px; padding:8px 16px 0; font-size:12.5px; color:var(--muted,#666); }
.sf-scan-picks { display:flex; flex-direction:column; gap:6px; padding:6px 16px 0; }
.sf-scan-opt { border:1px solid var(--gray-l,#e5e5ea); border-radius:8px; padding:8px 10px; cursor:pointer; }
.sf-scan-opt:hover, .sf-scan-opt:focus { border-color:var(--blue,#4a78c8); outline:none; }
.sf-scan-t { font-weight:700; font-size:13px; } .sf-scan-s { font-size:12px; color:var(--muted,#666); }
.sf-scan-mode { display:flex; align-items:center; gap:8px; padding:10px 16px 0; font-size:12.5px; color:var(--muted,#666); }
.sf-scan-mode .filter-input { flex:1; min-width:0; }
.sf-scan-manual { display:flex; gap:8px; padding:12px 16px 16px; }
.sf-scan-manual .filter-input { flex:1; min-width:0; }
.sf-lbl-preview .sfl-barcode { border:0; padding:0; letter-spacing:0; }
.sf-lbl-preview .sfl-barcode svg, .sfl-barcode svg { max-width:100%; height:auto; }
.sf-lbl-preview .sfl-bc-row { display:flex; align-items:center; gap:6px; }
@media (max-width: 860px) {
  .sf-lrow { flex-wrap:wrap; }
  .sf-lrow .sf-vbtns { width:100%; justify-content:flex-start; }
  .sf-code-box { gap:10px; }
  .sf-inv-table { font-size:12px; } .sf-inv-table th, .sf-inv-table td { padding:5px 6px; }
}
html[data-theme="dark"] .sf-code-box { background:#fff; border-color:#3a3a40; }
html[data-theme="dark"] .sf-lrow.sf-low { background:rgba(240,180,0,.16); }
html[data-theme="dark"] .sf-chip-low { background:#7a5a00; color:#ffe9a8; }
html[data-theme="dark"] .sf-inv-now { background:#26262b; }
html[data-theme="dark"] .sf-inv-photo img { border-color:#3a3a40; }

/* ── W84b (2026-09-18): the Reports tab + the chemical's Related documents ── */
.sf-rep-wrap { display:grid; grid-template-columns:280px 1fr; gap:14px; padding:14px; flex:1; min-height:0; overflow:auto; }
.sf-rep-list { display:flex; flex-direction:column; gap:8px; align-content:start; }
.sf-rep-card { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--gray-m,#e2e2e5); border-radius:10px;
               background:var(--surface,#fff); cursor:pointer; }
.sf-rep-card:hover, .sf-rep-card:focus { border-color:var(--blue,#4a78c8); outline:none; }
.sf-rep-card:focus-visible { outline:2px solid var(--blue,#4a78c8); outline-offset:2px; }   /* R1 B-LOW-4 */
.sf-rep-card.active { border-color:var(--blue,#4a78c8); box-shadow:0 0 0 2px rgba(74,120,200,.18); }
.sf-rep-card i { font-size:20px; color:var(--blue,#4a78c8); flex-shrink:0; margin-top:1px; }
.sf-rep-card b { display:block; font-size:13px; }
.sf-rep-card span { display:block; font-size:11.5px; color:var(--muted,#6b6b70); line-height:1.35; margin-top:2px; }
.sf-rep-pane { min-width:0; display:flex; flex-direction:column; }
.sf-rep-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:6px; }
.sf-rep-filters { margin:4px 0 6px; }
.sf-rep-notes { margin:6px 0; padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.5;
                background:rgba(74,120,200,.08); border:1px solid rgba(74,120,200,.25); color:var(--text,#222); }
.sf-rep-notes div { display:flex; gap:6px; align-items:flex-start; }
.sf-rep-notes i { flex-shrink:0; margin-top:2px; color:var(--blue,#4a78c8); }
.sf-rep-tw { max-height:60vh; overflow:auto; border:1px solid var(--gray-l,#f0f0f2); border-radius:8px; }
.sf-rep-table th { position:sticky; top:0; background:var(--surface,#fff); z-index:1; white-space:nowrap; }
.sf-rep-table td { white-space:nowrap; max-width:320px; overflow:hidden; text-overflow:ellipsis; }
.sf-docs { display:flex; flex-direction:column; gap:6px; }
.sf-doc-row { display:flex; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--gray-l,#e5e5ea); border-radius:8px; }
.sf-doc-row > i { font-size:18px; color:var(--muted,#6b6b70); flex-shrink:0; }
.sf-chips { display:flex; flex-wrap:wrap; gap:6px; min-height:24px; }
.sf-chip-doc { background:rgba(74,120,200,.12); color:var(--blue,#2f5aa8); display:inline-flex; align-items:center; gap:4px; }
.sf-chip-doc .ti-x { cursor:pointer; margin-left:2px; }
.sf-chip-doc .ti-x:hover, .sf-chip-doc .ti-x:focus { color:#c0392b; outline:none; }
.sf-docs-results { display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:40vh; overflow:auto; }
@media (max-width: 860px) {
  .sf-rep-wrap { grid-template-columns:1fr; padding:10px; }
  .sf-rep-list { flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; }
  .sf-rep-card { min-width:200px; }
  .sf-rep-card span { display:none; }
}
html[data-theme="dark"] .sf-rep-card { background:#26262b; border-color:#3a3a40; }
html[data-theme="dark"] .sf-rep-notes { background:rgba(74,120,200,.14); }
html[data-theme="dark"] .sf-rep-table th { background:#26262b; }
html[data-theme="dark"] .sf-doc-row { border-color:#3a3a40; }

/* ═══════════════════════════════════════════════════════════════════════════
   [W85a] SDS fine tuning (2026-09-21) — Frank's items 1–5.
   The nine .sf-ghsNN rules above now carry the HD UNECE artwork (item 1); the
   rules below are the four layout items. Nothing here gates anything: every
   change is presentation.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── item 1 / item 4: the list's pictograms read at size ───────────────────
   18 px was as large as the fixed name cell allowed. The column is draggable
   now, so the cell can afford 22 px — which is where the HD art starts to be
   worth having. */
.sf-ghs-sm { width:22px; height:22px; margin-right:2px; vertical-align:-5px; }
#sdsTable .sf-name { line-height:1.45; }

/* ── item 3: the chemical card's action rows ───────────────────────────────
   One wrapping row became eight buttons with Deactivate orphaned below it.
   Two rows with intent instead: the sheet and the edit actions on top, the
   tools beneath, the destructive action set apart at the end. Every button
   keeps the permission gate and the onclick it already had. */
.sf-actions-2 { display:flex; flex-direction:column; gap:8px; }
.sf-acts-primary, .sf-acts-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sf-acts-tools { padding-top:8px; border-top:1px solid var(--gray-m,#e2e2e5); }
.sf-acts-tools.sf-acts-solo { padding-top:0; border-top:0; }   /* R1 A-LOW-7: no rule above an empty row */
.sf-acts-danger { margin-left:auto; padding-left:12px; border-left:1px solid var(--gray-m,#e2e2e5); }
.sf-acts-more { position:relative; display:none; margin-left:auto; }
.sf-acts-more-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:4100; min-width:210px; padding:6px;
  background:var(--white,#fff); border:1px solid var(--gray-m,#e2e2e5); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.16); display:none; }
.sf-acts-more.on .sf-acts-more-menu { display:block; }
.sf-acts-more-menu .btn, .sf-acts-more-menu a.btn { display:flex; width:100%; justify-content:flex-start; border:0; background:transparent; margin:0; }
.sf-acts-more-sep { height:1px; background:var(--gray-m,#e2e2e5); margin:6px 2px; }
@media (max-width:640px) {
  /* the tools fold into More ▾ — the SAME buttons, rendered once in each place
     and shown by the breakpoint, so no state can drift between them */
  .sf-acts-tools > .btn, .sf-acts-tools > a.btn, .sf-acts-danger { display:none; }
  .sf-acts-tools { border-top:0; padding-top:0; }
  .sf-acts-more { display:inline-block; }
  .sf-acts-primary .btn, .sf-acts-primary a.btn { flex:1 1 auto; justify-content:center; }
}
html[data-theme="dark"] .sf-acts-more-menu { background:#26262b; border-color:#3a3a40; }
html[data-theme="dark"] .sf-acts-tools { border-top-color:#3a3a40; }
html[data-theme="dark"] .sf-acts-danger { border-left-color:#3a3a40; }
html[data-theme="dark"] .sf-acts-more-sep { background:#3a3a40; }

/* ── item 4: resizable columns on the SDS Management list ──────────────────
   The fixed layout is applied ONLY at ≥ 861 px: below it the breakpoints
   already display:none three columns, and a fixed layout would still reserve
   their width. Below 861 px the table is exactly what it is today. */
#sdsTable.sf-cols-fixed { table-layout:fixed; }
/* R1 A-LOW-4: the clip belongs on the CELLS only — on a `th` it cut 3 of the
   grip's 7 px exactly once a person started resizing. And `text-overflow`
   never fires on a wrapping cell, so an unbreakable value was cut with no
   ellipsis at all: every cell wraps instead. */
#sdsTable.sf-cols-fixed td { overflow:hidden; text-overflow:ellipsis; }
#sdsTable.sf-cols-fixed th { overflow:visible; }
#sdsTable.sf-cols-fixed td, #sdsTable.sf-cols-fixed td .sf-name, #sdsTable.sf-cols-fixed td .sf-sub { white-space:normal; overflow-wrap:anywhere; }
#sdsTable th { position:relative; }
#sdsTable th .sf-colgrip { position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:2; border:0; padding:0; background:transparent; }
#sdsTable th .sf-colgrip:hover, #sdsTable th .sf-colgrip:focus { background:var(--blue,#1865b0); opacity:.4; outline:none; }
#sdsTable th .sf-colgrip:focus-visible { opacity:.75; }
body.sf-colresizing, body.sf-colresizing * { cursor:col-resize !important; user-select:none; }
@media (max-width:860px) { #sdsTable th .sf-colgrip { display:none; } }

/* ── item 2: the "Reviewed by" people picker ───────────────────────────────
   A plain input that also offers this instance's people. Anything typed
   stands — the write-in is the point. */
.sf-people { position:relative; display:block; }
.sf-people-list { position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:4200; max-height:220px; overflow:auto; display:none;
  background:var(--white,#fff); border:1px solid var(--gray-m,#e2e2e5); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.16); }
.sf-people.on .sf-people-list { display:block; }
.sf-people-opt { display:block; width:100%; text-align:left; padding:6px 10px; border:0; background:transparent; cursor:pointer; font:inherit; font-size:13px; }
.sf-people-opt:hover, .sf-people-opt.on { background:var(--blue-l,#e8f0fa); }
.sf-people-em { color:var(--gray-d,#666); font-size:.85em; }
.sf-people.sf-people-up .sf-people-list { top:auto; bottom:calc(100% + 2px); }   /* R1 A-LOW-6 */
.sf-people-more { padding:6px 10px; font-size:.82em; color:var(--gray-d,#666); border-top:1px solid var(--gray-m,#e2e2e5); }   /* R1 A-LOW-2 */
html[data-theme="dark"] .sf-people-list { background:#26262b; border-color:#3a3a40; }
html[data-theme="dark"] .sf-people-more { color:#9a9aa2; border-top-color:#3a3a40; }
html[data-theme="dark"] .sf-people-opt:hover, html[data-theme="dark"] .sf-people-opt.on { background:rgba(74,120,200,.2); }

/* ── item 5: the label's per-size layout plan ──────────────────────────────
   A field the size cannot carry is greyed and says so, instead of being
   rendered into a canvas that clips it. The pictograms shrink with the stock
   rather than pushing the rest off the bottom. */
.sf-ppe-opt.sf-lbl-off { opacity:.42; }
.sf-ppe-opt.sf-lbl-off input { cursor:not-allowed; }
.sf-lbl-nosize { font-size:.82em; color:var(--gray-d,#666); font-style:italic; }
/* R1 A-HIGH-1: a long name with no break opportunity used to overflow the
   head and push the DANGER badge off the stock. */
.sf-lbl-preview .sfl-name, .sf-lbl-preview .sfl-sub { overflow-wrap:anywhere; }
/* R1 A-LOW-1: the budget is the mechanism now — the preview must not clip on
   top of it, or the "…" understates the loss. */
/* W85a R2 A2-HIGH-1: the preview's cut is the PAPER's cut. R1 set this to
   `none`, which made the preview show ten lines where the stock printed six —
   the preview lying is worse than the preview clipping, because the operator
   stops checking. These four are `preLines * 1.25em` and the gate cross-pins
   them against `_sfLabelPreEm()`, exactly as it does the pictogram sizes. */
.sf-lbl-preview .sfl-2x3 .sfl-pre { max-height:none; }
.sf-lbl-preview .sfl-3x5 .sfl-pre { max-height:none; }
.sf-lbl-preview .sfl-4x6 .sfl-pre { max-height:10em; }
.sf-lbl-preview .sfl-letter .sfl-pre { max-height:7.5em; }
/* R1 B-MED-2: the preview's pictogram geometry is a SECOND copy of the print's
   and the two disagreed — 40 px on screen where the paper gets 44 px (4 x 6)
   and 32 px (Letter). The gate now pins them together. */
.sf-lbl-preview .sfl-4x6 .sfl-ghs .sf-ghs { width:44px; height:44px; }
.sf-lbl-preview .sfl-letter .sfl-ghs .sf-ghs { width:32px; height:32px; }
.sf-lbl-preview .sfl-2x3 .sfl-ghs .sf-ghs { width:27px; height:27px; }
.sf-lbl-preview .sfl-2x3 .sfl-ghs { gap:2px; }
.sf-lbl-preview .sfl-3x5 .sfl-ghs .sf-ghs { width:34px; height:34px; }
/* the PPE chips scale with the stock, so a 2 x 3 carries them without pushing
   anything off the label (Frank, 2026-09-21) */
.sf-lbl-preview .sfl-2x3 .sfl-chip { padding:0 5px; font-size:.7em; }
.sf-lbl-preview .sfl-2x3 .sfl-ppe { gap:2px; margin:3px 0; }
.sf-lbl-preview .sfl-3x5 .sfl-chip { padding:1px 6px; font-size:.75em; }
html[data-theme="dark"] .sf-lbl-nosize { color:#9a9aa2; }


/* ══════════════════════════════════════════════════════════════════════════
   [W85b] the SDS "Status" tab + the Safety Dashboard's single SDS card
   (2026-09-22). Both reuse `.sf-card` / `.sf-dash-cols`, which already stack
   at 900px — so Status is responsive by inheritance rather than by a second
   set of breakpoints that would drift from the first.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the KPI strips ─────────────────────────────────────────────────────
   Deliberately NOT `.stats-bar`. That class is a page-level strip under a
   module header, and `block02-base.css` collapses it to `max-height:0;
   opacity:0` at ≤860px, to be re-opened by the "Stats" button that
   `setupMobileHeaderControls()` injects. Safety never gets that button — the
   function runs once at app setup and the Safety Dashboard's strip does not
   exist until `sfDashLoad()` renders it — which is why W80a had to add its
   dashboard-scoped max-height/opacity override forty lines up (NOT quoted
   here: a carried pin greps this file for that rule, and a comment that
   quotes it lets the rule vanish without the pin noticing — W85b R5), and a
   second override at ≤600px to stop the tiles wrapping ragged.
   Copying that pair to `#sfStatus` would be two more selectors to keep in step
   with a rule that lives in another file. These two containers keep the house
   `.stat-card` look and are simply grids: nothing collapses them, so there is
   nothing to override. */
.sf-kpi-strip { display:grid; grid-template-columns:repeat(4, 1fr); gap:7px; padding:9px 18px 0; }
@media (max-width: 900px) { .sf-kpi-strip { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 420px) { .sf-kpi-strip { grid-template-columns:1fr; } }
.sf-kpi-strip .stat-card, .sf-dash-kpis .stat-card { flex:none; min-width:0; }
.sf-kpi-strip .stat-lbl, .sf-dash-kpis .stat-lbl { white-space:normal; }

/* ── the review-cycle row (Status) ─────────────────────────────────────── */
.sf-rc-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:4px; }
@media (max-width: 520px) { .sf-rc-row { grid-template-columns:1fr; } }
.sf-rc-cell { border:1px solid var(--gray-m,#e2e2e5); border-radius:8px; padding:10px 12px;
  cursor:pointer; min-width:0; }
.sf-rc-cell:hover, .sf-rc-cell:focus-visible { background:var(--gray-l,#f4f4f5); }
.sf-rc-cell:focus-visible { outline:2px solid var(--blue,#1865b0); outline-offset:1px; }
.sf-rc-n { font-size:22px; font-weight:800; line-height:1.1; }
.sf-rc-lbl { font-size:11.5px; color:var(--muted,#6b6b70); margin-top:2px; }
.sf-rc-cell.sf-rc-bad .sf-rc-n { color:#c0392b; }
.sf-rc-foot { margin-left:0; margin-top:8px; display:block; }
html[data-theme="dark"] .sf-rc-cell:hover, html[data-theme="dark"] .sf-rc-cell:focus-visible { background:rgba(255,255,255,.05); }
html[data-theme="dark"] .sf-rc-cell.sf-rc-bad .sf-rc-n { color:#f08a7e; }

/* ── the Safety Dashboard's single SDS card ────────────────────────────── */
/* R2 A2-LOW-5: `.stats-bar` used to supply the dashboard's top padding and its
   separator (`padding:9px 15px` + a bottom border, block02-base.css). With the
   strip gone, `#sfDash` has none of its own and `.sf-dash-cols` is
   `padding:0 18px 18px`, so the card sat flush against the tab strip. */
#sfDash .sf-dash-cols { padding-top:14px; }

.sf-dash-search { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sf-dash-search-wrap { position:relative; flex:1; min-width:200px; display:block; }
.sf-dash-search-wrap i { position:absolute; left:9px; top:50%; transform:translateY(-50%);
  font-size:15px; color:var(--muted,#6b6b70); pointer-events:none; }
.sf-dash-search-wrap .filter-input { width:100%; padding-left:29px; }
.sf-dash-hits { margin-top:8px; }
.sf-dash-hint { font-size:12px; color:var(--muted,#6b6b70); padding:8px 2px; }
.sf-dash-hint.sf-late { color:#c0392b; }
html[data-theme="dark"] .sf-dash-hint.sf-late { color:#f08a7e; }
.sf-dash-hit { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:7px 4px; border-bottom:1px solid var(--gray-m,#e2e2e5); }
.sf-dash-hit:last-child { border-bottom:0; }
.sf-dash-hit-name { flex:1; min-width:180px; cursor:pointer; border-radius:6px; padding:2px 4px; }
.sf-dash-hit-name:hover, .sf-dash-hit-name:focus-visible { background:var(--gray-l,#f4f4f5); }
.sf-dash-hit-name:focus-visible { outline:2px solid var(--blue,#1865b0); outline-offset:1px; }
.sf-dash-hit-name .sf-sub { display:block; }
.sf-dash-hit-acts { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
html[data-theme="dark"] .sf-dash-hit-name:hover, html[data-theme="dark"] .sf-dash-hit-name:focus-visible { background:rgba(255,255,255,.05); }
/* the four numbers sit INSIDE the card — no page padding, no page-level
   strip behaviour (see the note on `.sf-kpi-strip` above) */
.sf-dash-kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:7px; margin-top:10px; }
@media (max-width: 640px) { .sf-dash-kpis { grid-template-columns:repeat(2, 1fr); } }