/* Ported from https://fidesq.com/tools/patient-list-checklist/ by scripts/port-live-page.mjs on 2026-10-10.
   Every selector is scoped under .tool-scope so it cannot leak into the site header/footer.
   Fonts are mapped to the site fonts (var(--f-disp), var(--f-sans)). Fix style clashes here, not in site.css. */
.tool-scope{
    --brand:#4F46E5;      /* main colour: band, ticks, borders */
    --brand-ink:#FFFFFF;  /* text on the band */
    --accent:#0F766E;     /* badge, button, focus ring */
    --accent-ink:#FFFFFF;
    --tint:#EEF2FF;       /* very light brand tint for the bridge card */
    --ink:#0F172A; --muted:#55555F; --line:#E4E2DD; --paper:#FFFFFF;
    --head:"Playfair Display", Georgia, "Times New Roman", serif;
    --body:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  }
.tool-scope *{box-sizing:border-box}
.tool-scope{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--body)}
.tool-scope .sheet{max-width:720px;margin:0 auto;background:#fff;min-height:100vh}
@media (min-width:760px){
  .tool-scope .sheet{margin:32px auto;min-height:0;border-radius:18px;
    box-shadow:0 10px 40px rgba(0,0,0,.08);overflow:hidden}
}
.tool-scope .band{background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;
    gap:14px;padding:16px 22px}
.tool-scope .avatar{position:relative;width:52px;height:52px;border-radius:50%;flex:none;
    background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
    font:700 18px var(--head);overflow:hidden;border:2px solid var(--brand-ink)}
.tool-scope .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tool-scope .who{line-height:1.25}
.tool-scope .who strong{display:block;font:700 17px var(--head)}
.tool-scope .who em{font-style:normal;opacity:.92;font-size:14px}
.tool-scope .label{margin-left:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    border:1px solid currentColor;border-radius:99px;padding:4px 10px;white-space:nowrap}
@media (max-width:420px){
  .tool-scope .label{display:none}
}
.tool-scope main{padding:26px 22px 8px;counter-reset:step}
.tool-scope .eyebrow{color:var(--brand);font-weight:600;font-size:13px;letter-spacing:.08em;
    text-transform:uppercase;margin:0 0 6px}
.tool-scope h1{font:700 clamp(26px,7vw,38px)/1.15 var(--head);margin:0 0 10px;letter-spacing:-.01em}
.tool-scope .sub{color:var(--muted);font-size:17px;margin:0 0 16px}
.tool-scope .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.tool-scope .chips li{background:var(--tint);color:var(--ink);border-radius:99px;padding:5px 12px;
    font-size:14px;font-weight:600}
.tool-scope .progress{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:14px;color:var(--muted)}
.tool-scope .bar{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.tool-scope .bar span{display:block;height:100%;width:0;background:var(--brand);transition:width .3s}
.tool-scope h2{font:700 15px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
    margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.tool-scope h2::after{content:"";flex:1;height:1px;background:var(--line)}
.tool-scope ol.items{list-style:none;margin:0;padding:0}
.tool-scope .item{display:flex;gap:14px;align-items:center;border:1px solid var(--line);
    border-radius:14px;padding:14px 16px;margin:0 0 10px;counter-increment:step;background:#fff}
.tool-scope .item input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:0;
    border:2px solid var(--brand);border-radius:7px;background:#fff;cursor:pointer}
.tool-scope .item input:checked{background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.tool-scope .item input:focus-visible,.tool-scope .btn:focus-visible,.tool-scope .print:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tool-scope .item label{flex:1;cursor:pointer;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.tool-scope .do{display:block;font-weight:600;font-size:17px;line-height:1.4}
.tool-scope .do::before{content:counter(step) ".";color:var(--brand);margin-right:7px;
    font-variant-numeric:tabular-nums}
.tool-scope .why,.tool-scope .how{display:block;color:var(--muted);font-size:15px;margin-top:3px}
.tool-scope .time{flex:none;font-size:13px;color:var(--muted);white-space:nowrap}
.tool-scope .item:has(input:checked) .do{text-decoration:line-through;text-decoration-color:var(--brand);color:var(--muted)}
.tool-scope .skip{border:2px solid var(--accent);background:var(--tint)}
.tool-scope .badge{display:inline-block;background:var(--accent);color:var(--accent-ink);font-size:12px;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;
    padding:3px 8px;margin:0 0 6px;align-self:flex-start}
.tool-scope .compact .item{padding:10px 14px;margin-bottom:8px}
.tool-scope .compact .do{font-size:16px}
.tool-scope .bridge{background:var(--tint);border-radius:16px;padding:20px 22px;margin:22px 0 8px}
.tool-scope .bridge h2{margin-top:0}
.tool-scope .bridge h2::after{display:none}
.tool-scope .bridge p{margin:0 0 14px}
.tool-scope .btn{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;
    font-weight:700;border-radius:12px;padding:13px 20px;min-height:44px}
.tool-scope .url{display:block;font-size:14px;color:var(--muted);margin-top:10px;word-break:break-all}
.tool-scope footer{padding:18px 22px 26px;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;
    gap:10px;align-items:center;justify-content:space-between}
.tool-scope .print{font:600 14px var(--body);background:none;border:2px solid var(--brand);color:var(--ink);
    border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .tool-scope *{transition:none!important}
}
@page{size:A4;margin:12mm 14mm}
@media print{
  .tool-scope{background:#fff;font-size:10.5pt}
  .tool-scope .sheet{max-width:none;margin:0;box-shadow:none;border-radius:0;min-height:0}
  .tool-scope .band,.tool-scope .badge,.tool-scope .btn,.tool-scope .chips li,.tool-scope .skip,.tool-scope .bridge{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tool-scope .band{border-radius:8px;padding:8px 12px}
  .tool-scope main{padding:12px 0 0}
  .tool-scope footer{display:block;padding:10px 0 0;margin-top:10px;border-top:1px solid var(--line);
      font-size:8pt;break-inside:avoid;page-break-inside:avoid}
  .tool-scope h1{font-size:21pt;margin-bottom:6px}
  .tool-scope .sub{font-size:11pt;margin-bottom:8px}
  .tool-scope .chips{margin-bottom:6px}
  .tool-scope .chips li{padding:3px 10px;font-size:9.5pt}
  .tool-scope .eyebrow{font-size:9pt}
  .tool-scope .progress,.tool-scope .print,.tool-scope .no-print{display:none!important}
  .tool-scope .item{padding:6px 12px;margin-bottom:4px;border-radius:9px;break-inside:avoid;page-break-inside:avoid}
  .tool-scope .item label{min-height:0}
  .tool-scope .do{font-size:10.8pt}
  .tool-scope .why,.tool-scope .how{font-size:9.3pt}
  .tool-scope .item input{width:16px;height:16px;border-width:1.5px}
  .tool-scope .item input:checked{background:#fff}
  .tool-scope .item:has(input:checked) .do{text-decoration:none;color:var(--ink)}
  .tool-scope h2{break-after:avoid;page-break-after:avoid;margin:10px 0 5px}
  .tool-scope .bridge{break-inside:avoid;page-break-inside:avoid;padding:10px 14px;margin-top:10px}
  .tool-scope .btn{padding:0;min-height:0;background:none;color:var(--ink);text-decoration:underline}
  .tool-scope .url{margin-top:2px}
  .tool-scope p,.tool-scope li{orphans:3;widows:3}
}
@media print { .site-nav, .site-footer, .tool-bar { display: none !important; } }
@media print { body, .tool-scope { background: #fff !important; } }