/* Group Payments by Investotech: application styles.

   A single stylesheet built on design tokens (colour, radius, shadow,
   type) so the whole product reads as one system. No inline styles are
   used anywhere in the templates: the Content-Security-Policy forbids
   them. Fonts are embedded (static/fonts, SIL OFL) so nothing loads from
   a third party. */

/* ---------------------------------------------------------------- tokens */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
}

:root{
  /* brand */
  --brand:#00B0F0;            /* Investotech cyan, from the wordmark */
  --brand-deep:#0B7DC2;       /* cyan darkened until it passes AA on white */
  --brand-ink:#085F94;
  --navy-900:#070F1E;
  --navy-800:#0B1A33;
  --navy-700:#12264A;

  /* neutrals */
  --ink:#0B1A33; --ink-2:#44546A; --ink-3:#6E7B90; --ink-4:#98A4B5;
  --page:#F3F6FB; --surface:#FFFFFF; --surface-2:#F8FAFD;
  --rule:#E2E8F0; --rule-2:#EDF1F6;

  /* semantic */
  --act:var(--brand-deep); --act-dark:var(--brand-ink);
  --wait:#9A5B00; --wait-bg:#FFF4DE; --wait-dot:#F59E0B;
  --ok:#0F7A4A;   --ok-bg:#DDF5E8;   --ok-dot:#22C55E;
  --no:#B42318;   --no-bg:#FEE4E2;   --no-dot:#EF4444;
  --paid:#0B6E8F; --paid-bg:#DFF3FA; --paid-dot:#0EA5E9;
  --grey:#4B5A6E; --grey-bg:#EEF2F7; --grey-dot:#94A3B8;

  /* shape and depth */
  --r:12px; --r-sm:8px; --r-xs:6px;
  --shadow-sm:0 1px 2px rgba(11,26,51,.05);
  --shadow:0 1px 2px rgba(11,26,51,.05), 0 12px 32px -16px rgba(11,26,51,.20);
  --shadow-lg:0 2px 4px rgba(11,26,51,.06), 0 24px 56px -24px rgba(11,26,51,.28);
  --ring:0 0 0 3px rgba(0,176,240,.28);

  --font:"Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --side-w:252px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:14.5px/1.5 var(--font);
  color:var(--ink); background:var(--page);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01","calt";
}
.num{font-variant-numeric:tabular-nums}
a{color:var(--act); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
button{font:inherit}
img{max-width:100%}
h1,h2,h3{font-weight:650; color:var(--ink); letter-spacing:-.015em}
h1{font-size:26px; line-height:1.2; margin:0 0 4px; letter-spacing:-.025em}
h2{font-size:15px; margin:30px 0 12px}
h3{font-size:14px; margin:0}
.lede{color:var(--ink-2); margin:0 0 22px; font-size:14.5px; max-width:64ch}
p{margin:0 0 12px}

.skip-link{
  position:absolute; left:-999px; top:auto; background:var(--navy-800); color:#fff;
  padding:10px 16px; border-radius:0 0 var(--r-sm) 0; z-index:100;
}
.skip-link:focus{left:0; top:0}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
[hidden]{display:none !important}
.hidden{display:none !important}

/* Persistent, non-dismissable notice shown on every page of a demo
   instance (D35), signed in or not. Deliberately not position:sticky: it
   scrolls away with the page instead of competing with #side's own sticky
   behaviour (mobile header, desktop sidebar) for the top of the viewport. */
.demo-banner{
  background:var(--wait-bg); color:var(--wait); border-bottom:1px solid var(--wait-dot);
  padding:9px 16px; font-size:12.5px; font-weight:700; line-height:16px; text-align:center;
}

/* ----------------------------------------------------------------- shell */
#shell{display:flex; min-height:100vh}
#side{
  width:var(--side-w); flex:0 0 var(--side-w);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  color:#fff;
  background:
    radial-gradient(520px 320px at -20% -10%, rgba(0,176,240,.30), transparent 62%),
    radial-gradient(360px 260px at 120% 100%, rgba(0,176,240,.12), transparent 60%),
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
#brand{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 18px 14px}
.brand-link{display:inline-flex; align-items:center; gap:10px; border-radius:6px; color:#fff; text-decoration:none}
.brand-link:hover{text-decoration:none}
.brand-link:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.brand-logo{display:block; height:34px; width:auto}
.brand-tag{display:block; padding:0 18px 12px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#7F93B0}
.brand-tag b{color:#C9D4E5; font-weight:600}

nav.side-nav{padding:6px 12px 12px; flex:1; overflow:auto}
nav.side-nav .grp{font-size:10.5px; color:#5F7291; padding:16px 10px 6px; letter-spacing:.09em; text-transform:uppercase; font-weight:600}
nav.side-nav a{
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  color:#AAB8CC; padding:9px 11px; border-radius:var(--r-sm); font-size:13.5px; font-weight:500;
  text-decoration:none; transition:background .15s var(--ease), color .15s var(--ease);
}
nav.side-nav a .ico{width:18px; height:18px; flex:0 0 18px; opacity:.75}
nav.side-nav a:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
nav.side-nav a:hover .ico{opacity:1}
nav.side-nav a.on{background:rgba(0,176,240,.14); color:#fff; font-weight:600}
nav.side-nav a.on .ico{opacity:1; color:var(--brand)}
nav.side-nav a.on::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--brand)}
nav.side-nav a .cnt{margin-left:auto; background:var(--brand); color:var(--navy-900); border-radius:999px; padding:1px 8px; font-size:11px; font-weight:700; min-width:22px; text-align:center}
nav.side-nav a:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}

#who{display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#8FA2BC; background:rgba(0,0,0,.18)}
#who .avatar{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff; letter-spacing:.02em;
  background:linear-gradient(135deg,var(--brand) 0%,#1D6FE0 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}
#who .me{min-width:0; flex:1}
#who b{color:#fff; display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#who .role-list{margin:1px 0 0; padding:0; list-style:none; font-size:11px; display:flex; flex-wrap:wrap; gap:0 6px; color:#8FA2BC}
#who .role-list li+li::before{content:"·"; margin-right:6px; color:#5F7291}
#who form{margin:0}
#who button{
  display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); color:#C9D4E5; border:1px solid rgba(255,255,255,.08); cursor:pointer;
  transition:background .15s var(--ease);
}
#who button:hover{background:rgba(255,255,255,.14); color:#fff}
#who button:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
#who button .ico{width:17px; height:17px}
#navtoggle{display:none}

#main{flex:1; min-width:0; padding:34px 40px 48px; max-width:1320px; width:100%}
body.app main#main-content{animation:page-in .28s var(--ease) both}
@keyframes page-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ------------------------------------------------------------ page head */
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:6px}
.page-head .lede{margin-bottom:0}
.page-head h2{margin:0}
.page-head.sub{margin:26px 0 12px; align-items:center}
.page-head .actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto}
.eyebrow{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--act); margin-bottom:6px}

