/* Portal: sits on the site styles. Dense where the work is (tables, order lines), plain everywhere else. */
.portal{padding-block:28px clamp(56px,7vw,96px);background:var(--bg-2);min-height:70vh}
.pv{margin-bottom:24px;padding:11px 16px;background:#fff;border:1px solid var(--line-2);border-left:4px solid var(--red);border-radius:var(--r);font-size:15px;color:var(--ink-2)}
.pv b{color:var(--ink)}

.signin{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px clamp(24px,5vw,64px);align-items:start;padding-top:clamp(8px,3vw,40px)}
.signin-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:30px 30px 32px;box-shadow:var(--sh)}
.signin h1{font:800 30px/1.1 var(--f);letter-spacing:-.02em}
.signin .sub{font-size:16px;margin:8px 0 22px}
.signin form{grid-template-columns:minmax(0,1fr)}
.signin-side h2{font:800 20px/1.2 var(--f);letter-spacing:-.01em;margin:8px 0 14px}
.signin-side ul{display:grid;gap:12px}
.pick{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:16px 18px}
.pick:hover{border-color:var(--ink)}
.pick b{display:block;font:800 17px/1.2 var(--f)}
.pick span{display:block;margin-top:4px;font-size:15px;color:var(--ink-2)}
.pick i{font-style:normal;font-weight:700;color:var(--ink)}
@media (max-width:820px){.signin{grid-template-columns:minmax(0,1fr)}}

.app-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-bottom:26px}
.app-top h1{font:800 30px/1.1 var(--f);letter-spacing:-.02em}
.who{font-size:14.5px;color:var(--ink-3);margin-top:2px}
.app-top .seg{flex-wrap:wrap}
.app-top .seg button{padding:11px 15px;font-size:14.5px}
.app-top .arrow{margin-left:auto}
.app-top .arrow::after{content:""}

.vhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:16px}
.vhead h2,.two h2{font:800 22px/1.2 var(--f);letter-spacing:-.015em}
.h3{font:800 19px/1.2 var(--f);letter-spacing:-.01em;margin:34px 0 12px}
.meta{margin-top:6px;font-size:14.5px;color:var(--ink-3)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.acts input[type=search],.acts select{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;font-size:15px;min-width:0}
.acts input[type=search]{width:230px;max-width:100%}
.empty{padding:22px;background:#fff;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--ink-3);font-size:15.5px}
.portal .fine{margin-top:12px}
.link{border:0;background:none;padding:0;font:700 14.5px/1.2 var(--f);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.link:hover{color:var(--red-hi);text-decoration-color:var(--red)}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:30px}
.tile{display:block;text-align:left;background:#fff;border:1px solid var(--line-2);border-top:4px solid var(--red);border-radius:var(--r);padding:18px 20px 16px}
.tile:hover{border-color:var(--ink);border-top-color:var(--red)}
.tile b{display:block;font:800 38px/1 var(--f);letter-spacing:-.03em}
.tile span{display:block;margin-top:8px;font-size:15px;color:var(--ink-2)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.two h2{margin-bottom:12px}
.list{background:#fff;border:1px solid var(--line-2);border-radius:var(--r)}
.list li+li{border-top:1px solid var(--line)}
.rowbtn{display:block;width:100%;border:0;background:none;text-align:left;padding:13px 16px;font-size:15.5px}
button.rowbtn:hover{background:var(--bg-2)}
.rowbtn span{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:minmax(0,1fr)}}

.portal .tbl-wrap{background:#fff}
.portal td{font-size:15px;padding:10px 14px}
.portal th{padding:12px 14px}
.portal table.slim{min-width:0}
.sub2{display:block;font-size:13.5px;font-weight:400;color:var(--ink-3);margin-top:2px;max-width:34ch}
.rowacts{white-space:nowrap}
.rowacts>*+*{margin-left:8px}
.pos{color:#17722f;font-weight:700}.neg{color:var(--red-hi);font-weight:700}
.tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:3px;background:var(--bg-2);border:1px solid var(--line-2);font:700 11.5px/1.3 var(--f);color:var(--ink-2)}
.pill{display:inline-block;padding:4px 10px;border-radius:99px;font:700 12.5px/1.2 var(--f);background:#ececec;color:#3a3a3a;white-space:nowrap}
.p-submitted,.p-low{background:#fdf0cf;color:#6b4a00}
.p-confirmed,.p-in-production{background:#dfeafc;color:#123f84}
.p-shipped,.p-ok{background:#dcf1e1;color:#135c28}
.p-cancelled,.p-out{background:#fbdcdc;color:#8a0009}

/* order editor */
.ed{display:grid;gap:14px}
.ogrid,.lgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px}
.ogrid{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px 20px}
.lf{display:grid;gap:5px;min-width:0;align-content:start}
.lf.w2{grid-column:span 2}.lf.w3{grid-column:span 3}
.lf span{font:600 13.5px/1.2 var(--f);color:var(--ink-2)}
.lf input,.lf select,.lf textarea{width:100%;min-width:0;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:9px 10px;font-size:15px;color:var(--ink)}
.lf input:focus,.lf select:focus,.lf textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,21,21,.1)}
.lf input:disabled,.lf select:disabled,.lf textarea:disabled{background:var(--bg-2);color:var(--ink-2)}
.lf textarea{min-height:64px;resize:vertical}
.line{margin:0;min-width:0;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:6px 20px 14px}
.line legend{padding:0 8px;margin-left:-8px;font:800 15px/1 var(--f);color:var(--red-hi)}
.lfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px}
.lext{margin-right:auto;font:700 14.5px/1.2 var(--f);font-variant-numeric:tabular-nums}
.addrow{display:flex}
.kind button{padding:10px 15px}
.tot{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;margin-top:16px;padding:14px 20px;background:#fff;border:1px solid var(--line-2);border-top:4px solid var(--red);border-radius:var(--r);box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.tot span{display:block;font:600 13px/1.2 var(--f);color:var(--ink-3)}
.tot b{display:block;font:800 22px/1.15 var(--f);letter-spacing:-.01em}
.tot .acts{margin-left:auto}
.tot .arrow::after{content:""}
#ed-err{margin-top:10px}
@media (max-width:1000px){.ogrid,.lgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.ogrid,.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lf.w3{grid-column:span 2}.tot{position:static}.tot .acts{margin-left:0}}

/* dialog + toast */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(15,15,15,.5);overflow:auto}
.modal-card{width:min(560px,100%);background:#fff;border-radius:6px;padding:26px 28px 28px;box-shadow:0 24px 70px rgba(0,0,0,.3)}
.modal-card h2{font:800 22px/1.2 var(--f);letter-spacing:-.015em;margin-bottom:18px}
.modal-card p.f{font-size:16px;color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;margin:0;max-width:calc(100% - 32px);padding:12px 18px;border-radius:var(--r);background:var(--dark);color:#fff;font:600 15px/1.3 var(--f);box-shadow:0 10px 30px rgba(0,0,0,.25)}