@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..800;1,400..800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--orange:#F04C24;--orange-dk:#C93C18;--orange-deep:#A8300F;--black:#121212;--ink:#0E0D0C;--gray-90:#191817;--gray-80:#2C2A28;--gray-60:#5C5852;--gray-30:#BCB8B2;--gray-10:#F4F2EE;--paper:#FBFAF7;--white:#FFFFFF;
--ok:#1A7F37;--ok-bg:#E3F5E8;--warn:#9A6700;--warn-bg:#FFF4D6;--bad:#B42318;--bad-bg:#FDE8E8;--info:#0B5CAD;--info-bg:#E0ECFF;
--font:'Schibsted Grotesk',Helvetica,Arial,sans-serif;--ease:cubic-bezier(.16,1,.3,1);--gutter:28px;
--shadow-sm:0 1px 2px rgba(20,16,12,.05),0 3px 10px rgba(20,16,12,.05);--shadow-md:0 4px 14px rgba(20,16,12,.06),0 14px 36px rgba(20,16,12,.08);--shadow-lg:0 10px 28px rgba(20,16,12,.09),0 28px 64px rgba(20,16,12,.12)}
/* S39 review: a focused field or the skip link's target is scrolled out from under the sticky nav (its height per width:
   123 px here, up to 167 px where an admin's links wrap, 61 px on a phone). */
