/* Deliverup: tokens, type and the controls shared by the public site and the admin. */

@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Deliverup brand: orange #ff8935, slate #242829, charcoal #2c2a2b, blue-grey #303843, light grey #bbc1c1 */
  --ink: #242829;
  --ink-2: #4A5258;
  --ink-3: #6B7378;
  --paper: #F4F5F5;
  --surface: #FFFFFF;
  --line: #E1E4E4;
  --line-2: #C5CACA;
  --dark: #242829;
  --dark-2: #303843;
  --accent: #FF8935;
  --accent-strong: #F27518;
  --accent-deep: #B4500C;      /* the orange, darkened until it is readable as text on white */
  --accent-wash: #FFF1E6;
  --green: #14784F;
  --green-wash: #E3F3EB;
  --red: #BF372B;
  --red-wash: #FBE9E6;
  --focus: #242829;

  /* Chart series, checked for colour-blind separation: orange, blue, gold */
  --series-1: #E36F1A;
  --series-2: #2F74B5;
  --series-3: #A8891A;

  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);

  --r-s: 6px;
  --r-m: 10px;
  --tap: 46px;

  /* Spacing. One gutter for the whole site (the gap between content and the edge of the screen),
     and one rhythm for the space above and below sections. Both grow with the screen. */
  --gutter: 16px;
  --section: 44px;
  --gap: 16px;                   /* between panels and cards */
}
@media (min-width: 600px)  { :root { --gutter: 24px; --section: 56px; --gap: 20px; } }
@media (min-width: 1000px) { :root { --gutter: 32px; --section: 72px; --gap: 24px; } }
@media (min-width: 1500px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font: 400 0.9375rem/1.55 var(--font);
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.15; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-deep); }
img, svg, canvas { max-width: 100%; }
code { font-size: 0.9em; background: var(--paper); padding: 0.1em 0.35em; border-radius: var(--r-s); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-s); }

.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-s); }
.skip:focus { top: 8px; color: #fff; }

/* The logo. logo-light.png sits on light backgrounds, logo-dark.png on dark ones. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { display: block; height: 40px; width: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); max-width: 100%; padding: 8px 18px;
  font: 600 1rem/1.2 var(--font); color: var(--ink); text-decoration: none; text-align: center;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s);
  cursor: pointer;                /* long labels wrap inside the button instead of pushing the page wide */
}
.btn:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--ink); }
.btn--dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--dark-2); border-color: var(--dark-2); color: #fff; }
.btn--danger { color: var(--red); }
.btn--danger:hover { border-color: var(--red); color: var(--red); }
.btn--small { min-height: 40px; padding: 6px 12px; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-weight: 500; font-size: 0.9375rem; color: var(--ink); }
.field small { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.35; }
.field small:empty { display: none; }

input[type="text"], input[type="password"], input[type="date"], input[type="time"],
input[type="search"], input[type="email"], input[type="number"], select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px;
  font: 400 1rem/1.3 var(--font); font-variant-numeric: tabular-nums; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s);
  appearance: none; -webkit-appearance: none;
}
textarea { resize: vertical; line-height: 1.45; }
select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A5258' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent); outline-offset: 0; border-color: var(--ink); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red); background: var(--red-wash); }
.field__error { color: var(--red); font-size: 0.8125rem; font-weight: 500; }

.alert { padding: 12px 14px; border-radius: var(--r-s); border: 1px solid; margin: 0 0 16px; font-weight: 500; }
.alert--bad { background: var(--red-wash); border-color: #EBB9B2; color: #8C261D; }
.alert--good { background: var(--green-wash); border-color: #A9D8C0; color: #0E5A3A; }
.alert[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The stretches of a working day, used on the route page and the public performance page */
.s-to_depot, .s-to_home { background: #9AA3A8; }
.s-depot_wait { background: var(--series-3); }
.s-loadout { background: var(--series-2); }
.s-delivering { background: var(--series-1); }