:root{
  --ink:#16211c; --soft:#5c6b64; --faint:#93a19a; --ghost:#b8c2bc;
  --paper:#fbfaf7; --panel:#fff; --rule:#e3e0d8; --rule-soft:#eeece5;
  --pine:#1f5c46; --pine-wash:#eaf2ee; --pine-deep:#194a38;
  --rust:#a8442a; --rust-wash:#f9ece8;
  --amber:#8a6413; --amber-wash:#fbf1dc;
  --slate:#3f5666; --slate-wash:#eaeff2;
  --lock:#6b4d8a; --lock-wash:#f1ecf7; --lock-rule:#e0d4ee;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font:400 15px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:540px}
a{color:inherit}

.topbar{background:var(--panel);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.brand span{font-size:12.5px;color:var(--faint)}
.who{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--soft)}
.rolebadge{font-size:11px;font-weight:500;padding:2px 9px;border-radius:11px}
.r-super{background:var(--pine-wash);color:var(--pine)}
.r-authorized{background:var(--slate-wash);color:var(--slate)}
.r-viewonly{background:#f0efe9;color:var(--soft)}
.r-supplier{background:var(--amber-wash);color:var(--amber)}
.lnk{color:var(--pine);text-decoration:none}.lnk:hover{text-decoration:underline}

.tabbar{background:var(--panel);border-bottom:1px solid var(--rule)}
.tabs{display:flex;gap:2px}
.tab{padding:11px 15px;font-size:14px;color:var(--soft);text-decoration:none;border-bottom:2px solid transparent}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--pine);border-bottom-color:var(--pine);font-weight:500}

main{padding:24px 0 70px}
.lede{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px;flex-wrap:wrap}
h1{font-size:22px;font-weight:600;letter-spacing:-.02em}
.sub{font-size:13.5px;color:var(--soft);margin-top:3px}
.hint{font-size:12px;color:var(--faint);margin-top:4px}
.inline{display:inline}

