@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#e8ecea;background:#0d1417;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}#app{min-height:100vh}.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}.sidebar{background:#11191d;border-right:1px solid #29343a;padding:26px 14px 20px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;max-height:100vh;overflow:auto}.brand{display:flex;align-items:center;gap:11px;padding:0 13px 25px;border-bottom:1px solid #28353a}.mark{height:38px;width:auto;max-width:58px;object-fit:contain;background:#fff;border-radius:9px;padding:4px 6px;display:block}.brand strong{font:800 15px Manrope;letter-spacing:.12em}.brand small{display:block;color:#8c999d;font-size:11px;letter-spacing:.13em;margin-top:2px}.navgroup{margin-top:23px}.navgroup label{display:block;color:#6e8188;font-size:11px;font-weight:700;letter-spacing:.15em;padding:0 13px 9px;text-transform:uppercase}.nav{display:flex;align-items:center;width:100%;background:transparent;color:#aeb9bc;border:0;border-radius:9px;padding:9px 12px;text-align:left;gap:11px;font-size:13px;font-weight:600;margin:2px 0}.nav:hover{background:#1e2b30;color:white}.nav.active{background:#26343a;color:#f1c66d;box-shadow:inset 3px 0 #dbad55}.ico{font-size:17px;width:20px;display:inline-grid;place-items:center;font-family:Arial}.nav em{margin-left:auto;font-size:10px;color:#f1c66d;background:#4a3d26;border-radius:9px;padding:2px 5px;font-style:normal}.sidefoot{margin-top:auto;border-top:1px solid #28353a;padding:17px 12px 0;color:#8b9a9e;font-size:12px;line-height:1.55}.live{display:inline-block;background:#80ba95;height:7px;width:7px;border-radius:50%;margin-right:6px}.workspace{min-width:0;background:#11191c}.topbar{height:76px;border-bottom:1px solid #263339;display:flex;align-items:center;gap:18px;padding:0 34px;position:sticky;top:0;background:#11191cec;backdrop-filter:blur(14px);z-index:5}.crumb{font-size:13px;color:#829399;white-space:nowrap}.crumb b{color:#e7ebea;font-weight:600}.topright{margin-left:auto;display:flex;align-items:center;gap:10px}.topbar select,.topbar input,.topbar button{background:#1d2a2e;border:1px solid #334147;color:#e8ecea;border-radius:8px;padding:9px 11px;font-size:12px}.topbar input{width:188px}.avatar{width:35px;height:35px;border-radius:50%;background:#80643b;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}.content{padding:31px 34px 70px;max-width:1680px;margin:auto}.eyebrow{color:#d5aa58;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800;margin-bottom:9px}.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:25px}.heading h1{font:800 clamp(25px,2.5vw,35px)/1.17 Manrope;margin:0;letter-spacing:-.045em}.sub{color:#8ea0a5;font-size:13px;margin:8px 0 0}.actions{display:flex;gap:9px;flex-wrap:wrap}.btn{border:1px solid #3a494d;background:#223036;color:#e5ebea;border-radius:8px;padding:10px 14px;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn:hover{background:#304047}.btn.primary{background:#d9ab57;color:#162027;border-color:#d9ab57}.btn.primary:hover{background:#efc477}.btn.ghost{background:transparent}.btn.danger{color:#ffb5aa;border-color:#755148}.grid{display:grid;gap:15px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}.metric{background:#1a2529;border:1px solid #2d3b40;border-radius:12px;padding:19px 20px;min-height:135px;position:relative;overflow:hidden}.metric:after{content:'';position:absolute;width:72px;height:72px;border:1px solid #354349;border-radius:50%;right:-25px;top:-30px}.metric label{color:#a0b0b4;font-size:12px;font-weight:700}.metric strong{display:block;font:800 27px Manrope;letter-spacing:-.045em;margin-top:13px}.metric small{display:block;color:#82969a;font-size:11px;margin-top:6px}.metric .trend{color:#90c5a5}.twocol{grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr);margin-bottom:16px}.panel{background:#1a2529;border:1px solid #2d3b40;border-radius:12px;padding:21px;min-width:0}.panelhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px}.panel h2,.panel h3{font:800 15px Manrope;margin:0}.minor{color:#8a9da1;font-size:11px}.legend{display:flex;gap:15px;color:#9aa9ac;font-size:11px}.swatch{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px}.chart{height:245px;display:flex;align-items:end;justify-content:space-around;gap:12px;border-bottom:1px solid #425056;background:repeating-linear-gradient(to top,transparent 0,transparent 60px,#27363b 61px);padding:0 13px}.barpair{height:100%;display:flex;align-items:end;gap:4px;position:relative;flex:1;justify-content:center}.bar{width:17px;max-width:30%;border-radius:3px 3px 0 0;background:#d5ab60;min-height:3px}.bar.secondary{background:#547e83}.xlabel{display:flex;justify-content:space-around;color:#829499;font-size:11px;margin-top:10px}.alertrow,.approw,.activity{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #304046}.alertrow:last-child,.approw:last-child,.activity:last-child{border-bottom:0}.dot{height:9px;width:9px;border-radius:50%;background:#daaa5b;flex:none;margin-top:5px}.dot.red{background:#df796f}.dot.green{background:#7bb597}.alertrow strong,.approw strong,.activity strong{display:block;font-size:12px;line-height:1.45}.alertrow small,.approw small,.activity small{display:block;color:#8e9fa4;font-size:11px;margin-top:3px}.alertrow .btn,.approw .btn{margin-left:auto;padding:6px 9px;white-space:nowrap}.bottomgrid{grid-template-columns:1.15fr 1fr 1fr}.quickgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.quick{padding:11px;background:#223137;border:1px solid #35444a;border-radius:8px;text-align:left;color:#e7ecea;font-size:12px;font-weight:600}.quick:hover{border-color:#d9ab57}.quick span{display:block;color:#d9ab57;font-size:17px;margin-bottom:5px}.pill{display:inline-flex;align-items:center;border-radius:5px;padding:4px 7px;background:#344345;color:#c5d5d4;font-size:10px;font-weight:700;white-space:nowrap}.pill.green{background:#244639;color:#9fdec0}.pill.amber{background:#56452b;color:#f1cb80}.pill.red{background:#583737;color:#f2a69d}.pill.blue{background:#2c4552;color:#a8d5e8}.tablewrap{overflow:auto;border:1px solid #304046;border-radius:10px}table{border-collapse:collapse;width:100%;min-width:760px;text-align:left}th{background:#1b2a2f;color:#8e9da1;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:13px 15px}td{border-top:1px solid #2d3c42;color:#d7e0df;padding:14px 15px;font-size:12px}tr:hover td{background:#213035}.rowlink{border:0;background:none;color:#eac170;font-weight:700;padding:0}.toolbar{display:flex;gap:9px;margin-bottom:15px;flex-wrap:wrap}.input,.select,textarea{background:#172226;border:1px solid #39494e;color:#e9efed;border-radius:8px;padding:11px 12px;outline:none}.input:focus,.select:focus,textarea:focus{border-color:#d5a954}.toolbar .input{min-width:220px;flex:1}.toolbar .select{min-width:150px}.summarystrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.mini{background:#1b292d;padding:16px;border-radius:9px;border:1px solid #2e3e43}.mini span{display:block;color:#8fa3a6;font-size:11px}.mini b{display:block;font:800 21px Manrope;margin-top:7px}.tabs{display:flex;gap:5px;border-bottom:1px solid #354248;margin-bottom:18px;overflow:auto}.tab{background:none;border:0;color:#91a2a5;font-size:12px;font-weight:700;padding:12px 15px;white-space:nowrap;border-bottom:2px solid transparent}.tab.active{color:#ebc06b;border-bottom-color:#e0ad56}.drawerback{position:fixed;inset:0;background:#061013ad;z-index:20;display:flex;justify-content:flex-end}.drawer{width:min(940px,96vw);height:100%;overflow:auto;background:#1a262b;border-left:1px solid #435258;padding:28px;box-shadow:-20px 0 80px #0008}.drawer header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #35434a;padding-bottom:19px;margin-bottom:22px}.drawer h2{font:800 23px Manrope;margin:0 0 5px}.drawer p{color:#93a4a8;font-size:12px;margin:0}.close{background:transparent;border:0;color:#b5c3c5;font-size:23px}.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field.full{grid-column:1/-1}.field label{color:#bdcbcb;font-size:12px;font-weight:700}.field small{color:#8c9c9e}.field input,.field select,.field textarea{width:100%}.field textarea{min-height:90px;resize:vertical}.drawerfoot{display:flex;gap:9px;justify-content:flex-end;border-top:1px solid #35434a;margin-top:24px;padding-top:20px}.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.detail{border-bottom:1px solid #324148;padding-bottom:12px}.detail label{display:block;color:#85999e;font-size:11px;margin-bottom:5px}.detail strong{font-size:13px;overflow-wrap:anywhere}.timeline{border-left:1px solid #53636a;margin:18px 0 0 5px;padding-left:20px}.event{position:relative;margin-bottom:20px;color:#b9c8c7;font-size:12px;line-height:1.5}.event:before{content:'';position:absolute;left:-25px;top:4px;background:#d8ab58;width:9px;height:9px;border-radius:50%}.event small{display:block;color:#82969b;margin-top:3px}.notice{border:1px solid #665636;background:#3b3425;border-radius:8px;padding:13px;color:#f0d9a9;font-size:12px;line-height:1.55;margin:13px 0}.empty{text-align:center;color:#91a3a6;padding:45px 15px}.empty b{display:block;color:#dbe5e3;font-size:15px;margin-bottom:5px}.progress{height:7px;border-radius:10px;background:#344348;overflow:hidden;margin-top:12px}.progress i{height:100%;display:block;background:#d9ad59}.reportgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reportcard{background:#213035;border:1px solid #35444a;padding:17px;border-radius:9px;text-align:left;color:#e5edeb}.reportcard:hover{border-color:#d9ad59}.reportcard strong{display:block;font-size:13px;margin:10px 0 5px}.reportcard small{color:#8fa1a4;font-size:11px;line-height:1.5}.reportcard .ico{color:#e1b669}.fieldscreen{max-width:450px;margin:auto;border:1px solid #455459;border-radius:24px;background:#1b2a2e;padding:22px;box-shadow:0 24px 70px #0005}.mobilehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.bigaction{width:100%;background:#263a3d;color:#fff;border:1px solid #557377;border-radius:12px;text-align:left;padding:16px;margin:7px 0;font-weight:700}.bigaction span{display:block;color:#9bb1b0;font-size:11px;font-weight:400;margin-top:4px}.scanbox{border:2px dashed #66837e;border-radius:14px;min-height:125px;display:grid;place-items:center;color:#d7b46e;text-align:center;margin:15px 0}.mobilebottom{display:flex;justify-content:space-around;border-top:1px solid #496064;margin-top:20px;padding-top:15px;font-size:12px}.toast{position:fixed;right:24px;bottom:23px;background:#d9ac5c;color:#182225;padding:12px 17px;border-radius:9px;z-index:30;font-weight:700;font-size:12px;box-shadow:0 8px 30px #0007}.modulehead{display:flex;gap:12px;align-items:center;margin-bottom:14px}.sectiontag{font-size:12px;color:#d5aa58;background:#3a3325;border-radius:6px;padding:7px 10px}.auditlist{max-height:500px;overflow:auto}.scopegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.scopeitem{padding:14px;border:1px solid #35464b;border-radius:8px;background:#203035;font-size:12px}.scopeitem b{display:block;margin-bottom:7px}.scopeitem small{color:#90a5a7;line-height:1.4}.offlinebar{background:#765434;color:#fff;text-align:center;padding:7px;font-size:12px;grid-column:1/-1}@media(max-width:1150px){.kpis{grid-template-columns:repeat(2,1fr)}.bottomgrid,.scopegrid{grid-template-columns:1fr 1fr}.topbar{padding:0 20px}.content{padding:25px 20px}}@media(max-width:850px){.shell{display:block}.sidebar{position:fixed;z-index:10;transform:translateX(-101%);transition:transform .2s;width:255px;box-shadow:20px 0 60px #0008}.sidebar.open{transform:none}.topbar{height:auto;min-height:65px;flex-wrap:wrap;padding:10px 14px}.topright{width:100%;overflow:auto;margin-left:0}.topbar input{min-width:120px;flex:1}.heading{align-items:flex-start;flex-direction:column}.twocol,.bottomgrid{grid-template-columns:1fr}.content{padding:23px 14px 80px}.menu{display:block!important}}@media(max-width:550px){.kpis,.summarystrip,.reportgrid,.scopegrid{grid-template-columns:1fr 1fr}.metric{min-height:112px;padding:14px}.metric strong{font-size:22px}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}.drawer{padding:19px}.topbar select{max-width:135px}.reportgrid{grid-template-columns:1fr}.heading h1{font-size:26px}.chart{height:190px}.bar{width:12px}}
.notice.bad{border-color:#7b4340;background:#3a2523;color:#f2c8c2}.field label .opt{color:#7e9096;font-weight:500;font-size:10px;letter-spacing:.07em;text-transform:uppercase;margin-left:6px}.bar[style*="height:0.0%"]{opacity:.35}

/* Supabase: sign-in, identity and in-flight state */
.busybar{background:#2f4a50;color:#dceaea;text-align:center;padding:7px;font-size:12px;letter-spacing:.04em;grid-column:1/-1}
.whoami{display:flex;flex-direction:column;line-height:1.25;text-align:right;min-width:0}
.whoami b{font:700 12px Manrope;letter-spacing:.02em}
.whoami small{color:#8da0a4;font-size:11px;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1100px 500px at 50% -10%,#16252a,#0d1417)}
.authcard{width:100%;max-width:395px;background:#11191d;border:1px solid #29343a;border-radius:14px;padding:27px}
.authcard .brand{padding-bottom:20px;margin-bottom:20px}
.authcard h1{font:800 25px Manrope;margin:0 0 6px}
.authcard .sub{color:#8da0a4;font-size:13px;margin:0 0 19px}
.authcard .field{margin-bottom:14px}
.authcard .minor{margin-top:16px}
.authcard code{background:#0e1619;border:1px solid #2a363b;border-radius:4px;padding:1px 5px;font-size:11px}
@media (max-width:760px){.whoami{display:none}}

/* Line items: purchase order lines, journal lines, counted lines */
.linetable{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px}
.linetable th{text-align:left;color:#7e9096;font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:0 6px 6px;line-height:1.3;white-space:normal;vertical-align:bottom}
.linetable td{padding:0 4px 7px;vertical-align:top}
.linetable td.lineno{color:#7e9096;padding-top:11px;width:22px}
.linetable .input{padding:8px 9px;font-size:12px;min-width:80px;width:100%}
.linetable select.input{min-width:110px}
.linedel{padding:7px 10px;line-height:1;color:#c98f88}
#linebox{overflow-x:auto;border:1px solid #29343a;border-radius:9px;padding:12px;background:#0f171b}
.linehead{font:800 14px Manrope;margin:24px 0 10px}
tbody tr.dim td{opacity:.55}
tbody tr.dim .rowlink{opacity:1}

/* Workflow position: which stage a record has reached */
.process{margin:4px 0 20px}
.steps{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;gap:0}
.step{flex:1 1 0;min-width:84px;position:relative;padding:0 4px;text-align:center}
.step::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;background:#2b383e}
.step:first-child::before{display:none}
.step .dot{position:relative;display:block;width:13px;height:13px;border-radius:50%;margin:0 auto 7px;background:#1a252a;border:2px solid #3a4a51}
.step .lbl{display:block;font-size:10px;line-height:1.3;color:#7e9096;letter-spacing:.04em}
.step.done::before{background:#5d7a52}
.step.done .dot{background:#5d7a52;border-color:#5d7a52}
.step.done .lbl{color:#93a89a}
.step.now::before{background:#5d7a52}
.step.now .dot{background:#d9ac5c;border-color:#d9ac5c;box-shadow:0 0 0 4px #d9ac5c22}
.step.now .lbl{color:#f0d9a9;font-weight:700}
.offstep{margin-top:12px;font-size:11px;color:#f2c8c2;background:#3a2523;border:1px solid #7b4340;border-radius:8px;padding:9px 11px}

/* Brand */
.fulllogo{display:block;width:100%;max-width:236px;margin:0 auto 22px;background:#fff;border-radius:12px;padding:16px 20px}
.authcard .brand{padding-bottom:0;margin-bottom:0;border:0}
.brandtext strong{font:800 15px Manrope;letter-spacing:.12em}
.brandtext small{display:block;color:#8c999d;font-size:11px;letter-spacing:.13em;margin-top:2px}

/* KPI tiles that open their records */
button.metric.kpi{text-align:left;font:inherit;border:1px solid #29343a;cursor:pointer;width:100%}
button.metric.kpi:hover{border-color:#4a5d66;background:#162126}
button.metric.kpi:focus-visible{outline:2px solid #d9ac5c;outline-offset:2px}
.metric.kpi.good strong{color:#9ccb8f}
.metric.kpi.warn strong{color:#e6c377}
.metric.kpi.bad strong{color:#e2948b}
.drillnote{margin:0 0 14px;padding:10px 13px;border:1px solid #3d5058;background:#16242a;border-radius:9px;font-size:12px;color:#c3d3d6;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.kpigroup{margin:26px 0 8px;font:800 12px Manrope;letter-spacing:.1em;text-transform:uppercase;color:#7e9096}
.grid.kpis6{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:13px}
.costrow{display:flex;align-items:center;gap:12px;margin:13px 0;font-size:12px}
.costrow span{width:118px;flex:none;color:#c3d3d6}
.costrow .progress{flex:1;margin:0}
.costrow b{width:78px;text-align:right}

/* Fields filled from the signed-in user */
.field label .stamp{color:#8195a0;font-weight:500;font-size:10px;letter-spacing:.05em;text-transform:uppercase;margin-left:6px}
.input.locked{background:#0e1619;color:#9fb3b8;border-style:dashed;cursor:default}
.input.locked:focus{outline:none}
.sigs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:18px}
.sig{display:flex;gap:9px;align-items:flex-start}
.sig .dot{width:11px;height:11px;border-radius:50%;margin-top:3px;flex:none;background:#1a252a;border:2px solid #6b7a80}
.sig.done .dot{background:#5d7a52;border-color:#5d7a52}
.sig strong{display:block;font:700 12px Manrope;color:#f0d9a9}
.sig small{display:block;color:#9fb3b8;font-size:11px;margin-top:1px}
.sig.todo strong{color:#c3d3d6}

/* The journey between documents, not within one */
.chain{margin:4px 0 20px;padding:14px;border:1px solid #29343a;border-radius:10px;background:#0f171b}
.chainhead{font:800 10px Manrope;letter-spacing:.1em;text-transform:uppercase;color:#7e9096;margin-bottom:11px}
.csteps{list-style:none;display:flex;gap:0;margin:0;padding:0;overflow-x:auto}
.cstep{flex:1 1 0;min-width:96px;padding:0 9px;position:relative;text-align:center}
.cstep::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#2b383e}
.cstep:first-child::before{display:none}
.cstep.done::before,.cstep.here::before{background:#5d7a52}
.clabel{display:block;font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:#7e9096;font-weight:700;margin-bottom:5px}
.cid{display:block;width:100%;background:none;border:0;color:#d9ac5c;font:700 12px Manrope;cursor:pointer;padding:2px}
.cid:hover{text-decoration:underline}
.cstep.none .cid,.cstep.none .cstat{color:#5b6b71}
.cstep.here .cid{color:#f0d9a9;text-decoration:underline}
.cstat{display:block;font-size:10px;color:#8da0a4;margin-top:2px}
.cstep.none .clabel{color:#5b6b71}
td.overrun b{color:#e2948b}
select.select.multi{min-height:104px;padding:7px}
select.select.multi option{padding:4px 6px}

/* Sectioned forms. A long form reads as a sequence of small, labelled jobs rather than one
   column of unrelated boxes. */
.formbody{display:flex;flex-direction:column;gap:18px}
.fsec{border:1px solid #2f3e44;border-radius:10px;background:#18242899;padding:16px 16px 18px}
.fsec h4{font:800 12px Manrope;letter-spacing:.14em;text-transform:uppercase;color:#d5aa58;margin:0 0 4px}
.fsecnote{color:#8ca0a4;font-size:11px;line-height:1.5;margin:0 0 14px}
.fsec h4+.fields{margin-top:12px}

/* Search-and-tick picker, for lists too long to scroll. */
.picker{display:flex;flex-direction:column;gap:8px;border:1px solid #39494e;border-radius:8px;background:#172226;padding:9px}
.picker .picksearch{background:#101a1d}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-items:flex-start}
.chip{display:inline-flex;align-items:center;gap:6px;background:#2f4149;border:1px solid #465a62;color:#e6efed;border-radius:6px;padding:4px 6px 4px 9px;font-size:11px;font-weight:700}
.chipx{background:none;border:0;color:#a9bcc0;font-size:14px;line-height:1;padding:0 2px}
.chipx:hover{color:#f2a69d}
.chipnone{color:#8195a0;font-size:11px;padding:4px 2px}
.pickopts{max-height:168px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.pickopt{text-align:left;background:transparent;border:0;color:#d7e0df;font-size:12px;padding:7px 9px;border-radius:6px}
.pickopt:hover{background:#26363c;color:#fff}
.pickmore{color:#8195a0;font-size:11px;padding:7px 9px}

/* ---------------------------------------------------------------- landing page
   Three jobs on one screen: sign staff in, and send suppliers and visitors to the two
   portals that need no account. Sized to fit the viewport without scrolling on a laptop,
   and stacks on a phone. */
.landing{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)}
.lpanel{background:#0d1417;border-right:1px solid #222e33;padding:clamp(28px,4vh,52px) clamp(26px,4vw,60px);
        display:flex;flex-direction:column;gap:clamp(18px,3vh,34px);justify-content:center;min-width:0}
.lbrand img{height:clamp(46px,7vh,74px);width:auto;background:#fff;border-radius:11px;padding:8px 13px;display:block}
.lintro h2{font:800 clamp(24px,3.1vw,38px)/1.15 Manrope;letter-spacing:-.045em;margin:0 0 12px}
.lintro p{color:#93a6ab;font-size:14px;line-height:1.65;margin:0;max-width:52ch}
/* The illustration is decoration: it is the first thing to give up its height when the
   viewport is short, so the panel never pushes the page into scrolling. */
.lhero{display:block;width:100%;max-width:520px;height:clamp(0px,22vh,210px);object-fit:cover;
       object-position:center 62%;border-radius:12px;border:1px solid #243035;opacity:.94}
.lports{display:grid;gap:11px}
.lport{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;gap:2px 14px;
       align-items:center;text-decoration:none;background:#162125;border:1px solid #2c3a40;
       border-radius:11px;padding:15px 17px;transition:border-color .15s,background .15s}
.lport:hover{border-color:#d9ab57;background:#1c282d}
.lpicon{grid-row:1/3;font-size:21px;color:#d9ab57;display:grid;place-items:center;
        background:#223036;border-radius:9px;width:38px;height:38px}
.lport b{color:#e9efed;font-size:13.5px}
.lport small{color:#8da0a4;font-size:11.5px;line-height:1.55}
.lfoot{color:#6d8086;font-size:11px;margin:0}
.lform{display:grid;place-items:center;padding:clamp(22px,4vh,44px) clamp(20px,3vw,44px);background:#11191c;min-width:0}
.lform .authcard{width:100%;max-width:386px;background:transparent;border:0;box-shadow:none;padding:0}
.lform h1{font:800 clamp(23px,2.6vw,31px)/1.15 Manrope;letter-spacing:-.04em;margin:0 0 7px}
.lform .sub{margin:0 0 20px}
.lform .field{margin-bottom:15px}
.lform .minor{margin-top:16px;line-height:1.6}
@media(max-width:900px){
  .landing{grid-template-columns:1fr;min-height:100dvh}
  .lpanel{border-right:0;border-bottom:1px solid #222e33;gap:20px;padding:26px 20px}
  .lintro h2{font-size:23px}
  .lhero{height:clamp(0px,16vh,130px);max-width:none}
  .lform{padding:26px 20px 44px}
}

/* Ranked horizontal bars for the stock analytics page. No chart library: the application has
   no build step, and a bar measured against the largest row reads perfectly well as divs. */
.rank{display:flex;flex-direction:column;gap:9px}
.rankrow{display:grid;grid-template-columns:minmax(96px,1.35fr) minmax(0,2fr) auto;gap:11px;align-items:center}
.ranklabel{font-size:12px;color:#d7e0df;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranklabel .rowlink{font-weight:600;font-size:12px}
.rankbar{background:#26343a;border-radius:4px;height:15px;overflow:hidden}
.rankbar i{display:block;height:100%;background:linear-gradient(90deg,#b98c3f,#d9ab57);border-radius:4px}
.rankval{font-size:12px;font-weight:700;color:#e9efed;white-space:nowrap;text-align:right;min-width:62px}
@media(max-width:550px){.rankrow{grid-template-columns:minmax(80px,1fr) minmax(0,1.4fr) auto;gap:8px}}

/* The line-item editor. The numeric and code columns are pinned to what they actually need
   so the two free-text columns — what the item is, and how it is specified — share the rest.
   Without this the row overflows and the specification scrolls off the right edge. */
.linetable{table-layout:fixed;width:100%}
.linetable td{overflow:hidden}
.linetable col.c-no{width:24px}
.linetable col.c-sku{width:104px}
.linetable col.c-qty{width:74px}
.linetable col.c-unit{width:92px}
.linetable col.c-money{width:98px}
.linetable col.c-del{width:38px}
.linetable .input{min-width:0}
.linetable select.input{min-width:0}
.linetable .linedel{padding:7px 8px;line-height:1;width:100%}
@media(max-width:980px){.drawer{width:min(620px,100%)}.linetable{table-layout:auto}}

/* A form whose document carries line items needs room for a table, not a single column.
   Placed after the narrowing media query above so it wins, and it applies only to the
   editor: reading a record stays at the ordinary width. */
.drawer.wide{width:min(1200px,96vw)}
.drawer.wide .fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.drawer.wide .fsec{padding:18px 20px 20px}
/* The line table is the reason for the extra width, so let it use all of it. */
.drawer.wide .linetable{table-layout:auto;width:100%}
.drawer.wide .linetable td,.drawer.wide .linetable th{padding:7px 8px}
.drawer.wide .linetable col.c-item{width:auto}
.drawer.wide #linebox{max-height:none}
@media(max-width:1260px){.drawer.wide{width:96vw}}
@media(max-width:980px){.drawer.wide{width:min(720px,100%)}.drawer.wide .fields{grid-template-columns:1fr}}

/* Signing dialog. The browser's own prompt box is titled with the hostname and cannot say
   what is being authorised — the opposite of the assurance a second factor should give. */
.modalback{position:fixed;inset:0;background:#061013d9;backdrop-filter:blur(3px);z-index:40;
  display:grid;place-items:center;padding:20px}
.modal{width:min(430px,100%);background:#1a262b;border:1px solid #42525a;border-radius:14px;
  padding:26px;box-shadow:0 26px 90px #000a}
.modal .eyebrow{margin-bottom:7px}
.modal h2{font:800 21px Manrope;margin:0 0 14px}
.signwhat{font-size:13px;color:#d7e0df;margin:0 0 14px;line-height:1.55}
.signwhat strong{color:#f0c878;font-weight:700}
.signsent{font-size:12px;color:#93a4a8;line-height:1.6;margin-bottom:18px}
.signsent strong{color:#d7e0df}
.modal label{display:block;color:#bdcbcb;font-size:12px;font-weight:700;margin-bottom:7px}
.codeinput{width:100%;font:700 26px/1.2 Manrope,monospace;letter-spacing:.34em;text-align:center;
  padding:14px 12px 14px 22px}
.codeinput::placeholder{color:#3d4d53;letter-spacing:.34em}
.democode{letter-spacing:.24em;font-size:15px}
.modal .notice{margin:13px 0 0}
.modalfoot{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.modalfoot .btn.ghost{margin-right:auto}
@media(max-width:480px){
  .modal{padding:20px}
  .codeinput{font-size:22px;letter-spacing:.24em}
  .modalfoot{flex-direction:column-reverse}
  .modalfoot .btn{width:100%}
  .modalfoot .btn.ghost{margin-right:0}
}

/* Quote comparison. Suppliers are columns so the differences line up vertically; the drawer
   widens wherever this appears, because a comparison squeezed into one column is a list. */
.drawer.wide{width:min(1180px,97vw)}
.qpanel{margin:0 0 18px}
.qscroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
table.qgrid{width:100%;min-width:0;border-collapse:collapse;margin-bottom:14px}
table.qgrid th,table.qgrid td{border:1px solid #31414700;border-bottom:1px solid #2f3e44;
  padding:10px 12px;font-size:12px;text-align:left;vertical-align:top}
table.qgrid thead th{background:#1b2a2f;color:#cfdad9;font-weight:700;font-size:12px;
  text-transform:none;letter-spacing:0;border-bottom:1px solid #3b4a50;white-space:nowrap}
table.qgrid thead th small{display:block;color:#8ea0a5;font-weight:400;font-size:10px;margin-top:3px}
table.qgrid th.qcrit{width:168px;background:#18242899;color:#8ea0a5;font-weight:700}
table.qgrid tbody th{color:#9fb0b4;font-weight:600;font-size:12px;background:#18242855}
table.qgrid td.num{text-align:right;font-variant-numeric:tabular-nums}
table.qgrid td.num small{display:block;color:#8ea0a5;font-size:10px;margin-top:3px}
table.qgrid tr:hover td{background:#1f2e34}
table.qgrid thead th.qwin{background:#294038;box-shadow:inset 0 -2px #7bb597}
.qflag{display:block;margin-top:4px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#9fdec0}
.bestmark{display:inline-block;margin-left:6px;background:#244639;color:#9fdec0;border-radius:4px;
  padding:2px 5px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.delta{display:block;color:#e2a79c;font-size:10px;margin-top:3px;font-weight:600}
table.qitems td.low{color:#9fdec0;font-weight:700}
table.qitems th[scope=row]{font-weight:500;color:#c3d0d0}
@media(max-width:1000px){.drawer.wide{width:min(660px,100%)}table.qgrid{min-width:560px}}

/* Weighted score. A bar of segments, each as wide as that criterion's contribution, so the
   reader can see what a quote won on rather than only what it scored. */
.qweight{border-top:1px solid #2f3e44;margin-top:16px;padding-top:16px}
.qweight h4{font:800 12px Manrope;letter-spacing:.12em;text-transform:uppercase;color:#d5aa58;margin:0 0 6px}
.qweight h4 .minor{letter-spacing:0;text-transform:none;font-weight:400;margin-left:8px}
.qweight>.minor{margin:0 0 14px;line-height:1.55}
.wrow{display:flex;align-items:center;gap:12px;margin-top:12px}
.wname{width:190px;flex:none;font-size:12px}
.wname strong{font-weight:600}
.wbar{flex:1;height:14px;border-radius:7px;background:#223036;overflow:hidden;display:flex;min-width:0}
.wseg{height:100%;display:block;background:#d9ad59;border-right:1px solid #1a262b}
.wseg:nth-child(2){background:#7fa8ae}
.wseg:nth-child(3){background:#80ba95}
.wseg:nth-child(4){background:#b58fc0}
.wrow.wtop .wbar{box-shadow:inset 0 0 0 1px #7bb597}
.wval{width:46px;flex:none;text-align:right;font:800 15px Manrope;font-variant-numeric:tabular-nums}
.wparts{display:flex;flex-wrap:wrap;gap:12px;margin:5px 0 0 202px;color:#8ea0a5;font-size:10px}
.wparts b{color:#d7e0df;font-weight:700}
.wparts small{color:#6f8288}
@media(max-width:1000px){
  .wrow{flex-wrap:wrap}.wname{width:100%}.wparts{margin-left:0}
}