/* Lifted verbatim from mockup.html, the approved design source of truth.
   Only the .mockbar and .steps rules were dropped — mockup chrome, not
   product UI. Every token and every entity colour carries over unchanged;
   entity colours are functional, so they must stay identical across the
   document pane, the sidebar swatches and the before/after comparison. */
:root{
    --navy:#00196F;
    --navy-700:#001B5E;
    --cyan:#00A0C6;
    --ground:#F5F8FC;
    --surface:#FFFFFF;
    --surface-2:#EEF3F9;
    --ink:#0B1220;
    --ink-2:#3D4A60;
    --muted:#5B6B84;
    --border:#DCE4EF;
    --border-strong:#C3CFE0;
    --ok:#0F7355;
    --ok-bg:#E4F4EE;
    --warn:#9A5B00;
    --warn-bg:#FDF1DE;
    --danger:#B42318;

    --e-person:#6D28D9;   --e-person-bg:#EEE8FD;
    --e-email:#0E7490;    --e-email-bg:#E0F4F8;
    --e-phone:#0F766E;    --e-phone-bg:#DEF3F0;
    --e-id:#B42318;       --e-id-bg:#FDE8E6;
    --e-iban:#9A5B00;     --e-iban-bg:#FCEFDB;
    --e-loc:#4D7C0F;      --e-loc-bg:#EAF4DC;
    --e-date:#475569;     --e-date-bg:#E9EDF3;
    --e-org:#A21F62;      --e-org-bg:#FBE6F0;

    --r-sm:4px; --r-md:8px; --r-lg:12px;
    --shadow:0 1px 2px rgba(11,18,32,.05), 0 8px 24px -16px rgba(11,18,32,.25);
    --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --navy:#5B7BE0; --navy-700:#4A68C9; --cyan:#39C0DF;
      --ground:#0B1020; --surface:#131A2C; --surface-2:#1B2439;
      --ink:#EEF2F9; --ink-2:#C0CADB; --muted:#8E9CB5;
      --border:#26314A; --border-strong:#36435F;
      --ok:#4ED6A8; --ok-bg:#10312A; --warn:#E8B45C; --warn-bg:#33260F; --danger:#F2836F;
      --e-person:#B79BFB; --e-person-bg:#2A2050;
      --e-email:#5FD0E8;  --e-email-bg:#0E2E38;
      --e-phone:#5CD3C2;  --e-phone-bg:#0E302C;
      --e-id:#F79184;     --e-id-bg:#3A1A18;
      --e-iban:#EFBA6A;   --e-iban-bg:#3A2A10;
      --e-loc:#AFD67A;    --e-loc-bg:#22300F;
      --e-date:#9FB0C6;   --e-date-bg:#212B3D;
      --e-org:#F292BE;    --e-org-bg:#3A1329;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --navy:#5B7BE0; --navy-700:#4A68C9; --cyan:#39C0DF;
    --ground:#0B1020; --surface:#131A2C; --surface-2:#1B2439;
    --ink:#EEF2F9; --ink-2:#C0CADB; --muted:#8E9CB5;
    --border:#26314A; --border-strong:#36435F;
    --ok:#4ED6A8; --ok-bg:#10312A; --warn:#E8B45C; --warn-bg:#33260F; --danger:#F2836F;
    --e-person:#B79BFB; --e-person-bg:#2A2050;
    --e-email:#5FD0E8;  --e-email-bg:#0E2E38;
    --e-phone:#5CD3C2;  --e-phone-bg:#0E302C;
    --e-id:#F79184;     --e-id-bg:#3A1A18;
    --e-iban:#EFBA6A;   --e-iban-bg:#3A2A10;
    --e-loc:#AFD67A;    --e-loc-bg:#22300F;
    --e-date:#9FB0C6;   --e-date-bg:#212B3D;
    --e-org:#F292BE;    --e-org-bg:#3A1329;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--ground); color:var(--ink);
    font-family:"Source Sans 3", system-ui, -apple-system, sans-serif;
    font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:Lexend, system-ui, sans-serif; margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.01em}
  button{font:inherit; cursor:pointer}
  :focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:var(--r-sm)}
  @media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

  /* ---------- mockup chrome ---------- */

  /* ---------- app shell ---------- */
  .app{max-width:1320px; margin-inline:auto; padding-inline:20px; padding-block:0 48px}
  .topbar{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding-block:18px 16px; border-bottom:1px solid var(--border);
  }
  .brand{display:flex; align-items:center; gap:14px; min-width:0}
  .brand img{height:22px; width:auto; display:block}
  :root[data-theme="dark"] .brand img,
  .brand img{filter:none}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1)}}
  :root[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
  .brand .divider{width:1px; height:20px; background:var(--border-strong)}
  .brand .name{font-family:Lexend; font-weight:500; font-size:15px; letter-spacing:.01em; color:var(--ink-2)}
  .topbar .spacer{flex:1}
  .topbar .who{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted)}
  .pill-secure{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--ok-bg); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 25%, transparent);
    border-radius:999px; padding:3px 10px 3px 8px; font-size:12.5px; font-weight:600; font-family:Lexend;
  }
  .icon{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}

  .page-head{padding-block:28px 22px; display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap}
  .page-head h1{font-size:26px}
  .page-head p{margin:6px 0 0; color:var(--muted); max-width:62ch}

  /* ---------- generic pieces ---------- */
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow)}
  .btn{
    font-family:Lexend; font-weight:500; border-radius:var(--r-md); padding:10px 18px;
    border:1px solid transparent; display:inline-flex; align-items:center; gap:9px;
    transition:background .18s, border-color .18s, color .18s; min-height:44px;
  }
  .btn-primary{background:var(--navy); color:#fff}
  .btn-primary:hover{background:var(--navy-700)}
  .btn-ghost{background:transparent; color:var(--ink-2); border-color:var(--border-strong)}
  .btn-ghost:hover{background:var(--surface-2); color:var(--ink)}
  .btn-quiet{background:transparent; color:var(--muted); border-color:transparent; padding-inline:10px}
  .btn-quiet:hover{color:var(--ink); background:var(--surface-2)}

  .seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:3px}
  .seg button{
    border:0; background:transparent; color:var(--muted); font-family:Lexend; font-size:13.5px; font-weight:500;
    padding:7px 16px; border-radius:6px; display:flex; align-items:center; gap:7px; min-height:38px;
  }
  .seg button[aria-selected="true"]{background:var(--surface); color:var(--navy); box-shadow:0 1px 2px rgba(11,18,32,.08)}

  label.field{display:block; font-family:Lexend; font-size:12px; font-weight:500; letter-spacing:.07em;
    text-transform:uppercase; color:var(--muted); margin-bottom:7px}
  select, textarea, input[type=password]{
    font:inherit; color:var(--ink); background:var(--surface);
    border:1px solid var(--border-strong); border-radius:var(--r-md); padding:10px 12px; width:100%;
  }
  select{min-height:44px}
  .help{font-size:13px; color:var(--muted); margin:7px 0 0}

  /* ---------- screen 1: input ---------- */
  .input-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start}
  .composer{padding:18px}
  .composer-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
  .composer textarea{
    min-height:280px; font-family:var(--mono); font-size:13.5px; line-height:1.75; resize:vertical;
    background:var(--surface-2);
  }
  .drop{
    margin-top:14px; border:1.5px dashed var(--border-strong); border-radius:var(--r-md);
    padding:22px; text-align:center; background:var(--surface-2);
  }
  .drop strong{font-family:Lexend; font-weight:500; display:block; color:var(--ink-2)}
  .formats{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px}
  .fmt{
    font-family:var(--mono); font-size:11.5px; color:var(--muted);
    border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 7px; background:var(--surface);
  }
  .side-panel{padding:18px; display:grid; gap:18px}
  .note{
    display:flex; gap:10px; font-size:13px; color:var(--ink-2);
    background:var(--warn-bg); border:1px solid color-mix(in srgb, var(--warn) 22%, transparent);
    border-radius:var(--r-md); padding:12px;
  }
  .note svg{stroke:var(--warn)}
  .side-panel .btn-primary{width:100%; justify-content:center}

  /* ---------- screen 2: review ---------- */
  .review{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:20px; align-items:start}
  .doc{overflow:hidden}
  .doc-head{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface-2);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  .doc-head .fname{font-family:Lexend; font-weight:500; font-size:14px}
  .doc-head .meta{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
  .doc-body{padding:22px 26px; font-family:var(--mono); font-size:13.5px; line-height:2.05; white-space:pre-wrap; overflow-x:auto}
  .doc-body .line-label{color:var(--muted); font-size:12px}

  mark{
    background:var(--bg); color:var(--fg); border-bottom:2px solid var(--fg);
    border-radius:3px 3px 0 0; padding:1.5px 3px; cursor:pointer;
    transition:background .15s, opacity .15s;
  }
  mark[data-off="true"]{background:transparent; color:inherit; border-bottom:1px dotted var(--border-strong); opacity:.55}
  mark .conf{
    font-size:9.5px; font-family:Lexend; font-weight:600; letter-spacing:.04em;
    vertical-align:super; opacity:.75; margin-left:2px;
  }
  .m-person{--bg:var(--e-person-bg); --fg:var(--e-person)}
  .m-email{--bg:var(--e-email-bg); --fg:var(--e-email)}
  .m-phone{--bg:var(--e-phone-bg); --fg:var(--e-phone)}
  .m-id{--bg:var(--e-id-bg); --fg:var(--e-id)}
  .m-iban{--bg:var(--e-iban-bg); --fg:var(--e-iban)}
  .m-loc{--bg:var(--e-loc-bg); --fg:var(--e-loc)}
  .m-date{--bg:var(--e-date-bg); --fg:var(--e-date)}
  .m-org{--bg:var(--e-org-bg); --fg:var(--e-org)}

  .inspector{position:sticky; top:64px; display:grid; gap:0; overflow:hidden}
  .insp-head{padding:16px 18px 14px; border-bottom:1px solid var(--border)}
  .insp-head h2{font-size:15px}
  .insp-head p{margin:4px 0 0; font-size:13px; color:var(--muted)}
  .insp-tools{display:flex; gap:8px; padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface-2)}
  .insp-tools .btn{min-height:34px; padding:5px 12px; font-size:13px}

  .etype{border-bottom:1px solid var(--border); padding:13px 18px; display:grid; gap:10px}
  .etype-top{display:flex; align-items:center; gap:11px}
  .swatch{width:9px; height:22px; border-radius:2px; background:var(--fg); flex:none}
  .etype-name{font-family:Lexend; font-size:13.5px; font-weight:500; display:flex; align-items:baseline; gap:8px; flex:1; min-width:0}
  .etype-name .count{
    font-family:var(--mono); font-size:11.5px; color:var(--muted);
    background:var(--surface-2); border-radius:999px; padding:1px 8px; font-variant-numeric:tabular-nums;
  }
  .sw{position:relative; width:40px; height:24px; flex:none}
  .sw input{position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; cursor:pointer}
  .sw span{
    position:absolute; inset:0; background:var(--border-strong); border-radius:999px; transition:background .18s;
    pointer-events:none;
  }
  .sw span::after{
    content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff;
    border-radius:50%; transition:transform .18s; box-shadow:0 1px 2px rgba(0,0,0,.3);
  }
  .sw input:checked + span{background:var(--navy)}
  .sw input:checked + span::after{transform:translateX(16px)}
  .sw input:focus-visible + span{outline:2px solid var(--cyan); outline-offset:2px}

  .etype-ops{display:flex; align-items:center; gap:8px; padding-left:20px}
  .etype-ops select{min-height:34px; padding:5px 9px; font-size:13px; flex:1}
  .preview-token{
    font-family:var(--mono); font-size:11.5px; color:var(--e-person);
    white-space:nowrap;
  }
  .etype[data-off="true"]{opacity:.5}
  .etype[data-off="true"] .etype-ops{pointer-events:none}

  .insp-foot{padding:16px 18px; display:grid; gap:12px; background:var(--surface-2)}
  .tally{display:flex; align-items:baseline; justify-content:space-between; font-size:13.5px; color:var(--ink-2)}
  .tally b{font-family:Lexend; font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums}
  .insp-foot .btn-primary{width:100%; justify-content:center}

  .lang-warn{
    display:flex; gap:10px; align-items:flex-start; font-size:13px;
    padding:12px 18px; background:var(--warn-bg); color:var(--ink-2);
    border-bottom:1px solid color-mix(in srgb, var(--warn) 22%, transparent);
  }
  .lang-warn svg{stroke:var(--warn); margin-top:2px}

  /* ---------- screen 3: result ---------- */
  .result-head{
    display:flex; gap:18px; align-items:center; flex-wrap:wrap;
    padding:20px 22px; margin-bottom:20px;
    border-left:4px solid var(--ok);
  }
  .result-head .tick{
    width:40px; height:40px; border-radius:50%; background:var(--ok-bg); color:var(--ok);
    display:grid; place-items:center; flex:none;
  }
  .result-head .tick svg{width:22px; height:22px; stroke-width:2.2}
  .result-head h2{font-size:18px}
  .result-head p{margin:3px 0 0; color:var(--muted); font-size:14px}
  .result-head .acts{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}

  .stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1px; background:var(--border);
    border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:20px}
  .stat{background:var(--surface); padding:14px 16px}
  .stat dt{font-family:Lexend; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
  .stat dd{margin:4px 0 0; font-family:Lexend; font-size:24px; font-weight:600; font-variant-numeric:tabular-nums}
  .stat dd small{font-size:13px; font-weight:400; color:var(--muted); margin-left:4px}

  .compare{display:grid; grid-template-columns:1fr 1fr; gap:20px}
  .pane-head{
    padding:11px 18px; border-bottom:1px solid var(--border); background:var(--surface-2);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    font-family:Lexend; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
    display:flex; align-items:center; gap:8px;
  }
  .redacted{background:var(--surface-2); color:var(--muted); border-radius:3px; padding:1.5px 5px; font-size:12.5px}
  .pane-head .dot{width:7px; height:7px; border-radius:50%; background:currentColor}

  .footer-note{margin-top:26px; font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center}

  @media (max-width:1000px){
    .input-grid, .review, .compare{grid-template-columns:minmax(0,1fr)}
    .inspector{position:static}
  }
  @media (max-width:520px){
    .app{padding-inline:16px}
    .doc-body{padding:16px}
    .page-head h1{font-size:22px}
  }

  /* ---------- added for the product; not in mockup.html ----------
     The mockup covers the three working screens. These are the parts it never
     had to draw — the sign-in gate, the "what isn't scanned" disclosure, the
     file picker and the error banner. Built only from the tokens above, so both
     themes follow automatically and no colour gets a second definition. */

  /* The mockup only ever hid <section>s, which are block-level, so the bare
     [hidden] attribute was enough. Several product elements are flex or grid, and
     display beats hidden — without this the error banner and the Catalan warning
     show permanently, empty. */
  [hidden]{display:none !important}

  .note-error{
    background:color-mix(in srgb, var(--danger) 10%, transparent);
    border-color:color-mix(in srgb, var(--danger) 30%, transparent);
    color:var(--ink); margin-block:18px 0;
  }
  .note-error svg{stroke:var(--danger)}

  .gaps{
    margin-top:14px; border:1px solid var(--border); border-radius:var(--r-md);
    background:var(--surface-2); font-size:13px; color:var(--ink-2);
  }
  .gaps summary{
    cursor:pointer; padding:11px 14px; font-family:Lexend; font-weight:500;
    font-size:13px; color:var(--ink); list-style-position:inside;
  }
  .gaps summary:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px; border-radius:var(--r-md)}
  .gaps ul{margin:0; padding:0 14px 0 32px}
  .gaps li{margin-bottom:4px}
  .gaps p{margin:10px 14px; padding-top:10px; border-top:1px solid var(--border)}
  .gaps p strong{color:var(--ok)}

  .drop input[type="file"]{
    display:block; margin:12px auto 0; max-width:100%; font-size:13px; color:var(--ink-2);
  }
  .drop.dragging{border-color:var(--navy); background:color-mix(in srgb, var(--navy) 7%, var(--surface-2))}

  .composer .seg button{cursor:pointer}

  /* A masked IBAN is twenty stars and a tail — wider than the row it sits in.
     Let it shrink and clip rather than push the select off the panel; the full
     token is on the title attribute. */
  .etype-ops .preview-token{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* Nothing replaced is not a success. The green tick and the word "Anonymised"
     on an untouched document is the one failure mode of this screen that actually
     costs something: someone downloads it believing it is clean. */
  .result-head[data-warn="true"]{border-left-color:var(--warn)}
  .result-head[data-warn="true"] .tick{background:var(--warn-bg); color:var(--warn)}
  #screen-result[data-warn="true"] .page-head h1::after{content:" — nothing was removed"; color:var(--warn)}

  /* ---------- sign-in ---------- */
  .login{
    max-width:380px; margin:14vh auto 0; padding:30px; display:grid; gap:13px;
    text-align:center;
  }
  .login-logo{height:26px; width:auto; margin-inline:auto; object-fit:contain}
  /* Fluidra navy on a dark ground is unreadable — the topbar logo already inverts
     in dark themes, and the sign-in logo has to match it. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .login-logo{filter:brightness(0) invert(1)}
  }
  :root[data-theme="dark"] .login-logo{filter:brightness(0) invert(1)}
  .login h1{font-size:19px; margin-bottom:6px}
  .login .field{text-align:left}
  .login input[type="password"]{
    width:100%; min-height:40px; padding:8px 11px; font-size:14px;
    border:1px solid var(--border-strong); border-radius:var(--r-md);
    background:var(--surface); color:var(--ink);
  }
  .login input[type="password"]:focus-visible{outline:2px solid var(--cyan); outline-offset:1px}
  .login .btn-primary{width:100%; justify-content:center; margin-top:4px}
  .login .error{
    font-size:13px; color:var(--danger); text-align:left; margin:0;
  }
  .login-note{
    max-width:380px; margin:16px auto 0; text-align:center;
    font-size:12.5px; color:var(--muted);
  }