:root{
  --navy:#1e4642; --slate:#2e5f5a; --slate-lt:#bcd8d4; --ice:#e2eeec; --paper:#f4f9f8;
  --gold:#e8825d; --ink:#1c2b29; --ok:#1f7a4d; --warn:#b3611f; --err:#a33;
  --radius:10px;
  /* #183 — ONE page width for the whole portal. Declared here for the
     signed-in app (admin + client portal) and, character for character,
     in site.css for the public pages. Reuben, 8 Sept 2026: "it should be
     the same for all pages and all access points". A views check fails if
     the two files ever stop agreeing. */
  --wrap:clamp(1240px,92vw,2200px);
}
*{box-sizing:border-box}
html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{margin:0;font-family:'Segoe UI',system-ui,Arial,sans-serif;background:var(--paper);color:var(--ink);font-size:14px}
header.app{background:linear-gradient(90deg,var(--slate),var(--navy));color:#fff;padding:14px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
header.app h1{font-size:19px;margin:0;font-weight:600;letter-spacing:.4px}
header.app .hdr-logo{height:42px;width:auto;display:block}
header.app .sub{opacity:.75;font-size:12px}
nav.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.tabs button{background:rgba(255,255,255,.12);border:0;color:#fff;padding:9px 18px;border-radius:8px;cursor:pointer;font-size:14px}
nav.tabs button.active{background:#fff;color:var(--navy);font-weight:600}
/* #182/#183 — 1720px (set in #130) left a 2560-wide screen with ~420px of dead
   margin either side. The cap is raised, not removed: past ~2200px the estimate
   tables and the four-column form start running lines wider than they read
   well. This ONE rule serves the admin and the client portal alike — they were
   never different, so do not split it — and --wrap keeps the public pages
   (site.css) on the very same number. */
main{max-width:var(--wrap);margin:20px auto;padding:0 20px}
.card{background:#fff;border:1px solid #e1e8ee;border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(22,50,79,.06)}
.card h2{margin:0 0 12px;font-size:16px;color:var(--navy)}
.card h3{margin:14px 0 8px;font-size:14px;color:var(--slate)}
.grid{display:grid;gap:10px 16px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g4,.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g4,.g3,.g2{grid-template-columns:1fr}}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#476279;font-weight:600}
label.f input,label.f select,label.f textarea{padding:7px 9px;border:1px solid #c8d6e0;border-radius:6px;font-size:14px;font-family:inherit;background:#fff}
label.f input:focus,select:focus,textarea:focus{outline:2px solid var(--slate-lt)}
.btn{background:var(--navy);color:#fff;border:0;padding:9px 18px;border-radius:7px;cursor:pointer;font-size:14px}
.btn.gold{background:var(--gold);color:#1e2b29;font-weight:600}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:default}
.pillbar{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;max-height:220px;overflow:auto}
.pill{border:1px solid var(--slate-lt);background:var(--ice);border-radius:16px;padding:4px 12px;cursor:pointer;font-size:13px}
.pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pill.restricted{border-color:var(--err);color:var(--err)}
.pill.on.restricted{background:var(--err);color:#fff}
/* Wide-table scroller (#80, Accounts): both scrollbars stay inside a
 * viewport-sized box — no more scrolling to the very bottom of the page to
 * reach the horizontal scrollbar. The header row and the Name column stay
 * pinned while scrolling. */
.tallscroll{max-height:calc(100vh - 300px);min-height:340px;overflow:auto;border:1px solid #e4ecf1;border-radius:8px}
.tallscroll table.data th{z-index:2}
.tallscroll table.data th:first-child{position:sticky;left:0;top:0;z-index:3}
.tallscroll table.data td:first-child{position:sticky;left:0;background:#fff;z-index:1}
.tallscroll table.data tr:nth-child(even) td:first-child{background:#f4f8fa}
table.data{border-collapse:collapse;width:100%;font-size:13px}
table.data th{background:var(--slate);color:#fff;padding:7px 9px;text-align:left;font-weight:600;position:sticky;top:0}
table.data td{border-bottom:1px solid #e4ecf1;padding:6px 9px}
table.data tr:nth-child(even) td{background:#f4f8fa}
table.data input,table.data select{padding:4px 6px;border:1px solid #c8d6e0;border-radius:4px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.ov{background:#fdf3dc!important;outline:1px dashed var(--gold)}
.ovflag{color:var(--warn);font-size:10px;font-weight:700;margin-left:4px}
.clickable{cursor:pointer;text-decoration:underline dotted #9db8c8}
.muted{color:#7b909f;font-size:12px}
/* #160 — "Look up & auto-fill" band at the top of the estimate form (PCT NPE
 * and EP Validation only) plus the feedback that says the fields below were
 * filled from the published EPO data. The old small Verify chip beside the
 * Application Number was missed by a client, who typed a whole form by hand. */
.lookup{background:var(--ice);border:1px solid var(--slate-lt);border-radius:var(--radius);padding:14px 16px;margin:4px 0 0}
.lookup h3{margin:0 0 2px;font-size:14.5px;color:var(--navy)}
.lookup p.lk-hint{margin:0 0 10px;font-size:12.5px;color:#4b6a66;max-width:78ch}
.lookup .lk-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.lookup .lk-row label.f{flex:1;min-width:230px}
.lookup .lk-row label.f input{background:#fff}
.lookup .lk-or{padding-bottom:9px;font-weight:600}
.lookup .lk-go{white-space:nowrap}
.orline{display:flex;align-items:center;gap:12px;color:#9fb3b0;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:14px 0 10px}
.orline:before,.orline:after{content:"";flex:1;height:1px;background:#e1e8ee}
label.f input.af,label.f select.af{background:#f2faf5;border-color:#a9d9bf}
.fillchip{display:inline-flex;align-items:center;gap:5px;background:#dff0e6;color:#15613b;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;margin-left:6px}
/* #175 — the way back to the published record, beside the chip. Deliberately a plain link, not a second badge: the chip states a fact, this does something. */
.reglink{font-size:11px;font-weight:600;color:#1c5f8a;text-decoration:underline;margin-left:2px;white-space:nowrap}
.reglink:hover{color:#0f3f5e}
.note-warn{background:#fbeeee;border:1px solid #e6bcbc;color:#8b3030;padding:8px 12px;border-radius:6px;margin:8px 0;font-size:13px}
.note-ok{background:#e9f6ef;border:1px solid #bfe3cf;color:#1f5c3d;padding:10px 14px;border-radius:6px;margin:8px 0;font-size:13px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
.badge{display:inline-block;background:var(--ice);color:var(--navy);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;margin-left:6px}
.badge.gold{background:#fbe3d7;color:#8a4426}
.err{color:var(--err);font-size:13px;margin:8px 0;min-height:16px}
.admin-sub{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.admin-sub button{border:1px solid var(--slate-lt);background:#fff;padding:6px 14px;border-radius:6px;cursor:pointer}
.admin-sub button.active{background:var(--slate);color:#fff}
/* ---------- estimate document ---------- */
.doc{background:#fff;border:1px solid #dfe7ee;padding:34px 40px;max-width:900px;margin:0 auto;box-shadow:0 2px 10px rgba(22,50,79,.08)}
.doc-head{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr 1.1fr 1fr;border:1px solid var(--slate);margin-bottom:20px}
.doc-head>div{padding:10px 8px;font-size:12px;display:flex;align-items:center;justify-content:center;text-align:center;border-left:1px solid #fff}
.doc-head .logo{background:#fff;color:var(--navy);font-weight:700;font-size:18px;flex-direction:column}
.doc-head .logo img{max-width:100%;max-height:46px;height:auto;display:block}
.doc-head .logo .tag{font-size:8.5px;font-weight:400;color:var(--slate)}
.doc-head .ttl{background:#f29c76;color:#1e4642;font-weight:700}
.doc-head .cell{background:var(--slate-lt);color:var(--navy);font-weight:600}
.doc h4.sec{color:var(--slate);font-size:14px;margin:18px 0 6px;font-weight:700}
table.est{border-collapse:collapse;width:100%;font-size:12.5px}
table.est th{background:var(--slate);color:#fff;padding:6px 8px;font-weight:600}
table.est td{border:1px solid #d5e0e8;padding:5px 8px}
table.est tr.total td{background:var(--ice);font-weight:700}
/* #187 — Request for Examination section: same table, its own total */
table.est.rfe{margin-top:4px}
table.est.rfe th:nth-child(n+2),table.est.rfe td.num{width:14%}
.modal .rfe-text-p{font-size:12px;color:#333;font-style:italic;margin:10px 0 0}
table.est.rfe .rfe-note{font-size:10.5px;color:#476279;font-style:italic;margin-top:2px}
.doc .rfe-text-p{font-size:11.5px;margin:8px 0 14px;color:#333;font-style:italic}
table.details{border-collapse:collapse;width:100%;font-size:12.5px}
table.details td{border:1px solid #d5e0e8;padding:5px 8px}
table.details td.k{background:var(--ice);font-weight:600;width:180px;color:var(--navy)}
.doc .notes p{font-size:11.5px;margin:8px 0;color:#333}
.doc .notes h5{font-size:12.5px;color:var(--navy);margin:14px 0 2px}
.doc-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--slate);margin-top:26px;border-top:1px solid #d5e0e8;padding-top:8px}
@media print{
  /* When printing via the portal's Print button, everything except the
     document is fully removed (display:none) so no empty pages trail on. */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body.printing>:not(#printZone){display:none!important}
  body.printing #printZone{display:block!important;position:static;width:100%}
  .doc{border:0;box-shadow:none;padding:10px 6px;max-width:100%}
  .noprint{display:none!important}
  .ovflag{display:none!important}
  .clickable{text-decoration:none!important}
  .ov{background:transparent!important;outline:none!important}
}
/* ---------- auth pages ---------- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--slate),var(--navy));padding:20px}
.authbox{background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.3);max-width:440px;width:100%;padding:34px 36px}
.authbox h1{color:var(--navy);font-size:22px;margin:0 0 2px}
.authbox .tag{color:var(--slate);font-size:12px;margin-bottom:20px}
.authbox label.f{margin:10px 0}
.authbox .btn{width:100%;margin-top:14px;padding:11px}
.authbox .alt{margin-top:16px;font-size:13px;text-align:center}
.authbox a{color:var(--slate)}
.status-chip{display:inline-block;border-radius:12px;padding:2px 10px;font-size:11px;font-weight:700}
.status-estimate{background:var(--ice);color:var(--navy)}
.status-instructed{background:#fbe3d7;color:#8a4426}
.listrow{display:flex;gap:14px;align-items:center;padding:10px 6px;border-bottom:1px solid #e4ecf1;cursor:pointer}
.listrow:hover{background:#f0f6f5}
.modal-bg{position:fixed;inset:0;background:rgba(20,40,38,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--paper);border-radius:12px;max-width:760px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.modal .mhead{background:var(--navy);color:#fff;padding:14px 20px;border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center}
.modal .mbody{padding:18px 20px}

/* #112 — instructions order form: drag & drop zone + the country-specific
   documents note (deliberately clearer than the surrounding fine print) */
.dropzone{border:2px dashed var(--slate-lt);border-radius:10px;padding:22px 16px;text-align:center;color:var(--slate);background:var(--paper);cursor:pointer;transition:background .15s,border-color .15s;margin:6px 0}
.dropzone.over{background:var(--ice);border-color:var(--slate)}
.note-doc{font-size:14px;color:var(--ink);background:var(--ice);border-left:4px solid var(--slate);padding:8px 12px;border-radius:6px}
.ins-doc-notes{font-size:13px;margin:8px 0;padding:8px 12px 8px 28px}
.ins-doc-notes li{margin:3px 0}
/* #128 — quick actions on estimate list rows */
.rowacts{display:inline-flex;gap:4px;white-space:nowrap}
.rowact{border:1px solid #c8d6e0;background:#fff;border-radius:6px;cursor:pointer;padding:2px 7px;font-size:13px;line-height:1.4}
.rowact:hover{background:var(--ice);border-color:var(--slate)}