/* =====================================================================
   Freight Compare — design system

   DIRECTION: "Docket"
   The reference is Wise: expose the fee everyone else hides, and let one
   honest number carry the page. What is deliberately NOT borrowed is
   Wise's soft fintech shell — the 30–40px radii and the pill buttons.
   This is a document, not an app. Hairlines, near-square corners, and a
   money column that lines up the way a consignment note lines up.

   COLOUR IS BRAND-NEUTRAL ON PURPOSE.
   A marketplace listing competing carriers cannot wear one carrier's
   colours. Signal yellow reads as road and freight without belonging to
   any operator on the list. Green and rust are reserved for semantics —
   green means "this price is the whole price", rust means "this is what
   gets added on top" — so colour is doing work, not decoration.
   ===================================================================== */

:root {
  /* Ink and paper */
  --ink:          #16170f;
  --ink-soft:     #4a4c40;
  --ink-faint:    #7d7f71;
  --paper:        #f4f2ea;
  --surface:      #ffffff;
  --surface-sunk: #fbfaf5;

  /* Brand signal */
  --signal:       #ffd400;
  --signal-deep:  #e0b800;

  /* Semantics — these carry meaning, never decoration */
  --inclusive:      #0a6236;
  --inclusive-wash: #e4f2e9;
  --levy:           #a83c17;
  --levy-wash:      #fbeae3;

  /* Rules and shadow */
  --rule:        rgba(22, 23, 15, 0.14);
  --rule-strong: rgba(22, 23, 15, 0.30);
  --ring:        0 0 0 1px rgba(22, 23, 15, 0.12);

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans:    'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* 8px grid */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s6: 48px; --s8: 64px; --s12: 96px;

  --shell: 1140px;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s3);
}

:where(a) { color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Demo strip
   --------------------------------------------------------------------- */
.demo-strip {
  background: var(--signal);
  color: var(--ink);
  font-size: 14px;
  padding: 10px var(--s3);
  text-align: center;
  border-bottom: 1px solid var(--ink);
}
.demo-strip strong { font-weight: 700; }

/* ---------------------------------------------------------------------
   Masthead
   --------------------------------------------------------------------- */
.masthead {
  background: var(--ink);
  color: var(--paper);
}
.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s2);
}
.wordmark {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1;
  /* The type is 22px but the target must clear 48px on touch. */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.wordmark span { color: var(--signal); }
.masthead-claim {
  margin: 0;
  font-size: 14px;
  color: rgba(244, 242, 234, 0.72);
}

/* ---------------------------------------------------------------------
   Search band
   --------------------------------------------------------------------- */
.search-band {
  padding-block: var(--s8) var(--s6);
  border-bottom: 1px solid var(--rule);
}

.lede {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 850;
  font-size: clamp(38px, 6.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s3);
  /* Wide enough to hold "What does it actually cost" on one line, so the
     manual break lands where it is written. */
  max-width: 22ch;
}
.lede em {
  font-style: normal;
  /* The one place the signal colour is used typographically: on the
     single word the whole product turns on. */
  background: linear-gradient(transparent 62%, var(--signal) 62%, var(--signal) 94%, transparent 94%);
}
.lede-sub {
  margin: 0 0 var(--s6);
  max-width: 58ch;
  font-size: 18px;
  color: var(--ink-soft);
}

/* ---- The docket ---------------------------------------------------- */
.docket {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(22, 23, 15, 0.07);
}

.docket-route,
.docket-load {
  display: grid;
  gap: var(--s3);
  padding: var(--s3);
  border-bottom: 1px solid var(--rule);
}

.docket-route {
  grid-template-columns: 1fr 56px 1fr;
  align-items: start;
}
.docket-load {
  grid-template-columns: 140px 160px 1fr;
}

/* The route rule between the two addresses. Not decoration: it is the
   one glyph that says "this is a journey" without a word of copy. */
.route-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 38px;
  color: var(--ink-faint);
}
.route-dot {
  width: 7px; height: 7px;
  border: 2px solid var(--ink); border-radius: 50%;
}
.route-line {
  flex: 1; height: 2px;
  background-image: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
  background-size: 6px 2px;
}
.route-arrow { font-size: 13px; color: var(--ink); }

.field { min-width: 0; }
/* Field captions. Scoped with :not(.tick) so the checkbox labels inside
   a fieldset keep sentence case at reading size. */
.field > label,
.field legend {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
  padding: 0;
}
.optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-faint);
}

.field input[type="text"],
.field input[type="number"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 17px;
  padding: 12px 14px;
  min-height: 48px;
  color: var(--ink);
  background: var(--surface-sunk);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}
