/* ============================================================
   Got Your Back! Delivery — public + portal design system
   Dark slate foundation, red type/accent ramp. See PARCELFLOW_BUILD_SPEC.md §3
   for the full rationale and contrast ratios.
   ============================================================ */

:root {
  /* Slate foundation */
  --bg-base:        #22272E;
  --bg-surface:     #2C333B;
  --bg-elevated:    #363E47;
  --bg-sunken:      #1B1F25;
  --border-subtle:  #3A424C;
  --border-strong:  #4A535E;
  --border-accent:  #8B1E28;

  /* Red type ramp */
  --text-primary:   #EDE0E0;
  --text-secondary: #C9AFB2;
  --text-muted:     #A8969A;
  --text-heading:   #FF5C68;

  /* Red accents */
  --red-500: #E63946;
  --red-400: #FF4D5A;
  --red-300: #FF7A84;
  --red-200: #FFA8AE;
  --red-800: #8B1E28;
  --red-900: #5A1219;
  --red-glow: rgba(230, 57, 70, 0.28);
  --red-wash: rgba(230, 57, 70, 0.08);

  /* Functional status */
  --ok: #5FB89A;
  --warn: #E0A458;
  --danger: #FF5C68;
  --info: #7FA8C9;

  --on-red-dark: #1A1D21;
  --on-red-light: #FFFFFF;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --container: 1200px;
}

@media (prefers-color-scheme: light) {
  /* This product is deliberately dark-only per brand direction; we still
     keep body background explicit so no host theme bleeds through. */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
}
h1, h2, h3, h4 { color: var(--text-heading); line-height: 1.25; margin: 0 0 var(--space-3); font-weight: 700; }
h1 { font-size: 44px; } h2 { font-size: 32px; } h3 { font-size: 24px; } h4 { font-size: 20px; }
p { margin: 0 0 var(--space-4); color: var(--text-primary); }
small, .text-sm { font-size: 13px; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
a { color: var(--red-300); text-decoration: none; }
a:hover { color: var(--red-200); text-decoration: underline; }
code, .mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Focus ring — never remove without replacing */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 1px solid var(--red-400);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--red-glow);
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--red-400); color: var(--on-red-dark); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ── Layout ─────────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--space-8) 0; }
.section-tight { padding: var(--space-6) 0; }
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; min-height: 44px; line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--red-400); color: var(--on-red-dark); }
.btn-primary:hover { background: #ff6470; color: var(--on-red-dark); }
.btn-secondary { background: transparent; border-color: var(--border-strong); color: var(--red-300); }
.btn-secondary:hover { background: var(--bg-elevated); color: var(--red-200); }
.btn-danger { background: var(--danger); color: var(--on-red-dark); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-elevated); }
.btn-sm { padding: 7px 14px; font-size: 13px; min-height: 32px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.card-elevated { background: var(--bg-elevated); }
.card-accent { border-left: 3px solid var(--red-400); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
label, .label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: var(--space-2); font-weight: 600; }
.help-text { font-size: 12px; color: var(--text-muted); margin-top: var(--space-1); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="url"], input[type="date"], select, textarea {
  width: 100%; padding: 11px 14px; background: var(--bg-sunken); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 15px; font-family: var(--font-sans);
  min-height: 44px;
}
textarea { min-height: 100px; font-family: var(--font-sans); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--red-200); font-size: 12px; margin-top: var(--space-1); }
.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.checkbox-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--red-400); flex-shrink: 0; }
fieldset { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-4); }
legend { padding: 0 var(--space-2); color: var(--text-secondary); font-weight: 600; font-size: 14px; }

