/* ============================================================
   CIRRUS DELIVERY & FULFILLMENT — design tokens
   Palette: obsidian / cirrus red / cloud / steel / signal amber / runway blue
   Display: Space Grotesk · Body: Inter · Data/serials: IBM Plex Mono
   ============================================================ */
:root{
  --obsidian:#14161A;
  --obsidian-raised:#1D2027;
  --red:#C81E3A;
  --red-dim:#8f1529;
  --cloud:#F4F5F7;
  --white:#FFFFFF;
  --steel:#3D444C;
  --steel-line:#2A2E36;
  --amber:#E8A33D;
  --blue:#3E6E96;
  --ink-dim:#9AA1AC;
  --ink-faint:#5C6270;
  --radius:2px;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--obsidian);
  color:var(--cloud);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:var(--font-body);}
.mono{font-family:var(--font-mono);}

/* ---------- top nav shared across portals ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.9rem 2rem;
  background:rgba(20,22,26,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--steel-line);
}
.brand{display:flex;align-items:center;gap:0.6rem;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:0.02em;}
.brand .mark{width:10px;height:22px;background:var(--red);display:inline-block;transform:skewX(-12deg);}
.brand .sub{font-family:var(--font-mono);font-size:0.62rem;color:var(--ink-dim);letter-spacing:0.14em;text-transform:uppercase;margin-left:0.35rem;}
.navlinks{display:flex;gap:0.4rem;align-items:center;}
.navlinks a{
  font-size:0.82rem;padding:0.5rem 0.9rem;border-radius:var(--radius);color:var(--ink-dim);
  border:1px solid transparent;
}
.navlinks a:hover{color:var(--cloud);border-color:var(--steel-line);}
.navlinks a.active{color:var(--white);background:var(--obsidian-raised);border-color:var(--steel-line);}

/* ---------- layout shells ---------- */
.shell{display:flex;min-height:calc(100vh - 58px);}
.sidebar{
  width:230px;flex-shrink:0;background:var(--obsidian-raised);border-right:1px solid var(--steel-line);
  padding:1.2rem 0.9rem;
}
.sidebar .grp-label{font-family:var(--font-mono);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--ink-faint);margin:1rem 0.4rem 0.4rem;}
.sidebar button.navitem{
  display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink-dim);
  padding:0.55rem 0.6rem;border-radius:var(--radius);font-size:0.85rem;cursor:pointer;margin-bottom:2px;
}
.sidebar button.navitem:hover{background:rgba(255,255,255,0.04);color:var(--cloud);}
.sidebar button.navitem.active{background:var(--red);color:var(--white);}
.main{flex:1;padding:1.6rem 2rem;overflow-x:auto;}

/* ---------- typography helpers ---------- */
.eyebrow{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--red);}
.pagetitle{font-size:1.7rem;margin:0.3rem 0 1.2rem;}
.section-title{font-size:1.2rem;margin-bottom:0.8rem;}

/* ---------- cards / panels ---------- */
.panel{background:var(--obsidian-raised);border:1px solid var(--steel-line);border-radius:var(--radius);padding:1.1rem 1.2rem;}
.panel + .panel{margin-top:1rem;}
.grid{display:grid;gap:1rem;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.kpi{background:var(--obsidian-raised);border:1px solid var(--steel-line);border-radius:var(--radius);padding:1rem 1.1rem;}
.kpi .num{font-family:var(--font-display);font-size:1.8rem;font-weight:700;}
.kpi .label{font-size:0.72rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:0.08em;margin-top:0.2rem;}

/* ---------- stage pipeline (signature element) ---------- */
.pipeline{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0.6rem 0 1.2rem;}
.pipeline .stage{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.04em;
  padding:0.4rem 0.7rem;border:1px solid var(--steel-line);color:var(--ink-dim);
  background:var(--obsidian);white-space:nowrap;
}
.pipeline .stage.done{color:var(--cloud);border-color:var(--steel);}
.pipeline .stage.current{color:var(--white);background:var(--red);border-color:var(--red);}
.pipeline .arrow{color:var(--ink-faint);padding:0 0.15rem;font-size:0.7rem;}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:0.82rem;}
th{
  text-align:left;font-family:var(--font-mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--ink-faint);padding:0.5rem 0.6rem;border-bottom:1px solid var(--steel-line);
}
td{padding:0.55rem 0.6rem;border-bottom:1px solid var(--steel-line);vertical-align:middle;}
tr:hover td{background:rgba(255,255,255,0.02);}