.field input::placeholder { color: var(--ink-faint); }

.hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---- Autocomplete -------------------------------------------------- */
.field-address { position: relative; }
.suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% - 18px);
  left: 0; right: 0;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(22, 23, 15, 0.16);
  max-height: 280px;
  overflow-y: auto;
}
.suggestions li {
  padding: 12px 14px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--s1);
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.suggestions li:last-child { border-bottom: 0; }
.suggestions li[aria-selected="true"],
.suggestions li:hover {
  background: var(--signal);
}
.suggestions .sg-code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  margin-left: auto;
}

/* ---- Stepper ------------------------------------------------------- */
.stepper {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-sunk);
}
.stepper input {
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  background: transparent !important;
  font-family: var(--mono) !important;
  font-weight: 600;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step {
  min-height: 48px;
  border: 0;
  background: var(--surface);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.step:hover { background: var(--signal); }

.suffixed { position: relative; }
.suffixed .suffix {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-faint);
  pointer-events: none;
}
.suffixed input { padding-right: 40px !important; }

/* ---- Extras -------------------------------------------------------- */
.field-extras { border: 0; margin: 0; padding: 0; min-width: 0; }
.extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s1) var(--s2);
}
.tick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 15px;
  cursor: pointer;
  color: var(--ink);
}
.tick input {
  width: 20px; height: 20px;
  accent-color: var(--ink);
  flex: none;
  cursor: pointer;
}

/* ---- Submit -------------------------------------------------------- */
.docket-go {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  flex-wrap: wrap;
}
.go {
  font-family: var(--display);
  font-variation-settings: 'wdth' 105, 'wght' 750;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--signal);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 14px var(--s4);
  min-height: 52px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.go:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.go[disabled] { opacity: 0.55; cursor: progress; transform: none; box-shadow: 4px 4px 0 var(--ink); }
.go-note { margin: 0; font-size: 14px; color: var(--ink-faint); }

/* Reads as a rejected docket, not a generic alert callout. Same bordered
   surface and offset shadow as .docket itself, in the levy colour, so the
   error belongs to this design language rather than borrowing the 4px
   left-bar every framework ships with. */
.form-errors {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--levy-wash);
  border: 1px solid var(--levy);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 rgba(168, 60, 23, 0.16);
  color: var(--levy);
  font-size: 15px;
}
.form-errors ul { margin: var(--s1) 0 0; padding-left: 20px; }

/* ---------------------------------------------------------------------
   Results
   --------------------------------------------------------------------- */
.results { padding-block: var(--s8) var(--s12); }

.results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s4);
}
.lane {
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 800;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.lane .lane-meta {
  display: block;
  font-family: var(--sans);
  font-variation-settings: normal;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-top: 6px;
}
.spread {
  font-size: 15px;
  color: var(--ink-soft);
  text-align: right;
}
.spread strong {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.distance-notice {
  margin: 0 0 var(--s3);
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--surface-sunk);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 10px var(--s2);
}

/* ---- The ledger ---------------------------------------------------- */
.ledger { list-style: none; margin: 0; padding: 0; }

.row {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  margin-bottom: var(--s2);
}
/* The cheapest result earns the emphasis. Nothing else does. */
.row.is-best { border: 2px solid var(--ink); box-shadow: 6px 6px 0 rgba(22,23,15,0.08); }

.row-main {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3);
}

/* A numbered index, not a kicker label. It gives the list rhythm and
   states the rank as a fact. */
.rank {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1;
}
.row.is-best .rank { color: var(--ink); }