.btn{font:500 13.5px inherit;font-family:inherit;padding:7px 14px;border-radius:6px;cursor:pointer;
  border:1px solid var(--rule);background:var(--panel);color:var(--ink);text-decoration:none;
  display:inline-block;white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.btn-go{background:var(--pine);border-color:var(--pine);color:#fff}
.btn-go:hover{background:var(--pine-deep)}
.btn-sm{font-size:12.5px;padding:5px 11px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.linkbtn{border:none;background:none;color:var(--pine);font:inherit;font-size:12.5px;
  cursor:pointer;padding:0;text-decoration:underline}

.flash{padding:11px 15px;border-radius:7px;font-size:13.5px;margin-bottom:16px}
.f-ok{background:var(--pine-wash);color:#1c4a39}
.f-error{background:var(--rust-wash);color:var(--rust)}

.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);
  border-radius:9px;overflow:hidden;background:var(--panel);margin-bottom:20px}
.cell{padding:14px 16px;border-right:1px solid var(--rule)}
.cell:last-child{border-right:none}
.cell .k{font-size:12.5px;color:var(--soft)}
.cell .v{font-size:25px;font-weight:500;margin-top:3px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cell .n{font-size:11.5px;color:var(--faint);margin-top:1px}
.cell .n.warn{color:var(--rust)}

.panel{background:var(--panel);border:1px solid var(--rule);border-radius:9px;margin-bottom:18px}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--rule)}
.ph h2{font-size:14px;font-weight:600}
.ph .hint{margin:0}

/* NOTE: renamed from .row to .qrow — .row is Bootstrap's grid class, and both
   loaded globally would otherwise collide on any Bootstrap-converted page. */
.qrow{display:block;padding:13px 16px;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:inherit}
.qrow:last-child{border-bottom:none}
a.qrow:hover{background:var(--paper)}
.r1{display:flex;align-items:center;justify-content:space-between;gap:12px}
.r1 .t{font-size:14.5px;font-weight:500}
.r2{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12.5px;color:var(--soft);flex-wrap:wrap}
.sep{color:var(--ghost)}
.cmt{margin-top:7px;padding:8px 11px;background:var(--paper);border-radius:6px;font-size:12.5px;color:var(--soft)}

.pill{font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:11px;white-space:nowrap;display:inline-block}
.p-go{background:var(--pine-wash);color:var(--pine)}
.p-wait{background:var(--amber-wash);color:var(--amber)}
.p-stop{background:var(--rust-wash);color:var(--rust)}
.p-cool{background:var(--slate-wash);color:var(--slate)}
.p-idle{background:#f0efe9;color:var(--soft)}
.t-must{background:var(--pine-wash);color:var(--pine)}
.t-simplified{background:var(--slate-wash);color:var(--slate)}
.t-deferred{background:#f0efe9;color:var(--soft)}
.t-risk{background:var(--rust-wash);color:var(--rust)}

.empty{padding:34px 16px;text-align:center;color:var(--soft);font-size:13.5px}
.empty b{display:block;font-weight:500;color:var(--ink);margin-bottom:4px;font-size:14.5px}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.cols2,.cols3,.g2,.g3,.g4{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}}

.pform{padding:15px 16px}
label{display:block;font-size:12.5px;font-weight:500;color:var(--soft);margin:12px 0 5px}
.pform > label:first-of-type{margin-top:0}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],select,textarea{
  width:100%;padding:8px 11px;font:400 14px inherit;font-family:inherit;
  border:1px solid var(--rule);border-radius:6px;background:#fff;color:var(--ink)}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pine);outline-offset:-1px;border-color:var(--pine)}
.pform .btn{margin-top:14px}
.ro{font-size:14px;padding:2px 0}
table{width:100%;border-collapse:collapse;font-size:13.5px}
td{padding:10px 16px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tr:last-child td{border-bottom:none}
td.k{color:var(--soft);width:150px}
td.r{text-align:right}

/* internal blocks */
.internal{background:var(--lock-wash);border:1px solid var(--lock-rule);border-radius:8px;
  padding:13px;margin:14px 0}
.itag{display:inline-block;font-size:10.5px;font-weight:500;color:var(--lock);background:#fff;
  border:1px solid var(--lock-rule);border-radius:4px;padding:1px 7px}
.internal > .itag{margin-bottom:9px}
.itag.sm{font-size:9.5px;padding:0 5px}
.internal-inline label{color:var(--lock)}
.int-panel{border-color:var(--lock-rule)}
.int-panel .ph{background:var(--lock-wash)}

/* items */
.item{border:1px solid var(--rule);border-radius:8px;margin:0 16px 12px;overflow:hidden}
.item-h{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.item-n{width:22px;height:22px;border-radius:5px;background:var(--pine-wash);color:var(--pine);
  display:grid;place-items:center;font-size:11.5px;font-weight:600;flex:none}
.item-t{flex:1;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-b{padding:13px}
.specs{margin-top:15px;border-top:1px solid var(--rule-soft);padding-top:13px}
.specs-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
  font-size:12.5px;font-weight:500;color:var(--soft)}
.spec{border:1px solid var(--rule-soft);border-radius:7px;padding:12px;margin-bottom:10px;background:var(--paper)}
.spec label{margin-top:9px}
.spec > .g2 label{margin-top:0}
.treat{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.tbtn{font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:11px;border:1px solid var(--rule);
  background:#fff;color:var(--soft);cursor:pointer;margin:0}
/* Visually hidden, NOT display:none. A display:none input can be skipped by the
   label click in some browsers, which is how the selection and the saved value
   drifted apart. This pattern keeps it focusable, clickable and submitted. */
.tbtn input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;
  padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbtn:hover{border-color:var(--faint)}
/* Selected state. Driven by the radio itself via :has(), so the highlight moves
   the instant you click — not after a save. .on is the server-rendered fallback
   and the JS below covers browsers without :has(). */
.tbtn.on.t-must,.tbtn.t-must:has(input:checked){
  background:var(--pine-wash);border-color:var(--pine);color:var(--pine)}
.tbtn.on.t-simplified,.tbtn.t-simplified:has(input:checked){
  background:var(--slate-wash);border-color:var(--slate);color:var(--slate)}
.tbtn.on.t-deferred,.tbtn.t-deferred:has(input:checked){
  background:#f0efe9;border-color:var(--ghost);color:var(--soft)}
.tbtn.on.t-risk,.tbtn.t-risk:has(input:checked){
  background:var(--rust-wash);border-color:var(--rust);color:var(--rust)}
/* keyboard users must be able to see focus, since the radio itself is hidden */
.tbtn:focus-within{outline:2px solid var(--pine);outline-offset:2px}

/* view items */
.vitem{border-bottom:1px solid var(--rule-soft);padding:14px 16px}
.vitem:last-child{border-bottom:none}
.vitem-h{display:flex;gap:11px;align-items:flex-start}
.vitem-h .t{font-size:14.5px;font-weight:500}
.vspecs{margin-top:11px;margin-left:33px}
.vspec{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.vspec:last-child{border-bottom:none}
.vspec .body{flex:1;min-width:0;font-size:13px;line-height:1.5}
.vspec .auth{font-size:11.5px;color:var(--faint);margin-top:2px}
.vspec .wording{margin-top:4px;color:var(--soft)}
.vspec .miss{color:var(--rust);font-style:italic}

.warn{padding:10px 13px;border-radius:7px;background:var(--amber-wash);color:var(--amber);
  font-size:12.5px;line-height:1.45;margin-bottom:8px}
.warn.ok{background:var(--pine-wash);color:var(--pine)}

.linkbox{background:var(--pine-wash);border:1px solid var(--pine);border-radius:9px;
  padding:14px 16px;margin-bottom:18px}
.linkbox b{font-size:13.5px;color:var(--pine)}
.linkbox p{font-size:12.5px;color:#1c4a39;margin:4px 0 9px}
.linkbox input{font-family:ui-monospace,monospace;font-size:12px}

.auth{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:28px;margin-top:34px}
.auth.wide{max-width:520px;margin-left:auto;margin-right:auto}
.auth h1{font-size:21px}
.auth .sub{margin-bottom:18px}
.auth label{display:block;margin:13px 0 5px}
.auth .btn{width:100%;margin-top:16px}
.alt{margin-top:18px;font-size:13.5px;color:var(--soft);text-align:center}
.alt a{color:var(--pine)}
.quote{background:var(--paper);border-left:3px solid var(--rule);padding:10px 13px;
  font-size:13px;color:var(--soft);margin-bottom:14px}
.choice{border:none;margin-bottom:6px}
.choice legend{font-size:12.5px;font-weight:500;color:var(--soft);margin-bottom:8px}
.opt{display:block;border:1px solid var(--rule);border-radius:8px;padding:12px 14px;
  margin:0 0 9px;cursor:pointer}
.opt:hover{border-color:var(--faint)}
.opt.sel{border-color:var(--pine);background:var(--pine-wash)}
.opt input{width:auto;margin-right:8px}
.opt .ot{font-size:14px;font-weight:500}
.opt .od{display:block;font-size:12.5px;color:var(--soft);margin-top:3px;margin-left:23px}

/* NOTE: renamed from .modal to .qdialog — .modal is Bootstrap's own modal
   component class; this rule is actually for the native <dialog> element. */
.qdialog{border:1px solid var(--rule);border-radius:10px;padding:0;max-width:460px;width:92%;
  box-shadow:0 12px 40px rgba(22,33,28,.18)}
.qdialog::backdrop{background:rgba(22,33,28,.35)}

/* ---- messages ---- */
.msg{margin:10px 0;max-width:78%}
.msg.mine{margin-left:auto}
.msg-b{padding:9px 13px;border-radius:9px;font-size:13.5px;line-height:1.5}
.from-buyer{background:var(--pine-wash);color:#1c4a39}
.from-sup{background:var(--slate-wash);color:#2c3f4c}
.msg.mine .msg-b{background:var(--paper);border:1px solid var(--rule);color:var(--ink)}
.msg-m{font-size:11.5px;color:var(--faint);margin-top:3px;padding:0 3px}
.msg.mine .msg-m{text-align:right}
.badge-n{display:inline-block;min-width:17px;padding:0 5px;border-radius:9px;
  background:var(--rust);color:#fff;font-size:11px;font-weight:500;text-align:center;margin-left:5px}

.chkline{display:flex!important;align-items:center;gap:8px;font-weight:400!important;
  color:var(--ink)!important;margin:6px 0!important;font-size:13.5px;cursor:pointer}
.chkline input{width:auto}

/* ============================================================
   SUPPLIER WIZARD — deliberately larger, plainer and calmer than
   the buyer side. Bigger touch targets, one decision per screen,
   nothing clever. See I0 in the backlog.
   ============================================================ */
.wiz{max-width:640px;margin:0 auto}
.wiz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.wiz-eyebrow{font-size:12.5px;color:var(--faint)}
.wiz-step{font-size:13px;font-weight:500;color:var(--soft);margin-top:2px}
.wiz-bar{height:5px;background:var(--rule);border-radius:3px;overflow:hidden;margin-bottom:26px}
.wiz-bar span{display:block;height:100%;background:var(--pine);border-radius:3px;transition:width .25s}

.wiz-h{font-size:25px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;line-height:1.25}
.wiz-p{font-size:15px;color:var(--soft);line-height:1.6;margin-bottom:22px}

.wiz-card{background:var(--panel);border:1px solid var(--rule);border-radius:10px;
  padding:18px 20px;margin-bottom:24px}
.wiz-what{font-size:11.5px;font-weight:500;color:var(--faint);letter-spacing:.04em;margin-bottom:5px}
.wiz-title{font-size:17px;font-weight:600;line-height:1.35}
.wiz-due{font-size:13.5px;color:var(--soft);margin-top:7px}
.wiz-list{list-style:none;margin-top:14px;padding:0}
.wiz-list li{font-size:14px;padding:7px 0;border-top:1px solid var(--rule-soft);line-height:1.5}
.wiz-qty{color:var(--faint);font-size:13px;margin-left:6px}

.wiz-q{margin-bottom:26px}
.wiz-label{font-size:16px;font-weight:500;margin-bottom:5px;line-height:1.4}
.wiz-help{font-size:13.5px;color:var(--faint);margin-bottom:10px;line-height:1.5}
.wiz-ask{font-size:14px;color:var(--soft);background:var(--paper);border-left:3px solid var(--rule);
  padding:9px 13px;border-radius:0 7px 7px 0;margin-bottom:12px;line-height:1.55}
.wiz-in{width:100%;padding:12px 14px;font:400 16px inherit;font-family:inherit;
  border:1px solid var(--rule);border-radius:8px;background:#fff;color:var(--ink)}
.wiz-in:focus{outline:2px solid var(--pine);outline-offset:-1px;border-color:var(--pine)}

.wiz-opts{display:flex;flex-direction:column;gap:9px}
.wiz-opt{display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid var(--rule);
  border-radius:9px;background:#fff;cursor:pointer;font-size:15.5px;line-height:1.4}
.wiz-opt:hover{border-color:var(--faint)}
.wiz-opt.on{border-color:var(--pine);background:var(--pine-wash);font-weight:500}
.wiz-opt input{width:19px;height:19px;flex:none;accent-color:var(--pine)}
.wiz-opt.small{font-size:14.5px;padding:11px 14px}

.wiz-sep{font-size:13px;font-weight:500;color:var(--faint);letter-spacing:.02em;
  padding-top:20px;margin-bottom:20px;border-top:1px solid var(--rule)}

.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:22px;border-top:1px solid var(--rule);margin-top:8px}
.wiz-next,.wiz-send,.wiz-add{font:500 16px inherit;font-family:inherit;padding:14px 26px;
  border-radius:9px;border:1px solid var(--pine);background:var(--pine);color:#fff;cursor:pointer}
.wiz-next:hover,.wiz-send:hover,.wiz-add:hover{background:var(--pine-deep)}
.wiz-send{padding:15px 30px;font-size:16.5px}
.wiz-add{width:100%;margin-top:4px}
.wiz-back{font:400 15px inherit;font-family:inherit;padding:12px 18px;border-radius:9px;
  border:1px solid var(--rule);background:#fff;color:var(--soft);cursor:pointer}
.wiz-back:hover{border-color:var(--faint);color:var(--ink)}

.wiz-note{background:var(--amber-wash);border:1px solid var(--amber);border-radius:9px;
  padding:14px 17px;margin-bottom:22px}
.wiz-note b{display:block;color:var(--amber);font-size:14.5px;margin-bottom:5px}
.wiz-note p{font-size:14px;color:#6b4f10;line-height:1.55}

.wiz-upload{background:var(--panel);border:1px solid var(--rule);border-radius:10px;
  padding:20px;margin-bottom:22px}
.wiz-files{margin-bottom:20px}
.wiz-file{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;background:var(--panel);border:1px solid var(--rule);border-radius:9px;margin-bottom:9px}
.wf-label{font-size:14.5px;font-weight:500}
.wf-meta{font-size:12.5px;color:var(--faint);margin-top:2px}

.wiz-review{background:var(--panel);border:1px solid var(--rule);border-radius:10px;
  padding:16px 18px;margin-bottom:14px}
.wr-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.wr-n{width:24px;height:24px;border-radius:6px;background:var(--pine-wash);color:var(--pine);
  display:grid;place-items:center;font-size:12.5px;font-weight:600;flex:none}
.wr-t{flex:1;font-size:15px;font-weight:500}
.wr-line{font-size:14px;color:var(--soft);line-height:1.6;padding:2px 0}
.wr-spec{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--soft);padding:4px 0}

.wiz-block{background:var(--amber-wash);border:1px solid var(--amber);border-radius:9px;
  padding:15px 18px;margin-bottom:18px}
.wiz-block b{display:block;color:var(--amber);font-size:15px;margin-bottom:7px}
.wiz-block ul{margin:0;padding-left:20px}
.wiz-block li{font-size:14px;color:#6b4f10;line-height:1.6}

@media(max-width:600px){
  .wiz-h{font-size:22px}
  .wiz-next,.wiz-send{width:100%;text-align:center}
  .wiz-nav{flex-direction:column-reverse;gap:10px}
  .wiz-back{width:100%}
}

.flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.flow-s{font-size:12.5px;padding:5px 12px;border-radius:14px;border:1px solid var(--rule);
  background:#fff;color:var(--faint)}
.flow-s.on{border-color:var(--pine);background:var(--pine-wash);color:var(--pine);font-weight:500}
.flow-s.done{border-color:var(--rule);background:var(--paper);color:var(--soft)}
.flow-a{color:var(--ghost);font-size:13px}

.keybox{font-family:ui-monospace,monospace;font-size:19px;letter-spacing:.12em;background:var(--paper);
  border:1px solid var(--rule);border-radius:8px;padding:14px 16px;text-align:center;word-break:break-all}
.qa{padding:14px 16px;border-bottom:1px solid var(--rule-soft)}
.qa:last-child{border-bottom:none}
.qa-n{display:inline-block;min-width:26px;font-family:ui-monospace,monospace;font-size:12px;
  color:var(--faint);font-weight:500}
.qa-q{font-size:14px;line-height:1.55;margin:5px 0}
.qa-a{font-size:13.5px;line-height:1.6;background:var(--pine-wash);border-radius:7px;
  padding:10px 13px;margin-top:8px;color:#1c4a39}
.qa-broadcast{background:var(--slate-wash);color:#2c3f4c}

/* Collapsible items and specs. Seven items x four specs is 28 open forms
   otherwise — unusable. Saved rows fold; new ones open. */
details.item > summary.item-h{list-style:none;cursor:pointer}
details.item > summary.item-h::-webkit-details-marker{display:none}
details.item > summary.item-h::before{content:"\25B8";color:var(--ghost);font-size:11px;
  margin-right:2px;transition:transform .15s;display:inline-block}
details.item[open] > summary.item-h::before{transform:rotate(90deg)}
details.specwrap{border:1px solid var(--rule-soft);border-radius:7px;margin-bottom:9px;
  background:var(--paper);overflow:hidden}
summary.specsum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:10px 12px;font-size:13px}
summary.specsum::-webkit-details-marker{display:none}
summary.specsum::before{content:"\25B8";color:var(--ghost);font-size:10px;display:inline-block;
  transition:transform .15s}
details.specwrap[open] summary.specsum::before{transform:rotate(90deg)}
summary.specsum .ss-t{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.specwrap .spec{border:none;margin:0;border-top:1px solid var(--rule-soft);border-radius:0}

.preview{font-size:13px;color:var(--faint);margin-top:6px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview.bold{color:var(--ink);font-weight:500}
.tabbar .badge-n{margin-left:6px}

/* named document slots */
.slot{border:1px solid var(--rule);border-radius:10px;padding:15px 17px;margin-bottom:12px;background:var(--panel)}
.slot.ok{border-color:var(--pine);background:var(--pine-wash)}
.slot.pend{border-color:var(--amber);background:var(--amber-wash)}
.slot-h{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.slot-t{font-size:15px;font-weight:500;line-height:1.4}
.slot-hint{font-size:13px;color:var(--soft);margin-top:4px;line-height:1.5}
.slot-file{font-size:12.5px;color:var(--soft);margin-top:8px;font-family:ui-monospace,monospace}
.slot-actions{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.slot-up,.slot-pend{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.slot-up input[type=file]{flex:1;min-width:170px;font-size:13px;padding:7px}
.slot-pend input[type=text]{flex:1;min-width:160px;font-size:13px;padding:7px 10px}
.slot-pend input[type=date]{width:auto;font-size:13px;padding:7px 10px}
.req-tag{font-size:10.5px;font-weight:500;color:var(--rust);background:var(--rust-wash);
  border-radius:4px;padding:1px 7px;margin-left:7px;vertical-align:2px}
.opt-tag{font-size:10.5px;font-weight:500;color:var(--faint);background:var(--paper);
  border:1px solid var(--rule);border-radius:4px;padding:1px 7px;margin-left:7px;vertical-align:2px}

.trow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.trow:last-of-type{border-bottom:none}
.trow select{width:auto;min-width:130px;font-size:13px;padding:6px 9px}
.tl{font-size:14px;font-weight:500}
.th{font-size:12.5px;color:var(--faint);margin-top:2px;line-height:1.45}

/* comparison grid */
.cmp-wrap{overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
table.cmp th{text-align:left;font-size:12px;font-weight:600;padding:11px 13px;
  border-bottom:1px solid var(--rule);background:var(--paper);vertical-align:top;white-space:nowrap}
table.cmp td{padding:10px 13px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
table.cmp tr:last-child td{border-bottom:none}
.cmp-h{font-weight:500;color:var(--soft);white-space:nowrap}
.cmp-item{font-weight:400;white-space:normal;max-width:230px}
.cmp-sub{font-size:11px;color:var(--faint);font-weight:400;margin-top:2px}
.cmp .win{background:var(--pine-wash);color:var(--pine);font-weight:500}
.cmp .dim{color:var(--ghost)}
.cmp-sep td{background:var(--paper);height:8px;padding:3px 13px}
input.sc{width:62px;padding:6px 8px;font-size:14px;text-align:center;
  font-family:ui-monospace,monospace}
input.scn{width:100%;margin-top:5px;padding:5px 8px;font-size:12px}

/* one criterion per line */
.crit-block{margin-top:11px;padding-top:11px;border-top:1px dashed var(--rule)}
.crit-head{display:flex;justify-content:space-between;align-items:center;
  font-size:12px;font-weight:500;color:var(--faint);margin-bottom:9px}
.crit-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.crit-ref{font-size:11px;color:var(--faint);width:38px;flex:none}
.crit-text{flex:1;min-width:180px;padding:6px 9px;font-size:13px;border:1px solid var(--rule);
  border-radius:6px}
.crit-num{width:64px;padding:6px 7px;font-size:12.5px;border:1px solid var(--rule);border-radius:6px}
.crit-unit{width:60px;padding:6px 7px;font-size:12.5px;border:1px solid var(--rule);border-radius:6px}
.crit-tol{width:84px;padding:6px 7px;font-size:12.5px;border:1px solid var(--rule);border-radius:6px}
.crit-altgrp{width:44px;padding:6px 7px;font-size:12.5px;border:1px solid var(--rule);border-radius:6px}
.crit-chk{display:flex!important;align-items:center;gap:4px;font-size:11.5px!important;
  font-weight:400!important;color:var(--soft)!important;margin:0!important;white-space:nowrap}
.crit-chk input{width:auto}
.crit-method{font-size:11px;color:var(--faint);margin:-3px 0 8px 44px}
.alt-or{font-size:11px;font-weight:500;color:var(--slate);text-align:center;margin:2px 0 2px 44px}

.crit-list{list-style:none;margin-top:7px;padding:0}
.crit-list li{font-size:12.5px;color:var(--soft);line-height:1.7;padding:2px 0}
.crit-tag{font-size:10.5px;color:var(--faint);margin-right:5px}
.crit-orsep{font-size:11px;font-weight:600;color:var(--slate);margin:0 4px}
.crit-range{color:var(--faint);margin-left:5px}

.crit-card{background:var(--panel);border:1px solid var(--rule);border-radius:9px;
  padding:13px 15px;margin-top:9px}
.crit-card-h{font-size:14.5px;line-height:1.5}

/* On a narrow screen a thin triangle disappears into the row. A dash is a
   clearer, unambiguous "this expands" marker at small sizes. */
@media (max-width: 480px) {
  details.item > summary.item-h::before,
  summary.specsum::before {
    content: "\2013";              /* en dash */
    font-size: 15px;
    font-weight: 700;
    transform: none !important;
    width: 12px;
    display: inline-block;
    text-align: center;
  }
  details.item[open] > summary.item-h::before,
  details.specwrap[open] summary.specsum::before {
    content: "\2212";              /* minus, slightly heavier, reads as "open" */
  }
}

/* project banner on a message thread — the conversation partner's name is the
   H1, so which PROJECT this thread belongs to needs its own clear anchor,
   especially once one supplier has several threads with the same buyer. */
.proj-banner{display:flex;align-items:center;gap:11px;padding:11px 15px;
  background:var(--pine-wash);border:1px solid var(--pine);border-radius:9px;
  margin-bottom:16px;flex-wrap:wrap}
.proj-ref{font-family:ui-monospace,monospace;font-size:12.5px;font-weight:600;
  color:var(--pine);background:#fff;border-radius:5px;padding:2px 8px}
.proj-title{font-size:13.5px;font-weight:500;color:#1c4a39;flex:1}

/* ---- mobile navigation: hamburger + dropdown ---- */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:34px;height:34px;border:1px solid var(--rule);border-radius:6px;background:#fff;
  cursor:pointer;padding:0}
.hamburger span{display:block;width:16px;height:2px;background:var(--ink);margin:0 auto;
  border-radius:1px}

@media (max-width: 860px) {
  .who-name{display:none}                 /* first thing to drop: name takes room, role badge stays */
  .hamburger{display:flex}
  .tabbar{border-bottom:none}
  .tabbar .wrap.tabs{
    display:none;                          /* hidden until toggled open */
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    background:var(--panel);
    padding:6px 0;
  }
  .tabbar.open .wrap.tabs{display:flex}
  .tabbar .tab{padding:12px 24px;border-right:none;border-bottom:1px solid var(--rule-soft)}
  .tabbar .tab:last-child{border-bottom:none}
  .tabbar .tab.on{background:var(--pine-wash)}
}

@media (max-width: 480px) {
  .brand span{display:none}               /* org name — brand initials still identify the app */
  .who{gap:7px}
}

/* requirement view tabs — Overview / Offers / Amendments / Evaluation / Awards / PO */
.reqtabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:18px;
  overflow-x:auto}
.reqtab{padding:9px 15px;font-size:13.5px;color:var(--soft);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap}
.reqtab:hover{color:var(--ink)}
.reqtab.on{color:var(--pine);border-bottom-color:var(--pine);font-weight:500}

/* stage strip — where the project has actually got to */
.stagebar{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.stage-pip{font-size:11.5px;padding:4px 11px;border-radius:13px;border:1px solid var(--rule);
  background:#fff;color:var(--ghost);white-space:nowrap}
.stage-pip.done{background:var(--pine-wash);border-color:var(--pine-wash);color:var(--pine)}
.stage-pip.now{background:var(--pine);border-color:var(--pine);color:#fff;font-weight:500}
.stage-pip.skip{background:var(--paper);border-style:dashed;color:var(--faint)}
.nextup{display:flex;align-items:center;gap:11px;padding:10px 15px;margin-bottom:18px;
  background:var(--amber-wash);border:1px solid var(--amber);border-radius:9px;flex-wrap:wrap}
.nextup-k{font-size:10.5px;font-weight:600;letter-spacing:.05em;color:var(--amber);
  text-transform:uppercase}
.nextup-v{flex:1;font-size:14px;color:#6b4f10;font-weight:500}
@media(max-width:600px){.stage-pip{font-size:10.5px;padding:3px 8px}}

.stage-note{font-size:10.5px;color:var(--faint);margin-left:4px}

/* missing-answer highlighting on the review screen */
.wiz-block.stop{background:var(--rust-wash);border-color:var(--rust)}
.wiz-block.stop b{color:var(--rust)}
.miss-intro{font-size:13px;color:#7a3b32;margin:0 0 9px}
.misslist{list-style:none;margin:0;padding:0}
.misslist li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid rgba(160,60,45,.18);font-size:13.5px;color:#7a3b32}
.misslist li:first-child{border-top:none}
.miss-ref{font-weight:600;color:var(--rust)}
.miss-msg{color:#7a3b32}
.miss-item{font-size:12px;color:var(--faint)}
.miss-go{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--rust);
  text-decoration:underline;white-space:nowrap}
.wr-spec.missing{background:var(--rust-wash);border-radius:6px;padding:6px 9px;margin:3px 0}
.wr-spec.missing .miss-go{margin-left:auto}

.samp-line{display:flex;gap:9px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.samp-line input[type=file]{font-size:13px;padding:6px}
a.stage-pip{cursor:pointer}
a.stage-pip:hover{border-color:var(--pine)}

/* ============================================================
   PANELS — modal (centre), offcanvas (right), drop-down (top)
   The markup inside is ordinary page markup, so every panel
   still works as a full page if JavaScript never loads.
   ============================================================ */
.panel-backdrop{position:fixed;inset:0;background:rgba(28,34,31,.42);opacity:0;
  pointer-events:none;transition:opacity .18s;z-index:800}
.panel-backdrop.on{opacity:1;pointer-events:auto}
body.panel-locked{overflow:hidden}

.panel-sheet{position:fixed;z-index:810;background:var(--panel);
  box-shadow:0 18px 50px rgba(28,34,31,.22);opacity:0;pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), opacity .18s;
  display:flex;flex-direction:column;max-height:92vh}
.panel-sheet.on{opacity:1;pointer-events:auto}

/* drop from the top — Ali's preference for the sample order */
.panel-sheet[data-from=top]{top:0;left:50%;width:min(760px,94vw);
  transform:translate(-50%,-102%);border-radius:0 0 14px 14px}
.panel-sheet[data-from=top].on{transform:translate(-50%,0)}

/* slide from the right — for longer forms */
.panel-sheet[data-from=right]{top:0;right:0;height:100vh;max-height:100vh;
  width:min(560px,94vw);transform:translateX(102%);border-radius:14px 0 0 14px}
.panel-sheet[data-from=right].on{transform:translateX(0)}

/* centred modal — for short confirmations */
.panel-sheet[data-from=center]{top:50%;left:50%;width:min(520px,94vw);
  transform:translate(-50%,-46%) scale(.98);border-radius:14px}
.panel-sheet[data-from=center].on{transform:translate(-50%,-50%) scale(1)}

.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--rule);flex:none}
.sheet-h h2{font-size:16px;font-weight:600}
.sheet-h .sub{font-size:12.5px;color:var(--faint);margin-top:2px}
.sheet-x{border:none;background:none;font-size:22px;line-height:1;color:var(--faint);
  cursor:pointer;padding:0 4px}
.sheet-x:hover{color:var(--ink)}
.sheet-b{padding:18px 20px;overflow-y:auto;flex:1}
.sheet-f{padding:14px 20px;border-top:1px solid var(--rule);display:flex;
  justify-content:flex-end;gap:9px;flex:none;background:var(--paper)}

@media(max-width:600px){
  .panel-sheet[data-from=top],.panel-sheet[data-from=center]{
    top:auto;bottom:0;left:0;width:100vw;max-height:88vh;
    transform:translateY(102%);border-radius:14px 14px 0 0}
  .panel-sheet[data-from=top].on,.panel-sheet[data-from=center].on{transform:translateY(0)}
  .panel-sheet[data-from=right]{width:100vw;border-radius:0}
}

/* ---- toasts: feedback without a reload ---- */
.toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:900;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{padding:11px 18px;border-radius:9px;font-size:13.5px;font-weight:500;
  box-shadow:0 8px 24px rgba(28,34,31,.18);opacity:0;transform:translateY(8px);
  transition:opacity .2s, transform .2s;max-width:90vw}
.toast.on{opacity:1;transform:translateY(0)}
.toast.is-ok{background:var(--pine);color:#fff}
.toast.is-error{background:var(--rust);color:#fff}

/* ---- hint popover: point at the field, do not just complain at the top ---- */
.hintpop{position:absolute;z-index:920;background:var(--rust);color:#fff;
  font-size:12.5px;line-height:1.45;padding:8px 12px;border-radius:8px;max-width:280px;
  box-shadow:0 6px 18px rgba(28,34,31,.2);opacity:0;transform:translateY(-4px);
  transition:opacity .15s, transform .15s;pointer-events:none}
.hintpop.on{opacity:1;transform:translateY(0)}
.hintpop:before{content:"";position:absolute;top:-5px;left:14px;width:10px;height:10px;
  background:var(--rust);transform:rotate(45deg)}
.field-bad{outline:2px solid var(--rust)!important;outline-offset:-1px}

/* ---- a row that just arrived without a reload ---- */
.just-added{animation:flashin .9s ease}
@keyframes flashin{
  0%{background:var(--pine-wash)}
  100%{background:transparent}
}

/* ---- generic collapse ---- */
[data-toggle]{cursor:pointer}
.collapsed{display:none}
.collapsed.shown{display:block}

/* form grouping inside a panel — keeps a long form readable without tabs */
.fgroup{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--rule-soft)}
.fgroup:last-of-type{border-bottom:none;margin-bottom:8px}
.fgroup-h{font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--soft);
  text-transform:uppercase;margin-bottom:11px}
.fgroup-note{display:block;font-size:11.5px;font-weight:400;letter-spacing:0;
  color:var(--faint);text-transform:none;margin-top:3px}
.sheet-b form label{margin-top:13px}
.sheet-b form label:first-of-type{margin-top:0}

.stagelist{list-style:none;margin:0;padding:0}
.stagelist li{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-bottom:1px solid var(--rule-soft);font-size:14px}
.stagelist li:last-child{border-bottom:none}
.sl-mark{width:18px;text-align:center;font-size:13px}
.sl-label{flex:1}
.sl-note{font-size:11.5px;color:var(--faint)}
.sl-done .sl-mark{color:var(--pine)}
.sl-done .sl-label{color:var(--soft)}
.sl-now .sl-mark{color:var(--pine)}
.sl-now .sl-label{font-weight:600}
.sl-skip .sl-mark{color:var(--ghost)}
.sl-skip .sl-label{color:var(--faint)}
.sl-todo .sl-mark{color:var(--ghost)}
.sl-todo .sl-label{color:var(--faint)}