/* Southern Cast Products — customer portal.
   Design language taken from southerncast.com: light ground, Oswald 700
   uppercase headings, Nunito Sans body at 19px, squared corners (the site's
   buttons are 0 radius), orange #D6690A / #F58220 as the single accent.

   No inline styles anywhere — the Content-Security-Policy forbids them, which
   is deliberate: it means a future injection cannot introduce styling either. */

@import url('fonts.css');

:root{
  --bg:#FFFFFF;
  --ground:#FAFAF9;
  --surface:#FFFFFF;
  --line:#E4E2DF;
  --line-strong:#CFCCC8;
  --text:#1C1A18;
  --body:#333333;
  --muted:#73787D;

  --accent:#D6690A;
  --accent-bright:#F58220;
  --accent-wash:#FDF2E7;

  --ink:#0C0A09;

  --on-track:#2F7D53;
  --on-track-wash:#EAF5EF;
  --in-process:#4A6C8C;
  --in-process-wash:#EDF2F7;
  --off-track:#A8761B;
  --off-track-wash:#FBF3E3;
  --shipped:#6B7683;
  --shipped-wash:#F1F2F3;
  --alert:#A6301F;

  --w:1240px;
}

/* Dark mode. The customer's own choice is remembered on their device only --
   it never reaches the server, so it is not something we hold about them. */