.row-id { min-width: 0; }
.carrier-name {
  font-family: var(--display);
  font-variation-settings: 'wdth' 104, 'wght' 750;
  font-size: 23px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.row-meta {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.row-meta .dot { color: var(--rule-strong); margin-inline: 6px; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
}
.badge-inclusive { background: var(--inclusive); color: #fff; }
.badge-verified  { background: var(--surface-sunk); color: var(--ink-soft); border: 1px solid var(--rule-strong); }
.badge-owned     { background: var(--signal); color: var(--ink); border: 1px solid var(--ink); }

/* ---- The money column --------------------------------------------- */
.row-price { text-align: right; }
.total {
  font-family: var(--mono);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.total-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 8px 0 0;
}
.delta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--levy);
  margin: 4px 0 0;
}

/* The Wise move, applied symmetrically: what they advertise against
   what you pay. Shown for every plus-plus carrier, ours included. */
.advertised {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.advertised s { color: var(--ink-faint); text-decoration-thickness: 1px; }
.advertised .added {
  color: var(--levy);
  font-family: var(--mono);
  font-weight: 500;
}

/* ---- Breakdown ----------------------------------------------------- */
.toggle {
  width: 100%;
  text-align: left;
  background: var(--surface-sunk);
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 12px var(--s3);
  min-height: 48px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 0 0 var(--radius) var(--radius);
}
.toggle:hover { background: var(--signal); color: var(--ink); }
.toggle::after { content: ' ▾'; }
.toggle[aria-expanded="true"]::after { content: ' ▴'; }

.breakdown {
  padding: var(--s3);
  border-top: 1px solid var(--rule);
  background: var(--surface-sunk);
}
.breakdown dl { margin: 0; }
.bd-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 15px;
}
/* Dotted leaders, the way a printed invoice does it. Makes a column of
   figures readable without drawing a table. */
.bd-line dt { flex: none; color: var(--ink-soft); }
.bd-line .leader {
  flex: 1;
  border-bottom: 1px dotted var(--rule-strong);
  transform: translateY(-4px);
}
.bd-line dd {
  margin: 0;
  flex: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.bd-line.is-levy dt, .bd-line.is-levy dd { color: var(--levy); }
.bd-line.is-total {
  border-top: 2px solid var(--ink);
  margin-top: var(--s1);
  padding-top: var(--s2);
  font-weight: 700;
}
.bd-line.is-total dd { font-size: 19px; font-weight: 600; }
.bd-note {
  margin: var(--s2) 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}
.bd-disclosure {
  margin: var(--s2) 0 0;
  padding: 10px var(--s2);
  background: var(--signal);
  border-radius: var(--radius);
  font-size: 14px;
}

/* ---------------------------------------------------------------------
   Unavailable + policy + empty
   --------------------------------------------------------------------- */
.unavailable {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.unavailable h2 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 104, 'wght' 700;
  font-size: 18px;
  margin: 0 0 var(--s2);
}
.unavailable ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }
.unavailable li { margin-bottom: 6px; }

.policy {
  margin-top: var(--s6);
  padding: var(--s4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
}
.policy h2 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 800;
  font-size: 24px;
  margin: 0 0 var(--s2);
  letter-spacing: -0.02em;
}
.policy p { margin: 0 0 var(--s3); max-width: 66ch; color: rgba(244,242,234,0.86); font-size: 16px; }
.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin: 0;
}
.policy-grid dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--signal);
  margin-bottom: 6px;
}
.policy-grid dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper);
}
.policy-ref {
  margin: var(--s3) 0 0 !important;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(244,242,234,0.6) !important;
}

.empty { padding-block: var(--s8); }
.empty h2 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 800;
  font-size: 32px;
  margin: 0 0 var(--s2);
}
.empty p { margin: 0; color: var(--ink-soft); max-width: 60ch; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--s4);
  background: var(--surface-sunk);
}
.foot p { margin: 0 0 var(--s1); font-size: 14px; color: var(--ink-soft); max-width: 74ch; }
.foot-disclosure { font-weight: 600; color: var(--ink) !important; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .docket-load { grid-template-columns: 1fr 1fr; }
  .field-extras { grid-column: 1 / -1; }
  .policy-grid { grid-template-columns: 1fr; gap: var(--s2); }
}

@media (max-width: 640px) {
  .shell { padding-inline: var(--s2); }

  .search-band { padding-block: var(--s4) var(--s4); }
  .results { padding-block: var(--s4) var(--s6); }

  /* The route glyph is horizontal by nature. Stacked, it would point
     the wrong way, so it is replaced rather than rotated. */
  .docket-route { grid-template-columns: 1fr; gap: var(--s2); }
  .route-rule { display: none; }
  .field-address + .route-rule + .field-address { position: relative; }

  .docket-load { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .extras { grid-template-columns: 1fr; }

  .go { width: 100%; }
  .docket-go { flex-direction: column; align-items: stretch; text-align: center; }

  .row-main {
    grid-template-columns: 40px 1fr;
    gap: var(--s2);
    padding: var(--s2);
  }
  .row-price {
    grid-column: 1 / -1;
    text-align: left;
    padding-top: var(--s2);
    border-top: 1px solid var(--rule);
  }
  .rank { font-size: 20px; }
  .carrier-name { font-size: 20px; }
  .total { font-size: 34px; }

  .results-head { flex-direction: column; align-items: flex-start; }
  .spread { text-align: left; }

  .policy { padding: var(--s3); }
  .toggle, .breakdown { padding-inline: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .go:hover, .go:active { transform: none; }
}