/* ---------- badges ---------- */
.badge{display:inline-block;padding:0.15rem 0.5rem;border-radius:2px;font-size:0.68rem;font-family:var(--font-mono);letter-spacing:0.03em;white-space:nowrap;}
.badge-standard{background:rgba(154,161,172,0.15);color:var(--ink-dim);}
.badge-expedited{background:rgba(232,163,61,0.15);color:var(--amber);}
.badge-international{background:rgba(62,110,150,0.2);color:var(--blue);}
.badge-vip{background:rgba(200,30,58,0.18);color:#ff6b83;}
.badge-running{background:rgba(120,190,120,0.15);color:#7fce7f;}
.badge-reduced{background:rgba(232,163,61,0.15);color:var(--amber);}
.badge-hold{background:rgba(200,30,58,0.18);color:#ff6b83;}
.badge-delivered{background:rgba(120,190,120,0.15);color:#7fce7f;}

/* ---------- form controls ---------- */
select,input[type=text],input[type=date],textarea{
  background:var(--obsidian);border:1px solid var(--steel-line);color:var(--cloud);
  padding:0.4rem 0.55rem;border-radius:var(--radius);font-size:0.8rem;
}
select:focus,input:focus,textarea:focus,button:focus-visible{outline:2px solid var(--red);outline-offset:1px;}
.btn{
  background:var(--red);color:var(--white);border:none;padding:0.5rem 0.9rem;border-radius:var(--radius);
  font-size:0.8rem;font-weight:600;cursor:pointer;letter-spacing:0.02em;
}
.btn:hover{background:var(--red-dim);}
.btn-ghost{background:none;border:1px solid var(--steel-line);color:var(--cloud);}
.btn-ghost:hover{border-color:var(--ink-dim);}
.btn-sm{padding:0.3rem 0.6rem;font-size:0.72rem;}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:100;}
.modal{background:var(--obsidian-raised);border:1px solid var(--steel-line);width:min(560px,92vw);max-height:88vh;overflow-y:auto;padding:1.4rem;border-radius:var(--radius);}
.modal h3{margin-bottom:1rem;}
.field{margin-bottom:0.8rem;}
.field label{display:block;font-size:0.72rem;color:var(--ink-dim);margin-bottom:0.3rem;text-transform:uppercase;letter-spacing:0.06em;font-family:var(--font-mono);}
.field select,.field input,.field textarea{width:100%;}
.modal-actions{display:flex;justify-content:flex-end;gap:0.6rem;margin-top:1.2rem;}

/* ---------- utility ---------- */
.flex{display:flex;}
.between{justify-content:space-between;}
.center{align-items:center;}
.gap{gap:0.6rem;}
.muted{color:var(--ink-dim);}
.small{font-size:0.78rem;}
.divider{height:1px;background:var(--steel-line);margin:1.4rem 0;}
.tag-vip-note{border-left:2px solid var(--amber);padding-left:0.7rem;color:var(--ink-dim);font-size:0.8rem;}

/* ---------- public site ---------- */
.pub-body{background:var(--cloud);color:var(--obsidian);}
.pub-nav{background:var(--obsidian);color:var(--cloud);}
.pub-nav a{color:var(--ink-dim);}
.pub-nav a:hover{color:var(--white);}
.hero{
  background:linear-gradient(180deg, var(--obsidian) 0%, #1a1d24 100%);
  color:var(--white);padding:5rem 2rem 4rem;
}
.hero-inner{max-width:1100px;margin:0 auto;}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;max-width:760px;}
.hero p.lede{color:var(--ink-dim);font-size:1.05rem;max-width:600px;margin-top:1.1rem;}
.pub-section{max-width:1100px;margin:0 auto;padding:3.2rem 2rem;}
.pub-section h2{font-size:1.7rem;margin-bottom:0.4rem;color:var(--obsidian);}
.pub-section .eyebrow{color:var(--red);}
.card-light{background:var(--white);border:1px solid #E2E4E8;border-radius:var(--radius);padding:1.2rem;}
.footer-pub{background:var(--obsidian);color:var(--ink-dim);padding:2.2rem 2rem;font-size:0.82rem;}