/* Oway Shipper app stylesheet, copied verbatim from Oway_Shipper_wSampleData.html.
   Buttons, accents, borders, highlights and chips on the website come from here. */

/* ============================================================================
   OWAY SHIPPER, design system carried over from Derby CRM verbatim.
   Indigo #1E00FF is the ONLY interactive colour. Orange #F65C0E is the brand
   mark, the active-nav tint and the attention state, never a button, never a
   focus ring. Dark only. Mono carries data. Panels get a sheen, not a shadow;
   shadows belong to floating layers.
   ========================================================================= */
:root {
  /* ── Brand ────────────────────────────────────────────────── */
  --oway-indigo:     #1E00FF;
  --oway-indigo-hi:  #5236FF;
  --oway-orange:     #F65C0E;
  --oway-orange-hi:  #FF8A4C;
  --oway-green:      #20A271;
  --oway-green-hi:   #3DD99A;
  --oway-red:        #E5484D;
  --oway-red-hi:     #FF6B6E;
  --oway-amber:      #D9A21B;
  --oway-amber-hi:   #F2C14E;
  --oway-purple:     #6A0DFF;
  --oway-purple-hi:  #A87BFF;
  --oway-blue:       #3825FD;
  --oway-blue-hi:    #8B7BFF;

  /* ── Surfaces ─────────────────────────────────────────────── */
  --bg:               #0a0a0b;
  --bg-elevated:      #131315;
  --surface:          rgba(255,255,255,0.04);
  --surface-hover:    rgba(255,255,255,0.06);
  --surface-active:   rgba(255,255,255,0.10);
  --glass:            rgba(20,20,23,0.72);
  --glass-border:     rgba(255,255,255,0.08);

  /* The ONE brand gradient. Hero / auth / Juno presence only. */
  --bg-nebula:
    radial-gradient(ellipse 55% 45% at 18% 14%, rgba(233,117,80,0.85) 0%, rgba(207,98,133,0.55) 40%, transparent 72%),
    radial-gradient(ellipse 70% 65% at 30% 65%, rgba(118,54,214,0.75) 0%, rgba(74,37,236,0.55) 55%, transparent 80%),
    radial-gradient(ellipse 80% 80% at 45% 90%, rgba(74,37,236,0.65) 0%, transparent 75%),
    #17181d;

  /* ── Sky ──────────────────────────────────────────────────────
     The ambient wash is a sunset read as two colours: a dominant one
     top-left, carrying the topbar and the rail, and a secondary one
     bottom-right. Both are set from the clock in JS and drift all day, so
     these three are only the fallback if the script never runs.
     Format is a bare "r, g, b" triplet so alpha can be applied per layer. */
  --sky-1: 246, 92, 14;    /* dominant, top-left, topbar, rail  */
  --sky-2: 74, 37, 236;    /* secondary, bottom-right            */
  --sky-mid: 150, 66, 126; /* the meeting of the two, mid-canvas  */
  --sky-i: 1;              /* how present the whole wash is       */

  /* Ambient canvas. Painted fixed so every sticky opaque surface lines up,
     no seams. */
  --bg-canvas:
    radial-gradient(ellipse 105% 80% at 0% -5%,     rgba(var(--sky-1),   calc(0.16 * var(--sky-i))) 0%, transparent 58%),
    radial-gradient(ellipse 95% 70% at 20% 38%,     rgba(var(--sky-mid), calc(0.075 * var(--sky-i))) 0%, transparent 62%),
    radial-gradient(ellipse 105% 95% at 58% 58%,    rgba(var(--sky-mid), calc(0.135 * var(--sky-i))) 0%, transparent 68%),
    radial-gradient(ellipse 115% 105% at 102% 104%, rgba(var(--sky-2),   calc(0.21 * var(--sky-i))) 0%, transparent 70%),
    var(--bg);
  --bg-rail:
    linear-gradient(180deg, rgba(var(--sky-1), calc(0.14 * var(--sky-i))) 0%,
                            rgba(var(--sky-1), calc(0.032 * var(--sky-i))) 26%, transparent 52%),
    var(--bg-canvas);
  --panel-fill: color-mix(in srgb, var(--bg-elevated) 84%, transparent);

  --fg-1:  #ffffff;
  --fg-2:  rgba(255,255,255,0.55);
  --fg-3:  rgba(255,255,255,0.48);

  --border:        rgba(255,255,255,0.08);
  --border-subtle: rgba(255,255,255,0.05);
  --border-strong: rgba(255,255,255,0.16);

  /* Semantic TEXT tones, coloured type always routes through these. */
  --text-accent:  #8A78FF;
  --text-success: var(--oway-green-hi);
  --text-danger:  var(--oway-red-hi);
  --text-warning: var(--oway-amber-hi);
  --text-blue:    var(--oway-blue-hi);
  --text-orange:  var(--oway-orange-hi);

  /* Juno voice ring, the third sanctioned gradient moment. */
  --voice-grad-1: #E97550;
  --voice-grad-2: #7636D6;
  --voice-grad-3: #4A25EC;

  --chip-indigo-bg: rgba(30,0,255,0.20);   --chip-indigo-bd: rgba(30,0,255,0.48);
  --chip-orange-bg: rgba(246,92,14,0.10);  --chip-orange-bd: rgba(246,92,14,0.25);
  --chip-blue-bg:   rgba(56,37,253,0.12);  --chip-blue-bd:   rgba(56,37,253,0.30);
  --chip-green-bg:  rgba(32,162,113,0.10); --chip-green-bd:  rgba(32,162,113,0.25);
  --chip-red-bg:    rgba(229,72,77,0.10);  --chip-red-bd:    rgba(229,72,77,0.30);
  --chip-amber-bg:  rgba(217,162,27,0.12); --chip-amber-bd:  rgba(217,162,27,0.30);
  --chip-purple-bg: rgba(106,13,255,0.10); --chip-purple-bd: rgba(106,13,255,0.25);

  --shadow-md: 0 6px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 18px 60px rgba(0,0,0,0.50);
  --overlay-edge: inset 0 0 1px rgba(255,255,255,0.3);
  --panel-sheen: inset 0 1px 0 rgba(255,255,255,0.07);
  --glass-blur: blur(14px) saturate(150%);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(30,0,255,0.85);
  --focus-border: var(--oway-indigo);

  /* ── Semantic map ─────────────────────────────────────────── */
  --fg:        var(--fg-1);
  --fg-muted:  var(--fg-2);
  --fg-faint:  var(--fg-3);
  --line-faint:  var(--border-subtle);
  --line:        var(--border);
  --line-strong: var(--border-strong);
  --bg-hover:  var(--surface);
  --bg-active: var(--surface-active);
  --bg-scrim:  color-mix(in srgb, var(--bg) 74%, transparent);

  --accent:      var(--oway-indigo);
  --accent-hover:var(--oway-indigo-hi);
  --accent-text: var(--text-accent);
  --accent-soft: var(--chip-indigo-bg);
  --accent-line: var(--chip-indigo-bd);

  --attn:       var(--text-orange);
  --attn-solid: var(--oway-orange);
  --attn-soft:  var(--chip-orange-bg);
  --attn-line:  var(--chip-orange-bd);
  --attn-fill:  linear-gradient(180deg, rgba(246,92,14,0.07), rgba(246,92,14,0.015));
  --attn-glow:  0 0 40px -14px rgba(246,92,14,0.45);

  --ok:   var(--text-success); --ok-soft:   var(--chip-green-bg); --ok-line:   var(--chip-green-bd);
  --warn: var(--text-warning); --warn-soft: var(--chip-amber-bg); --warn-line: var(--chip-amber-bd);
  --risk: var(--text-danger);  --risk-soft: var(--chip-red-bg);   --risk-line: var(--chip-red-bd);
  --info: var(--text-blue);    --info-soft: var(--chip-blue-bg);  --info-line: var(--chip-blue-bd);
  --idle: var(--fg-3);         --idle-soft: var(--surface);       --idle-line: var(--border);

  --viz-1: color-mix(in srgb, var(--oway-indigo) 34%, var(--bg-elevated));
  --viz-2: color-mix(in srgb, var(--oway-indigo) 62%, var(--bg-elevated));
  --viz-3: var(--oway-indigo);
  --viz-4: var(--oway-indigo-hi);
  --viz-5: var(--oway-purple-hi);

  /* ── Type ─────────────────────────────────────────────────── */
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  11px;
  --fs-md:  13px;
  --fs-lg:  15px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;

  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700;

  --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.45; --lh-relaxed: 1.65;
  --tracking-tight: -0.03em;
  --tracking-snug:  -0.01em;
  --tracking-caps:  0.14em;

  /* ── Space, 4px base ─────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 4px;  --sp-3: 8px;  --sp-4: 8px;  --sp-5: 12px;
  --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 48px;

  /* ── Radius, 8 / 12 / 16 / pill ──────────────────────────── */
  --r-xs: 8px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 16px;
  --r-chip: 8px; --r-pill: 999px; --r-full: 999px;

  --sheen: var(--panel-sheen);
  --shadow-1: none;
  --shadow-2: var(--shadow-md), var(--overlay-edge);
  --shadow-3: var(--shadow-lg), var(--overlay-edge);

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 400ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Frame metrics ───────────────────────────────────────── */
  --topbar-h: 52px;
  --rail-w: 268px;
  --gutter: var(--sp-8);
  --row-h: 32px;
}

/* ===== Reset & base ====================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-canvas);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font); }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,p,figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
/* Fields signal focus with their border, so they opt out of the ring and
   never show two indicators at once. */
input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: content-box; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
.num  { font-variant-numeric: tabular-nums; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.row { display: flex; align-items: center; gap: var(--sp-5); }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1 1 auto; min-width: 0; }
.icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6;
        stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 13px; height: 13px; }
.icon.xs { width: 11px; height: 11px; }
.icon.lg { width: 18px; height: 18px; }

/* ===== Icon sprite host ================================================== */
#sprite { display: none; }

/* ===== App frame ========================================================= */
#app { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
  background: var(--bg-rail); background-attachment: fixed;
  position: relative; z-index: 40;
}
.brand { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
.brand-mark { height: 22px; width: auto; display: block; }
.brand-name {
  font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--fg-1);
  letter-spacing: var(--tracking-snug);
}
.brand-sub {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--fg-faint);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding-left: var(--sp-4); margin-left: var(--sp-1);
  border-left: 1px solid var(--line);
}
.topbar .rail-toggle { display: none; }

/* Global search, persistent */
.gsearch { flex: 1 1 auto; max-width: 560px; margin: 0 auto; position: relative; }
.gsearch-input {
  width: 100%; height: 32px;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0 78px 0 32px;
  font-size: var(--fs-md); color: var(--fg);
  transition: border-color var(--dur-1) var(--ease);
}
.gsearch-input::placeholder { color: var(--fg-faint); }
.gsearch-input:hover { border-color: var(--line-strong); }
.gsearch-input:focus { outline: none; border-color: var(--focus-border); }
.gsearch-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--fg-faint); pointer-events: none;
}
.gsearch-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: var(--sp-2); }
.topbar-right { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }

.kbd {
  font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1;
  padding: 3px 5px; border-radius: var(--r-xs);
  background: var(--surface); color: var(--fg-faint); border: 1px solid var(--line);
}

/* Global search results panel */
.gpanel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--glass); backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); overflow: hidden; padding: var(--sp-3);
  max-height: 62vh; overflow-y: auto;
  animation: rise var(--dur-2) var(--ease);
}
.gres {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); text-align: left;
}
.gres:hover, .gres[data-cur="true"] { background: var(--surface-active); }
.gres-ic { flex: 0 0 auto; color: var(--fg-faint); display: flex; }
.gres-t { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.gres-s { font-size: var(--fs-2xs); color: var(--fg-faint); }
.gres-kind {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-2xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint);
}
.gpanel-head {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--fg-faint);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}

.avatar {
  border-radius: var(--r-pill); display: grid; place-items: center;
  font-weight: var(--fw-semi); color: #fff;
  width: 26px; height: 26px; font-size: var(--fs-2xs);
  flex: 0 0 auto; letter-spacing: 0.01em; background: var(--accent);
}
.avatar.sq { border-radius: var(--r-sm); }
.avatar.lg { width: 40px; height: 40px; font-size: var(--fs-md); }

/* ===== Buttons, pill geometry, indigo primary ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  height: 30px; padding: 0 var(--sp-6);
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface-hover); color: var(--fg);
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug); white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.btn:hover { background: var(--surface-active); border-color: var(--line-strong); }
.btn:active:not(:disabled) { transform: scale(0.98); opacity: 0.85; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn.primary { background: var(--oway-indigo); border-color: transparent; color: #fff; }
.btn.primary:hover { background: var(--oway-indigo-hi); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-muted); }
.btn.ghost:hover { background: var(--surface); color: var(--fg); border-color: transparent; }
.btn.danger { background: transparent; color: var(--risk); border-color: var(--risk-line); }
.btn.danger:hover { background: var(--risk-soft); }
.btn.ok { background: var(--oway-green); border-color: transparent; color: #fff; }
.btn.ok:hover { background: var(--oway-green-hi); }
.btn.sm { height: 26px; padding: 0 var(--sp-5); font-size: var(--fs-sm); }
.btn.lg { height: 38px; padding: 0 var(--sp-8); font-size: var(--fs-lg); }
.btn.icon { width: 30px; padding: 0; }
.btn.icon.sm { width: 26px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* Segmented control */
.seg {
  display: inline-flex; padding: 2px; gap: 2px; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.seg button {
  height: 22px; padding: 0 var(--sp-5); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-muted);
  white-space: nowrap; flex: 0 0 auto;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.seg button:hover { color: var(--fg); }
.seg button[aria-selected="true"] { background: var(--surface-active); color: var(--fg); }

/* ===== Chips ============================================================= */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-chip);
  border: 1px solid var(--line); background: var(--surface); color: var(--fg-muted);
  white-space: nowrap;
}
.chip.ok   { background: var(--ok-soft);   border-color: var(--ok-line);   color: var(--ok); }
.chip.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.chip.risk { background: var(--risk-soft); border-color: var(--risk-line); color: var(--risk); }
.chip.info { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }
.chip.acc  { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.chip.attn { background: var(--attn-soft); border-color: var(--attn-line); color: var(--attn); }
.chip.plain { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }

.fchip {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: 4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent; color: var(--fg-muted);
  white-space: nowrap; transition: all var(--dur-1) var(--ease);
}
.fchip:hover { border-color: var(--line-strong); color: var(--fg); }
.fchip.on { background: var(--oway-indigo); border-color: transparent; color: #fff; }

.dot { width: 6px; height: 6px; border-radius: var(--r-pill); flex: 0 0 auto; background: currentColor; }
.dot.lg { width: 8px; height: 8px; }

.eyebrow {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-faint);
}
.eyebrow.dotted::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 999px;
  background: var(--oway-orange); margin-right: 8px; vertical-align: 1px;
}

/* ===== Layout primitives ================================================= */
.body { flex: 1 1 auto; display: flex; min-height: 0; }
.rail {
  width: var(--rail-w); flex: 0 0 auto;
  border-right: 1px solid var(--line);
  background: var(--bg-rail); background-attachment: fixed;
  display: flex; flex-direction: column; min-height: 0;
}
.main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }

.view-head {
  flex: 0 0 auto; min-height: 48px;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-3) var(--sp-7);
  border-bottom: 1px solid var(--line);
}
.view-head > * { flex: 0 0 auto; }
.view-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); white-space: nowrap; }
.scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
.page { padding: var(--sp-8) var(--gutter) var(--sp-10); max-width: 1180px; }
.page.wide { max-width: none; }
.page.narrow { max-width: 760px; }
.page-head { margin-bottom: var(--sp-8); }
.page-h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin-top: var(--sp-3); }
.page-desc { font-size: var(--fs-md); color: var(--fg-muted); margin-top: var(--sp-4); max-width: 60ch; line-height: var(--lh-relaxed); }
.section-title {
  font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug);
  display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5);
}
.section-title .count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }

/* Panel, the default contained surface. */
.card {
  background: var(--panel-fill); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sheen); position: relative;
}
.card.accent::before {
  content: ''; position: absolute; top: 0; left: var(--sp-7);
  width: 30px; height: 2px; background: var(--oway-orange);
}
.card.attn {
  border-color: var(--attn-line); background: var(--attn-fill);
  box-shadow: var(--sheen), var(--attn-glow);
}
.card.attn::before { background: var(--attn-solid); }
.card-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--line-faint);
}
.card-title { font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.card-body { padding: var(--sp-7); }
.card-foot {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7); border-top: 1px solid var(--line-faint);
}
.attn-badge {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--attn-soft); border: 1px solid var(--attn-line); color: var(--attn);
}

/* Empty / zero states */
.zero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-5); padding: var(--sp-10) var(--sp-8); margin: auto; max-width: 460px;
}
.zero-glyph {
  width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text-accent);
}
.zero-title { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.zero-body { font-size: var(--fs-md); color: var(--fg-muted); line-height: var(--lh-relaxed); }

/* ===== Meters ============================================================ */
.meter { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.meter > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  border-radius: var(--r-pill); background: var(--oway-indigo);
  transition: width var(--dur-3) var(--ease);
}
.stackbar { display: flex; height: 6px; border-radius: var(--r-full); overflow: hidden; background: var(--bg-active); }
.stackbar > i { display: block; height: 100%; transition: width var(--dur-3) var(--ease); }

/* ===== Floating layers =================================================== */
.scrim {
  position: fixed; inset: 0; z-index: 100; background: var(--bg-scrim);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 11vh;
  animation: fade var(--dur-2) var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.modal {
  width: min(560px, 92vw); max-height: 76vh;
  background: var(--bg-elevated); border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; overflow: hidden;
  animation: rise var(--dur-3) var(--ease);
}
.modal.wide { width: min(880px, 94vw); }
.modal-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--line);
}
.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.modal-body { overflow: auto; padding: var(--sp-7); }
.modal-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-7); border-top: 1px solid var(--line); background: var(--bg);
}

/* ===== Forms ============================================================= */
.field { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--fg-muted); }
.label .req { color: var(--attn); margin-left: 2px; }
.input, .select, .textarea {
  height: 32px; padding: 0 var(--sp-5); width: 100%;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: var(--fs-md); color: var(--fg);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.textarea { height: auto; padding: var(--sp-4) var(--sp-5); resize: vertical; line-height: var(--lh-body); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus-border); }
.input::placeholder, .textarea::placeholder { color: var(--fg-faint); }
.input.bad { border-color: var(--risk-line); }
.select { cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-faint) 50%),
                    linear-gradient(135deg, var(--fg-faint) 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 11px) 14px;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  padding-right: var(--sp-9);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.hint { font-size: var(--fs-2xs); color: var(--fg-faint); }
.err { font-size: var(--fs-2xs); color: var(--risk); }

/* Checkbox, square, indigo when on */
.check { display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer; font-size: var(--fs-md); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); background: var(--bg-elevated);
  display: grid; place-items: center; transition: all var(--dur-1) var(--ease);
}
.check .box svg { opacity: 0; width: 10px; height: 10px; stroke: #fff; stroke-width: 2.6; }
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { box-shadow: var(--focus-ring); }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer; font-size: var(--fs-md); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 34px; height: 20px; border-radius: 999px; flex: 0 0 auto;
  background: var(--surface-active); border: 1px solid var(--line);
  position: relative; transition: all var(--dur-2) var(--ease);
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 999px; background: var(--fg-faint); transition: all var(--dur-2) var(--ease);
}
.switch input:checked + .track { background: var(--accent); border-color: transparent; }
.switch input:checked + .track::after { left: 16px; background: #fff; }
.switch input:focus-visible + .track { box-shadow: var(--focus-ring); }

/* ===== Tables ============================================================ */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.tbl th {
  position: sticky; top: 0; z-index: 2; text-align: left;
  font-size: var(--fs-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--fg-faint); font-weight: var(--fw-semi);
  padding: var(--sp-4) var(--sp-6); background: var(--bg); border-bottom: 1px solid var(--line);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.tbl th:hover { color: var(--fg-muted); }
.tbl th .sortic { display: inline-block; margin-left: 4px; opacity: 0; vertical-align: -1px; }
.tbl th[data-sorted] .sortic { opacity: 1; color: var(--attn); }
.tbl td { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line-faint); vertical-align: middle; }
.tbl tbody tr { transition: background var(--dur-1) var(--ease); cursor: pointer; }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr[data-sel="true"] { background: var(--accent-soft); }
.tbl .r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lane-cell { display: flex; align-items: center; gap: var(--sp-4); font-family: var(--font-mono); white-space: nowrap; font-size: var(--fs-sm); }
.lane-arrow { color: var(--fg-faint); flex: 0 0 auto; }

/* ===== Toasts ============================================================ */
#toasts {
  position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: var(--sp-4); align-items: center;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--glass); backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: var(--sp-5) var(--sp-6); font-size: var(--fs-md);
  animation: rise var(--dur-2) var(--ease); transition: opacity var(--dur-2), transform var(--dur-2);
}
.toast[data-exit="true"] { opacity: 0; transform: translateY(6px); }
.toast .ic { color: var(--ok); display: flex; }

/* ===== Left rail: navigation ============================================= */
/* Every interactive box in the rail shares one hover highlight, so hovering
   anything in the rail feels like the same gesture. */
.rail .navi, .rail .railuser, .rail .group-head { border-radius: 8px; }
.rail-head {
  flex: 0 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4);
}
.rail-scroll { flex: 1 1 auto; overflow: auto; padding: 0 var(--sp-5) var(--sp-6); }
.rail-foot { flex: 0 0 auto; padding: var(--sp-5); border-top: 1px solid var(--line); }

.navi {
  display: flex; align-items: center; gap: var(--sp-5);
  width: 100%; height: 30px; padding: 0 var(--sp-5); margin-bottom: 2px;
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--fg-muted); background: transparent;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.navi:hover { background: var(--surface); color: var(--fg); }
.navi.on {
  background: var(--attn-soft); box-shadow: inset 0 0 0 1px var(--attn-line); color: var(--attn);
}
.navi-ic { display: flex; flex: 0 0 auto; color: var(--fg-faint); }
.navi.on .navi-ic { color: var(--attn); }
.navi-l { flex: 1 1 auto; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navi-n {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 6px;
}
.navi.on .navi-n { color: var(--attn); background: transparent; border-color: var(--attn-line); }

.group { margin-bottom: var(--sp-5); }
.group-head {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; height: 26px; padding: 0 var(--sp-5);
  color: var(--fg-faint); font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.group-body { padding: var(--sp-2) 0 0; }

/* Rail summary, the one ornamented box in the rail (orange stripe). */
.railcard {
  margin: 0 var(--sp-1) var(--sp-6); padding: var(--sp-6);
  background: var(--panel-fill); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--panel-sheen); position: relative;
}
.railcard::before {
  content: ''; position: absolute; top: 0; left: var(--sp-6);
  width: 30px; height: 2px; background: var(--oway-orange);
}
.railcard-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-4); }
.railcard-val { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.railcard-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-2xs); color: var(--fg-muted); margin-top: var(--sp-4); }
.railcard-legend span { display: inline-flex; align-items: center; gap: var(--sp-3); }