html{-webkit-text-size-adjust:100%;scroll-padding-top:132px}
body{font-family:var(--font);color:var(--black);background:var(--paper);font-size:16px;line-height:1.6;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{font-weight:800;line-height:1.12;letter-spacing:-.025em}
h1{font-size:clamp(1.7rem,2.8vw,2.2rem);margin-bottom:8px}h2{font-size:1.2rem;margin-bottom:14px}h3{font-size:1rem;font-weight:700}
.label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);display:block;margin-bottom:10px}
.lead{color:var(--gray-60);max-width:680px;font-size:1.02rem}
.muted{color:var(--gray-60)}.small{font-size:.88rem}.err{color:var(--bad);font-size:.88rem}.ok-text{color:var(--ok)}
.accent{color:var(--orange)}
.skip-link{position:absolute;top:-100px;left:8px;z-index:200;background:var(--orange);color:#fff;font-weight:700;font-size:.88rem;padding:10px 18px;border-radius:4px}
.skip-link:focus{top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
.container{max-width:1240px;margin:0 auto;padding:0 var(--gutter);width:100%}

/* ---- nav ---- */
.nav{background:var(--black);color:#fff;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:100}
.nav__inner{max-width:1240px;margin:0 auto;padding:0 var(--gutter);min-height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.nav__logo{display:flex;align-items:center;height:68px;justify-self:start}
.nav__title{justify-self:center;font-size:.8rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#fff}
.nav__end{justify-self:end;display:flex;align-items:center;gap:10px}
.nav__bar{border-top:1px solid rgba(255,255,255,.08)}
.nav__bar[hidden]{display:none}
.nav__logo img{height:32px;width:auto}
.nav__links{max-width:1240px;margin:0 auto;padding:6px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px}
.nav__links a{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.72);padding:9px 14px;border-radius:7px;transition:background .2s,color .2s;white-space:nowrap}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav__links a.active{color:#fff;background:rgba(255,255,255,.12)}
.nav__user{position:relative}
.nav__menu-who{display:none}
.nav__user>summary{list-style:none;cursor:pointer}.nav__user>summary::-webkit-details-marker{display:none}
.nav__chip{display:flex;align-items:center;gap:12px;height:48px;padding:0 14px 0 6px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#fff;transition:background .2s,border-color .2s;max-width:280px}
.nav__user[open]>.nav__chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.nav__caret{width:8px;height:8px;border-right:2px solid rgba(255,255,255,.7);border-bottom:2px solid rgba(255,255,255,.7);transform:rotate(45deg);margin:-4px 2px 0 4px;flex:0 0 auto}
.nav__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:#fff;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.28);padding:6px;z-index:100;display:flex;flex-direction:column}
.nav__menu a,.nav__menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:7px;color:var(--black);font:inherit;font-size:.92rem;font-weight:600;background:none;border:0;cursor:pointer}
.nav__menu a:hover,.nav__menu button:hover,.nav__menu a:focus-visible,.nav__menu button:focus-visible{background:var(--gray-05,#f4f3f1)}
.nav__menu form{border-top:1px solid rgba(20,18,16,.08);margin-top:4px;padding-top:4px}
.nav__chip:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.nav__avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--orange);color:#fff;font-size:.86rem;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.nav__who{display:flex;flex-direction:column;justify-content:center;min-width:0}
.nav__name{font-size:.94rem;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__role{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.1;margin-top:3px}
.nav__burger{display:none;margin-left:auto;width:48px;height:48px;border:1px solid rgba(255,255,255,.22);border-radius:7px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__burger span{width:20px;height:2px;background:#fff;display:block;transition:transform .25s,opacity .2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- page ---- */
.page-hero{background:var(--black);color:#fff;padding:34px 0 30px;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;top:-140px;right:-120px;width:420px;height:420px;background:var(--orange);opacity:.05;border-radius:50%;pointer-events:none}
.page-hero h1{color:#fff}
.page-hero .lead{color:rgba(255,255,255,.66)}
.page-hero .label{margin-bottom:10px}
main{flex:1;padding:28px 0 56px}
.card{background:#fff;border:1px solid rgba(20,18,16,.08);border-radius:12px;box-shadow:var(--shadow-sm);padding:24px 26px;margin-bottom:20px}
.card h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card--narrow{max-width:560px}.card--form{max-width:860px}.card--message{max-width:560px;margin:40px auto}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt18{margin-top:18px}.mb12{margin-bottom:12px}.mb14{margin-bottom:14px}.m0-14{margin:0 0 14px}
.h2-aside{font-weight:400}
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:6px 0 20px}
.stat{background:#fff;border:1px solid rgba(20,18,16,.08);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat__num{font-size:1.8rem;font-weight:900;line-height:1;color:var(--black)}
.stat__num.accent{color:var(--orange)}
.stat__label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-60);margin-top:8px}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:12px 12px;border-bottom:1px solid var(--gray-10);text-align:left;vertical-align:top}
th{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-60);white-space:nowrap}
tbody tr:hover td{background:#FDFCFA}
/* Long unbroken text (a 78-character vendor name, a SellerCloud error) wraps inside its cell instead of
   widening the table past the card and pushing the actions off-screen (walkthrough 30 Sep). "anywhere" only on
   that text: on every cell it let a squeezed table break ordinary words, button labels included (review 30 Sep).
   break-word on the cell does not narrow a table column (its narrowest width keeps the whole word), so every place
   that shows a name, address, email or error from people or another system is named here: the record (SKU, item
   name and facts, vendor name and facts), the Result column, error and warning lists, .wrap-any (a user's name and
   email, who requested or changed a line, a PO's flag and error, the user and target of a security event; a username
   may be 64 characters without a break). Review 30 Sep: a 178-character item name widened the queue to 1678 px in its
   1130 px card; test/e2e/portal-ui.e2e.test.ts measures the tables in headless Chrome. */
td{overflow-wrap:break-word}
.record strong,.record div,.result,code,.err-list li,.warn-list li,.kv dd,.notice,.wrap-any{overflow-wrap:anywhere}
td .btn{white-space:nowrap}
.result{max-width:22rem}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.PENDING{background:var(--warn-bg);color:var(--warn)}.INVALID{background:var(--bad-bg);color:var(--bad)}.APPROVED{background:var(--info-bg);color:var(--info)}
.REJECTED{background:var(--gray-10);color:var(--gray-60)}.CREATED{background:var(--ok-bg);color:var(--ok)}.ERROR{background:var(--bad-bg);color:var(--bad)}.DUPLICATE{background:var(--gray-10);color:var(--gray-60)}
.SUBMITTED{background:var(--info-bg);color:var(--info)}.BLOCKED_VENDOR,.BLOCKED_ITEM,.BLOCKED_DESTINATION{background:var(--warn-bg);color:var(--warn)}.CANCELLED,.SKIPPED{background:var(--gray-10);color:var(--gray-60)}

/* ---- forms & buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;font:inherit;font-size:.9rem;font-weight:700;border-radius:6px;cursor:pointer;border:1.5px solid transparent;transition:transform .3s var(--ease),background .2s,border-color .2s,box-shadow .3s var(--ease);letter-spacing:.005em;background:#fff;color:var(--black);border-color:rgba(20,18,16,.22);min-height:44px}
.btn:hover{transform:translateY(-1px);border-color:var(--black)}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 1px 0 rgba(168,48,15,.4),0 8px 20px rgba(240,76,36,.18)}
.btn-primary:hover{background:var(--orange-dk);border-color:var(--orange-dk);box-shadow:0 1px 0 rgba(168,48,15,.5),0 12px 26px rgba(240,76,36,.28)}
.btn-dark{background:var(--black);color:#fff;border-color:var(--black)}.btn-dark:hover{background:var(--gray-80)}
.btn-danger{background:#fff;color:var(--bad);border-color:rgba(180,35,24,.5)}.btn-danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn-sm{padding:7px 12px;font-size:.82rem;min-height:36px}.btn-block{width:100%}
form.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.field{margin-bottom:16px}
.field label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--black);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid rgba(20,18,16,.18);border-radius:6px;background:#fff;color:var(--black);transition:border-color .2s,box-shadow .2s;min-height:46px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,76,36,.14)}
.field .hint{font-size:.8rem;color:var(--gray-60);margin-top:5px}
input.inline-note{font:inherit;font-size:.86rem;padding:7px 10px;border:1.5px solid rgba(20,18,16,.18);border-radius:6px;width:190px;min-height:36px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.notice{padding:12px 16px;border-radius:8px;font-size:.92rem;margin-bottom:18px;border:1px solid transparent}
.notice-ok{background:var(--ok-bg);color:var(--ok);border-color:rgba(26,127,55,.2)}.notice-bad{background:var(--bad-bg);color:var(--bad);border-color:rgba(180,35,24,.2)}.notice-info{background:var(--info-bg);color:var(--info);border-color:rgba(11,92,173,.2)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.record strong{font-weight:700}.record .meta{font-size:.84rem;color:var(--gray-60);margin-top:3px;line-height:1.45}
.rule{width:44px;height:3px;background:var(--orange);border-radius:2px;margin:0 0 18px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filters .btn-sm.active{background:var(--black);color:#fff;border-color:var(--black)}

/* ---- custom select (enhanced by portal.js; native select stays as fallback) ---- */
.cselect-wrap{position:relative;display:inline-block;min-width:160px}
.cselect-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.cselect-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font:inherit;font-size:.92rem;padding:10px 12px;min-height:44px;border:1.5px solid rgba(20,18,16,.18);border-radius:6px;background:#fff;color:var(--black);cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s}
.cselect-btn:hover{border-color:var(--black)}
.cselect-wrap.is-open .cselect-btn,.cselect-btn:focus-visible{border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,76,36,.14);outline:none}
.cselect-chevron{width:8px;height:8px;flex:0 0 8px;border-right:2px solid var(--gray-60);border-bottom:2px solid var(--gray-60);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.cselect-wrap.is-open .cselect-chevron{transform:rotate(225deg) translateY(-2px)}
.cselect-list{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:#fff;border:1px solid rgba(20,18,16,.12);border-radius:10px;box-shadow:var(--shadow-md);max-height:260px;overflow:auto}
.cselect-list li{padding:10px 12px;border-radius:6px;font-size:.92rem;cursor:pointer;overflow-wrap:anywhere}
.cselect-label{min-width:0;overflow-wrap:anywhere}
.cselect-list li:hover,.cselect-list li.is-active{background:var(--gray-10)}
.cselect-list li[aria-selected="true"]{font-weight:700;color:var(--orange)}
.field .cselect-wrap{display:block;width:100%}
.field-msg{font-size:.8rem;color:var(--bad);margin-top:5px;min-height:1em}
input.is-invalid,.cselect-btn.is-invalid{border-color:var(--bad) !important}

/* ---- auth pages ---- */
.auth{flex:1;display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.auth__brand{background:var(--black);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth__brand::after{content:'';position:absolute;bottom:-160px;right:-160px;width:560px;height:560px;background:var(--orange);opacity:.06;border-radius:50%}
.auth__brand img.logo{height:38px;width:auto}
.auth__brand .symbol{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:420px;opacity:.14;pointer-events:none}
.auth__brand h1{color:#fff;font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.035em;margin:0 0 18px;max-width:520px}
.auth__brand h1 em{color:var(--orange);font-style:normal}
.auth__brand .lead{color:rgba(255,255,255,.66);max-width:440px}
.auth__cards{display:flex;flex-direction:column;gap:10px;width:260px;margin-top:36px;position:relative;z-index:1}
.auth__card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 18px}
.auth__card-num{font-size:1.3rem;font-weight:900;color:var(--orange);line-height:1}
.auth__card-label{font-size:.78rem;color:rgba(255,255,255,.85);margin-top:3px;letter-spacing:.03em}
.auth__foot{font-size:.76rem;color:rgba(255,255,255,.45);position:relative;z-index:1}
.auth__panel{display:flex;align-items:center;justify-content:center;padding:48px 28px;background:var(--paper)}
.auth__box{width:100%;max-width:440px;background:#fff;border:1px solid rgba(20,18,16,.08);border-radius:16px;box-shadow:var(--shadow-md);padding:40px 38px}
.auth__box h2{font-size:1.55rem;margin-bottom:6px}
.auth__box .sub{color:var(--gray-60);font-size:.95rem;margin-bottom:26px}
.auth__links{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;margin-top:16px;color:var(--gray-60);flex-wrap:wrap}
.auth__links a{color:var(--orange);font-weight:700}
.auth__resend{font-size:.86rem;margin-top:16px;color:var(--gray-60)}
.auth__resend .btn-link{background:none;border:0;padding:0;font:inherit;color:var(--orange);font-weight:700;cursor:pointer}
.auth__resend .btn-link:hover{text-decoration:underline}
.code-input{font-size:1.5rem;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}

/* ---- footer ---- */
.footer{background:var(--black);color:rgba(255,255,255,.55);font-size:.8rem;padding:20px 0}
.footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer a{color:rgba(255,255,255,.7)}
details summary{cursor:pointer;color:var(--info);font-size:.88rem}
code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:var(--gray-10);padding:1px 6px;border-radius:4px}
.events{list-style:none;font-size:.84rem;color:var(--gray-60)}
.events li{padding:3px 0}
.events time{font-variant-numeric:tabular-nums;margin-right:8px;color:var(--black)}
.chain{list-style:none;padding:0;margin:0}
.chain li{padding:2px 0;white-space:nowrap}

/* ---- tablet ---- */
@media(max-width:1024px){
  :root{--gutter:20px}
  .grid-2{grid-template-columns:1fr}
  .nav__links a{padding:9px 11px;font-size:.88rem}
  .nav__chip{max-width:200px}
  html{scroll-padding-top:176px}
}
/* ---- phone ---- */
@media(max-width:760px){
  :root{--gutter:16px}
  html{scroll-padding-top:70px}
  body{font-size:16px}
  .nav__inner{min-height:60px;gap:8px;grid-template-columns:auto 1fr auto}
  /* S39 review: the theme's logo rule (.nav__wordmark img.eeg-logo) outranks a plain one; the logo keeps its width and
     the title gives way (ellipsis) on the narrowest phones. */
  .nav__logo{height:60px}.nav__logo.nav__wordmark img.eeg-logo{height:28px;max-width:none}
  .nav__title{font-size:.68rem;letter-spacing:.12em;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .nav__end{gap:8px}
  .nav__burger{display:flex;width:44px;height:44px}
  .nav__bar{display:none}
  .nav.is-open .nav__bar:not([hidden]){display:block;max-height:calc(100dvh - 61px);overflow-y:auto;overscroll-behavior:contain}
  .nav__links{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:8px var(--gutter) 12px;gap:2px}
  .nav__links a{padding:13px 14px;font-size:1rem;border-radius:8px}
  /* The account is the initials only, beside the menu button; its menu opens under it, right-aligned inside the screen
     (it once sat past the screen edge, x 249 to 459 on a 375 px phone, walkthrough 30 Sep). */
  .nav__caret{display:none}
  .nav__who{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .nav__chip{height:44px;padding:0 3px;gap:0}
  .nav__menu{right:0;left:auto;min-width:0;width:min(240px,calc(100vw - 32px))}
  .nav__menu-who{display:flex;flex-direction:column;gap:2px;padding:10px 12px 8px;border-bottom:1px solid rgba(20,18,16,.08);margin-bottom:4px;font-size:.92rem;color:var(--black)}
  .nav__menu-who strong{overflow-wrap:anywhere}
  .nav__menu-who span{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#666}
  .page-hero{padding:24px 0 22px}
  h1{font-size:1.6rem}
  main{padding:18px 0 40px}
  .card{padding:18px 16px;border-radius:10px}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:14px}.stat__num{font-size:1.5rem}
  .form-row{grid-template-columns:1fr}
  input.inline-note{width:100%}
  form.inline{width:100%}
  .btn{min-height:46px}
  .auth{grid-template-columns:1fr;min-height:0}
  .auth__brand{padding:28px 20px 24px;min-height:0}
  .auth__brand h1{font-size:1.6rem;margin-bottom:10px}
  .auth__brand .lead{font-size:.95rem}
  .auth__brand .symbol,.auth__cards,.auth__foot{display:none}
  .auth__panel{padding:24px 16px 40px}
  .auth__box{padding:28px 22px;border-radius:14px}
  /* tables become stacked cards; portal.js copies the header text into data-label */
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{border:1px solid var(--gray-10);border-radius:10px;padding:6px 0;margin-bottom:12px;background:#fff}
  table.stack td{border:0;padding:8px 14px}
  table.stack td[data-label]::before{content:attr(data-label);display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-60);margin-bottom:3px}
  table.stack td:empty{display:none}
  tbody tr:hover td{background:transparent}
}

/* ---- request forms, queue lines (portal redesign 23 Sep 2026) ---- */
.pill.origin-portal{background:var(--gray-10);color:var(--black)}.pill.origin-upload{background:var(--gray-10);color:var(--gray-60)}.pill.origin-outside-portal{background:var(--warn-bg);color:var(--warn)}
.warn-list{list-style:none;margin:8px 0 0;padding:8px 12px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-size:.84rem;line-height:1.45}
.warn-list li+li{margin-top:4px}
.sku-list{margin:6px 0 0 1.3em;padding:0}.sku-list li{margin:2px 0}
.asin-dupes{margin:12px 0 18px;padding:12px 16px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-size:.84rem;line-height:1.5}
.asin-dupes__head{font-weight:700;display:flex;align-items:center;gap:6px}
.asin-dupes .muted{color:inherit;opacity:.75}
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--gray-60);color:#fff;font:700 .7rem/1 Georgia,serif;font-style:italic;cursor:help;position:relative;vertical-align:middle}
.info-tip:focus{outline:2px solid var(--orange);outline-offset:2px}
.info-tip:hover::after,.info-tip:focus::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:300px;padding:8px 10px;border-radius:6px;background:#141210;color:#fff;font:400 .78rem/1.4 inherit;font-style:normal;text-align:left;white-space:normal;z-index:50;box-shadow:var(--shadow-sm)}
.amz{display:flex;gap:14px;align-items:flex-start;margin:4px 0 6px;padding:10px 12px;border:1px solid rgba(20,18,16,.1);border-radius:10px;background:#fff}
.amz--empty{background:var(--gray-05,#f6f5f3)}
.amz__img{width:88px;height:88px;object-fit:contain;flex:0 0 auto;border-radius:6px;background:#fff}
.amz__title{font-weight:700;font-size:.92rem;line-height:1.35}
.confirm-dialog{margin:auto;border:0;border-radius:12px;padding:0;max-width:520px;width:calc(100% - 32px);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.confirm-dialog::backdrop{background:rgba(20,18,16,.55)}
.confirm-dialog form{padding:22px 24px 20px}
.confirm-dialog h3{font-size:1.08rem;margin:0 0 10px}
.confirm-dialog p{font-size:.92rem;line-height:1.5;margin:0 0 14px;max-height:40vh;overflow:auto}
.confirm-dialog textarea{width:100%;min-height:84px;font:inherit;font-size:.92rem;padding:10px 12px;border:1px solid rgba(20,18,16,.2);border-radius:8px;margin-bottom:6px}
.confirm-dialog .actions{justify-content:flex-end;margin-top:14px}
input.is-mirrored{background:var(--gray-05,#f6f5f3);color:var(--gray-60)}
.err-list{list-style:none;margin:8px 0 0;padding:8px 12px;border-radius:8px;background:var(--bad-bg);color:var(--bad);font-size:.84rem;line-height:1.45}
.err-list li+li{margin-top:4px}
.ext{color:var(--orange);font-weight:700;border-bottom:1.5px solid rgba(240,76,36,.35)}
.ext:hover{border-bottom-color:var(--orange)}
.nums{font-variant-numeric:tabular-nums;white-space:nowrap}
.nums .margin{font-weight:700}.nums .margin.neg{color:var(--bad)}
.hint.neg{color:var(--bad)}
.range a{color:var(--gray-60);border-bottom:1.5px solid transparent}.range a:hover{color:var(--black)}
.range a.active{color:var(--black);font-weight:700;border-bottom-color:var(--orange)}
.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 18px;font-size:.92rem;margin:0}
.kv dt{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-60);padding-top:3px}
.kv dd{margin:0;word-break:break-word}
.perm-list{list-style:disc;margin:8px 0 0;padding-left:1.4em;font-size:.88rem;line-height:1.55}.perm-list li{padding-left:.3em}.perm-list li+li{margin-top:3px}
fieldset.section{border:1px solid rgba(20,18,16,.1);border-radius:12px;padding:18px 20px 6px;margin:0 0 18px;background:#fff}
fieldset.section legend{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--orange);padding:0 8px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.form-grid .span-2{grid-column:span 2}
.line-card{background:#fff;border:1px solid rgba(20,18,16,.1);border-radius:12px;box-shadow:var(--shadow-sm);padding:18px 20px 8px;margin-bottom:18px}
.line-card.has-errors{border-color:rgba(180,35,24,.45)}
/* "Leave this ASIN out": the card stays readable (the box can be unticked) but reads as not sent. */
.line-card.is-skipped,.line-card:has(.skip input:checked){opacity:.55}
.line-card header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.line-card header h3{font-size:1.05rem;font-variant-numeric:tabular-nums}
.line-card .skip{font-size:.86rem;color:var(--gray-60);display:inline-flex;gap:6px;align-items:center}
.req{color:var(--orange)}
.check{display:flex;gap:8px;align-items:center;font-size:.9rem;margin:4px 0 14px}
.check input{width:18px;height:18px;accent-color:var(--orange)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs a{font-size:.84rem;font-weight:700;padding:7px 12px;border-radius:999px;border:1.5px solid rgba(20,18,16,.16);color:var(--gray-60)}
.tabs a.active{background:var(--black);border-color:var(--black);color:#fff}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:4px 0 16px}
.filters__status{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:var(--gray-60)}
.filters__status .cselect-wrap,.filters__status select{min-width:110px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;padding:6px 12px;border-radius:999px;border:1.5px solid rgba(20,18,16,.16);color:var(--gray-60);cursor:pointer;user-select:none;background:#fff}
.chip input{width:15px;height:15px;margin:0;accent-color:var(--orange)}
.chip:hover{border-color:rgba(20,18,16,.4)}
.chip.is-on,.chip:has(input:checked){background:var(--black);border-color:var(--black);color:#fff}
.chip:focus-within{outline:2px solid var(--orange);outline-offset:2px}
.chip-batch{text-decoration:none}
.filters__clear{font-size:.84rem;font-weight:700;color:var(--orange)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix .yes{color:var(--ok);font-weight:800}.matrix .no{color:var(--gray-30)}
.own-note{font-size:.82rem;color:var(--gray-60);max-width:220px}
textarea.asins{font-family:ui-monospace,Consolas,monospace;min-height:150px;resize:vertical}
.cselect-search{width:100%;font:inherit;font-size:.9rem;padding:9px 10px;border:1.5px solid rgba(20,18,16,.16);border-radius:6px;margin-bottom:6px}
.cselect-list li.is-hidden{display:none}
@media(max-width:760px){.form-grid .span-2{grid-column:auto}.kv{grid-template-columns:1fr}.kv dt{padding-top:8px}}

/* ---- Electronics Expo light theme (30 Sep 2026): colours of electronicsexpo.com (white, #222 text,
   green #3DB54B accent, #EBEBEB borders, Open Sans). Later rules win over the Cantatus defaults above.
   Green by role (review 30 Sep). The brand green (--brand, #3DB54B) is 2.66:1 on white: too light for text or for
   white text on it, so it only decorates (the wordmark, the circles, underlines). Text and links take --orange,
   #1F7A2C: 5.4:1 on white and at least 4.6:1 on every tinted panel here (the grey hero, the green nav tint, the red
   and amber lists), where #1E882F reads 3.9 to 4.25:1. Filled buttons and focus rings take --green, #1E882F (white
   text on it 4.55:1). Every orange shadow, focus halo and underline above is redrawn below.
   The status pills and the notice and warning lists: the base --ok on --ok-bg read 4.47:1 and --warn on --warn-bg
   4.44:1, just under 4.5:1; the two darker values below read 5.24:1 and 5.31:1 (review 1 Oct). ---- */
:root{--brand:#3DB54B;--green:#1E882F;--green-dk:#176B26;--orange:#1F7A2C;--orange-dk:#176B26;--orange-deep:#176B26;--black:#222222;--ink:#222222;--paper:#FFFFFF;--gray-10:#F5F5F5;--ok:#17732F;--warn:#8A5C00;--font:'Open Sans',Helvetica,Arial,sans-serif}
.nav{background:#fff;color:#222;border-bottom:1px solid #EBEBEB;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.nav__wordmark{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;line-height:1;color:#222;text-decoration:none}
.nav__wordmark b{font-size:1.15rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.nav__wordmark b span{color:var(--brand)}
/* "Approval portal" under the wordmark is the app's name in small text, not logo: #666 (#888 read 3.54:1, review 1 Oct). */
/* S35: EEG's logo (black on the light nav and sign-in panel), its height fixed so the page does not jump while it loads. */
.nav__wordmark img.eeg-logo{height:40px;width:auto;display:block}
.auth__brand .wordmark img.eeg-logo{height:56px;width:auto;display:block}
.nav__title{color:#222}
.nav__title:hover{color:var(--orange)}
.nav__bar{border-top-color:#EBEBEB;background:#FCFCFC}
.nav__links a{color:#555}
.nav__links a:hover{color:#222;background:#F5F5F5}
.nav__links a.active{color:var(--orange);background:#EAF7EC}
.nav__chip{border-color:#EBEBEB;color:#222}
.nav__chip:hover,.nav__user[open]>.nav__chip{background:#F5F5F5;border-color:#D8D8D8}
.nav__caret{border-right-color:#777;border-bottom-color:#777}
.nav__role{color:#666}
.nav__burger{border-color:#D8D8D8}
.nav__burger span{background:#222}
.page-hero{background:#F7F7F7;color:#222;border-bottom:1px solid #EBEBEB}
.page-hero h1{color:#222}
.page-hero .lead{color:#666}
.page-hero::after{opacity:.08;background:var(--brand)}
.btn-dark{background:#222;border-color:#222}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 1px 0 rgba(23,107,38,.4),0 8px 20px rgba(30,136,47,.16)}
.btn-primary:hover{background:var(--green-dk);border-color:var(--green-dk);box-shadow:0 1px 0 rgba(23,107,38,.5),0 12px 26px rgba(30,136,47,.24)}
.auth__brand{background:#F7F7F7;color:#222;border-right:1px solid #EBEBEB}
.auth__brand::after{background:var(--brand)}
.auth__brand h1{color:#222}
.auth__brand .lead{color:#666}
.auth__brand .symbol{display:none}
.auth__brand .wordmark{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;color:#222}
.auth__brand .wordmark b{font-size:1.6rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.auth__brand .wordmark b span{color:var(--brand)}

.auth__card{background:#fff;border-color:#EBEBEB}
.auth__card-label{color:#444}
/* Was white at 45% for the old black panel: 1.03:1 on this one (review 30 Sep). */
.auth__foot{color:#666}
.skip-link,.nav__avatar{background:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.info-tip:focus,.chip:focus-within{outline-color:var(--green)}
.field input:focus,.field select:focus,.field textarea:focus,.cselect-wrap.is-open .cselect-btn,.cselect-btn:focus-visible{border-color:var(--green);box-shadow:0 0 0 3px rgba(30,136,47,.18)}
.check input,.chip input{accent-color:var(--green)}
.ext{border-bottom-color:rgba(61,181,75,.45)}
.range a.active{border-bottom-color:var(--brand)}
.rule{background:var(--brand)}
/* "No" in the permission matrix was #BCB8B2, 1.97:1 on white. */
.matrix .no{color:var(--gray-60)}
/* Open Sans runs wider than the Cantatus font: tighter tables keep the queue's action buttons inside the card. */
table{font-size:.86rem}
th,td{padding:10px 9px}
td .pill{white-space:normal}
td .actions .btn-sm{padding:7px 11px}