/* Layout: employee view = photo cards + one form; admin view (password) = size matrix + all entries. */
:root{
  --bg:#efeeec; --surface:#ffffff; --sunken:#f6f5f3; --fg:#1d1c1b; --muted:#6d6a66; --line:#dcd9d4;
  --accent:#e8620c; --accent-ink:#ffffff; --accent-soft:#fdeadc; --ok:#2f7d4f; --err:#b3261e; --scrim:rgba(20,18,16,.86);
  --display:"Unbounded","Golos Text",system-ui,sans-serif;
  --body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171615; --surface:#22201e; --sunken:#1b1a18; --fg:#efece8; --muted:#a29d97; --line:#38352f;
  --accent:#ff7a24; --accent-ink:#1a0f06; --accent-soft:#3a2416; --ok:#6cc48f; --err:#ff8a80; --scrim:rgba(0,0,0,.88); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171615; --surface:#22201e; --sunken:#1b1a18; --fg:#efece8; --muted:#a29d97; --line:#38352f;
  --accent:#ff7a24; --accent-ink:#1a0f06; --accent-soft:#3a2416; --ok:#6cc48f; --err:#ff8a80; --scrim:rgba(0,0,0,.88); color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--body)}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:28px 56px;display:grid;gap:24px}
header{display:grid;gap:6px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
h1{font-family:var(--display);font-size:clamp(24px,4vw,34px);line-height:1.15;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-size:16px;margin:0;letter-spacing:.01em}
.lead{color:var(--muted);max-width:62ch;margin:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;display:grid;gap:16px;min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.hint{color:var(--muted);font-size:13px}
.notice{background:var(--accent-soft);border-radius:8px;padding:12px 14px;font-size:14px}
.notice.ok{background:var(--sunken);border:1px solid var(--line)}

/* product cards */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.product{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.photo{position:relative;display:block;width:100%;border:0;padding:0;background:#fff;cursor:zoom-in}
.photo img{display:block;width:100%;max-width:100%;aspect-ratio:585/640;object-fit:contain}
.photo .zoom{position:absolute;right:10px;bottom:10px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px}
.product-body{padding:14px 16px;display:grid;gap:4px;align-content:start}
.product-body b{font-size:15px}
.sku{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* form */
.line{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--sunken)}
.line.colleague{border-style:dashed}
.line-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.line.colleague .tag{color:var(--accent)}
.field{display:grid;gap:4px;min-width:0}
label,.lbl{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.02em}
input[type=text],input[type=password]{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:9px 11px;width:100%;max-width:420px}
input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:inherit;font-size:14px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:6px;padding:7px 12px;min-width:46px;display:inline-flex;align-items:center;gap:8px}
.seg button img{width:26px;height:28px;object-fit:contain;background:#fff;border-radius:3px}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.seg.sizes button{font-family:var(--mono);font-size:13px;justify-content:center}
.icon-btn{font:inherit;font-size:13px;background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;border-radius:6px;padding:6px 10px}
.icon-btn:hover{color:var(--err);border-color:var(--line)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{font:inherit;font-weight:600;cursor:pointer;border-radius:6px;padding:10px 16px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.status{font-size:13px;color:var(--muted)}
.status.ok{color:var(--ok)} .status.err{color:var(--err)}
.linkish{font:inherit;font-size:13px;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;padding:4px 0;justify-self:start}

/* admin */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.03em}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix td{font-family:var(--mono);font-size:14px}
.matrix td.zero{color:var(--line)}
.matrix tr.total td{font-weight:700;border-bottom:none}
.matrix td.rt{background:var(--sunken);font-weight:700}
.kpis{display:flex;gap:28px;flex-wrap:wrap}
.kpi{display:grid}
.kpi .v{font-family:var(--display);font-size:26px;line-height:1.1}
.kpi .k{font-size:12px;color:var(--muted)}
.people td{white-space:normal;vertical-align:top}
.chip{display:inline-block;font-family:var(--mono);font-size:12px;background:var(--sunken);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.chip.f{border-color:var(--accent)}
.dup{display:inline-block;font-size:11px;font-weight:600;color:var(--err);border:1px solid var(--err);border-radius:4px;padding:0 5px;margin-left:6px}
.by{font-size:12px;color:var(--muted)}
.empty{color:var(--muted);padding:18px 0;text-align:center}
.gate{display:grid;gap:10px;max-width:420px}

/* lightbox */
.lightbox{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:16px;z-index:10;cursor:zoom-out}
.lightbox figure{margin:0;display:grid;gap:10px;justify-items:center;max-width:min(92vw,820px)}
.lightbox img{max-width:100%;max-height:82vh;background:#fff;border-radius:8px;object-fit:contain}
.lightbox figcaption{color:#fff;font-size:14px;text-align:center}
.lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;font:inherit;font-size:14px;font-weight:600;background:#fff;color:#1d1c1b;border:0;border-radius:999px;padding:8px 14px;cursor:pointer}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.btn{text-decoration:none;display:inline-block}

/* shipping modal */
.ship{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:16px;z-index:20;overflow-y:auto}
.ship-card{position:relative;background:var(--surface);color:var(--fg);border-radius:12px;max-width:620px;width:100%;padding:24px 20px 20px;display:grid;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.ship-card h2{font-size:clamp(18px,3.4vw,22px);text-wrap:balance;padding-right:32px}
.ship-lead{margin:0;color:var(--muted)}
.ship-lead b{color:var(--fg)}
.ship-x{position:absolute;top:10px;right:10px;font:inherit;font-size:16px;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer}
.map-wrap{position:relative;background:var(--sunken);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.map-wrap svg{display:block;width:100%;height:auto}
.dot{fill:var(--line)}
.sea{fill:var(--line);opacity:.6}
.route-bg{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;opacity:.6}
.route{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round}
.city{fill:var(--surface);stroke:var(--fg);stroke-width:2.5}
.city-label{font:600 15px var(--body);fill:var(--fg);paint-order:stroke;stroke:var(--sunken);stroke-width:4px}
.truck circle{fill:var(--accent)}
.truck-ico{fill:var(--accent-ink)}
.day-badge{position:absolute;left:12px;bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 12px;display:grid;line-height:1.1}
.day-badge span{font-family:var(--display);font-size:24px;font-variant-numeric:tabular-nums}
.day-badge small{font-size:11px;color:var(--muted)}
.legs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.legs li{display:grid;gap:2px;border-top:3px solid var(--accent);padding-top:8px;font-size:13px;min-width:0}
.legs li span{color:var(--muted)}
@media (max-width:480px){.legs{grid-template-columns:1fr}}
.ship-contact{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;background:var(--accent-soft);border-radius:8px;padding:12px 14px;font-size:14px}
.ship-contact a{font-weight:700;color:var(--fg)}
.btn.small{padding:5px 10px;font-size:13px}

/* steps, slides, quiz */
.lightbox{z-index:30}
.ship-card{max-width:760px}
.pane{display:grid;gap:14px;min-width:0}
.stepper{list-style:none;margin:0;padding:0 40px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.stepper button{font:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:5px 12px}
.stepper li.done button{color:var(--fg)}
.stepper li.on button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.slides{display:grid;gap:14px}
.slide-fig{margin:0}
.slide-img{position:relative;display:block;width:100%;border:0;padding:0;border-radius:8px;overflow:hidden;background:#0b1220;cursor:zoom-in}
.slide-img img{display:block;width:100%;aspect-ratio:16/8;object-fit:contain}
.slide-img .zoom{position:absolute;right:10px;bottom:10px;background:var(--fg);color:var(--bg);font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px}
.slide-text{display:grid;gap:8px;min-width:0}
.slide-text h3{margin:0;font-family:var(--display);font-size:clamp(16px,2.8vw,19px);line-height:1.25;text-wrap:balance}
.slide-text p{margin:0;max-width:65ch}
.slide-count{font-size:12px;color:var(--muted);letter-spacing:.04em}
.slide-facts{display:flex;flex-wrap:wrap;gap:10px}
.fact{display:grid;background:var(--sunken);border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:140px;flex:1 1 140px}
.fact b{font-family:var(--display);font-size:22px;color:var(--accent);line-height:1.15;font-variant-numeric:tabular-nums}
.fact span{font-size:12px;color:var(--muted)}
.slide-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dots{display:flex;gap:6px}
.dot-btn{width:10px;height:10px;border-radius:999px;border:0;padding:0;background:var(--line);cursor:pointer}
.dot-btn[aria-current="true"]{background:var(--accent);width:22px}
.quiz{display:grid;gap:14px}
.q{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0;display:grid;gap:6px;background:var(--sunken)}
.q legend{font-weight:600;padding:0 4px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-size:14px}
.opt:hover{background:var(--surface)}
.opt input{margin-top:3px;accent-color:var(--accent)}
.opt.right{border-color:var(--ok);background:var(--surface)}
.opt.right span::after{content:" ✓";color:var(--ok);font-weight:700}
.opt.wrong{border-color:var(--err)}
.opt.wrong span::after{content:" ✗";color:var(--err);font-weight:700}
.quiz-result{border-radius:8px;padding:14px 16px;font-size:15px}
.quiz-result b{display:block;font-family:var(--display);font-size:18px;margin-bottom:4px}
.quiz-result.win{background:var(--accent-soft)}
.quiz-result.lose{background:var(--sunken);border:1px dashed var(--err)}
.quiz-result.warn{background:var(--sunken);border:1px solid var(--line)}

.badge{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;border:1px solid var(--line)}
.badge.pass{background:var(--accent-soft);border-color:var(--accent);color:var(--fg)}
.badge.fail{color:var(--err);border-color:var(--err)}
.badge.none{color:var(--muted)}

.confirm-close{display:grid;gap:10px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:8px;padding:12px 14px;font-size:14px;margin-right:40px}