/* Fonts — self-hosted, latin subset only. Big Shoulders is a variable font;
   the two @font-face rules below alias the same file at its 700 and 900
   instances, same as Google's own served CSS does. */
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/fonts/big-shoulders-display.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('/fonts/big-shoulders-display.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Stencil';
  src: url('/fonts/big-shoulders-stencil.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Materials of the job: a coroplast sign on a wire stake, planted in a
     lawn, read at a glance from the street. */
  --turf: #1e6b3c;
  --turf-deep: #123f27;
  --paper: #edf1e5;
  --panel: #fbfcf8;
  --ink: #17201a;
  --stake: #5b6657;
  --rule: #d3dbcb;
  --flag: #a54e17;
  --siren: #9a2e23;

  --display: 'Big Shoulders Display', system-ui, sans-serif;
  --stencil: 'Big Shoulders Stencil', var(--display);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--turf-deep); }

/* ------------------------------------------------------------------ nav --- */

nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: var(--panel);
  border-bottom: 3px solid var(--turf);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--turf-deep);
  text-decoration: none;
}
.brand .signicon { color: var(--turf); flex: none; }
.brand .wordmark {
  font: 800 1.375rem/1 var(--stencil);
  letter-spacing: .01em;
  padding-top: .1em; /* stencil face sits visually high in its box */
}
nav .who { margin-left: auto; color: var(--stake); font-size: .8125rem; }
nav a { color: var(--ink); }

main { max-width: 34rem; margin: 0 auto; padding: 24px 16px 64px; }
main.wide { max-width: 74rem; }

/* Campaign page: input panels on the left, the (potentially long) stops
   list on the right, so growing the list never pushes the forms down the
   page. Below the breakpoint there's no spare width to split, so it drops
   back to a single column — inputs first, stops last, since the forms are
   short and the list is what you're usually scrolling to reach. */
.layout-grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 20px; align-items: start; }
.layout-side .panel:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .layout-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ typography --- */

h1 {
  font: 900 clamp(1.9rem, 6vw, 2.5rem)/.98 var(--display);
  letter-spacing: .001em;
  margin: 0 0 .3rem;
  color: var(--turf-deep);
}
h2 {
  font: 700 1.125rem/1.15 var(--display);
  letter-spacing: .003em;
  margin: 0 0 .75rem;
  color: var(--ink);
}
.lede { color: var(--stake); font-size: .9rem; margin: 0 0 1.5rem; }
.crumb { font-size: .8125rem; margin: 0 0 .5rem; }
.crumb a { color: var(--stake); }
.note, .empty { color: var(--stake); font-size: .8125rem; }
.empty { padding: 10px 0; }
small { display: block; color: var(--stake); font-size: .75rem; margin-top: .25rem; font-weight: 400; }
code { font-size: .875em; background: #e2e8da; padding: 1px 4px; border-radius: 3px; }

/* --------------------------------------------------------------- panels --- */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--turf);
  border-radius: 8px;
  padding: 16px 16px 16px 15px;
  margin-bottom: 16px;
}
.panel.muted { background: transparent; border-left-color: var(--rule); }
.panel.muted h2 { color: var(--stake); }
.panel.danger-zone { border-left-color: var(--siren); }