/* ----------------------------------------------------------- cards/tables */
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:var(--shadow-sm); margin-bottom:18px; overflow:hidden;
}
.card>h3{margin:0; padding:14px 18px; border-bottom:1px solid var(--rule-2); font-size:14px; display:flex; align-items:center; gap:10px}
.card .bd{padding:18px}
.card>.bd.row{align-items:flex-end; gap:12px 16px}
.card>.bd.row .f{min-width:180px}
.card>.bd.row .f:has(.btn){min-width:0}
.card.flat{box-shadow:none}
/* position:relative keeps visually hidden labels inside a wide table from
   widening the page: they are absolutely positioned and would otherwise
   escape this scroll container. */
.table-wrap{overflow-x:auto; position:relative}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{
  text-align:left; font-weight:600; color:var(--ink-3); padding:11px 16px; border-bottom:1px solid var(--rule);
  background:var(--surface-2); font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
td{padding:12px 16px; border-bottom:1px solid var(--rule-2); vertical-align:top}
/* A row header reads as body text, not as a column heading. */
tbody th[scope="row"]{
  background:none; color:var(--ink); font-size:13.5px; letter-spacing:0; text-transform:none; white-space:normal;
  padding:12px 16px; border-bottom:1px solid var(--rule-2); vertical-align:top; min-width:180px;
}
tbody th[scope="row"] .hint{font-weight:400; white-space:normal}
tr:last-child th[scope="row"]{border-bottom:0}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s var(--ease)}
tbody tr:hover{background:#F7FAFD}
tbody tr.click{cursor:pointer}
td a{color:var(--ink); font-weight:600}
td a:hover{color:var(--act)}
td .hint{font-weight:400}
.right{text-align:right}
td.num,td.right.num,td .hint.num{white-space:nowrap}
td .hint{white-space:nowrap}
.empty{padding:48px 20px; text-align:center; color:var(--ink-3); font-size:14px}
.empty b{display:block; color:var(--ink); font-size:15px; margin-bottom:4px; font-weight:600}
main>.empty,.dossier-main>.empty{background:var(--surface); border:1px dashed #C7D0DD; border-radius:var(--r); margin-bottom:18px}
details summary{cursor:pointer; color:var(--act); font-weight:600}
pre.calc-text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; background:var(--surface-2); border:1px solid var(--rule-2); border-radius:var(--r-sm); padding:12px; max-width:60ch; white-space:pre-wrap}

/* ---------------------------------------------------------------- pills */
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:999px;
  font-size:11.5px; font-weight:600; white-space:nowrap; line-height:1.4; letter-spacing:.01em;
}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9}
.p-wait{background:var(--wait-bg); color:var(--wait)} .p-wait::before{background:var(--wait-dot)}
.p-ok{background:var(--ok-bg); color:var(--ok)}       .p-ok::before{background:var(--ok-dot)}
.p-no{background:var(--no-bg); color:var(--no)}       .p-no::before{background:var(--no-dot)}
.p-paid{background:var(--paid-bg); color:var(--paid)} .p-paid::before{background:var(--paid-dot)}
.p-grey{background:var(--grey-bg); color:var(--grey)} .p-grey::before{background:var(--grey-dot)}
.ent{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--brand-ink);
  background:rgba(0,176,240,.12); border:1px solid rgba(0,176,240,.22); border-radius:6px; padding:2px 7px; font-variant-numeric:tabular-nums;
}
td a .ent, td a:hover .ent{color:var(--brand-ink)}

