/* ============================================================================
PLATFORM.CSS — Carrier vetting platform design system (single source of truth)
Generated from Vetting Platform Interface Style Guide v2 (2026-07-14).
Link this ONE file from every platform page:
Rules baked in: neutrals carry structure; the four status hues are the ONLY
saturated colors and always mean something; machine facts (MC/DOT, policy #s,
timestamps, hashes) go in .mono; every row/tile/finding carries a 4px status
spine; a verb keeps its name AND color through a whole flow. Never render a
tenant or product name in customer-facing copy — the platform is "the platform."
============================================================================ */
/* Fonts — one import brings the whole type system. (For fastest paint you may
instead keep the + font stylesheet in each page
and delete this @import.) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=IBM+Plex+Sans+Condensed:wght@600&family=IBM+Plex+Mono:wght@400;600&display=swap");
/* ============================================================================
DESIGN TOKENS
============================================================================ */
:root{
/* Chrome — dark app frame: topbar + nav rail */
--chrome:#141E2E; /* topbar + icon rail */
--chrome-2:#1B2839; /* chrome hover / raised */
--chrome-line:#2A3A50; /* chrome divider */
--chrome-text:#B9C6D8; /* chrome secondary text */
/* Neutrals — anchored graphite ramp; panels pop off a darker field */
--field:#3A5674; /* desk base tone (deep slate-blue) */
--desk-grid:rgba(255,255,255,.06);/* faint light grid on the dark desk */
--desk-glow:rgba(255,255,255,.10); --desk-sheen:rgba(150,180,215,.22); --desk-depth:rgba(70,110,150,.28);/* soft center lift */
--desk-cell:26px; /* grid cell size */
--panel:#FFFFFF; /* raised surface: cards, panels */
--well:#F1F4F8; /* insets: inputs, zebra — always LIGHTER than field */
--bubble-ai:#E8F1FB; /* assistant bubble fill */
--bubble-ai-line:#C6DBF1;/* assistant bubble edge */
--rule:#C9D1DC; /* hairline border */
--rule-strong:#AAB5C4; /* structural divider */
--ink:#0E1726; /* primary text */
--muted:#46536B; /* secondary text — must stay readable */
--faint:#7C8799; /* labels, placeholders (non-essential only) */
/* Primary — authoritative ink-blue: interactive, links, focus, active nav */
--primary:#1A57A6;
--primary-hover:#154A90;
--primary-press:#113C77;
--primary-tint:#DFEAF7;
--primary-ring:rgba(26,87,166,.45);
/* Status scale — the ONLY saturated colors. Reserved for meaning. */
--pos:#177347; --pos-tint:#D9EEE2; /* clear / approve / active */
--warn:#9A5300; --warn-dot:#D98A06; --warn-tint:#F8E9CB; /* caution / medium */
--crit:#AE1E12; --crit-tint:#F9E2DE; /* critical / high / decline / blocks */
--neutral:#46536B; --neutral-tint:#E4E8EE; /* unknown / pending / n/a */
/* Radius — tight and operational */
--r-sm:4px; /* inputs, buttons */
--r-md:6px; /* cards, panels */
--pill:999px; /* status dots + pills only */
/* Spacing — 4px grid */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
/* Type scale */
--t-label:12px; --t-meta:13px; --t-body:14px; --t-sub:16px;
--t-sec:19px; --t-title:24px; --t-big:30px;
/* Chrome dimensions */
--newway:#305D94; /* NewWay brand mark chip in the topbar */
--topbar:48px; --rail:56px; /* product nav is icon-only; labels on hover */
/* Elevation — whisper on panels, pop on true overlays */
--shadow-panel:inset 2px 0 0 0 rgba(16,28,46,.6), inset 0 -2px 0 0 rgba(16,28,46,.6), inset 0 1px 0 0 rgba(255,255,255,.6), -7px 8px 14px -7px rgba(228,240,255,.6), -3px 4px 7px -4px rgba(205,228,255,.42);
--shadow-pop:0 8px 28px rgba(14,23,38,.18), 0 1px 2px rgba(14,23,38,.12);
/* Motion */
--ease:cubic-bezier(.2,.6,.2,1); --fast:120ms; --med:160ms;
/* Density */
--row:36px; --row-compact:32px; --spine:4px; --tile:50px;
}
/* ============================================================================
BASE — reset, desk background, mono / condensed helpers
============================================================================ */
*{box-sizing:border-box}
strong,b{font-weight:600}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
margin:0;
font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
font-size:var(--t-body); line-height:1.5; color:var(--ink);
background-color:var(--field);
background-image:
linear-gradient(160deg, var(--desk-sheen), transparent 45%),
radial-gradient(1200px 600px at 78% -10%, var(--desk-glow), transparent 60%),
radial-gradient(900px 500px at 0% 100%, var(--desk-depth), transparent 55%),
linear-gradient(var(--desk-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--desk-grid) 1px, transparent 1px);
background-size:auto, auto, auto, var(--desk-cell) var(--desk-cell), var(--desk-cell) var(--desk-cell);
background-attachment:fixed;
-webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;font-variant-numeric:tabular-nums;}
.cond{font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;}
/* ============================================================================
APP SHELL — product frame (icon rail + workspace)
============================================================================ */
/* Product frame: an icon-only nav rail down the left, bright workspace to the
right. NO TOPBAR (removed 2026-07-21): it cost 48px of fixed chrome on every
page to show a title the rail already conveys, and being page-local it drifted
— three surfaces ended up with three different marks, type sizes and bar
heights. Everything it held moved somewhere with a better claim to it: the
brand mark and the broker name to the rail, list-scoped actions (TMS sync) to
the header of the list they act on, and page titles into the content area
where they scroll away instead of occupying permanent chrome. */
.appshell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh;}
.appshell .rail{align-self:stretch;}
.appshell .main{grid-column:2;}
/* ============================================================================
TOPBAR — RETIRED 2026-07-21. Rules kept only because the dispatch-family
pages (delivery/intransit/loaded) carry their own .topbar markup. Do not use
on an .appshell page: the grid no longer reserves a row for it.
============================================================================ */
.topbar{
position:sticky;top:0;z-index:40;
height:var(--topbar);display:flex;align-items:center;gap:var(--s3);
padding:0 var(--s4);background:var(--chrome);color:#fff;
border-bottom:1px solid var(--chrome-line);
}
.topbar__mark{width:26px;height:26px;border-radius:5px;background:var(--newway);
display:grid;place-items:center;color:#fff;flex:0 0 auto;}
.topbar__title{font-weight:600;font-size:var(--t-body);letter-spacing:-.01em;}
.topbar__sub{color:var(--chrome-text);font-size:var(--t-meta);}
.topbar__spacer{flex:1}
.topbar__meta{color:var(--chrome-text);font-size:var(--t-meta);}
/* ============================================================================
NAV RAIL — dark chrome, icon-only, labels on hover. Markup + inventory are
injected by /js/platform-nav.js into