.railuser {
  display: flex; align-items: center; gap: var(--sp-5); width: 100%;
  padding: var(--sp-4) var(--sp-5); text-align: left;
  transition: background var(--dur-1) var(--ease);
}
.railuser:hover { background: var(--surface); }
.railuser-n { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.railuser-s { font-size: var(--fs-2xs); color: var(--fg-faint); }

/* ===== Juno, the gradient presence ====================================== */
/* Three sanctioned gradient moments in the system: the nebula, the wordmark,
   and Juno. The orb is Juno's, and it is the same object everywhere it
   appears, rail, home bar, floating dock, chat header, only the size
   changes. */
.orb {
  border-radius: 999px; flex: 0 0 auto; position: relative;
  background: conic-gradient(from 200deg,
    var(--voice-grad-1), var(--voice-grad-2), var(--voice-grad-3), var(--voice-grad-1));
  animation: orbspin 14s linear infinite;
}
@keyframes orbspin { to { transform: rotate(360deg); } }
.orb.ring::after {
  content: ''; position: absolute; inset: 3px; border-radius: 999px;
  background: var(--bg-elevated);
}
.orb.sm { width: 18px; height: 18px; }
.orb.md { width: 26px; height: 26px; }
.orb.lg { width: 44px; height: 44px; }
.orb.xl { width: 68px; height: 68px; }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* Floating dock, Juno is always one tap away, wherever you are. */
.juno-dock {
  position: fixed; right: var(--sp-8); bottom: var(--sp-8); z-index: 90;
  display: flex; align-items: center; gap: var(--sp-5);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.juno-dock[data-hidden="true"] { opacity: 0; transform: translateY(8px) scale(0.9); pointer-events: none; }
.juno-dock-btn {
  width: 52px; height: 52px; border-radius: 999px; position: relative;
  display: grid; place-items: center;
  box-shadow: 0 10px 34px -8px rgba(114,54,214,0.65), var(--overlay-edge);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.juno-dock-btn:hover { transform: scale(1.06); box-shadow: 0 14px 44px -8px rgba(114,54,214,0.85), var(--overlay-edge); }
.juno-dock-btn:active { transform: scale(0.97); }
.juno-dock-btn .orb { position: absolute; inset: 0; width: 100%; height: 100%; }
.juno-dock-btn .glyph { position: relative; z-index: 1; color: #fff; }
.juno-dock-hint {
  font-size: var(--fs-sm); color: var(--fg-muted); background: var(--glass);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  padding: 6px 12px; box-shadow: var(--shadow-2); white-space: nowrap;
  opacity: 0; transform: translateX(6px); transition: all var(--dur-2) var(--ease); pointer-events: none;
}
.juno-dock:hover .juno-dock-hint { opacity: 1; transform: none; }

/* The bar, sits under the quote card on Home. Type anything: a lane, an
   order number, a question. It grows into the full conversation. */
.juno-bar {
  display: flex; align-items: center; gap: var(--sp-5);
  width: 100%; padding: var(--sp-5) var(--sp-6); text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--panel-sheen);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  position: relative; overflow: hidden;
}
.juno-bar::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from 200deg, var(--voice-grad-1), var(--voice-grad-2), var(--voice-grad-3), var(--voice-grad-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-2) var(--ease); pointer-events: none;
}
.juno-bar:hover { transform: translateY(-1px); box-shadow: var(--panel-sheen), 0 10px 30px -14px rgba(114,54,214,0.7); }
.juno-bar:hover::before, .juno-bar:focus-within::before { opacity: 1; }
.juno-bar-input {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none;
  font-size: var(--fs-lg); color: var(--fg); padding: 0;
}
.juno-bar-input::placeholder { color: var(--fg-faint); }
.juno-bar-kbd { display: flex; gap: var(--sp-2); flex: 0 0 auto; }
.juno-bar-send {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: #fff; flex: 0 0 auto;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), opacity var(--dur-1);
}
.juno-bar-send:hover { background: var(--accent-hover); }
.juno-bar-send[disabled] { opacity: .35; pointer-events: none; }

.juno-suggests { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); }
.juno-suggest {
  font-size: var(--fs-sm); color: var(--fg-muted);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; display: inline-flex; align-items: center; gap: var(--sp-3);
  transition: all var(--dur-1) var(--ease); background: transparent;
}
.juno-suggest:hover { border-color: var(--accent-line); color: var(--fg); background: var(--accent-soft); }

/* ===== Juno, the conversation surface =================================== */
.juno-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  padding: 3vh var(--sp-6);
  opacity: 0; transition: opacity 260ms var(--ease);
}
.juno-overlay[data-on="true"] { opacity: 1; }
.juno-panel {
  width: min(980px, 100%); height: min(94vh, 940px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(23,24,29,0.96), rgba(10,10,11,0.98));
  border: 1px solid var(--glass-border); border-radius: 24px;
  box-shadow: var(--shadow-lg), var(--overlay-edge);
  transform: translateY(18px) scale(0.985); opacity: 0;
  transition: transform 320ms var(--ease), opacity 260ms var(--ease);
  position: relative;
}
.juno-overlay[data-on="true"] .juno-panel { transform: none; opacity: 1; }
/* The nebula bleeds in from the top of the panel, Juno's own weather. */
.juno-panel::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 260px; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 100% at 12% 0%, rgba(233,117,80,0.16) 0%, transparent 70%),
    radial-gradient(ellipse 70% 100% at 58% 0%, rgba(118,54,214,0.16) 0%, transparent 72%),
    radial-gradient(ellipse 60% 100% at 96% 0%, rgba(74,37,236,0.18) 0%, transparent 70%);
  mask-image: linear-gradient(#000, transparent);
}
.juno-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--line-faint);
  position: relative; z-index: 1;
}
.juno-head-t { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.juno-head-s { font-size: var(--fs-2xs); color: var(--fg-faint); }
.juno-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-8) var(--sp-7); position: relative; z-index: 1; scroll-behavior: smooth; }
.juno-thread { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 760px; margin: 0 auto; }

/* Opening state, the greeting sits centred until the first message. */
.juno-open { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-5); padding: var(--sp-9) 0 var(--sp-8); }
.juno-open-h { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.juno-open-s { font-size: var(--fs-md); color: var(--fg-muted); max-width: 46ch; line-height: var(--lh-relaxed); }
.juno-prompts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); width: 100%; max-width: 620px; margin-top: var(--sp-5); }
.juno-prompt {
  text-align: left; padding: var(--sp-6); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  transition: all var(--dur-2) var(--ease);
}
.juno-prompt:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-2px); }
.juno-prompt strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-semi); margin-bottom: 3px; }
.juno-prompt span { font-size: var(--fs-sm); color: var(--fg-faint); }

/* Messages */
.jmsg { display: flex; gap: var(--sp-5); align-items: flex-start; animation: jrise 420ms var(--ease) both; }
@keyframes jrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.jmsg.me { flex-direction: row-reverse; }
.jmsg-av { flex: 0 0 auto; margin-top: 2px; }
.jmsg-av .avatar { width: 26px; height: 26px; }
.jmsg-body { min-width: 0; max-width: 78%; }
.jmsg-bubble {
  padding: var(--sp-5) var(--sp-6); border-radius: 14px;
  font-size: var(--fs-md); line-height: var(--lh-relaxed);
  background: var(--surface); border: 1px solid var(--line-faint);
}
.jmsg.me .jmsg-bubble { background: var(--accent); border-color: transparent; color: #fff; border-bottom-right-radius: 5px; }
.jmsg:not(.me) .jmsg-bubble { border-bottom-left-radius: 5px; }
.jmsg-bubble p { margin: 0; }
.jmsg-bubble p + p { margin-top: var(--sp-5); }
.jmsg-bubble strong { color: var(--fg-1); font-weight: var(--fw-semi); }
.jmsg.me .jmsg-bubble strong { color: #fff; }
.jmsg-time { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: var(--sp-3); }
.jmsg.me .jmsg-time { text-align: right; }

/* Typing indicator */
.jtyping { display: inline-flex; align-items: center; gap: 5px; padding: var(--sp-5) var(--sp-6); }
.jtyping i { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-faint); animation: jbounce 1.15s var(--ease-in-out) infinite; }
.jtyping i:nth-child(2) { animation-delay: 0.14s; }
.jtyping i:nth-child(3) { animation-delay: 0.28s; }
@keyframes jbounce { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Juno-generated artefacts, a quote, an order, a table, inside the thread */
.jcard {
  margin-top: var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg-elevated); overflow: hidden; animation: jrise 420ms var(--ease) both;
}
.jcard-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line-faint);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--fg-faint);
}
.jcard-body { padding: var(--sp-6); }
.jcard-foot { display: flex; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--line-faint); }
.jquote-price { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.jquote-rows { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.jrow { display: flex; justify-content: space-between; gap: var(--sp-6); font-size: var(--fs-sm); }
.jrow span:first-child { color: var(--fg-muted); }
.jrow span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.juno-composer {
  flex: 0 0 auto; padding: var(--sp-6) var(--sp-7) var(--sp-7);
  border-top: 1px solid var(--line-faint); position: relative; z-index: 1;
}
.juno-composer-inner { max-width: 760px; margin: 0 auto; }
.juno-input-wrap {
  display: flex; align-items: flex-end; gap: var(--sp-5);
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: 20px; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  transition: border-color var(--dur-2) var(--ease);
}
.juno-input-wrap:focus-within { border-color: var(--accent); }
.juno-input {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; resize: none;
  font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg);
  max-height: 140px; padding: 6px 0;
}
.juno-input::placeholder { color: var(--fg-faint); }
.juno-foot-note { font-size: var(--fs-2xs); color: var(--fg-faint); text-align: center; margin-top: var(--sp-4); }

/* ===== Home ============================================================== */
.home { padding: var(--sp-9) var(--gutter) var(--sp-10); max-width: 1180px; }
.home-greet { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.home-greet em { font-style: normal; color: var(--fg-faint); }
.home-sub { font-size: var(--fs-md); color: var(--fg-muted); margin-top: var(--sp-5); }
.home-hero { max-width: 860px; }
.home-stack { margin-top: var(--sp-9); max-width: 860px; }

/* Quick quote, four fields, one price. Lifted straight from the old app,
   which shippers already know by muscle memory. */
.qq { padding: var(--sp-7); }
.qq-grid { display: grid; grid-template-columns: 1fr 1fr 92px 116px; gap: var(--sp-5); align-items: end; }
.qq-lane { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: end; }
.qq-swap {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  color: var(--fg-faint); border: 1px solid var(--line); margin-bottom: 3px;
  transition: all var(--dur-1) var(--ease);
}
.qq-swap:hover { color: var(--fg); border-color: var(--line-strong); background: var(--surface); }
.qq-actions { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); flex-wrap: wrap; }
.qq-acc {
  display: inline-flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm);
  color: var(--fg-muted); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; transition: all var(--dur-1) var(--ease);
}
.qq-acc:hover { border-color: var(--line-strong); color: var(--fg); }
.qq-acc.on { border-color: var(--attn-line); background: var(--attn-soft); color: var(--attn); }

/* The result rail, price, market comparison, delivery, and the two ways out */
.qq-result {
  margin-top: var(--sp-6); border-top: 1px solid var(--line-faint); padding-top: var(--sp-6);
  animation: jrise 400ms var(--ease) both;
}
.qq-price-row { display: flex; align-items: flex-end; gap: var(--sp-7); flex-wrap: wrap; }
.qq-price { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.qq-market { font-size: var(--fs-sm); color: var(--fg-muted); }
.qq-market s { color: var(--fg-faint); }
.qq-save { color: var(--ok); font-weight: var(--fw-semi); }
.qq-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--fg-muted); }
.qq-meta b { color: var(--fg-1); font-weight: var(--fw-semi); }
.qq-cta { display: flex; gap: var(--sp-5); margin-top: var(--sp-7); flex-wrap: wrap; align-items: center; }
.qq-countdown { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--attn); }

/* Attention strip, what needs you, before you ask */
.attn-strip { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-9); }
.attn-row {
  display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
  transition: all var(--dur-1) var(--ease); text-align: left; width: 100%;
}
.attn-row:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.attn-row-t { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.attn-row-s { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 2px; }

/* Active shipments, compact cards with a live progress rail */
.ship-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--sp-6); }
.ship-card { padding: var(--sp-6); text-align: left; transition: all var(--dur-2) var(--ease); display: block; width: 100%; }
.ship-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.ship-card-id { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }
.ship-card-lane { font-size: var(--fs-md); font-weight: var(--fw-semi); margin-top: var(--sp-3); letter-spacing: var(--tracking-snug); }
.ship-card-meta { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: var(--sp-3); font-family: var(--font-mono); }
.prog { display: flex; gap: 3px; margin-top: var(--sp-6); }
.prog i { height: 3px; flex: 1 1 0; border-radius: 999px; background: var(--surface-active); }
.prog i.done { background: var(--oway-indigo); }
.prog i.now { background: var(--oway-orange); animation: pulse 1.8s var(--ease-in-out) infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
.prog-labels { display: flex; justify-content: space-between; margin-top: var(--sp-4); font-size: var(--fs-2xs); color: var(--fg-faint); }

/* ===== Booking flow, the old four-step order, modernised ================ */
/* Shippers know this shape: pickup, delivery, what's in it, what it costs.
   The steps and the fields are unchanged; only the surface is new. */
.book { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.book-top {
  flex: 0 0 auto; padding: var(--sp-6) var(--gutter);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
}
.book-id { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-faint); }
.steps { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--sp-4); }
.step-btn { display: flex; align-items: center; gap: var(--sp-4); padding: 4px 10px 4px 4px; border-radius: var(--r-pill); transition: background var(--dur-1) var(--ease); }
.step-btn:hover { background: var(--surface); }
.step-n {
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  border: 1px solid var(--line); color: var(--fg-faint); background: var(--bg-elevated);
  transition: all var(--dur-2) var(--ease);
}
.step-l { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-faint); white-space: nowrap; }
.step[data-state="done"] .step-n { background: var(--oway-indigo); border-color: transparent; color: #fff; }
.step[data-state="done"] .step-l { color: var(--fg-muted); }
.step[data-state="now"] .step-n { border-color: var(--attn-line); background: var(--attn-soft); color: var(--attn); }
.step[data-state="now"] .step-l { color: var(--fg-1); font-weight: var(--fw-semi); }
.step-line { width: 22px; height: 1px; background: var(--line); flex: 0 0 auto; }
.step[data-state="done"] + .step-line, .step-line.done { background: var(--oway-indigo); }

.book-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; }
.book-page { padding: var(--sp-9) var(--gutter) var(--sp-10); max-width: 1080px; }
.book-h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.book-sub { font-size: var(--fs-md); color: var(--fg-muted); margin-top: var(--sp-4); max-width: 62ch; line-height: var(--lh-relaxed); }
.book-cols { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: var(--sp-7); margin-top: var(--sp-8); align-items: start; }
.book-nav {
  display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-8);
  padding-top: var(--sp-7); border-top: 1px solid var(--line-faint);
}
.addr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); }
.addr-grid .span2 { grid-column: span 2; }
.addr-grid .span3 { grid-column: span 3; }

/* Hours window, two time pickers with a range feel */
.hours { display: flex; align-items: center; gap: var(--sp-5); }
.hours .input { width: 100%; }
.hours-to { font-size: var(--fs-sm); color: var(--fg-faint); flex: 0 0 auto; }

/* Saved-address picker */
.saved-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.saved-item {
  display: flex; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-sm); text-align: left; width: 100%;
  transition: all var(--dur-1) var(--ease); background: transparent;
}
.saved-item:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.saved-item-n { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.saved-item-a { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; }

/* ── Step 3: the two ways to describe freight ──────────────────────────── */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-8); }
.way {
  padding: var(--sp-7); border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); text-align: left; transition: all var(--dur-2) var(--ease); position: relative; overflow: hidden;
}
.way:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.way[data-on="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.way-tag {
  position: absolute; top: var(--sp-6); right: var(--sp-6);
  font-family: var(--font-mono); font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--attn); border: 1px solid var(--attn-line);
  background: var(--attn-soft); border-radius: var(--r-chip); padding: 2px 7px;
}
.way-t { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.way-d { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--sp-4); line-height: var(--lh-relaxed); }
.way-viz { margin-top: var(--sp-6); }

/* The pallet grid, "how much space do you need?". The single most-loved
   screen in the old app: a truck bed you click, not a form you fill. */
.bed-wrap { margin-top: var(--sp-7); }
.bed-frame { position: relative; padding: 26px 0 26px 34px; }
.bed {
  display: grid; grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(2, auto);
  gap: 5px; padding: 7px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--bg-elevated);
  overflow-x: auto;
}
.bed-cell {
  aspect-ratio: 48 / 40; min-width: 26px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.bed-cell:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.bed-cell[data-on="true"] { background: var(--oway-indigo); border-color: transparent; color: #fff; }
.bed-cell[data-next="true"] { border-color: var(--attn-line); background: var(--attn-soft); }
/* Dimension callipers, the truck's real numbers, drawn like a shop drawing */
.bed-dim {
  position: absolute; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint);
  display: flex; align-items: center; gap: 6px;
}
.bed-dim.top { top: 0; left: 34px; right: 0; }
.bed-dim.top::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
.bed-dim.top::before { content: ''; width: 1px; height: 7px; background: var(--line); }
.bed-dim.left { left: 0; top: 26px; bottom: 26px; flex-direction: column; writing-mode: vertical-rl; }
.bed-dim.left::after { content: ''; flex: 1 1 auto; width: 1px; background: var(--line); }
.bed-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--fg-muted); }
.bed-legend b { color: var(--fg-1); font-family: var(--font-mono); font-weight: var(--fw-semi); }

/* Object list, the traditional way */
.obj-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.obj-item {
  display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
}
.obj-item[data-sel="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.obj-n { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.obj-d { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }
.obj-del { color: var(--fg-faint); display: flex; padding: 4px; border-radius: 6px; transition: all var(--dur-1); }
.obj-del:hover { color: var(--risk); background: var(--risk-soft); }
.cube-hint { display: grid; place-items: center; padding: var(--sp-6); color: var(--fg-faint); }

/* ── Step 4: price breakdown. The old app's best idea, an empty right side,
   because there is nothing hidden to explain. ─────────────────────────── */
.review { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-8); margin-top: var(--sp-8); }
.rev-lines { display: flex; flex-direction: column; gap: var(--sp-6); }
.rev-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); font-size: var(--fs-md); }
.rev-line span:first-child { color: var(--fg-muted); }
.rev-line span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rev-total {
  margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6);
}
.rev-total-l { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.rev-total-v { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.rev-note { font-size: var(--fs-md); color: var(--fg-muted); line-height: var(--lh-relaxed); }
.rev-note + .rev-note { margin-top: var(--sp-6); }
.rev-note b { color: var(--fg-1); font-weight: var(--fw-semi); }

/* Confirmation */
.confirm { display: grid; place-items: center; padding: var(--sp-10) var(--gutter); }
.confirm-card { max-width: 520px; width: 100%; padding: var(--sp-9); text-align: center; }
.confirm-h { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin-top: var(--sp-6); }
.confirm-rows { text-align: left; margin-top: var(--sp-8); display: grid; gap: var(--sp-5); }

/* ===== Orders ============================================================ */
.orders { display: flex; min-height: 0; flex: 1 1 auto; }
.orders-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.orders-toolbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-5) var(--gutter); border-bottom: 1px solid var(--line);
}
.search-wrap { position: relative; flex: 1 1 220px; min-width: 180px; max-width: 380px; }
.search-wrap .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-faint); pointer-events: none; }
.search-field {
  width: 100%; height: 30px; padding: 0 var(--sp-6) 0 32px;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-md); color: var(--fg); transition: border-color var(--dur-1) var(--ease);
}
.search-field::placeholder { color: var(--fg-faint); }
.search-field:focus { outline: none; border-color: var(--focus-border); }
.orders-body { flex: 1 1 auto; min-height: 0; display: flex; }
.orders-table-wrap { flex: 1 1 auto; min-width: 0; overflow: auto; }
.orders-count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }

