:root{
 --navy:#0C1C33; --navy-hover:#18305A;
 --hdr1:#102745; --hdr2:#0A1628;
 --rail1:#2D6FF0; --rail2:#1E54D6;
 --accent:#2563EB; --accent-hover:#1D4ED8; --accent-soft:#DBEAFE;
 --purple:#5B4AB7; --purple-soft:#EEE9FB;
 --success:#16A34A; --success-soft:#E7F6ED;
 --warning:#D97706; --warning-soft:#FEF3E2;
 --danger:#DC2626; --danger-soft:#FDECEC;
 --bg:#F4F6FB; --card:#FFFFFF; --border:#E5E7EB;
 --row-hover:#F1F5F9; --sel:#E3EDFE;
 --tp:#0F172A; --ts:#475569; --tod:#F8FAFC; --todm:#94A3B8;
 /* Side-menu label colour. The Stage 7 mockup used --todm (#94A3B8) here; the owner
    ruled the resting label a MUTED WHITE, so the rail carries its own token rather than
    borrowing the top bar's muted grey. This is the one deliberate divergence between the
    live stylesheet and the approved mockup, and it is the whole of ruling Q1 (27 Jul). */
 --railtxt:#C9D6EC;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif;
 font-size:14px;color:var(--tp);background:var(--bg);}
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.ic{flex:none;vertical-align:middle}

/* ---- top chrome bar (48px) ---- */
.topbar{height:48px;flex:none;background:linear-gradient(135deg,var(--hdr1),var(--hdr2));
 display:flex;align-items:center;padding:0 16px 0 18px;color:var(--tod);}