[data-theme="dark"]{
  --bg:#14120F;
  --ground:#0C0A09;
  --surface:#14120F;
  --line:#2C2A27;
  --line-strong:#413D39;
  --text:#F7F5F2;
  --body:#D8D4CF;
  --muted:#948E87;

  --accent:#F58220;
  --accent-bright:#FF9A45;
  --accent-wash:#241A11;

  --on-track:#5FBE8B;      --on-track-wash:#13251C;
  --in-process:#7FA8CC;    --in-process-wash:#141D26;
  --off-track:#D9AE49;     --off-track-wash:#241E10;
  --shipped:#9AA3AC;       --shipped-wash:#1B1E21;
  --alert:#C64A36;
}
[data-theme="dark"] .b-ON_TRACK{border-color:#1F4433}
[data-theme="dark"] .b-IN_PROCESS{border-color:#23364A}
[data-theme="dark"] .b-OFF_TRACK{border-color:#463A1C}
[data-theme="dark"] .b-SHIPPED{border-color:#2C3237}
[data-theme="dark"] .badge.exp{border-color:#4A3418}
[data-theme="dark"] .rail li::after{background:var(--bg)}
[data-theme="dark"] .loginbox{background:var(--bg)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] button{
  background:var(--bg);color:var(--text)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--body);
  font:400 17px/1.6 'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}

h1,h2,h3,.display{
  font-family:Oswald,'Nunito Sans',sans-serif;font-weight:700;
  text-transform:uppercase;color:var(--text);margin:0;line-height:1.1;
}
h1{font-size:38px;letter-spacing:.01em}
h2{font-size:24px}
h3{font-size:18px;letter-spacing:.02em}

/* ---------------------------------------------------------------- header */
.masthead{background:var(--ink);border-bottom:3px solid var(--accent)}
.masthead .wrap{display:flex;align-items:center;gap:18px;min-height:94px}
/* The full lockup on a white panel, the same treatment as the sign-in card.
   The logo is drawn for a white ground -- the white inside it is transparent,
   not painted -- so giving it one is the honest way to show it whole, and the
   panel reads as a deliberate plate rather than artwork stuck on the band.
   Squared corners, like everything else here. */
.logo{
  height:62px;width:auto;display:block;flex:0 0 auto;
  background:#fff;padding:8px 12px;box-sizing:content-box;
}
/* A white panel behind the logo on the sign-in card. In light mode the card
   is already white so this is invisible; in dark mode it gives the mark the
   white ground it was drawn for, and reads as a deliberate plate rather than
   artwork that half disappeared. Squared corners to match the rest of the
   portal -- nothing here is rounded. */
.loginlogo{
  height:74px;width:auto;display:block;margin:0 auto 14px;
  background:#fff;padding:16px 20px;box-sizing:content-box;
}
.brandlink{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand{
  font-family:Oswald,sans-serif;font-weight:700;font-size:21px;
  text-transform:uppercase;color:#fff;letter-spacing:.03em;white-space:nowrap;
  line-height:1.05;
}
.brand b{color:var(--accent-bright);font-weight:700}
.brand small{
  display:block;font-family:'Nunito Sans',sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.24em;color:#A8A29B;text-transform:uppercase;
}
.spacer{flex:1}
.masthead form{display:flex;gap:8px;align-items:center;margin:0}

/* --------------------------------------------------------------- controls */
input,select,button{
  font:inherit;font-size:15px;border-radius:0;
  border:1px solid var(--line-strong);background:#fff;color:var(--text);
  padding:9px 12px;
}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
button{cursor:pointer;background:#fff;font-weight:600}
button:hover{border-color:var(--accent);color:var(--accent)}
button.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
  font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:11px 22px;font-size:15px;
}
button.primary:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:#fff}
.masthead button{
  background:transparent;color:#D8D4CF;border-color:#3A3633;font-size:14px;
}
.masthead button:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.masthead select{background:#17141200;color:#D8D4CF;border-color:#3A3633;font-size:14px}
.masthead select option{background:#17140F;color:#F2EFEA}

/* ------------------------------------------------------------ view banner */
.viewbanner{background:var(--alert);color:#fff}
.viewbanner .wrap{display:flex;align-items:center;gap:16px;padding-top:10px;padding-bottom:10px}
.viewbanner-text{
  font-family:Oswald,sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;
}
.viewbanner button{background:transparent;border-color:#ffffff66;color:#fff;font-size:13px}
.viewbanner button:hover{background:#fff;color:var(--alert);border-color:#fff}

/* ------------------------------------------------------------------ page */
/* A shop photograph sits behind the header band ONLY. The order table stays on
   a clean ground -- texture behind data costs more than it adds on a screen
   people scan in twenty seconds.

   The photo is pre-darkened when it is built (tools/make_hero.py), and a
   gradient scrim is laid over it as well, so white text holds even if someone
   later drops in a brighter picture. */
.pagehead{
  position:relative;border-bottom:3px solid var(--accent);
  background:var(--ink) center/cover no-repeat;
  background-image:
    linear-gradient(90deg, rgba(12,10,9,.94) 0%, rgba(12,10,9,.72) 55%,
                    rgba(12,10,9,.55) 100%),
    url('/hero/today.jpg');
}
.pagehead .wrap{padding-top:38px;padding-bottom:34px;position:relative}
.pagehead h1,.pagehead .customer-name{color:#fff}
.pagehead .lede{color:#C9C4BD}
.pagehead .customer-sub{color:#9A948C}
.pagehead .backlink{color:var(--accent-bright)}
.eyebrow{
  font-family:Oswald,sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:11.5px;color:var(--accent-bright);
  margin-bottom:7px;
}

/* The customer's own name is the first thing they should see -- it is their
   portal, not ours. */
.customer{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.customer-logo{
  /* An explicit height with width:auto, NOT max-* alone.

     Customer logos arrive as SVGs with only a viewBox and no width/height
     attributes, which gives the browser no intrinsic size to work from -- the
     image loaded correctly and laid out at 0x0, so every logo was invisible
     while appearing to be present. Fixing the height and letting the width
     follow the aspect ratio works for SVG, PNG and JPG alike. */
  height:40px;width:auto;max-width:190px;
  object-fit:contain;display:block;flex:0 0 auto;
}
/* Customer artwork arrives in every combination -- dark marks meant for white
   backgrounds, white knockouts meant for dark ones. Siemens Energy disappeared
   entirely on the light theme. Giving every logo the same near-white panel
   means both kinds read, on both themes, with no per-logo fiddling. */
/* No panel. A white box behind the logo reads as a sticker pasted onto the
   photograph -- the mark should sit on the band like it belongs there.

   Instead each logo is measured (app/logos.py) and given the lightest
   treatment that keeps it legible on a dark photo:
     .as-is   bright enough already
     .glow    a soft white halo lifts dark elements off the picture
     .invert  essentially black artwork, rendered white -- deliberate, not broken
*/
.customer-logo.glow{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.95))
         drop-shadow(0 0 6px rgba(255,255,255,.55));
}
.customer-logo.invert{filter:brightness(0) invert(1) opacity(.92)}
.customer-name{
  font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:32px;line-height:1.05;color:var(--text);letter-spacing:.01em;
}
.customer-sub{
  font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px;
}

.po{font-size:16px;font-weight:700;color:var(--text)}
.jobno{
  font-family:'JetBrains Mono',Consolas,monospace;font-size:11.5px;
  color:var(--muted);margin-top:3px;letter-spacing:0;
}
.activity{
  display:inline-flex;align-items:center;gap:7px;margin-top:5px;
  font-size:13.5px;color:var(--body);
}
.activity .dot{
  width:7px;height:7px;border-radius:50%;background:var(--line-strong);
  flex:none;
}
.activity.live .dot{background:var(--accent);animation:pulse 2s ease-in-out infinite}
.activity.live{color:var(--accent);font-weight:600}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.activity.live .dot{animation:none}}

.themetoggle{
  background:transparent;border-color:#3A3633;color:#D8D4CF;
  width:38px;padding:9px 0;text-align:center;
}
.lede{color:var(--muted);font-size:15.5px;margin:8px 0 0}

/* ----------------------------------------------------------------- tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.tile{background:var(--bg);padding:20px 22px}
.tile .n{
  font-family:Oswald,sans-serif;font-weight:700;font-size:40px;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.tile.is-accent .n{color:var(--accent)}
.tile .l{
  font-family:Oswald,sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;color:var(--muted);margin-top:8px;
}

/* ----------------------------------------------------------------- table */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:22px 0 16px}
.orders{width:100%;border-collapse:collapse;background:var(--bg);
  border:1px solid var(--line)}
.orders th{
  text-align:left;font-family:Oswald,sans-serif;font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  padding:13px 16px;border-bottom:2px solid var(--line-strong);white-space:nowrap;
}
.orders td{padding:16px;border-bottom:1px solid var(--line);vertical-align:top}
.orders tbody tr:last-child td{border-bottom:none}
.orders tbody tr:hover{background:var(--accent-wash)}
.orders tbody tr{cursor:pointer}
.mono{font-family:'JetBrains Mono',Consolas,'Courier New',monospace;
  font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:-.01em}
.pn{font-weight:700;color:var(--text);font-size:15px}
.orders tbody tr:hover .pn{color:var(--accent)}
.sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.num{text-align:right}

/* ---------------------------------------------------------------- badges */
.badge{
  display:inline-block;padding:5px 11px;font-family:Oswald,sans-serif;
  font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  white-space:nowrap;border:1px solid transparent;
}
.b-ON_TRACK{background:var(--on-track-wash);color:var(--on-track);border-color:#C8E2D4}
.b-IN_PROCESS{background:var(--in-process-wash);color:var(--in-process);border-color:#D2DEE9}
.b-OFF_TRACK{background:var(--off-track-wash);color:var(--off-track);border-color:#EBDCB8}
.b-SHIPPED{background:var(--shipped-wash);color:var(--shipped);border-color:#DDE0E2}
.badge.exp{background:var(--accent-wash);color:var(--accent);border-color:#F2D8BC;margin-left:6px}

/* ------------------------------------------------------------ stage rail */
.rail{display:flex;align-items:flex-start;margin:0;padding:0;list-style:none;
  overflow-x:auto}
.rail li{flex:1 1 0;min-width:96px;position:relative;text-align:center;
  padding-top:30px}
.rail li::before{
  content:'';position:absolute;top:11px;left:0;right:0;height:2px;
  background:var(--line-strong);
}
.rail li:first-child::before{left:50%}
.rail li:last-child::before{right:50%}
.rail li::after{
  content:'';position:absolute;top:5px;left:50%;margin-left:-7px;
  width:14px;height:14px;background:#fff;border:2px solid var(--line-strong);
  border-radius:50%;
}
.rail .st{
  font-family:Oswald,sans-serif;font-weight:500;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:0 6px;display:block;line-height:1.3;
}
.rail .done::before{background:var(--accent)}
.rail .done::after{background:var(--accent);border-color:var(--accent)}
.rail .done .st{color:var(--body)}
.rail .now::before{background:var(--accent)}
.rail .now::after{
  background:var(--accent-bright);border-color:var(--accent-bright);
  width:20px;height:20px;top:2px;margin-left:-10px;
  box-shadow:0 0 0 5px var(--accent-wash);
}
.rail .now .st{color:var(--accent);font-weight:700}
.rail .now{padding-top:32px}
.railwrap{background:var(--bg);border:1px solid var(--line);padding:26px 22px 20px}

/* ----------------------------------------------------------------- cards */
.card{background:var(--bg);border:1px solid var(--line);padding:24px;margin:20px 0}
.card.accent{border-left:4px solid var(--accent)}
.card.good{border-left:4px solid var(--on-track)}
.card.warn{border-left:4px solid var(--off-track)}
.card h3{margin-bottom:10px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:22px;margin:0}
.kv dt{font-family:Oswald,sans-serif;font-weight:500;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.kv dd{margin:5px 0 0;font-size:16px;color:var(--text);font-weight:600}
.big{font-family:Oswald,sans-serif;font-weight:700;font-size:22px;
  color:var(--text);text-transform:none}

.split{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{border:1px solid var(--line-strong);padding:9px 14px;background:var(--ground)}
.chip .q{font-family:Oswald,sans-serif;font-weight:700;font-size:19px;
  color:var(--accent);margin-right:7px}
.chip .w{font-size:14px;color:var(--body)}

/* ----------------------------------------------------------------- login */
/* The sign-in page does not follow the theme. It is the first thing a customer
   sees and it is the one screen where we have no idea who is looking, so it
   looks the same every time: dark ground, white card. There is no theme toggle
   on it either -- the masthead is not rendered here.

   Pinning the custom properties on the page is what does it. The dark-mode
   rules elsewhere are all written in terms of var(--bg) and var(--text), so
   they resolve against these values and quietly stop applying, rather than
   needing an override apiece. */
.loginpage{
  min-height:100vh;display:grid;place-items:center;background:var(--ink);
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --line:#E4E2DF;
  --line-strong:#CFCCC8;
  --text:#1C1A18;
  --body:#333333;
  --muted:#73787D;
  --accent:#D6690A;
  --accent-bright:#F58220;
  --accent-wash:#FDF2E7;
  --alert:#A6301F;
}
.loginbox{width:400px;max-width:92vw;background:#fff;padding:38px;
  border-top:4px solid var(--accent)}
.loginbox h1{font-size:26px;margin-bottom:4px}
.loginbox .lede{margin-bottom:22px}
.loginbox label{display:block;font-family:Oswald,sans-serif;font-weight:500;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin:14px 0 5px}
.loginbox input{width:100%}
.loginbox button{width:100%;margin-top:22px}
.loginbrand{text-align:center;margin-bottom:26px}
.loginbrand .brand{color:var(--text);font-size:22px}
.loginbrand .brand small{color:var(--muted)}
.note{font-size:13.5px;color:var(--muted);margin-top:20px;text-align:center}
.err{background:#FBEDEB;border-left:3px solid var(--alert);color:#7E2417;
  padding:11px 14px;font-size:14px;margin-bottom:6px}
.msg{background:var(--in-process-wash);border-left:3px solid var(--in-process);
  padding:11px 14px;font-size:14px;margin-bottom:6px}

/* ---------------------------------------------------------------- states */
.empty{background:var(--bg);border:1px solid var(--line);padding:64px 24px;
  text-align:center;color:var(--muted)}
.empty h2{color:var(--text);margin-bottom:8px}
.errpage{text-align:center;padding:90px 0}
.errpage .code{font-family:Oswald,sans-serif;font-weight:700;font-size:76px;
  color:var(--accent);line-height:1}

.backlink{display:inline-block;font-family:Oswald,sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;margin:22px 0 0}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);margin-top:44px;background:var(--bg)}
.foot .wrap{padding:22px 32px;font-size:13.5px;color:var(--muted);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.foot .stale{color:var(--off-track);font-weight:600}
.foot .dot{color:var(--line-strong)}

@media (max-width:820px){
  .wrap{padding:0 18px}
  h1{font-size:28px}
  .orders th:nth-child(3),.orders td:nth-child(3){display:none}
  .masthead .wrap{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
}

/* ------------------------------------------------------ logo manager (admin) */
/* Only SCP staff ever see any of this. The badge in the masthead is the whole
   point of the feature: a missing logo is invisible until you happen to look
   at that customer's page, so the portal says so instead of waiting. */
.logoalert{
  display:flex;align-items:center;gap:7px;text-decoration:none;
  font-family:'Nunito Sans',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#8C8781;
  border:1px solid #3A3633;border-radius:3px;padding:7px 11px;
}
.logoalert:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.logoalert.due{color:#E8E4DE;border-color:#5A4636}
.logoalert-mark{font-size:14px;line-height:1}
.logoalert-count{
  background:var(--accent);color:#fff;border-radius:9px;
  padding:1px 7px;font-size:11px;letter-spacing:0;
}
.sectionhead{
  font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.12em;color:var(--muted);
  margin:26px 0 12px;
}
.logogrid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.logocard{
  border:1px solid var(--line);border-radius:4px;background:var(--card);
  padding:12px;display:flex;flex-direction:column;gap:9px;margin:0;
}
.logocard.needs{border-color:#B4612F}
/* The drop target is a label pointed at the file input, so a click opens the
   picker with no script at all -- drag and paste are enhancements on top. */
.logodrop{
  display:flex;align-items:center;justify-content:center;
  height:82px;border:1px dashed var(--line);border-radius:3px;
  cursor:pointer;padding:8px;position:relative;
}
/* Artwork we already hold is shown on the same dark band it will appear on,
   so what you see here is what the customer sees. */
.logodrop.onband{background:var(--ink);border-style:solid}
.logodrop:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.logocard.needs .logodrop{border-color:#B4612F}
.logodrop.dragging{border-color:var(--accent-bright);background:rgba(224,108,59,.1)}
.logodrop-hint{
  font-family:'Nunito Sans',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.logopreview{max-height:64px;max-width:100%;width:auto;object-fit:contain}
.logofile{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.logometa{font-family:'Nunito Sans',sans-serif;font-size:12px;line-height:1.45}
.logometa b{display:block;font-size:13.5px;color:var(--text)}
.logometa span{color:var(--muted);font-size:11px}
.logosave{
  font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;background:var(--accent);color:#fff;border:0;border-radius:3px;
  padding:9px 12px;cursor:pointer;
}
.logosave:hover{background:var(--accent-bright)}
.flash{
  font-family:'Nunito Sans',sans-serif;font-size:13px;border-radius:3px;
  padding:11px 14px;margin:16px 0 0;
}
.flash.ok{background:rgba(58,125,68,.14);border:1px solid #3A7D44;color:var(--text)}
.flash.bad{background:rgba(180,60,45,.12);border:1px solid #B43C2D;color:var(--text)}
.logonote{
  font-family:'Nunito Sans',sans-serif;font-size:12px;color:var(--muted);
  margin:22px 0 40px;max-width:70ch;line-height:1.6;
}

/* ---------------------------------------------- header photos (admin only) */
/* Each row is the real band at real proportions. Judging a header crop from a
   thumbnail does not work -- the whole difficulty is that the band is a thin
   strip and most of a good photo falls outside it. */
.herolist{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}
.herorow{border:1px solid var(--line);border-radius:4px;overflow:hidden}
.herorow.on{border-color:var(--accent)}
.heroband{position:relative;background:var(--ink);line-height:0}
.heroband img{width:100%;height:auto;display:block}
.heroband-text{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:26px;color:#fff;letter-spacing:.01em;line-height:1;
}
.heroband-off{
  display:block;padding:34px 18px;font-family:'Nunito Sans',sans-serif;
  font-size:12px;color:var(--muted);line-height:1.4;
}
.herofoot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 12px;background:var(--card);border-top:1px solid var(--line);
}
.herofoot form{margin:0}
.heroname{
  font-family:'Nunito Sans',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--text);margin-right:auto;
}
.herofocus{
  font-family:'Nunito Sans',sans-serif;font-size:11px;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;
}
.herofoot button{
  font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:11.5px;background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:3px;padding:7px 11px;cursor:pointer;
}
.herofoot button:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.herofoot button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.herofoot button.primary:hover{background:var(--accent-bright)}
.herofoot button.danger:hover{border-color:#B43C2D;color:#B43C2D}

/* A paused order and a part-shipped one are both states the band alone cannot
   express: "In Process" is true but unhelpful when the order is sitting on the
   customer's own approval, or when half of it has already left the building. */
.badge.hold{
  color:var(--off-track);border-color:var(--off-track);
  background:var(--off-track-wash);
}
.badge.part{
  color:var(--shipped);border-color:var(--shipped);
  background:var(--shipped-wash);
}

/* Shipment tracking. Optional throughout -- most shipments have no live
   carrier status, so this block must look deliberate when half of it is
   missing rather than like something failed to load. */
.shipment h2{
  font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.12em;color:var(--muted);margin:0 0 12px;
}
.asof{
  font-family:'Nunito Sans',sans-serif;font-size:11.5px;color:var(--muted);
  margin:10px 0 0;
}

/* A tile that filters the list when clicked. */
.tile-link{text-decoration:none;display:block}
.tile-link:hover{border-color:var(--accent-bright)}
/* Carrier and BOL under a shipped order. Most shipments have no live status,
   so this often stands alone and must read as complete on its own. */
.carrier .mono{color:var(--text)}

/* "via FedEx" beside the ship date -- the carrier is worth saying even when
   no tracking number was ever recorded. */
.via{color:var(--muted);font-family:'Nunito Sans',sans-serif;margin-left:8px}

/* "Where is my shipment" is the question a buyer arrives with most often, so
   it gets a button rather than a value hidden in a filter dropdown. */
.trackbtn{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  padding:14px 18px;text-decoration:none;
  background:var(--accent);color:#fff;border-radius:3px;
  font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:15px;
}
.trackbtn:hover{background:var(--accent-bright)}
.trackbtn-icon{font-size:11px;opacity:.85}
.trackbtn-count{
  margin-left:auto;font-family:'Nunito Sans',sans-serif;font-weight:600;
  text-transform:none;letter-spacing:0;font-size:12.5px;opacity:.9;
}
.trackbtn-back{background:transparent;color:var(--accent);
  border:1px solid var(--line-strong)}
.trackbtn-back:hover{background:transparent;border-color:var(--accent);
  color:var(--accent-bright)}

/* --------------------------------------------------- feedback widget */
/* Bottom-right, out of the way until wanted. Deliberately quiet: a customer
   checking an order should notice it only when they have something to say. */
.fb{position:fixed;right:20px;bottom:20px;z-index:40;
    font-family:'Nunito Sans',sans-serif}
.fb-tab{
  display:flex;align-items:center;gap:8px;
  background:var(--ink);color:#F2EFEA;border:1px solid #3A3633;
  border-radius:3px;padding:11px 16px;cursor:pointer;
  font-family:Oswald,sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;font-size:12.5px;
  box-shadow:0 2px 14px rgba(0,0,0,.28);
}
.fb-tab:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.fb.is-open .fb-tab{display:none}
.fb-panel{
  width:330px;max-width:calc(100vw - 40px);
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:4px;padding:14px;box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.fb-head{display:flex;align-items:center;margin-bottom:10px}
.fb-head b{font-size:14px;color:var(--text)}
.fb-x{margin-left:auto;background:none;border:0;font-size:20px;line-height:1;
      color:var(--muted);cursor:pointer;padding:0 2px}
.fb-x:hover{color:var(--text)}
.fb-kinds{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:9px;font-size:12px}
.fb-kinds label{display:flex;align-items:center;gap:5px;color:var(--body);
                cursor:pointer}
.fb-panel textarea{
  width:100%;font-family:'Nunito Sans',sans-serif;font-size:13.5px;
  padding:9px;border:1px solid var(--line-strong);border-radius:3px;
  background:var(--bg);color:var(--text);resize:vertical;
}
.fb-shot{display:block;margin-top:9px;font-size:11.5px;color:var(--muted);
         cursor:pointer}
.fb-shot input{display:block;font-size:11px;margin-bottom:4px;color:var(--muted)}
.fb-preview{max-width:100%;max-height:120px;margin-top:8px;border-radius:3px;
            border:1px solid var(--line)}
.fb-actions{display:flex;align-items:center;gap:10px;margin-top:11px}
.fb-msg{font-size:11.5px;color:var(--muted);flex:1}
.fb-send{
  background:var(--accent);color:#fff;border:0;border-radius:3px;
  padding:9px 18px;cursor:pointer;
  font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.09em;
  font-size:12.5px;
}
.fb-send:hover{background:var(--accent-bright)}
.fb-send:disabled{opacity:.6;cursor:default}
.fb-thanks{padding:18px 4px;text-align:center;font-size:13.5px;color:var(--text)}
@media (max-width:640px){
  .fb{right:12px;bottom:12px}
}

/* Feedback list (admin). */
.fblist{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.fbitem{border:1px solid var(--line);border-radius:4px;padding:13px 15px;
        background:var(--card)}
.fbitem-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
             font-family:'Nunito Sans',sans-serif;font-size:12px}
.fbitem-who{color:var(--text);font-weight:700}
.fbitem-when{color:var(--muted);margin-left:auto}
.fbitem-msg{font-family:'Nunito Sans',sans-serif;font-size:14px;
            white-space:pre-wrap;margin:10px 0;color:var(--body)}
.fbitem-foot{display:flex;gap:14px;font-size:11px;color:var(--muted)}
.badge.kind-bug{color:var(--alert);border-color:var(--alert)}
.badge.kind-feature{color:var(--in-process);border-color:var(--in-process)}
.badge.kind-design{color:var(--accent);border-color:var(--accent)}
.badge.kind-content{color:var(--off-track);border-color:var(--off-track)}

.pwhint{font-family:'Nunito Sans',sans-serif;font-size:11.5px;
        color:var(--muted);margin:10px 0 0;line-height:1.5}

/* The circle and the tick are DRAWN, not typed. Our webfonts are subsetted
   and carry no glyph for U+25CB or U+2713, so the obvious version renders as
   two tofu boxes. */
.pwrules{list-style:none;margin:16px 0 2px;padding:0;
  font-family:'Nunito Sans',sans-serif;font-size:12.5px;color:var(--muted)}
.pwrules li{position:relative;display:flex;align-items:center;gap:9px;
  padding:3px 0;transition:color .15s ease}
.pwrules li::before{content:"";flex:none;box-sizing:border-box;
  width:14px;height:14px;border:1.5px solid var(--line-strong);
  border-radius:50%;transition:background .15s ease,border-color .15s ease}
.pwrules li.ok{color:var(--on-track);font-weight:600}
.pwrules li.ok::before{border-color:var(--on-track);background:var(--on-track)}
.pwrules li.ok::after{content:"";position:absolute;left:4.8px;top:50%;
  width:4px;height:7px;margin-top:-5.5px;border:solid #fff;
  border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.signingas{font-family:'Nunito Sans',sans-serif;font-size:13px;
  color:var(--muted);margin:0 0 18px;padding:9px 11px;border-radius:3px;
  background:var(--ground);border:1px solid var(--line)}
.signingas b{color:var(--text)}
.loginbox .note a{color:var(--accent);text-decoration:none}
.loginbox .note a:hover{text-decoration:underline}
.certlink{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-family:'Nunito Sans',sans-serif;font-size:12px;font-weight:600;
  color:var(--accent);text-decoration:none}
.certlink:hover{text-decoration:underline}
.certlink-icon{font-size:7px;line-height:1}
.certlink-count{font-family:Oswald,sans-serif;font-size:10.5px;
  padding:1px 5px;border-radius:9px;background:var(--accent-wash);
  color:var(--accent)}
/* Arriving from "see quality control documents" should land somewhere that
   obviously IS that -- a jump with no acknowledgement reads as a broken link. */
.certs{scroll-margin-top:18px}
.certs:target{outline:2px solid var(--accent);outline-offset:4px}
/* `.loginbox label` and `.loginbox input` are each more specific than a bare
   `.remember`, so the un-nested version of this rule never applied inside the
   sign-in box: the tick box rendered full width with its text wrapped under
   it. */
.loginbox .remember,
.remember{display:flex;align-items:center;gap:8px;margin-top:16px;
  font-family:'Nunito Sans',sans-serif;font-size:12.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--body);cursor:pointer}
.loginbox .remember input,
.remember input{width:auto;flex:none;margin:0}

.inviteform{max-width:460px;margin-bottom:34px}
.inviteform label{display:block;font-family:Oswald,sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;
  color:var(--muted);margin:16px 0 5px}
.inviteform input,.inviteform select{width:100%}
.inviteform button{margin-top:20px}
.primary-link{color:var(--accent);font-weight:700}

/* Certification reports. A shipped order with no certs says so plainly rather
   than hiding the section -- "not available" is an answer, silence is not. */
.certs h2{
  font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.12em;color:var(--muted);margin:0 0 12px;
}
.certlist{list-style:none;margin:0;padding:0;display:flex;
          flex-direction:column;gap:9px}
.certlist li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.certlist a{font-family:'Nunito Sans',sans-serif;font-size:13.5px;
            font-weight:700;color:var(--accent)}
.certlist a:hover{color:var(--accent-bright)}
.certmeta{font-family:'Nunito Sans',sans-serif;font-size:11px;color:var(--muted)}