/* ============================================================================
   F47  ADAM'S OH&S DOCUMENT PACK, AND THE WHS REGISTER
   Tokens only, from app.css, so both themes work without a second set of
   colours. The pills carry the state (good, warn, crit); this file only lays
   the Safety section out and makes the tables stack on a phone.
   ============================================================================ */

/* ------------------------------------------------------------ the section */
.f47{margin-top:26px}
.f47-kpis{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:6px}
.f47-h{margin:22px 0 4px;font-size:14px;font-weight:700;color:var(--ink)}
.f47-lede{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-2);max-width:78ch}
.f47 td small{display:block;margin-top:3px;font-size:11px;line-height:1.4;color:var(--ink-3)}
.f47 .f47-t{font-weight:600;color:var(--ink)}
.f47 .f47-blank{color:var(--warn);font-size:12px}
.f47-files{gap:6px;flex-wrap:nowrap}
.f47-add{margin-top:8px}
/* Installs with no installer on them, and the demo or test logins left out. */
.f47-bare{margin:10px 0 4px}
.f47-bare .note{margin-bottom:6px}
.f47-out{margin-top:6px}

/* ---------------------------------------------------- Your paperwork note */
.f47-wait{margin:2px 0 10px;font-size:12px;color:var(--ink-3)}
.f47-wait .lnk{font-size:12px}

/* --------------------------------------------------------------- drawers */
.f47-now{display:flex;flex-wrap:wrap;gap:8px 18px;margin:6px 0 12px}
.f47-now-i{display:flex;align-items:center;gap:8px;font-size:12px}
.f47-now-k{color:var(--ink-3);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.f47-recs li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.f47-recs li > span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.f47-recs small{color:var(--ink-3);font-size:11.5px;line-height:1.4}
.f47-recs .btnrow{flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:none}
.f47-blanks li{padding:3px 0 3px 12px;position:relative;font-size:12.5px}
.f47-blanks li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:2px;background:var(--warn)}
.f47-addrec{flex-wrap:wrap;gap:6px}
.f47-frm h4{margin:6px 0 0}
.f47-contact .f47-now{margin-bottom:8px}
/* The second ask before checking a PDF that still has blanks. */
.f47-confirm{margin:10px 0 4px}
.f47-confirm .note{margin-bottom:8px}

@media(max-width:700px){
  .f47-kpis{grid-template-columns:1fr}
  .f47-lede{font-size:13px}
  .f47-files{flex-wrap:wrap}
  .f47 td .pill{white-space:normal;max-width:100%}
  .f47 .btn,.f47-recs .btn,.f47-addrec .btn,.f47-confirm .btn{min-height:40px}
  .f47-recs li{flex-direction:column}
  .f47-recs .btnrow{justify-content:flex-start}
}