:root{
  --brand:#0d8f87;
  --brand-2:#0b6f78;
  --accent:#ff9f1c;
  --ink:#13213a;
  --muted:#617089;
  --line:#d8e2ec;
  --panel:#ffffff;
  --canvas:#f3f7fa;
  --good:#0b8756;
  --good-bg:#e7f7ef;
  --warn:#b66b00;
  --warn-bg:#fff4df;
  --bad:#c6281d;
  --bad-bg:#ffebe8;
  --shadow:0 10px 30px rgba(25,45,80,.08);
  --radius:18px;
  --font:Inter,Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font);color:var(--ink);background:var(--canvas)}
body{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.hidden{display:none!important}
/* grid-template-COLUMNS matters as much as the rows here. Without it the implicit column is
   `auto`, which sizes to the widest thing in the app — and the top bar's user switcher is a
   <select>, which sizes to its longest option. One long name ("Canopy Software Limited —
   administrator — Platform Administrator") therefore pushed the whole application to 1760px on a
   1440px screen, and `overflow:hidden` then clipped the right-hand side off every page with no
   scrollbar to get it back. minmax(0,1fr) lets the column shrink below its content instead. */
.app{height:100%;display:grid;grid-template-rows:72px 1fr 38px;grid-template-columns:minmax(0,1fr);overflow:hidden}
.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;z-index:30}
.brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.agency-logo{height:42px;max-width:220px;object-fit:contain}
.brand-fallback{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800}
.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:#fff;font-weight:900}
/* Flex items default to min-width:auto and refuse to shrink below their content. The top bar has
   to give way on a narrow window rather than push the page wider than the screen. */
