/* HexaEcom Pallet Planner · shared site styles and theme tokens */
:root{
  --bg:#f4f5f7; --panel:#ffffff; --panel2:#f7f8fa; --seg:#eceff3; --ink:#14171c; --muted:#5d6878; --faint:#8a94a3; --line:#dde2e9; --line2:#eef1f5;
  --brand:#111418; --brand-ink:#ffffff; --accent:#2b59c3; --accent-soft:#e8eefb; --ring:#b7c9f3;
  --ok:#1a8a4a; --warn:#b76e00; --err:#c0262d; --info:#1d5fc4;
  --ok-bg:#e8f6ee; --warn-bg:#fff4e0; --err-bg:#fdecec; --info-bg:#e9f1fd;
  --ok-ink:#135f34; --warn-ink:#7a4a00; --err-ink:#8d1a20; --info-ink:#153f86;
  --hl-bg:#fff8e6; --hl-line:#f1d58f;
  --head:#ffffff; --head-ink:#111418; --head-muted:#5d6878; --head-btn:#f2f4f7; --head-line:#dde2e9;
  --hero:#eef2f8; --hero-ink:#111418; --hero-muted:#4a5565; --hero-eyebrow:#2b59c3; --hero-shadow:0 -10px 40px rgba(16,24,40,.12);
  --view3d:#eef2f7; --floor3d:#dfe5ec; --cfloor3d:#d9dee5; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1115; --panel:#161a20; --panel2:#1b2027; --seg:#222830; --ink:#e8ebef; --muted:#a2acb9; --faint:#7d8794; --line:#2a313b; --line2:#222830;
    --brand:#f2f4f7; --brand-ink:#111418; --accent:#7ea3ff; --accent-soft:#1b2640; --ring:#33508f;
    --ok-bg:#12291d; --warn-bg:#2d2210; --err-bg:#311517; --info-bg:#132341;
    --ok-ink:#7fd6a2; --warn-ink:#f3c26b; --err-ink:#ff9a9f; --info-ink:#9bbcff;
    --ok:#4cc27e; --warn:#e2a23a; --err:#ff6b70; --info:#7ea3ff;
    --hl-bg:#2a2414; --hl-line:#5a4a1f;
    --head:#0a0c0f; --head-ink:#ffffff; --head-muted:#a6b0bf; --head-btn:#181d24; --head-line:#262d37;
    --hero:#0a0c0f; --hero-ink:#ffffff; --hero-muted:#c4ccd8; --hero-eyebrow:#9bb7ff; --hero-shadow:0 -10px 60px rgba(0,0,0,.45);
    --view3d:#1a2029; --floor3d:#28303b; --cfloor3d:#6b7581; --shadow:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1115; --panel:#161a20; --panel2:#1b2027; --seg:#222830; --ink:#e8ebef; --muted:#a2acb9; --faint:#7d8794; --line:#2a313b; --line2:#222830;
  --brand:#f2f4f7; --brand-ink:#111418; --accent:#7ea3ff; --accent-soft:#1b2640; --ring:#33508f;
  --ok-bg:#12291d; --warn-bg:#2d2210; --err-bg:#311517; --info-bg:#132341;
  --ok-ink:#7fd6a2; --warn-ink:#f3c26b; --err-ink:#ff9a9f; --info-ink:#9bbcff;
  --ok:#4cc27e; --warn:#e2a23a; --err:#ff6b70; --info:#7ea3ff;
  --hl-bg:#2a2414; --hl-line:#5a4a1f;
  --head:#0a0c0f; --head-ink:#ffffff; --head-muted:#a6b0bf; --head-btn:#181d24; --head-line:#262d37;
    --hero:#0a0c0f; --hero-ink:#ffffff; --hero-muted:#c4ccd8; --hero-eyebrow:#9bb7ff; --hero-shadow:0 -10px 60px rgba(0,0,0,.45);
  --view3d:#1a2029; --floor3d:#28303b; --cfloor3d:#6b7581; --shadow:none;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
a{color:var(--accent)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--panel);padding:8px 12px;z-index:200}
.skip:focus{left:8px;top:8px}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--head);color:var(--head-ink);display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap;border-bottom:1px solid var(--head-line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.brand img{width:30px;height:37px;flex:none;display:block}
.brand b{font-size:16px;display:block;white-space:nowrap;letter-spacing:-.01em}
.brand small{color:var(--head-muted);font-size:12px;display:block;white-space:nowrap}
.brand .by{font-weight:600;color:var(--head-muted);font-size:13px}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:var(--head-muted);text-decoration:none;padding:6px 10px;border-radius:7px;font-weight:600;font-size:13px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--head-ink);background:var(--head-btn)}
.top .spacer{flex:1}