/* Detail drawer, slides in beside the table, never covers the row you clicked */
.drawer {
  width: 400px; flex: 0 0 auto; border-left: 1px solid var(--line);
  background: var(--bg-elevated); overflow-y: auto;
  animation: slidein 300ms var(--ease);
}
@keyframes slidein { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.drawer-head { padding: var(--sp-7) var(--sp-7) var(--sp-6); border-bottom: 1px solid var(--line-faint); }
.drawer-id { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.drawer-num { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-family: var(--font-mono); }
.drawer-price { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; margin-left: auto; }
.drawer-sec { padding: var(--sp-7); border-bottom: 1px solid var(--line-faint); }
.drawer-sec-t {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--fg-faint); margin-bottom: var(--sp-5);
}
.stop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.stop-n { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.stop-a { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 3px; line-height: var(--lh-body); }
.stop-c { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: var(--sp-4); }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.fact-l { font-size: var(--fs-2xs); color: var(--fg-faint); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.fact-v { font-size: var(--fs-md); font-weight: var(--fw-semi); margin-top: 3px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Vertical milestone timeline */
.tl { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-5); padding-bottom: var(--sp-6); position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--line);
}
.tl-item:last-child::before { display: none; }
.tl-node {
  width: 9px; height: 9px; border-radius: 999px; margin: 5px auto 0;
  background: var(--surface-active); border: 1px solid var(--line-strong); z-index: 1; position: relative;
}
.tl-item[data-state="done"] .tl-node { background: var(--oway-indigo); border-color: transparent; }
.tl-item[data-state="done"]::before { background: var(--oway-indigo); }
.tl-item[data-state="now"] .tl-node { background: var(--oway-orange); border-color: transparent; box-shadow: 0 0 0 4px var(--attn-soft); }
.tl-t { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.tl-item[data-state="todo"] .tl-t { color: var(--fg-faint); }
.tl-s { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 2px; }

/* ===== Tracking, the map is the page =================================== */
.track { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.trackmap { position: absolute; inset: 0; }
.trackmap svg { width: 100%; height: 100%; display: block; }
/* Map ink. Roads are drawn, not tiled, the palette stays on-brand and the
   whole page ships in one file. */
.mp-water { fill: #0c1020; }
.mp-park { fill: rgba(32,162,113,0.07); }
.mp-block { fill: rgba(255,255,255,0.022); }
.mp-road { stroke: rgba(255,255,255,0.07); fill: none; stroke-linecap: round; }
.mp-road.minor { stroke-width: 1; }
.mp-road.major { stroke-width: 2.4; stroke: rgba(255,255,255,0.1); }
.mp-road.hwy { stroke-width: 4; stroke: rgba(246,92,14,0.16); }
.mp-label { fill: var(--fg-faint); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
/* The route: an indigo spine with a travelling highlight. */
.mp-route-base { stroke: rgba(30,0,255,0.28); stroke-width: 7; fill: none; stroke-linecap: round; }
.mp-route { stroke: var(--oway-indigo); stroke-width: 3; fill: none; stroke-linecap: round; }
.mp-route-run {
  stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round;
  stroke-dasharray: 14 260; opacity: 0.9; animation: runner 4.5s linear infinite;
}
@keyframes runner { from { stroke-dashoffset: 274; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-route-run { animation: none; opacity: 0; } }
.mp-pin-hit { cursor: pointer; }
.mp-pin-ring { fill: none; stroke: #fff; stroke-width: 1.5; }
.mp-truck-halo { fill: rgba(246,92,14,0.22); animation: halo 2.4s var(--ease-in-out) infinite; }
@keyframes halo { 0%,100% { opacity: .25; r: 13 } 50% { opacity: .6; r: 18 } }

/* Map overlays */
.track-side {
  position: absolute; top: var(--sp-6); left: var(--sp-6); bottom: var(--sp-6); width: 336px; z-index: 3;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.track-side-head { flex: 0 0 auto; padding: var(--sp-6); border-bottom: 1px solid var(--line-faint); }
.track-side-title { font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
/* Search is the first thing and it is always live, no submit, no dropdown. */
.track-search { position: relative; margin-top: var(--sp-5); }
.track-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-faint); pointer-events: none; }
.track-search input {
  width: 100%; height: 32px; padding: 0 var(--sp-6) 0 32px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-md); color: var(--fg); transition: border-color var(--dur-1) var(--ease);
}
.track-search input::placeholder { color: var(--fg-faint); }
.track-search input:focus { outline: none; border-color: var(--focus-border); }
.track-filters { display: flex; gap: var(--sp-4); margin-top: var(--sp-5); flex-wrap: wrap; }
.track-list { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4); }
.track-item {
  display: block; width: 100%; text-align: left; padding: var(--sp-5);
  border-radius: var(--r-md); border: 1px solid transparent; margin-bottom: var(--sp-3);
  transition: all var(--dur-1) var(--ease);
}
.track-item:hover { background: var(--surface); border-color: var(--line); }
.track-item[data-on="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.track-item-top { display: flex; align-items: center; gap: var(--sp-4); }
.track-item-id { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }
.track-item-lane { font-size: var(--fs-md); font-weight: var(--fw-medium); margin-top: var(--sp-3); letter-spacing: var(--tracking-snug); }
.track-item-meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: var(--sp-3); }

/* Selected shipment card, floats bottom-right of the map */
.track-detail {
  position: absolute; right: var(--sp-6); bottom: var(--sp-6); width: 356px; z-index: 3;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  overflow: hidden; animation: rise var(--dur-3) var(--ease);
}
.track-detail-head { padding: var(--sp-6); border-bottom: 1px solid var(--line-faint); }
.track-detail-body { padding: var(--sp-6); max-height: 40vh; overflow-y: auto; }
.track-eta {
  display: flex; align-items: baseline; gap: var(--sp-4); margin-top: var(--sp-4);
}
.track-eta-v { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.track-detail-foot { display: flex; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--line-faint); }
/* Map controls */
.track-ctrl {
  position: absolute; right: var(--sp-6); top: var(--sp-6); z-index: 3;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.track-ctrl button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--fg-muted); transition: all var(--dur-1); }
.track-ctrl button:hover { background: var(--surface-active); color: var(--fg); }

/* ===== Billing =========================================================== */
.bill-hero { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(3, minmax(0,1fr)); gap: 0; overflow: hidden; }
.bill-bal { padding: var(--sp-8); border-right: 1px solid var(--line-faint); }
.bill-bal-v { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; margin-top: var(--sp-5); line-height: 1; }
.bill-bal-s { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--sp-5); }
.bill-metric { padding: var(--sp-8) var(--sp-7); border-right: 1px solid var(--line-faint); display: flex; flex-direction: column; }
.bill-metric:last-child { border-right: 0; }
.bill-metric-v { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; margin-top: var(--sp-5); }
.bill-metric-s { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: var(--sp-4); }
.bill-delta { font-size: var(--fs-2xs); font-family: var(--font-mono); margin-top: var(--sp-3); }
.bill-delta.up { color: var(--risk); }
.bill-delta.down { color: var(--ok); }

.tabline { display: flex; gap: var(--sp-7); border-bottom: 1px solid var(--line); margin: var(--sp-9) 0 var(--sp-7); }
.tabline button {
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 0 var(--sp-5);
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--fg-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--dur-1) var(--ease);
}
.tabline button:hover { color: var(--fg-muted); }
.tabline button[aria-selected="true"] { color: var(--fg-1); border-bottom-color: var(--oway-orange); font-weight: var(--fw-semi); }

/* Invoice rows, selectable, with a running total that follows selection */
.inv-head, .inv-row {
  display: grid; grid-template-columns: 28px minmax(0,1.1fr) minmax(0,1.4fr) 108px 96px 116px;
  gap: var(--sp-5); align-items: center; padding: var(--sp-5) var(--sp-6);
}
.inv-head {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--fg-faint); border-bottom: 1px solid var(--line);
}
.inv-row { border-bottom: 1px solid var(--line-faint); transition: background var(--dur-1) var(--ease); }
.inv-row:last-child { border-bottom: 0; }
.inv-row:hover { background: var(--bg-hover); }
.inv-row[data-sel="true"] { background: var(--accent-soft); }
.inv-id { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.inv-sub { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 2px; font-family: var(--font-mono); }
.inv-lane { font-size: var(--fs-sm); color: var(--fg-muted); }
.inv-amt { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; text-align: right; }
.inv-act { display: flex; justify-content: flex-end; gap: var(--sp-4); }
.paybar {
  position: fixed; left: 50%; bottom: var(--sp-8); transform: translateX(-50%); z-index: 95;
  display: flex; align-items: center; gap: var(--sp-7);
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  box-shadow: var(--shadow-2); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-8);
  animation: rise var(--dur-2) var(--ease);
}
.paybar-t { font-size: var(--fs-md); white-space: nowrap; }
.paybar-t b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Statement ledger, a running balance, the way an accountant reads it */
.ledger { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.ledger th {
  text-align: left; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--fg-faint); font-weight: var(--fw-semi); padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.ledger td { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line-faint); }
.ledger tr:hover { background: var(--bg-hover); }
.ledger .r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ledger .credit { color: var(--ok); }
.ledger .bal { color: var(--fg-1); font-weight: var(--fw-semi); }

/* Payment methods */
.pm-list { display: grid; gap: var(--sp-5); }
.pm {
  display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.pm[data-default="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.pm-glyph {
  width: 40px; height: 28px; border-radius: 5px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--bg-elevated); border: 1px solid var(--line); color: var(--fg-muted);
}
.pm-n { font-size: var(--fs-md); font-weight: var(--fw-medium); font-family: var(--font-mono); }
.pm-s { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 2px; }

/* ===== Analytics ========================================================= */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-6); }
.metric { padding: var(--sp-7); }
.metric-l { font-size: var(--fs-2xs); color: var(--fg-faint); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.metric-v { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; margin-top: var(--sp-5); }
.metric-s { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: var(--sp-4); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-top: var(--sp-6); }
.spark i { flex: 1 1 0; border-radius: 2px 2px 0 0; background: var(--viz-2); transition: height var(--dur-3) var(--ease); }
.spark i.hi { background: var(--oway-indigo); }
.bars { display: flex; flex-direction: column; gap: var(--sp-5); }
.bar-row { display: grid; grid-template-columns: 168px 1fr 84px; gap: var(--sp-6); align-items: center; font-size: var(--fs-sm); }
.bar-lane { font-family: var(--font-mono); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--oway-indigo); transition: width var(--dur-3) var(--ease); }
.bar-val { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Carbon, the one place green is allowed to be the subject */
.carbon-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: var(--sp-8); align-items: center; }
.carbon-v { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ok); font-variant-numeric: tabular-nums; }
.carbon-compare { display: grid; gap: var(--sp-6); }
.cc-row { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-5); align-items: center; font-size: var(--fs-sm); }
.cc-track { height: 20px; border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.cc-fill { display: block; height: 100%; border-radius: var(--r-sm); }

/* ===== Settings ========================================================== */
.set-sec { padding: var(--sp-8) 0; border-bottom: 1px solid var(--line-faint); }
.set-sec:last-child { border-bottom: 0; }
.set-sec-h { font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.set-sec-d { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--sp-3); max-width: 62ch; line-height: var(--lh-relaxed); }
.set-body { margin-top: var(--sp-6); }
.team-row {
  display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line-faint);
}
.team-row:last-child { border-bottom: 0; }
.team-n { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.team-e { font-size: var(--fs-2xs); color: var(--fg-faint); font-family: var(--font-mono); }

/* ===== Responsive ======================================================== */
@media (max-width: 1100px) {
  :root { --rail-w: 240px; --gutter: var(--sp-7); }
  .book-cols, .review, .carbon-hero { grid-template-columns: minmax(0,1fr); }
  .bill-hero { grid-template-columns: 1fr 1fr; }
  .bill-bal { grid-column: span 2; border-right: 0; border-bottom: 1px solid var(--line-faint); }
  .bill-metric:nth-child(2) { border-right: 1px solid var(--line-faint); }
  .bill-metric:nth-child(3) { border-right: 0; }
  .bill-metric:nth-child(4) { grid-column: span 2; border-top: 1px solid var(--line-faint); border-right: 0; }
  .drawer { width: 340px; }
}
@media (max-width: 900px) {
  .qq-grid { grid-template-columns: 1fr 1fr; }
  .qq-lane { grid-column: span 2; }
  .ways, .juno-prompts { grid-template-columns: 1fr; }
  .home-greet { font-size: var(--fs-2xl); }
  .drawer {
    position: fixed; inset: 0; width: auto; z-index: 120; border-left: 0;
    animation: rise var(--dur-3) var(--ease);
  }
  .track-side { right: 52px; width: auto; bottom: auto; max-height: 34%; }
  .track-detail-body { max-height: 24vh; }
  .track-detail { left: var(--sp-6); right: var(--sp-6); width: auto; }
  .inv-head { display: none; }
  .inv-row { grid-template-columns: 28px 1fr auto; gap: var(--sp-4) var(--sp-5); }
  .inv-lane { grid-column: 2 / -1; }
  .inv-act { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 768px) {
  :root { --gutter: var(--sp-6); }
  .topbar { padding: 0 var(--sp-5); gap: var(--sp-4); }
  .topbar .rail-toggle { display: inline-flex; }
  /* The topbar keeps the brand, search and account. Sample-data and the Juno
     button drop out, the floating orb already carries Juno on small screens. */
  .topbar-right .chip, .topbar-right .btn { display: none; }
  .rail {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 110; width: 280px;
    transform: translateX(-101%); transition: transform 280ms var(--ease);
    box-shadow: var(--shadow-lg);
  }
  #app[data-rail="true"] .rail { transform: none; }
  .rail-scrim { position: fixed; inset: var(--topbar-h) 0 0; z-index: 105; background: var(--bg-scrim); }
  .gsearch { max-width: none; }
  .gsearch-kbd { display: none; }
  .brand-sub { display: none; }
  .bill-hero { grid-template-columns: 1fr; }
  .bill-bal { grid-column: auto; }
  .bill-metric, .bill-metric:nth-child(2) { border-right: 0; border-top: 1px solid var(--line-faint); }
  .bill-metric:nth-child(4) { grid-column: auto; }
  .stop-grid, .fact-grid, .grid2, .grid3, .grid4, .addr-grid { grid-template-columns: 1fr; }
  .addr-grid .span2, .addr-grid .span3 { grid-column: auto; }
  .bar-row { grid-template-columns: 1fr 60px; }
  .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .juno-overlay { padding: 0; }
  .juno-panel { height: 100%; width: 100%; border-radius: 0; border: 0; }
  .juno-dock { right: var(--sp-6); bottom: var(--sp-6); }
  .juno-dock-hint { display: none; }
  .home-greet { font-size: var(--fs-xl); }
  .qq-price, .rev-total-v, .bill-bal-v, .carbon-v { font-size: var(--fs-2xl); }
  .cc-row { grid-template-columns: 72px 1fr auto; }
}
@media (max-width: 560px) {
  .qq-grid { grid-template-columns: 1fr; }
  .qq-lane { grid-column: auto; grid-template-columns: 1fr; }
  .qq-swap { display: none; }
  .ship-cards { grid-template-columns: 1fr; }
  .steps .step-l { display: none; }
  .step-line { width: 12px; }
}
/* ===========================================================================
   V3, Home is the quote tool, Juno and a shipment ticker. The order flow
   floats on top of it in the sunset card. Nothing else on the page.
   ======================================================================== */

/* ---- Home --------------------------------------------------------------- */
.home2 { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.home2-center {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  /* flex-start + auto margins on the child: centres when it fits, scrolls
     from the top when the order card is taller than the window. */
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-8) var(--gutter);
}
.home2-stack { width: 100%; max-width: 880px; margin: auto; }
.home2-stack.wide { max-width: 1080px; }

/* ---- Shipment ticker ---------------------------------------------------- */
.tick {
  flex: 0 0 auto; padding: var(--sp-5) 0 var(--sp-6);
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.28));
}
.tick-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--gutter) var(--sp-5);
}
.tick-n {
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 7px;
}
.tick-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.tick-rail {
  display: flex; width: max-content;
  animation: tickscroll var(--tick-dur, 60s) linear infinite;
}
.tick-viewport:hover .tick-rail, .tick-rail:focus-within { animation-play-state: paused; }
@keyframes tickscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tick-card {
  flex: 0 0 auto; width: 252px; margin-right: 14px; text-align: left;
  padding: 12px 14px 13px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel-fill);
  box-shadow: var(--panel-sheen);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.tick-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.tick-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.tick-id { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }
.tick-lane {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-top: 8px;
  letter-spacing: var(--tracking-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tick-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) { .tick-rail { animation: none; } }

/* ---- The order flow, a clear dark glass card, opened in place --------- */
.bkwrap { width: 100%; position: relative; }
@keyframes bkgrow {
  from { opacity: 0; transform: translateY(14px) scale(0.972); }
  to   { opacity: 1; transform: none; }
}
.bkglass.grow { animation: bkgrow 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) { .bkglass.grow { animation: none; } }

.bkglass {
  position: relative; border-radius: 24px; padding: 22px 22px 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(24,24,29,0.72) 0%, rgba(11,11,14,0.86) 100%);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 30px 90px rgba(0,0,0,0.48), var(--panel-sheen);
  --gx: 12%;
}
/* One hairline of brand gradient along the top edge, the only ornament. */
.bkglass::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent 0%, var(--oway-orange) 22%, var(--oway-indigo) 74%, transparent 100%);
  opacity: 0.9;
}
/* Ambient ember-to-indigo wash that travels as the steps advance. */
.bkglass::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 58% 76% at var(--gx) -12%, rgba(246,92,14,0.15) 0%, transparent 68%),
    radial-gradient(ellipse 66% 84% at calc(100% - var(--gx)) 112%, rgba(30,0,255,0.22) 0%, transparent 70%);
  transition: background 800ms var(--ease);
}
.bkglass[data-step="1"] { --gx: 10%; }
.bkglass[data-step="2"] { --gx: 34%; }
.bkglass[data-step="3"] { --gx: 58%; }
.bkglass[data-step="4"] { --gx: 82%; }
.bkglass[data-step="5"] { --gx: 50%; }
.bkglass > * { position: relative; z-index: 1; }

/* Header strip: what this is, plus the two discreet controls. */
.bkbar { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: 20px; }
.bkid { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }
.bklink {
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--fg-3);
  padding: 5px 11px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent;
}
.bklink:hover { color: var(--fg-1); background: var(--surface); border-color: var(--border-subtle); }
.bkclose {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg-3);
}
.bkclose:hover { background: var(--surface-hover); color: var(--fg-1); }