/* ---------------------------------------------------------------- forms */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.mt{margin-top:16px}
.f{display:flex; flex-direction:column; gap:6px; min-width:0}
.f.wide{grid-column:1/-1}
.f.narrow{max-width:220px}
label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
label .req{color:var(--no)}
input,select,textarea{
  font:inherit; font-size:14px; padding:9px 12px; border:1px solid var(--rule);
  border-radius:var(--r-sm); background:#fff; color:var(--ink); width:100%;
  box-shadow:inset 0 1px 1px rgba(11,26,51,.03);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:hover,select:hover,textarea:hover{border-color:#C7D0DD}
input[readonly]{background:var(--surface-2); color:var(--ink-2)}
select{
  appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7B90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
select[disabled]{opacity:.6; cursor:not-allowed}
textarea{min-height:88px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:var(--ring)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--no)}
input[type="checkbox"],input[type="radio"]{width:16px; height:16px; accent-color:var(--act); margin:0 8px 0 0; vertical-align:-3px; box-shadow:none}
label:has(input[type="checkbox"]),label:has(input[type="radio"]){display:flex; align-items:center; font-weight:500; color:var(--ink)}
.grid label:has(input[type="checkbox"]){padding-top:26px}
.card>.bd.row .f:has(input[type="checkbox"]){min-width:0; padding-bottom:10px}
input[type="file"]{
  padding:8px; border-style:dashed; background:var(--surface-2); font-size:13px; color:var(--ink-2); cursor:pointer;
}
input[type="file"]::file-selector-button{
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--rule);
  border-radius:6px; padding:5px 10px; margin-right:10px; cursor:pointer;
}
input[type="file"]:hover::file-selector-button{background:var(--surface-2)}
.hint{font-size:12px; color:var(--ink-3)}
.field-err{font-size:12px; color:var(--no); font-weight:600}
form.inline{display:inline}
fieldset.pref-group{border:0; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap}
fieldset.pref-group label{display:inline-flex; align-items:center; font-weight:500; color:var(--ink); white-space:nowrap}

/* ------------------------------------------------------------- sub-nav */
.subnav{display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--rule-2); flex-wrap:wrap}
.subnav a{padding:10px 14px; font-size:13.5px; font-weight:600; color:var(--ink-2); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--brand-ink); border-color:var(--brand)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#0EA5E9 0%,var(--brand-deep) 100%); color:#fff; border:1px solid transparent;
  padding:9px 16px; border-radius:var(--r-sm); cursor:pointer; font-weight:600; font-size:13.5px; line-height:1.3;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 1px 2px rgba(11,125,194,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .12s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), filter .15s var(--ease);
}
.btn:hover{filter:brightness(1.06); text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 12px -4px rgba(11,125,194,.55), inset 0 1px 0 rgba(255,255,255,.18)}
.btn:active{transform:none; filter:brightness(.98)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn.sec{background:#fff; color:var(--ink); border-color:var(--rule); box-shadow:var(--shadow-sm)}
.btn.sec:hover{background:var(--surface-2); border-color:#C7D0DD; filter:none; box-shadow:var(--shadow-sm)}
.btn.ok{background:linear-gradient(135deg,#16A34A,#0F7A4A); box-shadow:0 1px 2px rgba(15,122,74,.35)}
.btn.no{background:linear-gradient(135deg,#DC2626,#B42318); box-shadow:0 1px 2px rgba(180,35,24,.35)}
.btn.ghost{background:transparent; color:var(--act); border-color:transparent; box-shadow:none}
.btn.ghost:hover{background:rgba(0,176,240,.10); filter:none; transform:none; box-shadow:none}
.btn.sm{padding:6px 11px; font-size:12.5px; border-radius:7px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.btn .ico{width:16px; height:16px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.mt-lg{margin-top:22px}
.mt-md{margin-top:14px}
.mt-sm{margin-top:8px}

.note{border-left:3px solid var(--act); background:#EDF7FD; padding:12px 16px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:13.5px; margin-bottom:16px; color:var(--ink)}
.note.warn{border-color:var(--wait-dot); background:var(--wait-bg)}
.note.bad{border-color:var(--no); background:var(--no-bg)}
.err{color:var(--no); font-size:13px; font-weight:600; margin-bottom:10px}
.validation-summary{border:1px solid #F5B5B0; background:var(--no-bg); border-radius:var(--r); padding:14px 18px; margin-bottom:18px}
.validation-summary p{margin:0 0 6px; font-weight:600; color:var(--no)}
.validation-summary ul{margin:0; padding-left:18px}
.validation-summary a{color:var(--no); text-decoration:underline}
.validation-summary:focus{outline:2px solid var(--no); outline-offset:2px}

.flash{border-radius:var(--r-sm); padding:12px 16px; margin-bottom:18px; font-size:13.5px; font-weight:500; border:1px solid transparent; box-shadow:var(--shadow-sm)}
.flash-success{background:var(--ok-bg); color:var(--ok); border-color:#B9E8CD}
.flash-error{background:var(--no-bg); color:var(--no); border-color:#F5B5B0}
.flash-info{background:#EDF7FD; color:var(--brand-ink); border-color:#BFE6F8}

/* form sections: several cards stacked, one sticky action bar at the end */
.form-stack .card{margin-bottom:16px}
.form-actions{
  position:sticky; bottom:0; z-index:5; display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:14px 18px; margin-top:6px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow);
}
.form-actions .spacer{flex:1}
.section-anchor{scroll-margin-top:12px}

/* ---------------------------------------------------------------- stats */
.stat{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px}
.stat .b{
  position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:18px 20px 16px;
  box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
.stat .b::after{content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg,var(--brand),#1D6FE0); opacity:0; transition:opacity .18s var(--ease)}
.stat .b:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
.stat .b:hover::after{opacity:1}
.stat .b .n{font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums}
.stat .b .l{font-size:12.5px; color:var(--ink-3); margin-top:4px; font-weight:500}
.stat .b .l a{color:var(--ink); font-weight:600}
.stat .b .l a:hover{color:var(--act)}
.stat .b .n:empty::before{content:"\00a0"}

/* admin home tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.tile{
  display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r);
  padding:18px 20px; box-shadow:var(--shadow-sm); position:relative; transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
.tile:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
.tile .n{font-size:26px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1}
.tile .n:empty::before{content:"\00a0"}
.tile .t{font-size:14px; font-weight:600}
.tile .t a{color:var(--ink)}
.tile .t a::after{content:""; position:absolute; inset:0}
.tile .more{font-size:12.5px; position:relative; z-index:1; align-self:flex-start}

/* -------------------------------------------------------------- dossier */
.dossier{display:grid; grid-template-columns:minmax(0,1fr); gap:0 24px; align-items:start}
.dossier.has-side{grid-template-columns:minmax(0,1fr) 380px}
.dossier-side{position:sticky; top:24px}
.dossier-side .card{margin-bottom:16px}
.hero{
  position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow-sm);
  padding:22px 24px; margin-bottom:18px; overflow:hidden;
}
.hero::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--brand),#1D6FE0)}
.doc-head{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap}
.doc-head h1{margin-bottom:2px}
.doc-head .sub{color:var(--ink-2); font-size:13.5px; margin-top:3px}
.doc-amt{margin-left:auto; text-align:right}
.doc-amt .v{font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.1}
.doc-amt .e{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.hero .row.actions{margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-2)}
.kv{display:grid; grid-template-columns:190px 1fr; gap:0 18px; font-size:13.5px; margin:0}
.kv dt{color:var(--ink-3); padding:10px 0; border-bottom:1px solid var(--rule-2); font-weight:500}
.kv dd{margin:0; padding:10px 0; border-bottom:1px solid var(--rule-2); min-width:0; overflow-wrap:anywhere}
.kv dt:nth-last-of-type(1),.kv dd:last-of-type{border-bottom:0}
.kv dd .hint{margin-left:6px}
.calc-text{white-space:pre-wrap; margin:0; font-size:14px; line-height:1.6}

/* audit timeline */
.tl{position:relative; margin:4px 0 0 6px; padding:0}
.tl::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--rule),var(--rule-2))}
.tl li{list-style:none; position:relative; padding:0 0 16px 22px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:""; position:absolute; left:-5px; top:5px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--ink-4); box-shadow:0 0 0 3px #fff}
.tl li.done::before{background:var(--ok-dot); border-color:var(--ok-dot)}
.tl li.stop::before{background:var(--no-dot); border-color:var(--no-dot)}
.tl li.now::before{background:var(--wait-dot); border-color:var(--wait-dot)}
.tl .t{font-weight:600; font-size:13.5px}
.tl .m{font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* document list */
.files{list-style:none; margin:0; padding:0}
.files li{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--rule-2)}
.files li:last-child{border-bottom:0}
.files li .doc-name{display:flex; align-items:center; gap:10px; font-weight:600; min-width:0}
.files li .doc-name::before{
  content:""; flex:0 0 30px; width:30px; height:30px; border-radius:8px; background:rgba(0,176,240,.12) no-repeat center/16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7DC2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E");
}
.files li .hint{margin-left:auto}
.files a{font-size:13.5px}

/* ---------------------------------------------------------- scan panel */
.scan-open{margin-top:6px; align-self:flex-start}
.scan-panel{margin-top:8px; padding:14px; border:1px dashed #BFD3E6; border-radius:var(--r-sm); background:#F3FAFE}
.scan-pages{list-style:none; margin:8px 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.scan-pages li{position:relative; width:96px; text-align:center}
.scan-pages img{width:96px; height:128px; object-fit:cover; border:1px solid var(--rule); border-radius:6px; background:#fff}
.scan-remove{position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:0; background:var(--no); color:#fff; cursor:pointer; font-size:14px; line-height:22px; padding:0}
.scan-remove:focus{outline:2px solid var(--act); outline-offset:1px}
.scan-status{margin:6px 0}

/* -------------------------------------------------------------- sign in */
body.gate{display:flex; flex-direction:column; min-height:100vh}
body.gate main{flex:1; display:flex; flex-direction:column}
body.gate>.site-footer{border-top:0; justify-content:center; margin:0 0 0 46%; padding:14px 24px 22px}
#gate{display:flex; flex:1; min-height:0}
.gate-side{
  position:fixed; inset:0 auto 0 0; width:46%; color:#fff; padding:44px 52px; display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(700px 480px at 10% 0%, rgba(0,176,240,.38), transparent 62%),
    radial-gradient(520px 420px at 100% 100%, rgba(29,111,224,.32), transparent 60%),
    linear-gradient(160deg,var(--navy-800) 0%,var(--navy-900) 100%);
}
.gate-side::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(closest-side at 50% 50%, #000, transparent);
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000, transparent);
}
.gate-side>*{position:relative; z-index:1}
.gate-brand img{display:block; height:44px; width:auto}
.gate-copy{margin:auto 0; max-width:440px}
.gate-copy .eyebrow{color:var(--brand); margin-bottom:14px}
.gate-copy h2{color:#fff; font-size:34px; line-height:1.15; letter-spacing:-.03em; margin:0 0 14px; font-weight:700}
.gate-copy p{color:#B7C4D8; font-size:15px; line-height:1.6; margin:0 0 26px}
.gate-points{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.gate-points li{display:flex; align-items:flex-start; gap:12px; font-size:14px; color:#DCE5F2}
.gate-points .ico{flex:0 0 22px; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:rgba(0,176,240,.18); color:var(--brand)}
.gate-points .ico svg{width:13px; height:13px}
.gate-foot{font-size:12px; color:#6F83A2}
.gate-form{margin-left:46%; width:54%; display:flex; align-items:center; justify-content:center; padding:48px 32px}
.gate-card{width:100%; max-width:400px}
.gate-card h1{font-size:26px; margin-bottom:6px}
.gate-card .lede{margin-bottom:22px}
.gate-card .btn{margin-top:4px}
.gate-mark{display:none}
body.gate main>h1{padding:40px 32px 0}
body.gate main>.lede,body.gate main>.row{padding:0 32px}

/* --------------------------------------------------------------- footer */
.site-footer{display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; padding:20px 0 4px; margin-top:34px; border-top:1px solid var(--rule); font-size:12.5px; color:var(--ink-3)}
#main .site-footer{margin-top:44px}

/* ------------------------------------------------------------- utilities */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.divider{height:1px; background:var(--rule-2); margin:16px 0}

/* ------------------------------------------------------------ responsive */
/* Above the mobile breakpoint, #side is the full-height sidebar
   (height:100vh, position:sticky). The banner above #shell pushes #side
   35px down the page, which would otherwise leave it 35px taller than the
   viewport; sized here to the banner's own padding+line-height+border so
   the two always match. At and below 820px this cannot apply: #side
   already switches to height:auto there (see below), which needs no
   adjustment for the banner. */
@media(min-width:821px){
  body.has-demo-banner #side{height:calc(100vh - 35px)}
}
@media(max-width:1100px){
  .dossier.has-side{grid-template-columns:1fr}
  .dossier-side{position:static}
  #main{padding:28px 28px 44px}
}
@media(max-width:900px){
  .gate-side{position:static; width:auto; padding:28px 24px 30px}
  .gate-copy{margin:18px 0 0; max-width:none}
  .gate-copy h2{font-size:26px}
  .gate-points{display:none}
  .gate-foot{display:none}
  .gate-form{margin:0; width:auto; padding:32px 20px}
  body.gate>.site-footer{margin-left:0}
  #gate{flex-direction:column}
}
@media(max-width:820px){
  #shell{flex-direction:column}
  #side{width:100%; flex:none; height:auto; position:sticky; top:0; z-index:20; border-right:0; border-bottom:1px solid rgba(255,255,255,.08)}
  #brand{padding:12px 16px}
  .brand-logo{height:30px}
  .brand-tag{display:none}
  #navtoggle{display:inline-flex; margin:0}
  nav.side-nav{display:none; padding:4px 10px 10px}
  nav.side-nav.open{display:block}
  nav.side-nav a.on::before{left:-10px}
  #who{display:none}
  #side.open #who{display:flex}
  #main{padding:20px 16px 44px}
  .grid,.grid.g3{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr; gap:0}
  .kv dt{padding-bottom:0; border-bottom:0}
  .kv dd{padding-top:2px}
  .doc-amt{margin-left:0; text-align:left}
  .doc-amt .v{font-size:26px}
  label:has(input[type="checkbox"]){padding-top:0}
  h1{font-size:23px}
  .form-actions{position:static; backdrop-filter:none}
  .files li .hint{margin-left:0}
  .table-wrap table{min-width:640px}
  .table-wrap table.stack-sm{min-width:0}
  body.gate main>h1{padding:24px 16px 0}
  body.gate main>.lede,body.gate main>.row{padding:0 16px}
}
/* A table whose cells hold form controls stacks each row on a narrow screen,
   so the controls are reachable without scrolling sideways. */
@media(max-width:820px){
  table.stack-sm thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm th, table.stack-sm td{display:block; width:100%}
  table.stack-sm tr{padding:12px 0; border-bottom:1px solid var(--rule-2)}
  table.stack-sm tr:last-child{border-bottom:0}
  table.stack-sm tbody th[scope="row"], table.stack-sm td{border:0; padding:4px 16px; min-width:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  #side,.site-footer,.btn,.form-actions,.dossier-side,.skip-link{display:none!important}
  #main{padding:0; max-width:none}
  .card,.hero{box-shadow:none; break-inside:avoid}
  body{background:#fff}
}