.flash { border-radius: 6px; padding: 10px 12px; font-size: .875rem; margin: 0 0 10px; border: 1px solid transparent; }
.flash.ok { background: #e2ede2; color: var(--turf-deep); border-color: #c5dbc6; }
.flash.error { background: #f3e2dd; color: var(--siren); border-color: #e6c4bc; }
.flash.info { background: #e6eadf; color: var(--stake); }

/* ---------------------------------------------------------------- forms --- */

label { display: block; margin-bottom: 14px; font-size: .875rem; font-weight: 600; }
.checkline { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: .8125rem; margin-top: -6px; }
.checkline input[type=checkbox] { margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
input[type=file] { display: block; width: 100%; margin-top: 5px; font-size: .875rem; }
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--turf);
  outline-offset: 2px;
}
::placeholder { color: var(--stake); opacity: .8; }
textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; }

button {
  font: inherit;
  font-weight: 600;
  padding: 11px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
button.primary { background: var(--turf); border-color: var(--turf); color: #fff; }
button.primary:active { background: var(--turf-deep); }
button.primary:disabled { background: #b9c2ae; border-color: #b9c2ae; cursor: not-allowed; }
button.danger { background: var(--siren); border-color: var(--siren); color: #fff; }
.linkish {
  background: none; border: none; padding: 0; color: var(--turf-deep);
  text-decoration: underline; font-weight: 500; font-size: .8125rem;
}
a.linkish { margin: 0 10px; }
.linkish.danger { background: none; color: var(--siren); }
.inline { display: inline; }
.rowform { margin-top: 12px; }

a.go {
  display: block;
  text-align: center;
  background: var(--turf);
  color: #fff;
  text-decoration: none;
  font: 700 1.0625rem var(--display);
  letter-spacing: .01em;
  padding: 15px 12px;
  border-radius: 8px;
  margin-bottom: 18px;
}
a.go:active { background: var(--turf-deep); }

/* ------------------------------------------------------------- lists --- */

ul.cards { list-style: none; margin: 0 0 12px; padding: 0; }
ul.cards li { border-top: 1px solid var(--rule); padding: 13px 0; }
ul.cards li:first-child { border-top: none; }
ul.cards li > a { text-decoration: none; color: var(--ink); display: block; }
.cardrow { display: flex; align-items: flex-start; gap: 8px; }
.cardrow > a { flex: 1; min-width: 0; text-decoration: none; color: var(--ink); display: block; }
.cardtitle { display: block; font: 700 1.1rem var(--display); color: var(--turf-deep); }
.cardmeta { display: block; font-size: .8125rem; color: var(--stake); margin-top: 1px; }
.sharelink { font-size: .75rem; color: var(--turf-deep); }

.group { margin-bottom: 22px; }
.group:last-of-type { margin-bottom: 0; }
.group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 2px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 2px solid var(--turf);
}
.grouptitle { font: 700 1rem var(--display); color: var(--turf-deep); }
.groupmeta { font-size: .75rem; color: var(--stake); flex: 1; }
.group-head .linkish { font-size: .75rem; margin: 0; }

table.stops { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.stops th { text-align: left; font-size: .75rem; color: var(--stake); font-weight: 600; padding: 0 6px 6px 0; }
table.stops td { border-top: 1px solid var(--rule); padding: 9px 6px 9px 0; vertical-align: top; }
table.stops .num, table.stops .right { text-align: right; }
.addr { font-weight: 600; }
.sub { color: var(--stake); font-size: .8125rem; }

.movepick { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.movepick select {
  font-size: .75rem;
  padding: 3px 22px 3px 6px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  max-width: 10rem;
}
.movepick button { font-size: .75rem; margin: 0; }

/* Drag-and-drop is JS-only progressive enhancement; the <select> above is
   the real control until (or unless) app.js runs. See the inline script in
   layout() that flips <html> from .no-js to .js as early as possible. */
.no-js .draghandle { display: none; }
.js .movepick { display: none; }

.stopcell { display: flex; align-items: flex-start; gap: 8px; }
.draghandle {
  flex: none;
  color: var(--stake);
  padding: 4px 3px;
  margin-top: 1px;
  cursor: grab;
  touch-action: none;
}
.draghandle:hover { color: var(--turf-deep); }
.dragging { opacity: .35; }
.group.drop-target {
  outline: 2px dashed var(--turf);
  outline-offset: 6px;
  border-radius: 8px;
  background: #e7f0e9;
}
.drag-ghost {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--turf);
  border-radius: 7px;
  padding: 7px 12px;
  font-weight: 600;
  font-size: .875rem;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(23, 32, 26, .25);
}

.status { display: flex; flex-direction: column; gap: 3px; font-size: .8125rem; color: var(--stake); }
.statusline { display: flex; align-items: center; gap: 5px; }
.dot { flex: none; color: var(--turf); }
.dot-empty { color: var(--stake); }
.spinner { color: var(--turf); animation: spin .8s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}
.status .warn, .warn { color: var(--flag); font-size: .75rem; white-space: normal; }

/* CSS-only modal (:target, no JS) previewing a located stop's map. */
.modal { display: none; position: fixed; inset: 0; z-index: 100; }
.modal:target { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(23, 32, 26, .55); }
.modal-card {
  position: relative;
  width: min(30rem, calc(100% - 32px));
  margin: 10vh auto 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
}
.modal-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--stake);
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1;
}
.modal-card iframe { display: block; width: 100%; height: 260px; border: 0; border-radius: 8px; margin-bottom: 12px; background: var(--rule); }
.modal-card .go { margin-bottom: 0; }

/* A plain disclosure sitting inside an existing panel, not a card of its own. */
details.disclosure { margin-top: 14px; font-size: .875rem; }
details.disclosure summary { cursor: pointer; font-weight: 600; color: var(--turf-deep); }
details.disclosure summary::marker { color: var(--stake); }
details.disclosure form { margin-top: 12px; }

ol.stoplist { list-style: decimal; padding-left: 1.4rem; margin: 0; }
ol.stoplist li { padding: 8px 0; border-top: 1px solid var(--rule); }
ol.stoplist li.done { opacity: .5; text-decoration: line-through; }
ol.stoplist li::marker { color: var(--stake); font-weight: 600; }

.copyfield {
  width: 100%; padding: 10px 12px; font-family: ui-monospace, Menlo, monospace;
  font-size: .8125rem; border: 1px solid var(--rule); border-radius: 6px; background: #fff;
  margin-bottom: 8px;
}

/* auth + public run sheet */
.auth, .run { max-width: 26rem; margin: 40px auto; padding: 0 16px; }
.run { max-width: 32rem; margin: 20px auto; }
.hero { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hero .signicon { color: var(--turf); flex: none; }
.hero .wordmark { font: 800 2rem/1 var(--stencil); letter-spacing: .015em; color: var(--turf-deep); padding-top: .15em; }
.alt { font-size: .8125rem; color: var(--stake); }
.alt a { color: var(--turf-deep); }

/* run-sheet header: this is the ticket a driver actually holds */
/* The one other spot the stencil face earns its keep: the literal ticket a
   driver holds. Everywhere else under .run gets the plain display face. */
.ticket-title {
  font: 800 clamp(1.8rem, 8vw, 2.35rem)/1 var(--stencil);
  letter-spacing: .01em;
  color: var(--turf-deep);
}

ol.checklist { list-style: none; margin: 0; padding: 0; }
ol.checklist li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; border-top: 1px solid var(--rule);
}
ol.checklist form { display: flex; }
button.tick {
  width: 32px; height: 32px; padding: 0; flex: none;
  border-radius: 50%; border: 1.5px solid var(--turf);
  color: var(--turf); font-size: 1rem; line-height: 1;
  background: #fff;
}
ol.checklist li.done button.tick { background: var(--turf); border-color: var(--turf); color: #fff; }
ol.checklist .seq { width: 1.4em; flex: none; color: var(--stake); font: 700 .875rem var(--display); }
ol.checklist .drop { flex: 1; min-width: 0; }
ol.checklist .drop .addr { display: block; font: 600 1rem/1.25 var(--sans); }
ol.checklist .drop .sub { display: block; }
ol.checklist li.done .drop { opacity: .45; }
ol.checklist li.done .addr { text-decoration: line-through; }
ol.checklist .multi {
  flex: none; color: var(--flag); font-size: .75rem; font-weight: 700;
  border: 1px solid currentColor; border-radius: 20px; padding: 2px 8px; white-space: nowrap;
}
ol.checklist .pin { flex: none; font-size: .75rem; color: var(--turf-deep); }
.runfoot { margin-top: 20px; font-size: .8125rem; color: var(--stake); }

.startbox {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--flag);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: .875rem;
}
.startbox summary { cursor: pointer; font-weight: 600; }
.startbox summary::marker { color: var(--stake); }
.startbox form { margin-top: 12px; }
.startbox .note { margin: 8px 0 0; }

/* Small screens: nothing here needs its own breakpoint yet — main's fluid
   max-width and the flex/table layouts above already hold up at phone
   widths, which matters most for the driver-facing run sheet. */