/* buttons */
.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 11px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.top .btn{background:var(--head-btn);border-color:var(--head-line);color:var(--head-ink)}
.top .btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.top .btn.primary{background:var(--head-ink);border-color:var(--head-ink);color:var(--head)}
.btn.small{padding:3px 8px;font-size:12px}
.btn.big{padding:11px 18px;font-size:15px;border-radius:10px}
.btn.danger{color:var(--err)}
.btn.icon{padding:6px 8px}

/* footer */
.site-foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:22px 18px 30px;margin-top:20px}
.site-foot .in{max-width:1180px;margin:0 auto;display:flex;gap:14px 24px;align-items:center;flex-wrap:wrap}
.site-foot img{width:22px;height:27px}
.site-foot .credit{display:flex;align-items:center;gap:10px}
.site-foot nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.site-foot a{color:var(--muted)}

/* shared bits */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.note{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.badge{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;background:var(--seg);color:var(--muted)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.err{background:var(--err-bg);color:var(--err)}
.toast{position:fixed;right:16px;bottom:16px;left:auto;max-width:calc(100vw - 32px);background:#111418;color:#fff;padding:10px 14px;border-radius:8px;font-size:13px;z-index:99;opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:20px;width:min(560px,calc(100vw - 32px));box-shadow:0 20px 50px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,12,16,.55)}
dialog h2{margin:0 0 6px;font-size:18px}
.unitpick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.unitpick .btn{flex-direction:column;padding:16px;font-size:15px;white-space:normal;text-align:center}
.unitpick small{font-weight:500;color:var(--muted);font-size:12px}
@media (max-width:520px){.unitpick{grid-template-columns:1fr}}
:root[data-theme="dark"] .mark-ink{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark-ink{filter:invert(1)}}
.btn[data-act="theme"][data-mode="light"] svg path{fill:none}
.btn[data-act="theme"][data-mode="dark"] svg circle{fill:currentColor}
.themebtn{gap:6px}
.themebtn .tl{font-size:12.5px}
@media (max-width:520px){.themebtn .tl{display:none}}

/* ===================================================================== HexaEcom brand
   Same fonts, colours, buttons and header as hexaecom.com. Everything above still works; this block
   only changes the look. */
:root{
  --bg:#f3f6fc; --panel:#ffffff; --panel2:#f7f9fd; --seg:#e9eef8; --ink:#0d1324; --muted:#59657c; --faint:#8a94ab; --line:#dbe2ef; --line2:#edf1f8;
  --brand:#3d6bff; --brand-ink:#ffffff; --accent:#3d6bff; --accent-soft:#e6edff; --ring:#b9c9ff;
  --amber:#ffb03b; --mint:#22c993; --navy:#0c1530; --night:#060a17;
  --head:rgba(255,255,255,.86); --head-ink:#0d1324; --head-muted:#59657c; --head-btn:#eef2fb; --head-line:#dbe2ef;
  --hero:#eef3fd; --hero-ink:#0d1324; --hero-muted:#59657c; --hero-eyebrow:#3d6bff; --hero-shadow:0 40px 90px rgba(13,19,36,.14);
  --radius:16px;
  --display:"Bricolage Grotesque","Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#070b18; --panel:#0e1630; --panel2:#121c3a; --seg:#16224a; --ink:#e9eefb; --muted:#a3b0cc; --faint:#7d8aa8; --line:#22305c; --line2:#1a2548;
    --brand:#5b82ff; --brand-ink:#ffffff; --accent:#8fb0ff; --accent-soft:#16224a; --ring:#33508f;
    --head:rgba(6,10,23,.86); --head-ink:#ffffff; --head-muted:#a3b0cc; --head-btn:#121c3a; --head-line:#22305c;
    --hero:#0a1230; --hero-ink:#ffffff; --hero-muted:#c3cde6; --hero-eyebrow:#9db8ff; --hero-shadow:0 40px 100px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#070b18; --panel:#0e1630; --panel2:#121c3a; --seg:#16224a; --ink:#e9eefb; --muted:#a3b0cc; --faint:#7d8aa8; --line:#22305c; --line2:#1a2548;
  --brand:#5b82ff; --brand-ink:#ffffff; --accent:#8fb0ff; --accent-soft:#16224a; --ring:#33508f;
  --head:rgba(6,10,23,.86); --head-ink:#ffffff; --head-muted:#a3b0cc; --head-btn:#121c3a; --head-line:#22305c;
  --hero:#0a1230; --hero-ink:#ffffff; --hero-muted:#c3cde6; --hero-eyebrow:#9db8ff; --hero-shadow:0 40px 100px rgba(0,0,0,.45);
}
body{font-family:var(--body)}
h1,h2,h3,h4,.brand b,dialog h2{font-family:var(--display);letter-spacing:-.02em}
.mono,code{font-family:var(--mono)}

/* the bar back to hexaecom.com, on every page */
.hx-bar{background:var(--night);color:#c3cde6;font-size:12.5px;position:relative;z-index:51}
.hx-bar .in{max-width:1180px;margin:0 auto;padding:7px 18px;display:flex;align-items:center;gap:16px}
.hx-bar a{color:#fff;text-decoration:none;font-weight:600}
.hx-bar a:hover{text-decoration:underline}
.hx-bar .hx-home{display:inline-flex;align-items:center;gap:6px}
.hx-bar .hx-tag{color:#a3b0cc;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.hx-bar .hx-audit{margin-left:auto;color:var(--amber)}
@media (max-width:640px){.hx-bar .hx-tag{display:none}}

/* header: white glass like hexaecom.com */
.top{background:var(--head);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6)}
.brand b{font-size:17px;font-weight:750}
.brand .by{font-family:var(--body);font-weight:600;color:var(--accent);font-size:14px;letter-spacing:0}
.brand small{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.nav a{border-radius:10px;font-size:13.5px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}

/* buttons: rounded, blue primary with a soft glow */
.btn{border-radius:12px;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.btn.big{border-radius:14px;padding:12px 20px}
.btn.primary,.top .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 10px 24px rgba(61,107,255,.28)}
.btn.primary:hover,.top .btn.primary:hover{background:#2f55d8;border-color:#2f55d8;transform:translateY(-1px)}
.card{border-radius:var(--radius)}
dialog{border-radius:20px}
.toast{background:var(--navy);border-radius:12px}

/* footer: dark, like hexaecom.com */
.site-foot.hx-foot{background:var(--night);color:#a3b0cc;border-top:0;margin-top:0;padding:48px 18px 28px}
.hx-foot .grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px}
.hx-foot h4{color:#fff;font-size:14px;margin:0 0 12px}
.hx-foot a{color:#c3cde6;text-decoration:none;display:block;padding:3px 0;font-size:13.5px}
.hx-foot a:hover{color:#fff}
.hx-foot .logo{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0}
.hx-foot .logo img{width:26px;height:32px}
.hx-foot .logo b{display:block;color:#fff;font-family:var(--display);font-size:17px}
.hx-foot .logo small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#a3b0cc}
.hx-foot p{margin:0;font-size:13.5px;line-height:1.55;max-width:320px}
.hx-foot .bottom{max-width:1180px;margin:32px auto 0;padding-top:18px;border-top:1px solid #1a2548;font-size:12.5px;color:#7d8aa8}
@media (max-width:860px){.hx-foot .grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.hx-foot .grid{grid-template-columns:1fr}}
/* the bar back to hexaecom.com stays at the top while you scroll (computers); never printed */
.hx-bar{position:sticky;top:0}
.hx-bar .in{height:32px;padding-top:0;padding-bottom:0}
.top{top:32px}
@media (max-width:760px){.hx-bar{position:relative}}
@media print{.hx-bar,.mbar{display:none!important}}