.topbar img{height:30px;display:block}
.topbar .spacer{flex:1}
.topbar .company{font-weight:600;color:var(--tod);font-size:13px}
.topbar .sep{color:#33517a;margin:0 12px}
.topbar .user{color:var(--todm);font-size:13px}
.topbar .signout{color:#7FA8F5;font-size:13px;margin-left:12px;cursor:pointer;text-decoration:none}
.topbar .rev{color:var(--todm);font-size:12px;margin-left:16px}

/* ---- body split ---- */
.body{display:flex;flex:1;min-height:0}
.rail{width:220px;flex:none;background:var(--navy);padding:14px 0 8px;overflow-y:auto;
 display:flex;flex-direction:column}
.rail::-webkit-scrollbar{width:8px}.rail::-webkit-scrollbar-thumb{background:#22375c;border-radius:4px}
.nav{display:flex;align-items:center;gap:14px;margin:2px 10px;padding:9px 12px;border-radius:8px;
 color:var(--railtxt);cursor:pointer;user-select:none;font-size:14px;white-space:nowrap}
.nav:hover{background:var(--navy-hover);color:#dbe6fb}
.nav.active{background:linear-gradient(180deg,var(--rail1),var(--rail2));color:#fff;font-weight:600}
.nav.active .ic{color:#fff}
.nav .ic{color:var(--todm)}
.nav.exit{margin-top:12px}

/* ---- content host ---- */
.host{flex:1;min-width:0;overflow:auto;padding:24px}
.host::-webkit-scrollbar{width:10px}.host::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px}
.screen{display:none}.screen.on{display:block}

/* ---- generic bits ---- */
.h1{font-size:22px;font-weight:700;margin:0}
.sub{color:var(--ts);font-size:13px;margin:4px 0 0}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;
 box-shadow:0 1px 2px rgba(15,23,42,.04);padding:22px 24px;margin-bottom:16px}
.card h2{font-size:17px;font-weight:600;margin:0 0 2px}
.card .note{color:var(--ts);font-size:12.5px;font-style:italic;margin:0 0 14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid2>.card{margin:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:#334155;margin:0 0 5px}
.hint{color:var(--ts);font-size:11.5px;font-style:italic;margin:5px 0 0}
.inp{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:14px;
 color:var(--tp);background:#fff;font-family:inherit}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sel{position:relative}
.sel .inp{appearance:none;padding-right:34px;cursor:pointer;background:#fff}
.sel .cv{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#64748b}
.sel.yes .inp{color:var(--success);font-weight:600}
.sel.no  .inp{color:var(--danger);font-weight:600}
.locked{background:#f3f5f9;color:#475569}
.lockic{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}
.placeholder{color:#94a3b8}
.btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:9px 16px;font-size:13.5px;
 font-weight:600;color:#1e293b;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:inherit}
.btn:hover{background:#f8fafc}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{background:var(--accent-hover)}
.btn.purple{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.danger{background:#fff;border-color:#f3c9c9;color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft)}

/* ---- pill / chip ---- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
 font-size:12px;font-weight:600}
.chip.ip{background:var(--warning-soft);color:#a4560a;border:1px solid #f2d09a}
.chip.ap{background:var(--accent-soft);color:#1e40af;border:1px solid #bcd3fb}
.chip.wn{background:var(--success-soft);color:#15803d;border:1px solid #b7e0c6}
.chip.ls{background:var(--danger-soft);color:#b91c1c;border:1px solid #f3c9c9}
.chip.ro{background:var(--accent-soft);color:#1e40af}

/* ---- editor header + tabs ---- */
.crumb{color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;margin-right:12px}
.ehead{display:flex;align-items:center;margin-bottom:14px}
.ehead .name{font-size:22px;font-weight:700}
.ehead .acts{margin-left:auto;display:flex;gap:8px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;margin-bottom:18px}
.tabs::-webkit-scrollbar{height:8px}.tabs::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.tab{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px 9px;
 color:var(--ts);cursor:pointer;font-size:12.5px;white-space:nowrap;border-bottom:2px solid transparent}
.tab .ic{color:#94a3b8}
.tab:hover{color:#334155}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tab.active .ic{color:var(--accent)}
.etab{display:none}.etab.on{display:block}
.statusbar{display:flex;align-items:center;gap:8px;color:var(--success);font-size:12.5px;
 margin-top:8px;padding-top:12px}
.statusbar .ic{color:var(--success)}

/* ---- tables ---- */
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{text-align:left;color:var(--ts);font-weight:600;font-size:12px;padding:13px 22px;
 background:#f8fafc;border-bottom:1px solid var(--border);white-space:normal;vertical-align:bottom;line-height:1.25}
table.grid td{padding:14px 22px;border-bottom:1px solid #eef1f6;color:var(--tp)}
table.grid tr:hover td{background:var(--row-hover)}
table.grid tr.sel td{background:var(--sel)}
table.grid tr.red td{background:var(--danger);color:#fff;font-weight:600}
table.grid tr.red:hover td{background:#c81f1f}
.mono{font-variant-numeric:tabular-nums}

/* ---- dashboard specifics ---- */
.statcards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;
 align-items:center;gap:12px}
.stat .sic{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.stat .lab{font-size:12px;color:var(--ts)}
.stat .val{font-size:20px;font-weight:700}
.legend{display:flex;flex-direction:column;gap:9px}
.legrow{display:flex;align-items:center;font-size:13px}
.dot{width:9px;height:9px;border-radius:50%;margin-right:9px;flex:none}
.legrow .lname{flex:1}
.legrow .lval{font-weight:700;margin-right:8px}
.legrow .lpct{color:var(--ts);width:34px;text-align:right}
.pipe{display:flex;justify-content:space-between;align-items:flex-start;position:relative;padding:4px 6px}
.pipe:before{content:"";position:absolute;top:28px;left:44px;right:44px;height:2px;background:#e2e8f0}
.pnode{display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1;flex:1}
.pnode .ring{width:56px;height:56px;border-radius:50%;border:3px solid;display:flex;align-items:center;
 justify-content:center;background:#fff}
.pnode .pl{font-size:12px;color:var(--ts)}
.pnode .pv{font-size:22px;font-weight:700}
.pnode .pm{font-size:11px;color:#94a3b8}
.due{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.duecard{border:1px solid var(--border);border-radius:10px;padding:14px}
.duecard .dtop{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.duecard .dl{font-size:12px;color:var(--ts)}
.duecard .dv{font-size:22px;font-weight:700;margin:2px 0}
.duecard .dm{font-size:12px;color:var(--tp)}
.duecard .dd{font-size:11px;color:#94a3b8;margin-top:3px}
.km{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kmc{background:#f8fafc;border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:center}
.kmc .kic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.kmc .kl{font-size:12px;color:var(--ts)}
.kmc .kv{font-size:19px;font-weight:700}
.kmc .ks{font-size:11px;color:#94a3b8}
.banner{border-radius:10px;padding:12px 14px;font-size:13px;margin-top:12px}
.banner.warn{color:#a4560a}
.banner.err{background:var(--danger-soft);border-left:4px solid var(--danger);color:#b91c1c}
.banner.err .sub2{color:#c2626a;font-size:12px}
.act{display:flex;align-items:center;gap:10px;padding:9px 2px}
.act .aic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none}
.act .an{font-weight:600;font-size:13px}
.act .at{font-size:11.5px;color:var(--ts)}
.info-strip{background:#eef3fb;border:1px solid #dbe6f7;border-radius:8px;padding:11px 14px;
 display:flex;align-items:center;gap:10px;font-size:13px;margin-top:14px}
.info-strip .n{margin-left:auto;font-weight:700}

/* details panel */
.split{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.split.solo{grid-template-columns:1fr}
.dpanel{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 20px}
.dpanel .dh{display:flex;align-items:center;justify-content:space-between}
.dpanel .x{color:#94a3b8;cursor:pointer;font-size:18px;line-height:1}
.dpanel .dname{font-size:19px;font-weight:700;margin:8px 0 14px}
.drow{display:flex;justify-content:space-between;font-size:13px;padding:5px 0}
.drow .k{color:var(--ts)}.drow .v{font-weight:600;text-align:right}
.dsec{font-size:12px;font-weight:700;color:var(--ts);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px}
.dacts{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.dacts .btn{justify-content:center;width:100%}
.small{font-size:12px}

.row1{display:grid;grid-template-columns:1fr;gap:16px 20px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px}
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 20px}
.row5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 20px}
.capbadge{font-size:11px;font-weight:600;color:#1e40af;background:var(--accent-soft);border:1px solid #bcd3fb;
 border-radius:999px;padding:2px 9px;margin-left:9px;vertical-align:middle}
.addbar{display:flex;justify-content:flex-end;margin:2px 0 4px}
.aent{display:flex;align-items:center;gap:16px;border:1px solid var(--border);border-radius:10px;
 padding:11px 14px;margin-bottom:8px;background:#fbfcfe}
.aent .ainfo{flex:1;min-width:0}
.aent .an{font-size:13px;font-weight:600;color:var(--tp)}
.aent .as{font-size:11.5px;color:var(--ts);margin-top:2px}
.afigs{display:flex;gap:20px;flex:none}
.afig{text-align:right}
.afig span{display:block;font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.afig b{font-size:13px;font-variant-numeric:tabular-nums;color:var(--tp)}
.btn.sm{padding:6px 11px;font-size:12px}
.warnrow{display:inline-flex;align-items:center;gap:7px;background:var(--danger-soft);border:1px solid #f3c9c9;
 color:#b91c1c;border-radius:8px;padding:6px 10px;font-size:11.5px;font-weight:600;margin-top:7px}
.app.auth .topbar,.app.auth .rail{display:none}.app.auth .host{padding:0;overflow:auto}

/* ============================================================================
   Web-shell additions. Everything above this line is the approved Stage 7
   mockup stylesheet, carried over verbatim so the built shell and the approved
   design share one definition of every colour, spacing and control. Below are
   only the classes the live application needs that a static mockup did not:
   anchor/button resets so NavLink and form buttons render identically to the
   mockup's divs and spans, the sign-in card (the mockup styled it inline), the
   later-stage panel, and the notice bar.
   ========================================================================= */

/* NavLink renders an anchor; the rail form renders a button. Both must look
   exactly like the mockup's .nav divs.

   COLOUR IS DELIBERATELY NOT SET HERE. These two selectors are MORE SPECIFIC than
   .nav, .nav:hover and .nav.active, so any colour declared here silently wins over
   all three. They previously carried `color:inherit`, which resolved to the body text
   colour (#0F172A) — near-black on the navy rail, contrast about 1.05:1 — and left
   every side-menu label invisible on every screen, with the selected label dark on
   blue instead of white. Nothing failed, nothing warned, and the whole rail read as
   icons only. Killing the anchor's link colour is what `text-decoration:none` plus the
   .nav colour already do; the button inherits .nav for the same reason. If a colour is
   ever needed on these selectors, it must restate the full resting/hover/active set. */
.rail a.nav{text-decoration:none}
.rail form.railform{margin:0}
.rail button.nav{width:100%;background:none;border:none;font:inherit;
 text-align:left;cursor:pointer}
.topbar .signoutform{display:inline;margin:0 0 0 12px}
.topbar button.signout{background:none;border:none;padding:0;font:inherit;
 color:#7FA8F5;font-size:13px;cursor:pointer}
.topbar .signoutform + .rev{margin-left:16px}

/* ---- sign-in (the mockup styled this screen inline) ---- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
 background:linear-gradient(135deg,#102745,#0A1628);padding:24px}
.authcard{width:100%;max-width:400px;background:#fff;border-radius:14px;padding:34px 32px;
 box-shadow:0 18px 50px rgba(8,17,33,.42)}
.authlogo{height:46px;display:block;margin:0 auto 22px}
.authhead{text-align:center;margin-bottom:24px}
.authtitle{font-size:18px;font-weight:700}
.authsub{font-size:13px;color:#64748b;margin-top:4px}
.authrow{display:flex;align-items:center;justify-content:space-between;margin:4px 0 18px}
.authremember{display:flex;gap:7px;align-items:center;font-size:12.5px;color:#475569}
.authremember input{accent-color:#2563EB}
.authforgot{font-size:12.5px;color:#2563EB;cursor:pointer}
.authsubmit{width:100%;justify-content:center;padding:11px}
.authnote{font-size:11.5px;color:#94a3b8;text-align:center;line-height:1.6;margin:20px 0 0}
.autherror{background:var(--danger-soft);border:1px solid #f3c9c9;color:#b91c1c;
 border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:14px}

/* ---- tender list toolbar (the mockup used inline styles here) ---- */
.toolrow{display:flex;gap:10px;margin-bottom:14px}
.searchbox{flex:1;position:relative}
.searchic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8}
.searchbox .inp{padding-left:38px}
.filterrow{display:flex;gap:12px;align-items:flex-end;margin-bottom:14px}
.flabel{font-size:12px;color:#475569;font-weight:600;display:block}
.fdate{width:150px}
.fstatus{width:190px}
.gridcard{padding:0;overflow:hidden}
.gridscroll{overflow-x:auto}
.emptycell{color:var(--ts);text-align:center;padding:22px 12px !important}
.overduechip{background:#fff;color:#b91c1c}

/* ---- later-stage panel and in-page notice ---- */
.stagecard{max-width:640px;padding:26px 28px}
.stagetitle{font-size:16px;font-weight:700;margin-bottom:8px}
.stagetext{color:var(--ts);line-height:1.65;margin:0 0 18px}
.stagecard .btn{display:inline-flex;text-decoration:none}
.stagenotice{display:flex;align-items:center;justify-content:space-between;gap:12px;
 background:var(--accent-soft);border:1px solid #bcd3fb;color:#1e40af;border-radius:10px;
 padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.stagenotice.error{background:var(--danger-soft);border-color:#f3c9c9;color:#b91c1c}

/* Delivery 40 — the picker-side reader/platform compatibility warning (owner Q2=B). Rendered
   directly beneath the offending picker field the moment an incompatible reader is chosen. */
/* Delivery 41 — the inline name editor on a Company Users row (owner Q1=A). */
.nameedit{display:flex;gap:7px;align-items:center}
.nameedit .inp.sm{max-width:130px}
.nameinit{font-size:11.5px;color:var(--muted);margin-top:4px}
.noname{color:#B45309;font-style:italic}

.readerwarn{display:flex;align-items:flex-start;gap:9px;background:var(--danger-soft);
 border:1px solid #f3c9c9;color:#b91c1c;border-radius:10px;padding:9px 12px;font-size:12.5px;
 margin-top:7px;line-height:1.45}
.readerwarn .ic{flex:none;margin-top:1px}
.inp.inp-bad{border-color:#f3a1a1;box-shadow:0 0 0 3px var(--danger-soft)}
.stagenotice .x{cursor:pointer;font-size:16px;line-height:1}

/* ---- dashboard (mockup screen classes not covered by the shared sheet) ---- */
.dashfilters{display:flex;gap:10px;align-items:flex-end}
.donutwrap{display:flex;gap:22px;align-items:center}
.donutbox{position:relative;flex:none}
.donutcentre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
 justify-content:center;text-align:center}
.donutcentre .dc1{font-size:11px;color:#64748b}
.donutcentre .dc2{font-size:19px;font-weight:700}
.donutcentre .dc3{font-size:11px;color:#94a3b8}
.donutlegend{flex:1}
.actempty{font-style:italic;color:#94a3b8;font-size:12px;margin-bottom:10px}
.actgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ---- modal editor and confirmation (Stage 8 feature 2: Clients and Sites) ----
   The approved mockup has no Clients or Sites screen and therefore no modal, so this
   block is new. It deliberately reuses the mockup's own tokens — the card radius,
   border, shadow direction and spacing — rather than introducing a second visual
   language: a .modalcard is a .card lifted onto a scrim. */
.modalscrim{position:fixed;inset:0;background:rgba(8,17,33,.46);display:flex;
 align-items:center;justify-content:center;padding:24px;z-index:60}
.modalcard{width:100%;max-width:760px;max-height:88vh;display:flex;flex-direction:column;
 background:var(--card);border:1px solid var(--border);border-radius:12px;
 box-shadow:0 18px 50px rgba(8,17,33,.42)}
.modalcard.confirmcard{max-width:520px}
.modalhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:18px 24px 14px;border-bottom:1px solid var(--border);font-size:16px}
.modalhead .x{cursor:pointer;font-size:20px;line-height:1;color:#94a3b8}
.modalbody{padding:20px 24px;overflow-y:auto}
.modalfoot{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 18px;
 border-top:1px solid var(--border)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:#fff}
.btn.danger:disabled:hover{background:#fff}

/* Long free-text columns (client and site comments) ellipsize with the full value on hover,
   matching the desktop grid's TextTrimming + ToolTip treatment. */
td.trunc{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Audit Log and Archive (Stage 8 feature 3) ----
   Neither screen exists in the approved mockup (owner ruling Q1=A: build now in the mockup's
   own design language, with a preview to review). Everything below reuses tokens already
   defined above rather than introducing new ones — the filter row is the existing .toolrow
   with labelled inputs in it, and the row action buttons are the existing .btn at grid scale. */
.field.inlinefield{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.inlinefield label{font-size:11px;font-weight:600;letter-spacing:.04em;
 text-transform:uppercase;color:var(--ts)}
.field.inlinefield .inp{height:34px;padding:4px 10px;min-width:150px}
td.actioncell{white-space:nowrap}
td.actioncell .btn{padding:4px 12px;font-size:12px;margin-right:6px}
td.actioncell .btn:last-child{margin-right:0}

/* ---- Catalogue and Company Details (Stage 8 feature 4) ----
   Owner ruling Q1=B: a design was produced, reviewed and approved before either screen was
   built, so everything below implements an approved design rather than proposing one. Every
   declaration reuses a token already defined above — no new colour, radius or shadow is
   introduced. */

/* page-head action clusters (the mockup used inline styles for these) */
.headacts{display:flex;gap:8px}

/* the read-only notice's trailing chip sits hard right of the message */
.stagenotice .roright{margin-left:auto}
.stagenotice .ic{color:#1e40af;flex:none}

/* catalogue grid: right-aligned numerics, a read-only price column, inactive rows */
.num{text-align:right}
td.cdesc{max-width:430px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr.inact td{color:#94a3b8;background:#fbfcfe}
.chip.inactchip{background:#f1f5f9;color:#64748b;border:1px solid var(--border);
 font-size:10.5px;padding:1px 8px;margin-left:8px}
.gridfoot{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--border);
 background:#f8fafc;color:var(--ts);font-size:12.5px}
.gridfoot .n{font-weight:700;color:var(--tp);font-variant-numeric:tabular-nums}
.gridfoot .dotsep{color:#94a3b8}
.gridfoot .footright{margin-left:auto}

/* the catalogue filter row: two selects and a checkbox, at grid scale */
.filterrow{display:flex;gap:12px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap}
.filterrow .field.inlinefield{margin-bottom:0}
select.inp{appearance:none;cursor:pointer;
 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9 L12 15 L18 9'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 10px center;padding-right:34px}
.fbrand{width:210px}
.fcat{width:230px}
.showinact{display:flex;align-items:center;gap:8px;font-size:13px;color:#334155;height:36px;
 font-weight:600}
.showinact input{accent-color:#2563EB;width:15px;height:15px}

/* company details: the logo panel and its empty state */
.logobox{display:flex;gap:20px;align-items:flex-start}
.logoframe{width:250px;height:118px;border:1px solid var(--border);border-radius:10px;background:#fff;
 display:flex;align-items:center;justify-content:center;padding:14px;flex:none}
.logoframe img{max-width:100%;max-height:100%;display:block}
.logoframe.empty{background:#f8fafc;border-style:dashed;color:#94a3b8;font-size:12.5px;
 font-style:italic;text-align:center;padding:16px}
.logometa{flex:1;min-width:0}
.logoname{font-size:13px;font-weight:600;color:var(--tp);word-break:break-all}
.cdlogofile{margin-bottom:10px}
.cdlogohint{margin-top:0}
.cdaddr{min-height:88px;resize:vertical;font-family:inherit}

/* ======================================================================
   Step 8.5 delivery 1 — the tender editor. New classes only; every
   colour, radius and font reuses the existing tokens (approved design
   proposal, 27 Jul 2026).
   ====================================================================== */
/* editor chrome */
.ehead{display:flex;align-items:center;margin-bottom:14px;gap:12px}
.ehead .crumb{color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;text-decoration:none}
.ehead .name{font-size:22px;font-weight:700}
.ehead .acts{margin-left:auto;display:flex;gap:8px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;margin-bottom:18px}
.tabs::-webkit-scrollbar{height:8px}
.tabs::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.tab{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px 9px;
 color:var(--ts);cursor:pointer;font-size:12.5px;white-space:nowrap;border-bottom:2px solid transparent}
.tab:hover{color:#334155}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
/* the totals strip */
.calcbar{display:flex;align-items:center;background:var(--card);border:1px solid var(--border);
 border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.04);padding:12px 20px;margin-top:4px;flex-wrap:wrap}
.calcbar .cell{padding:0 22px;border-right:1px solid var(--border)}
.calcbar .cell:first-child{padding-left:0}
.calcbar .cell.last{border-right:none}
.calcbar .kl{font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.4px}
.calcbar .kv{font-size:17px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.calcbar .kv.margin{color:var(--success)}
.calcbar .status{margin-left:auto;font-size:12.5px;color:#64748b;text-align:right;padding-left:18px}
/* finance parameters grid */
.fingrid{border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:560px;overflow-y:auto}
.fingrid table{width:100%;border-collapse:collapse;font-size:13px}
.fingrid th{background:#F8FAFC;color:#334155;text-align:left;font-size:12px;font-weight:600;
 padding:8px 14px;border-bottom:1px solid var(--border);position:sticky;top:0}
.fingrid th.num,.fingrid td.num{text-align:right;font-variant-numeric:tabular-nums}
.fingrid td{padding:6px 14px;border-bottom:1px solid #F1F5F9}
.fingrid tr.grp td{background:#F1F5F9;font-weight:700;color:var(--tp);font-size:12.5px}
.fingrid input{width:96px;text-align:right;padding:4px 8px;border:1px solid var(--border);border-radius:6px;
 font-size:13px;font-family:inherit;font-variant-numeric:tabular-nums}
.fingrid input:disabled{background:#f8fafc;color:#94a3b8}
.custbadge{color:#B54708;font-weight:600;font-size:12.5px}
/* later-delivery message inside the editor */
.etabstage{text-align:center;padding:46px 24px;color:#64748b}
.etabstage .stagetitle{font-size:16px;font-weight:700;color:var(--tp);margin-bottom:8px}
.etabstage p{max-width:560px;margin:0 auto;line-height:1.6}
/* prices-locked banner */
.lockbanner{display:flex;gap:12px;align-items:flex-start;background:var(--warning-soft);
 border:1px solid #F5D9A8;border-radius:10px;padding:13px 16px;margin-bottom:16px;color:#7A4E06;
 font-size:13px;line-height:1.5}
.lockbanner .ic{color:var(--warning);margin-top:1px;flex:none}
/* deferred card (Margin & Pricing Weight until delivery 5) */
.deferred{position:relative}
.deferred .inner{opacity:.38;pointer-events:none;filter:grayscale(.35)}
.deferred .badge{position:absolute;inset:auto 12px 12px 12px;background:var(--purple-soft);
 border:1px solid #D9CFF3;color:var(--purple);border-radius:8px;padding:8px 12px;
 font-size:12.5px;font-weight:600;text-align:center}
/* General tab locked auto fields */
.inp.lockedauto{background:#f8fafc;color:#475569}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* The roomy column spacing costs 95px of table width. On a narrow screen that is
   width the table does not have, so it steps back down rather than clipping a column. */
@media (max-width:1400px){
  table.grid th{padding:12px 14px}
  table.grid td{padding:13px 14px}
}
@media (max-width:1200px){
  table.grid th{padding:11px 11px}
  table.grid td{padding:12px 11px}
}

/* Q2=B - below 1500 the details panel floats over the page instead of taking a
   column of its own, so the list keeps the full width of the screen underneath it. */
@media (max-width:1750px){
  .split{grid-template-columns:1fr}
  .dpanel{position:fixed;top:64px;right:20px;width:340px;z-index:30;
    max-height:calc(100vh - 84px);overflow:auto;
    box-shadow:0 18px 44px rgba(15,23,42,.28)}
}

/* Delivery 2 — EACS System Design & Field Devices */
.omitted-note{background:#fff;border:1px dashed #cbd5e1}
.rowgrid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.rowgrid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0 16px}
/* Delivery 3 — same family as rowgrid2/4, one more column, plus the CCTV Headend
   Design 85/15 selector+Qty split (owner instruction 28-Jul-2026). */
.rowgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
.rowgrid85{display:grid;grid-template-columns:85fr 15fr;gap:0 16px}
.yesnorow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:13.5px}
.addbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.addbar h2{margin:0}
.addedrow{background:#f8fafc;border:1px solid var(--border);border-radius:6px;padding:10px 14px;
 margin-bottom:8px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.addedrow .figs{display:flex;gap:16px;margin-top:6px;flex-wrap:wrap;font-size:12px}
.addedrow .figs .money{color:var(--accent);font-weight:600}
.addedrow .figs .labour{color:var(--purple);font-weight:600}
.disabledrow{opacity:.5}

/* Delivery 5 — Travel & Accommodation, T&C. New classes only; every colour, radius
   and font reuses the existing tokens (approved design proposal, 28 Jul 2026).
   .travelgrid reuses the .fingrid visual language (bordered table, grey header,
   inline inputs) already established for Tender Settings' finance grid, widened to
   ten fixed-width data columns to match the desktop's own stage grid one-for-one. */
.travelgrid{border:1px solid var(--border);border-radius:10px;overflow:hidden;overflow-x:auto}
.travelgrid table{width:100%;border-collapse:collapse;font-size:12.5px}
.travelgrid th{background:#F8FAFC;color:#334155;text-align:right;font-size:11px;font-weight:600;
 padding:9px 10px;border-bottom:1px solid var(--border);white-space:normal;line-height:1.25;vertical-align:bottom}
.travelgrid th:first-child{text-align:left;min-width:150px}
.travelgrid td{padding:8px 10px;border-bottom:1px solid #F1F5F9;text-align:right;font-variant-numeric:tabular-nums}
.travelgrid td:first-child{text-align:left}
.travelgrid tr:last-child td{border-bottom:none}
.travelgrid .stagename{font-weight:600;color:var(--tp)}
.travelgrid .stagescope{color:var(--ts);font-size:11px;margin-top:1px}
.travelgrid input{width:64px;text-align:right;padding:4px 6px;border:1px solid var(--border);border-radius:6px;
 font-size:12.5px;font-family:inherit;font-variant-numeric:tabular-nums}
.travelgrid .ro{display:inline-block;min-width:36px;padding:4px 6px;border-radius:6px;
 background:#F3F5F8;color:var(--ts);font-weight:600}
.travelgrid .dollarcell{display:inline-flex;align-items:center;gap:2px}
.travelgrid .dollarcell span{color:#94a3b8}
/* T&C clause rows — checkbox + editable wrapped text, optional category picker and remove */
.tcrow{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid #F1F5F9}
.tcrow:last-child{border-bottom:none}
.tcrow input[type=checkbox]{margin-top:9px;width:15px;height:15px;accent-color:#2563EB;flex:none}
.tcrow textarea.txt{flex:1;border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:13px;
 font-family:inherit;color:var(--tp);background:#fff;line-height:1.5;resize:vertical;min-height:38px}
.tcrow.newterm .cat{width:150px;flex:none;margin-top:2px}
.tcrow .rm{flex:none;color:#94a3b8;cursor:pointer;font-size:16px;line-height:1;padding:6px 4px;background:none;border:none;font-family:inherit}
.tcrow .rm:hover{color:var(--danger)}

/* ---- Tender Risk Scoring (delivery 6) ------------------------------------------------
   A read-only decision aid. The weight read-out deliberately uses the desktop's own
   "weight XX%" text idiom (ThemeRowTemplate) rather than any stacked colour bar, which
   exists nowhere in Rev 1.10.3. */
.rsk-top{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap}
.rsk-gaugewrap{flex:none;width:250px;display:flex;flex-direction:column;align-items:center;
 justify-content:center;padding:4px 0 2px;border-right:1px solid var(--border)}
.rsk-score{font-size:44px;font-weight:700;line-height:1;margin-top:6px}
.rsk-score .of{font-size:17px;font-weight:600;color:var(--ts)}
.rsk-band{margin-top:9px;font-size:13px;font-weight:600;padding:3px 12px;border-radius:999px}
.rsk-band.healthy{background:var(--success-soft);color:#15803d;border:1px solid #b7e0c6}
.rsk-band.watch{background:var(--warning-soft);color:#a4560a;border:1px solid #f2d09a}
.rsk-band.high{background:var(--danger-soft);color:#b91c1c;border:1px solid #f3c9c9}
.rsk-legend{display:flex;gap:12px;margin-top:11px;font-size:11px;color:var(--ts)}
.rsk-legend span{display:inline-flex;align-items:center;gap:4px}
.rsk-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.rsk-right{flex:1;min-width:340px}
.rsk-verdict{border:1px solid var(--border);border-radius:9px;padding:10px 13px;
 font-size:13.5px;background:#FBFDFF;margin-bottom:11px}
.rsk-gatebanner{display:flex;align-items:flex-start;gap:8px;border-radius:9px;
 padding:10px 13px;font-size:13px;font-weight:600;margin-bottom:12px}
.rsk-gatebanner.ok{background:var(--success-soft);color:#15803d;border:1px solid #b7e0c6}
.rsk-gatebanner.tripped{background:var(--danger-soft);color:#b91c1c;border:1px solid #f3c9c9}
.rsk-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}
.rsk-cols{display:flex;gap:26px;flex-wrap:wrap}
.rsk-col{flex:1;min-width:290px}
.rsk-colhd{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--ts);
 text-transform:uppercase;margin:0 0 8px}
.rsk-barrow{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.rsk-barrow .lbl{width:150px;flex:none}
.rsk-barrow .lbl .n{display:block;font-size:12.5px;font-weight:600;color:var(--tp)}
.rsk-barrow .lbl .d{display:block;font-size:11px;color:var(--ts)}
.rsk-track{flex:1;height:8px;border-radius:999px;background:#EDF1F7;overflow:hidden}
.rsk-fill{height:100%;border-radius:999px}
.rsk-val{width:30px;flex:none;text-align:right;font-size:12.5px;font-weight:700}
.rsk-sigrow{display:flex;align-items:baseline;gap:10px;padding:7px 0;
 border-bottom:1px solid #F1F5F9}
.rsk-sigrow:last-of-type{border-bottom:0}
.rsk-sigrow .n{font-weight:600;font-size:13px}
.rsk-sigrow .d{font-size:11px;color:var(--ts)}
.rsk-sigrow .sp{flex:1}
.rsk-sigrow .v{font-size:13px;font-weight:600}
.rsk-sigrow .s{width:30px;text-align:right;font-size:12.5px;font-weight:700}
.rsk-guide{font-size:12.5px;line-height:1.55}
.rsk-guide p{margin:0 0 9px}
.rsk-guide .gh{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--accent);
 text-transform:uppercase;margin:0 0 8px}
.rsk-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ts);
 background:#F8FAFC;border:1px solid var(--border);border-radius:999px;padding:3px 11px}
.rsk-weightrow{display:flex;align-items:baseline;gap:8px;font-size:12.5px;padding:3px 0}
.rsk-weightrow .sp{flex:1;border-bottom:1px dotted #E2E8F0;transform:translateY(-3px)}
.rsk-weightrow .w{font-weight:700;color:var(--tp)}
.rsk-invalid{color:#b91c1c;font-size:11.5px;margin:5px 0 0}

/* ---- Delivery 7 — Tender Overview and the bill of materials ---- */
.bwpanel{border:1px solid #D8B24A;background:#FDF8EC;border-radius:10px;margin-bottom:16px;overflow:hidden}
.bwhead{background:#F2E2B8;border-bottom:1px solid #E0CB92;padding:9px 14px;font-weight:700;font-size:12px;color:#6B5211}
.bwrow{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid #F0E6CF}
.bwrow:last-child{border-bottom:0}
.bwcat{flex:none;font-size:10px;font-weight:700;color:#7A5E10;background:#FBF1D8;border:1px solid #D8B24A;
 border-radius:3px;padding:2px 7px;height:fit-content}
.bwmsg{font-size:12.5px;color:#3B3B3B}
.tsgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin-top:12px}
.srow{display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:6px 0;border-bottom:1px solid #E4E7EC}
.srow b{font-weight:600;white-space:nowrap}
.hr2{height:2px;background:#D0D5DD;margin:10px 0}
.mixwrap{text-align:center}
.mixcap{font-size:11.5px;color:var(--ts);font-weight:600}
.mixsvg{margin:8px 0 2px;filter:drop-shadow(0 3px 9px rgba(31,42,55,.20))}
.mixtot{font-size:11.5px;color:var(--ts);margin-top:6px}
.mixbig{font-size:22px;font-weight:700;color:#1F3864}
.legend{margin-top:12px;text-align:left}
.totalcards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.totalcards .tcard{background:#F8FAFC;border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.totalcards .tcard .kl{font-size:11.5px;color:var(--ts)}
.totalcards .tcard .kv{font-size:20px;font-weight:700;margin-top:4px}
.totalcards .tcard .kv.margin{color:var(--success)}
table.ovg{width:100%;border-collapse:collapse;font-size:13px}
table.ovg th{text-align:left;color:var(--ts);font-weight:700;font-size:11.5px;padding:8px 0;border-bottom:1px solid var(--border)}
table.ovg td{padding:7px 0;border-bottom:1px solid #EEF1F6}
table.ovg .n{text-align:right}
table.ovg tr.tot td{font-weight:600}
.selrow{display:flex;align-items:center;gap:10px;margin:10px 0 12px}
.selrow label{font-weight:600;font-size:13px}
.bpkg{border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:18px}
.bphead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bphead .bpn{font-size:15px;font-weight:600;flex:1}
.bphead .bpm{font-size:11.5px;color:var(--ts)}
.bphead .bpc{font-weight:600}
.bcat{margin:0 0 14px 12px}
.bchead{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:5px}
.bchead .bcs{color:var(--ts);font-weight:600;font-size:12px}
table.bt{width:100%;border-collapse:collapse;font-size:12.5px}
table.bt th{text-align:left;background:#F8FAFC;color:var(--ts);font-weight:600;font-size:11.5px;
 padding:8px 10px;border-bottom:1px solid var(--border)}
table.bt td{padding:9px 10px;border-bottom:1px solid #EEF1F6;vertical-align:top}
table.bt tr:hover td{background:var(--row-hover)}
table.bt .n{text-align:right;white-space:nowrap}
table.bt .d{width:44%}
table.bt th.editcol,table.bt td.editcol{background:var(--purple-soft)}
.cellinp{padding:5px 8px;font-size:12.5px;text-align:right;width:110px;display:inline-block}
table.bt .adj{font-weight:700}
table.bt .cut{font-weight:700;color:#C0392B}
.modalback{position:fixed;inset:0;background:rgba(12,28,51,.45);display:flex;align-items:center;
 justify-content:center;z-index:60}
.modal{background:#fff;border-radius:12px;padding:20px 22px;width:min(720px,92vw);max-height:86vh;overflow:auto;
 box-shadow:0 18px 48px rgba(12,28,51,.28)}
.modalhead{display:flex;align-items:center;font-size:17px;font-weight:600;margin-bottom:10px}
.modalhead .x{margin-left:auto;color:#94a3b8;cursor:pointer;font-size:20px;line-height:1}

/* Delivery 8 — Proposal Builder / Client Follow-Up / Handover */
.banner.ok{background:var(--success-soft);border-left:4px solid var(--success,#15803d);color:#15803d}
textarea.txt{border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:13px;font-family:inherit;min-height:70px}

/* =====================================================================================
   Delivery 10 — Catalogue editing, supplier price import wizard, Scheduled changes,
   directory import/export. Styling follows the approved Delivery 10 design mockup Rev 1.
   ===================================================================================== */

/* Catalogue header actions wrap on narrower widths; Save changes keeps the right edge. */
.headacts.wrapacts{flex-wrap:wrap;justify-content:flex-end;row-gap:8px;max-width:760px}

/* The grid + history pane split. The pane appears only with a selection, so the grid
   keeps the full width until one is made (the desktop's own behaviour). */
.catsplit{display:flex;gap:18px;align-items:flex-start}
.catsplit .catgrid{flex:1;min-width:0}

/* Editable Unit Cost cell; amber while a typed value is pending Save changes. */
.costin{width:110px;text-align:right;font-family:'SF Mono','Cascadia Mono',Consolas,monospace;
 font-size:13px;padding:6px 9px}
.costin.pending{border-color:var(--warning);background:var(--warning-soft);font-weight:700}

/* Inactive rows and their chip (the grid dims them; the chip names it). */
tr.inact td{color:var(--todm)}
.chip.inactchip{background:#EEF1F6;color:#64748B;border:1px solid var(--border);margin-left:8px}

/* Row link ("View", "Rollback to this", "Close"). */
.lnk{color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.lnk:hover{text-decoration:underline}

/* Price history pane. */
.histpane{width:380px;flex:0 0 380px;padding:0;overflow:hidden}
.histhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;
 border-bottom:1px solid var(--border);font-size:14px}
.histbody{padding:10px 18px 14px;max-height:520px;overflow-y:auto}
.histrow{padding:11px 0;border-bottom:1px solid var(--border)}
.histrow:last-child{border-bottom:none}
.histvals{font-size:13.5px;color:var(--tp)}
.histmeta{font-size:12px;color:var(--ts);margin:3px 0 5px}
.histrow.pendingrow{background:var(--warning-soft);margin:0 -18px;padding:11px 18px;
 border-bottom:1px solid #f2d09a}
.chip.pendchip{background:#fff;color:#a4560a;border:1px solid #f2d09a;margin-left:8px}

/* Footer tip under the catalogue grid. */
.tipfoot{font-size:12.5px;color:var(--ts);margin:14px 2px 0}

/* Shared info / error / confirm dialog. Bodies are pre-formatted (desktop dialog text
   carries its own line breaks and indentation), so pre keeps them verbatim. */
.modalacts{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.dlgbody{font-family:inherit;font-size:13.5px;color:var(--tp);white-space:pre-wrap;margin:10px 0 0;
 max-height:52vh;overflow-y:auto;line-height:1.5}
.dlgerr{color:var(--danger)}

/* File-pick buttons (Reload Price List, Import Clients/Sites List): a label styled as a
   button wrapping a hidden InputFile, so the browser dialog opens from a real control. */
.filebtn{position:relative;overflow:hidden}
.filebtn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Supplier price import wizard. */
.wizmodal{width:min(880px,94vw);max-height:88vh;overflow-y:auto}
.wizhead{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);
 padding-bottom:12px;margin-bottom:12px}
.wizhead .lnk{margin-left:auto}
.wizstep{font-size:12.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);
 padding:3px 10px;border-radius:999px}
.wizmaps{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.wizmaps .field{min-width:200px;flex:1}
.wizsample{max-height:180px;margin-top:10px}
.wizreview{max-height:300px;margin:10px 0}
.wizsummary{font-size:13px;font-weight:600;color:var(--ts);margin:2px 0 8px}
.wizresult{font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.wizapplyrow{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.wizdate{width:170px}
tr.flagrow td{background:var(--warning-soft)}
.ambigcard{border:1px solid #f2d09a;background:var(--warning-soft);border-radius:10px;
 padding:12px 14px;margin:10px 0;font-size:13px;display:flex;flex-direction:column;gap:8px}

/* Scheduled changes. */
.sumstrip{display:flex;gap:14px;margin-bottom:16px}
.sumcard{background:var(--card);border:1px solid var(--border);border-radius:10px;
 padding:12px 18px;display:flex;flex-direction:column;gap:2px;min-width:150px}
.sumlabel{font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ts)}
.sumval{font-size:18px;font-weight:700;color:var(--tp)}
.sectionhead{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
 color:var(--ts);margin:18px 2px 8px}
.batchcard{display:flex;align-items:center;gap:16px;padding:14px 18px;margin-bottom:10px}
.batchcard.dimmed{opacity:.62}
.batchmain{flex:1;min-width:0}
.batchtitle{font-size:14px;display:flex;align-items:center;gap:10px}
.batchmeta{font-size:12.5px;color:var(--ts);margin-top:3px}
.batchacts{display:flex;gap:8px;flex-shrink:0}
.chip.schedchip{background:var(--accent-soft);color:var(--accent-hover);border:1px solid #bcd3fb}
.chip.livechip{background:var(--success-soft);color:#15803d;border:1px solid #b9e3c8}
.chip.cancchip{background:#EEF1F6;color:#64748B;border:1px solid var(--border)}
.emptystate{text-align:center;padding:38px 24px}
.emptystate b{font-size:15px}
.emptystate .sub{margin:6px 0 0}

/* Clients / Sites export menu. */
.expwrap{position:relative}
.expmenu{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);
 border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.14);
 min-width:230px;padding:6px;z-index:40}
.expitem{display:block;padding:9px 12px;border-radius:7px;font-size:13.5px;color:var(--tp);
 text-decoration:none;cursor:pointer}
.expitem:hover{background:var(--row-hover)}
.expsep{height:1px;background:var(--border);margin:5px 8px}

/* Action links are BUTTONS styled as links (an anchor with href="" hands the click to the
   router and navigates — the defect the Delivery 10 walkthrough caught live). */
button.lnk,button.expitem{background:none;border:none;font-family:inherit;text-align:left;width:auto}
button.expitem{width:100%}

/* ---- Delivery 11: the New Tender Response card (the desktop's IsCreating card) ---- */
.split{position:relative}
.newtender{position:absolute;left:50%;transform:translateX(-50%);top:36px;
 width:520px;max-width:92%;background:var(--card);border:1px solid var(--border);border-radius:12px;
 padding:24px;box-shadow:0 12px 34px rgba(15,23,42,.14);z-index:5}
.newtender h2{font-size:18px;font-weight:700;margin:0 0 16px}
.newtender .flabel{display:block;margin:0 0 4px}
.newtender .inp{margin-bottom:12px}
.newtender select.catsel{margin-bottom:20px;appearance:auto}
.newtender .btnrow{display:flex;justify-content:flex-end;gap:8px}
.gridcard.dimmed{filter:saturate(.92);opacity:.55;pointer-events:none}

/* ---------------------------------------------------------------------------
   Delivery 12 — Proposal Library authoring (rulings Q1=A, Q2=B, Q3=A). Mirrors the approved
   mockup SecurityEdge_SaaS_ProposalLibrary_Mockup_Rev1.html. Sector chip colours are the
   desktop hexes verbatim; the multi-sector group container is the desktop's tinted panel.
   --------------------------------------------------------------------------- */
.plactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.plhelpcap{color:var(--ts);font-size:13px;margin-right:2px}
.plhelpbtn{width:26px;height:26px;border-radius:13px;border:1.5px solid var(--accent);
 background:transparent;color:var(--accent);font-weight:700;font-size:14px;cursor:pointer;
 line-height:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.plhelpbtn:hover{background:var(--accent-soft)}
.btn.subtle{border-color:transparent;background:none;color:var(--accent);padding:6px 8px}
.btn.subtle:hover{background:var(--accent-soft)}
.plgrid{display:flex;gap:16px;align-items:flex-start}
.pllist{width:320px;flex:none;padding:14px 14px 16px}
.pledit{flex:1;min-width:0}
.pllisthead{display:flex;align-items:baseline;justify-content:space-between;margin:2px 4px 10px}
.pllisthead b{font-size:14px}
.plcounter{color:var(--ts);font-size:12px}
.plitem{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer;margin:2px 0}
.plitem:hover{background:var(--row-hover)}
.plitem.sel{background:var(--sel)}
.plitem .plname{flex:1;font-size:13.5px}
.plusertag{font-size:10.5px;color:var(--ts);border:1px solid var(--border);border-radius:9px;
 padding:1px 7px;background:#F8FAFC}
.plgroup{background:#F8FAFC;border:1px solid var(--accent-soft);border-left:3px solid var(--accent);
 border-radius:8px;padding:8px 8px 6px;margin:2px 0 6px}
.plgrouphead{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 6px}
.plgname{font-weight:600;font-size:13.5px}
.plgcount{color:var(--ts);font-size:11.5px}
.plrow{display:flex;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer;margin:1px 0}
.plrow:hover{background:var(--row-hover)}
.plrow.sel{background:var(--sel)}
.plchip{display:inline-block;border-radius:10px;padding:2px 10px;font-size:11.5px;font-weight:600;
 background:#EEF2F7;color:#475569}
.plchip.gov{background:#EEE9FB;color:#5B4AB7}
.plchip.com{background:#FAEEDA;color:#854F0B}
.plchip.hea{background:#E1F5EE;color:#0F6E56}
.plchip.def{background:#E6F1FB;color:#0C447C}
.plsectorrow{display:flex;gap:8px;align-items:center}
.plsectorrow .plsector{width:220px;background:#F8FAFC;color:var(--ts)}
.pldesc{min-height:180px;resize:vertical;line-height:1.5}
.plimgblock{border:1px dashed var(--border);border-radius:10px;padding:16px;background:#FAFBFD}
.plnoimg{color:var(--ts);font-size:13px;margin:0 0 12px}
.plimg{display:block;max-width:100%;max-height:220px;margin:0 0 12px;border:1px solid var(--border);border-radius:6px}
.plimgbtns{display:flex;gap:8px}

/* ---- Delivery 13: Product Library page (reuses the pl* library layout) ---- */
.prditem { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.prdcat { font-size:12px; color:var(--ts); }
.prdbody { min-height:110px; resize:vertical; }
.prddlgbody { min-height:64px; resize:vertical; }

/* ---- Delivery 13: Upload Page Information preview modal (owner Q3=A) ---- */
.sharecard { width:min(720px, calc(100vw - 48px)); }
.sharebody { max-height:min(62vh, 560px); overflow-y:auto; }
.sharefilesum { margin:0 0 4px; font-weight:600; }
.shareorigin { margin:0 0 10px; font-size:13px; color:var(--ts); }
.sharewarn { display:flex; flex-direction:column; gap:2px; margin:0 0 10px; padding:8px 10px;
  border:1px solid #d9a53f; background:#fdf6e7; border-radius:6px; font-size:13px; }
.sharegrouphead { margin:10px 0 4px; font-weight:600; color:var(--tp); font-size:13px;
  border-bottom:1px solid var(--border); padding-bottom:3px; }
.sharerow { display:flex; align-items:flex-start; gap:8px; padding:6px 2px; }
.sharerow + .sharerow { border-top:1px dashed var(--border); }
.sharerow.identical { opacity:0.75; }
.sharerow input[type="checkbox"] { margin-top:3px; }
.sharerowbody { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sharerowname { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.shareversions, .sharedetail { font-size:12px; color:var(--ts); }
.sharenote { font-size:12px; color:#8a6d1a; }
.sharecompare { display:flex; flex-direction:column; gap:1px; font-size:12px; color:var(--ts); }
.sharefoot { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sharefootlines { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sharesummary { font-size:13px; color:var(--ts); }
.shareblocked { font-size:13px; color:var(--danger); font-weight:600; }
.sharefootbtns { display:flex; gap:8px; flex:none; }

/* ---- Delivery 14: CCTV Calculator (.cctv* block, per the approved mockup) ---- */
.cctvgrid{display:grid;grid-template-columns:124px minmax(170px,1fr) 74px 64px 64px 86px 50px 66px 66px;
 gap:6px;align-items:center;margin-bottom:6px}
/* Column headers are sentence case: the desktop's CaptionText style is not uppercased, and the
   house convention for grid headers (table.grid th / .fingrid th) is 12px/600 sentence case. */
.cctvcap{font-size:12px;font-weight:600;color:var(--ts)}
.cctvcap.r{text-align:right;padding-right:6px}
.cctvhead{margin-bottom:8px}
.cctvres{font-size:12.5px;font-weight:600;color:#334155}
.cctvrow .inp{padding:6px 8px;font-size:13px}
.cctvrow .inp.r{text-align:right}
.cctvval{text-align:right;padding-right:6px;font-size:13px;color:#64748b;font-variant-numeric:tabular-nums}
.cctvval.strong{color:#0f172a;font-weight:600;padding-right:0}
.cctvnote{font-size:12px;color:#64748b;line-height:1.55;margin:8px 0 0}
.cctvsub{font-size:12px;color:#64748b;line-height:1.55;margin:0 0 10px}
.cctvtot{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
/* Delivery 28: the corrected totals render as ONE ordered column — the two-column grid is what
   let the usable-capacity row sit beside the raw drive row and read as its partner. */
.cctvtot28{grid-template-columns:1fr}
.cctvcaution{font-size:12px;color:#8a2b2b;background:#fdf0f0;border-left:3px solid #c0392b;
 padding:6px 10px;margin:8px 0 0;line-height:1.5}
.cctvtrow{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:13px}
.cctvtlab{color:#475569}
.cctvtval{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cctvhr{border:0;border-top:1px solid var(--border);margin:14px 0}
.cctvrec{display:grid;grid-template-columns:230px 1fr;gap:12px;margin-bottom:10px;align-items:start}
.cctvreccat{font-weight:600;font-size:13px;color:#0f172a}
/* The engine builds multi-line recommendation summaries; a plain block would collapse them. */
.cctvrecsum{white-space:pre-line;font-size:12.5px;color:#64748b;line-height:1.5}
.cctvacts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.cctverr{background:#FDECEC;border:1px solid #DC2626;border-radius:6px;padding:12px;margin-top:12px;
 color:#B91C1C;font-size:12.5px;line-height:1.6}

/* ---- Delivery 15: User Guide + Info (.ug* / info block, per the approved mockup) ---- */
.ugwrap{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.uglist{border:1px solid var(--border);border-radius:10px;background:#fff;max-height:640px;overflow:auto}
.ugitem{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid #EEF1F6;cursor:pointer;font-size:12.5px}
.ugitem:last-child{border-bottom:0}
.ugitem:hover{background:#F8FAFC}
.ugitem.sel{background:#EEF3F8}
.ugnum{color:#94a3b8;font-variant-numeric:tabular-nums;min-width:18px;text-align:right}
.ugtitle{color:#334155;font-weight:500}
.ugpane{border:1px solid var(--border);border-radius:10px;background:#fff;padding:18px 22px;max-height:640px;overflow:auto}
.ugh{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px}
.ugp{font-size:13px;color:#334155;line-height:1.65;margin:0 0 10px}
.ugsub{font-size:13.5px;font-weight:700;color:#1F3864;margin:16px 0 6px}
.ugbul{font-size:13px;color:#334155;line-height:1.6;margin:0 0 6px;padding-left:16px;position:relative}
.ugbul::before{content:'\2013';position:absolute;left:0;color:#2E5A8C;font-weight:700}
.ugcall{display:flex;gap:10px;border-radius:8px;padding:10px 12px;margin:10px 0;font-size:12.5px;line-height:1.55;
 background:#FDF8EC;border:1px solid #D8B24A;color:#3B3B3B}
.ugcallkind{flex:none;font-size:10px;font-weight:700;color:#7A5E10;background:#FBF1D8;border:1px solid #D8B24A;
 border-radius:3px;padding:2px 7px;height:fit-content;text-transform:uppercase}
.ugfig{margin:12px 0}
.ugimg{max-width:100%;border:1px solid var(--border);border-radius:8px;display:block}
.ugfigcap{font-size:11.5px;color:#64748b;margin-top:5px;font-style:italic}
.ugtable{width:100%;border-collapse:collapse;font-size:12.5px;margin:10px 0}
.ugtable th{background:#1F3864;color:#fff;text-align:left;padding:7px 10px;font-weight:600;font-size:12px}
.ugtable td{padding:7px 10px;border-bottom:1px solid #EEF1F6;color:#334155}
.ugtable tbody tr:nth-child(even){background:#F8FAFC}
.ugsearchrow{display:flex;gap:8px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
.ugresults{font-size:12px;color:#64748b}
.ugresultlist{border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:12px;
 max-height:230px;overflow:auto}
.ugresult{padding:9px 14px;border-bottom:1px solid #EEF1F6;cursor:pointer}
.ugresult:last-child{border-bottom:0}
.ugresult:hover{background:#F8FAFC}
.ugresulthead{font-size:12px;font-weight:600;color:#1F3864}
.ugresultsnip{font-size:12px;color:#64748b;line-height:1.5;margin-top:2px}
.d15sub{font-size:12.5px;color:#475569;line-height:1.65;margin:0 0 10px}
.infobadges{display:flex;flex-wrap:wrap;gap:8px}
.infobadge{font-size:11.5px;font-weight:600;color:#1F3864;background:#EEF3F8;border:1px solid #C7D6E8;
 border-radius:999px;padding:4px 12px}
.founder{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.foundername{font-size:22px;font-weight:700;color:#0f172a;margin:2px 0 8px}
.founderrole{font-size:12px;font-weight:600;color:#2E5A8C;text-transform:uppercase;letter-spacing:.5px}
.timeline{border-left:2px solid #C7D6E8;padding-left:16px}
.tlrow{position:relative;padding:5px 0;font-size:13px;font-weight:600;color:#334155}
.tlrow::before{content:'';position:absolute;left:-22px;top:11px;width:9px;height:9px;border-radius:50%;
 background:#2E5A8C;border:2px solid #fff}
.detailgrid{display:grid;grid-template-columns:200px 1fr;gap:6px 18px;font-size:13px}
.detaillab{color:#64748b}
.detailval{color:#0f172a;font-weight:600}
.disclaimer{font-size:12px;color:#475569;line-height:1.7;white-space:pre-line;
 border:1px solid var(--border);border-radius:8px;padding:14px;background:#FCFCFD}

/* ---- Delivery 21 — the company Tender Settings page (approved Mockup Rev 3) ----
   Every colour, radius and font reuses the existing tokens. .srow already exists at page
   scope for the Tender Responses detail panel, so this page's row is SCOPED under .setgrid —
   the CSS-specificity lesson of v0.7.2, applied at design time rather than found again. */
.cattabs{display:flex;gap:0;border-bottom:1px solid var(--border)}
.ctab{display:flex;align-items:center;gap:8px;padding:10px 18px 9px;color:var(--ts);cursor:pointer;
 font-size:13.5px;white-space:nowrap;border-bottom:2px solid transparent;font-weight:600;
 background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.ctab:hover{color:#334155}
.ctab.active{color:var(--accent);border-bottom-color:var(--accent)}
.ctab:disabled{cursor:default}
.ctab .dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.catbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.infbanner{background:var(--accent-soft);border:1px solid #bcd3fb;border-radius:8px;color:#1e40af;
 padding:8px 14px;font-size:12.5px;line-height:1.5;max-width:660px}
.infbanner.warnb{background:var(--warning-soft);border-color:#f2d09a;color:#8a4b06}
.setgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.setgrid .card{margin:0}
.setgrid .card.wide{grid-column:1 / -1}
.setgrid .srow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 0;
 border-bottom:1px solid #f4f6fa}
.setgrid .srow:last-child{border-bottom:none}
.slabel{font-size:13px;color:#334155}
.sinp{display:flex;align-items:center;gap:6px;flex:none}
.sinp .inp{width:104px;text-align:right;padding:7px 10px}
.sinp .inp:disabled{background:#f3f5f9;color:#475569}
.unit{color:#64748b;font-size:12.5px;min-width:20px}
.unit.suf{min-width:34px}

/* Delivery 30 — the shared "How to enter your cameras" guidance (owner-approved 3 Aug 2026).
   Rendered on the CCTV Calculator and on the tender editor's CCTV tab from one shared list. */
.cctvguidelead{color:var(--ts);line-height:1.6;margin:6px 0 10px;font-size:13px}
.cctvguidelist{color:var(--ts);line-height:1.7;margin:0;padding-left:18px;font-size:13px}
.cctvguidelist li{margin:0 0 2px}

/* ---------------------------------------------------------------------------
   DELIVERY 31 — the AI Prompt Library drawer (owner ruling Q5=B).

   IT FLOATS. It is fixed to the viewport and overlays the page; it never
   reserves a column. Delivery 1 shipped a permanently reserved 356px detail
   panel that clipped the status column at EVERY viewport width, and that is the
   defect this positioning exists to avoid. Nothing below participates in the
   page's grid, so the Proposal Builder's three-column layout is unchanged
   whether the drawer is open or shut.

   Width is 520px (owner-approved against the mockup), capped at 92vw so it can
   never exceed the viewport on a narrow screen.
   --------------------------------------------------------------------------- */
.aipl-btn{background:var(--purple);color:var(--tod);border:0;border-radius:8px;padding:9px 16px;
  font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  min-height:36px}
.aipl-btn:hover{background:#4C3EA0}
.aipl-scrim{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:900;border:0;padding:0;
  margin:0;cursor:default}
.aipl{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:var(--card);
  z-index:901;display:flex;flex-direction:column;box-shadow:-12px 0 34px rgba(15,23,42,.22);
  border-left:1px solid var(--border);font-size:13.5px}
.aipl-hd{background:linear-gradient(135deg,var(--hdr1),var(--hdr2));color:var(--tod);
  padding:14px 18px;display:flex;align-items:center;gap:10px;flex:none}
.aipl-hd .t{font-weight:600;font-size:15px}
.aipl-hd .v{color:var(--todm);font-size:12px}
.aipl-hd .sp{flex:1}
.aipl-hd .x{background:transparent;border:1px solid #33517a;color:var(--todm);border-radius:6px;
  padding:5px 10px;font-size:12px;cursor:pointer}
.aipl-hd .x:hover{color:var(--tod);border-color:#4a6ea8}
.aipl-tool{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;
  gap:10px;flex:none;flex-wrap:wrap}
.aipl-tool .chip{background:var(--purple-soft);color:#3F3288;border:1px solid #D9D0F5;
  border-radius:8px;padding:7px 13px;font-weight:600;font-size:12.5px;display:inline-flex;
  align-items:center;gap:6px;cursor:pointer;text-decoration:none}
.aipl-tool .chip:hover{background:#E4DCF8}
.aipl-tool .nm{color:var(--ts);font-size:12.5px}
.aipl-tool .none{color:var(--ts);font-size:12.5px;font-style:italic}
.aipl-tool .gear{margin-left:auto}
.aipl-set{padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg);flex:none}
.aipl-set .lbl{font-weight:600;font-size:12.5px;margin-bottom:3px}
.aipl-set .hint{color:var(--ts);font-size:12px;margin:0 0 8px;line-height:1.45}
.aipl-set .row{display:flex;gap:8px;align-items:center}
.aipl-set input{flex:1;border:1px solid var(--border);border-radius:8px;padding:8px 11px;
  font-size:13px;font-family:inherit;min-width:0}
.aipl-set .presets{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.aipl-set .presets .cap{color:var(--ts);font-size:12.5px;margin-right:2px}
.aipl-err{color:var(--danger);font-size:12.5px;margin-top:7px}
.aipl-srch{padding:11px 18px 0;flex:none}
.aipl-srch input{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 12px;
  font-size:13.5px;box-sizing:border-box;font-family:inherit}
.aipl-steps{padding:12px 18px 4px;flex:none}
.aipl-first{background:var(--warning-soft);border:1px solid #F2D09A;border-radius:9px;
  padding:9px 12px;display:flex;align-items:center;gap:8px;margin-bottom:11px}
.aipl-first b{color:var(--warning);font-size:12.5px}
.aipl-first .req{background:var(--warning);color:#fff;font-size:10.5px;font-weight:600;
  border-radius:20px;padding:2px 8px;margin-left:auto}
.aipl-steps ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.aipl-steps li{display:flex;align-items:center;gap:6px;color:var(--ts);font-size:12.5px}
.aipl-steps .n{width:18px;height:18px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);font-size:11px;font-weight:600;display:flex;align-items:center;
  justify-content:center;flex:none}
.aipl-co{margin:12px 18px 0;border:1px solid var(--border);border-radius:9px;padding:9px 12px;flex:none}
.aipl-co .lbl{color:var(--ts);font-size:11.5px;margin-bottom:3px}
.aipl-co .val{color:var(--tp);font-weight:600;display:flex;align-items:center}
.aipl-co .auto{margin-left:auto;color:var(--ts);font-weight:400;font-size:11.5px}
.aipl-co .missing{color:var(--ts);font-weight:400}
.aipl-list{flex:1;overflow-y:auto;padding:12px 18px 22px}
.aipl-card{border:1px solid var(--border);border-radius:11px;margin-bottom:11px;background:#fff}
.aipl-card>.top{padding:12px 14px;display:flex;gap:11px;cursor:pointer;align-items:flex-start;
  width:100%;background:none;border:0;text-align:left;font:inherit}
.aipl-card .num{width:24px;height:24px;border-radius:7px;background:var(--accent-soft);
  color:var(--accent);font-weight:700;font-size:12.5px;display:flex;align-items:center;
  justify-content:center;flex:none;margin-top:1px}
.aipl-card .ttl{font-weight:600;color:var(--tp);line-height:1.35}
.aipl-card .pur{color:var(--ts);font-size:12.5px;margin-top:3px;line-height:1.45}
.aipl-card .needs{display:inline-block;margin-top:7px;color:var(--ts);font-size:11.5px;
  background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:2px 9px}
.aipl-card .chev{margin-left:auto;color:var(--ts);flex:none}
.aipl-body{border-top:1px solid var(--border);padding:13px 14px}
.aipl-body .flabel{color:var(--ts);font-size:11.5px;font-weight:600;margin-bottom:4px}
.aipl-body .instr{color:var(--tp);line-height:1.5;margin-bottom:12px;white-space:pre-wrap}
.aipl-sec{border-radius:9px;padding:9px 12px;margin-bottom:9px}
.aipl-sec .h{font-weight:600;font-size:12.5px;margin-bottom:5px}
.aipl-sec ul{margin:0;padding:0;list-style:none}
.aipl-sec li{display:flex;gap:7px;color:var(--tp);font-size:12.5px;line-height:1.5;margin-bottom:3px}
.aipl-sec li .b{flex:none}
.sec-inc{background:var(--success-soft);border:1px solid #C9E7D5}.sec-inc .h{color:var(--success)}
.sec-dni{background:var(--danger-soft);border:1px solid #F4CFCF}.sec-dni .h{color:var(--danger)}
.sec-req{background:var(--accent-soft);border:1px solid #C3D9FB}.sec-req .h{color:var(--accent)}
.aipl-copy{background:var(--purple);color:#fff;border:0;border-radius:8px;padding:9px 15px;
  font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  width:100%;justify-content:center;margin-top:2px}
.aipl-copy:hover{background:#4C3EA0}
.aipl-copied{background:var(--success-soft);border:1px solid #C9E7D5;color:var(--success);
  border-radius:8px;padding:9px 15px;font-size:13px;font-weight:600;text-align:center;margin-top:2px}
.aipl-fb{margin-top:9px;border:1px dashed #C3D9FB;background:#F7FAFF;border-radius:9px;padding:9px 11px}
.aipl-fb .h{color:var(--ts);font-size:11.5px;margin-bottom:5px}
.aipl-fb textarea{width:100%;height:120px;border:1px solid var(--border);border-radius:7px;
  padding:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  box-sizing:border-box;resize:vertical;color:var(--tp)}
.aipl-empty{color:var(--ts);font-size:13px;padding:14px 2px}

/* ---------------------------------------------------------------------------
   DELIVERY 32 (v0.7.39) — Company User Management.
   Every class here is prefixed usr- or scoped under one, because a bare class
   name at page scope collided with an existing one once already (the Delivery
   10 mockup incident, §10.4) and the lesson is applied at design time.
   --------------------------------------------------------------------------- */
.usrseats{margin-bottom:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.usrseats .n{display:flex;align-items:baseline;gap:8px}
.usrseats .n b{font-size:26px;font-weight:700;color:var(--hdr1)}
.usrseats .n span{font-size:13px;color:var(--ts)}
.usrseats .bar{height:26px;width:1px;background:var(--border);flex:none}
.usrseats .av{font-size:13px;color:var(--ts)}
.usrseats .sp{flex:1}
.usrseats .set{font-size:12.5px;color:var(--ts);font-style:italic}

.usradd{margin-bottom:16px}
.usradd .row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.usradd .row .f{flex:1;min-width:280px}
.usradd .row .r{min-width:220px}
.usradd .lbl{font-weight:600;font-size:12.5px;margin-bottom:4px}
.usradd .expl{color:var(--ts);font-size:12.5px;margin:12px 0 0;line-height:1.5}
.usradd .expl b{color:var(--tp)}

.usrhd{padding:16px 18px 10px}
.usrhd h2{margin:0}
.usrfoot{color:var(--ts);font-size:12.5px;margin:0;padding:12px 18px 16px;font-style:italic}

.mebadge{background:var(--sel);color:var(--hdr1);border-radius:5px;padding:2px 7px;
  font-size:11px;font-weight:600;margin-left:6px}
.ston{color:#15803d;font-weight:600}
.stoff{color:var(--ts);font-weight:600}
.ownnote{color:var(--ts);font-size:12.5px;font-style:italic}
.grid tr.off td{color:var(--ts)}
.grid th.ra,.grid td.ra{text-align:right}
.grid td.nw{white-space:nowrap}
.inp.sm{padding:5px 8px;font-size:12.5px;width:auto}
.btn.sm{padding:6px 11px;font-size:12.5px}

.usrpw{margin-bottom:16px;border-color:#8FBF7F;background:var(--success-soft)}
.usrpw h2{color:#166534}
.usrpw .note{font-style:normal;color:var(--tp)}
.usrpw .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.usrpw .pw{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;font-weight:700;
  letter-spacing:1px;background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:11px 18px;user-select:all}

/* Delivery 32 — the console's seat cell carries its own control rather than a
   fourth action button, which wrapped the action row at ordinary widths. */
.seatcell{white-space:nowrap}
.seatcell a{font-size:12px;color:var(--accent);text-decoration:underline;cursor:pointer}
.seatedit{background:var(--bg);padding:16px 18px}
.seatedit .row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.seatedit .lbl{font-weight:600;font-size:12.5px;margin-bottom:4px}
.seatedit .note{color:var(--ts);font-size:12.5px;font-style:italic;max-width:520px;line-height:1.5}
.seatedit .num{width:120px}

/* ------------------------------------------------------------------------
   Delivery 33 (v0.7.40) — tender ownership and visibility.
   Scoped under their own class names rather than reusing a bare element
   selector: a bare .row already exists at page scope for the detail panel,
   and Delivery 10's mockup incident (and Delivery 21's answer to it) is the
   reason this is done at design time rather than found again later.
   ------------------------------------------------------------------------ */
.scopeseg { display: flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.scopeseg .btn { border: 0; border-radius: 0; box-shadow: none; white-space: nowrap; }
.scopenote { margin-top: 10px; padding: 9px 12px; background: #EEF3F8;
             border-left: 3px solid #2E5A8C; border-radius: 4px;
             font-size: 12.5px; color: #1F3864; max-width: 1120px; }
.ownercell { white-space: nowrap; }
.ownercell .youtag { color: #64748b; font-size: 11px; }
.ownername { white-space: nowrap; font-weight: 600; }
.consequence { font-size: 12.5px; color: #334155; line-height: 1.6; background: #EEF3F8;
               border-left: 3px solid #2E5A8C; padding: 11px 13px; border-radius: 4px;
               margin-top: 14px; }
.auditnote { margin: 12px 0 0; font-size: 11.5px; color: #64748b; }
.refusal { padding: 34px 30px; max-width: 780px; }
.refusal .rtitle { font-size: 17px; font-weight: 600; color: #1F3864; margin-bottom: 10px; }
.refusal .rbody { font-size: 13.5px; color: #475569; line-height: 1.7; margin-bottom: 12px; }
.mtitle { margin: 0 0 4px; font-size: 19px; color: #1F3864; }
.msub { margin: 0 0 16px; font-size: 13px; color: #475569; }

/* ---------------------------------------------------------------- Delivery 34
   Quote Numbering. Everything below reuses the existing tokens — no new colour is
   introduced, and the confirmation dialog uses .modalscrim/.modalcard rather than a
   class of its own (the D33-F6 lesson). */
.qncard{border-left:3px solid var(--accent)}
.qntext{font-size:13px;line-height:1.55;margin:0 0 10px}
.qnexample{border:1px solid var(--border);border-radius:6px;overflow:hidden;margin:6px 0 12px;max-width:520px}
.qnexhead{background:var(--sel);padding:7px 12px;font-size:12px;font-weight:600;color:var(--tp)}
.qnexrow{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;
 border-top:1px solid var(--border);font-size:13px}
.qnexrow .qnwho{color:var(--ts)}
.qnexrow .qnnum{font-weight:700;color:var(--tp);letter-spacing:.4px}
.qnwarn{background:var(--warning-soft);border:1px solid var(--warning);border-radius:6px;
 padding:10px 12px;font-size:12.5px;line-height:1.5;max-width:640px}
.qnfield{margin-top:14px;max-width:300px}
.qnacts{margin-top:12px}
.qnerror{margin-top:10px;background:var(--danger-soft);border:1px solid var(--danger);
 border-radius:6px;padding:9px 12px;font-size:12.5px;max-width:640px}
.qnpreview{font-weight:700;letter-spacing:.4px;color:var(--tp);background:var(--sel);
 border:1px solid var(--border);border-radius:6px;padding:9px 12px;margin-bottom:12px}
.qnblocked{background:var(--warning-soft);border:1px solid var(--warning);border-radius:6px;
 padding:9px 12px;font-size:12.5px;line-height:1.45;margin-bottom:12px}

/* ---- Delivery 37 — the Custom Catalogue (approved Mockup Rev 1) ----------------------------
   Every value below is an existing token from the top of this sheet. No new colour, no new
   radius, no second visual language: if a rule here could have been an existing class instead,
   it is an existing class instead. */

/* Part number / description / cost, in the order the brief lists them, with the description
   given the room a description needs. */
.rowpdc{display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px 20px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px 20px}
.req{color:var(--danger)}
.listhead{font-size:18px}
.fsub{min-width:230px}

/* Two more category chips, from tokens already defined above. */
.chip.pu{background:var(--purple-soft);color:#4B3E9E;border:1px solid #d7cdf3}
.chip.nt{background:#EEF1F6;color:#475569;border:1px solid #dbe1ea}

/* Technical information column — a quiet, wrapping cell. */
td.techcell{color:var(--ts);font-size:12.5px;max-width:250px}

/* Pager under the Custom Items List. */
.pagerrow{display:flex;align-items:center;justify-content:space-between;
 margin:12px 2px 0;font-size:12.5px;color:var(--ts)}
.pagerbtns{display:flex;align-items:center;gap:10px}
.pagerpage{font-weight:600;color:var(--tp)}

/* ---- the selection window inside the tender editor ---- */
/* The "Adds to" strip: the estimator must be able to see which tender section a product will
   land in BEFORE pressing Add, because a mis-allocation is invisible once it has happened. */
.destbar{display:flex;align-items:center;gap:10px;background:var(--accent-soft);
 border:1px solid #bcd3fb;border-radius:8px;padding:9px 14px;margin:0 0 16px;
 font-size:13px;color:#1e40af}
.destbar b{font-weight:700}

/* Read-only technical information — a block, not an input, so a long value wraps instead of
   being cut off where the estimator cannot read it. */
.techblock{border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;
 background:#f3f5f9;color:#475569;min-height:38px;line-height:1.45}

/* Labour group — the card border and radius, one step lighter so it reads as a group rather
   than a second card. */
.labourbox{border:1px solid var(--border);border-radius:10px;padding:14px 16px;
 background:#fbfcfe;margin-bottom:16px}
.labourhead{font-size:13px;font-weight:700;color:#334155;margin-bottom:2px}

/* Money summary at the foot of the window. */
.sellbox{border-top:1px solid var(--border);padding-top:12px}
.sellrow{display:flex;justify-content:space-between;align-items:baseline;
 padding:5px 0;font-size:13.5px;color:var(--ts)}
.sellrow.total{font-size:17px;font-weight:700;color:var(--tp);
 border-top:1px solid var(--border);margin-top:6px;padding-top:11px}
.sellrow.labour{color:var(--ts);font-style:italic}
.pickeracts{display:flex;gap:8px;flex:none}
.pickercard{max-width:640px}