/* Content panels: hairline borders, no heavy fills. */
.bkrow { display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: 18px; align-items: start; }
.bkrow.solo { grid-template-columns: minmax(0,1fr); }
.bkcard, .bkpanel {
  background: rgba(255,255,255,0.022); border: 1px solid var(--border-subtle);
  border-radius: 18px; box-shadow: var(--panel-sheen);
}
.bkcard { padding: 22px 24px 24px; }
.bkpanel { padding: 18px 20px; }
.bkpanel.center { display: grid; place-items: center; text-align: center; }
.bkhead { display: flex; align-items: flex-start; gap: var(--sp-5); margin-bottom: 18px; }
.bkcard-t { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.bkcard-s { font-size: var(--fs-sm); color: var(--fg-2); margin-top: 5px; }
.bkload {
  flex: 0 0 auto; height: 38px; padding: 0 18px; border-radius: var(--r-pill); display: inline-flex;
  align-items: center; gap: 8px; background: var(--oway-indigo); color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
}
.bkload:hover { background: var(--oway-indigo-hi); }
.bknotes {
  flex: 0 0 auto; height: 38px; padding: 0 18px; border-radius: var(--r-pill); display: inline-flex;
  align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--fg-1); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.bknotes:hover { background: var(--surface-hover); }

/* ---- The timeline, underneath the flow ---------------------------------- */
.tline { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.tline-row { display: flex; align-items: flex-start; }
.tnode {
  flex: 0 0 auto; width: 108px; display: grid; justify-items: center; gap: 9px; text-align: center;
}
.tnode:disabled { cursor: default; }
.tdot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--fg-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  transition: all var(--dur-2) var(--ease);
}
.tdot svg { width: 12px; height: 12px; }
.tnode[data-s="done"] .tdot { background: var(--oway-indigo); border-color: transparent; color: #fff; }
.tnode[data-s="now"] .tdot {
  background: linear-gradient(135deg, var(--oway-orange), var(--oway-indigo));
  border-color: transparent; color: #fff; box-shadow: 0 0 0 4px rgba(30,0,255,0.16);
}
.tlabel {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint); white-space: nowrap;
}
.tnode[data-s="now"] .tlabel { color: var(--fg-1); }
.tnode[data-s="done"] .tlabel { color: var(--fg-2); }
.tbar { flex: 1 1 auto; height: 1px; background: var(--border); margin-top: 13px; min-width: 12px; }
.tbar[data-done="true"] { background: linear-gradient(90deg, var(--oway-orange), var(--oway-indigo)); }
.tcap {
  display: flex; align-items: center; gap: var(--sp-4); margin-top: 16px;
  font-size: var(--fs-2xs); color: var(--fg-faint); font-family: var(--font-mono);
}

/* ---- Actions, under the glass ------------------------------------------ */
.bkfoot { display: flex; align-items: center; gap: 10px; padding: 16px 4px 2px; }
.bkbtn {
  height: 42px; padding: 0 22px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg-1);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); transition: all var(--dur-1) var(--ease);
}
.bkbtn:hover { background: var(--surface-hover); }
.bkbtn.go { background: var(--oway-indigo); border-color: transparent; }
.bkbtn.go:hover { background: var(--oway-indigo-hi); }
.bkbtn.ok { background: var(--oway-green); border-color: transparent; }
.bkbtn.ok:hover { background: var(--oway-green-hi); color: #06231a; }
.bkbtn.ghost { background: transparent; border-color: transparent; color: var(--fg-3); }
.bkbtn.ghost:hover { background: var(--surface); color: var(--fg-1); }
.bkbtn.block { width: 100%; justify-content: center; }
.bkbtn[disabled] { opacity: 0.42; cursor: not-allowed; }
.bkbtn[disabled]:hover { background: var(--surface); }
.bkhint { font-size: var(--fs-2xs); color: var(--fg-faint); }

/* Balance gets its own row so nothing is squeezed. */
.railbal {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
}
.railbal-v {
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
}
.railbal-s { font-size: 10px; color: var(--fg-faint); font-family: var(--font-mono); width: 100%; }

/* ---- Tabbed quotes in the sidebar -------------------------------------- */
.qtabs { display: grid; gap: 6px; }
.qtab {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border-radius: 8px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.02);
  text-align: left; transition: all var(--dur-1) var(--ease); position: relative; overflow: hidden;
}
.qtab::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--oway-orange), var(--oway-indigo));
}
.qtab:hover { background: var(--surface); border-color: var(--border); }
.qtab-b { min-width: 0; flex: 1 1 auto; padding-left: 4px; }
.qtab-l {
  display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qtab-s { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 2px; }
.qtab-x {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  color: var(--fg-faint);
}
.qtab-x:hover { background: var(--surface-active); color: var(--text-danger); }

/* ---- The "another quote" choice ---------------------------------------- */
.nqopt {
  display: flex; align-items: flex-start; gap: var(--sp-5); width: 100%; text-align: left;
  padding: 16px; border-radius: 14px; border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.02); transition: all var(--dur-1) var(--ease);
}
.nqopt + .nqopt { margin-top: 10px; }
.nqopt:hover { border-color: var(--border-strong); background: var(--surface); }
.nqopt-i {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--fg-2);
}
.nqopt:hover .nqopt-i { color: var(--fg-1); }
.nqopt-t { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.nqopt-d { font-size: var(--fs-xs); color: var(--fg-2); margin-top: 4px; line-height: var(--lh-relaxed); }

/* White fields, the point of the design: every value is easy to read. */
.bkgrid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }
.span1 { grid-column: span 1; } .span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
.span4 { grid-column: span 4; } .span5 { grid-column: span 5; } .span6 { grid-column: span 6; }
.wf {
  display: block; background: #F4F2EF; border-radius: 12px; padding: 8px 14px 10px;
  border: 1.5px solid transparent; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  min-width: 0;
}
.wf-l { display: block; font-size: 11px; font-weight: 600; color: #4b5058; letter-spacing: 0.01em; }
.wf-l .req { color: #D93A3A; margin-left: 3px; }
.wf input, .wf select {
  width: 100%; background: transparent; border: 0; outline: 0; padding: 2px 0 0;
  color: #0f1013; font-family: var(--font); font-size: var(--fs-md); font-weight: var(--fw-medium);
}
.wf input.mono, .wf select.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wf input::placeholder { color: #8f949b; font-weight: 400; }
.wf:focus-within { border-color: var(--oway-indigo); box-shadow: 0 0 0 3px rgba(30,0,255,0.22); }
.wf.miss { background: #FBEAEA; }
.wf select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.wf-note { font-size: 11px; color: var(--text-danger); margin-top: 5px; display: block; }
.wf-seg { display: flex; gap: 3px; background: #E4E1DC; border-radius: var(--r-pill); padding: 3px; }
.wf-seg button {
  border-radius: var(--r-pill); padding: 3px 10px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #5c6169;
}
.wf-seg button[data-on="true"] { background: #fff; color: #101114; box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
.wf-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.wf-row > span:first-child { min-width: 0; flex: 1 1 auto; }

/* Side panels inside the frame */
.bkaside { display: grid; gap: 18px; }
.bkpanel-t { font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.bkpanel-n { font-size: var(--fs-xs); color: var(--fg-2); margin-top: 12px; line-height: var(--lh-relaxed); }
.bkpanel-n.warn { color: var(--fg-3); }
.bkhours { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.bkhours label { display: block; }
.bkhours span { display: block; font-size: 11px; font-weight: 600; color: var(--fg-3); margin-bottom: 5px; }
.bkhours input {
  width: 100%; height: 38px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); color: var(--fg-1); padding: 0 10px;
  font-family: var(--font-mono); font-size: var(--fs-sm);
}
.bkhours input:focus { outline: 0; border-color: var(--oway-indigo); box-shadow: 0 0 0 3px rgba(30,0,255,0.20); }
.accs { display: grid; gap: 14px; }
.accr { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: var(--fs-sm); color: var(--fg-1); }
.accr input { position: absolute; opacity: 0; width: 0; height: 0; }
.accb {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); color: transparent; margin-top: 1px;
  transition: all var(--dur-1) var(--ease);
}
.accb svg { width: 11px; height: 11px; }
.accr input:checked + .accb { background: var(--oway-green); border-color: transparent; color: #fff; }
.accr input:focus-visible + .accb { box-shadow: 0 0 0 3px rgba(30,0,255,0.35); }
.accr-hint { display: block; font-size: 11px; color: var(--fg-faint); margin-top: 3px; }

/* Pallet visual */
.pviz { width: 116px; height: 104px; }
.pviz-n { font-size: var(--fs-md); font-weight: var(--fw-semi); margin-top: 12px; }
.pviz-d { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 4px; }
.bkfacts { display: grid; gap: 11px; margin-top: 14px; }
.bkfact { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.bkfact span:first-child { color: var(--fg-2); }
.bkfact span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }

/* Segmented mode switch on step 3 */
.seg2 { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; flex: 0 0 auto; }
.seg2 button {
  border-radius: var(--r-pill); padding: 6px 14px; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  color: var(--fg-2); white-space: nowrap;
}
.seg2 button[data-on="true"] { background: var(--oway-indigo); color: #fff; }

/* Review */
.rv-h { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.rv-edit { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--fg-3); }
.rv-edit:hover { background: var(--surface); color: var(--fg-1); }
.rv-line { display: flex; align-items: flex-start; gap: 11px; margin-top: 12px; font-size: var(--fs-md); }
.rv-line .ico { color: var(--fg-faint); flex: 0 0 auto; margin-top: 3px; }
.rv-line b { font-weight: var(--fw-semi); }
.rv-sub { display: block; color: var(--fg-2); font-size: var(--fs-sm); margin-top: 2px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 12px; font-size: var(--fs-md); }
.rv-chips span { display: inline-flex; align-items: center; gap: 8px; }
.rv-sec { margin-top: 26px; }
.rv-price { display: grid; gap: 10px; margin-top: 16px; }
.rv-pline { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
.rv-pline span:first-child { color: var(--fg-2); }
.rv-pline span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rv-ptotal {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.rv-ptotal b { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rv-note { font-size: var(--fs-xs); color: var(--fg-2); line-height: var(--lh-relaxed); margin-top: 12px; }

/* Confirmation */
.bkconfirm { text-align: center; padding: 34px 30px 30px; }
.bkconfirm-h { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin-top: 18px; }

/* No floating Juno button anymore. */
.juno-dock { display: none !important; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .tnode { width: 84px; }
}
@media (max-width: 1000px) {
  .bkrow { grid-template-columns: minmax(0,1fr); }
  .bkgrid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .span5, .span6 { grid-column: span 4; }
}
@media (max-width: 768px) {
  .topbar .rail-toggle { display: none !important; }
  .rail {
    position: static !important; transform: none !important; width: 64px !important;
    box-shadow: none; z-index: auto;
  }
  .rail .navi-l, .rail .navi-n, .rail .group-head, .rail .railcard,
  .rail .railuser-n, .rail .railuser-s, .rail .railuser .spacer, .rail .railuser .faint { display: none !important; }
  .rail .navi { justify-content: center; padding: 10px; }
  .rail-scroll { padding: 8px 8px 12px; }
  .rail-foot { padding: 8px; }
  .railuser { justify-content: center; padding: 8px; }
  .rail-scrim { display: none !important; }
  .bkglass { padding: 16px 16px 14px; border-radius: 20px; }
  .bkcard, .bkpanel { padding: 18px; border-radius: 14px; }
  .tnode { width: 64px; }
  .tlabel { display: none; }
  .bkgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .span3, .span4, .span5, .span6 { grid-column: span 2; }
  .bkfoot { flex-wrap: wrap; }
  .bkbtn { flex: 1 1 auto; justify-content: center; }
  .tick-card { width: 214px; }
}

/* ===========================================================================
   V4, geographic map, line charts, date range, spreadsheet quotes
   ======================================================================== */

/* Centre the standing pages */
.page { margin-inline: auto; }

/* ---- Geographic map ----------------------------------------------------- */
.geo { width: 100%; height: 100%; display: block; }
.geo-land { fill: rgba(255,255,255,0.018); stroke: var(--border); stroke-width: 1; }
.geo-grid { stroke: rgba(255,255,255,0.035); stroke-width: 0.6; }
.geo-lane { fill: none; stroke: var(--oway-indigo-hi); stroke-width: 1.4; opacity: 0.5; stroke-linecap: round; }
.geo-lane.done { stroke: var(--oway-green); opacity: 0.3; }
.geo-lane.on { stroke: var(--oway-orange); stroke-width: 2.4; opacity: 1; filter: drop-shadow(0 0 6px rgba(246,92,14,0.5)); }
.geo-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
.geo-hit:hover + .geo-lane { opacity: 0.95; stroke-width: 2; }
.geo-node { fill: var(--bg); stroke: var(--oway-indigo-hi); stroke-width: 1.4; }
.geo-node.on { stroke: var(--oway-orange); fill: var(--oway-orange); }
.geo-label {
  fill: rgba(255,255,255,0.62); font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.02em; pointer-events: none;
}
.geo-label.on { fill: #fff; }
.geo-truck { fill: var(--oway-orange); }
.geo-truck-halo { fill: none; stroke: var(--oway-orange); stroke-width: 1; opacity: 0.45; }
.geo-cap {
  fill: rgba(255,255,255,0.30); font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.geo-frame {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border-subtle); background: #08080a; box-shadow: var(--panel-sheen);
}
.geo-frame.tall { height: 340px; }
.geo-frame .geo { position: absolute; inset: 0; }

/* ---- Line charts -------------------------------------------------------- */
.lc { width: 100%; }
.lc svg { width: 100%; height: auto; display: block; overflow: visible; }
.lc-grid { stroke: var(--border-subtle); stroke-width: 1; }
.lc-axis { fill: var(--fg-faint); font-family: var(--font-mono); font-size: 10px; }
.lc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-dot { stroke: var(--bg); stroke-width: 1.5; }
.lc-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-5);
  font-size: var(--fs-2xs); color: var(--fg-2);
}
.lc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lc-key { width: 14px; height: 2px; border-radius: 2px; flex: 0 0 auto; }
.delta {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: var(--sp-5);
  padding: 10px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--chip-green-bd); background: var(--chip-green-bg);
}
.delta-v {
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--text-success); font-variant-numeric: tabular-nums;
}
.delta-l { font-size: var(--fs-2xs); color: var(--fg-2); }

/* ---- Date range picker -------------------------------------------------- */
.rangewrap { position: relative; flex: 0 0 auto; }
.rangebtn {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.rangebtn:hover { background: var(--surface-hover); }
.rangebtn .ic { color: var(--fg-faint); display: flex; }
.rangepanel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 560px;
  display: grid; grid-template-columns: 168px minmax(0,1fr);
  border-radius: 16px; border: 1px solid var(--glass-border); background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: rise var(--dur-3) var(--ease);
}
.rangepresets { padding: 10px; border-right: 1px solid var(--border-subtle); display: grid; gap: 2px; align-content: start; }
.rangepresets button {
  text-align: left; padding: 8px 11px; border-radius: 8px; font-size: var(--fs-xs);
  color: var(--fg-2); white-space: nowrap;
}
.rangepresets button:hover { background: var(--surface); color: var(--fg-1); }
.rangepresets button[data-on="true"] { background: var(--chip-indigo-bg); border: 1px solid var(--chip-indigo-bd); color: #fff; }
.calhead { display: flex; align-items: center; gap: var(--sp-4); padding: 12px 14px 6px; }
.calhead-t { font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.calnav {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  color: var(--fg-3); border: 1px solid var(--border-subtle);
}
.calnav:hover { background: var(--surface); color: var(--fg-1); }
.calgrids { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 14px 14px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.caldow {
  text-align: center; font-family: var(--font-mono); font-size: 9px; color: var(--fg-faint);
  padding-bottom: 4px;
}
.calday {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
}
.calday:hover { background: var(--surface-hover); color: var(--fg-1); }
.calday[data-out="true"] { color: var(--fg-faint); opacity: 0.35; }
.calday[data-in="true"] { background: var(--chip-indigo-bg); color: #fff; border-radius: 0; }
.calday[data-edge="start"] { background: var(--oway-indigo); color: #fff; border-radius: 7px 0 0 7px; }
.calday[data-edge="end"] { background: var(--oway-indigo); color: #fff; border-radius: 0 7px 7px 0; }
.calday[data-edge="both"] { background: var(--oway-indigo); color: #fff; border-radius: 7px; }
.calmonth { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); text-align: center; padding-bottom: 6px; }

/* ---- Juno file drop ----------------------------------------------------- */
.juno-panel { position: relative; }
.jdrop {
  position: absolute; inset: 0; z-index: 5; display: none; place-items: center;
  border-radius: inherit; background: rgba(8,8,11,0.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.juno-panel[data-drag="true"] .jdrop { display: grid; }
.jdrop-in {
  display: grid; place-items: center; gap: 12px; text-align: center;
  padding: 40px 52px; border-radius: 20px; border: 1.5px dashed var(--oway-indigo-hi);
  background: rgba(30,0,255,0.06);
}
.jdrop-t { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
.jdrop-s { font-size: var(--fs-xs); color: var(--fg-2); max-width: 34ch; line-height: var(--lh-relaxed); }
.jattach {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--fg-3); border: 1px solid var(--border-subtle);
}
.jattach:hover { background: var(--surface); color: var(--fg-1); }
.jfile {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs);
}
.jfile-n { font-family: var(--font-mono); }

/* ---- Quotes spreadsheet ------------------------------------------------- */
.tbl td .qstate { font-family: var(--font-mono); font-size: var(--fs-2xs); }
@media (max-width: 900px) {
  .rangepanel { width: min(92vw, 560px); grid-template-columns: 1fr; }
  .rangepresets { border-right: 0; border-bottom: 1px solid var(--border-subtle);
                  grid-template-columns: repeat(3, 1fr); }
  .calgrids { grid-template-columns: 1fr; }
  .calgrids .calwrap:last-child { display: none; }
  .geo-frame.tall { height: 240px; }
}

/* ===========================================================================
   V5, 8px everywhere, a bigger home, the timeline outside the card
   ======================================================================== */

/* Every pill in the app is now an 8px corner. */
:root { --r-pill: 8px; }

/* ---- Home: a little more room, 8px corners, an orange edge on the quote -- */
.home2-stack { max-width: 1000px; }
.home2-stack.wide { max-width: 1180px; }
.home2 .qq {
  border-radius: 8px;
  border: 1px solid rgba(246, 92, 14, 0.55);
  box-shadow: 0 0 0 1px rgba(246, 92, 14, 0.10), 0 18px 50px rgba(246, 92, 14, 0.07), var(--panel-sheen);
}
.home2 .qq:focus-within { border-color: rgba(246, 92, 14, 0.85); }
/* The card's own accent stripe would fight the outline. */
.home2 .qq.accent::before { display: none; }
.home2 .qq .qq-result { border-radius: 8px; }
.juno-bar { border-radius: 8px; }
.juno-suggest, .juno-bar-send, .qq-acc { border-radius: 8px; }

/* ---- Ticker: slower, thinner, plainer ---------------------------------- */
.tick { padding: 10px 0 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.22)); }
.tick-head { padding: 0 var(--gutter) 9px; }
.tick-rail { animation-duration: var(--tick-dur, 150s); }
.tick-card {
  width: auto; margin-right: 0; padding: 0 20px; border: 0; background: none; box-shadow: none;
  border-radius: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap;
  border-right: 1px solid var(--border-subtle);
}
.tick-card:hover { transform: none; background: var(--surface); }
.tick-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.tick-line { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.tick-line .faint { font-weight: 400; }
.tick-val { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }

/* ---- Active shipments: small and plain --------------------------------- */
.railcard { padding: 14px 14px 12px; }
.actrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--fs-xs); color: var(--fg-2); padding: 5px 0;
}
.actrow b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-1); font-weight: 600; }
.railbal { margin-top: 10px; padding-top: 10px; gap: 8px; }
.tag-late {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px;
  background: rgba(229,72,77,0.14); border: 1px solid rgba(229,72,77,0.42);
  color: var(--text-danger); font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---- Order flow: sunset backdrop, timeline outside, corner buttons ----- */
.bkstage { position: relative; }
.bkstage::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset: -26px -34px -18px; border-radius: 28px;
  background: var(--stage-grad); opacity: 0.5; filter: blur(46px);
  transition: background 900ms var(--ease);
}
.bkstage > * { position: relative; z-index: 1; }
.bkstage[data-step="1"] { --stage-grad: linear-gradient(103deg, #3E2BF0 0%, #7A3FD4 55%, #E8735A 100%); }
.bkstage[data-step="2"] { --stage-grad: linear-gradient(103deg, #5B34E8 0%, #9B4FC6 48%, #EE7E62 100%); }
.bkstage[data-step="3"] { --stage-grad: linear-gradient(103deg, #E8735A 0%, #9B4FC6 50%, #3E2BF0 100%); }
.bkstage[data-step="4"] { --stage-grad: linear-gradient(103deg, #1E00FF 0%, #3825FD 44%, #7636D6 100%); }
.bkstage[data-step="5"] { --stage-grad: linear-gradient(103deg, #20A271 0%, #3825FD 52%, #7636D6 100%); }
@media (prefers-reduced-motion: reduce) { .bkstage::before { transition: none; } }

.bkglass, .bkcard, .bkpanel, .wf, .geo-frame, .bklink, .bkclose,
.bkload, .bknotes, .bkbtn, .seg2, .seg2 button, .qtab, .nqopt { border-radius: 8px; }
.bkglass { border-radius: 10px; }

/* The timeline now sits under the card, not inside it. */
.tline {
  margin-top: 16px; padding: 14px 18px; border-top: 0; border-radius: 8px;
  border: 1px solid var(--glass-border); background: rgba(12,12,15,0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tnode { width: auto; flex: 1 1 0; min-width: 0; }
.tnode:disabled .tdot { opacity: 0.5; }

/* Back on the left, next on the right, nothing else competing. */
.bkfoot { justify-content: space-between; padding: 14px 2px 2px; }
.bkfoot-l, .bkfoot-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bkbtn.lg { height: 48px; padding: 0 26px; font-size: var(--fs-md); }
.bkbtn.go.lg { box-shadow: 0 10px 28px rgba(30,0,255,0.30); }

/* ---- Billing: the pay bar centres on the content, not the window ------- */
.paybar { left: calc(50% + (var(--rail-w) / 2)); }
.bill-delta.good {
  color: var(--text-success); font-family: var(--font-mono); font-size: var(--fs-2xs);
  margin-top: var(--sp-4);
}
.bill-neutral { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: var(--sp-4); }

/* ---- Analytics: one card, a 3-up chart grid --------------------------- */
.ana-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.ana-cell {
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 16px;
  background: rgba(255,255,255,0.018); min-width: 0;
}
.ana-cell-t { font-size: var(--fs-sm); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.ana-cell-s { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 3px; }
.ana-cell .lc { margin-top: 12px; }
.ana-cell .lc-legend { font-size: 10px; gap: 6px 12px; margin-bottom: 10px; }
.ana-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden;
}
.ana-metric { padding: 16px 18px; border-right: 1px solid var(--border-subtle); }
.ana-metric:last-child { border-right: 0; }
.ana-metric-l {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
}
.ana-metric-v {
  font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums; margin-top: 8px;
}
.ana-metric-s { font-size: var(--fs-2xs); color: var(--fg-2); margin-top: 5px; }
.ana-metric-s.good { color: var(--text-success); font-family: var(--font-mono); }
@media (max-width: 1100px) {
  .ana-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ana-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ana-metric:nth-child(2) { border-right: 0; }
  .ana-metric:nth-child(3), .ana-metric:nth-child(4) { border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 820px) {
  .ana-grid { grid-template-columns: minmax(0,1fr); }
  .paybar { left: 50%; }
}

/* ===========================================================================
   V6, the welcome, the quote header, accessorial and pallet pickers
   ======================================================================== */

.hello {
  text-align: center; color: #fff; font-weight: var(--fw-bold);
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08;
  letter-spacing: -0.03em; margin: 0 auto var(--sp-8); max-width: 22ch;
}

/* No orange bloom, just the line. */
.home2 .qq { box-shadow: var(--panel-sheen); }
.qq-h {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-bold); color: #fff;
  letter-spacing: -0.02em; line-height: 1.1;
}

/* ---- Accessorials grid -------------------------------------------------- */
.accgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px;
  margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line-faint);
}
.acctile {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; text-align: left;
  border: 1px solid var(--border-subtle); border-radius: 8px; background: rgba(255,255,255,0.015);
  transition: all var(--dur-1) var(--ease); min-width: 0;
}
.acctile:hover { border-color: var(--border-strong); background: var(--surface); }
.acctile[data-on="true"] { border-color: var(--oway-indigo); background: var(--chip-indigo-bg); }
.acctile-b {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center;
  border: 1px solid var(--border-strong); color: transparent; margin-top: 1px;
}
.acctile-b svg { width: 10px; height: 10px; }
.acctile[data-on="true"] .acctile-b { background: var(--oway-indigo); border-color: transparent; color: #fff; }
.acctile-n { font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.acctile-f { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 3px; }
.acchead {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line-faint);
}

/* ---- Pallet type grid --------------------------------------------------- */
.dimhint {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint);
  border: 1px dashed var(--border); border-radius: 6px; padding: 2px 7px;
  transition: all var(--dur-1) var(--ease);
}
.dimhint:hover { color: var(--fg-1); border-color: var(--oway-orange); border-style: solid; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pltgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.plttile {
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 14px;
  background: rgba(255,255,255,0.015); min-width: 0;
}
.plttile-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.plttile-n {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-faint);
}
.plttile-x { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--fg-faint); }
.plttile-x:hover { background: var(--surface-active); color: var(--text-danger); }
.pltdims { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.mini { display: block; min-width: 0; }
.mini-l {
  display: block; font-size: 10px; font-weight: 600; color: var(--fg-3); margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.mini input {
  width: 100%; height: 34px; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--border); color: var(--fg-1); padding: 0 9px;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.mini input:focus { outline: 0; border-color: var(--oway-indigo); box-shadow: 0 0 0 3px rgba(30,0,255,0.20); }
.pltadd {
  border: 1px dashed var(--border); border-radius: 8px; display: grid; place-items: center;
  gap: 8px; padding: 20px; color: var(--fg-3); min-height: 140px;
}
.pltadd:hover { border-color: var(--oway-indigo); color: var(--fg-1); background: var(--chip-indigo-bg); }
.plttotal {
  display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6);
  padding-top: var(--sp-5); border-top: 1px solid var(--line-faint);
  font-size: var(--fs-sm); color: var(--fg-2);
}
.plttotal b { font-family: var(--font-mono); color: var(--fg-1); }
@media (max-width: 700px) {
  .accgrid, .pltgrid { grid-template-columns: minmax(0,1fr); }
  .hello { font-size: clamp(24px, 7vw, 34px); }
}

/* ===========================================================================
   V6b, bare timeline, actions inside the card, simpler order details
   ======================================================================== */

/* No card of its own, and the live step is orange. */
.tline {
  margin: 0 0 18px; padding: 0; border: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.tcap { display: none; }
.tnode[data-s="now"] .tdot {
  background: var(--oway-orange); box-shadow: 0 0 0 4px rgba(246,92,14,0.18);
}
.tnode[data-s="now"] .tlabel { color: var(--oway-orange-hi, #FF7A33); }
.tbar[data-done="true"] { background: var(--oway-orange); opacity: 0.75; }
.tnode[data-s="done"] .tdot { background: rgba(246,92,14,0.28); color: #fff; }

/* Actions live inside the card, below the content row. */
.bkactions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-subtle);
}
.bkactions-l, .bkactions-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bkrow.withfoot { align-items: stretch; }

/* Order details: the pallet groups, and the glass pane that edits specs */
.grpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; margin-top: 16px; }
.specbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 8px; border: 1px dashed var(--border); background: transparent;
  color: var(--fg-2); font-size: var(--fs-xs); font-family: var(--font-mono);
}
.specbtn:hover { border-style: solid; border-color: var(--oway-orange); color: var(--fg-1); }
.uniline {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
}

/* ===========================================================================
   V6c, orders panel, tracking overlay, collapsible rail, mobile
   ======================================================================== */

/* ---- Collapsible rail --------------------------------------------------- */
.rail-collapse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 32px; margin-bottom: 8px; border-radius: 8px;
  border: 1px solid var(--border-subtle); color: var(--fg-faint); font-size: 10px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.rail-collapse:hover { background: var(--surface); color: var(--fg-1); }
#app[data-mini="true"] .rail { width: 68px; }
#app[data-mini="true"] .navi-l,
#app[data-mini="true"] .navi-n,
#app[data-mini="true"] .group-head,
#app[data-mini="true"] .railcard .actrow span:first-child,
#app[data-mini="true"] .railuser-n,
#app[data-mini="true"] .railuser-s,
#app[data-mini="true"] .railuser .spacer,
#app[data-mini="true"] .railuser > span:last-child,
#app[data-mini="true"] .qtab-b .qtab-s,
#app[data-mini="true"] .rail-collapse span { display: none; }
#app[data-mini="true"] .navi { justify-content: center; padding: 10px; }
#app[data-mini="true"] .rail-scroll { padding: 0 8px 12px; }
#app[data-mini="true"] .rail-foot { padding: 8px; }
#app[data-mini="true"] .railuser { justify-content: center; padding: 8px; }
#app[data-mini="true"] .railcard { padding: 10px 8px; text-align: center; }
#app[data-mini="true"] .railcard .eyebrow { display: none; }
#app[data-mini="true"] .actrow { justify-content: center; padding: 3px 0; }
#app[data-mini="true"] .tag-late { font-size: 9px; padding: 2px 5px; }
#app[data-mini="true"] .qtab-l { font-size: 10px; text-align: center; }
#app[data-mini="true"] .qtab-x { display: none; }

/* ---- Orders: the detail is a full-width bottom panel ------------------- */
.orders-body { flex-direction: column; }
.orders-table-wrap { flex: 1 1 auto; min-height: 0; }
.opanel {
  flex: 0 0 auto; height: 50%; min-height: 300px; display: flex; flex-direction: column;
  border-top: 1px solid var(--line); background: var(--bg-elevated);
  animation: opanelin 280ms var(--ease);
}
@keyframes opanelin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.opanel-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--gutter); border-bottom: 1px solid var(--line-faint);
}
.opanel-num { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.opanel-lane { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.opanel-price {
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
/* Documents sit at the top and are colour-coded so they read at a glance. */
.docrow { display: flex; flex-wrap: wrap; gap: 8px; }
.docbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border-radius: 8px; font-size: var(--fs-xs); font-weight: var(--fw-semi); border: 1px solid;
}
.docbtn.bol { color: #8FA0FF; border-color: rgba(56,37,253,0.5); background: rgba(56,37,253,0.14); }
.docbtn.bol:hover { background: rgba(56,37,253,0.26); }
.docbtn.lbl { color: #FFA478; border-color: rgba(246,92,14,0.5); background: rgba(246,92,14,0.14); }
.docbtn.lbl:hover { background: rgba(246,92,14,0.26); }
.docbtn.trk { color: #5FD9A8; border-color: rgba(32,162,113,0.5); background: rgba(32,162,113,0.14); }
.docbtn.trk:hover { background: rgba(32,162,113,0.26); }
.opanel-grid {
  flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.05fr);
  gap: 0; overflow: hidden;
}
.opanel-col {
  padding: var(--sp-6) var(--sp-7); border-right: 1px solid var(--line-faint);
  min-width: 0; overflow: auto;
}
.opanel-col:last-child { border-right: 0; }
.opanel-t {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: var(--sp-5);
}
.opanel-foot {
  flex: 0 0 auto; display: flex; gap: 8px; padding: var(--sp-5) var(--gutter);
  border-top: 1px solid var(--line-faint);
}
.tl.compact .tl-item { padding-bottom: 12px; }
.tl.compact .tl-s { font-size: 10px; }

/* ---- Tracking: bigger search overlay, collapsing list ----------------- */
.track-side {
  top: var(--sp-6); left: var(--sp-6); bottom: auto; max-height: calc(100% - var(--sp-8) * 2);
  transition: width var(--dur-3) var(--ease);
}
.track-side[data-mini="true"] { width: 250px; }
.track-side[data-mini="true"] .track-item-meta { display: none; }
.track-side[data-mini="true"] .track-item { padding: 9px 11px; }
.track-side[data-mini="true"] .track-item-lane { font-size: var(--fs-xs); margin-top: 2px; }
.track-side[data-mini="true"] .track-list { max-height: 210px; }
.track-list { max-height: 58vh; }
.trackbar {
  position: absolute; left: 50%; bottom: var(--sp-7); transform: translateX(-50%); z-index: 4;
  width: min(560px, calc(100% - var(--sp-8) * 2));
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: 10px; box-shadow: var(--shadow-2);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
}
.trackbar .ic { color: var(--fg-faint); display: flex; flex: 0 0 auto; }
.trackbar input {
  flex: 1 1 auto; min-width: 0; height: 34px; background: transparent; border: 0; outline: 0;
  color: var(--fg-1); font-size: var(--fs-md);
}
.trackbar input::placeholder { color: var(--fg-faint); }
.trackbar-n { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); flex: 0 0 auto; }
.track-detail { bottom: calc(var(--sp-7) + 76px); }
.track-detail-foot { border-top: 0; border-bottom: 1px solid var(--line-faint); }

/* ---- Analytics on glass ------------------------------------------------ */
.ana-cell, .ana-metrics {
  background: var(--glass); border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ana-metric { border-right-color: var(--glass-border); }

/* ---- Billing: methods use the full column ----------------------------- */
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pm-wide { display: grid; gap: 20px; }

/* ---- Active shipments, clickable -------------------------------------- */
.actrow {
  width: 100%; border-radius: 6px; padding: 6px 8px; margin: 0 -8px;
  transition: background var(--dur-1) var(--ease);
}
.actrow:hover { background: var(--surface); color: var(--fg-1); }
.actrow.on { background: var(--chip-indigo-bg); }
.balbtn { display: block; width: 100%; text-align: left; }
.balbtn:hover .tag-late { filter: brightness(1.25); }

/* ---- Mobile: stack, don't squash -------------------------------------- */
@media (max-width: 1080px) {
  .opanel-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .opanel-col:nth-child(2) { border-right: 0; }
  .opanel-col:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--line-faint); }
}
@media (max-width: 860px) {
  .track-side { position: static; width: auto; margin: var(--sp-5); max-height: 40vh; }
  .track-detail { position: static; width: auto; margin: 0 var(--sp-5) var(--sp-5); }
  .track { overflow: auto; display: flex; flex-direction: column; }
  .trackmap { height: 42vh; flex: 0 0 auto; }
  .trackbar { position: static; transform: none; width: auto; margin: 0 var(--sp-5) var(--sp-5); }
  .track-ctrl { top: var(--sp-5); right: var(--sp-5); }
}
@media (max-width: 768px) {
  .rail { width: 64px !important; }
  .rail-collapse { display: none; }
}

/* ===========================================================================
   V6d, team departments
   ======================================================================== */
.deptwrap { display: grid; gap: 16px; }
.dept {
  border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.dept[data-over="true"] { border-color: var(--oway-indigo); background: var(--chip-indigo-bg); }
.dept-head {
  display: flex; align-items: center; gap: var(--sp-4); padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle); background: rgba(255,255,255,0.02);
}
.dept-n { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.dept-c { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }
.dept-body { padding: 10px; display: grid; gap: 8px; min-height: 62px; }
.dept-empty {
  font-size: var(--fs-xs); color: var(--fg-faint); text-align: center; padding: 14px;
  border: 1px dashed var(--border-subtle); border-radius: 6px;
}
.member {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 6px;
  border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.015); cursor: grab;
}
.member:hover { border-color: var(--border-strong); background: var(--surface); }
.member[data-dragging="true"] { opacity: 0.4; }
.member-grip { color: var(--fg-faint); display: flex; flex: 0 0 auto; }
.member-n { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.member-e { font-size: 10px; color: var(--fg-faint); font-family: var(--font-mono); }
.deptadd { display: flex; gap: 8px; align-items: center; }
.deptadd input {
  flex: 1 1 auto; min-width: 0; height: 36px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); color: var(--fg-1); padding: 0 12px; font-size: var(--fs-sm);
}
.deptadd input:focus { outline: 0; border-color: var(--oway-indigo); }
@media (max-width: 700px) {
  .member { flex-wrap: wrap; }
  .deptadd { flex-wrap: wrap; }
}

/* ===========================================================================
   V7, accordion rail, brighter green, gradient hover, layout repairs
   ======================================================================== */

/* Spotify-bright green throughout. */
:root {
  --oway-green:    #1DB954;
  --oway-green-hi: #1ED760;
  --chip-green-bg: rgba(29,185,84,0.13);
  --chip-green-bd: rgba(29,185,84,0.34);
}

/* ---- Rail collapses like an accordion --------------------------------- */
.rail {
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.rail-scroll, .rail-foot { transition: padding 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.navi-l, .group-head, .railuser-n, .railuser-s, .qtab-s, .rail-collapse span {
  transition: opacity 180ms var(--ease);
}
#app[data-mini="true"] .rail { width: 64px; }
/* Collapsed: the shipments card and the quote subtitles go away rather than
   getting squeezed into unreadable slivers. */
#app[data-mini="true"] .railcard { display: none; }
#app[data-mini="true"] .qtab { justify-content: center; padding: 8px 4px; }
#app[data-mini="true"] .qtab-b { padding-left: 0; text-align: center; }
#app[data-mini="true"] .qtab-l { display: none; }
#app[data-mini="true"] .qtab::after {
  content: attr(data-n); font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--fg-2);
}
#app[data-mini="true"] .qtab::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; }
#app[data-mini="true"] .navi-ic { margin: 0 auto; }
#app[data-mini="true"] .rail-collapse { border-color: transparent; }

/* Never offer the toggle where the rail is already forced to icons. */
@media (max-width: 1024px) { .rail-collapse { display: none !important; } }

/* ---- Quick quote: the dim chip must never touch the weight field ------- */
.qq-grid > .field, .qq-grid > .qq-lane { min-width: 0; }
.field-row { flex-wrap: nowrap; gap: 8px; min-width: 0; overflow: hidden; }
.field-row .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dimhint { flex: 0 0 auto; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }

/* Gradient ring on hover, over the orange line. */
.home2 .qq { position: relative; }
.home2 .qq::after {
  content: ''; position: absolute; inset: -1px; border-radius: 9px; padding: 1px;
  background: linear-gradient(104deg, var(--oway-orange) 0%, #7636D6 46%, var(--oway-indigo-hi) 74%, var(--oway-orange) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 260ms var(--ease); pointer-events: none;
}
.home2 .qq:hover::after, .home2 .qq:focus-within::after { opacity: 1; }

/* ---- Order details: fields must not stretch to fill the row ----------- */
.bkgrid { align-items: start; }
.bkgrid > .wf, .bkgrid > label, .bkgrid > button { align-self: start; }
.wf { height: auto; }
.wf-row { align-items: center; }
.bkrow { align-items: start; }
.bkcard { display: flex; flex-direction: column; }
.bkcard > .bkactions { margin-top: auto; }

/* ---- Timeline at the bottom, nav buttons with Load Address ----------- */
.tline { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border-subtle); }

/* ===========================================================================
   V7b, tracking as a docked panel, spreadsheet billing
   ======================================================================== */

/* ---- Tracking: a solid bar down the left, cells like My Orders -------- */
.track { display: flex; }
.trackmap { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.track-dock {
  position: relative; flex: 0 0 auto; width: 380px; z-index: 3;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line); background: var(--bg-elevated);
}
.track-dock-head {
  flex: 0 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--line-faint);
}
.track-dock-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.tsearch { position: relative; margin-top: var(--sp-5); }
.tsearch .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-faint); display: flex; }
.tsearch input {
  width: 100%; height: 38px; padding: 0 34px 0 34px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg-1); font-size: var(--fs-md);
}
.tsearch input:focus { outline: 0; border-color: var(--oway-indigo); box-shadow: 0 0 0 3px rgba(30,0,255,0.18); }
.tsearch-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.track-cells { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tcell {
  display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 0 12px; align-items: center;
  width: 100%; text-align: left; padding: 13px var(--sp-6);
  border-bottom: 1px solid var(--line-faint); transition: background var(--dur-1) var(--ease);
}
.tcell:hover { background: var(--surface); }
.tcell[data-on="true"] { background: var(--accent-soft); }
.tcell[data-on="true"] .tcell-bar { background: var(--oway-orange); }
.tcell-bar { width: 3px; height: 30px; border-radius: 2px; background: var(--border-strong); }
.tcell-id { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }
.tcell-lane {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcell-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcell-r { text-align: right; }
.tcell-eta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); margin-top: 5px; }
.track-detail { right: var(--sp-6); bottom: var(--sp-6); }

#app[data-mini="true"] .paybar { left: calc(50% + 32px); }
.tbl td .check, .tbl th .check { margin: 0; }
.tbl .actcol { width: 1%; white-space: nowrap; }
.btn.ok.sm { color: #05130a; font-weight: var(--fw-semi); }
.btn.ok { color: #05130a; }
.btn.ok:hover { background: var(--oway-green-hi); }

/* ---- Billing tables --------------------------------------------------- */
.inv-head, .inv-row { display: none !important; }
.tbl .credit { color: var(--text-success); }
.tbl .bal { font-weight: var(--fw-semi); }
@media (max-width: 1024px) {
  .track { flex-direction: column; }
  .track-dock { width: auto; border-right: 0; border-bottom: 1px solid var(--line); max-height: 46vh; }
  .trackmap { height: 44vh; flex: 0 0 auto; }
  .track-detail { position: static; width: auto; margin: var(--sp-5); }
  .paybar { left: 50% !important; width: calc(100% - var(--sp-7) * 2); justify-content: center; }
}

/* ===========================================================================
   V7c, billing spreadsheets, the command palette
   ======================================================================== */
.tblcard { overflow: hidden; }
.tblwrap { overflow-x: auto; }
.tbl-toolbar {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line-faint);
}
.tbl-count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint); }

/* ---- Command palette --------------------------------------------------- */
.gpanel { max-height: min(70vh, 560px); overflow-y: auto; }
.gsec {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-faint);
  padding: 10px var(--sp-6) 5px; position: sticky; top: 0; background: var(--glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gres-kbd { display: flex; gap: 3px; flex: 0 0 auto; margin-left: auto; }
.ghelp {
  display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px var(--sp-6) 12px;
  border-top: 1px solid var(--line-faint); font-size: 10px; color: var(--fg-faint);
}
.ghelp span { display: inline-flex; align-items: center; gap: 5px; }

/* ===========================================================================
   V7d, tablet reads as mobile for everything except the sidebar
   ======================================================================== */

/* The content rules that used to start at 768px now start at 1024px. The
   sidebar keeps its own thresholds so it never becomes a hamburger again. */
@media (max-width: 1024px) {
  .opanel { height: auto; max-height: 62%; }
  .opanel-grid { grid-template-columns: minmax(0,1fr); }
  .opanel-col, .opanel-col:nth-child(2), .opanel-col:nth-child(3) {
    grid-column: auto; border-right: 0; border-top: 1px solid var(--line-faint);
  }
  .opanel-head { flex-wrap: wrap; row-gap: 8px; }
  .bill-hero { grid-template-columns: minmax(0,1fr); }
  .bill-bal, .bill-metric { grid-column: auto !important; border-right: 0;
    border-top: 1px solid var(--line-faint); }
  .pm-grid { grid-template-columns: minmax(0,1fr); }
  .bkrow { grid-template-columns: minmax(0,1fr) !important; }
  .bkactions { flex-direction: column-reverse; align-items: stretch; }
  .bkactions-l, .bkactions-r { flex-direction: column; align-items: stretch; }
  .bkactions .bkbtn { width: 100%; justify-content: center; }
  .bkhint { text-align: center; }
  .view-head, .orders-toolbar, .tbl-toolbar { flex-wrap: wrap; row-gap: 10px; }
  .search-wrap { flex: 1 1 100%; }
  .fact-grid, .stop-grid, .grid2, .metric-grid, .ana-grid, .ana-metrics,
  .accgrid, .pltgrid, .grpgrid, .bkgrid, .qq-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .ana-metric { border-right: 0 !important; border-top: 1px solid var(--glass-border); }
  .bkgrid > * { grid-column: auto !important; }
  .qq-lane { grid-column: auto !important; }
  .pltdims { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .modal, .modal.wide { width: 96vw; }
  .rangepanel { width: min(94vw, 520px); grid-template-columns: minmax(0,1fr); right: auto; left: 0; }
  .rangepresets { border-right: 0; border-bottom: 1px solid var(--border-subtle);
    grid-template-columns: repeat(3, minmax(0,1fr)); }
  .calgrids { grid-template-columns: minmax(0,1fr); }
  .calgrids .calwrap:last-child { display: none; }
  .hello { font-size: clamp(26px, 6vw, 34px); }

  /* Tables read as stacked cards rather than squeezed columns. */
  .tbl thead { display: none; }
  .tbl tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 5px 12px; padding: 13px var(--gutter); border-bottom: 1px solid var(--line-faint);
  }
  .tbl tbody td { border: 0; padding: 0; min-width: 0; }
  .tbl tbody td.r { text-align: left; }
  .tbl tbody td.actcol { grid-column: span 2; display: flex; gap: 8px; }
  .ledger tbody tr { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===========================================================================
   V8, keyboard basics, glass pages, the API link, profile menu
   ======================================================================== */

/* One visible focus ring everywhere, and only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--oway-indigo-hi);
  outline-offset: 2px; border-radius: 8px;
}
.tbl tbody tr:focus-visible { outline-offset: -2px; }

/* Rows behave like rows: tab to them, Enter opens, arrows move. */
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr[data-focus="true"] { background: var(--surface); }

/* ---- Collapsed rail hides the quote tabs outright ------------------- */
#app[data-mini="true"] .qtabs { display: none; }

/* ---- Billing and analytics on the same glass as the order flow ------- */
.glassy .card {
  background: linear-gradient(180deg, rgba(24,24,29,0.66) 0%, rgba(11,11,14,0.82) 100%);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), var(--panel-sheen);
}
.glassy .bill-bal, .glassy .bill-metric { border-color: var(--glass-border); }
.glassy .tbl-toolbar, .glassy .tbl thead th, .glassy .tbl td { border-color: var(--glass-border); }

/* ---- Quick quote: label and footprint chip share one row -------------
   The chip is fixed-size and never shrinks or wraps; if the row runs short
   it is the label that ellipsises, because the chip is the thing you click. */
.field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-width: 0; flex-wrap: nowrap; margin-bottom: var(--sp-3);
}
.field-row .label {
  margin: 0; min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dimhint {
  flex: 0 0 auto; display: inline-block; white-space: nowrap; max-width: none;
  border: 1px solid rgba(56,37,253,0.55); border-radius: 6px;
  background: rgba(56,37,253,0.10); color: #A9B4FF;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.5;
  padding: 2px 7px; letter-spacing: -0.01em;
}
.dimhint:hover { border-color: var(--oway-indigo-hi); background: rgba(56,37,253,0.22); color: #fff; }

/* The box carries the state, so the input must not draw its own ring. */
.juno-bar-input:focus, .juno-bar-input:focus-visible { outline: none; box-shadow: none; }

/* ---- Juno bar: hollow gradient ring, blue glow when engaged --------- */
.orb.hollow::after {
  content: ''; position: absolute; inset: 26%; border-radius: 999px;
  background: var(--bg-elevated);
}
.juno-bar:focus-within, .juno-bar[data-live="true"] {
  border-color: var(--oway-indigo-hi);
  box-shadow: 0 0 0 3px rgba(56,37,253,0.20),
              0 0 34px -4px rgba(56,37,253,0.55),
              var(--panel-sheen);
  transform: none;
}
/* The conic ring and the blue glow would fight each other. */
.juno-bar:focus-within::before, .juno-bar[data-live="true"]::before { opacity: 0; }
.juno-bar-input { font-size: var(--fs-md); }

/* ---- Topbar: API link and the profile menu -------------------------- */
.apilink {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px;
  border-radius: 8px; border: 1px solid var(--border-subtle); flex: 0 0 auto;
  font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--fg-2);
  white-space: nowrap; text-decoration: none;
}
.apilink:hover { border-color: var(--oway-orange); color: var(--fg-1); background: rgba(246,92,14,0.1); }
.apilink .icon { color: var(--oway-orange); }
.pwrap { position: relative; flex: 0 0 auto; }
.pmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: 236px;
  border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: rise var(--dur-3) var(--ease);
}
.pmenu-head { padding: 13px 14px; border-bottom: 1px solid var(--border-subtle); }
.pmenu-n { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.pmenu-e { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 3px; }
.pmenu-body { padding: 6px; display: grid; gap: 2px; }
.pmenu-i {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 7px; font-size: var(--fs-xs); color: var(--fg-1);
}
.pmenu-i:hover { background: var(--surface); }
.pmenu-i .icon { color: var(--fg-faint); }
.pmenu-i.danger { color: var(--text-danger); }
.pmenu-i.danger:hover { background: rgba(229,72,77,0.12); }
.pmenu-i .kbd { margin-left: auto; }

/* Sign out sits with the profile at the foot of the rail. */
.railfoot-row { display: flex; gap: 6px; align-items: stretch; }
.railfoot-row .railuser { flex: 1 1 auto; min-width: 0; }
.signout {
  flex: 0 0 auto; width: 38px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--border-subtle); color: var(--fg-faint);
}
.signout:hover { border-color: rgba(229,72,77,0.5); color: var(--text-danger); background: rgba(229,72,77,0.1); }
#app[data-mini="true"] .railfoot-row { flex-direction: column; }
#app[data-mini="true"] .signout { width: 100%; height: 32px; }

/* ---- Keyboard shortcuts page ---------------------------------------- */
.keys { display: grid; gap: 26px; max-width: 620px; }
.keygroup-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 10px;
}
.keyrow {
  display: flex; align-items: center; gap: var(--sp-5); padding: 9px 0;
  border-bottom: 1px solid var(--line-faint); font-size: var(--fs-sm);
}
.keyrow:last-child { border-bottom: 0; }
.keyrow .spacer { flex: 1 1 auto; }
.keyrow-k { display: flex; gap: 4px; flex: 0 0 auto; }

/* ---- Orders: payment reads to the right of price ------------------- */
.tbl td.money-cell, .tbl th.money-cell,
.tbl td.pay-cell, .tbl th.pay-cell { text-align: center; }
.tbl td.pay-cell .chip { display: inline-flex; }
@media (max-width: 1024px) {
  .tbl td.money-cell, .tbl td.pay-cell { text-align: left; }
  .apilink { display: none; }
}

/* ===========================================================================
   V8b, tracking on glass, booking accessorials, pickup scheduling
   ======================================================================== */

/* ---- Tracking dock: dark glass, roomier cells ----------------------- */
.track-dock {
  background: linear-gradient(180deg, rgba(20,20,25,0.72) 0%, rgba(10,10,13,0.86) 100%);
  border-right: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.track-dock-head { border-bottom-color: var(--glass-border); }
.tsearch input { background: rgba(0,0,0,0.32); border-color: var(--glass-border); }

.tcell {
  grid-template-columns: 3px minmax(0,1fr); gap: 0 12px; align-items: start;
  padding: 12px var(--sp-6); border-bottom-color: var(--glass-border);
}
.tcell-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tcell-id { flex: 0 0 auto; }
.tcell .chip { font-size: 9px; padding: 1px 6px; flex: 0 0 auto; }
.tcell-lane { margin-top: 5px; }
.tcell-foot {
  display: flex; align-items: baseline; gap: 8px; margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); min-width: 0;
}
.tcell-foot .eta { color: var(--fg-2); margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.tcell-bar { height: 100%; min-height: 40px; }

/* ---- Booking accessorials as a grid --------------------------------- */
.bkacc {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 12px;
}
.bkacc .acctile { padding: 10px 11px; }
.bkacc .acctile-n { font-size: 11px; }

/* ---- Pickup timing pane --------------------------------------------- */
.pickseg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pickbtn {
  display: grid; gap: 4px; padding: 11px 12px; border-radius: 8px; text-align: left;
  border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.015); min-width: 0;
}
.pickbtn:hover { border-color: var(--border-strong); background: var(--surface); }
.pickbtn[data-on="true"] { border-color: var(--oway-orange); background: rgba(246,92,14,0.12); }
.pickbtn-t { font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.pickbtn-s { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }
.pickbtn[data-on="true"] .pickbtn-s { color: #FFB48C; }
.pickcal {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height 380ms cubic-bezier(0.22,1,0.36,1), opacity 260ms var(--ease), margin-top 380ms var(--ease);
}
.pickcal[data-open="true"] { max-height: 330px; opacity: 1; margin-top: 12px; }
.pickcal-in {
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px;
  background: rgba(0,0,0,0.24);
}
.pickcal .calgrid { gap: 2px; }
.pickcal .calday { font-size: 10px; border-radius: 6px; }
.pickcal .calday[data-off="true"] { opacity: 0.22; pointer-events: none; }
.pickcal .calday[data-pick="true"] { background: var(--oway-orange); color: #170801; font-weight: 700; }
@media (max-width: 1024px) {
  .bkacc, .pickseg { grid-template-columns: minmax(0,1fr); }
}

/* ===========================================================================
   V9, centred search, glass modals, appointments
   ======================================================================== */

/* Search sits in the true centre of the window, not the leftover space. */
.topbar { position: relative; }
.gsearch {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100% - 620px)); max-width: 560px; margin: 0; flex: 0 0 auto;
}
@media (max-width: 1180px) {
  .gsearch { position: static; transform: none; flex: 1 1 auto; width: auto; margin: 0 auto; }
}

/* Tabbed quotes simplify rather than squash as the window narrows. */
@media (max-width: 1240px) {
  .qtab-s { display: none; }
  .qtab-l { font-size: 10px; }
}
@media (max-width: 1120px) {
  .qtabs .qtab { justify-content: center; padding: 8px 4px; }
  .qtabs .qtab-l { display: none; }
  .qtabs .qtab-b { padding-left: 0; text-align: center; }
  .qtabs .qtab::after {
    content: attr(data-n); font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--fg-2);
  }
  .qtabs .qtab-x { display: none; }
  .qtabs + .group .group-head, .group-head { }
}

/* ---- Modals: centred, and on the same glass as everything else ------- */
.scrim { align-items: center; padding: var(--sp-7); backdrop-filter: blur(6px); }
.modal {
  max-height: min(84vh, 900px); margin: auto;
  background: linear-gradient(180deg, rgba(24,24,29,0.86) 0%, rgba(11,11,14,0.94) 100%);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 40px 110px rgba(0,0,0,0.6), var(--panel-sheen);
}
.modal.xwide { width: min(1060px, 95vw); }
.modal-head, .modal-foot { border-color: var(--glass-border); }

/* ---- Quick quote: dims above, label below, one box ------------------- */
.field-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin-bottom: var(--sp-3); min-width: 0;
}
.field-row .label { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line-faint);
}

/* ---- Booking: the address card matches the accessorial column ------- */
.bkrow { align-items: stretch; }
.bkaside { display: flex; flex-direction: column; gap: 18px; }
.bkaside > .bkpanel:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.bkaside > .bkpanel:last-child .bkacc { flex: 1 1 auto; align-content: start; }
.bkaside > .bkpanel:last-child .bkpanel-n { margin-top: auto; padding-top: 12px; }
.bkcard { height: 100%; }

/* ---- Appointments ---------------------------------------------------- */
.aptgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.aptbox {
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 14px;
  background: rgba(255,255,255,0.018); min-width: 0; display: flex; flex-direction: column;
}
.aptbox-t {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 12px;
}
.aptcal .calgrid { gap: 2px; }
.aptcal .calday { font-size: 10px; border-radius: 6px; }
.aptcal .calday[data-off="true"] { opacity: 0.2; pointer-events: none; }
.aptcal .calday[data-pick="true"] { background: var(--oway-indigo); color: #fff; font-weight: 700; }
.aptslots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.aptslot {
  padding: 6px 4px; border-radius: 6px; border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
}
.aptslot:hover { border-color: var(--border-strong); color: var(--fg-1); }
.aptslot[data-on="true"] { background: var(--oway-indigo); border-color: transparent; color: #fff; }
.aptdrop {
  flex: 1 1 auto; display: grid; place-items: center; gap: 8px; text-align: center;
  min-height: 130px; padding: 16px; border-radius: 8px;
  border: 1.5px dashed var(--border); color: var(--fg-3); transition: all var(--dur-1) var(--ease);
}
.aptdrop[data-over="true"], .aptdrop:hover {
  border-color: var(--oway-indigo-hi); background: rgba(56,37,253,0.08); color: var(--fg-1);
}
.aptdrop-t { font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.aptdrop-s { font-size: 10px; color: var(--fg-faint); line-height: var(--lh-relaxed); }
.aptfiles { display: grid; gap: 6px; margin-top: 10px; }
.aptfile {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px;
  border: 1px solid var(--border-subtle); background: var(--surface);
  font-family: var(--font-mono); font-size: 10px; min-width: 0;
}
.aptfile span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aptfile button { margin-left: auto; color: var(--fg-faint); flex: 0 0 auto; }
.aptfile button:hover { color: var(--text-danger); }
.aptfields { display: grid; gap: 12px; }
.aptfields textarea {
  width: 100%; min-height: 92px; resize: vertical; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--border); color: var(--fg-1); padding: 9px 10px;
  font-family: var(--font); font-size: var(--fs-sm); line-height: var(--lh-relaxed);
}
.aptfields textarea:focus { outline: 0; border-color: var(--oway-indigo); box-shadow: 0 0 0 3px rgba(30,0,255,0.18); }

/* Appointment summary wherever an order is previewed */
.aptsum { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.aptcard {
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px 13px;
  background: rgba(255,255,255,0.015); min-width: 0;
}
.aptcard-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.aptcard-l {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint);
}
.aptcard-r { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-xs); padding: 3px 0; }
.aptcard-r span:first-child { color: var(--fg-3); flex: 0 0 84px; }
.aptcard-r span:last-child { min-width: 0; }
.aptnone { font-size: var(--fs-xs); color: var(--fg-faint); }
@media (max-width: 1024px) {
  .aptgrid, .aptsum { grid-template-columns: minmax(0,1fr); }
}

/* ===========================================================================
   V10, topbar anchoring, black modals, appointment grid, denser accessorials
   ======================================================================== */

/* The right cluster stays right no matter what sits to its left. */
.topbar-right { margin-left: auto; flex: 0 0 auto; }
.apilink { margin-left: var(--sp-4); }

/* ---- Modals: plain black ------------------------------------------- */
.modal {
  background: #08080a;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 40px 110px rgba(0,0,0,0.7);
  border-color: var(--border-strong);
}
.modal.xwide { width: min(1100px, 96vw); }
.modal-head, .modal-foot { border-color: var(--border); }

/* ---- Appointment modal: three panels, side by side ----------------- */
.aptgrid { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; }
.aptbox { background: rgba(255,255,255,0.022); }
.aptbox-n {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
  background: var(--oway-indigo); color: #fff; font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; margin-right: 7px;
}
.aptbox-t { display: flex; align-items: center; }
@media (max-width: 880px) { .aptgrid { grid-template-columns: minmax(0,1fr); } }

/* ---- Quick quote: the footprint chip rides the action row ---------- */
.field-row { display: contents; }
.qq-actions { flex-wrap: wrap; }
.qq-actions .dimhint { margin-left: 2px; }

/* ---- Accessorials grow in columns, never past three rows ----------- */
.bkrow { grid-template-columns: minmax(0,1fr) 340px; }
.bkacc { grid-template-columns: repeat(var(--acc-cols, 2), minmax(0,1fr)); gap: 7px; }
.bkacc[data-cols="3"] { gap: 6px; }
.bkacc[data-cols="3"] .acctile { padding: 8px 8px; gap: 7px; }
.bkacc[data-cols="3"] .acctile-b { width: 15px; height: 15px; border-radius: 4px; }
.bkacc[data-cols="3"] .acctile-b svg { width: 9px; height: 9px; }
.bkacc[data-cols="3"] .acctile-n { font-size: 10px; line-height: 1.3; }
.bkacc[data-cols="3"] .acctile-f { font-size: 9px; margin-top: 2px; }
.bkacc .acctile-n { display: block; }

/* ---- Order details: even field heights, toggle outside the field --- */
.wf-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf.tight .wf-l { font-size: 10px; letter-spacing: 0; }
.segline { display: flex; align-items: center; gap: 8px; }
.segline .wf-seg { background: var(--surface); border: 1px solid var(--border); }
.segline .wf-seg button { color: var(--fg-3); }
.segline .wf-seg button[data-on="true"] { background: var(--oway-indigo); color: #fff; box-shadow: none; }
.segline-l { font-size: 10px; color: var(--fg-faint); font-family: var(--font-mono); }

/* ---- Requote picker ------------------------------------------------ */
.rqsearch { position: relative; margin-bottom: 14px; }
.rqsearch .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-faint); display: flex; }
.rqsearch input {
  width: 100%; height: 38px; padding: 0 12px 0 34px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg-1); font-size: var(--fs-md);
}
.rqsearch input:focus { outline: 0; border-color: var(--oway-indigo); box-shadow: 0 0 0 3px rgba(30,0,255,0.18); }
.rqlist { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
.rqrow {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; align-items: center;
  padding: 12px 13px; border-radius: 8px; border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.015);
}
.rqrow:hover { border-color: var(--border-strong); background: var(--surface); }
.rqrow-lane { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.rqrow-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.rqrow-price {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  text-align: right; white-space: nowrap;
}
.rqrow-price s { color: var(--fg-faint); font-weight: 400; }
.rqrow-act { display: flex; gap: 6px; flex: 0 0 auto; }
.rqzero { text-align: center; padding: 28px 10px; color: var(--fg-faint); font-size: var(--fs-sm); }
@media (max-width: 700px) {
  .rqrow { grid-template-columns: minmax(0,1fr); }
  .rqrow-price { text-align: left; }
}


/* ===========================================================================
   V11, blue-edged modals, orange selection, inline dims, confirm step
   ======================================================================== */

/* ---- Modals wear a blue edge so they read as a layer above the app ----- */
.modal {
  border: 1px solid var(--oway-indigo-hi);
  box-shadow: 0 0 0 1px rgba(56,37,253,0.28),
              0 0 60px -12px rgba(56,37,253,0.55),
              0 40px 110px rgba(0,0,0,0.66);
}
.modal-head, .modal-foot { border-color: rgba(56,37,253,0.34); }
.modal-head { background: linear-gradient(180deg, rgba(56,37,253,0.10), transparent); }

/* ---- Anything chosen turns orange -------------------------------------- */
.acctile[data-on="true"] {
  border-color: var(--oway-orange); background: rgba(246,92,14,0.12);
}
.acctile[data-on="true"] .acctile-b {
  background: var(--oway-orange); border-color: transparent; color: #fff;
}
.acctile[data-on="true"] .acctile-n { color: var(--fg-1); }
.aptslot[data-on="true"] { background: var(--oway-orange); border-color: transparent; color: #fff; }
.aptcal .calday[data-pick="true"] { background: var(--oway-orange); color: #fff; }
.calday[data-pick="true"] { background: var(--oway-orange); color: #fff; }
.segline .wf-seg button[data-on="true"] { background: var(--oway-orange); color: #fff; }
.accr input:checked + .accb { background: var(--oway-orange); border-color: transparent; }
.saved-item:hover, .rqrow:hover { border-color: var(--oway-orange); }
.chip.eta {
  background: rgba(246,92,14,0.14); border-color: rgba(246,92,14,0.5); color: var(--oway-orange-hi);
}

/* ---- Quick quote: the footprint hangs off the pallet count ------------- */
.pltfield { display: flex; flex-direction: column; }
.pltfield .dimhint {
  align-self: flex-start; margin-top: 6px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.qq-actions { margin-top: var(--sp-5); }

/* ---- Accessorials: two columns, smaller type -------------------------- */
.accgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.accgrid .acctile { padding: 9px 10px; gap: 8px; }
.accgrid .acctile-n { font-size: 11px; line-height: 1.35; }
.accgrid .acctile-f { font-size: 9px; margin-top: 2px; }
.accgrid .acctile-b { width: 15px; height: 15px; border-radius: 4px; }
.accgrid .acctile-b svg { width: 9px; height: 9px; }
.bkacc { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.bkacc .acctile { padding: 9px 9px; gap: 8px; }
.bkacc .acctile-n { font-size: 10.5px; line-height: 1.3; }
.bkacc .acctile-f { font-size: 9px; margin-top: 2px; }
.bkacc .acctile-b { width: 15px; height: 15px; border-radius: 4px; }
.bkacc .acctile-b svg { width: 9px; height: 9px; }
@media (max-width: 720px) {
  .accgrid, .bkacc { grid-template-columns: minmax(0,1fr); }
}

/* ---- Order details: the footprint is typed, not opened ---------------- */
.dimrow {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle);
}
.dimrow-l {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--fg-faint);
}
.dimtrio { display: flex; align-items: center; gap: 6px; }
.dimx { color: var(--fg-faint); font-size: 11px; }
.dimcell {
  display: flex; align-items: center; gap: 6px; padding: 0 9px; height: 36px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.dimcell:focus-within { border-color: var(--oway-orange); box-shadow: 0 0 0 3px rgba(246,92,14,0.20); }
.dimcell-l {
  font-size: 10px; font-weight: 700; color: var(--oway-orange-hi);
  font-family: var(--font-mono); width: 9px;
}
.dimcell input {
  width: 46px; background: none; border: 0; outline: 0; padding: 0; color: var(--fg-1);
  font-family: var(--font-mono); font-size: var(--fs-sm); text-align: right;
}
.dimcell-u { font-size: 10px; color: var(--fg-faint); font-family: var(--font-mono); }

/* ---- Review: the verify panel sits on the floor of the glass ---------- */
.rv-col { display: flex; flex-direction: column; min-width: 0; }
.rv-verify { margin-top: auto; }
.bkrow.solo .bkcard { display: flex; flex-direction: column; }
.bkrow.solo .bkcard > .bkrow { flex: 1 1 auto; align-items: stretch; }

/* ---- Confirm shipment modal ------------------------------------------- */
.cfgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.cfbox {
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 13px;
  background: rgba(255,255,255,0.018); min-width: 0;
}
.cfbox-t {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 10px;
}
.cfaddr { display: grid; gap: 2px; margin-bottom: 10px; font-size: var(--fs-xs); }
.cfaddr b { font-size: var(--fs-sm); }
.cfaddr span { color: var(--fg-3); }
.cfrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--fs-xs); padding: 4px 0; border-top: 1px solid var(--line-faint);
}
.cfrow > span:first-child { color: var(--fg-faint); }
.cfrow > span:last-child { text-align: right; font-family: var(--font-mono); }
.cfrow.total {
  margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.cfrow.total > span:first-child { color: var(--fg-1); }
.cfeta { color: var(--oway-orange-hi); }
.cfwarn {
  margin-top: 14px; border: 1px solid rgba(246,92,14,0.4); border-radius: 8px;
  background: rgba(246,92,14,0.07); padding: 12px 14px;
}
.cfwarn-t {
  display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--oway-orange-hi); margin-bottom: 8px;
}
.cfwarn ul { margin: 0; padding-left: 16px; display: grid; gap: 5px; }
.cfwarn li { font-size: var(--fs-xs); color: var(--fg-2); line-height: var(--lh-normal); }
@media (max-width: 900px) { .cfgrid { grid-template-columns: minmax(0,1fr); } }

/* ===========================================================================
   V12, one quote row, toggleable appointments, mobile tables, paperwork
   ======================================================================== */

/* ---- Global search: the icons belong to the bar, not the page ---------
   The narrow-window rule used to drop the bar to position:static, which sent
   its absolutely-positioned icon and shortcut to the corners of the topbar. */
@media (max-width: 1180px) {
  .gsearch { position: relative; transform: none; flex: 1 1 auto; width: auto; margin: 0 auto; }
}

/* ---- Quick quote: four fields on one line, footprint hung beneath ------
   The chip is taken out of flow so the pallet cell stays exactly as tall as
   its neighbours; the grid reserves the space it drops into. */
.qq-grid {
  grid-template-columns: 1fr 1fr 104px 116px;
  align-items: end; padding-bottom: 20px;
}
.pltfield { position: relative; display: block; }
.pltfield .dimhint {
  position: absolute; top: calc(100% + 3px); left: 0; margin: 0;
  font-size: 9px; line-height: 1.5; padding: 1px 6px; white-space: nowrap;
}
.qq-actions { margin-top: var(--sp-4); }
@media (max-width: 900px) {
  /* Once the grid wraps, the hanging chip needs room between rows too. */
  .qq-grid { grid-template-columns: 1fr 1fr; row-gap: 26px; }
}

/* ---- Appointment tiles carry their own way back in -------------------- */
.acctile { position: relative; }
.acctile-edit {
  position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 5px; color: var(--fg-faint);
  border: 1px solid transparent; transition: all var(--dur-1) var(--ease);
}
.acctile-edit:hover { color: #fff; background: var(--oway-orange); border-color: transparent; }
.acctile[data-on="true"] .acctile-n { padding-right: 20px; }
.bkpanel-n.attn { color: var(--oway-orange-hi); }

/* ---- Order details: the footprint rides along with the switch --------- */
.uniline { gap: var(--sp-5); row-gap: 10px; }
.uniline .switch { flex: 0 1 auto; }
.dimtrio { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.dimx { color: var(--fg-faint); font-size: 10px; }
.dimunit { color: var(--fg-faint); font-size: 10px; font-family: var(--font-mono); margin-left: 2px; }
.dimcell {
  display: flex; align-items: center; gap: 5px; padding: 0 7px; height: 30px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.dimcell:focus-within { border-color: var(--oway-orange); box-shadow: 0 0 0 2px rgba(246,92,14,0.22); }
.dimcell-l { font-size: 9px; font-weight: 700; color: var(--oway-orange-hi); font-family: var(--font-mono); }
.dimcell input {
  width: 30px; background: none; border: 0; outline: 0; padding: 0; color: var(--fg-1);
  font-family: var(--font-mono); font-size: var(--fs-xs); text-align: right;
}
.dimcell-u { display: none; }

/* ---- Review: the price stands on its own, the CTAs stack -------------- */
.rv-cta { display: grid; gap: 8px; margin-top: 18px; }
.bkbtn.block { width: 100%; justify-content: center; }

/* ---- Confirm modal: read-back and attestation ------------------------- */
.cfsplit { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 20px; }
.cfnotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cfnotes li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); line-height: var(--lh-normal); }
.cfnote-i { flex: 0 0 auto; display: flex; margin-top: 1px; }
.cfnotes li[data-kind="warn"] { color: var(--fg-1); }
.cfnotes li[data-kind="warn"] .cfnote-i { color: var(--oway-orange-hi); }
.cfnotes li[data-kind="ok"] { color: var(--fg-2); }
.cfnotes li[data-kind="ok"] .cfnote-i { color: var(--text-success); }
.cfnotes li[data-kind="info"] { color: var(--fg-3); }
.cfnotes li[data-kind="info"] .cfnote-i { color: var(--fg-faint); }
.cfattest {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.02);
}
.btn.primary[disabled] { opacity: 0.4; pointer-events: none; }
@media (max-width: 640px) { .cfsplit { grid-template-columns: minmax(0,1fr); } }

/* ---- Document chips ---------------------------------------------------- */
.docchips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.docchip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border-radius: 6px; font-size: 10px; font-weight: var(--fw-semi); border: 1px solid;
  white-space: nowrap; transition: all var(--dur-1) var(--ease);
}
.docchip.sm { height: 24px; padding: 0 8px; font-size: 9.5px; }
.docchip.inv { color: #8FA0FF; border-color: rgba(56,37,253,0.5); background: rgba(56,37,253,0.13); }
.docchip.inv:hover { background: rgba(56,37,253,0.26); }
.docchip.bol { color: #FFA478; border-color: rgba(246,92,14,0.5); background: rgba(246,92,14,0.13); }
.docchip.bol:hover { background: rgba(246,92,14,0.26); }
.docchip.pod { color: #5FD9A8; border-color: rgba(32,162,113,0.5); background: rgba(32,162,113,0.13); }
.docchip.pod:hover { background: rgba(32,162,113,0.26); }
.docchip[data-off="true"] {
  color: var(--fg-faint); border-color: var(--border-subtle);
  background: transparent; opacity: 0.55; cursor: default;
}
.docchip[data-off="true"]:hover { background: transparent; }

/* ---- Bulk download options -------------------------------------------- */
.dlopts { display: grid; gap: 8px; }
.dlopt {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px;
  background: rgba(255,255,255,0.018); transition: all var(--dur-1) var(--ease);
}
.dlopt:hover { border-color: var(--oway-orange); background: rgba(246,92,14,0.07); }
.dlopt-i { flex: 0 0 auto; display: flex; color: var(--fg-faint); }
.dlopt:hover .dlopt-i { color: var(--oway-orange-hi); }
.dlopt-n { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.dlopt-s { display: block; font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 2px; }
.dlopt-c {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--fg-2); background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 2px 9px;
}
.dlopt[data-off="true"] { opacity: 0.4; pointer-events: none; }

/* ---- Card fallbacks for tables on narrow screens ---------------------- */
.qcards, .invcards { display: none; }
.qcard, .invcard {
  border-bottom: 1px solid var(--line-faint); padding: var(--sp-6);
  display: grid; gap: 10px;
}
.qcard:last-child, .invcard:last-child { border-bottom: 0; }
.qcard-h, .invcard-h { display: flex; align-items: center; gap: 10px; }
.qcard-id, .invcard-id { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; }
.qcard-lane, .invcard-lane { font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: var(--lh-tight); }
.qcard-meta, .invcard-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fg-faint);
}
.qcard-price { display: flex; align-items: baseline; gap: 10px; }
.qcard-amt { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.qcard-mkt { font-size: var(--fs-2xs); color: var(--fg-faint); display: grid; }
.invcard-amt { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.invcard-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.invcard-act .btn, .qcard .btn.block { width: 100%; justify-content: center; height: 40px; }
.qcard[data-expired="true"] .qcard-amt { color: var(--fg-faint); }

@media (max-width: 860px) {
  .cardable .tbl, .tblcard.cardable .tblwrap { display: none; }
  .qcards, .invcards { display: block; }
  .orders-table-wrap.cardable { overflow: visible; }
  .paybar {
    left: 50% !important; width: calc(100% - var(--sp-6) * 2);
    flex-wrap: wrap; row-gap: 8px; justify-content: center; padding: 12px;
  }
  .paybar .btn { flex: 1 1 auto; justify-content: center; }
  .paybar-t { flex: 1 1 100%; text-align: center; }
}

/* ---- Billing hero and tabs on a phone --------------------------------- */
@media (max-width: 700px) {
  .tabline button { white-space: nowrap; }
  .tbl-toolbar { flex-wrap: wrap; row-gap: 8px; }
}

/* ---- Tracking: no map on a phone, just the list and the detail -------- */
@media (max-width: 1024px) {
  .track { flex-direction: column; overflow-y: auto; }
  .track-dock { width: auto; border-right: 0; border-bottom: 1px solid var(--line); max-height: none; }
  .track-cells { max-height: 42vh; overflow-y: auto; }
  .trackmap { height: auto; flex: 1 1 auto; }
  .trackmap-canvas, .track-ctrl { display: none; }
  .track-detail {
    position: static; width: auto; margin: 0; border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0; max-height: none;
  }
  .track-detail-foot { flex-wrap: wrap; }
  .track-detail-foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===========================================================================
   V13, Juno as a home view, due-date gating, re-rating
   ======================================================================== */

/* ---- Juno is a page now, not a dialog --------------------------------
   It still lives outside #app so a re-render never wipes the thread, but it
   is inset to the content column so it reads as the other half of home. */
.juno-overlay {
  position: fixed; top: var(--topbar-h); left: var(--rail-w); right: 0; bottom: 0;
  inset: var(--topbar-h) 0 0 var(--rail-w);
  z-index: 60; padding: 0; align-items: stretch; justify-content: stretch;
  background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
}
#app[data-mini="true"] ~ #layers .juno-overlay { left: 64px; }
.juno-panel {
  width: 100%; height: 100%; border-radius: 0; border: 0;
  box-shadow: none; transform: translateY(10px); opacity: 0;
  background: linear-gradient(180deg, rgba(23,24,29,0.5), rgba(10,10,11,0.2));
}
.juno-overlay[data-on="true"] .juno-panel { transform: none; opacity: 1; }

/* The back button carries the same weight as the Juno mark opposite it. */
.jback {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 9px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--fg-2); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  margin-right: var(--sp-4); flex: 0 0 auto; transition: all var(--dur-1) var(--ease);
}
.jback:hover { border-color: var(--oway-orange); color: var(--fg-1); background: rgba(246,92,14,0.08); }

.juno-page { flex: 1 1 auto; min-height: 0; display: flex; }
.juno-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.juno-main .juno-scroll { flex: 1 1 auto; min-height: 0; }

/* ---- The week of chats ------------------------------------------------ */
.juno-hist {
  flex: 0 0 auto; width: 300px; min-width: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--line-faint); background: rgba(0,0,0,0.22);
}
.juno-hist-h { flex: 0 0 auto; padding: var(--sp-6); border-bottom: 1px solid var(--line-faint); }
.juno-hist-t {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--fg-faint); margin-bottom: 10px;
}
.jhsearch { position: relative; }
.jhsearch .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-faint); display: flex; }
.jhsearch input {
  width: 100%; height: 34px; padding: 0 10px 0 32px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg-1); font-size: var(--fs-sm);
}
.jhsearch input:focus { outline: 0; border-color: var(--oway-indigo); box-shadow: 0 0 0 3px rgba(30,0,255,0.18); }
.juno-hist-list { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-7); }
.jhist-day {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint); padding: 12px 8px 6px;
}
.jhist-i {
  display: grid; width: 100%; text-align: left; gap: 3px; padding: 10px 11px;
  border-radius: 8px; border: 1px solid transparent; position: relative;
  transition: all var(--dur-1) var(--ease);
}
.jhist-i:hover { background: var(--surface); border-color: var(--border-subtle); }
.jhist-i[data-on="true"] { background: rgba(246,92,14,0.10); border-color: var(--oway-orange); }
.jhist-t {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--fg-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 40px;
}
.jhist-p {
  font-size: 10px; color: var(--fg-faint); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jhist-w {
  position: absolute; top: 10px; right: 11px;
  font-family: var(--font-mono); font-size: 9px; color: var(--fg-faint);
}
.jhist-zero { padding: 22px 12px; font-size: var(--fs-xs); color: var(--fg-faint); text-align: center; }

@media (max-width: 1100px) { .juno-hist { display: none; } }
@media (max-width: 1024px) {
  .juno-overlay { inset: var(--topbar-h) 0 0 0; }
  #app[data-mini="true"] ~ #layers .juno-overlay { left: 0; }
}

/* ---- The home bar glows blue on hover, same as when it is engaged ----- */
.juno-bar:hover {
  border-color: var(--oway-indigo-hi);
  box-shadow: 0 0 0 3px rgba(56,37,253,0.20),
              0 0 34px -4px rgba(56,37,253,0.55),
              var(--panel-sheen);
  transform: translateY(-1px);
}
.juno-bar:hover::before { opacity: 0; }

/* ---- Re-rate note on review ------------------------------------------- */
.rv-rerate {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  padding: 9px 11px; border-radius: 8px; font-size: var(--fs-2xs); line-height: var(--lh-normal);
  border: 1px solid rgba(246,92,14,0.45); background: rgba(246,92,14,0.08); color: var(--fg-2);
}
.rv-rerate[data-dir="down"] {
  border-color: rgba(32,162,113,0.45); background: rgba(32,162,113,0.08);
}
.rv-rerate svg { flex: 0 0 auto; margin-top: 1px; }

/* ---- Upcoming balance reads differently from a late one --------------- */
.tag-soon {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs);
  font-family: var(--font-mono); color: var(--fg-2);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 9px;
  background: var(--surface);
}

/* ===========================================================================
   V14, the bar morphs into the page, one weight, centred search
   ======================================================================== */

/* ---- The glow belongs to the bar, never to the field inside it -------- */
.juno-bar-input,
.juno-bar-input:focus,
.juno-bar-input:focus-visible,
.juno-bar-input:focus-within {
  outline: 0 !important; box-shadow: none !important; border: 0 !important;
  background: none !important;
}
.juno-input, .juno-input:focus, .juno-input:focus-visible {
  outline: 0 !important; box-shadow: none !important;
}

/* ---- Home: the greeting and the quote card stand aside ---------------- */
.home2-stack > * {
  transition: opacity 220ms var(--ease), transform 260ms var(--ease), filter 220ms var(--ease);
}
.home2-stack[data-leaving="true"] > .hello,
.home2-stack[data-leaving="true"] > .card.qq {
  opacity: 0; transform: translateY(-14px) scale(0.985); filter: blur(2px); pointer-events: none;
}
.home2-stack[data-leaving="true"] .juno-suggests {
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
.home2-stack[data-leaving="true"] .juno-bar {
  opacity: 0; transition-delay: 60ms;
}

/* ---- Juno: clipped to the bar, then released to the whole page -------- */
.juno-overlay[data-morph="start"] {
  clip-path: inset(var(--m-top) var(--m-right) var(--m-bottom) var(--m-left) round 999px);
}
.juno-overlay[data-morph="run"] {
  clip-path: inset(0 0 0 0 round 0px);
  transition: clip-path 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
.juno-overlay[data-morph="start"] .juno-panel,
.juno-overlay[data-morph="run"] .juno-panel { transform: none; }
/* Contents wait for the frame to arrive before they appear. */
.juno-overlay[data-morph="start"] .juno-head,
.juno-overlay[data-morph="start"] .juno-page,
.juno-overlay[data-morph="run"] .juno-head,
.juno-overlay[data-morph="run"] .juno-page { opacity: 0; }
.juno-overlay[data-morph="run"] .juno-head { transition: opacity 240ms var(--ease) 260ms; opacity: 1; }
.juno-overlay[data-morph="run"] .juno-page { transition: opacity 260ms var(--ease) 320ms; opacity: 1; }
.juno-head, .juno-page { transition: opacity 200ms var(--ease); }

/* ---- The search stays in the middle of the window at every width ------
   It is taken out of flow so the centre is the window's centre, not the
   centre of whatever space is left over beside the brand. */
.gsearch {
  position: absolute; left: 50%; transform: translateX(-50%);
  flex: 0 0 auto; margin: 0; width: min(560px, calc(100% - 620px));
}
@media (max-width: 1180px) {
  .gsearch { position: absolute; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 430px)); }
}
@media (max-width: 900px) {
  .gsearch { width: min(320px, calc(100% - 300px)); }
}
@media (max-width: 620px) {
  /* Too narrow to centre anything: the field simply takes the space left. */
  .gsearch { position: relative; left: auto; transform: none; flex: 1 1 auto; width: auto; margin-left: var(--sp-5); }
}

/* ---- The derived total reads as derived ------------------------------- */
/* The locked total is a real number you can click to take control of. */
.wf:has(.wf-locked) { cursor: pointer; }
.wf:has(.wf-locked):hover { border-color: var(--oway-orange); }
.wf .wf-locked { cursor: pointer; color: #3c4149; }
.wf:has(.wf-locked)::after {
  content: 'from your pallet groups'; display: block;
  font-size: 9px; color: #7b818a; margin-top: 1px; letter-spacing: 0.01em;
}

/* ===========================================================================
   V15, appointments need a date, sales scheduling, Juno in the rail
   ======================================================================== */

/* ---- A half-set appointment is not a thing we let you have ------------ */
.apthint { font-size: var(--fs-2xs); color: var(--oway-orange-hi); margin-right: 10px; }
.btn.primary[disabled], .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ---- The quick-quote appointment tiles carry a scheduler ------------- */
.accgrid .acctile-edit { top: 4px; right: 4px; }

/* ---- Topbar: sales sits where Juno used to ---------------------------- */
.sales-btn { border-color: rgba(246,92,14,0.5); color: var(--oway-orange-hi); }
.sales-btn:hover { background: rgba(246,92,14,0.12); border-color: var(--oway-orange); }
.sales-btn .icon { color: var(--oway-orange); }

/* ---- Talk to Sales ---------------------------------------------------- */
.salehero { margin-bottom: 18px; }
.salehero-t {
  font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug); margin-bottom: 14px; max-width: 60ch;
}
.salegrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.saleval {
  display: flex; gap: 10px; padding: 11px 12px; min-width: 0;
  border: 1px solid var(--border-subtle); border-radius: 9px;
  background: rgba(255,255,255,0.018);
}
.saleval-i { flex: 0 0 auto; display: flex; color: var(--oway-orange-hi); margin-top: 1px; }
.saleval-t { font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.saleval-d { font-size: 10px; color: var(--fg-faint); line-height: 1.45; margin-top: 3px; }

.salestep {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; margin-bottom: 12px; border-top: 1px solid var(--line-faint);
  font-size: var(--fs-xs); color: var(--fg-2);
}
.salestep-n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
  background: var(--oway-orange); color: #fff; font-size: 10px; font-weight: 700;
  font-family: var(--font-mono);
}
.salestep b { color: var(--fg-1); }

.salecal.solo { max-width: 340px; margin: 0 auto 6px; }
.salecal .calday[data-pick="true"] { background: var(--oway-orange); color: #fff; font-weight: 700; }
.salecal .calday[data-off="true"] { opacity: 0.22; pointer-events: none; }

.salebook { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 18px; align-items: start; }
.saletimes {
  border: 1px solid var(--border-subtle); border-radius: 9px; padding: 12px;
  background: rgba(255,255,255,0.018);
}
.saletimes-h {
  font-size: 9px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 9px;
}
.saletimes-g { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.saletime {
  height: 32px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); color: var(--fg-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  transition: all var(--dur-1) var(--ease);
}
.saletime:hover { border-color: var(--border-strong); color: var(--fg-1); }
.saletime[data-on="true"] { background: var(--oway-orange); border-color: transparent; color: #fff; font-weight: 600; }

.salefields { display: grid; gap: 12px; align-content: start; }
.salefields .mini input, .salefields .mini select, .salefields .mini textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; color: var(--fg-1); font-size: var(--fs-sm); font-family: var(--font);
}
.salefields .mini select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.salefields .mini textarea { min-height: 74px; resize: vertical; line-height: var(--lh-normal); }
.salefields .mini input:focus, .salefields .mini select:focus, .salefields .mini textarea:focus {
  outline: 0; border-color: var(--oway-orange); box-shadow: 0 0 0 3px rgba(246,92,14,0.18);
}
.salenote { font-size: 10px; color: var(--fg-faint); line-height: 1.5; margin: 0; }

@media (max-width: 860px) {
  .salegrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .salebook { grid-template-columns: minmax(0,1fr); }
  .saletimes-g { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .salegrid { grid-template-columns: minmax(0,1fr); }
  .saletimes-g { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===========================================================================
   V16, service area, customer service, a sales modal that fits
   ======================================================================== */

/* ---- Out of the instant area ------------------------------------------ */
.offarea {
  border: 1px solid rgba(246,92,14,0.45); background: rgba(246,92,14,0.07);
  border-radius: 10px; padding: 14px 16px;
}
.qq-result.offarea { margin-top: var(--sp-6); border-top: 1px solid rgba(246,92,14,0.45); }
.offarea.inpanel { margin-top: 4px; }
.offarea-h { display: flex; gap: 11px; align-items: flex-start; }
.offarea-i { flex: 0 0 auto; display: flex; color: var(--oway-orange-hi); margin-top: 1px; }
.offarea-t {
  font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
}
.offarea-b { font-size: var(--fs-xs); color: var(--fg-2); line-height: var(--lh-normal); margin-top: 5px; }
.offarea-f {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(246,92,14,0.28);
}
.qq-covered { color: var(--text-success); display: inline-flex; align-items: center; gap: 5px; }
.tbl tr[data-pending="true"] td { opacity: 0.92; }
.qcard-pending { font-size: var(--fs-xs); color: var(--fg-2); line-height: var(--lh-normal); }

/* ---- Customer service menu -------------------------------------------- */
.csmenu { width: 280px; }
.csmenu .pmenu-i { align-items: flex-start; }
.csmenu .pmenu-i .icon { margin-top: 2px; }
.csmenu-t { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.csmenu-s { display: block; font-size: 10px; color: var(--fg-faint); margin-top: 2px; line-height: 1.4; }
.csdial {
  display: grid; gap: 4px; padding: 18px; border-radius: 10px; text-align: center;
  border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.02);
}
.csdial-n {
  font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.csdial-s { font-size: var(--fs-2xs); color: var(--fg-faint); }

/* ---- Talk to Sales: blue, and it fits on a laptop --------------------- */
.sales-btn {
  border-color: rgba(56,37,253,0.55); color: #A9B4FF; background: rgba(56,37,253,0.12);
}
.sales-btn:hover { background: rgba(56,37,253,0.26); border-color: var(--oway-indigo-hi); color: #fff; }
.sales-btn .icon { color: #8FA0FF; }

.modal.salesmodal { width: min(860px, 94vw); }
.modal.salesmodal .modal-body { padding-top: 14px; padding-bottom: 14px; }
.salehero { margin-bottom: 12px; }
.salehero-t {
  font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--fg-2);
  line-height: var(--lh-normal); letter-spacing: 0; margin-bottom: 10px; max-width: none;
}
.salegrid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.saleval { gap: 7px; padding: 8px 9px; align-items: flex-start; }
.saleval-i { margin-top: 2px; }
.saleval-t { font-size: 10.5px; line-height: 1.25; }
.saleval-d { font-size: 9px; margin-top: 2px; line-height: 1.35; }

.salestep { padding: 9px 0; margin-bottom: 8px; }
.salestep-n { width: 18px; height: 18px; font-size: 9px; }
.salecal.solo { max-width: 300px; margin: 0 auto 2px; }
.salecal .calday { height: 30px; font-size: var(--fs-xs); }
.salebook { grid-template-columns: 200px minmax(0,1fr); gap: 14px; }
.saletimes { padding: 10px; }
.saletimes-g { gap: 5px; }
.saletime { height: 28px; font-size: 10.5px; }
.salefields { gap: 9px; }
.salefields .mini input, .salefields .mini select { padding: 7px 10px; font-size: var(--fs-xs); }
.salefields .mini textarea { min-height: 54px; padding: 7px 10px; font-size: var(--fs-xs); }
.salefields .mini-l { margin-bottom: 3px; }
.salenote { font-size: 9.5px; }

@media (max-height: 780px) {
  .salegrid { display: none; }
  .salehero-t { font-size: var(--fs-sm); margin-bottom: 0; }
}
@media (max-width: 860px) {
  .salegrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .salebook { grid-template-columns: minmax(0,1fr); }
  .saletimes-g { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .salegrid { grid-template-columns: minmax(0,1fr); }
  .saletimes-g { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===========================================================================
   V17, billing without the vanity row, tablet tables, help in the menu
   ======================================================================== */

/* ---- The balance panel is the whole hero now -------------------------- */
.bill-hero { grid-template-columns: minmax(0,1fr); }
.bill-bal { border-right: 0; grid-column: auto !important; }

/* ---- Quick quote: the hanging dim chip needs a gutter when it wraps ----
   Below 1024 the grid is forced to a single column, so the chip lands on the
   label of the field beneath it unless the rows are spaced for it. */
@media (max-width: 1024px) {
  .qq-grid { row-gap: 28px; }
}

/* ---- Tables become cards at tablet width, not just on a phone --------- */
@media (max-width: 1024px) {
  .cardable .tbl, .tblcard.cardable .tblwrap { display: none; }
  .qcards, .invcards { display: block; }
  .orders-table-wrap.cardable { overflow: visible; }
  .tbl-toolbar { flex-wrap: wrap; row-gap: 8px; }
  .paybar {
    left: 50% !important; width: calc(100% - var(--sp-6) * 2);
    flex-wrap: wrap; row-gap: 8px; justify-content: center; padding: 12px;
  }
  .paybar .btn { flex: 1 1 auto; justify-content: center; }
  .paybar-t { flex: 1 1 100%; text-align: center; }
}

/* ---- Help lives in the topbar on desktop, in the profile menu below --- */
.pmenu-i.compact-only, .pmenu-rule.compact-only { display: none; }
.pmenu-rule { height: 1px; background: var(--border-subtle); margin: 5px 4px; }
@media (max-width: 1024px) {
  .cswrap, .sales-btn { display: none; }
  .pmenu-i.compact-only { display: flex; }
  .pmenu-rule.compact-only { display: block; }
}

/* ===========================================================================
   V18, the Oway chip is Juno's mark
   ======================================================================== */

/* A square slot with a tall mark inside it: the box keeps the layout honest,
   the image keeps its own 4:7 proportions and never stretches. */
.chipmark {
  flex: 0 0 auto; display: grid; place-items: center;
  position: relative; line-height: 0;
}
.chipmark img {
  display: block; width: auto; height: 100%;
  image-rendering: -webkit-optimize-contrast;
}
.chipmark.sm { width: 22px; height: 22px; }
.chipmark.sm img { height: 20px; }
.chipmark.md { width: 26px; height: 26px; }
.chipmark.md img { height: 24px; }
.chipmark.lg { width: 40px; height: 40px; }
.chipmark.lg img { height: 38px; }
.chipmark.xl { width: 62px; height: 62px; }
.chipmark.xl img { height: 60px; }

/* On the home bar the mark reads as a button face, so it gets a soft plate
   behind it rather than floating against the field. */
.juno-bar .chipmark {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255,255,255,0.045); border: 1px solid var(--border-subtle);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.juno-bar .chipmark img { height: 20px; }
.juno-bar:hover .chipmark,
.juno-bar:focus-within .chipmark,
.juno-bar[data-live="true"] .chipmark {
  border-color: rgba(56,37,253,0.55); background: rgba(56,37,253,0.14);
}

/* The chat head pairs the mark with the wordmark, so it needs breathing room
   on its right rather than the tight orb gap. */
.juno-head .chipmark { margin-right: 2px; }

/* The opening screen centres it above the greeting. */
.juno-open .chipmark { margin: 0 auto 4px; }

/* Replies line up with the first line of their bubble. */
.jmsg-av .chipmark { margin-top: 1px; }

/* ===========================================================================
   V19, one profile menu, sunset phases, lane history
   ======================================================================== */

/* ---- The profile menu, opening either downward or upward -------------- */
.railfoot-row.pwrap { position: relative; }
.pmenu.up { top: auto; bottom: calc(100% + 8px); right: 0; left: 0; width: auto; }
.pmenu-head { display: flex; align-items: center; gap: 11px; }
.pmenu-head .avatar.lg { width: 36px; height: 36px; font-size: var(--fs-sm); }
.pmenu-n { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.pmenu-e {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pmenu-swatches { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.pmenu-sec {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 8px;
}
.swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.swatch {
  aspect-ratio: 1; border-radius: 999px; border: 1.5px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.swatch:hover { transform: scale(1.16); }
.swatch[data-on="true"] { border-color: #fff; transform: scale(1.12); }
.railuser[aria-expanded="true"] { background: var(--surface); }
#app[data-mini="true"] .pmenu.up { left: 0; right: auto; width: 236px; }

/* ---- View invoice reads as the primary thing on the row -------------- */
.btn.view-inv {
  border-color: rgba(56,37,253,0.55); color: #A9B4FF; background: rgba(56,37,253,0.14);
}
.btn.view-inv:hover { background: rgba(56,37,253,0.3); border-color: var(--oway-indigo-hi); color: #fff; }

/* ---- The command palette wears the brand, not grey ------------------- */
.gpanel {
  border-color: rgba(56,37,253,0.55);
  background: linear-gradient(180deg, rgba(24,22,58,0.96), rgba(11,11,20,0.97));
  box-shadow: 0 0 0 1px rgba(56,37,253,0.24),
              0 0 50px -10px rgba(56,37,253,0.5),
              0 30px 80px rgba(0,0,0,0.6);
}
.gpanel .gsec, .gpanel-head {
  background: rgba(20,18,52,0.92); color: #8FA0FF;
}
.gres[data-cur="true"], .gres:hover { background: rgba(56,37,253,0.22); }
.gsearch-input:focus {
  border-color: var(--oway-indigo-hi);
  box-shadow: 0 0 0 3px rgba(56,37,253,0.22);
}
.gsearch-input:focus + .gsearch-kbd .kbd { border-color: rgba(56,37,253,0.5); }

/* ---- My Orders: a real status filter --------------------------------- */
.statusel {
  position: relative; display: inline-flex; align-items: center; flex: 0 0 auto;
  height: 30px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface-hover); padding: 0 26px 0 30px;
  transition: all var(--dur-1) var(--ease);
}
.statusel:hover { border-color: var(--line-strong); }
.statusel.on { border-color: var(--oway-orange); background: rgba(246,92,14,0.12); }
.statusel.on .statusel-i { color: var(--oway-orange-hi); }
.statusel select {
  appearance: none; -webkit-appearance: none; background: none; border: 0; outline: 0;
  color: var(--fg); font-family: var(--font); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  padding: 0; cursor: pointer; min-width: 92px;
}
.statusel-i, .statusel-c {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--fg-faint); pointer-events: none;
}
.statusel-i { left: 10px; }
.statusel-c { right: 9px; }

/* ---- Active shipments, phase by phase --------------------------------
   Warm at the start, cooling as the freight moves: quoted is orange, matching
   magenta, picked up violet, on the road indigo. */
.phaserow[data-phase="quoted"]  { --ph: #F65C0E; --ph-hi: #FF8A4C; }
.phaserow[data-phase="match"]   { --ph: #D4459A; --ph-hi: #F06BBE; }
.phaserow[data-phase="picked"]  { --ph: #7636D6; --ph-hi: #A87BFF; }
.phaserow[data-phase="driving"] { --ph: #3825FD; --ph-hi: #8B7BFF; }
.phaseseg[data-phase="quoted"]  { background: linear-gradient(90deg, #F65C0E, #FF8A4C); }
.phaseseg[data-phase="match"]   { background: linear-gradient(90deg, #E0621E, #D4459A); }
.phaseseg[data-phase="picked"]  { background: linear-gradient(90deg, #B93FB4, #7636D6); }
.phaseseg[data-phase="driving"] { background: linear-gradient(90deg, #5A31E8, #3825FD); }

.actrow.head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  margin: 0 0 9px; padding: 0;
}
.acttotal {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-1); background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 1px 7px;
}
.phasebar {
  display: flex; gap: 2px; height: 5px; border-radius: 999px; overflow: hidden;
  margin-bottom: 10px; background: rgba(255,255,255,0.05);
}
.phaseseg { border-radius: 999px; min-width: 6px; }
.phasebar[data-anim="true"] .phaseseg { animation: phasein 620ms var(--ease) both; }
@keyframes phasein { from { transform: scaleX(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

.phaselist { display: grid; gap: 2px; }
.phaserow {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 6px 8px; margin: 0 -8px; border-radius: 7px;
  border: 1px solid transparent; font-size: var(--fs-xs); color: var(--fg-2);
  transition: all var(--dur-1) var(--ease); position: relative;
}
.phaserow:hover { background: color-mix(in srgb, var(--ph) 13%, transparent); color: var(--fg-1); }
.phaserow.on {
  background: color-mix(in srgb, var(--ph) 18%, transparent);
  border-color: color-mix(in srgb, var(--ph) 55%, transparent); color: var(--fg-1);
}
.phasedot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px;
  background: var(--ph); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ph) 22%, transparent);
}
.phaserow.on .phasedot { background: var(--ph-hi); }
.phasel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phaserow b {
  margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--fg-1); font-weight: 600;
}
.phaserow[data-empty="true"] { opacity: 0.38; }
.phaserow[data-empty="true"] .phasedot { box-shadow: none; }
#app[data-mini="true"] .phasel, #app[data-mini="true"] .actrow.head { display: none; }
#app[data-mini="true"] .phaserow { justify-content: center; padding: 6px 0; margin: 0; }
#app[data-mini="true"] .phaserow b { margin-left: 0; font-size: 10px; }

/* ---- Lane history table ----------------------------------------------- */
.lanecell .tblwrap { max-height: 420px; overflow: auto; }
.lanetbl thead th { position: sticky; top: 0; z-index: 2; }
.lanetbl td { vertical-align: top; }
.lanetbl tfoot td {
  position: sticky; bottom: 0; background: var(--bg-elevated);
  border-top: 1px solid var(--border-strong); font-weight: 600;
}
.convbar {
  width: 78px; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.07);
}
.convbar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--oway-orange), var(--oway-indigo-hi));
}
@media (max-width: 900px) { .lanecell .seg { width: 100%; } }

/* ===========================================================================
   V20, one field font, blue modals, one corner radius
   ======================================================================== */

/* ---- The white fields all speak in the same voice ---------------------
   Half of them were mono because they hold numbers, which made a single row
   of fields look like two different forms. Numerals stay tabular so columns
   still line up. */
.wf input, .wf select, .wf input.mono, .wf select.mono, .wf textarea {
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.wf .wf-locked { font-family: var(--font); }

/* ---- Modals are blue all the way through ------------------------------
   Orange is the app's attention colour, but inside a dialog every highlight
   is just "the thing you picked", so it takes the interactive blue. */
.scrim .acctile[data-on="true"],
.scrim .dimcell:focus-within,
.scrim .saletime[data-on="true"],
.scrim .aptslot[data-on="true"],
.scrim .dlopt:hover,
.scrim .saved-item:hover,
.scrim .rqrow:hover,
.scrim .statusel.on {
  border-color: var(--oway-indigo-hi);
  background: rgba(56,37,253,0.16);
}
.scrim .acctile[data-on="true"] .acctile-b,
.scrim .aptslot[data-on="true"],
.scrim .saletime[data-on="true"] {
  background: var(--oway-indigo); border-color: transparent; color: #fff;
}
.scrim .calday[data-pick="true"],
.scrim .aptcal .calday[data-pick="true"],
.scrim .salecal .calday[data-pick="true"] {
  background: var(--oway-indigo); color: #fff;
}
.scrim .acctile-edit:hover { background: var(--oway-indigo); }
.scrim .dimcell:focus-within { box-shadow: 0 0 0 3px rgba(56,37,253,0.22); }
.scrim .dimcell-l { color: #A9B4FF; }
.scrim .salefields .mini input:focus,
.scrim .salefields .mini select:focus,
.scrim .salefields .mini textarea:focus,
.scrim .mini input:focus,
.scrim .mini textarea:focus,
.scrim input:focus, .scrim textarea:focus, .scrim select:focus {
  border-color: var(--oway-indigo-hi);
  box-shadow: 0 0 0 3px rgba(56,37,253,0.20);
}
.scrim .dlopt:hover .dlopt-i,
.scrim .salestep-n { color: #fff; }
.scrim .salestep-n { background: var(--oway-indigo); }
.scrim .cfeta, .scrim .cfwarn-t { color: #A9B4FF; }
.scrim .cfwarn {
  border-color: rgba(56,37,253,0.4); background: rgba(56,37,253,0.06);
}
.scrim .cfnotes li[data-kind="warn"] .cfnote-i { color: var(--oway-amber-hi); }
.scrim .cfnotes li[data-kind="ok"] .cfnote-i { color: #8FA0FF; }
.scrim .offarea { border-color: rgba(56,37,253,0.4); background: rgba(56,37,253,0.07); }
.scrim .offarea-i, .scrim .offarea .chip.attn {
  color: #A9B4FF; border-color: rgba(56,37,253,0.5); background: rgba(56,37,253,0.14);
}

/* ---- Checkmarks draw themselves on --------------------------------- */
.scrim .accr input:checked + .accb,
.scrim .check input:checked + .box {
  background: var(--oway-indigo); border-color: transparent; color: #fff;
  animation: checkpop 280ms var(--ease);
}
.scrim .accr input:checked + .accb svg,
.scrim .check input:checked + .box svg,
.scrim .acctile[data-on="true"] .acctile-b svg {
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: checkdraw 340ms cubic-bezier(0.65, 0, 0.35, 1) 60ms forwards;
}
@keyframes checkdraw { to { stroke-dashoffset: 0; } }
@keyframes checkpop {
  0%   { transform: scale(0.8); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.scrim .accr input:focus-visible + .accb { box-shadow: 0 0 0 3px rgba(56,37,253,0.4); }

/* ---- One corner radius for anything panel-sized ---------------------
   Everything the size of the active-shipments block or larger reads as a
   box, and boxes are 8px. Controls keep their own geometry. */
.card, .modal, .railcard, .bkcard, .bkpanel, .bkglass, .opanel, .tblcard,
.ana-cell, .ana-metrics, .aptbox, .cfbox, .cfwarn, .cfattest, .offarea,
.gpanel, .pmenu, .csdial, .dlopt, .saletimes, .saleval, .track-detail,
.geo-frame, .bill-hero, .pm, .plttile, .jcard, .jdrop-in, .juno-hist,
.invcard, .qcard, .drawer, .paybar, .toast, .rqrow, .saved-item,
.juno-input-wrap, .jmsg-bubble, .wf, .tick-card, .aptcard, .juno-bar {
  border-radius: 8px;
}
.juno-bar { border-radius: 8px; }
.modal { border-radius: 8px; }
.juno-panel { border-radius: 0; }
/* Round things stay round: avatars, pills, dots and bars. */
.avatar, .swatch, .btn, .statusel, .phasedot, .phasebar,
.phaseseg, .convbar, .orb, .qq-swap, .juno-bar-send {
  border-radius: var(--r-pill);
}
/* Small square-ish controls share the same 8px as the boxes. */
.chip, .kbd, .fchip, .chipmark, .juno-bar .chipmark, .docchip, .saletime,
.aptslot, .calday, .acctile, .dimcell, .swatch-none {
  border-radius: 8px;
}
.swatch { border-radius: var(--r-pill); }

/* ===========================================================================
   V21, transit and delivery columns, the API pill as a menu
   ======================================================================== */
.apiwrap { position: relative; flex: 0 0 auto; }
.apilink {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: inherit;
}
.apilink-c { display: flex; color: var(--fg-faint); margin-left: 1px; }
.apilink[aria-expanded="true"] {
  border-color: var(--oway-orange); color: var(--fg-1); background: rgba(246,92,14,0.12);
}
.apilink[aria-expanded="true"] .apilink-c { color: var(--oway-orange-hi); }
.apimenu { width: 292px; left: 0; right: auto; }
.apimenu .pmenu-body { padding: 6px; }
.apimenu .pmenu-i { align-items: flex-start; text-decoration: none; }
.apimenu .pmenu-i .icon { margin-top: 2px; }

/* ===========================================================================
   V22, My details, display size, shipping defaults
   ======================================================================== */

/* ---- Display size ------------------------------------------------------ */
.zoomctl { display: inline-flex; gap: 6px; padding: 4px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); }
.zoomctl button {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 7px 12px; border-radius: 8px; border: 1px solid transparent;
  color: var(--fg-2); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  transition: all var(--dur-1) var(--ease);
}
.zoomctl button:hover { background: var(--surface-hover); color: var(--fg-1); }
.zoomctl button[data-on="true"] {
  background: rgba(56,37,253,0.18); border-color: var(--oway-indigo-hi); color: #fff;
}
.zoomctl-a {
  font-weight: 700; line-height: 1; width: 18px; text-align: center;
  color: var(--fg-faint);
}
.zoomctl button[data-on="true"] .zoomctl-a { color: #A9B4FF; }
.zoomctl.inmenu { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 4px; }
.zoomctl.inmenu button { justify-content: center; padding: 7px 4px; }
.zoomctl.inmenu .zoomctl-l { font-size: 10px; }

/* ---- My details -------------------------------------------------------- */
.avatar.xl { width: 56px; height: 56px; font-size: var(--fs-lg); }
.meid { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-7); }
.meid-n { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.meid-s { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 3px; }
.swatches.wide { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch.lg { width: 34px; height: 34px; aspect-ratio: auto; }
.swatch-name {
  margin-top: 10px; font-size: var(--fs-2xs); color: var(--fg-faint);
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---- Shipping defaults ------------------------------------------------- */
.setcheck { align-items: flex-start; }
.setcheck .box { margin-top: 1px; }
.setcheck-l { display: block; font-size: var(--fs-sm); }
.setcheck-h { display: block; font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 2px; line-height: 1.45; }
.defacc { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; max-width: 640px; }
.defacc-col { display: grid; gap: 7px; align-content: start; }
.defacc-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--fg-faint); margin-bottom: 2px;
}
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-5); }
/* Settings tabs: see the wrapping rule in V32. */
@media (max-width: 700px) {
  .defacc, .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zoomctl { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .zoomctl button { justify-content: center; }
}

/* ===========================================================================
   V23, a price withdrawn when its accessorials move
   ======================================================================== */
.qq-result.stale {
  border-top: 1px solid rgba(246,92,14,0.4);
  border-radius: 8px; border: 1px solid rgba(246,92,14,0.4);
  background: rgba(246,92,14,0.07); padding: 14px 16px;
}
.stale-h { display: flex; gap: 11px; align-items: flex-start; }
.stale-i { flex: 0 0 auto; display: flex; color: var(--oway-orange-hi); margin-top: 1px; }
.stale-t {
  font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
}
.stale-b { font-size: var(--fs-xs); color: var(--fg-2); line-height: var(--lh-normal); margin-top: 5px; }
.stale-f {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(246,92,14,0.28);
}

/* ===========================================================================
   V24, room in the rail, scrollable pages, sortable tables
   ======================================================================== */

/* ---- The rail carries longer labels now, and gains a little width -----
   'Shipping defaults' and the phase rows were running into the edge at the
   larger display sizes. Everything truncates rather than clipping. */
:root { --rail-w: 288px; }
@media (max-width: 1180px) { :root { --rail-w: 264px; } }
.navi-l, .group-head, .railuser-n, .railuser-s, .phasel, .rail-collapse span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navi { gap: 10px; }
.navi-n { flex: 0 0 auto; }
.railcard { overflow: hidden; }

/* ---- Anything taller than its pane scrolls --------------------------- */
.orders-table-wrap { overflow-y: auto; overflow-x: auto; }
.orders-table-wrap.cardable { overflow-x: hidden; overflow-y: auto; }
.orders-body { min-height: 0; }
.tblcard .tblwrap { max-height: none; }
.page, .scroll > .page { padding-bottom: var(--sp-10); }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.main { overflow: hidden; }
@media (max-width: 1024px) {
  /* Once the tables become cards the whole column scrolls as one. */
  .orders { overflow-y: auto; }
  .orders-main { min-height: 0; }
  .orders-table-wrap.cardable { overflow: visible; }
}

/* ---- The filter chip is one line ------------------------------------- */
.fchip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 30px; padding: 0 12px; white-space: nowrap; line-height: 1;
}
.fchip .icon { flex: 0 0 auto; }
.orders-toolbar { flex-wrap: wrap; row-gap: 8px; align-items: center; }

/* ---- Get Quote is the biggest thing on the card ---------------------- */
.btn.getquote {
  height: 42px; padding: 0 20px; border-radius: 8px;
  font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug);
}
.btn.getquote .icon { margin-left: 2px; }

/* ---- The API pill yields before it can reach the search --------------
   Brand, pill and the right-hand cluster together need about 1360px before
   the centred search has room between them. */
@media (max-width: 1360px) { .apiwrap { display: none; } }

/* ---- Display size is a desktop control ------------------------------- */
@media (max-width: 700px) { .zoomsec { display: none !important; } }

/* ---- Sortable headers read as sortable -------------------------------- */
.tbl th[data-bsort], .tbl th[data-hsort] { cursor: pointer; user-select: none; }
.tbl th[data-bsort]:hover, .tbl th[data-hsort]:hover { color: var(--fg-1); }
.tbl th[data-bsort] .sortic, .tbl th[data-hsort] .sortic { opacity: 0; }
.tbl th[data-bsort][data-sorted] .sortic, .tbl th[data-hsort][data-sorted] .sortic { opacity: 1; }
.tbl th[data-bsort]:hover .sortic, .tbl th[data-hsort]:hover .sortic { opacity: .55; }

/* ===========================================================================
   V25, everything scrolls when it has to, error log styling
   ======================================================================== */

/* ---- The rail is one scroller, not two -------------------------------
   It used to pin the foot with `flex: 0 0 auto` inside an `overflow: hidden`
   column, so at the larger display sizes the profile row and the phase list
   were simply clipped off the bottom with no way to reach them. The rail
   itself now scrolls, and the inner list stops trying to. Where there is
   room, flex-grow still pushes the foot to the bottom exactly as before. */
/* At 100% the rail fits by design: the nav list scrolls inside it and the
   foot stays pinned, exactly as before. */
.rail { overflow: hidden; }
.rail-scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
.rail-foot { flex: 0 0 auto; }

/* Only once the interface is scaled up does the whole rail become one
   scroller, so the foot can be reached instead of being clipped. */
#app[data-uiscale="lg"] .rail, #app[data-uiscale="xl"] .rail {
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
#app[data-uiscale="lg"] .rail-scroll, #app[data-uiscale="xl"] .rail-scroll {
  overflow: visible; min-height: auto;
}

/* ---- The content column gets a last-resort scroller -------------------
   Each view still owns its own scrolling; this only engages when a view is
   too tall to shrink any further, which is what happens at 125% on a short
   window. No nested scrollbar appears while the inner one is coping. */
.main { overflow: hidden; }
.scroll, .track, .home2, .orders { min-height: 0; }

/* Same idea for the content column. Each view owns its own scrolling at 100%;
   the fallback only exists for the enlarged sizes, where a view can run out
   of room to shrink. */
#app[data-uiscale="lg"] .main, #app[data-uiscale="xl"] .main {
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
#app[data-uiscale="lg"] .orders, #app[data-uiscale="xl"] .orders { min-height: min-content; }

/* Scrollbars stay out of the way until they are needed. */
.rail::-webkit-scrollbar, .main::-webkit-scrollbar { width: 10px; }
.rail::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
.rail::-webkit-scrollbar-thumb:hover, .main::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22); background-clip: content-box;
}
.rail::-webkit-scrollbar-track, .main::-webkit-scrollbar-track { background: transparent; }

/* ---- Errors are the only thing that interrupts ----------------------- */
.toast.err { border-color: rgba(229,72,77,0.5); }

/* ---- Session card and error list -------------------------------------- */
.sessioncard {
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: rgba(255,255,255,0.018); padding: 4px 14px; max-width: 640px;
}
.sessrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-top: 1px solid var(--line-faint); font-size: var(--fs-xs);
}
.sessrow:first-child { border-top: 0; }
.sessrow > span:first-child { color: var(--fg-faint); flex: 0 0 auto; }
.sessrow > span:last-child { min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; }

.errlist { display: grid; gap: 6px; max-width: 720px; }
.errrow {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px;
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: rgba(255,255,255,0.018);
}
.errrow[data-source="runtime"], .errrow[data-source="promise"] {
  border-color: rgba(229,72,77,0.35); background: rgba(229,72,77,0.06);
}
.errrow-n { flex: 0 0 auto; font-size: 10px; color: var(--fg-faint); margin-top: 2px; }
.errrow-m { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.errrow-s {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px;
  font-size: 10px; color: var(--fg-faint); min-width: 0;
}
.errrow-tag {
  border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0 6px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 9px;
}
.errrow[data-source="runtime"] .errrow-tag, .errrow[data-source="promise"] .errrow-tag {
  color: var(--text-danger); border-color: rgba(229,72,77,0.4);
}
.tabline .chip.risk { margin-left: 6px; }

/* ===========================================================================
   V26, matching party columns, folder grouping
   ======================================================================== */

/* Both ends of a shipment read the same way: company, then the city it sits
   in. Same type as every other cell in the row. */
.party { display: block; min-width: 0; }
.party-n {
  display: block; font-size: var(--fs-sm); color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch;
}
.party-c {
  display: block; font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch;
}

/* ---- Grouping headers -------------------------------------------------- */
.tbl th.gth { cursor: pointer; user-select: none; white-space: nowrap; }
.gth-i { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--fg-faint); }
.tbl th.gth:hover { color: var(--fg-1); }
.tbl th.gth:hover .gth-i { color: var(--oway-orange-hi); }
.tbl th.gth[data-sorted] { color: var(--fg-1); }
.tbl th.gth[data-sorted] .gth-i { color: var(--oway-orange); }
.tbl th.gth .sortic { opacity: 0; }
.tbl th.gth[data-sorted] .sortic, .tbl th.gth:hover .sortic { opacity: .6; }

/* ---- Folders ----------------------------------------------------------- */
.tbl tbody.fold + tbody.fold .foldrow td { border-top: 1px solid var(--line-faint); }
.foldrow { cursor: pointer; }
.foldrow td {
  padding: 9px var(--sp-6); background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line-faint);
  position: sticky; top: 0; z-index: 1;
}
.foldrow:hover td { background: rgba(255,255,255,0.055); }
.fold-c {
  display: inline-flex; vertical-align: -2px; margin-right: 8px; color: var(--fg-faint);
  transition: transform var(--dur-1) var(--ease);
}
.fold[data-shut="true"] .fold-c { transform: rotate(-90deg); }
.fold-i { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--oway-orange); }
.fold-n { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--fg-1); }
.fold-city {
  font-size: var(--fs-2xs); color: var(--fg-faint); margin-left: 8px;
  font-family: var(--font-mono);
}
.fold-count {
  margin-left: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 1px 8px;
}
.fold[data-shut="false"] .foldrow td { border-bottom-color: var(--border-subtle); }

/* ===========================================================================
   V27, a proper time control, grouping as a control
   ======================================================================== */

/* ---- Time inputs -------------------------------------------------------
   The native picker button is a small grey clock that nothing else in the app
   looks like. It gets inverted to white, pulled to the right edge, and the
   field around it is rebuilt to match the other controls. */
.tinp-b {
  display: flex; align-items: center; gap: 8px; position: relative;
  height: 38px; padding: 0 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.tinp-b > .icon { flex: 0 0 auto; color: var(--fg-faint); transition: color var(--dur-1) var(--ease); }
.tinp-b:focus-within { border-color: var(--oway-indigo-hi); box-shadow: 0 0 0 3px rgba(56,37,253,0.20); }
.tinp-b:focus-within > .icon { color: #fff; }
.tinp-b:hover { border-color: var(--border-strong); }
.tinp-b input[type="time"] {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: none; border: 0; outline: 0; padding: 0;
  color: var(--fg-1); font-family: var(--font-mono); font-size: var(--fs-sm);
  color-scheme: dark;
}
.tinp-b input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2); opacity: .45; cursor: pointer;
  margin: 0; padding: 3px; border-radius: 6px;
  transition: opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.tinp-b input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background: rgba(255,255,255,0.1);
}
.tinp-b input[type="time"]::-webkit-datetime-edit { color: var(--fg-1); }
.tinp-b input[type="time"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.tinp-b input[type="time"]::-webkit-datetime-edit-ampm-field { color: var(--fg-2); }
.tinp-b input[type="time"]:focus::-webkit-datetime-edit-hour-field,
.tinp-b input[type="time"]:focus::-webkit-datetime-edit-minute-field,
.tinp-b input[type="time"]:focus::-webkit-datetime-edit-ampm-field {
  background: rgba(56,37,253,0.4); border-radius: 4px; color: #fff;
}
.tinp span:first-child {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px;
}
.bkhours span { margin-bottom: 0; }
.hours { display: flex; align-items: center; gap: 10px; }
.hours .tinp-b { flex: 1 1 auto; min-width: 0; }
.hours-to { flex: 0 0 auto; font-size: var(--fs-2xs); color: var(--fg-faint); }

/* ---- Group by --------------------------------------------------------- */
.groupby { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.groupby-l {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: var(--fs-2xs); color: var(--fg-faint);
}
.groupby-l .icon { color: var(--fg-faint); }
.seg.sm button { height: 26px; padding: 0 10px; font-size: var(--fs-2xs); }
.groupby-dir {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--fg-2);
  font-family: var(--font-mono); font-size: 10px; white-space: nowrap;
  transition: all var(--dur-1) var(--ease);
}
.groupby-dir:hover { border-color: var(--oway-orange); color: var(--fg-1); }

/* ===========================================================================
   V28, CRM avatar colours, Juno without chrome, CSV locations
   ======================================================================== */

/* ---- Avatar swatches, matching the CRM -------------------------------- */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.swatch {
  width: 26px; height: 26px; aspect-ratio: auto; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.swatch:hover { transform: scale(1.08); }
.swatch[data-on="true"] { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--fg); transform: none; }
.profprev { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-7); }
.profprev-n { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: var(--tracking-snug); }
.profprev-t { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 1px; }
.profprev-r { font-size: var(--fs-2xs); color: var(--fg-faint); margin-top: var(--sp-3); }

/* ---- Juno sits on the app's own background --------------------------- */
.juno-overlay { background: var(--bg-canvas); background-attachment: fixed; }
.juno-panel { background: none; }
.juno-panel::before { display: none; }
.juno-head {
  border-bottom: 0; padding: var(--sp-6) var(--sp-7) 0;
  background: none;
}
.juno-hist { background: rgba(0,0,0,0.14); border-left-color: var(--line-faint); }
.juno-scroll { padding-top: var(--sp-6); }
.juno-composer { border-top: 0; }

/* The composer and New chat share a row, so starting over is right next to
   sending, and it never sits in the corner of a header nobody reads. */
.juno-compose-row { display: flex; align-items: flex-end; gap: 10px; }
.juno-compose-row .juno-input-wrap { flex: 1 1 auto; min-width: 0; }
.jnew {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); white-space: nowrap;
  transition: all var(--dur-1) var(--ease);
}
.jnew:hover { border-color: var(--oway-indigo-hi); background: rgba(56,37,253,0.14); color: #fff; }
.jnew .icon { color: var(--fg-faint); }
.jnew:hover .icon { color: #A9B4FF; }
@media (max-width: 700px) { .jnew span { display: none; } .jnew { padding: 0 12px; } }

/* ===========================================================================
   V29: Juno reads like the home page
   ======================================================================== */

/* The history column runs the full height of the window; the conversation and
   its header sit in their own column beside it. */
.juno-page { align-items: stretch; }
.juno-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.juno-head { flex: 0 0 auto; padding: var(--sp-6) var(--sp-7) 0; }
.juno-hist { align-self: stretch; height: 100%; }
.juno-hist-list { flex: 1 1 auto; min-height: 0; }

/* With a short thread the composer sits near the middle of the window, where
   the eye already is. Once the conversation is long enough to fill the space,
   the thread pushes it back down to the foot on its own. */
.juno-main { justify-content: center; }
.juno-main .juno-scroll { flex: 0 1 auto; max-height: 100%; }
.juno-composer { flex: 0 0 auto; padding: var(--sp-6) var(--sp-7) var(--sp-8); }
.juno-composer-inner { max-width: 720px; }

/* The composer is the home bar: same pill, same glow, same suggestion chips
   sitting underneath it. */
.juno-input-wrap {
  border-radius: var(--r-pill); padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--bg-elevated); border: 1px solid var(--line);
  box-shadow: var(--panel-sheen);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  align-items: center;
}
.juno-input-wrap:hover, .juno-input-wrap:focus-within {
  border-color: var(--oway-indigo-hi);
  box-shadow: 0 0 0 3px rgba(56,37,253,0.20),
              0 0 34px -4px rgba(56,37,253,0.55),
              var(--panel-sheen);
}
.juno-input { font-size: var(--fs-md); padding: 0; }
.jattach, .juno-input-wrap .juno-bar-send { align-self: center; }
.juno-compose-row { align-items: center; }
.jnew { height: 46px; border-radius: var(--r-pill); }
.juno-suggests { justify-content: flex-start; margin-top: var(--sp-5); }
.juno-foot-note { margin-top: var(--sp-5); text-align: left; }

/* The opening card is the greeting only; the prompts live under the composer
   now, exactly as they do on the home page. */
.juno-open { padding-bottom: 0; }
.juno-open-h { font-size: var(--fs-2xl); }
@media (max-width: 1100px) { .juno-main { justify-content: flex-end; } }

/* ===========================================================================
   V30: neon pallet preview, composer centred in its column
   ======================================================================== */

/* ---- Pallet visualizer -------------------------------------------------
   The pane is a fixed box. Whatever is inside it is scaled to fit, so adding
   a fifth group shrinks the crates rather than growing the panel. */
.pvizwrap {
  width: 100%; max-width: 260px; height: 152px;
  display: grid; place-items: center;
}
.pviz { width: 100%; height: 100%; display: block; overflow: visible; }

/* The pallet is drawn, not filled: only the plank edges carry colour. */
.pv-deck {
  fill: none; stroke: var(--pv); stroke-width: 1.1; stroke-opacity: 0.85;
  filter: drop-shadow(0 0 3px var(--pv));
}
.pv-deckside { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.16); stroke-width: 0.7; }
.pv-plank { stroke: rgba(255,255,255,0.22); stroke-width: 0.6; }
.pv-leg { stroke: rgba(255,255,255,0.3); stroke-width: 0.9; }

/* The crate is a lit shell: faint faces, bright edges. */
.pv-edge { fill: none; stroke: var(--pv); stroke-width: 1; stroke-opacity: 0.75; }
.pv-top {
  fill: none; stroke: var(--pv); stroke-width: 1.3; stroke-opacity: 0.95;
  filter: drop-shadow(0 0 4px var(--pv));
}
.pv-floor { stroke: rgba(255,255,255,0.09); stroke-width: 1; stroke-dasharray: 2 4; }
.pv-label {
  fill: var(--pv); font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  text-anchor: middle; letter-spacing: 0.06em;
}
.pv-sub {
  fill: var(--fg-faint); font-family: var(--font-mono); font-size: 7.5px;
  text-anchor: middle;
}
.pv-crate { transition: opacity 220ms var(--ease); }
@keyframes pvin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pv-crate { animation: pvin 320ms var(--ease) both; }

/* ---- Juno composer sits in the middle of its column ------------------- */
.juno-main { justify-content: center; }
.juno-composer-inner { max-width: 720px; margin: 0 auto; }
.juno-compose-row { position: relative; justify-content: center; }
.juno-compose-row .juno-input-wrap { flex: 1 1 auto; }
/* New chat hangs off the right of the bar rather than sharing its width, so
   the bar itself stays centred in the column. */
.juno-compose-row .jnew { position: absolute; left: calc(100% + 10px); top: 0; }
@media (max-width: 1320px) {
  .juno-compose-row .jnew { position: static; }
}

/* ===========================================================================
   V31: composer holds still, one aside panel
   ======================================================================== */

/* ---- The composer does not move ---------------------------------------
   Centring the whole column meant the bar drifted upward as the thread grew.
   The bar now sits at a fixed height off the foot and the conversation stacks
   above it, which is what a chat is. */
.juno-main { justify-content: flex-end; }
.juno-main .juno-scroll {
  flex: 1 1 auto; min-height: 0; max-height: none;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.juno-thread { width: 100%; }
.juno-composer { flex: 0 0 auto; padding: var(--sp-6) var(--sp-7) var(--sp-9); }

/* The bar is centred on the column at every width. Room is reserved on both
   sides for New chat, so the bar itself never shifts when the button appears
   or loses its label. */
.juno-composer-inner { width: min(720px, 100% - 300px); max-width: none; margin: 0 auto; }
.juno-compose-row { position: relative; display: flex; }
.juno-compose-row .juno-input-wrap { flex: 1 1 auto; min-width: 0; }
.juno-compose-row .jnew {
  position: absolute; left: calc(100% + 10px); top: 0; bottom: 0; height: auto;
}
@media (max-width: 1100px) { .juno-composer-inner { width: min(720px, 100% - 140px); } }
@media (max-width: 700px)  { .juno-composer-inner { width: calc(100% - 120px); } }

.juno-foot-note { margin-top: var(--sp-5); text-align: left; }
.juno-suggests { justify-content: flex-start; margin-top: var(--sp-4); }

/* ---- Order details aside ---------------------------------------------- */
.bkpanel.pvizpanel { display: grid; place-items: center; text-align: center; }
.pvizwrap { height: 132px; max-width: 250px; }
.pvizfacts {
  width: 100%; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-subtle); text-align: left;
}

/* ===========================================================================
   V32: only the chat log scrolls, settings tabs stop scrolling sideways
   ======================================================================== */

/* ---- Juno: the bar and the history column are fixed furniture ---------
   The conversation column had no min-height of its own, so it refused to
   shrink and grew past the window instead of letting the thread scroll. That
   pushed the composer down out of view as the chat got longer. Both columns
   now shrink, which leaves the thread as the only thing that moves. */
.juno-col { min-height: 0; }
.juno-main { min-height: 0; }
.juno-main .juno-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.juno-composer { flex: 0 0 auto; }

.juno-hist { min-height: 0; }
.juno-hist-h { flex: 0 0 auto; }
.juno-hist-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ---- Settings tabs wrap rather than scroll ----------------------------
   Eight tabs are wider than the settings column, and the horizontal scroller
   that produced was a bar nobody wants on a desktop. They wrap instead, and
   only fall back to scrolling on a phone where wrapping would eat the page. */
.page.narrow { max-width: 860px; }
.page .tabline {
  overflow: visible; flex-wrap: wrap;
  gap: 0 var(--sp-6); row-gap: 0;
}
.page .tabline button { white-space: nowrap; }
@media (max-width: 640px) {
  .page .tabline { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ===========================================================================
   V33: the time control survives its own container, greeting sits centred
   ======================================================================== */

/* ---- Time fields in the order flow -------------------------------------
   `.bkhours span { display: block }` predates the wrapper and was flattening
   it, so the clock icon and the field stacked instead of sitting in a row.
   The wrapper and the label are addressed separately now. */
.bkhours .tinp-b { display: flex; align-items: center; margin-bottom: 0; }
.bkhours .tinp > span:first-child {
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fg-faint);
}
.bkhours .tinp-b input[type="time"] {
  width: 100%; height: auto; border: 0; background: none; padding: 0;
  border-radius: 0; box-shadow: none;
}
.bkhours .tinp-b input[type="time"]:focus { border: 0; box-shadow: none; }
.hours .tinp-b input[type="time"] { width: 100%; }

/* ---- The greeting sits in the middle until there is a conversation ----- */
.juno-scroll:has(.juno-open) { justify-content: center; }
.juno-open { padding-bottom: var(--sp-8); }

/* ===========================================================================
   V34: the navigation list keeps its own height
   ======================================================================== */

/* The nav had `overflow: auto`, so whenever the rail ran short it was the
   first thing to give: the list gained its own scrollbar and the top of the
   sidebar slid away. It takes its natural height now and never shrinks. The
   rail carries the scrolling instead, and only when the content genuinely
   does not fit, so nothing scrolls at the default size. */
.rail { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.rail-scroll { flex: 0 0 auto; overflow: visible; min-height: auto; }
.rail-foot { flex: 0 0 auto; margin-top: auto; }