.top-actions{display:flex;align-items:center;gap:10px;min-width:0}
.topbar>*{min-width:0}
.mode-switch{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:#f7fafc}
.mode-switch button{border:0;background:transparent;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;color:var(--muted)}
.mode-switch button.active{background:var(--ink);color:#fff}
.top-select,.top-search{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;min-height:40px;min-width:0}
/* A <select> is as wide as its longest option unless it is told otherwise. Names here are
   "Person — Role" and can be long, so cap it and let the text truncate. */
.top-select{max-width:300px;text-overflow:ellipsis}
.top-search{width:min(280px,25vw)}
.user-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:6px 10px;border-radius:14px;background:#fff}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
/* minmax(0,1fr), not 1fr: a 1fr track has an automatic minimum of min-content, so one wide table
   inside a module would push the shell past the window exactly as the top bar did. */
.main-shell{min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr)}
.main-shell.guided-shell{grid-template-columns:minmax(0,1fr)}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:16px 12px;overflow:auto}
.sidebar.hidden-side{display:none}
.sidebar-title{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:900;margin:8px 10px 12px}
.nav-group{display:grid;gap:5px}
.nav-item{width:100%;border:0;background:transparent;border-radius:13px;padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:left;color:#46546b;font-size:13px;font-weight:700;position:relative}
.nav-item:hover{background:#f1f7f7;color:var(--ink)}
.nav-item.active{background:linear-gradient(90deg,rgba(13,143,135,.14),rgba(13,143,135,.05));color:var(--brand-2)}
.nav-num{width:25px;height:25px;border-radius:8px;background:#eef3f6;display:grid;place-items:center;font-size:10px;font-weight:900;flex:0 0 auto}
.nav-item.active .nav-num{background:var(--brand);color:#fff}
.content{min-width:0;min-height:0;overflow:auto;padding:24px 26px 88px}
.content.guided{padding:24px 30px 96px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--brand-2);font-weight:900}
h1{font-size:28px;margin:4px 0 6px;line-height:1.1}
h2{font-size:22px;margin:0}
h3{font-size:17px;margin:0}
.subtle{color:var(--muted);font-size:13px;line-height:1.5}
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px}
.action-tile{position:relative;border:1px solid rgba(30,55,85,.14);outline:1px solid rgba(255,255,255,.9);outline-offset:-4px;background:linear-gradient(180deg,#fdfefe,#f3f7f9);border-radius:20px;padding:22px;text-align:left;min-height:170px;box-shadow:0 10px 26px rgba(30,55,85,.10),0 2px 6px rgba(30,55,85,.06);transition:.18s ease;overflow:visible}
.action-tile:hover,.action-tile:focus{transform:translateY(-3px);border-color:rgba(13,143,135,.55);background:linear-gradient(180deg,#fff,#eef5f6);box-shadow:0 16px 34px rgba(30,55,85,.16),0 3px 8px rgba(30,55,85,.08);outline-color:rgba(13,143,135,.25)}
.tile-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,rgba(13,143,135,.15),rgba(255,159,28,.15));display:grid;place-items:center;font-size:23px;margin-bottom:16px}
.tile-title{font-weight:900;font-size:16px;margin-bottom:7px}
.tile-copy{font-size:12px;line-height:1.5;color:var(--muted)}
.help-bubble{position:absolute;left:18px;right:18px;bottom:calc(100% + 10px);background:var(--ink);color:#fff;border-radius:13px;padding:11px 13px;font-size:11px;line-height:1.45;opacity:0;transform:translateY(4px);pointer-events:none;transition:.15s;z-index:80;box-shadow:var(--shadow)}
.help-bubble:after{content:"";position:absolute;left:24px;top:100%;border:7px solid transparent;border-top-color:var(--ink)}
.action-tile:hover .help-bubble,.action-tile:focus .help-bubble,.has-help:hover>.help-bubble,.has-help:focus-within>.help-bubble{opacity:1;transform:translateY(0)}
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.kpi strong{display:block;font-size:25px;margin-top:7px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 14px rgba(25,45,80,.035)}
.card-pad{padding:20px}
.section-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--line);background:#fff}
table{border-collapse:collapse;width:100%;font-size:12px}
th{position:sticky;top:0;background:#f6f9fb;text-align:left;padding:12px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
td{padding:12px;border-top:1px solid var(--line)}
tr.clickable:hover{background:#f1f8f7;cursor:pointer}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900}
.badge.good{background:var(--good-bg);color:var(--good)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.badge.neutral{background:#eef2f6;color:#536176}
.btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;font-weight:850;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px}
.btn:hover{box-shadow:0 4px 12px rgba(20,40,70,.08)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#1b263b}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.footer{height:38px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;z-index:60}
.powered{display:flex;align-items:center;gap:7px;text-decoration:none;font-size:10px;color:#647189;font-weight:700}
.powered svg{height:20px;width:20px}
.version-marker{position:fixed;right:12px;bottom:43px;background:rgba(255,255,255,.93);border:1px solid var(--line);border-radius:8px;padding:4px 7px;text-align:center;z-index:100;pointer-events:none;box-shadow:0 2px 8px rgba(20,40,70,.08)}
.version-marker small{display:block;font-size:7px;letter-spacing:.12em;color:#8490a2;font-weight:900}
.version-marker strong{display:block;font-size:9px;color:#36435a}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,23,41,.45);display:grid;place-items:center;z-index:200;padding:18px}
.modal{background:var(--canvas);width:min(1500px,98vw);height:min(940px,96vh);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.22);display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden}
.modal.small{width:min(760px,96vw);height:auto;max-height:92vh;display:flex;flex-direction:column}
.modal-head{background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.close-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:900}
.step-strip{display:grid;grid-template-columns:repeat(var(--steps),1fr);gap:7px;background:#fff;padding:8px;border-bottom:1px solid var(--line);overflow:auto}
.step-tab{border:1px solid var(--line);background:#f7f9fb;border-radius:14px;min-width:115px;padding:9px;display:flex;align-items:center;gap:8px;text-align:left;color:#7d899b}
.step-tab.complete{background:var(--good-bg);border-color:#bfe2d0;color:var(--good)}
.step-tab.current{border-color:var(--brand);box-shadow:0 0 0 2px rgba(13,143,135,.10);color:var(--ink)}
.step-circle{width:27px;height:27px;border-radius:9px;background:#eaf0f4;display:grid;place-items:center;font-size:10px;font-weight:900;flex:0 0 auto}
.step-tab.complete .step-circle{background:var(--good);color:#fff}
.step-tab.current .step-circle{background:var(--brand);color:#fff}
.step-tab>span:last-child{min-width:0;overflow:hidden}
.step-label{display:block;font-size:10px;font-weight:900;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.step-state{display:block;font-size:8px;margin-top:3px;white-space:normal;overflow-wrap:anywhere}
.modal-body{min-height:0;overflow:auto;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}
.modal-body.no-side{grid-template-columns:1fr}
.form-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.form-intro{margin-bottom:18px}
.form-intro h2{color:var(--accent);font-size:25px;margin-top:6px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{position:relative;border:1px solid var(--line);background:#fbfcfd;border-radius:16px;padding:13px;min-width:0}
.field.full{grid-column:1/-1}
/* The brand's accent, not a hardcoded orange. This is a white-label product: an agency sets its
   own colours and every form label in the platform was ignoring them. applyBrand() writes
   --accent per tenant, so the labels now follow whatever that agency chose. */
.field label{display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--accent);font-size:11px;font-weight:900;margin-bottom:10px}
.mandatory{font-size:7px;color:var(--bad);background:var(--bad-bg);padding:4px 6px;border-radius:999px;white-space:nowrap}
.field input,.field select,.field textarea{width:100%;border:1px solid #cad7e3;background:#fff;border-radius:11px;padding:11px 12px;min-height:43px;outline:none}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(13,143,135,.09)}
.field-help{font-size:10px;color:var(--muted);margin-top:7px;line-height:1.4}
.inline-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.check-row{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:14px;padding:13px;background:#fff}
.check-row input{width:18px;height:18px;accent-color:var(--brand)}
.status-panel{align-self:start;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;position:sticky;top:0}
.status-panel h3{color:var(--accent);font-size:14px;margin-bottom:12px}
.status-list{display:grid;gap:8px;max-height:54vh;overflow:auto}
.status-item{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;border-radius:12px;padding:9px;background:#f2f5f7;border:1px solid var(--line)}
.status-item .status-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:900}
.status-item.good{background:var(--good-bg);border-color:#c3e5d3}
.status-item.good .status-icon{background:var(--good);color:#fff}
.status-item.bad{background:var(--bad-bg);border-color:#f3c2bd}
.status-item.bad .status-icon{background:var(--bad);color:#fff}
.status-title{font-size:10px;font-weight:900;color:#d98914}
.status-sub{font-size:8px;color:var(--muted);margin-top:2px}
.stop-box,.ready-box{margin-top:12px;border-radius:13px;padding:12px;font-size:10px;line-height:1.5}
.stop-box{background:var(--bad-bg);border:1px solid #efb8b2;color:#7b241c}
.ready-box{background:var(--good-bg);border:1px solid #bfe0cd;color:#135b40}
.stop-bar{background:var(--bad);color:#fff;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:900;margin-bottom:8px}
.modal-foot{background:#fff;border-top:1px solid var(--line);padding:11px 16px;display:flex;justify-content:space-between;align-items:center}
.ref-card,.employment-card{border:1px solid var(--line);border-radius:15px;padding:14px;background:#fff;margin-top:10px}
.repeat-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.repeat-head strong{font-size:12px;color:#e8870b}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mini-grid.four{grid-template-columns:repeat(4,1fr)}
.mini-field label{display:block;font-size:9px;color:#526078;font-weight:800;margin-bottom:5px}
.mini-field input,.mini-field select{width:100%;border:1px solid #cbd8e4;border-radius:9px;padding:9px;background:#fff}
.gap-panel{margin-top:12px;border:1px solid #a9ded7;background:#effaf8;border-radius:14px;padding:12px;color:#167268;font-size:11px}
.gap-panel.bad{border-color:#efb6af;background:var(--bad-bg);color:#8b2b22}
.chip-list{display:grid;gap:7px}
.chip-row{display:flex;align-items:center;justify-content:space-between;border:1px solid #cad7e3;border-radius:10px;padding:9px 10px;background:#fff;font-size:11px}
.add-row{display:flex;gap:8px}
.add-row select,.add-row input{flex:1}
.map-card{grid-column:1/-1;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;display:grid;grid-template-columns:220px 1fr;min-height:300px}
.map-copy{padding:16px}
.map-stage{position:relative;background:#e8f2ec;overflow:hidden}
.map-stage svg{width:100%;height:100%;display:block}
.map-controls{position:absolute;left:10px;top:10px;display:grid;gap:4px}
.map-controls button{width:30px;height:30px;border:1px solid #cbd8e4;background:#fff;border-radius:7px;font-weight:900}
.pay-summary{border:1px solid #9edbd4;background:#f3fbfa;border-radius:16px;padding:14px;margin-top:14px}
.pay-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #d9eeeb;font-size:11px}
.pay-line:last-child{border:0}
.pay-line.total{font-size:15px;font-weight:900;color:var(--brand-2)}
.nmw-banner{margin-top:10px;border-radius:12px;padding:12px;font-size:11px;font-weight:800}
.nmw-banner.pass{background:var(--good-bg);color:var(--good);border:1px solid #bde3ce}
.nmw-banner.fail{background:var(--bad-bg);color:var(--bad);border:1px solid #efb8b2}
.kid-preview{background:#596273;padding:20px;overflow:auto}
.a4{width:794px;min-height:1123px;margin:0 auto 20px;background:#fff;padding:58px 60px;box-shadow:0 6px 24px rgba(0,0,0,.22);font-family:Arial,sans-serif;color:#111}
.kid-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:17px}
.kid-head h2{font-size:23px}
.kid-logo{max-height:62px;max-width:180px}
.kid-section-title{text-align:center;font-weight:800;margin:22px 0 12px}
.kid-table{width:100%;border-collapse:collapse;font-size:11px}
.kid-table td,.kid-table th{border:1px solid #111;padding:9px;vertical-align:top}
.kid-table th{background:#fff;color:#111;text-transform:none;font-size:11px;position:static}
.kid-note{font-size:10px;line-height:1.55;margin:18px 0}
.kid-footer{font-size:8px;color:#777;text-align:right;margin-top:24px}
.access-layout{display:grid;grid-template-columns:240px 1fr;gap:16px}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800}
.tab.active{background:var(--ink);color:#fff}
.permission-matrix{overflow:auto}
.permission-matrix table{min-width:850px}
.toggle{position:relative;width:38px;height:22px;border-radius:999px;background:#ccd5dd;display:inline-block}
.toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.toggle span{position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.15s;pointer-events:none}
.toggle input:checked+span{left:19px}
.toggle input:focus-visible+span{outline:3px solid rgba(8,125,120,.3);outline-offset:3px}
.toggle:has(input:checked){background:var(--brand)}
.question-box{background:linear-gradient(135deg,#fff,#f1f9f8);border:1px solid #b9dfda;border-radius:20px;padding:20px}
.question-input{display:flex;gap:9px}
.question-input input{flex:1;border:1px solid #b9cbd8;border-radius:13px;padding:14px}
.result-explain{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:15px}
.toast{position:fixed;right:20px;bottom:80px;background:var(--ink);color:#fff;border-radius:13px;padding:12px 16px;z-index:400;font-size:12px;box-shadow:var(--shadow)}
@media(max-width:1180px){
 .tile-grid{grid-template-columns:repeat(3,1fr)}
 .kpi-grid{grid-template-columns:repeat(3,1fr)}
 .main-shell{grid-template-columns:220px 1fr}
 .modal-body{grid-template-columns:1fr 270px}
}
@media(max-width:860px){
 body{overflow:auto}
 .app{min-height:100%;height:auto;grid-template-rows:auto 1fr 38px}
 .topbar{height:auto;min-height:70px;flex-wrap:wrap;gap:8px;padding:10px}
 .top-search{display:none}
 .main-shell{grid-template-columns:1fr}
 .sidebar{display:none}
 .content{padding:18px 14px 90px}
 .tile-grid{grid-template-columns:repeat(2,1fr)}
 .kpi-grid{grid-template-columns:repeat(2,1fr)}
 .modal-backdrop{padding:0}
 .modal{width:100vw;height:100vh;border-radius:0}
 .modal-body{grid-template-columns:1fr;padding:12px}
 .status-panel{position:relative}
 .field-grid,.field-grid.three,.inline-fields,.mini-grid,.mini-grid.four{grid-template-columns:1fr}
 .map-card{grid-template-columns:1fr}
 .map-copy{min-height:130px}
 .map-stage{min-height:300px}
 .section-grid,.access-layout{grid-template-columns:1fr}
}
@media(max-width:560px){
 .tile-grid{grid-template-columns:1fr}
 .top-actions .mode-switch{display:none}
 .agency-logo{max-width:150px}
 h1{font-size:23px}
 .a4{width:100%;min-height:auto;padding:28px}
}
@media print{
 .topbar,.sidebar,.footer,.version-marker,.modal-head,.step-strip,.modal-foot{display:none!important}
 body,.app,.main-shell,.content,.modal-backdrop,.modal,.modal-body,.kid-preview{display:block!important;background:#fff!important;height:auto!important;overflow:visible!important;padding:0!important}
 .a4{box-shadow:none;margin:0;page-break-after:always}
}


/* Version 18 compliance centre */
.compliance-legal-note{display:flex;gap:14px;align-items:flex-start;background:#eef8f7;border:1px solid #b8ded9;border-radius:15px;padding:13px 15px;margin-bottom:16px;font-size:11px;line-height:1.45;color:#285c58}
.compliance-legal-note strong{white-space:nowrap;color:#0a716b}
.compliance-policy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.compliance-policy>div{border:1px solid var(--line);border-radius:12px;padding:11px;background:#f8fafb}.compliance-policy span{display:block;font-size:9px;color:var(--muted);font-weight:800}.compliance-policy strong{display:block;margin-top:3px;font-size:13px}
.provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.provider-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:15px;min-width:0}
.arrival-hero{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:15px;padding:14px;background:#f8fbfc;margin-bottom:12px}.arrival-avatar{width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900}
@media(max-width:980px){.provider-grid{grid-template-columns:1fr}.compliance-policy{grid-template-columns:1fr}.compliance-legal-note{display:block}.compliance-legal-note strong{display:block;margin-bottom:5px}}

/* Version 18 terms preview, deferred acceptance and nested modal controls */
.nested-backdrop{z-index:320;background:rgba(8,20,36,.58)}
.nested-modal{width:min(1180px,96vw);height:min(92vh,980px)}
.terms-preview-body{min-height:0;overflow:auto;background:#596273;padding:18px}
.pdf-preview-frame{display:block;width:100%;height:calc(92vh - 88px);min-height:680px;border:0;background:#fff;border-radius:10px}
.terms-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.status-item.pending{background:var(--warn-bg);border-color:#efd8a7}
.status-item.pending .status-icon{background:var(--warn);color:#fff}
.progress-box{margin-top:12px;border-radius:13px;padding:12px;font-size:10px;line-height:1.5;background:var(--warn-bg);border:1px solid #efd8a7;color:#75500d}
.terms-page h2,.terms-page h3{margin:0 0 6px}
@media(max-width:860px){.terms-action-grid{grid-template-columns:1fr 1fr}.pdf-preview-frame{min-height:560px;height:75vh}}


/* Version 18 quality-assured interaction and drill-down polish */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 28%,transparent);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.56}
.tab:disabled{opacity:1;cursor:default;background:var(--ink);color:#fff}
.clickable{cursor:pointer;transition:background .14s,transform .14s}
.clickable:hover{background:#f1faf8!important}
.action-tile:not(.static-tile):hover{transform:translateY(-2px);box-shadow:0 13px 32px rgba(20,50,70,.12)}
.static-tile{cursor:default}
.search-result-row{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px;margin-bottom:9px;text-align:left;color:var(--ink)}
.search-result-row:hover{border-color:var(--brand);background:#f5fbfa}
.search-result-row span{font-size:11px;color:var(--muted)}
.record-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.provider-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:15px;min-width:0}
.provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.terms-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
@media(max-width:860px){.record-summary-grid,.provider-grid,.terms-action-grid{grid-template-columns:1fr}.step-strip{scroll-snap-type:x mandatory}.step-tab{scroll-snap-align:start}}

/* V18 Legal & Contracts */
.legal-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.legal-template-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px;text-align:left;color:inherit;min-height:180px;transition:.15s;overflow:hidden}.legal-template-card:hover{border-color:var(--brand);box-shadow:0 12px 28px rgba(13,143,135,.10);transform:translateY(-1px)}.legal-template-card p{font-size:11px;line-height:1.55;color:var(--muted)}.legal-preview-frame{background:#eef2f5;border:1px solid var(--line);border-radius:15px;padding:16px;max-height:66vh;overflow:auto}.legal-preview-frame .page{width:min(100%,800px)!important;min-height:auto!important;margin:0 auto!important;padding:28px!important;box-shadow:none!important}.legal-control-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}@media(max-width:1100px){.legal-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.legal-card-grid,.legal-control-grid{grid-template-columns:1fr}.legal-template-card{min-height:0}}


/* V21 integration styles */
/* Module 27 — Applicant Parking & CV Intake */
.applicant-engine-banner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;background:linear-gradient(112deg,var(--brand-2) 0%,var(--brand) 100%);border-radius:20px;padding:17px 20px;margin-bottom:18px;color:#fff;box-shadow:0 16px 36px rgba(18,38,58,.14);overflow:hidden}
.applicant-engine-banner:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:24%;top:-150px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%);pointer-events:none}.applicant-engine-brand{display:flex;align-items:center;gap:12px;min-width:238px;position:relative;z-index:1}.applicant-engine-brand strong{display:block;font-size:17px}.applicant-engine-brand span:not(.applicant-intake-mark){display:block;font-size:10px;color:rgba(255,255,255,.78);margin-top:3px;letter-spacing:.04em}.applicant-intake-mark{width:45px;height:45px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24)}.applicant-intake-mark svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}.applicant-engine-flow{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;position:relative;z-index:1}.applicant-engine-flow span{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);padding:7px 9px;border-radius:999px;font-size:9px;font-weight:850;white-space:nowrap}.applicant-engine-flow b{color:#fff;opacity:.8}.engine-pill{display:flex;align-items:center;gap:6px;border-radius:999px;padding:8px 11px;font-size:9px;font-weight:900;white-space:nowrap;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);position:relative;z-index:1}.engine-pill i{width:8px;height:8px;border-radius:50%;background:#f0ad24;box-shadow:0 0 0 4px rgba(240,173,36,.12)}.engine-pill.online i{background:#19d17f;box-shadow:0 0 0 4px rgba(25,209,127,.13)}
.applicant-kpis{margin-bottom:16px}.applicant-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}.applicant-toolbar .tabs{margin:0}.applicant-filters{display:flex;gap:8px;min-width:min(480px,45%)}.applicant-filters select,.applicant-filters input{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 11px;font:inherit;font-size:11px;min-width:0}.applicant-filters input{flex:1}.applicant-table td{vertical-align:middle}.applicant-bottom{margin-top:16px}.applicant-control-list{display:grid;gap:8px;margin-top:13px;font-size:11px;color:#385066}.applicant-control-list span:before{color:var(--brand);font-weight:900}.integration-chain{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}.integration-chain button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font-size:10px;font-weight:850;color:var(--ink)}.integration-chain button:hover{border-color:var(--brand);color:var(--brand-2)}.integration-chain b{color:var(--muted)}.empty-parking{padding:32px;text-align:center;display:grid;gap:5px;color:var(--muted)}.empty-parking strong{color:var(--ink)}
.applicant-modal{width:min(1320px,96vw);height:min(92vh,980px)}.applicant-modal-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;padding:16px;overflow:hidden;min-height:0}.applicant-review-main,.applicant-review-side{min-height:0;overflow:auto}.applicant-review-main{display:grid;gap:12px;padding-right:2px}.applicant-review-side{display:grid;align-content:start;gap:12px}.applicant-job-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#f6fbff,#f2f8ff);border:1px solid #dce7f6;border-radius:16px;padding:14px 16px}.applicant-job-strip div{display:grid;gap:3px}.applicant-job-strip span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#64758c}.applicant-job-strip strong{font-size:14px}.applicant-job-strip small{color:var(--muted)}.duplicate-warning{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;background:#fff8e5;border:1px solid #edcf7b;border-radius:15px;padding:13px 15px;color:#6e4e00}.duplicate-warning strong{grid-row:1/3}.duplicate-warning span{font-size:11px;font-weight:850}.duplicate-warning small{font-size:9px}.card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.extract-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}.extract-field{display:grid;grid-template-columns:1fr auto;gap:5px;border:1px solid var(--line);border-radius:13px;padding:10px;background:#fbfcfd;min-width:0}.extract-field>span:first-child{grid-column:1/-1;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.extract-field strong{font-size:11px;overflow-wrap:anywhere}.extract-field .badge{font-size:8px;padding:3px 6px}.extract-summary{margin-top:10px;border-left:3px solid var(--brand);padding:8px 12px;background:#f8fbfb}.extract-summary span{font-size:8px;font-weight:900;text-transform:uppercase;color:var(--muted)}.extract-summary p{margin:4px 0 0;font-size:11px;line-height:1.5}.tag-cloud{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.tag-cloud span{background:#eef5f9;border:1px solid #dce8ef;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:750}.tag-cloud .muted-tag{color:var(--muted)}.simple-lines{display:grid;gap:6px;margin-top:9px;font-size:10px}.employment-item{display:grid;gap:3px;padding:10px 0;border-bottom:1px solid var(--line)}.employment-item:last-child{border-bottom:0}.employment-item span{font-size:10px;color:#42566d}.employment-item small{font-size:9px;color:var(--muted)}.claim-list{display:grid;gap:8px;margin-top:11px}.claim-list>div{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:9px}.claim-list strong{font-size:10px}.claim-list span:last-child{font-size:9px;color:var(--muted)}.file-stack{display:grid;gap:8px;margin-top:11px}.file-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:9px}.file-icon{width:36px;height:36px;display:grid;place-items:center;background:#eef4ff;color:#193e9b;border-radius:9px;font-size:9px;font-weight:950}.file-row div{display:grid;gap:2px;min-width:0}.file-row strong{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-row small{font-size:8px;color:var(--muted)}.timeline-mini{display:grid;gap:10px;margin-top:12px}.timeline-mini>div{display:grid;grid-template-columns:10px 1fr;gap:8px}.timeline-mini i{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#f500b8,#00d7ef);margin-top:3px}.timeline-mini span{display:grid;gap:2px}.timeline-mini strong{font-size:9px}.timeline-mini small{font-size:8px;color:var(--muted)}.action-stack{display:grid;gap:8px;margin-top:12px}.action-stack .btn{width:100%}.danger-outline{border-color:#efb7b7!important;color:#a52b2b!important;background:#fff!important}.full-btn{width:100%;margin-top:10px}.processing-panel{display:grid;gap:5px;border:1px dashed #bdccda;border-radius:14px;padding:18px;margin-top:12px;background:#fafcfd}.processing-panel span{font-size:10px;color:var(--muted);line-height:1.5}.candidate-link-list{display:grid;gap:8px;margin-top:13px}.candidate-link-list button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px}.candidate-link-list button:hover{border-color:var(--brand);background:#f7fbfb}.candidate-link-list span:first-child{display:grid;gap:2px}.candidate-link-list strong{font-size:11px}.candidate-link-list small{font-size:9px;color:var(--muted)}
.upload-drop{display:grid;place-items:center;text-align:center;gap:5px;border:2px dashed #a7bfd4;border-radius:18px;background:linear-gradient(135deg,#f8fbff,#f8faff);padding:20px}.upload-drop .upload-mark{width:56px}.upload-drop strong{font-size:15px}.upload-drop span{font-size:9px;color:var(--muted)}.upload-drop input{margin-top:8px;max-width:100%}.parking-note{margin-top:14px;border-radius:13px;background:#eef7ff;border:1px solid #cadff4;color:#365b78;padding:11px 13px;font-size:10px;line-height:1.5}
@media(max-width:1150px){.applicant-engine-banner{grid-template-columns:auto 1fr}.engine-pill{justify-self:end}.applicant-engine-flow{grid-column:1/-1;justify-content:flex-start;overflow:auto}.applicant-modal-body{grid-template-columns:minmax(0,1fr) 300px}.extract-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.applicant-toolbar{display:grid}.applicant-filters{min-width:0;width:100%}.applicant-engine-banner{grid-template-columns:1fr}.engine-pill{justify-self:start}.applicant-engine-flow{display:none}.applicant-modal-body{grid-template-columns:1fr;overflow:auto}.applicant-review-main,.applicant-review-side{overflow:visible}.extract-grid{grid-template-columns:1fr}.claim-list>div{grid-template-columns:1fr}.applicant-job-strip{align-items:flex-start;flex-direction:column}}

.status-jump{width:100%;text-align:left;border:1px solid transparent;font:inherit;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.status-jump:hover,.status-jump:focus{transform:translateY(-1px);box-shadow:0 8px 22px rgba(14,36,59,.09);outline:2px solid rgba(13,143,135,.2)}.status-arrow{font-size:22px;font-weight:900;opacity:.55}.careers-modal{max-width:1180px}.careers-preview{padding:0 0 22px;overflow:auto}.careers-hero{background:linear-gradient(135deg,var(--careers-brand),#11283f);color:#fff;padding:34px;border-radius:16px;margin:18px}.careers-hero h1{font-size:30px;margin:0 0 8px}.careers-jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 18px}.career-job{border:1px solid var(--line);background:#fff;border-radius:16px;padding:18px}.career-job h3{font-size:18px;margin:10px 0}.career-job p{font-size:12px;line-height:1.55;color:var(--muted)}.career-meta{font-size:11px;font-weight:800;margin:12px 0;color:var(--ink)}.powered-inline{text-align:center;padding:22px 18px 0;color:var(--muted);font-size:10px}.branch-doc-identity{font-size:10px;color:var(--muted)}@media(max-width:900px){.careers-jobs{grid-template-columns:1fr 1fr}}@media(max-width:560px){.careers-jobs{grid-template-columns:1fr}.careers-hero h1{font-size:24px}}

/* Templace V22 — role-driven compliance onboarding */
.compliance-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.requirement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 18px}
.requirement-card{background:#fff;border:1px solid var(--line,#dfe6ea);border-left:4px solid #d5dde3;border-radius:14px;padding:14px;box-shadow:0 4px 18px rgba(17,38,58,.04)}
.requirement-card.verified{border-left-color:var(--good,#198754);background:#fbfffc}
.requirement-top,.requirement-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:10px 0}
/* The heading's text block may grow; its buttons may not shrink. Without this the prose
   squeezes the action until its label wraps — "+ Add a" over "provider" — which is the
   same squashed-wrapper fault as the client wizard's field-grid and the evidence row. Fixed
   on the container, so every screen using this heading inherits it. */
.requirement-top>.btn-row,.requirement-heading>.btn-row{flex:0 0 auto}
.requirement-top>.btn-row .btn,.requirement-heading>.btn-row .btn{white-space:nowrap}
.requirement-top>div:first-child,.requirement-heading>div:first-child{min-width:0}
.requirement-top h4{margin:6px 0 2px;font-size:1rem}
.conduct-card{margin:14px 0;border-left:4px solid var(--primary,#0d8f87)}
.subject-row,.evidence-row{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(90px,.5fr) minmax(180px,1fr) auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line,#e5eaee)}
.evidence-row{grid-template-columns:minmax(220px,1.6fr) 150px minmax(150px,1fr) 140px minmax(180px,1fr) auto auto}
.evidence-list{margin-top:12px}.search-add,.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.search-add input,.search-add select,.filter-row input,.filter-row select{flex:1;min-width:220px}
.qualification-results{display:grid;gap:6px;max-height:330px;overflow:auto;padding:8px;border:1px solid var(--line,#dfe6ea);border-radius:12px;background:#f8fafb;margin:10px 0}
.qualification-result{display:flex;flex-direction:column;text-align:left;gap:3px;padding:10px;border:1px solid transparent;border-radius:9px;background:#fff;cursor:pointer;color:inherit}
.qualification-result:hover{border-color:var(--primary,#0d8f87);box-shadow:0 2px 10px rgba(13,143,135,.1)}.qualification-result span{font-size:.82rem;color:#687785}
.draft-compliance-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;margin:10px 0 14px;border-radius:12px;background:#eef9f8;border:1px solid #c6e7e3}
.modal-scroll{padding:18px;overflow:auto}.btn-row.end{justify-content:flex-end;margin-top:16px}.modal-home{margin-left:auto}
.text-link{color:var(--primary,#0d8f87);text-decoration:none;font-weight:700;font-size:.86rem}.text-link:hover{text-decoration:underline}
@media(max-width:900px){.compliance-split,.requirement-grid{grid-template-columns:1fr}.subject-row,.evidence-row{grid-template-columns:1fr}.draft-compliance-banner{align-items:flex-start;flex-direction:column}}

/* ---- V22.1 hardening build: storage health, backup, evidence and pagination ---- */
.footer{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.storage-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line,#d9e2ec);background:#fff;color:var(--muted,#5b6b7c);border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;cursor:pointer;line-height:1.4}
.storage-pill:hover,.storage-pill:focus-visible{border-color:var(--brand,#0d8f87);color:var(--ink,#13213a);outline:none}
.storage-pill.warn{border-color:#e0a100;color:#8a6100;background:#fff8e5}
.storage-pill.danger{border-color:#c62828;color:#8e1b1b;background:#fdecec;font-weight:600}
.storage-banner{position:sticky;top:0;z-index:80;padding:10px 18px;font-size:14px;line-height:1.5;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.storage-banner.warn{background:#fff3cd;color:#6b4e00;border-bottom:1px solid #e6c65c}
.storage-banner.danger{background:#f8d7da;color:#6f1a1f;border-bottom:1px solid #e3a0a7}
.btn.tiny{padding:3px 9px;font-size:12px;line-height:1.4;min-height:0}
table.kv{width:100%;border-collapse:collapse;margin-top:8px}table.kv td{padding:6px 4px;border-bottom:1px solid var(--line,#e6ebf0);vertical-align:top}table.kv td:first-child{color:var(--muted,#5b6b7c);width:46%}
.show-more-row td{text-align:center;padding:12px}
.modal:focus{outline:none}
@media (max-width:720px){.storage-banner{font-size:13px}.storage-pill{font-size:11px}}

/* V22.2 — role qualification drop-down and gov.uk KID layout */
.role-qual-panel{background:#f4f8f8;border:1px solid #d7e3e2;border-radius:12px;padding:12px 14px;margin:0 0 14px}.role-qual-panel h4{margin:0 0 4px;font-size:14px}
.role-qual-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.role-qual-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #cdd9d8;background:#fff;border-radius:999px;padding:4px 10px 4px 4px;font-size:12px;cursor:pointer;text-align:left}.role-qual-chip em{font-style:normal;color:#9a6700;font-size:10px}.role-qual-chip.linked{background:#e5f5ee;border-color:#9ad4b8;cursor:default}.role-qual-chip .badge{font-size:9px;padding:2px 6px}
.kid-subhead{margin:18px 0 6px;font-size:15px}
.kid-standards{margin-top:14px;border:1px solid #d7e3e2;border-radius:12px;padding:12px 14px;background:#f7faf9}.kid-standards.fail{border-color:#f1b8b8;background:#fff6f6}.kid-check-list{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:18px;font-size:12px}.kid-check-list li{break-inside:avoid;padding:2px 0}.kid-check-list li.fail{color:#b42318;font-weight:600}.kid-check-list li.ok{color:#1b5e3f}
.kid-page{font-family:"Open Sans",Arial,sans-serif;font-size:11px;line-height:1.45;position:relative;padding:48px 56px 40px}.kid-page .kid-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:14px;margin-bottom:14px}.kid-page .kid-head h2{font-size:24px;margin:0 0 4px;font-weight:800;letter-spacing:.2px}.kid-sub{font-size:16px;font-weight:700}.kid-logo-text{color:#fff;font-weight:800;font-size:18px;padding:14px 22px;border-radius:3px;max-width:200px;text-align:center}
.kid-purpose{font-weight:700;font-size:11px;margin:0 0 10px}.kid-para{font-size:10.5px;margin:0 0 9px;color:#222}.kid-reg{color:#555}.kid-page a{color:#2a9d8f;text-decoration:none}
.kid-page .kid-section-title{text-align:center;font-weight:800;font-size:12px;margin:14px 0 8px;letter-spacing:.2px}.kid-page .kid-table{width:100%;border-collapse:collapse;font-size:10.5px;margin-bottom:6px}.kid-page .kid-table td{border:1px solid #111;padding:7px 9px;vertical-align:top}.kid-page .kid-table td.kid-label{width:50%;color:#333}.kid-pay-table{font-size:9.5px;line-height:1.3}.kid-pay-table td{padding:4px 7px}.kid-pay-table td.kid-num{width:16px;text-align:center;font-weight:700}.kid-pay-table td.kid-label{width:32%}.kid-pay-table td.kid-amount{width:11%;white-space:nowrap;font-weight:600}.kid-pay-table td.kid-note-cell{font-size:8.6px;color:#333}
.kid-example-table{font-size:9.8px}.kid-example-table td{padding:4px 8px}.kid-example-table td.kid-ref{width:60px;text-align:center;color:#555}.kid-example-table tr.kid-example-head td{background:#f1f1f1;font-weight:700;font-size:9.5px;text-transform:uppercase}.kid-example-table tr.kid-example-total td{font-weight:800;background:#fafafa}
.kid-page .kid-footer{position:absolute;right:56px;bottom:18px;font-size:8px;color:#888}.kid-further{margin:0 0 0 18px;padding:0;font-size:9.8px}.kid-page-2{padding-top:34px}.kid-page .nmw-banner{margin:8px 0;font-size:10px;padding:6px 10px}.kid-page-2 .kid-para{font-size:9.6px;margin:0 0 6px}
@media print{.kid-page{box-shadow:none}}

/* ---- V22.3 branding studio, HQ control panel, login gate ---- */
.logo-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:12px}
.logo-slot{border:1px dashed #c9d3dc;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fbfcfd}
.logo-slot label{font-size:12px;font-weight:700;color:#2d3b4e}
.logo-slot-preview{height:110px;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#eef2f5 0 25%,#fff 0 50%) 50%/16px 16px;border-radius:8px;overflow:hidden}
.logo-slot-preview img{max-width:100%;max-height:100%;object-fit:contain}
.brand-logo-text{display:inline-block;color:#fff;font-weight:800;padding:6px 10px;border-radius:8px;font-size:13px}
.hq-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 18px;background:linear-gradient(90deg,#f500b8,#5d2cff,#00cde8);color:#fff;font-size:13px}
.hq-banner .btn{background:#fff;color:#2d1b69;border-color:#fff;padding:5px 10px}
.chip-btn{border:1px solid #d9e1e7;background:#fff;border-radius:8px;padding:3px 7px;margin-left:8px;cursor:pointer;font-size:13px;min-width:28px;min-height:28px;flex-shrink:0}
.login-modal .modal-head{border-bottom:3px solid #5d2cff}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th,.data-table td{padding:8px 10px;border-bottom:1px solid #e6ebf0;text-align:left;vertical-align:top}
.data-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#5d6b7a;background:#f7f9fb}
.data-table .num{text-align:right;white-space:nowrap}
.row-warn td{background:#fff8ec}.row-muted td{opacity:.55}
.actions-cell{white-space:nowrap}.actions-cell .btn{padding:4px 8px;font-size:12px;margin:2px 4px 2px 0}
/* A link carrying .btn — "Route", "Open in Maps" — otherwise draws as blue underlined text inside a
   button box, which reads as neither one thing nor the other. */
a.btn{text-decoration:none;color:inherit}
a.btn:hover{border-color:var(--brand,#0d8f87)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:800}
.btn.danger:hover{background:#8e1b1b;border-color:#8e1b1b;color:#fff}
.table-wrap{overflow:auto;margin-top:10px}
.check-row{display:flex;gap:8px;align-items:center;font-size:13px;margin:10px 0}
.money-input{display:flex;align-items:center;gap:6px}.money-input span{color:#5d6b7a}
.field-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.field-grid.three{grid-template-columns:1fr}}

/* ---- 22.3 Templace brand assets ---- */
.footer .footer-mark{height:22px;width:auto;vertical-align:middle}
.hq-brandbar{display:flex;align-items:center;gap:18px;padding:14px 18px;margin:0 0 14px;background:#fff;border:1px solid #e6ebf0;border-radius:14px;box-shadow:0 6px 18px #0f1f3a0d}
.hq-brandbar-text{flex:1;display:flex;flex-direction:column;gap:3px;font-size:12px;color:#5d6b7a}
.hq-brandbar-text strong{font-size:15px;color:#14263b}
.hq-banner-mark{height:22px;width:auto;margin-right:10px;vertical-align:middle}
.kid-powered-mark{height:11px;width:auto;vertical-align:middle;margin:0 2px 0 4px}
.brand-asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.brand-asset{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:1px solid #e6ebf0;border-radius:12px;background:#fff;text-decoration:none;color:#2d3b4e;font-size:12px;font-weight:600}
.brand-asset img{max-width:100%;height:64px;object-fit:contain}
.brand-asset.on-dark{background:#0b1020;color:#fff}
.templace-wordmark-text{font-weight:900;font-size:18px;background:linear-gradient(90deg,#f500b8,#5d2cff,#00cde8);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- 22.3.1 banner rows, email address control, remote support ---- */
.app.with-banner{grid-template-rows:auto 72px 1fr 38px}
@media(max-width:860px){.app.with-banner{grid-template-rows:auto auto 1fr 38px}}
.support-banner{display:flex;align-items:center;gap:12px;padding:8px 18px;background:#0b1020;color:#fff;font-size:13px}
.support-banner .btn{background:#fff;color:#0b1020;border-color:#fff;padding:5px 10px}
.support-dot{width:10px;height:10px;border-radius:50%;background:#ff3b6b;box-shadow:0 0 0 0 rgba(255,59,107,.7);animation:supportPulse 1.6s infinite}
@keyframes supportPulse{70%{box-shadow:0 0 0 9px rgba(255,59,107,0)}100%{box-shadow:0 0 0 0 rgba(255,59,107,0)}}
.mail-address{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mail-address input[type=text],.mail-address input:not([type]){flex:1 1 140px;min-width:120px}
.mail-at{color:#5d6b7a;font-weight:800}
.mail-domain{font-weight:700;color:#2d3b4e;background:#eef3f6;border-radius:8px;padding:8px 10px}
.mail-preview{border:1px solid var(--line);border-radius:12px;padding:10px;background:#f3f5f7;max-height:520px;overflow:auto}
.check-stack{display:grid;gap:6px}
.clean-list{margin:10px 0 0;padding-left:18px;color:#46546b;font-size:13px;line-height:1.6}

/* ---- 22.3.2 mail control panel ---- */
optgroup{font-weight:800;color:#5d6b7a}
.kid-subhead{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5d6b7a;margin:16px 0 6px}

/* ---- 22.4 tick grids, signing ---- */
.tick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 14px;max-height:280px;overflow:auto;padding:4px 2px}
.tick-grid .check-row{margin:0;font-size:13px}
/* The accredited umbrella list is 96 rows; 280px shows four of them. */
.tick-grid.tall{max-height:360px}
.tick-grid .check-row .badge{margin-left:6px}
.hidden{display:none !important}
#sgCanvas{cursor:crosshair}

/* ---- 22.6 clickable KPIs, action rows and the target pulse ---- */
.kpi-click{display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;text-align:left;font:inherit;border:1px solid rgba(30,55,85,.14);outline:1px solid rgba(255,255,255,.9);outline-offset:-4px;background:linear-gradient(180deg,#fdfefe,#f3f7f9);transition:.16s ease}
.kpi-click:hover{transform:translateY(-2px);border-color:rgba(13,143,135,.5);box-shadow:0 12px 26px rgba(30,55,85,.12)}
.kpi-click .kpi-sub{font-size:11px}
.action-row{width:100%;display:flex;align-items:center;gap:12px;text-align:left;font:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:.15s}
.action-row:hover{border-color:rgba(13,143,135,.55);box-shadow:0 8px 20px rgba(30,55,85,.10);transform:translateY(-1px)}
.action-row .action-go{margin-left:auto;font-weight:900;color:var(--brand)}
.pulse-card{margin:14px 0}
.pulse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:12px}
.pulse{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff}
.pulse-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px}
.pulse-head strong{font-size:17px}
.pulse-track{height:9px;border-radius:6px;background:#e9eef2;margin:10px 0 8px;overflow:hidden}
.pulse-fill{display:block;height:100%;border-radius:6px;background:#0d8f87}
.pulse-fill.good{background:linear-gradient(90deg,#0d8f87,#25b39a)}
.pulse-fill.warn{background:linear-gradient(90deg,#e0a11c,#f2c14e)}
.pulse-fill.bad{background:linear-gradient(90deg,#c0563a,#e08163)}
.pulse-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px}

.rate-row{align-items:center}
.rate-input{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:11px;padding:4px 10px;background:#fff}
.rate-input label{font-size:12px;color:#5d6b7a;font-weight:700}
.rate-input input{width:92px;border:0;padding:6px 2px;font:inherit;font-weight:700}
.rate-input input:focus{outline:0}

/* ===================== V22.12 — design overhaul ===================== */
:root{--brand-soft:rgba(93,44,255,.12);--accent-soft:rgba(0,207,232,.16);--tint:#efeaff;--ink-soft:#5a6a85;--elev-1:0 1px 2px rgba(16,26,46,.06),0 8px 20px rgba(16,26,46,.06);--elev-2:0 2px 6px rgba(16,26,46,.08),0 18px 40px rgba(16,26,46,.12)}
body{background:
  radial-gradient(1200px 520px at 8% -10%,var(--brand-soft),transparent 60%),
  radial-gradient(900px 420px at 100% 0%,var(--accent-soft),transparent 55%),
  var(--canvas);}
.ic{flex:0 0 auto;vertical-align:-3px}
/* topbar */
.topbar{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(16,26,46,.07);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.top-search{border-radius:14px}
.mode-switch{border-radius:14px;background:var(--tint);padding:3px}
.mode-switch button{border-radius:11px;font-weight:800;letter-spacing:.01em}
.mode-switch button.active{background:var(--brand);color:#fff;box-shadow:var(--elev-1)}
/* sidebar */
.sidebar{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78));border-right:1px solid rgba(16,26,46,.07)}
.sidebar-title{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:800;margin:16px 14px 6px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;border:1px solid transparent;border-radius:13px;padding:9px 11px;background:transparent;color:var(--ink);font:inherit;font-weight:650;font-size:13.5px;cursor:pointer;transition:.15s;text-align:left}
.nav-item:hover{background:#fff;border-color:rgba(16,26,46,.08);box-shadow:var(--elev-1);transform:translateX(2px)}
.nav-item.active{background:var(--brand);color:#fff;border-color:transparent;box-shadow:var(--elev-1)}
.nav-item.active .nav-num{background:rgba(255,255,255,.24);color:#fff}
.nav-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--tint);color:var(--brand)}
.nav-item.active .nav-ic{background:rgba(255,255,255,.2);color:#fff}
.nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-num{font-size:10.5px;font-weight:800;color:var(--ink-soft);background:var(--tint);border-radius:7px;padding:1px 6px}
/* page head + guidance */
.page-head{align-items:flex-start}
.page-head-main{display:flex;gap:14px;align-items:flex-start}
.page-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(140deg,var(--brand),var(--accent));color:#fff;box-shadow:var(--elev-1)}
.page-head h1{letter-spacing:-.02em}
.guide-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid rgba(16,26,46,.07);box-shadow:var(--elev-1);font-size:12.5px;color:var(--ink-soft)}
.guide-label{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.guide-step{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink)}
.guide-step b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--tint);color:var(--brand);font-size:11px}
.guide-arrow{color:var(--ink-soft);opacity:.6}
/* tiles */
.tile-grid{gap:18px}
.action-tile{border:1px solid rgba(16,26,46,.08);outline:0;background:#fff;border-radius:calc(var(--radius) + 4px);padding:20px 20px 52px;min-height:186px;box-shadow:var(--elev-1);overflow:hidden;position:relative}
.action-tile::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--brand),var(--accent));opacity:.9}
.action-tile::after{content:"";position:absolute;right:-40px;bottom:-56px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--brand-soft),transparent 70%);pointer-events:none}
.action-tile:hover,.action-tile:focus{transform:translateY(-4px);border-color:rgba(16,26,46,.1);box-shadow:var(--elev-2)}
.tile-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(140deg,var(--brand),var(--accent));color:#fff;margin-bottom:14px;box-shadow:var(--elev-1);font-size:0}
.tiles-flat .tile-icon{background:var(--tint);color:var(--brand);box-shadow:none}
.tiles-flat .action-tile::before{opacity:.35}
.tile-title{font-size:16.5px;font-weight:850;letter-spacing:-.01em}
.tile-copy{font-size:12.5px;color:var(--ink-soft)}
.tile-go{position:absolute;left:20px;bottom:16px;font-size:11.5px;font-weight:800;color:var(--brand);display:inline-flex;gap:6px;align-items:center;opacity:.85;transition:.15s}
.action-tile:hover .tile-go{opacity:1;gap:9px}
/* kpi */
.kpi{border-radius:calc(var(--radius) - 2px);border:1px solid rgba(16,26,46,.07);box-shadow:var(--elev-1);background:#fff}
.kpi-click{background:#fff}
.kpi-click:hover{border-color:var(--brand);box-shadow:var(--elev-2)}
.kpi-top{display:flex;align-items:center;gap:8px}
.kpi-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--tint);color:var(--brand)}
.kpi strong{letter-spacing:-.03em}
/* cards, tables, buttons */
.card{border-radius:calc(var(--radius) + 2px);border:1px solid rgba(16,26,46,.07);box-shadow:var(--elev-1)}
.card-pad h3{letter-spacing:-.01em}
.btn{border-radius:13px;font-weight:750;transition:.15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--elev-1)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;box-shadow:var(--elev-1)}
.data-table thead th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);background:linear-gradient(180deg,#fff,var(--canvas))}
.data-table tbody tr:hover{background:var(--tint)}
.badge{border-radius:9px;font-weight:800;letter-spacing:.01em}
.tabs .tab{border-radius:12px;font-weight:750}
.tabs .tab.active{background:var(--brand);border-color:transparent;color:#fff;box-shadow:var(--elev-1)}
/* charts */
.spark{color:var(--brand);display:block}
.spark-accent{color:var(--accent)}
.minibars{color:var(--brand);display:block}
.donut{color:var(--brand)}
.chart-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* tooltips */
.tip-layer{position:fixed;z-index:9999;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;background:var(--ink);color:#fff;font-size:12px;font-weight:650;line-height:1.4;padding:8px 11px;border-radius:10px;max-width:280px;box-shadow:var(--elev-2)}
.tip-layer.on{opacity:1;transform:translateY(0)}
.tip-layer::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}
.tip-layer.below::after{bottom:auto;top:-5px;border-top-color:transparent;border-bottom-color:var(--ink)}
/* theme studio */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.theme-card{display:flex;align-items:center;gap:10px;border:1px solid rgba(16,26,46,.1);border-radius:14px;padding:11px 13px;background:#fff;font:inherit;font-weight:750;cursor:pointer;transition:.15s}
.theme-card:hover{box-shadow:var(--elev-1);transform:translateY(-1px)}
.theme-card.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.theme-swatch{width:30px;height:30px;border-radius:10px;flex:0 0 auto}
input[type=color]{width:100%;height:42px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:4px}
/* density */
body.dense .card-pad{padding:14px 16px}
body.dense .action-tile{min-height:158px;padding:16px 16px 46px}
body.dense .nav-item{padding:7px 10px}
body.dense .kpi{padding:12px 14px}
.chart-block{display:inline-flex;flex-direction:column;gap:4px;align-items:center;padding:8px 12px;border:1px solid rgba(16,26,46,.07);border-radius:14px;background:#fff;box-shadow:var(--elev-1)}
.chart-cap{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
/* 22.13 organisation */
.org-level{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed rgba(16,26,46,.09)}
.org-level:last-child{border-bottom:0}
.org-level-tag{flex:0 0 128px;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}
.org-level-tag span{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:var(--tint);color:var(--brand)}
.org-level-roles{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.org-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(16,26,46,.1);background:#fff;border-radius:12px;padding:8px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;color:var(--ink)}
.org-chip:hover{border-color:var(--brand);box-shadow:var(--elev-1);transform:translateY(-1px)}
.org-chip.in{border-color:var(--brand);background:var(--tint)}
.org-sees{font-size:10.5px;font-weight:700;color:var(--ink-soft);background:var(--canvas);border-radius:7px;padding:1px 6px}
.flow-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.flow-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid rgba(16,26,46,.08);border-radius:13px;padding:10px 14px;background:#fff}
.flow-from,.flow-to{font-weight:800;font-size:13px}
.flow-arrow{color:var(--brand);display:inline-flex}
.flow-count{margin-left:auto;font-size:12.5px;color:var(--ink-soft)}
.flow-count strong{color:var(--ink);font-size:15px}
/* 22.15 availability and photo */
.avail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:10px}
.avail-day{border:1px solid rgba(16,26,46,.08);border-radius:12px;padding:8px;background:#fff}
.avail-day.today{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.avail-date{font-size:11px;font-weight:800;color:var(--ink-soft);margin-bottom:6px}
.avail-cell{width:100%;border:0;border-radius:8px;padding:6px;margin-bottom:4px;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;background:#eef2f6;color:#5d6b7a;transition:.12s}
.avail-cell:hover:not([disabled]){transform:translateY(-1px)}
.avail-cell.available{background:var(--good-bg);color:var(--good)}
.avail-cell.unavailable{background:var(--bad-bg);color:var(--bad)}
.avail-cell.booked{background:var(--warn-bg);color:var(--warn);cursor:default}
.avail-key{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--ink-soft)}
.avail-key-item{display:inline-flex;align-items:center;gap:6px}
.avail-dot{width:11px;height:11px;border-radius:4px;display:inline-block;background:#eef2f6}
.avail-dot.available{background:var(--good)}.avail-dot.unavailable{background:var(--bad)}.avail-dot.booked{background:var(--warn)}
.worker-photo{object-fit:cover;border-radius:10px;border:1px solid rgba(16,26,46,.12);background:#f4f7f9}
.worker-photo.empty{display:grid;place-items:center;font-weight:800;color:var(--ink-soft);font-size:15px}
.photo-stage{position:relative;width:100%;max-width:280px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#f4f7f9;border:1px solid rgba(16,26,46,.1);display:grid;place-items:center}
.photo-stage img,.photo-stage video,.photo-stage canvas{width:100%;height:100%;object-fit:cover}
.photo-empty{display:grid;place-items:center;gap:8px;color:var(--ink-soft);font-size:12.5px}
.photo-guide{position:absolute;inset:12% 22% 8%;border:2px dashed rgba(93,44,255,.45);border-radius:50% 50% 45% 45%;pointer-events:none}
.callout-strong{background:var(--tint);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;padding:10px 12px;font-size:13px;margin-bottom:10px}

/* 22.18 validation and KID illustration */
.input-error,input.input-error,select.input-error{border-color:var(--bad) !important;box-shadow:0 0 0 3px rgba(180,35,24,.14) !important;background:#fff6f5}
.field-error{color:var(--bad);font-size:11.5px;font-weight:700;margin-top:4px}
.kid-illustration{margin-top:16px;border:1px solid rgba(16,26,46,.1);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--elev-1)}
.kid-illustration h4{margin:0;padding:12px 16px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--brand),var(--accent))}
.kid-illustration .kid-line{display:flex;justify-content:space-between;gap:20px;padding:11px 16px;border-bottom:1px solid #eef2f6;font-size:14.5px}
.kid-illustration .kid-line:last-of-type{border-bottom:0}
.kid-illustration .kid-line span{flex:1}
.kid-illustration .kid-line strong{flex:0 0 150px;text-align:right;font-size:16px;font-variant-numeric:tabular-nums}
.kid-illustration .kid-line.total{background:var(--tint);font-weight:800}
.kid-illustration .kid-line.total strong{font-size:19px}
.nmw-banner{padding:14px 16px;font-size:14px;font-weight:750;display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.nmw-banner.pass{background:#e7f7ef;color:#0a5c40;border-top:3px solid #0a7a54}
.nmw-banner.fail{background:#ffece9;color:#8e1b1b;border-top:3px solid #b42318}
.nmw-banner .nmw-verdict{font-size:15px;font-weight:900;letter-spacing:.02em}
.btn.xl{font-size:16px;padding:15px 26px;border-radius:15px}
.step-done-tick{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--good);color:#fff;font-size:17px;font-weight:900;margin-left:10px}
/* 22.18 onboarding: bigger illustration, bigger issue button and tick */
.kid-illustration.big{padding:18px 20px;border-radius:16px;font-size:14.5px}
.kid-illustration.big h4{font-size:16px;margin:0 0 12px}
.kid-illustration.big .kid-line{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(16,26,46,.08)}
.kid-illustration.big .kid-line span{font-size:14px}
.kid-illustration.big .kid-line strong{font-size:17px;font-variant-numeric:tabular-nums;text-align:right;min-width:120px}
.kid-illustration.big .kid-line.total{border-bottom:0;border-top:2px solid rgba(16,26,46,.16);margin-top:6px;padding-top:12px}
.kid-illustration.big .kid-line.total strong{font-size:21px}
.nmw-banner{display:grid;grid-template-columns:1fr;gap:6px;margin-top:14px;padding:14px 16px;border-radius:14px;font-size:13.5px;line-height:1.5}
.nmw-banner.pass{background:#e7f7ef;border:1px solid #9fd9bd;color:#0a5c40}
.nmw-banner.fail{background:#ffebe8;border:1px solid #f3b4ab;color:#8e1b1b}
.nmw-verdict{font-weight:900;font-size:15.5px;letter-spacing:-.01em}
.btn.xl,.btn.btn-xl{font-size:16px;padding:15px 26px;border-radius:15px;font-weight:850;box-shadow:var(--elev-1)}
.step-done-tick{font-size:20px;font-weight:900;color:var(--good)}
.input-error{border-color:var(--bad) !important;background:#fff6f5 !important;box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.field-error{color:var(--bad);font-size:11.5px;font-weight:700;margin-top:4px}
/* 22.19 address finder */
.address-results{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.address-hit{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid rgba(16,26,46,.1);background:#fff;border-radius:11px;padding:9px 12px;font:inherit;cursor:pointer;transition:.12s}
.address-hit:hover{border-color:var(--brand);box-shadow:var(--elev-1);transform:translateY(-1px)}
.address-hit span{font-size:12px;color:var(--ink-soft)}
.address-empty{font-size:12.5px;color:var(--ink-soft);padding:6px 2px}
.kid-subhead{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:800;margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(16,26,46,.09)}
.share-code-row{display:flex;gap:8px;align-items:center}
.share-code-row input{flex:1;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
/* 22.20 evidence thumbnails, opt-in panel, first-contact photo */
.evi-row{display:flex;align-items:center;gap:10px}
.evi-thumb{display:grid;place-items:center;border-radius:10px;overflow:hidden;border:1px solid rgba(16,26,46,.12);background:#f4f7f9;flex:0 0 auto}
.evi-thumb img{width:100%;height:100%;object-fit:cover}
.evi-thumb.doc b{font-size:10px;font-weight:900;color:var(--ink-soft);letter-spacing:.04em}
.evi-thumb.empty{color:var(--ink-soft);opacity:.55}
.check-row.tight{margin-top:6px;font-size:12px}
.check-row.big{font-weight:750;font-size:14px;margin-top:10px}
.opt-in-panel{border:1px solid rgba(16,26,46,.1);border-radius:14px;padding:14px 16px;background:#fff}
.opt-in-head{display:flex;flex-direction:column;gap:4px}
.opt-in-detail{margin-top:12px;border-top:1px solid rgba(16,26,46,.08);padding-top:12px}
.photo-panel{display:flex;gap:18px;align-items:center;border:1px solid rgba(16,26,46,.1);border-radius:16px;padding:16px 18px;background:linear-gradient(120deg,var(--tint),#fff 60%);margin-bottom:18px}
.photo-panel-shot{flex:0 0 auto}
.photo-panel-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.photo-panel-body p{margin:0}
.recipient-box{display:flex;gap:12px;align-items:center;border:1px solid rgba(16,26,46,.1);border-radius:12px;padding:10px 12px;background:#fff}
.recipient-box strong{display:block;font-size:14px}
/* 22.23 payroll */
.payslip-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.payslip-split h4{margin:0 0 8px}
.worker-portal-view{border:1px solid rgba(16,26,46,.09);border-radius:16px;padding:16px 18px;background:#fff}
.wp-head{display:flex;gap:14px;align-items:center;margin-bottom:6px}
@media(max-width:900px){.payslip-split{grid-template-columns:1fr}}
/* 22.26 supplier form */
.benefit-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.benefit-row input[data-ben-name]{flex:1;min-width:0}
.acc-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.acc-chip{border:1px solid rgba(16,26,46,.14);background:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-weight:750;font-size:13px;cursor:pointer;transition:.14s}
.acc-chip:hover{border-color:var(--brand);transform:translateY(-1px)}
.acc-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--elev-1)}
/* 22.27 RTI report and document icons */
.rti-table tbody tr.rti-week{cursor:pointer}
.rti-table tbody tr.rti-week:hover{background:var(--tint)}
.rti-table tbody tr.rti-week.open{background:var(--tint);box-shadow:inset 3px 0 0 var(--brand)}
tr.rti-total td{background:#1b2a3d;color:#fff;font-weight:800}
tr.rti-total td .subtle{color:rgba(255,255,255,.7)}
.data-table.small{font-size:11.5px}
.data-table.small td,.data-table.small th{padding:6px 8px}
.doc-icons{display:inline-flex;gap:6px;margin-left:8px}
.icon-btn{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(16,26,46,.12);background:#fff;border-radius:9px;color:var(--brand);cursor:pointer;transition:.14s}
.icon-btn:hover{border-color:var(--brand);box-shadow:var(--elev-1);transform:translateY(-1px)}
.modal.wide{max-width:1100px;width:94vw}
/* 22.28 preview scrolling */
.preview-modal{display:flex;flex-direction:column;max-height:92vh}
.preview-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:0 18px 18px;background:var(--canvas)}
.preview-scroll iframe{width:100%;min-height:70vh;border:1px solid rgba(16,26,46,.12);border-radius:12px;background:#fff;display:block}
.link-name{border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--brand);cursor:pointer;text-align:left}
.link-name:hover{text-decoration:underline}
/* 22.30 HMRC check */
.hmrc-result{border-radius:14px;padding:14px 16px;border:1px solid rgba(16,26,46,.1);background:#fff}
.hmrc-result.match{border-color:#9fd9bd;background:#f4fbf7}
.hmrc-result.mismatch{border-color:#f3b4ab;background:#fff6f5}
.hmrc-verdict{font-weight:900;font-size:15px;margin-bottom:10px}
.hmrc-result.match .hmrc-verdict{color:#0a5c40}
.hmrc-result.mismatch .hmrc-verdict{color:#8e1b1b}
.tick{color:#0a7a54;font-weight:900;font-size:16px}
.cross{color:#b42318;font-weight:900;font-size:16px}
.hmrc-shot{width:100%;margin-top:12px;border:1px solid rgba(16,26,46,.12);border-radius:12px}
.hmrc-inputs{margin-top:12px;font-size:12.5px}
.hmrc-inputs summary{cursor:pointer;font-weight:750;color:var(--brand)}
.bulk-log{margin-top:12px;max-height:280px;overflow:auto;border:1px solid rgba(16,26,46,.1);border-radius:12px;padding:10px 12px;font-size:12.5px;background:#fff}
.bulk-row{padding:4px 0;border-bottom:1px solid #f1f4f8}
.bulk-row.good{color:#0a7a54;font-weight:700}
.bulk-row.bad{color:#b42318;font-weight:700}
.bulk-row.warn{color:#a06a00;font-weight:700}
/* 22.42 check columns and the three proof tiles */
.chk-head{font-size:10px !important;letter-spacing:.06em}
.chk-cell{text-align:center;width:70px}
.chk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-weight:900;font-size:13px;border:1px solid rgba(16,26,46,.18);background:#eef1f5;color:#fff}
.chk.none{background:#e6eaef;border-color:rgba(16,26,46,.16)}
.chk.pass{background:#0a7a54;border-color:#0a7a54}
.chk.fail{background:#b42318;border-color:#b42318}
.proof-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;align-items:stretch}
.proof-tile{display:flex;flex-direction:column;border:1px solid rgba(16,26,46,.12);border-radius:16px;background:#fff;overflow:hidden;min-height:420px}
.proof-tile.good{border-color:#9fd9bd}
.proof-tile.bad{border-color:#f3b4ab}
.proof-head{padding:12px 14px;border-bottom:1px solid rgba(16,26,46,.08)}
.proof-head h4{margin:2px 0 0;font-size:15px}
.proof-tag{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)}
.proof-body{flex:1;min-height:0;overflow:auto;background:#f6f8fa}
.proof-body img{width:100%;display:block}
.proof-frame{width:100%;height:360px;border:0;background:#fff}
.proof-empty{padding:16px;font-size:12.5px;color:var(--ink-soft)}
.proof-foot{padding:10px 14px;border-top:1px solid rgba(16,26,46,.08);display:flex;align-items:center;gap:10px}
@media(max-width:1100px){.proof-tiles{grid-template-columns:1fr}}
/* 22.44 proof tiles: scaled payslip and full-page buttons */
.proof-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.btn.small{padding:5px 10px;font-size:12px;border-radius:9px}
.proof-body.scaled{overflow:hidden;background:#fff;display:flex;justify-content:center}
.scale-wrap{width:100%;overflow:hidden}
.scale-wrap .proof-frame{width:794px;height:1123px;transform-origin:top left;border:0;background:#fff}
/* 22.44 photograph framing */
.photo-stage{overflow:hidden;cursor:grab;touch-action:none}
.photo-stage.grabbing{cursor:grabbing}
.photo-stage img{transition:transform .04s linear;will-change:transform}
.photo-adjust{display:flex;align-items:center;gap:12px;margin:10px 0;flex-wrap:wrap;font-size:12.5px}
.photo-adjust label{display:flex;align-items:center;gap:8px;font-weight:700}
.photo-adjust input[type=range]{width:160px}
/* 22.45 named document columns */
.doc-head{font-size:10px !important;letter-spacing:.06em;text-align:center !important;width:62px}
.doc-cell{text-align:center;width:62px;padding-left:4px !important;padding-right:4px !important}
/* 22.51 margin bands */
.band-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.band-row .money-input{max-width:130px}
.band-row select{max-width:230px}
.btn.tight{padding:6px 10px;font-size:11.5px;line-height:1.25;max-width:150px;white-space:normal;text-align:center}
.search-row{margin:12px 0}
.search-row input{width:100%;max-width:520px}
/* 22.54 tile arranging and groups */
.tile-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}
.tile-head-row h3{margin:0}
.tile-group{grid-column:1/-1;border:1px solid rgba(16,26,46,.1);border-radius:18px;padding:14px 16px;background:linear-gradient(120deg,var(--tint),#fff 65%)}
.tile-group h3{margin:0 0 10px;font-size:15px}
.tile-grid.inner{margin:0}
.group-row{display:flex;align-items:center;gap:12px;justify-content:space-between;border:1px solid rgba(16,26,46,.09);border-radius:12px;padding:10px 12px;margin-bottom:8px}
/* 22.58 arranging tiles by hand */
.tile-grid.editing .action-tile{cursor:grab;animation:tile-wiggle .55s ease-in-out infinite alternate}
.tile-grid.editing .action-tile:nth-child(even){animation-delay:.12s}
@keyframes tile-wiggle{from{transform:rotate(-.5deg)}to{transform:rotate(.5deg)}}
.tile-grid.editing .action-tile.dragging{opacity:.45;animation:none;cursor:grabbing}
.tile-grid.editing .action-tile.drop-onto{outline:3px solid var(--brand);outline-offset:2px;transform:scale(1.03);animation:none}
.arrange-hint{font-size:12.5px;color:var(--ink-soft);margin-right:10px}
.group-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.group-head h3{margin:0;font-size:15px}
.group-name{font-weight:800;font-size:15px;padding:6px 10px;max-width:280px}
@media(prefers-reduced-motion:reduce){.tile-grid.editing .action-tile{animation:none}}
/* 22.60 bigger, centred charts and the live stats strip */
.chart-row{display:flex;gap:22px;justify-content:center;align-items:flex-end;flex-wrap:wrap;margin:6px 0 18px}
.chart-block{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 18px;border:1px solid rgba(16,26,46,.09);border-radius:16px;background:#fff;min-width:210px}
.chart-cap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)}
.pulse-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:6px 0 16px}
.chart-empty{display:grid;place-items:center;width:240px;height:64px;font-size:12px;color:var(--ink-soft);border:1px dashed rgba(16,26,46,.16);border-radius:12px}
.row-current{background:rgba(99,91,255,.06)}
/* 22.65 the agency name in the corner is the way to switch */
.brand-wrap.switchable{cursor:pointer;border-radius:12px;padding:4px 10px 4px 4px;transition:background .15s ease}
.brand-wrap.switchable:hover,.brand-wrap.switchable:focus-visible{background:rgba(16,26,46,.06);outline:none}
.brand-caret{margin-left:8px;font-size:12px;color:var(--ink-soft)}

/* ---- V24.3: the small things that make a form usable ---- */
/* "No file chosen" beside a file that has plainly been uploaded reads as a failure. */
.file-control{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-control.has-file input[type=file]{width:120px;font-size:0}
.file-control.has-file input[type=file]::file-selector-button{font-size:12px}
.upload-done{display:inline-flex;align-items:center;gap:6px;background:var(--good-bg,#e7f6ee);
 border:1px solid var(--good,#1d9e75);border-radius:999px;padding:2px 10px;font-size:12px;color:#0f6e56;max-width:230px}
.upload-tick{font-weight:700}
.upload-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Training and CPD rows were squashed into one line. Give each field its own column and label. */
.evidence-row.course-row{display:grid;grid-template-columns:minmax(180px,1.4fr) 150px 160px 190px 200px auto;
 gap:14px;align-items:end;padding:14px 0;border-bottom:1px solid var(--border)}
.evidence-row.course-row .course-name{align-self:center}
.evidence-row .mini-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.evidence-row .mini-field>label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary,#5d6b7a)}
.evidence-row .check-row.tight{margin:4px 0 0;font-size:12px}
.evidence-row.is-overridden{background:var(--warn-bg,#fff7e8);border-radius:10px;padding-left:12px;padding-right:12px}
@media (max-width:1100px){.evidence-row.course-row{grid-template-columns:1fr 1fr;gap:10px}}

/* A checklist line you cannot click is the most annoying way to present one. */
.status-item.status-jump{cursor:pointer;text-align:left;width:100%}
.status-item.status-jump:hover{filter:brightness(.97)}
.block-flash{animation:blockFlash 1.4s ease-out}
@keyframes blockFlash{0%{box-shadow:0 0 0 3px var(--brand,#0d8f87)}100%{box-shadow:0 0 0 0 transparent}}

/* Grouping in the control panel: rounded boxes a shade off the page behind them. */
.settings-group,.control-group{background:var(--surface-1,#f4f6f9);border:1px solid var(--border);
 border-radius:14px;padding:16px 18px;margin:0 0 16px}
.settings-group>h3,.settings-group>h4,.control-group>h3,.control-group>h4{margin-top:0}
.settings-group .field-grid,.control-group .field-grid{background:transparent}

/* Grouping inside the administrator control panels: each subheaded block becomes a rounded box a
   shade off the card behind it, so a long settings page reads as sections rather than one wall. */
#content[data-screen="settings"] .card-pad .kid-subhead,
#content[data-screen="hq"] .card-pad .kid-subhead,
#content[data-screen="testing"] .card-pad .kid-subhead,
#content[data-screen="workflow"] .card-pad .kid-subhead,
#content[data-screen="integrations"] .card-pad .kid-subhead{
 background:var(--surface-1,#f4f6f9);border:1px solid var(--border);border-bottom:0;
 border-radius:14px 14px 0 0;margin:18px 0 0;padding:12px 16px;font-size:14px}
#content[data-screen="settings"] .card-pad .kid-subhead + .field-grid,
#content[data-screen="hq"] .card-pad .kid-subhead + .field-grid,
#content[data-screen="testing"] .card-pad .kid-subhead + .field-grid,
#content[data-screen="workflow"] .card-pad .kid-subhead + .field-grid,
#content[data-screen="integrations"] .card-pad .kid-subhead + .field-grid,
#content[data-screen="settings"] .card-pad .kid-subhead + .tick-grid,
#content[data-screen="hq"] .card-pad .kid-subhead + .tick-grid{
 background:var(--surface-1,#f4f6f9);border:1px solid var(--border);border-top:0;
 border-radius:0 0 14px 14px;margin:0 0 16px;padding:16px}

/* ---- V24.4: the permission matrix ---- */
.perm-matrix{margin:10px 0}
.perm-group{margin:0 0 18px}
.perm-table th.perm-col,.perm-table td.perm-col{text-align:center;width:74px}
.perm-table td.perm-col input[type=checkbox]{width:17px;height:17px;cursor:pointer}
.perm-table tbody tr:hover{background:var(--surface-1,#f4f6f9)}

/* ---- V24.6: the company block and its sites ---- */
.site-card{border:1px solid var(--border);border-radius:14px;background:var(--surface-1,#f4f6f9);margin:0 0 16px}
.site-card .field-grid{background:transparent}
.site-card .evidence-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) auto;
 gap:12px;align-items:end;padding:12px 0;border-bottom:1px solid var(--border)}
.site-card .evidence-row:last-child{border-bottom:0}

/* ---- V24.9: the SDC assessment ---- */
/* The question and its yes/no sit on one line; the note runs the full width underneath and grows
   downwards, so a long answer is never squashed into a strip at the right-hand edge. */
.sdc-row{padding:14px 0 16px;border-bottom:1px solid var(--border)}
.sdc-row:last-child{border-bottom:0}
.sdc-src{margin-top:4px;font-size:11.5px;line-height:1.45;color:var(--muted);font-style:italic}
.sdc-process{margin:18px 0 6px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2,transparent)}
.sdc-process summary{cursor:pointer;line-height:1.5}
.sdc-steps{margin:10px 0 8px;padding-left:22px}
.sdc-steps li{margin:0 0 8px;line-height:1.55;font-size:13px;overflow-wrap:anywhere}
.sdc-process .small a{overflow-wrap:anywhere}
.sdc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sdc-q{flex:1 1 460px;min-width:0}
.sdc-q strong{display:block;font-weight:600;line-height:1.45;font-size:14px}
.sdc-q .subtle{margin-top:4px;font-size:12.5px;line-height:1.5}
.sdc-answer{display:flex;gap:10px;flex:0 0 auto;padding-top:1px}
.sdc-answer .check-row{margin:0;padding:7px 16px;border:1px solid var(--border);border-radius:10px;
 background:var(--surface,#fff);cursor:pointer;min-width:78px;justify-content:center;gap:8px}
.sdc-answer .check-row:hover{border-color:var(--brand)}
.sdc-answer .check-row:has(input:checked){border-color:var(--brand);
 background:color-mix(in srgb,var(--brand) 10%,transparent);font-weight:600}
.sdc-note{margin-top:10px}
.sdc-note label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
 color:var(--text-secondary,#5d6b7a);margin-bottom:4px}
.sdc-note textarea{width:100%;box-sizing:border-box;min-height:40px;resize:vertical;overflow:hidden;
 padding:9px 12px;line-height:1.5;font:inherit;font-size:13.5px;
 border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff)}
.sdc-note textarea:focus{border-color:var(--brand);outline:none}
.sdc-row.is-against{background:var(--warn-bg,#fff7e8);border-radius:12px;
 padding-left:14px;padding-right:14px;border-bottom-color:transparent;margin-bottom:6px}
@media (max-width:760px){.sdc-head{gap:12px}.sdc-answer{width:100%}.sdc-answer .check-row{flex:1}}

/* ---- V24.12: client onboarding stages that lay themselves out ---- */
/* Stages 2 and 3 build their own cards and sub-grids. They get a plain flow container so nothing
   becomes an accidental grid item, and the dialogue is given room to show three columns properly. */
.stage-flow{display:block}
.stage-flow > .field-grid{margin:0 0 6px}
.stage-flow .kid-subhead{margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);
 font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.stage-flow .stage-note{max-width:78ch;margin:0 0 16px}
.stage-flow .field label > span:first-child{white-space:normal}

/* A row of people has to fit inside the card it sits in. */
.director-list,.contact-list{display:flex;flex-direction:column;gap:4px;margin:0 0 12px}
.director-row,.contact-row{display:grid;gap:12px;align-items:end;padding:12px 0;
 border-bottom:1px solid var(--border)}
/* A director row ends in a date; a contact row ends in an email. They need different widths — an
   email squeezed into a column sized for dd/mm/yyyy is unreadable. */
.director-row{grid-template-columns:minmax(150px,1.4fr) minmax(110px,.9fr) 150px minmax(200px,1.7fr) auto auto}
.contact-row{grid-template-columns:minmax(140px,1.2fr) minmax(120px,1fr) minmax(220px,1.9fr) 145px auto auto}
.director-row:last-child,.contact-row:last-child{border-bottom:0}
.director-row .mini-field,.contact-row .mini-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.director-row .mini-field > label,.contact-row .mini-field > label{font-size:11px;text-transform:uppercase;
 letter-spacing:.04em;color:var(--text-secondary,#5d6b7a)}
.director-row input,.contact-row input{width:100%;box-sizing:border-box}
.director-auth,.contact-primary{margin:0 0 8px;white-space:nowrap}
.director-remove,.contact-remove{margin-bottom:6px;white-space:nowrap}
@media (max-width:1150px){
 .director-row,.contact-row{grid-template-columns:1fr 1fr;gap:10px}
 .director-auth,.contact-primary,.director-remove,.contact-remove{grid-column:span 1}
}

/* A site is a self-contained block, not a squeezed column. */
.site-card{margin:0 0 18px}
.site-card > .field-grid{margin-top:4px}
.site-card .requirement-heading{align-items:flex-start;gap:16px}

/* Give these two stages the width they need. */
.modal.wizard-wide{max-width:1320px;width:min(96vw,1320px)}

/* ---- V25.1: a visible agency switch ---- */
/* The only way to change agency was an invisible click target on the brand, and the dropdown beside
   the search only ever rendered for a Platform Administrator — so anyone who switched into an
   agency lost the way back. It is a labelled control now, for anybody entitled to use it. */
.agency-switch{display:inline-flex;align-items:center;gap:8px;margin-left:12px;
 padding:6px 12px 6px 14px;border:1px solid var(--border);border-radius:999px;
 background:var(--surface,#fff);cursor:pointer;font:inherit;line-height:1.2;max-width:320px}
.agency-switch:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(16,26,46,.10)}
.agency-switch__label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;
 color:var(--text-secondary,#5d6b7a);font-weight:700}
.agency-switch__name{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agency-switch__caret{color:var(--brand);font-size:11px}
@media (max-width:900px){.agency-switch__label{display:none}.agency-switch{max-width:180px}}

/* Acting for another agency should never be a quiet state. */
.acting-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 padding:8px 16px;background:linear-gradient(90deg,#6D22F8,#00CFE8);color:#fff;font-size:13px}
.acting-banner b{font-weight:800}
.acting-banner .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff;
 padding:4px 12px;font-size:12px}
.acting-banner .btn:hover{background:rgba(255,255,255,.28)}

/* ---- V25.1: the HMRC verdict and the payroll history ---- */
.hmrc-verdict{border-left-width:4px}
.hmrc-verdict.is-good{border-left-color:var(--good,#1d9e75);background:var(--good-bg,#e7f6ee)}
.hmrc-verdict.is-warn{border-left-color:var(--warn,#d08700);background:var(--warn-bg,#fff7e8)}
.hmrc-verdict.is-bad{border-left-color:var(--bad,#c0392b);background:var(--bad-bg,#fdf2f0)}
tr.row-group td{background:var(--surface-1,#f4f6f9);font-size:13px;padding-top:12px;padding-bottom:12px}

/* ---- V25.5: week picker and framework band ---- */
.week-select{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff);
 font:inherit;font-size:13.5px;font-weight:600;min-width:210px;cursor:pointer}
.week-select:hover{border-color:var(--brand)}
.week-select optgroup{font-weight:800;color:var(--text-secondary,#5d6b7a)}
.framework-band{border-left:3px solid var(--brand);line-height:1.7}
.framework-band .badge{vertical-align:middle}


/* TEMPLACE EMAIL BANNER — banner library rows in module 31 */
/* .evidence-row is a seven-track grid built for evidence, so a banner row inherits column
   widths meant for something else and squashes. It gets its own template: picture, detail, actions. */
.mail-banner-row{grid-template-columns:148px minmax(240px,1fr) auto;align-items:center;gap:14px}
.mail-banner-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mail-banner-thumb{width:148px;min-width:148px;height:56px;border:1px solid var(--line);border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden}
.mail-banner-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.mail-banner-detail{min-width:0}
@media (max-width:900px){.mail-banner-row{grid-template-columns:110px minmax(0,1fr)}.mail-banner-thumb{width:110px;min-width:110px}.mail-banner-actions{grid-column:1/-1;justify-content:flex-start}}
.mail-banner-detail .subtle{overflow-wrap:anywhere}
.mail-banner-preview{margin-top:10px;border:1px dashed var(--line);border-radius:10px;background:#fff;padding:10px;display:grid;place-items:center;min-height:70px}
.mail-banner-preview img{max-width:100%;max-height:180px;display:block}
.mail-preview .mail-banner img{max-width:100%;height:auto}


/* TEMPLACE LEGAL DEDUCTIONS */
.stop-panel{border-left:4px solid #b42318;background:#fff5f4;border-radius:0 12px 12px 0;padding:11px 15px;margin:10px 0;font-size:13.5px}
.badge.warn{background:#fff4e5;color:#a24500}
.action-tile.absent{opacity:.62;border-style:dashed}
.action-tile.absent .tile-go{color:#7c8896}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--brand);text-decoration:underline;cursor:pointer}
#legalBody .evidence-row{grid-template-columns:minmax(220px,1fr) auto auto auto auto auto;align-items:center;gap:10px}
#legalBody .field-help{margin-top:2px}
@media (max-width:900px){#legalBody .evidence-row{grid-template-columns:minmax(0,1fr) auto}}


/* TEMPLACE IN-APP GUIDE */
.guide-btn{font-weight:700}
.tip-layer.on{display:flex;align-items:center;gap:8px;pointer-events:none}
/* The layer must NOT take pointer events, even when visible. It sits over the control it is
   describing, so capturing them means a visible bubble swallows the click meant for the button
   underneath — which is worse than anything the bubble adds. It stays up while the pointer is in
   it because hide() checks the pointer against the rectangle enclosing control and bubble, not
   because of a mouseenter, so nothing is lost by letting clicks pass through. Only the "i" takes
   them, because it is the one thing in there you are meant to click. */
.tip-info{pointer-events:auto;width:20px;height:20px;min-width:20px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
 background:rgba(255,255,255,.14);color:#fff;font-family:Georgia,serif;font-style:italic;font-size:13px;
 line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.tip-info:hover{background:#fff;color:#17263a}
/* An invisible bridge across the clearance, centred on the control, so the pointer never crosses a
   strip that belongs to neither the control nor the bubble. Without it the bubble is a moving target
   guarded by a timer. */
.tip-layer.on::before{content:"";position:absolute;left:0;right:0;height:var(--tip-bridge,18px);
 bottom:calc(-1 * var(--tip-bridge,18px));background:transparent}
.tip-layer.on.below::before{bottom:auto;top:calc(-1 * var(--tip-bridge,18px))}
.guide-overlay{position:fixed;inset:0;background:#0f1f3ab8;display:none;z-index:120;padding:26px}
.guide-overlay.on{display:grid;place-items:center}
.guide-shell{width:min(1180px,96vw);height:min(88vh,900px);background:#fff;border-radius:18px;display:grid;
 grid-template-rows:auto 1fr;overflow:hidden;box-shadow:0 30px 80px #0f1f3a55}
.guide-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line)}
.guide-head h2{margin:0;font-size:19px}
.guide-headright{display:flex;align-items:center;gap:10px}
.guide-body{display:grid;grid-template-columns:300px 1fr;min-height:0}
.guide-side{border-right:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;min-height:0;background:#f8fafc}
.guide-search{margin:14px;padding:9px 12px;border:2px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px}
.guide-search:focus{outline:none;border-color:var(--brand)}
.guide-results{overflow:auto;padding:0 10px 14px}
.guide-count{font-size:12px;color:#5d6b7a;padding:4px 6px 8px}
.guide-group{margin-bottom:10px}
.guide-grouphead{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#7c8896;padding:8px 8px 4px}
.guide-link{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:none;border:0;
 padding:7px 10px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13.5px;color:#17263a}
.guide-link:hover{background:#eef2f7}
.guide-link.on{background:var(--brand);color:#fff}
.guide-link.on .subtle{color:#ffffffc0}
.guide-link.sub{font-size:12.5px;padding-left:22px;color:#46546b}
.guide-link .subtle{font-size:11.5px}
.guide-pane{overflow:auto;padding:22px 28px}
.guide-article h2{margin:2px 0 4px;font-size:22px}
.guide-meta{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#7c8896;margin:0 0 12px}
.guide-what{font-size:15px;margin-bottom:12px}
.guide-control{border:1px solid var(--brand);background:#f8f6ff;border-radius:12px;padding:12px 15px;margin:0 0 14px}
.guide-control h4{margin:0 0 5px;font-size:14px;text-transform:none;letter-spacing:0;color:var(--brand)}
.guide-tiptext{font-size:13px;color:#46546b;margin:0 0 6px;font-style:italic}
.guide-inventory{background:#f7f9fb;border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin:12px 0}
.guide-inventory h4{margin:0 0 6px}
.guide-invrow{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;margin:0 0 6px}
.guide-invlabel{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#7c8896;min-width:76px}
.guide-inventory .chip{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:20px;
 padding:1px 9px;margin:0 4px 4px 0;font-size:12.2px}
.guide-inventory .chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.guide-why{border-left:4px solid #f26900;background:#fff8f2;border-radius:0 12px 12px 0;padding:11px 14px;margin:12px 0;font-size:13.5px}
.guide-steps li{margin-bottom:5px}
.guide-stop li::marker{color:#b42318}
.guide-prod li::marker{color:#0d8f87}
.guide-article h4{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#46546b;margin:16px 0 5px}
@media (max-width:900px){.guide-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .guide-side{border-right:0;border-bottom:1px solid var(--line);max-height:38vh}}

/* TEMPLACE TENANT SIGN-IN */
.pw-wrap{display:flex;gap:8px;align-items:stretch}
.pw-wrap>input{flex:1}
.pw-eye{padding:0 12px;font-size:12px;font-weight:700;white-space:nowrap}

/* The map, and the plot drawn in its place when tiles cannot be fetched. A host with no height
   collapses to nothing and Leaflet renders into a zero-pixel box with no error at all. */
.map-host{border:1px solid var(--line,#e3e9f2);border-radius:14px;overflow:hidden;background:#eef3f9;min-height:220px}
.map-host:has(.map-plot){background:#fff}
.map-host .leaflet-container{height:100%;width:100%;border-radius:14px;font:inherit}
.map-plot{padding:10px}
/* A map, not a banner: capped and centred, with the aspect coming from the viewBox. */
.map-plot svg{display:block;border-radius:10px;width:100%;height:auto;max-width:860px;margin:0 auto}
.map-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:#5d6b7a;padding:8px 10px 2px}
.map-legend i{display:inline-block;width:11px;height:11px;margin-right:5px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);vertical-align:-1px}
.map-legend i.site{border-radius:3px;background:var(--brand,#1467FF)}
.map-legend i.within{border-radius:50%;background:#0a7d55}
.map-legend i.ask{border-radius:50%;background:#b26a00}
.map-legend i.beyond{border-radius:50%;background:#b3261e}

/* ---- the guide's screenshots ---- */
/* Bordered and on a tint, so a screenshot of a white screen does not bleed into the article
   around it and read as part of the page you are on. */
.guide-shot{margin:14px 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#f4f7f9}
.guide-shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.guide-shot figcaption{padding:8px 12px;font-size:11px;font-weight:750;color:var(--muted)}

/* ---- the profile a hirer is sent ---- */
.profile-pack{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.pp-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.pp-logo{max-height:40px;width:auto}
.pp-ref{font-size:11px;font-weight:750;color:var(--muted)}
.pp-person{display:flex;gap:18px;align-items:flex-start;margin-bottom:6px}
.pp-photo{width:118px;height:148px;object-fit:cover;border-radius:12px;border:1px solid var(--line);flex:0 0 auto}
.pp-nophoto{display:grid;place-items:center;text-align:center;font-size:11px;color:var(--muted);
  background:#f4f7f9;padding:8px}
.pp-person h1{margin:0 0 4px;font-size:25px}
.pp-role{margin:0 0 4px;font-weight:750;color:#2b3c4e}
.pp-weeks,.pp-subjects{margin:2px 0;font-size:12.5px;color:var(--muted)}
.profile-pack h2{font-size:15px;margin:20px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.pp-table{width:100%;border-collapse:collapse}
.pp-table th{width:32%;text-align:left;vertical-align:top;padding:7px 10px 7px 0;font-weight:750;font-size:12.5px}
.pp-table td{padding:7px 0;vertical-align:top;font-size:12.5px;border-top:1px solid var(--line)}
.pp-table tr:first-child td,.pp-table tr:first-child th{border-top:0}
.pp-dates{font-size:11px;color:var(--muted)}
.pp-yes{color:#0a7d55;font-weight:800}
.pp-no{color:#b3261e;font-weight:800}
.pp-quote{margin:0 0 10px;padding:11px 14px;background:#f4f9f8;border-left:3px solid var(--brand);
  border-radius:0 10px 10px 0;font-size:13px}
.pp-quote cite{display:block;margin-top:6px;font-style:normal;font-size:11.5px;color:var(--muted);font-weight:700}
.pp-withheld{margin-top:20px;padding:12px 14px;background:#fbfcfd;border:1px dashed #bdccda;
  border-radius:11px;font-size:11.5px;color:#42566d;line-height:1.55}
.action-tile.on{border-color:var(--brand);background:#f3faf9}

/* ---- Rich text editor (block 76) ----------------------------------------
   Used wherever controlled wording is drafted. The toolbar is deliberately
   short: a contract needs emphasis, lists and headings, and nothing a
   drafter can use to make one clause look more important than another. */
.rt-wrap{border:1px solid #cfd9e2;border-radius:12px;overflow:hidden;background:#fff}
.rt-bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:#f4f7fa;border-bottom:1px solid #e2e9f0}
.rt-btn{border:1px solid #cfd9e2;background:#fff;border-radius:7px;padding:3px 9px;font-size:11px;
 line-height:1.6;cursor:pointer;color:#2d3b4e;min-width:28px}
.rt-btn:hover{background:#eaf2f8;border-color:#9fb3c6}
.rt-btn:active{background:#dceaf5}
.rt-area{padding:12px 14px;font-size:12.5px;line-height:1.75;color:#17263a;outline:none;
 overflow:auto;max-height:46vh}
.rt-area:focus{box-shadow:inset 0 0 0 2px #cfe6ff}
.rt-area p{margin:0 0 9px}
.rt-area h3{font-size:13.5px;margin:14px 0 7px;color:#14263b}
.rt-area h4{font-size:12.5px;margin:12px 0 6px;color:#14263b}
.rt-area ul,.rt-area ol{margin:0 0 9px;padding-left:22px}
.rt-area li{margin:0 0 4px}
.rt-area u{text-underline-offset:2px}

/* 30.25: the green counterpart of .stop-panel — something saved, nothing to change. */
.go-panel{border-left:4px solid #0a7a54;background:#f1faf5;border-radius:0 12px 12px 0;padding:11px 15px;margin:10px 0;font-size:13.5px}
/* 30.29: working as a client from Templace HQ */
.hq-banner>span{flex:1;min-width:0}
.hq-banner a.btn{text-decoration:none}
.hq-signin-page{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(1200px 600px at 10% 0%,#f500b81a,transparent),radial-gradient(900px 500px at 100% 100%,#00cde81f,transparent),#f4f6fb}
.hq-signin{width:min(440px,100%)}
.wa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:12px}
.wa-card{border:1px solid var(--line,#dfe5ee);border-radius:14px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px}
.wa-card.is-current{outline:2px solid #5d2cff}
.wa-head{display:flex;gap:10px;align-items:center;min-width:0}
.wa-mark{position:relative;width:46px;height:46px;border-radius:12px;flex:0 0 46px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;overflow:hidden;background:#5d2cff}
.wa-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:3px;box-sizing:border-box}
.hq-home-brand{display:flex;align-items:center;gap:8px}
.wa-name{font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.wa-meta{font-size:12px;color:var(--muted,#5d6b7a)}
.wa-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.wa-people{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.wa-person{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line,#dfe5ee);border-radius:10px;padding:10px 12px;cursor:pointer}
.wa-person:has(input:checked){border-color:#5d2cff;background:#5d2cff0d}
.wa-person input{margin-top:3px}
.wa-search{width:min(440px,100%);padding:10px 12px;border:1px solid var(--line,#dfe5ee);border-radius:10px;font:inherit;background:#fff}
@media (max-width:760px){.hq-banner{flex-wrap:wrap;padding:8px 12px}.hq-banner>span{flex-basis:100%}}
/* 30.45 — phones, tablets, folding phones and desktops (block 148) */
.nav-toggle,.nav-backdrop{display:none}
.content{padding-left:max(var(--content-pad-x,26px),env(safe-area-inset-left));padding-right:max(var(--content-pad-x,26px),env(safe-area-inset-right))}
img,video,canvas,iframe{max-width:100%}
.content pre{white-space:pre-wrap;word-break:break-word}
@media(max-width:860px){
 .nav-toggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;order:-1}
 body.nav-open .sidebar{display:block!important;position:fixed;top:0;left:0;bottom:0;width:min(86vw,320px);z-index:600;overflow:auto;background:#fff;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));box-shadow:0 10px 40px rgba(16,26,46,.28)}
 body.nav-open .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(16,26,46,.38);z-index:599}
 .content{--content-pad-x:14px}
 .guide-strip{flex-direction:column;align-items:flex-start;gap:8px}
 .guide-arrow{display:none}
 .btn-row{flex-wrap:wrap}
 .tabs{flex-wrap:wrap}
 .version-marker{transform:scale(.78);transform-origin:bottom right;opacity:.8;bottom:max(6px,env(safe-area-inset-bottom))!important}
 .modal{max-width:100vw;padding-bottom:env(safe-area-inset-bottom)}
 .topbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-top:max(10px,env(safe-area-inset-top))}
}
@media(max-width:600px){
 table.cardify,table.cardify>tbody,table.cardify>tbody>tr,table.cardify>tbody>tr>td{display:block;width:100%;box-sizing:border-box}
 table.cardify>thead{display:none}
 table.cardify>tbody>tr{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:8px 12px;background:#fff}
 table.cardify>tbody>tr>td{border:0!important;padding:4px 0!important;text-align:left!important;white-space:normal!important}
 table.cardify>tbody>tr>td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:1px}
 table.cardify>tbody>tr>td:empty{display:none}
 .table-wrap{border:0;background:transparent}
}
html.touch-ui .tip-layer{display:none!important}
@media(pointer:coarse){
 .btn,.tab,.nav-item,.chip-btn,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea{min-height:36px}
 .btn.btn-sm,.btn-sm{min-height:32px}
 input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px}
 .link-name{min-height:28px;display:inline-flex;align-items:center}
}
/* 30.45 — big enough to tap or click, on every screen (WCAG 2.2, 2.5.8: at least 24 by 24) */
select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),.btn-sm{min-height:24px}
.link-name{min-height:24px;display:inline-flex;align-items:center}
@media(max-width:420px){
 .topbar .brand-wrap{min-width:0;max-width:100%;flex-wrap:wrap}
 .agency-switch__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* 30.45 — tablets and an open folding phone on its side: the top bar keeps everything in view */
@media(min-width:861px) and (max-width:1180px){
 .app{grid-template-rows:auto minmax(0,1fr) 38px}
 .app.with-banner{grid-template-rows:auto auto minmax(0,1fr) 38px}
 .top-search{display:none}
 .topbar{height:auto;min-height:72px;flex-wrap:wrap;gap:10px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))}
 .top-actions{flex-wrap:wrap;max-width:100%}
 .topbar .brand-wrap{min-width:0;flex:0 1 auto}
 .agency-switch__label{display:none}
 .agency-switch{max-width:200px}
 .agency-switch__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .user-chip span[style*="font-size:11px"]{max-width:150px;overflow:hidden}
}
@media(max-width:860px){.top-actions{flex-wrap:wrap;width:100%}.top-search{display:block;order:9;flex:1 1 100%;width:100%;max-width:none;min-height:40px}}
/* 30.45 — the finger sizes come after the 24-pixel floor, so a finger's 36 is not undone by it */
@media(pointer:coarse){
 .btn,.tab,.nav-item,.chip-btn,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),textarea{min-height:36px}
 .btn.btn-sm,.btn-sm{min-height:32px}
 .link-name{min-height:32px}
}
/* 30.45 — cards in a row start from the top. A <button> centres what is inside it from top to bottom, so tiles with
   less text had their icon and title pushed down and no two cards in a row lined up. */
button.action-tile,button.dept-tile,button.fw-tile,button.theme-card,button.legal-template-card,button.kpi-click{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left}
button.action-tile>*,button.dept-tile>*,button.fw-tile>*,button.theme-card>*,button.legal-template-card>*{max-width:100%}
.tile-grid,.kpi-grid{align-items:stretch}

/* 30.47 — a request from Templace waiting, said at the top */
.access-banner{background:linear-gradient(90deg,#0b1f4d,#1467ff)}
.access-banner .btn{background:#fff;color:#0b1f4d;border-color:#fff}
/* 30.47 — terms of service */
.saas-banner{background:linear-gradient(90deg,#52617a,#0b1f4d)}
.saas-banner .btn{background:#fff;color:#0b1f4d;border-color:#fff}
.saas-text h3{margin:16px 0 6px;font-size:15px}
.saas-text p{margin:0 0 8px;line-height:1.5}

/* 30.47 — notices for the agency (a request from Templace, the terms): the HQ banner's shape, not its name */
.notice-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 18px;color:#fff;font-size:13px}
@media (max-width:760px){.notice-banner{flex-wrap:wrap;padding:8px 12px}.notice-banner>span{flex-basis:100%}}

/* ===================================================== 30.50 — Connections, Ask Templace, Campaigns */
.cx-intro{margin:0 0 12px}
.cx-card{margin-bottom:16px}
.cx-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.cx-tile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
.cx-tile input{position:absolute;top:14px;right:14px}
.cx-tile strong{padding-right:26px}
.cx-tile span{color:var(--muted);font-size:13px;line-height:1.45}
.cx-tile.is-on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.cx-tile.is-off{opacity:.55;cursor:not-allowed}
.cx-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.cx-held{color:var(--good);font-weight:600;font-size:13px}
.cx-missing{color:var(--muted);font-size:13px}
.cx-copy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0}
.cx-copy code{background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;overflow-wrap:anywhere;max-width:100%}
.cx-hooks{margin:10px 0;padding:10px 12px;border:1px dashed var(--line);border-radius:12px}
.cx-hooks summary{cursor:pointer;font-weight:600}
.cx-tpl{margin:8px 0 0;padding-left:18px;font-size:13px}
.cx-msg,.cmp-msg{min-height:1.2em;margin-top:8px;font-size:13px}
.cx-msg.good,.cmp-msg.good{color:var(--good)}
.cx-msg.bad,.cmp-msg.bad{color:var(--bad)}
.cx-pointer{margin-bottom:14px}

.ask-top{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,#fff),#fff);border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line))}
.ask-top span{color:var(--brand);font-size:15px}
.ask-backdrop{position:fixed;inset:0;z-index:2000;background:rgba(15,25,45,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 16px;animation:askIn .14s ease-out}
@keyframes askIn{from{opacity:0}to{opacity:1}}
.ask-palette{width:min(880px,100%);max-height:80vh;display:flex;flex-direction:column;background:var(--panel);border-radius:20px;box-shadow:0 30px 80px rgba(10,20,40,.35);overflow:hidden;border:1px solid var(--line)}
.ask-bar-form{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ask-spark{font-size:22px;color:var(--brand)}
.ask-bar-form input{flex:1;min-width:0;border:0;outline:0;font-size:18px;background:transparent}
.ask-bar-form kbd{font:12px/1 ui-monospace,Menlo,monospace;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.ask-body{overflow:auto;padding:18px}
.ask-foot{padding:8px 18px;border-top:1px solid var(--line);background:var(--canvas)}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px}
.ask-chip{border:1px solid var(--line);background:var(--canvas);border-radius:999px;padding:7px 13px;font-size:13px;text-align:left}
.ask-chip:hover{border-color:var(--brand);color:var(--brand)}
.ask-chip.is-saved{background:color-mix(in srgb,var(--accent) 12%,#fff)}
.ask-busy{padding:28px;text-align:center;color:var(--muted)}
.ask-figure{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--brand)}
.ask-head{font-size:17px;font-weight:700;margin:6px 0 4px}
.ask-by{margin-top:2px}
.ask-table{max-height:340px;overflow:auto;margin-top:12px}
.ask-actions{margin-top:14px}
.ask-chart{display:grid;gap:6px;margin:14px 0}
.ask-bar{display:grid;grid-template-columns:minmax(90px,200px) 1fr auto;align-items:center;gap:10px;font-size:13px}
.ask-bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-bar-track{height:12px;border-radius:6px;background:var(--canvas);overflow:hidden}
.ask-bar-fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.ask-bar-value{font-variant-numeric:tabular-nums;font-weight:600}
.ask-summary{margin-top:10px}
.ask-answer.is-none strong{font-size:16px}
.ask-mic{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--canvas);color:var(--brand);flex:none}
.ask-mic.is-on{background:var(--brand);color:#fff;border-color:var(--brand);animation:askPulse 1.2s ease-in-out infinite}
@keyframes askPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 20%,transparent)}}
.ask-chip.is-library{background:color-mix(in srgb,var(--brand) 10%,#fff);border-color:color-mix(in srgb,var(--brand) 35%,var(--line));font-weight:600}
.ask-confirm{margin-top:16px;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));background:color-mix(in srgb,var(--brand) 5%,var(--panel))}
.ask-confirm.is-kept{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 7%,var(--panel))}
.ask-confirm-q{margin:0 0 4px;font-size:15px;line-height:1.45}
.ask-confirm-label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand);margin-bottom:2px}
.ask-change,.ask-keep{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);display:grid;gap:10px}
.ask-say{display:grid;gap:6px;font-weight:600;font-size:13px}
.ask-say-row{display:flex;gap:8px}.ask-say-row input{flex:1;min-width:0}
.ask-conds{display:grid;gap:8px}
.ask-cond{display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(110px,1fr) minmax(90px,1fr) auto;gap:8px;align-items:center}
.ask-cond-x{padding:6px 11px}
.ask-shape{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ask-shape label,.ask-keep>label{display:grid;gap:5px;font-size:13px;font-weight:600}
.ask-offer{display:flex!important;align-items:flex-start;gap:8px;font-weight:500!important}
.ask-change[hidden],.ask-keep[hidden]{display:none!important}
.ask-change-err{color:var(--bad);margin:0;min-height:0}
.ask-change-err:empty{display:none}
@media(max-width:620px){.ask-cond{grid-template-columns:1fr 1fr}.ask-cond-x{justify-self:start}.ask-shape{grid-template-columns:1fr}.ask-bar-form kbd{display:none}}

.cmp-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
.cmp-list{display:flex;flex-direction:column;gap:8px;position:sticky;top:0}
.cmp-item{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:10px 12px}
.cmp-item.is-on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
.cmp-builder{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.cmp-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.cmp-name{flex:1;min-width:0;font-size:20px;font-weight:700;border:0;border-bottom:1px dashed var(--line);padding:6px 2px;background:transparent}
.cmp-step{padding:14px 0;border-top:1px solid var(--line)}
.cmp-step h4{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.cmp-step h4 span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px}
.cmp-reach{margin:10px 0;padding:10px 12px;border-radius:12px;background:var(--canvas)}
.cmp-people summary{cursor:pointer;font-weight:600;margin:6px 0}
.cmp-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:10px}
.cmp-inline{display:inline-flex;align-items:center;gap:8px}
.cmp-inline input{width:90px}
.cmp-preview{display:grid;gap:10px;margin:8px 0 14px}
.cmp-bubble{max-width:560px;padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.cmp-bubble pre{white-space:pre-wrap;font:inherit;margin:6px 0 0}
.cmp-bubble.is-email{border:1px solid var(--line);background:#fff}
.cmp-bubble.is-sms{background:#e9eef5;border-bottom-left-radius:4px}
.cmp-bubble.is-wa{background:#dcf8c6;border-bottom-left-radius:4px}
.cmp-replies{padding-left:18px}
.cmp-empty .cmp-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bad-text{color:var(--bad)}
.cmp-prefs{margin:14px 20px}
@media (max-width:900px){.cmp-layout{grid-template-columns:1fr}.cmp-list{position:static}.cx-pair{grid-template-columns:1fr}}
@media (max-width:560px){.ask-backdrop{padding:0}.ask-palette{max-height:100vh;height:100%;border-radius:0}.ask-figure{font-size:34px}.ask-bar{grid-template-columns:90px 1fr auto}}