/* ── Alerts / warning panels (SIOC/NOP + fragile copy blocks) ── */
.panel-warning {
  background: var(--bg-elevated); border-left: 3px solid var(--warn); border-radius: var(--radius-sm);
  padding: var(--space-4); margin: var(--space-3) 0; display: flex; gap: var(--space-3); align-items: flex-start;
}
.panel-warning .glyph { color: var(--warn); flex-shrink: 0; margin-top: 2px; }
.panel-attention {
  background: var(--red-900); border: 2px solid var(--danger); border-radius: var(--radius-md);
  padding: var(--space-4); margin: var(--space-3) 0; display: flex; gap: var(--space-3); align-items: flex-start;
  animation: attention-in .25s ease-out;
}
.panel-attention .glyph { color: var(--red-200); flex-shrink: 0; }
.panel-attention strong { color: var(--red-200); font-size: 16px; }
@keyframes attention-in { from { transform: scale(.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.panel-info { background: var(--bg-elevated); border-left: 3px solid var(--info); border-radius: var(--radius-sm); padding: var(--space-4); }
.panel-error { background: var(--red-900); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); padding: var(--space-4); color: var(--red-200); }
.panel-success { background: var(--bg-elevated); border-left: 3px solid var(--ok); border-radius: var(--radius-sm); padding: var(--space-4); }

.flash-stack { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; }
.flash { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.flash-success { background: var(--bg-elevated); border-left: 3px solid var(--ok); }
.flash-error { background: var(--red-900); border-left: 3px solid var(--danger); color: var(--red-200); }
.flash-info { background: var(--bg-elevated); border-left: 3px solid var(--info); }

/* ── Badges / status pills ─────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge-type { background: var(--bg-elevated); color: var(--red-300); font-family: var(--font-mono); }
.status-pending_review, .status-quote_modified { background: rgba(224,164,88,.15); color: var(--warn); }
.status-confirmed { background: rgba(255,122,132,.15); color: var(--red-300); }
.status-picked_up, .status-in_transit { background: rgba(127,168,201,.15); color: var(--info); }
.status-delivered { background: rgba(95,184,154,.15); color: var(--ok); }
.status-denied, .status-quote_rejected { background: rgba(255,92,104,.15); color: var(--danger); }
.status-cancelled { background: rgba(168,150,154,.15); color: var(--text-muted); }

/* ── Route-line motif ──────────────────────────────────────── */
.route-line { display: flex; align-items: center; }
.route-line .seg { flex: 1; height: 2px; background: var(--border-strong); position: relative; }
.route-line .seg.done { background: var(--red-400); }
.route-line .seg.active { background: repeating-linear-gradient(90deg, var(--red-400) 0 6px, transparent 6px 12px); animation: dash 1.2s linear infinite; }
@keyframes dash { to { background-position: 18px 0; } }
.route-line .node { width: 12px; height: 12px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.route-line .node.done { background: var(--red-400); }
.route-line .node.active { background: var(--red-500); box-shadow: 0 0 0 4px var(--red-glow); }

/* ── Tables ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
td { padding: 12px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
tr:hover td { background: var(--bg-elevated); }
@media (max-width: 900px) {
  table.responsive-cards thead { display: none; }
  table.responsive-cards, table.responsive-cards tbody, table.responsive-cards tr, table.responsive-cards td { display: block; width: 100%; }
  table.responsive-cards tr { margin-bottom: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); }
  table.responsive-cards td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: var(--space-3); }
  table.responsive-cards td::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; font-weight: 600; }
}

/* ── Public site ───────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(34,39,46,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-subtle); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; }
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: 18px; color: var(--text-primary); }
.brand .mark { color: var(--red-400); }
.main-nav { display: flex; gap: var(--space-5); align-items: center; }
.main-nav a { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.main-nav a:hover { color: var(--red-300); }

.hero { position: relative; padding: var(--space-9) 0 var(--space-8); background:
  radial-gradient(ellipse 800px 400px at 80% -10%, var(--red-wash), transparent),
  var(--bg-base); overflow: hidden; }
.hero h1 { font-size: 48px; max-width: 700px; }
.hero .lead { font-size: 18px; color: var(--text-secondary); max-width: 560px; margin-bottom: var(--space-6); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.stat-tile { text-align: center; padding: var(--space-5); }
.stat-tile .value { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--red-300); }
.stat-tile .label { color: var(--text-muted); font-size: 13px; margin-top: var(--space-1); }

.service-card { padding: var(--space-6); text-align: left; }
.service-card .id-tag { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); background: var(--bg-sunken); display: inline-block; padding: 2px 8px; border-radius: 4px; margin-top: var(--space-2); }

.step-row { display: flex; gap: var(--space-4); counter-reset: step; }
.step { flex: 1; text-align: center; position: relative; }
.step .num { width: 36px; height: 36px; border-radius: 50%; background: var(--red-800); color: var(--red-200); display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto var(--space-3); }
@media (max-width: 900px) { .step-row { flex-direction: column; } }

.site-footer { background: var(--bg-sunken); border-top: 1px solid var(--border-subtle); padding: var(--space-7) 0 var(--space-5); color: var(--text-muted); }
.site-footer a { color: var(--text-secondary); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Portal / admin shells ─────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: 240px; background: var(--bg-sunken); border-right: 1px solid var(--border-subtle); flex-shrink: 0; padding: var(--space-5) var(--space-3); }
.app-sidebar .brand { padding: 0 var(--space-2) var(--space-5); font-size: 16px; }
.app-sidebar nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; margin-bottom: 2px; }
.app-sidebar nav a:hover { background: var(--bg-elevated); text-decoration: none; }
.app-sidebar nav a.active { background: var(--red-wash); color: var(--red-300); font-weight: 600; }
.app-sidebar nav .count { background: var(--red-400); color: var(--on-red-dark); border-radius: var(--radius-pill); font-size: 11px; padding: 1px 7px; font-weight: 700; }
.app-main { flex: 1; min-width: 0; padding: var(--space-6); }
.app-topbar { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { width: 100%; display: flex; overflow-x: auto; padding: var(--space-3); }
  .app-sidebar .brand { display: none; }
  .app-sidebar nav { display: flex; gap: var(--space-2); }
  .app-sidebar nav a.active .count, .app-sidebar nav .count { }
}

.action-strip { background: var(--red-900); border: 1px solid var(--red-800); border-left: 3px solid var(--warn); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-box { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.stat-box .value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; }
.stat-box .label { color: var(--text-muted); font-size: 13px; }

/* ── Wizard ────────────────────────────────────────────────── */
.wizard-shell { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-6); align-items: start; }
@media (max-width: 1200px) { .wizard-shell { grid-template-columns: 1fr; } }
.type-card { border: 2px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); cursor: pointer; background: var(--bg-surface); text-align: left; width: 100%; }
.type-card:hover { border-color: var(--red-800); }
.type-card.selected { border-color: var(--red-400); background: var(--red-wash); }
.type-card .id-tag { font-family: var(--font-mono); font-size: 12px; color: var(--red-300); }
.parcel-block { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); margin-bottom: var(--space-4); }
.parcel-block .pb-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); cursor: pointer; }
.parcel-block .pb-body { padding: 0 var(--space-4) var(--space-4); }
.dim-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.quote-panel { position: sticky; top: 88px; }
.quote-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--border-subtle); }
.quote-total { display: flex; justify-content: space-between; padding-top: var(--space-3); font-size: 20px; font-weight: 700; color: var(--red-300); font-family: var(--font-mono); }
.route-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.route-list li { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.route-list li:last-child { border-bottom: none; }
.route-list li:hover, .route-list li.selected { background: var(--bg-elevated); }
.route-list .empty-state { padding: var(--space-6); text-align: center; color: var(--text-muted); cursor: default; }

/* ── Error page shell ──────────────────────────────────────── */
.error-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.error-shell { text-align: center; max-width: 480px; padding: var(--space-5); }
.error-glyph { color: var(--red-400); margin-bottom: var(--space-4); }

/* ── Utility ───────────────────────────────────────────────── */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}
.text-center{text-align:center}
.hidden{display:none !important}
[aria-live]{ }
.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; }