:root{
    --ink:#14213D;
    --ink-soft:#2A3B5C;
    --paper:#F3F4F1;
    --card:#FFFFFF;
    --slate:#5C6470;
    --slate-light:#9098A3;
    --line:#DCDFDA;
    --amber:#E2A33D;
    --red:#D6473F;
    --maroon:#7A1F2B;
    --green:#3F8F6F;
    --mod-usability:#4C5FD5;
    --mod-a11y:#2F9E8F;
    --mod-graphic:#8B5FBF;
    --mod-sustain:#78873C;
    --mod-uxwriting:#C15B7A;
    --radius:10px;
    --shadow:0 1px 2px rgba(20,33,61,0.06), 0 8px 24px rgba(20,33,61,0.05);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    font-size:15px;
    line-height:1.5;
    min-height:100vh;
  }
  h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;margin:0;letter-spacing:-0.01em;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  button{font-family:inherit;cursor:pointer;}
  a{color:inherit;}
  ::selection{background:var(--ink);color:var(--paper);}

  /* ---------- gate (login) ---------- */
  .gate{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .gate-card{
    width:100%;
    max-width:440px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:40px 36px;
    box-shadow:var(--shadow);
  }
  .gate-mark{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:28px;
  }
  .gate-mark .logo{width:72px;height:72px;border-radius:50%;flex-shrink:0;}
  .gate-mark .brand-name{font-size:24px;}
  .gate h1{font-size:24px;margin-bottom:6px;}
  .gate p.sub{color:var(--slate);margin:0 0 26px;font-size:14px;}
  .role-tabs{display:flex;gap:8px;margin-bottom:22px;background:var(--paper);padding:4px;border-radius:9px;}
  .role-tabs button{
    flex:1;border:none;background:transparent;padding:9px 0;border-radius:7px;
    font-size:13.5px;font-weight:600;color:var(--slate);transition:.15s;
  }
  .role-tabs button.active{background:var(--ink);color:#fff;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;}
  .field input, .field select, .field textarea{
    width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
    font-size:14.5px;font-family:inherit;background:#fff;color:var(--ink);
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink-soft);outline-offset:1px;}
  .password-wrap{position:relative;}
  .password-wrap input{padding-right:44px;}
  .pw-toggle{
    position:absolute;top:50%;right:6px;transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center;width:32px;height:32px;
    border:none;background:transparent;border-radius:6px;color:var(--slate);cursor:pointer;
  }
  .pw-toggle:hover{color:var(--ink);}
  .pw-toggle:focus-visible{outline:2px solid var(--ink-soft);outline-offset:1px;}
  .pin-form .field{margin-bottom:26px;}
  .pin-form .row-flex{margin-bottom:26px;}
  .suggestion-panel{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#FAFAF8;}
  .suggestion-separator{text-align:center;color:var(--slate-light);letter-spacing:.3em;font-size:12px;margin:-2px 0 10px;}
  .suggestion-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
  .suggestion-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;margin-bottom:6px;font-size:13.5px;}
  .suggestion-item.add{background:#E6F2EC;border:1px solid var(--green);}
  .suggestion-item.remove{background:#FBEAE9;border:1px solid var(--red);}
  .suggestion-item-text{flex:1;}
  .suggestion-actions{display:flex;gap:8px;margin-top:4px;}
  .btn{
    display:inline-flex;align-items:center;gap:6px;justify-content:center;
    padding:10px 18px;border-radius:8px;border:1px solid transparent;
    font-size:14px;font-weight:600;transition:.15s;
  }
  .btn-primary{background:var(--ink);color:#fff;}
  .btn-primary:hover{background:var(--ink-soft);}
  .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--slate);}
  .btn-danger{background:transparent;border-color:var(--red);color:var(--red);}
  .btn-sm{padding:6px 12px;font-size:12.5px;}
  .hint{font-size:12.5px;color:var(--slate-light);margin-top:14px;text-align:center;}
  .error-msg{background:#FBEAE9;color:var(--red);border:1px solid #F2C9C6;padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:14px;}
  .google-signin{display:flex;justify-content:center;min-height:44px;}
  .google-signin + .btn{margin-top:16px;}

  /* ---------- app shell ---------- */
  .shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh;}
  /* Stays on screen while the page scrolls: logo on top, person block at the bottom,
     only the nav in between scrolls when it's too long (e.g. a report's page list). */
  .sidebar{
    background:var(--ink);color:#EDEFF5;padding:22px 16px;
    display:flex;flex-direction:column;
    position:sticky;top:0;align-self:start;height:100vh;
  }
  .sb-mark{display:flex;align-items:center;gap:9px;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,0.12);margin-bottom:18px;flex-shrink:0;}
  .sb-mark .logo{width:64px;height:64px;border-radius:50%;flex-shrink:0;}
  .sb-mark .brand-name{font-size:18px;}
  .sb-mark .brand-by{color:#6ce09a;opacity:1;}
  /* Logo text block, shared by the sign-in card and the sidebar (see brandMark in app.js). */
  .brand-text{display:flex;flex-direction:column;gap:2px;line-height:1.15;}
  .brand-name{font-weight:700;}
  .brand-by{font-size:11px;font-weight:500;opacity:.65;letter-spacing:.02em;}
  .sb-nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;}
  .sb-nav button{
    text-align:left;background:transparent;border:none;color:#C4CADB;
    padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;
  }
  .sb-nav button:hover{background:rgba(255,255,255,0.06);color:#fff;}
  .sb-nav button.active{background:rgba(255,255,255,0.12);color:#fff;}
  .sb-foot{border-top:1px solid rgba(255,255,255,0.12);padding-top:14px;margin-top:14px;flex-shrink:0;}
  .sb-foot .who-row{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:0 4px;}
  .sb-foot .avatar{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;object-fit:cover;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.16);color:#fff;font-weight:700;font-size:14px;
  }
  .sb-foot .who{font-size:13px;color:#B7BEd1;flex:1;min-width:0;}
  .sb-foot .who b{color:#fff;display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sb-foot button{width:100%;background:transparent;border:1px solid rgba(255,255,255,0.18);color:#EDEFF5;padding:8px;border-radius:8px;font-size:13px;}
  .sb-foot button:hover{background:rgba(255,255,255,0.08);}

  .lang-switch{
    width:auto;border:1px solid var(--line);background:transparent;color:var(--slate);
    font-size:11px;font-weight:700;padding:4px 6px;border-radius:6px;letter-spacing:.03em;cursor:pointer;
  }
  .sb-foot .lang-switch{flex-shrink:0;border-color:rgba(255,255,255,0.18);color:#EDEFF5;}
  .sb-foot .lang-switch:hover{background:rgba(255,255,255,0.08);}
  .sb-foot .lang-switch option{color:var(--ink);}

  .main{padding:34px 40px;max-width:1800px;}
  .topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:10px;}
  .topline h1{font-size:25px;}
  .topline .desc{color:var(--slate);font-size:13.5px;margin-top:4px;}
  /* Report header (reportView): back-icon+title on the left, the global theme filter
     in the middle, previous-flow nav on the right — all in one sticky row. */
  .report-topline{align-items:center;}
  .report-topline-left{display:flex;align-items:center;gap:14px;}
  .report-topline .report-global-filter-bar{margin-bottom:0;}
  .btn-icon{padding:9px;}
  /* Only the screen-level header (the topline that's a direct child of .main) sticks —
     nested toplines used as sub-headers inside panels/pages keep their normal position. */
  .main > .topline{
    position:sticky;top:0;z-index:20;background:var(--paper);
    padding:14px 0;margin:-14px 0 26px;border-bottom:1px solid var(--line);
  }
  /* Report view (client): the header and the flow bar below it are grouped into one
     sticky block so both stay on screen together while scrolling through a flow. The
     border/spacing that .main > .topline normally carries moves to whichever row is
     last (the flow bar when present, the header otherwise). */
  .main > .report-sticky-head{position:sticky;top:0;z-index:20;background:var(--paper);margin:-14px 0 26px;}
  .main > .report-sticky-head > .report-topline{padding:14px 0 7px;}
  .main > .report-sticky-head > *:last-child{border-bottom:1px solid var(--line);padding-bottom:14px;}
  .report-flowbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:5px;}
  .report-flowbar-name{font-size:20px;font-weight:700;text-align:center;flex:1;}

  .grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:8px;}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
  .stat .num{font-family:'Space Grotesk';font-size:28px;font-weight:600;}
  .stat .lbl{font-size:12.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}

  table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
  th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);padding:12px 16px;border-bottom:1px solid var(--line);background:#FAFAF8;}
  td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-bottom:20px;}
  .panel h2{font-size:16px;margin-bottom:16px;}
  .upsell-card{border:2px dashed var(--line);background:transparent;box-shadow:none;}
  .upsell-card h3{font-size:14px;margin-bottom:8px;}
  .row-flex{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
  .row-flex .field{flex:1;min-width:160px;margin-bottom:0;}
  .check-inline{display:flex;align-items:center;gap:6px;font-size:13px;padding-bottom:10px;white-space:nowrap;}
  .danger-panel{border:1px solid var(--red);}
  .danger-panel h2{color:var(--red);}
  .badge{
    display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
    padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;
  }
  .badge-draft{background:#EFEFEA;color:var(--slate);}
  .badge-published{background:#E6F2EC;color:var(--green);}
  .badge-unpublished{background:#FFF6E5;color:#9A6512;}
  .badge-archived{background:transparent;color:var(--slate);border:1px solid var(--line);}
  .badge-word-pos{background:#E6F2EC;color:var(--green);}
  .badge-word-neg{background:#FBEAE9;color:var(--red);}
  .badge-word-neutral{background:#EFEFEA;color:var(--slate);}
  .badge-pass{background:#E6F2EC;color:var(--green);}
  .badge-fail{background:#FBEAE9;color:var(--red);}
  .dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
  .sev-positive{background:var(--green);}
  .sev-critical{background:var(--red);}
  .sev-major{background:var(--amber);}
  .sev-minor{background:var(--slate-light);}
  .sev-catastrophic{background:var(--maroon);}
  .sev-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;}
  .catastrophic-warning{font-size:11.5px;font-weight:600;color:var(--maroon);text-transform:uppercase;letter-spacing:.03em;}
  .freq-rare{background:var(--slate-light);}
  .freq-occasional{background:var(--slate);}
  .freq-frequent{background:var(--ink-soft);}
  .freq-systematic{background:var(--ink);}
  .freq-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--slate);}
  .criteria-tag{font-size:12.5px;color:var(--slate);}

  /* case-file audit card */
  .case-card{
    background:var(--card);border:1px solid var(--line);border-radius:12px;
    display:flex;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow);
  }
  .case-strip{width:8px;flex-shrink:0;}
  .case-body{padding:18px 22px;flex:1;}
  .case-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;}
  .case-id{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--slate);letter-spacing:.03em;margin-bottom:6px;}
  .case-title{font-size:16.5px;font-weight:600;margin:0 0 2px;font-family:'Space Grotesk';}
  .case-meta{font-size:13px;color:var(--slate);}
  .mod-chips{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
  .mod-chip{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;color:#fff;}
  .case-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:flex-end;}
  .case-publish-btn{margin-left:auto;}
  /* Status buttons (archive, delete, unpublish…) grouped on the right with the publish button. */
  .case-status-actions{display:flex;gap:8px;align-items:center;margin-left:auto;}
  .case-status-actions .case-publish-btn{margin-left:0;}
  /* Client side: unpublished audit, greyed and not clickable. */
  .case-card-revision{opacity:.6;box-shadow:none;cursor:default;}
  /* Expert dashboard: archived audits, folded at the bottom. */
  .archived-section{margin-top:28px;}
  .archived-toggle{background:transparent;border:none;padding:6px 0;font-size:13.5px;font-weight:600;color:var(--slate);margin-bottom:12px;}
  .archived-toggle:hover{color:var(--ink);}
  .archived-section .case-card{opacity:.75;}
  /* Theme chips, and for clients the "Open the report" button on the right, bottom-aligned. */
  .case-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;}
  .case-open-btn{width:auto;min-width:220px;max-width:25vw;flex-shrink:0;}

  .empty{padding:40px 20px;text-align:center;color:var(--slate);}
  .empty .big{font-size:32px;margin-bottom:8px;}

  .module-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:6px;}
  .mod-option{
    border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;
    display:flex;gap:10px;align-items:flex-start;
  }
  .mod-option.checked{border-color:var(--ink);background:#F7F7FF;}
  .mod-option .sw{width:10px;height:10px;border-radius:3px;margin-top:4px;flex-shrink:0;}
  .mod-option .t{font-weight:600;font-size:14px;}
  .mod-option .d{font-size:12.5px;color:var(--slate);margin-top:2px;}

  .tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;}
  .tabbar button{
    background:transparent;border:none;padding:11px 16px;font-size:13.5px;font-weight:600;
    color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-1px;
  }
  .tabbar button.active{color:var(--ink);border-bottom-color:var(--ink);}

  .finding-row{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
  .finding-select{margin-top:4px;flex-shrink:0;width:auto;}
  .finding-item:last-child .finding-row{border-bottom:none;}
  .finding-row .fnum{font-family:'IBM Plex Mono';font-size:12px;color:var(--slate-light);width:26px;flex-shrink:0;padding-top:2px;display:flex;flex-direction:column;align-items:center;gap:6px;}
  .finding-row .fside{width:32px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;}
  .finding-row .fside .finding-select{margin-top:2px;}
  .finding-row .fside-num{font-family:'IBM Plex Mono';font-size:12px;color:var(--slate-light);}
  .finding-row .fside .drag-handle{padding:4px;}
  .finding-row .fside .btn-sm{width:24px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
  .finding-row .fstatus{margin-left:auto;}
  .drag-handle{cursor:grab;color:var(--slate-light);display:flex;padding:2px;border-radius:4px;}
  .drag-handle:hover{color:var(--slate);background:var(--line);}
  .finding-row.dragging{opacity:0.4;}
  .finding-row.drag-over{box-shadow:inset 0 2px 0 var(--ink-soft);}
  .finding-row .fbody{flex:1;}
  .finding-row .fmeta{font-size:12px;color:var(--slate);margin-top:4px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;}
  .finding-row .fdel{background:transparent;border:none;color:var(--slate-light);font-size:12px;}
  .finding-row .fdel:hover{color:var(--red);}
  .finding-row.clickable{cursor:pointer;}
  .finding-row.clickable:hover{background:var(--paper);}
  .finding-item.expanded .finding-row{background:var(--paper);border-bottom-color:transparent;}
  .finding-row-hidden{opacity:0.7;}
  .hidden-badge{
    display:inline-flex;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.03em;padding:2px 8px;border-radius:20px;background:#EFEFEA;color:var(--slate);
  }
  .estimation-tag{
    display:inline-flex;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.03em;padding:2px 8px;border-radius:20px;background:#E6F2EC;color:var(--green);
  }
  .finding-inline{padding:2px 0 16px;border-bottom:1px solid var(--line);}
  .finding-item:last-child .finding-inline{border-bottom:none;}
  .finding-inline .panel{margin-bottom:0;box-shadow:none;background:var(--paper);}

  .drag-handle.disabled{cursor:not-allowed;opacity:0.35;}
  .drag-handle.disabled:hover{background:transparent;color:var(--slate-light);}

  .issue-sort-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
  .sort-btn{
    background:transparent;border:1px solid var(--line);border-radius:20px;
    padding:5px 12px;font-size:12px;font-weight:600;color:var(--slate);
  }
  .sort-btn:hover{border-color:var(--slate);color:var(--ink);}
  .sort-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);}
  .sort-priority{
    display:inline-flex;align-items:center;justify-content:center;
    width:15px;height:15px;border-radius:50%;margin-right:5px;
    font-size:10px;font-weight:700;background:rgba(255,255,255,0.35);
  }
  .sort-btn:not(.active) .sort-priority{background:var(--line);color:var(--slate);}

  .bulk-actions-bar{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    background:var(--paper);border:1px solid var(--line);border-radius:10px;
    padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--slate);
  }

  .confirm-overlay{
    position:fixed;inset:0;background:rgba(20,33,61,0.45);
    display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;
  }
  .confirm-modal{
    background:var(--card);border-radius:14px;max-width:440px;width:100%;
    padding:24px;box-shadow:var(--shadow);
  }
  .confirm-modal h2{font-size:17px;margin-bottom:10px;}
  .confirm-modal p{color:var(--slate);font-size:13.5px;line-height:1.5;}
  .confirm-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}

  /* Unsaved issue found after a reload (expert dashboard) — see pinDraftBanner. */
  .draft-banner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    background:#FFF6E5;border:1px solid var(--amber);border-radius:10px;
    padding:12px 16px;margin-bottom:20px;font-size:13.5px;
  }
  .draft-banner-where{color:var(--slate);}

  .publish-contact-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin:14px 0;}
  .publish-contact-row{
    display:flex;align-items:center;gap:10px;padding:10px 12px;
    border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:13.5px;
  }
  .publish-contact-row:hover{border-color:var(--slate);}
  .publish-contact-row input{flex-shrink:0;}

  /* "Manage access" window: client contacts + Liip co-experts, shared by expert and client */
  .access-modal{max-width:540px;max-height:calc(100vh - 48px);overflow-y:auto;}
  .access-section-title{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-light);margin:20px 0 4px;}
  .access-meta{display:block;font-size:12px;color:var(--slate-light);}
  .publish-contact-row.is-static{cursor:default;}
  .publish-contact-row.is-static:hover{border-color:var(--line);}
  .publish-contact-row .row-end{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .access-inline-form{display:flex;gap:8px;align-items:flex-end;}
  .access-inline-form .field{flex:1;margin:0;}
  /* pending invite link, attached under its contact's row */
  .access-link{display:flex;align-items:center;gap:10px;margin-top:-8px;padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;font-size:12px;color:var(--slate);}
  .access-link .mono{flex:1;min-width:0;word-break:break-all;}
  .access-link .btn{flex-shrink:0;}
  .publish-contact-row.has-link{border-radius:8px 8px 0 0;}
  .access-edit-row{flex-direction:column;align-items:stretch;gap:8px;}
  .access-edit-row .access-meta{margin:0;}
  .access-edit-actions{display:flex;justify-content:flex-end;gap:8px;}

  .report-module{margin-bottom:26px;}
  .report-module h3{font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:12px;}
  .report-module .sw{width:11px;height:11px;border-radius:3px;}
  .report-finding{padding:14px 16px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:8px;margin-bottom:8px;}
  .report-page{scroll-margin-top:20px;}
  .report-finding .top{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--slate);margin-bottom:5px;}

  .heur-info-btn{
    background:transparent;border:none;color:var(--ink-soft);font-size:12px;font-weight:600;
    text-decoration:underline;text-transform:none;letter-spacing:0;padding:0;
  }
  .heur-info-btn:hover{color:var(--ink);}

  .insert-code-btn{display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0;}
  .insert-code-btn svg{width:14px;height:14px;}
  .field-hint{text-align:left;margin-top:6px;}
  .solution-text{white-space:pre-wrap;}
  .code-block{position:relative;margin:8px 0;background:#1E2420;border-radius:10px;}
  .code-block pre{margin:0;padding:14px 48px 14px 16px;overflow-x:auto;color:#E8ECE6;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
  .code-block code{font:inherit;color:inherit;background:none;}
  .code-copy-btn{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:6px;background:rgba(255,255,255,.08);color:#C9D0C6;cursor:pointer;}
  .code-copy-btn:hover,.code-copy-btn:focus-visible{background:rgba(255,255,255,.18);color:#fff;}
  .code-copy-btn.copied{color:#8FD694;}

  .heur-overlay{
    position:fixed;inset:0;background:rgba(20,33,61,0.45);
    display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;
  }
  .heur-modal{
    background:var(--paper);border-radius:16px;max-width:1100px;width:100%;
    max-height:88vh;overflow-y:auto;padding:28px;box-shadow:var(--shadow);
  }
  .heur-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;}
  .heur-modal-head h2{font-size:20px;}
  .heur-modal-head p{color:var(--slate);font-size:13.5px;margin-top:4px;}
  .heur-close{background:transparent;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:13px;color:var(--slate);flex-shrink:0;}
  .heur-close:hover{border-color:var(--slate);color:var(--ink);}
  .heur-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
  /* ~10 cm of text on a laptop screen (~70 characters per line): Brief and How it works. */
  .reading-col{max-width:560px;}
  .reading-col .heur-cards{grid-template-columns:1fr;}
  .brief-meta{gap:48px;}
  .heur-card{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;}
  .heur-card h3{font-size:16px;}
  .heur-card .tagline{font-size:13.5px;color:var(--slate);font-style:italic;margin:6px 0 4px;}
  .pc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin:14px 0 6px;}
  .pc-label-lg{font-size:14px;color:var(--ink);font-weight:700;}
  .heur-card ul{margin:0;padding:0;list-style:none;font-size:13px;}
  .heur-card ul li{padding-left:16px;position:relative;margin-bottom:5px;line-height:1.4;}
  .heur-card ul.pros li::before{content:'+';position:absolute;left:0;color:var(--green);font-weight:700;}
  .heur-card ul.cons li::before{content:'–';position:absolute;left:0;color:var(--red);font-weight:700;}
  .heur-card .elements{max-height:230px;overflow-y:auto;border-top:1px solid var(--line);padding-top:10px;margin-top:2px;}
  .heur-card .elements .grp{font-size:12.5px;font-weight:700;text-transform:uppercase;color:var(--ink-soft);margin:10px 0 4px;}
  .heur-card .elements .grp:first-child{margin-top:0;}
  .heur-card .elements ol{margin:0 0 0 18px;padding:0;font-size:12.5px;color:var(--ink-soft);}
  .heur-card .elements ol li{margin-bottom:4px;}

  .crop-overlay{
    position:fixed;inset:0;background:rgba(20,33,61,0.45);
    display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;
  }
  .crop-modal{
    background:var(--paper);border-radius:16px;max-width:90vw;
    padding:28px;box-shadow:var(--shadow);
  }
  .crop-scroll{overflow:auto;max-height:65vh;border:1px solid var(--line);border-radius:8px;}
  .crop-stage{position:relative;display:inline-block;}
  .crop-stage img{display:block;}
  .crop-rect{position:absolute;border:2px solid var(--ink-soft);background:rgba(255,255,255,0.15);cursor:move;}
  .crop-handle{position:absolute;width:12px;height:12px;background:var(--ink-soft);border-radius:50%;}
  .crop-handle.nw{left:-6px;top:-6px;cursor:nwse-resize;}
  .crop-handle.se{right:-6px;bottom:-6px;cursor:nwse-resize;}
  .crop-handle.ne{right:-6px;top:-6px;cursor:nesw-resize;}
  .crop-handle.sw{left:-6px;bottom:-6px;cursor:nesw-resize;}
  .pin-attachment-thumb{max-width:220px;border:1px solid var(--line);border-radius:8px;display:block;}
  .pin-attachment-img{max-width:100%;border:1px solid var(--line);border-radius:8px;margin-top:2px;display:block;}
  .pin-attachment-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px;}
  .pin-attachment-row .pin-attachment-img{flex:1;min-width:180px;margin-top:0;}

  /* ---------- accessibility contrast checker ---------- */
  .contrast-tool{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-top:2px;}
  .contrast-tool .btn:disabled{opacity:0.5;cursor:not-allowed;}
  .contrast-tool .hint{text-align:left;margin-top:8px;}
  .contrast-swatch-row{display:flex;align-items:center;gap:10px;margin:8px 0;}
  .contrast-swatch-label{font-size:12.5px;color:var(--slate);}
  .color-swatch{width:22px;height:22px;border-radius:4px;display:inline-block;border:1px solid var(--line);flex-shrink:0;}
  .contrast-result{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
  .contrast-ratio-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .contrast-verdict-table{width:auto;margin-bottom:10px;}
  .contrast-verdict-table td{padding:6px 14px 6px 0;border:none;font-size:13px;}
  .contrast-message{font-size:13.5px;margin-bottom:6px;}

  .color-picker-overlay{
    position:fixed;inset:0;background:rgba(20,33,61,0.45);
    display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;
  }
  .color-picker-modal{
    background:var(--paper);border-radius:16px;max-width:90vw;
    padding:28px;box-shadow:var(--shadow);
  }
  .color-picker-stage{position:relative;display:inline-block;}
  .color-picker-stage img{display:block;cursor:crosshair;}
  .color-magnifier{
    position:absolute;border:2px solid var(--ink-soft);border-radius:50%;
    background:#fff;pointer-events:none;box-shadow:var(--shadow);z-index:5;overflow:hidden;
  }

  @media (max-width:900px){
    .heur-cards{grid-template-columns:1fr;}
    .issue-workspace{grid-template-columns:minmax(0,1fr);}
    .issue-workspace-shot{position:static;}
  }

  /* ---------- usability page capture + pins ---------- */
  .capture-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--slate-light);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
  .capture-divider::before,.capture-divider::after{content:'';flex:1;height:1px;background:var(--line);}
  .dropzone{
    display:flex;align-items:center;justify-content:center;text-align:center;
    border:2px dashed var(--line);border-radius:10px;padding:22px;cursor:pointer;
    color:var(--slate);font-size:13px;transition:.15s;
  }
  .dropzone:hover, .dropzone.dragging{border-color:var(--ink-soft);background:#F7F7FF;color:var(--ink);}
  .pages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
  .issue-workspace{display:grid;grid-template-columns:var(--issue-split,33%) 6px minmax(0,1fr);gap:14px;align-items:start;}
  .issue-workspace > *{min-width:0;}
  .issue-workspace-shot{position:sticky;top:calc(var(--sticky-head-h,0px) + 12px);}
  /* Keep the whole zoomed frame on screen under the sticky header (toolbar + panel padding ≈ 110px). */
  .issue-workspace-shot .shot-scroll{max-height:min(80vh, calc(100vh - var(--sticky-head-h,0px) - 110px));}
  .finding-item{scroll-margin-top:calc(var(--sticky-head-h,0px) + 12px);}
  .resize-handle{align-self:stretch;width:6px;cursor:col-resize;position:relative;}
  .resize-handle::after{
    content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
    background:var(--line);border-radius:2px;transition:background .15s;
  }
  .resize-handle:hover::after{background:var(--slate);}
  body.resizing-cols{cursor:col-resize;user-select:none;}
  body.resizing-cols .resize-handle::after{background:var(--ink-soft);}
  @media (max-width:900px){
    .resize-handle{display:none;}
  }
  .page-card{
    background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;
    transition:.15s;
  }
  .page-card:hover{border-color:var(--slate);}
  .page-card img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;background:var(--paper);}
  .page-card-selected{border-color:var(--ink-soft);box-shadow:0 0 0 2px var(--ink-soft);}
  .page-card-shot{position:relative;}
  .page-card-select{position:absolute;top:8px;left:8px;width:18px;height:18px;cursor:pointer;accent-color:var(--ink-soft);}
  .page-card-shot{cursor:pointer;}
  .page-card-count{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:2px 8px;border-radius:999px;
    background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;line-height:18px;pointer-events:none;white-space:nowrap;
  }
  .page-card-count--zero{background:rgba(255,255,255,.9);color:var(--slate);border:1px solid var(--line);}
  /* Captures tab: one group of thumbnails per flow, then the captures in no flow */
  .captures-section + .captures-section{margin-top:22px;}
  .captures-section-title{font-size:14px;margin:0 0 10px;}
  .captures-section-count{font-weight:400;color:var(--slate);}
  .missing-capture{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    min-height:180px;padding:20px;border:2px dashed var(--line);border-radius:10px;
    background:var(--paper);color:var(--slate);font-size:13px;font-weight:600;text-align:center;
  }
  .missing-capture-thumb{min-height:0;aspect-ratio:16/10;border-radius:0;border-width:0 0 1px;}
  .dropzone-filled{flex-direction:column;gap:8px;padding:12px;}
  .dropzone-preview{max-width:100%;max-height:180px;border-radius:6px;display:block;}
  .page-card-body{padding:10px 12px;}
  .page-card-url{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .page-card-meta{font-size:12px;color:var(--slate);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .page-card-editing{border-color:var(--ink-soft);box-shadow:0 0 0 2px var(--ink-soft);background:#F7F7FF;}
  .url-more-count{font-family:inherit;font-weight:600;color:var(--ink-soft);}
  /* Capture form: name + flow + image (2/3) | URL list (1/3), stacked on narrow screens */
  .capture-form-panel{scroll-margin-top:calc(var(--sticky-head-h,0px) + 12px);}
  .capture-form-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch;}
  .capture-form-main{min-width:0;display:flex;flex-direction:column;}
  .capture-form-main .dropzone{flex:1;}
  .capture-form-urls{display:flex;flex-direction:column;min-width:0;}
  .capture-form-urls textarea{flex:1;min-height:160px;resize:vertical;font-size:12.5px;line-height:1.5;white-space:pre;overflow-x:auto;}
  .capture-url-help{display:flex;justify-content:space-between;gap:10px;margin:6px 0 0;}
  @media (max-width:800px){
    .capture-form-grid{grid-template-columns:1fr;}
  }
  .page-url-line{overflow-wrap:anywhere;}
  .page-urls-toggle{font-family:inherit;font-size:12px;margin-top:2px;}

  /* "Flows & issues" tab: one full-width accordion per flow, one per capture inside it */
  /* Under the builder's sticky header, the "+ Capture / + Flow" bar and the header of the
     flow being scrolled through stay on screen too (fixed heights, used for the offsets). */
  .flow-tree{--tree-bar-h:52px;--tree-head-h:54px;}
  .btn-with-icon{display:inline-flex;align-items:center;gap:6px;}
  .flow-tree-actions{display:flex;align-items:center;gap:8px;height:var(--tree-bar-h);position:sticky;top:var(--sticky-head-h,0px);z-index:15;background:var(--paper);margin:-12px 0 6px;}
  .tree-flow{padding:6px 16px;margin-bottom:12px;}
  .tree-flow.dragging{opacity:0.4;}
  .tree-flow.drag-over{box-shadow:inset 0 0 0 2px var(--ink-soft);}
  .tree-flow-head{display:flex;align-items:center;gap:6px;height:var(--tree-head-h);position:sticky;top:calc(var(--sticky-head-h,0px) + var(--tree-bar-h));z-index:12;background:var(--card);margin:0 -16px;padding:0 16px;border-radius:12px 12px 0 0;}
  .tree-flow-head.drag-over{box-shadow:inset 0 2px 0 var(--ink-soft);}
  .tree-flow-title{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:none;padding:6px 4px;text-align:left;font:inherit;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:16px;color:var(--ink);cursor:pointer;border-radius:6px;}
  button.tree-flow-title:hover{background:var(--paper);}
  .tree-flow-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tree-chevron{width:14px;color:var(--slate);flex-shrink:0;}
  .tree-count{font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:500;color:var(--slate);background:var(--paper);border-radius:10px;padding:0 8px;flex-shrink:0;}
  .tree-flow-rename{flex:1;min-width:0;font:inherit;font-size:16px;font-weight:600;padding:5px 8px;border:1px solid var(--ink-soft);border-radius:6px;}
  .tree-tools{display:flex;align-items:center;gap:2px;flex-shrink:0;}
  .tree-icon-btn{background:none;border:none;color:var(--slate);font-size:14px;line-height:1;padding:6px 8px;border-radius:5px;cursor:pointer;}
  .tree-icon-btn:hover:not([disabled]){background:var(--line);color:var(--ink);}
  .tree-icon-btn[disabled]{opacity:0.3;cursor:default;}
  .tree-menu-wrap{position:relative;}
  .tree-menu{position:absolute;right:0;top:100%;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:4px;min-width:150px;display:flex;flex-direction:column;}
  .tree-menu button{background:none;border:none;text-align:left;font:inherit;font-size:13px;padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--ink);}
  .tree-menu button:hover,.tree-menu button:focus-visible{background:var(--paper);}
  .tree-menu .tree-menu-danger{color:var(--red);}
  .tree-pages{display:flex;flex-direction:column;border-top:1px solid var(--line);padding:4px 0 8px;}
  .tree-page-item{border-bottom:1px solid var(--line);}
  .tree-page-item.open{padding-bottom:16px;}
  .tree-page{display:flex;align-items:center;gap:8px;border-radius:8px;}
  .tree-page:hover{background:var(--paper);}
  .tree-page.open{background:var(--paper);}
  .tree-page.dragging{opacity:0.4;}
  .tree-page.drag-over{box-shadow:inset 0 2px 0 var(--ink-soft);}
  .tree-page-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:none;padding:8px 6px;text-align:left;font:inherit;cursor:pointer;color:var(--ink);}
  .tree-thumb{width:56px;height:36px;object-fit:cover;object-position:top;border-radius:4px;border:1px solid var(--line);flex-shrink:0;background:var(--card);}
  .tree-thumb-missing{background:repeating-linear-gradient(45deg,var(--paper),var(--paper) 4px,var(--line) 4px,var(--line) 5px);}
  .tree-page-text{min-width:0;display:flex;flex-direction:column;}
  .tree-page-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tree-page-renaming{cursor:default;}
  .tree-page-rename{width:100%;max-width:420px;font:inherit;font-size:14px;font-weight:500;padding:3px 6px;border:1px solid var(--ink-soft);border-radius:6px;}
  .tree-page-meta{font-size:12px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tree-page-url{font-size:11.5px;}
  .tree-missing{color:var(--red);font-weight:600;}
  .tree-assign-select{font-size:12px;padding:4px 6px;max-width:200px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--slate);}
  .tree-page-body{padding:16px 6px 0 30px;}
  .tree-page-item,.tree-page-body .finding-item{scroll-margin-top:calc(var(--sticky-head-h,0px) + var(--tree-bar-h) + var(--tree-head-h) + 12px);}
  .tree-page-body .issue-workspace-shot{top:calc(var(--sticky-head-h,0px) + var(--tree-bar-h) + var(--tree-head-h) + 12px);}
  .tree-page-body .issue-workspace-shot .shot-scroll{max-height:min(80vh, calc(100vh - var(--sticky-head-h,0px) - var(--tree-bar-h) - var(--tree-head-h) - 110px));}
  .tree-page-body .panel{margin-bottom:0;}
  .tree-add-here{font-size:13px;align-self:flex-start;margin:10px 6px 4px;text-decoration:none;}
  .tree-add-here:hover{text-decoration:underline;}
  .tree-pages > .panel{margin:12px 0 4px;}
  .tree-empty{font-size:13px;color:var(--slate);padding:8px 6px;}
  .tree-drag{padding:4px;flex-shrink:0;}
  .tree-drag-spacer{width:32px;flex-shrink:0;}

  .flow-stepper-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
  .flow-stepper-indicator{font-size:12.5px;color:var(--slate);}
  .flow-step-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;}
  .flow-step-tabs button{
    width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--card);
    font-size:12px;font-weight:600;color:var(--slate);padding:0;
  }
  .flow-step-tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink);}

  .report-layout{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:start;}
  /* top/max-height leave room for the sticky .topline (title + back button) above it,
     so the nav doesn't scroll underneath that header once both are stuck. */
  .report-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:96px;max-height:calc(100vh - 116px);overflow-y:auto;}
  .report-nav button{
    text-align:left;padding:9px 12px;border-radius:8px;border:1px solid transparent;
    background:transparent;color:var(--slate);font-size:13.5px;font-family:inherit;cursor:pointer;
  }
  .report-nav button:hover{background:var(--paper);color:var(--ink);}
  .report-nav button.active{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:600;}
  @media (max-width:900px){
    .report-layout{grid-template-columns:1fr;}
    .report-nav{position:static;flex-direction:row;overflow-x:auto;max-height:none;}
  }

  /* Page-level scrollspy links nested under the currently active flow/section — a
     smaller, indented button reusing the light (.report-nav) or dark (.sb-nav) theme
     of whichever container they're rendered into. */
  .report-nav-pages{display:flex;flex-direction:column;gap:1px;margin:0 0 6px 14px;}
  .report-nav-page{font-size:12.5px;padding:6px 10px;}

  .report-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
  .filter-chip{
    display:inline-flex;align-items:center;gap:6px;
    border:1.5px solid var(--chip-color); background:transparent; color:var(--chip-color);
    font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px;
  }
  .filter-chip.active{background:var(--chip-color); color:#fff;}
  .filter-chip-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:16px;height:16px;padding:0 4px;border-radius:20px;
    font-size:10px;font-weight:700;background:var(--chip-color);color:#fff;
  }
  .filter-chip.active .filter-chip-count{background:rgba(255,255,255,0.35);color:#fff;}
  /* Issue treatment status (internal): filter dropdown in the Issues list + one per issue row */
  .status-filter-select, .pin-status-select{
    font:inherit; font-size:12px; font-weight:600; color:var(--ink);
    border:1.5px solid var(--slate-light); background:var(--card);
    padding:4px 8px; border-radius:20px; cursor:pointer;
  }
  .status-filter-select.active{border-color:var(--ink); background:var(--ink); color:#fff;}
  .pin-status-select{font-size:11.5px; padding:3px 8px; border:none;}
  /* Same palette as the team's Google Sheets status chips */
  .pin-status-select.status-not_started{background:#E6E6E6; color:#3D3D3D;}
  .pin-status-select.status-in_progress{background:#FFE5A0; color:#473821;}
  .pin-status-select.status-under_review{background:#BFE1F6; color:#0A53A8;}
  .pin-status-select.status-approved{background:#D4EDBC; color:#11734B;}
  .pin-status-select.status-content_issue{background:#B10202; color:#FFFFFF;}
  .pin-status-select.status-to_discuss{background:#3D3D3D; color:#FFFFFF;}
  .filter-chip-unavailable{
    border-style:dashed; border-color:var(--line); color:var(--slate-light);
    background:transparent; cursor:pointer;
  }
  .filter-chip-unavailable:hover{color:var(--slate); border-color:var(--slate-light);}
  .filter-chip-soon{
    font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
    padding:1px 6px; border-radius:6px; background:var(--line); color:var(--slate);
  }
  .filter-chip-wrap{position:relative; display:inline-flex;}
  .filter-unavailable-tip{
    position:absolute; top:calc(100% + 10px); left:0; width:220px; z-index:5;
    background:var(--ink); color:#fff; padding:10px 14px; border-radius:9px;
    font-size:12.5px; line-height:1.5; white-space:pre-line; box-shadow:var(--shadow);
  }
  .filter-unavailable-tip::before{
    content:""; position:absolute; bottom:100%; left:14px;
    border:6px solid transparent; border-bottom-color:var(--ink);
  }
  .filter-unavailable-tip.align-right{left:auto; right:0;}
  .filter-unavailable-tip.align-right::before{left:auto; right:14px;}
  .filter-unavailable-tip.collapsed{display:none;}

  /* Admin Audits screen — "Experts" column (adminCoexpertsCell); bubble derived from .filter-unavailable-tip */
  /* The co-experts bubble must overflow the table, so corners are rounded on the header cells instead. */
  table.admin-audits-table{overflow:visible;}
  .admin-audits-table th:first-child{border-top-left-radius:12px;}
  .admin-audits-table th:last-child{border-top-right-radius:12px;}
  .coexperts-cell{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .coexperts-wrap{position:relative; display:inline-flex;}
  .coexperts-badge{border:0; cursor:pointer; font-family:inherit; background:#EFEFEA; color:var(--slate);}
  .coexperts-badge:hover, .coexperts-badge[aria-expanded="true"]{filter:brightness(.95); outline:1px solid var(--slate-light);}
  .coexperts-none{color:var(--slate-light); font-size:13px;}
  .coexpert-add-select{width:auto;}
  .coexperts-tip{
    position:absolute; top:calc(100% + 10px); right:0; min-width:220px; z-index:5;
    background:var(--ink); color:#fff; padding:10px 14px; border-radius:9px;
    font-size:13px; line-height:1.5; box-shadow:var(--shadow);
  }
  .coexperts-tip::before{
    content:""; position:absolute; bottom:100%; right:14px;
    border:6px solid transparent; border-bottom-color:var(--ink);
  }
  .coexperts-tip-title{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.7; margin-bottom:4px;}
  .coexperts-tip-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0; white-space:nowrap;}
  .coexperts-remove{background:transparent; border:0; color:#fff; opacity:.75; cursor:pointer; font-size:13px; padding:2px 6px; border-radius:6px;}
  .coexperts-remove:hover, .coexperts-remove:focus-visible{opacity:1; background:rgba(255,255,255,.15);}

  /* Multi-point pins — points list under the "multiple points" toggle (pinPointsFieldMarkup) */
  .pin-points-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  .pin-point-chip{
    display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--slate);
    border:1px solid var(--line);border-radius:20px;padding:3px 10px;background:var(--paper);
  }
  .pin-point-chip .fdel{background:transparent;border:none;color:var(--slate-light);font-size:12px;padding:0;}
  .pin-point-chip .fdel:hover{color:var(--red);}

  /* On/off switch (multi-point toggle in pinForm's header — see multiPointSwitchMarkup) */
  .switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13px;color:var(--slate);font-weight:500;}
  .switch input{position:absolute;opacity:0;width:0;height:0;}
  .switch-track{width:34px;height:20px;border-radius:20px;background:var(--line);position:relative;flex-shrink:0;transition:background .15s;}
  .switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow);transition:transform .15s;}
  .switch input:checked + .switch-track{background:var(--ink);}
  .switch input:checked + .switch-track .switch-thumb{transform:translateX(14px);}
  .switch input:focus-visible + .switch-track{outline:2px solid var(--ink-soft);outline-offset:2px;}

  /* Statistics tab — KPI row, per-module bars, top-criteria list (see statsSectionBlock) */
  .stat-kpis{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
  .stat-kpi{flex:1;min-width:120px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
  .stat-kpi-value{font-size:26px;font-weight:700;font-family:'Space Grotesk';line-height:1;}
  .stat-kpi-label{font-size:12px;color:var(--slate);margin-top:4px;}
  .stat-kpi-critical .stat-kpi-value{color:var(--red);}
  .stat-kpi-systematic .stat-kpi-value{color:var(--ink);}
  .stat-bars{margin-bottom:18px;}
  .stat-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  .stat-bar-label{font-size:13px;width:130px;flex-shrink:0;}
  .stat-bar-track{flex:1;height:8px;border-radius:4px;background:var(--paper);overflow:hidden;}
  .stat-bar-fill{height:100%;border-radius:4px;}
  .stat-bar-count{font-size:12.5px;font-weight:600;color:var(--slate);width:28px;text-align:right;flex-shrink:0;}
  .stat-criteria-list{margin:0;padding-left:20px;font-size:13.5px;}
  .stat-criteria-list li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);}
  .stat-criteria-list li:last-child{border-bottom:none;}
  .stat-criteria-count{font-weight:700;color:var(--slate);flex-shrink:0;}

  /* Executive Summary — read-only bullet lists (see execSummaryBlock) */
  .bullet-list{margin:0;padding-left:18px;}
  .bullet-list li{margin-bottom:8px;line-height:1.5;}
  .bullet-list li:last-child{margin-bottom:0;}

  .shot-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
  .zoom-controls{display:flex;align-items:center;gap:8px;}
  .zoom-controls .btn{padding:4px 11px;}
  .zoom-level{font-size:12.5px;color:var(--slate);min-width:42px;text-align:center;}
  .shot-scroll{overflow:auto;max-height:80vh;border:1px solid var(--line);border-radius:8px;background:var(--paper);}
  .shot-inner{position:relative;}
  .shot-img{display:block;width:100%;border:0;cursor:crosshair;}
  .pin-marker{
    position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
    background:var(--ink);color:#fff;border:2px solid #fff;font-size:12px;font-weight:700;
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);padding:0;
  }
  .pin-marker:hover{background:var(--ink-soft);}
  .pin-marker-hidden{opacity:0.55;border-style:dashed;}
  /* Issue currently open in the list: bigger, ringed in its module colour, on top; the
     other markers fade back so it's easy to spot. */
  .pin-marker{transition:transform .15s, opacity .15s;}
  .pin-marker-active{
    transform:translate(-50%,-50%) scale(1.35);z-index:2;
    box-shadow:0 0 0 3px var(--pin-color, var(--ink)), var(--shadow);
    animation:pin-pulse 0.7s ease-out 2;
  }
  .shot-inner:has(.pin-marker-active) .pin-marker:not(.pin-marker-active){opacity:0.45;}
  @keyframes pin-pulse{
    0%{box-shadow:0 0 0 3px var(--pin-color, var(--ink)), 0 0 0 3px var(--pin-color, var(--ink));}
    100%{box-shadow:0 0 0 3px var(--pin-color, var(--ink)), 0 0 0 16px transparent;}
  }
  @media (prefers-reduced-motion: reduce){ .pin-marker-active{animation:none;} }
  .pin-marker-preview{
    position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;
    border:2px dashed var(--ink);background:rgba(255,255,255,0.65);color:var(--ink);
    font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
    pointer-events:none;
  }

  .heuristic-checks{max-height:560px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:6px 12px;}
  .heur-tabs{
    display:flex;gap:4px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;
    background:var(--card);margin:0 -12px 4px;padding:0 12px;
  }
  /* How it works tabs in the client report: plain row aligned with the cards, not the
     sticky white strip of the pin form. */
  .heur-tabs.about-tabs{position:static;background:none;margin:0 0 16px;padding:0;}
  .heur-tab{
    background:transparent;border:none;padding:9px 10px;font-size:12.5px;font-weight:700;
    color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-1px;
  }
  .heur-tab.active{color:var(--ink);border-bottom-color:var(--ink);}
  .heur-tab-panel{padding-bottom:8px;}
  .heur-tab-panel.hidden{display:none;}
  .heuristic-checks .check-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;}
  .heuristic-checks .check-row input{width:auto;flex-shrink:0;margin:0;padding:0;border:none;border-radius:0;background:none;}
  .heuristic-checks .check-row label{flex:1;cursor:pointer;}
  .crit-info-btn{
    flex-shrink:0;width:16px;height:16px;border-radius:50%;border:1px solid var(--slate-light);
    background:transparent;color:var(--slate);font-size:10px;font-weight:700;line-height:1;
    display:flex;align-items:center;justify-content:center;padding:0;
  }
  .crit-info-btn:hover{border-color:var(--ink-soft);color:var(--ink);}
  .crit-info-body{
    margin:2px 0 6px 34px;padding:8px 10px;background:var(--paper);border-radius:6px;
    font-size:12px;color:var(--ink-soft);line-height:1.5;
  }
  .crit-info-body.collapsed{display:none;}

  /* WCAG 2.2 criteria (accessibility issues): search, rows with level badge, 5-step score
     bar from red (0, not conformant) to green (1, conformant), and the matching chips. */
  .wcag-score-0{--score:#c62828;--score-bg:#fdecea;}
  .wcag-score-25{--score:#e65100;--score-bg:#fff0e3;}
  .wcag-score-50{--score:#a86b00;--score-bg:#fff6dc;}
  .wcag-score-75{--score:#558b2f;--score-bg:#eef6e6;}
  .wcag-score-100{--score:#2e7d32;--score-bg:#e6f4e7;}
  .wcag-search{margin-bottom:8px;}
  .wcag-tab-count{
    display:inline-block;margin-left:6px;min-width:18px;padding:0 5px;border-radius:9px;
    background:var(--ink);color:#fff;font-size:10.5px;line-height:18px;text-align:center;
  }
  .wcag-tab-count[hidden]{display:none;}
  .wcag-principle-title{display:none;font-size:13px;font-weight:700;margin:10px 0 2px;}
  .wcag-searching .wcag-principle-title{display:block;}
  .wcag-searching .heur-tab{opacity:.55;}
  .wcag-guideline-title{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--slate-light);margin:12px 0 2px;}
  .wcag-num{font-variant-numeric:tabular-nums;font-weight:700;margin-right:2px;}
  .wcag-level{
    flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--slate);border:1px solid var(--line);
    border-radius:4px;padding:0 5px;line-height:16px;
  }
  /* Rows and segments sit inside a .field: undo its uppercase label style. */
  .field .wcag-row label, .field .wcag-scale .wcag-seg{text-transform:none;letter-spacing:normal;margin-bottom:0;}
  .field .wcag-row .check-row label{font-weight:400;color:var(--ink);}
  .wcag-obsolete .check-row{opacity:.45;}
  .wcag-obsolete .check-row label{cursor:not-allowed;}
  .crit-info-body a{display:inline-block;margin-left:4px;font-weight:600;}
  .wcag-scale{display:flex;gap:3px;margin:2px 0 8px 24px;}
  .wcag-scale[hidden]{display:none;}
  .field .wcag-scale .wcag-seg{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;
    padding:5px 4px;border-radius:6px;border:1.5px solid var(--line);background:var(--card);
    font-size:11px;line-height:1.2;text-align:center;color:var(--slate);
  }
  .wcag-seg{position:relative;}
  .wcag-seg input{position:absolute;width:auto;opacity:0;pointer-events:none;}
  .field .wcag-scale .wcag-seg:hover{border-color:var(--score);}
  .field .wcag-scale .wcag-seg:has(input:checked){background:var(--score);border-color:var(--score);color:#fff;font-weight:700;}
  .wcag-seg:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px;}
  .wcag-seg-value{font-size:10px;opacity:.8;}
  .wcag-chip{
    display:inline-block;flex-shrink:0;max-width:100%;font-size:12px;font-weight:600;border-radius:5px;padding:1px 7px;
    color:var(--score, var(--slate));background:var(--score-bg, var(--paper));
    border:1px solid var(--score, var(--line));
  }
  .wcag-used-list .wcag-level{margin-left:4px;}

  .toast{
    position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;
    padding:12px 18px;border-radius:9px;font-size:13.5px;box-shadow:var(--shadow);
    opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;z-index:50;
  }
  .toast.show{opacity:1;transform:translateY(0);}

  /* Client estimation basket (see clientCartPanel) — floating above the toast so it
     survives scrolling and flow navigation within a report. */
  .cart-pill{
    position:fixed;bottom:90px;right:22px;z-index:55;
    display:flex;align-items:center;gap:8px;
    background:var(--ink);color:#fff;border:none;border-radius:24px;
    padding:12px 18px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);cursor:pointer;
  }
  .cart-pill:hover{background:var(--ink-soft);}
  .cart-panel{
    position:fixed;bottom:90px;right:22px;z-index:55;width:320px;max-height:70vh;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;
  }
  .cart-panel-head{display:flex;justify-content:space-between;align-items:center;}
  .cart-panel-head h3{font-size:14.5px;margin:0;}
  .cart-list{overflow-y:auto;max-height:40vh;display:flex;flex-direction:column;gap:8px;}
  .cart-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;}
  .cart-item .dot{margin-top:5px;flex-shrink:0;}
  .cart-item-desc{flex:1;}
  .cart-item-remove{background:transparent;border:none;color:var(--slate-light);font-size:15px;line-height:1;cursor:pointer;flex-shrink:0;}
  .cart-item-remove:hover{color:var(--red);}

  /* Internal Liip comments (see INTERNAL COMMENTS in app.js) — a fixed panel on the
     right of the builder; the page makes room for it while it's open. */
  body.comments-open .main{padding-right:420px;min-width:0;}
  .btn-ghost.active{background:var(--ink);color:#fff;border-color:var(--ink);}
  .comments-panel{
    position:fixed;top:0;right:0;bottom:0;width:390px;z-index:40;
    background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow);
    display:flex;flex-direction:column;padding:18px 18px 0;
  }
  .comments-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
  .comments-head h3{font-size:16px;}
  .comments-internal{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--slate);margin-bottom:12px;}
  .comments-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
  .comments-focus{font-size:12.5px;color:var(--slate);margin-bottom:10px;}
  .link-btn{background:none;border:none;padding:0;color:var(--ink-soft);text-decoration:underline;font-size:inherit;cursor:pointer;}
  .comments-scroll{flex:1;overflow-y:auto;padding-bottom:24px;margin:0 -18px;padding-left:18px;padding-right:18px;}
  .comments-new{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px;}
  .comments-group{margin-bottom:18px;}
  .comments-group-head{
    display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;
    background:none;border:none;padding:4px 0;margin-bottom:6px;cursor:pointer;color:var(--ink);font-size:13px;font-weight:600;
  }
  .comments-group-head:hover .comments-group-title{text-decoration:underline;}
  .comments-group-title{display:flex;flex-direction:column;}
  .comments-group-title small{font-weight:400;color:var(--slate);font-size:11.5px;}
  .comment-thread{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px;background:var(--paper);}
  .comment-thread.resolved{opacity:.75;}
  .comment{padding:6px 0;}
  .comment + .comment{border-top:1px solid var(--line);}
  .comment-head{display:flex;align-items:baseline;gap:8px;font-size:12.5px;}
  .comment-date{color:var(--slate-light);font-size:11.5px;}
  .comment-tools{margin-left:auto;display:flex;gap:2px;}
  .comment-tool{background:none;border:none;color:var(--slate-light);padding:2px 4px;cursor:pointer;border-radius:4px;}
  .comment-tool:hover{color:var(--ink);background:var(--card);}
  .comment-body{font-size:13.5px;margin-top:2px;word-wrap:break-word;}
  .mention{color:var(--mod-usability);font-weight:600;}
  .mention-me{background:#E8EBFB;border-radius:4px;padding:0 3px;}
  .comment-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;margin-top:6px;}
  .comment-thread-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;}
  .comment-thread-foot .btn:only-child{margin-left:auto;}
  .comment-composer{margin-top:6px;}
  .comment-input-wrap{position:relative;}
  .comment-input{
    width:100%;resize:vertical;min-height:54px;font:inherit;font-size:13.5px;
    border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--card);
  }
  .comment-input:focus{outline:2px solid var(--ink-soft);outline-offset:1px;}
  .comment-composer-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:6px;}
  .comment-access-prompt{background:#FFF6E5;border:1px solid var(--amber);border-radius:8px;padding:10px;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;}
  .comment-access-prompt p{margin:0 0 4px;font-size:13px;width:100%;}
  .mention-menu{
    position:absolute;left:0;right:0;top:100%;z-index:5;margin-top:2px;
    background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;
  }
  .mention-option{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;background:none;border:none;padding:7px 10px;font-size:13px;cursor:pointer;}
  .mention-option span{color:var(--slate-light);font-size:11.5px;}
  .mention-option.active,.mention-option:hover{background:var(--paper);}
  .comment-count{
    flex-shrink:0;align-self:center;background:var(--paper);border:1px solid var(--line);border-radius:12px;
    padding:2px 8px;font-size:12px;cursor:pointer;color:var(--ink);
  }
  .comment-count:hover{border-color:var(--ink-soft);}
  .nav-count{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;text-align:center;line-height:18px;margin-left:4px;}
  /* Mentions page */
  .mention-row{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:12px 4px;cursor:pointer;color:var(--ink);font-size:13.5px;}
  .mention-row:last-child{border-bottom:none;}
  .mention-row:hover{background:var(--paper);}
  .mention-row.unread{background:#F5F7FE;}
  .mention-row-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
  .mention-row-head .nav-count{margin-left:0;}
  .mention-row-date{margin-left:auto;}
  .mention-row-issue{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--slate);font-size:12.5px;}
  .mention-row-body{margin-top:4px;color:var(--ink-soft);}

  /* Feedback / bug reports — floating button (expert), window, "My feedback", admin list */
  .feedback-fab{
    position:fixed;right:22px;bottom:22px;z-index:45;display:inline-flex;align-items:center;gap:7px;
    background:var(--ink);color:#fff;border:none;border-radius:22px;padding:10px 16px;
    font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:var(--shadow);
  }
  .feedback-fab:hover{background:var(--ink-soft);}
  .feedback-fab:focus-visible{outline:2px solid var(--ink-soft);outline-offset:2px;}
  body.comments-open .feedback-fab{right:412px;}
  .feedback-modal{max-width:560px;max-height:calc(100vh - 48px);overflow-y:auto;}
  .feedback-modal > p{margin-bottom:16px;}
  .feedback-kinds{display:flex;gap:8px;margin-bottom:16px;}
  .feedback-kind{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:13.5px;cursor:pointer;}
  .feedback-kind.active{border-color:var(--ink);background:var(--paper);font-weight:600;}
  .feedback-shot-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;}
  .feedback-shot-actions .btn{display:inline-flex;align-items:center;gap:6px;}
  .feedback-shot-preview{display:block;max-width:100%;max-height:220px;border:1px solid var(--line);border-radius:6px;}
  .field label.feedback-dropzone{display:flex;padding:14px;margin-bottom:0;text-transform:none;letter-spacing:normal;font-weight:400;font-size:13px;}
  .feedback-error{margin:8px 0 0;}
  .feedback-context{font-size:12.5px;color:var(--slate);}
  .feedback-row{border-bottom:1px solid var(--line);padding:12px 4px;font-size:13.5px;}
  .feedback-row:last-child{border-bottom:none;}
  .feedback-row.unread{background:#F5F7FE;}
  .feedback-row-desc{margin-top:6px;white-space:pre-wrap;color:var(--ink-soft);}
  .feedback-reply{margin-top:8px;padding:10px 12px;border-left:3px solid var(--green);background:var(--paper);border-radius:0 8px 8px 0;}
  .feedback-reply div{margin-top:4px;white-space:pre-wrap;}
  .feedback-filters{display:flex;gap:16px;margin-bottom:14px;font-size:13px;color:var(--slate);}
  .feedback-filters select,.feedback-admin-actions select{margin-left:6px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-family:inherit;}
  .feedback-admin-item{border-bottom:1px solid var(--line);}
  .feedback-admin-item:last-child{border-bottom:none;}
  .feedback-admin-head{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;padding:12px 4px;cursor:pointer;color:var(--ink);font-size:13.5px;font-family:inherit;}
  .feedback-admin-head:hover{background:var(--paper);}
  .feedback-admin-excerpt{color:var(--slate);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .feedback-admin-body{padding:4px 4px 18px;overflow-x:auto;}
  .feedback-shot{display:block;max-width:420px;max-height:260px;margin:12px 0;border:1px solid var(--line);border-radius:6px;cursor:zoom-in;}
  .feedback-shot.full{max-width:none;max-height:none;cursor:zoom-out;}
  .feedback-meta{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:12.5px;margin:12px 0 16px;}
  .feedback-meta dt{color:var(--slate);font-weight:600;}
  .feedback-meta dd{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;word-break:break-word;}
  .feedback-admin-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;font-size:13px;}

  @media (max-width:760px){
    .shell{grid-template-columns:1fr;}
    .sidebar{flex-direction:row;overflow-x:auto;align-items:center;position:static;height:auto;}
    .sb-nav{flex-direction:row;}
    .sb-foot{display:none;}
    .main{padding:22px 18px;}
    .module-picker{grid-template-columns:1fr;}
    .comments-panel{width:100%;}
    body.comments-open .main{padding-right:18px;}
  }

  /* ---------- printable report (PDF, see printReportView in app.js) ----------
     On screen: an A4-wide sheet (182mm of content = A4 minus the @page side margins, so
     layoutPrintShots measures the same widths as on paper) under a toolbar. */
  @page{
    size:A4;margin:16mm 14mm 18mm;
    @bottom-left{content:"";font:9px 'Inter',sans-serif;color:#9098A3;}
    @bottom-right{content:counter(page) " / " counter(pages);font:9px 'Inter',sans-serif;color:#9098A3;}
  }
  body.print-mode{background:#E4E6E1;}
  .print-toolbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;padding:12px 24px;background:var(--card);border-bottom:1px solid var(--line);}
  .print-toolbar-hint{flex:1;font-size:13px;color:var(--slate);}
  .print-doc{width:210mm;padding:16mm 14mm;margin:24px auto;background:#fff;box-shadow:var(--shadow);font-size:13.5px;}
  .print-doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .print-doc .panel{padding:16px 18px;margin-bottom:14px;border-radius:10px;box-shadow:none;break-inside:avoid;}
  .print-doc h2{font-size:17px;}
  .print-section{break-before:page;padding-top:4px;}
  .print-section-title{font-size:24px !important;padding-bottom:10px;margin-bottom:18px;border-bottom:2px solid var(--ink);break-after:avoid;}
  .print-subtitle{font-size:18px;margin:18px 0 10px;padding-left:10px;border-left:4px solid var(--chip-color, var(--ink));break-after:avoid;}

  .print-cover{min-height:250mm;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 6mm;}
  .print-cover-logo{width:72px;height:72px;border-radius:50%;margin-bottom:24px;}
  .print-cover-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);}
  .print-cover h1{font-size:38px;line-height:1.1;}
  .print-cover-client{font-size:20px;font-family:'Space Grotesk',sans-serif;color:var(--ink-soft);}
  .print-cover-by{font-size:13px;color:var(--slate);}

  .print-toc{break-before:page;}
  .print-toc h2{font-size:24px;margin-bottom:18px;}
  .print-toc ol{margin:0;padding-left:20px;font-size:15px;}
  .print-toc ol > li{margin-bottom:10px;font-weight:600;}
  .print-toc a{text-decoration:none;}
  .print-toc ul{margin:4px 0 0;padding-left:18px;font-size:13px;font-weight:400;color:var(--slate);}

  /* Unlike the app, heuristic lists are shown in full (no inner scroll on paper). */
  .print-doc .heur-cards{grid-template-columns:1fr 1fr;}
  .print-doc .heur-card{break-inside:avoid;}
  .print-doc .reading-col{max-width:none;}
  .print-doc .heur-card .elements{max-height:none;overflow:visible;}

  .print-page{margin-bottom:22px;}
  .print-page + .print-page{break-before:page;}
  .print-page-head{margin-bottom:10px;break-inside:avoid;break-after:avoid;}
  .print-page-head h3{font-size:18px;}
  .print-page-head .desc{color:var(--slate);font-size:12px;word-break:break-all;}
  .print-group{margin-bottom:18px;}
  .print-group + .print-group{break-before:page;}
  .print-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin-bottom:6px;break-after:avoid;}
  .print-shot{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--paper);margin-bottom:14px;break-inside:avoid;}
  .print-shot-inner{position:relative;margin:0 auto;}
  .print-shot .shot-img{cursor:default;}
  .print-shot .pin-marker{box-shadow:none;}
  /* A fade on the edge where a long capture was cut (layoutPrintShots). */
  .print-shot.cropped-top::before,.print-shot.cropped-bottom::after{content:"";position:absolute;left:0;right:0;height:28px;z-index:1;pointer-events:none;}
  .print-shot.cropped-top::before{top:0;background:linear-gradient(to bottom, rgba(243,244,241,.95), rgba(243,244,241,0));}
  .print-shot.cropped-bottom::after{bottom:0;background:linear-gradient(to top, rgba(243,244,241,.95), rgba(243,244,241,0));}
  .print-pin h3{font-size:15px;margin-bottom:8px;}
  .print-pin .pin-attachment-img{max-height:90mm;object-fit:contain;}
  .print-doc .code-copy-btn{display:none;}
  .print-doc .code-block{break-inside:avoid;}
  .print-doc .code-block pre{padding-right:16px;overflow:visible;white-space:pre-wrap;word-break:break-all;}
  .print-doc .missing-capture{margin-bottom:14px;}

  @media print{
    body.print-mode{background:#fff;}
    .no-print,#toast{display:none !important;}
    .print-doc{width:auto;padding:0;margin:0;box-shadow:none;}
  }