/* Drive Log, a By.Cadence app (16 Oct 2026): By.Cadence tokens from
   _business\assets\brand\tokens.css, so any assessor can use it unbranded. Forest for
   actions and headings, ember as the one decorative accent (never small text), pill buttons.
   Big targets, readable in a car. Light only. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url(fonts/plus-jakarta-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url(fonts/plus-jakarta-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url(fonts/plus-jakarta-sans-700.woff2) format("woff2"); }
:root {
  --bg: #f7f8f2;          /* canvas */
  --card: #ffffff;
  --ink: #091a0d;
  --muted: #49574b;
  --line: #c8cdbb;
  --accent: #163c20;      /* forest */
  --accent-ink: #ffffff;
  --brand: #163c20;
  --ember: #d67523;
  --good: #2f6b3a;
  --danger: #a23b2a;
  /* Severity runs light to dark so it still reads without colour. Minor and Moderate take dark text. */
  --sev-obs: #49574b;     /* N/A, and Observation on entries from the old scale */
  --sev-minor: #e5c096;
  --sev-moderate: #d67523;
  --sev-major: #a23b2a;
  --sev-int: #091a0d;
  --radius: 14px;
  --tap: 64px;
  --head: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
/* The sheet and other display:flex blocks would otherwise ignore the hidden attribute. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 17px/1.4 var(--head);
  color: var(--ink); background: var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
}
.screen { max-width: 900px; margin: 0 auto; padding: 0 16px 40px; }
.bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; padding: 10px 0; position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.bar h1, .bar h2 { margin: 0; font: 700 19px var(--head); letter-spacing: -.01em; color: var(--brand); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand { text-align: center; padding: 40px 0 8px; }
.brand .app-name { margin: 0; font: 700 34px var(--head); letter-spacing: -.02em; color: var(--brand); }
.brand p { margin: 4px 0 0; font: 400 17px var(--head); color: var(--muted); }
.brand p::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--ember); margin: 14px auto 0; }
.maker { text-align: center; margin-top: 32px; }
.wordmark { font: 700 16px var(--head); letter-spacing: -.02em; color: var(--brand); }
.wordmark .dot { color: var(--ember); }
.home-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 24px; }
.section { font: 600 13px var(--head); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.bar > :first-child { justify-self: start; }
.bar > :last-child { justify-self: end; }

button {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 48px; padding: 10px 16px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button:active { transform: scale(0.98); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font: 600 17px var(--head); border-radius: 100px; padding-left: 22px; padding-right: 22px; }
button.ghost { background: transparent; border-color: transparent; color: var(--accent); }
button.outline { border-color: var(--accent); color: var(--accent); border-radius: 100px; font-weight: 600; }
button.danger { color: var(--danger); }
button.small { min-height: 44px; padding: 6px 12px; font-size: 15px; }
button.big { min-height: var(--tap); font-size: 19px; }
button[disabled] { opacity: .5; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 12px 0 20px;
}
.grid button {
  min-height: var(--tap); font: 600 19px var(--head); color: var(--brand);
  background: var(--card); border-bottom: 3px solid var(--ember);
}
.grid button.wide { grid-column: span 2; }
#manoeuvre-wrap { margin-top: 12px; }
#manoeuvre-wrap .grid { margin-top: 6px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  cursor: pointer;
}
.item .num { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.item .main { min-width: 0; }
.item .title { font-weight: 600; }
.item .sub { color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .sev { font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 8px; color: #fff; white-space: nowrap; }
.sev-observation, .sev-na { background: var(--sev-obs); }
.sev-minor { background: var(--sev-minor); }
.sev-moderate { background: var(--sev-moderate); }
.sev-major { background: var(--sev-major); }
.sev-intervention { background: var(--sev-int); }
.item .sev-minor, .item .sev-moderate { color: var(--ink); }
.item .sev-none { background: transparent; color: var(--muted); border: 1px dashed var(--muted); }
/* Home list: export state, deliberately not styled like a severity. */
.item .tag { font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 8px; white-space: nowrap; color: var(--danger); border: 1px solid currentColor; }
.item .tag-done { color: var(--good); }
/* Swipe-to-delete rows on the run screen: the item slides left over a Delete button. */
.swipe { position: relative; border-radius: var(--radius); overflow: hidden; }
.swipe-del { position: absolute; top: 0; right: 0; bottom: 0; width: 88px; border: 0; border-radius: 0; background: var(--danger); color: #fff; font-weight: 600; min-height: 0; }
.swipe .item { position: relative; transition: transform .2s ease; touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .swipe .item { transition: none; } }

.status-row { display: flex; gap: 14px; align-items: center; color: var(--muted); font-variant-numeric: tabular-nums; padding: 4px 0; }
.status-row #run-clock, .status-row #track-clock { font-weight: 700; color: var(--ink); }
.badge { font-size: 13px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); }
.badge.on { border-color: var(--good); color: var(--good); }
.status-row > button:last-child { margin-left: auto; }

/* isolation keeps Leaflet's z-index 400-1000 layers under the sticky bar; translateZ makes
   iOS Safari clip moving tiles to the rounded corners instead of spilling over the buttons. */
#map { height: 28vh; min-height: 180px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transform: translateZ(0); }
/* Tall screens only: a phone on its side is wide but short, and must keep the small map. */
@media (min-width: 700px) and (min-height: 600px) { #map { height: min(40vh, 380px); min-height: 300px; } }
#map.locating { display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--card); }
#map .leaflet-tile-pane { filter: saturate(0.3) brightness(1.04); } /* same as TILE_FILTER in map.js */
#map-wrap { margin: 8px 0; }
#map-wrap .row { margin: 6px 0 0; justify-content: space-between; }
#map-wrap .hint { margin: 0; }

.form { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.form label, .field-label { display: block; font-weight: 600; font-size: 15px; color: var(--muted); }
select#entry-manoeuvre, select#entry-behaviour { margin-bottom: 14px; font-weight: 600; }
.form input, textarea, select {
  display: block; width: 100%; margin-top: 6px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; min-height: 48px;
}
/* Big enough to write in with a Pencil. Scribble needs a real text field, which these are. */
textarea { min-height: 64px; resize: vertical; line-height: 1.5; }
textarea#entry-note { min-height: 120px; }
.muted { color: var(--muted); font-weight: 400; }
.small { font-size: 14px; }
.hint { color: var(--muted); font-size: 15px; margin: 18px 0 0; }
.row { display: flex; gap: 12px; align-items: center; margin: 8px 0 14px; }

/* Five ratings: widths follow the word lengths so "Intervention" fits on a phone. */
.seg { display: grid; grid-template-columns: .7fr 1fr 1.25fr 1fr 1.35fr; gap: 8px; margin: 6px 0 16px; }
.seg button { min-height: 56px; font-weight: 600; font-size: 15px; padding: 6px; }
.seg button.on { color: #fff; border-color: transparent; }
.seg button.on[data-sev="minor"], .seg button.on[data-sev="moderate"] { color: var(--ink); }
.seg button.on[data-sev="na"] { background: var(--sev-obs); }
.seg button.on[data-sev="minor"] { background: var(--sev-minor); }
.seg button.on[data-sev="moderate"] { background: var(--sev-moderate); }
.seg button.on[data-sev="major"] { background: var(--sev-major); }
.seg button.on[data-sev="intervention"] { background: var(--sev-int); }

.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet-card {
  background: var(--bg); width: 100%; max-width: 900px; max-height: 92vh; overflow: auto;
  border-radius: 20px 20px 0 0; padding: 4px 16px calc(20px + env(safe-area-inset-bottom));
}
@media (min-width: 700px) { .sheet { align-items: center; } .sheet-card { border-radius: 20px; } }

.details { margin: 8px 0 12px; gap: 10px; }
.details .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.conditions { display: flex; flex-direction: column; gap: 14px; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-weight: 600; font-size: 15px; color: var(--muted); padding: 0; margin-bottom: 6px; }
.form label.chip { display: inline-flex; color: var(--ink); font-weight: 500; }
.form .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 520px) { .details .three { grid-template-columns: 1fr; } }
.summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-top: 8px; }
.summary table { width: 100%; border-collapse: collapse; }
.summary td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.summary td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.import { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 4px; }
.details-wrap { margin: 20px 0 12px; border-top: 1px solid var(--line); }
.details-wrap > summary { cursor: pointer; padding: 14px 0; min-height: 48px; font-weight: 600; color: var(--brand); }
.steps { padding-left: 22px; }
.steps li { margin-bottom: 6px; }

/* Phone: every manoeuvre button above the fold with the map open. Three columns, a short
   map, a one-line status row. Budget on a 390x844 iPhone: bar 68 + status 36 + map 170 +
   buttons 5 rows of 56 = about 600px, inside the ~760px a Home Screen app gets. */
@media (max-width: 600px) {
  :root { --tap: 56px; }
  .screen { padding-left: 12px; padding-right: 12px; }
  .bar { padding: 6px 0; }
  .bar h1, .bar h2 { font-size: 17px; }
  .status-row { gap: 10px; font-size: 15px; white-space: nowrap; }
  .status-row .badge { font-size: 12px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .status-row > button:last-child { min-height: 44px; padding: 4px 10px; }
  #map { height: 22vh; min-height: 150px; max-height: 190px; }
  #map-wrap .hint { display: none; }
  #map-wrap .row { margin: 0; min-height: 0; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 16px; }
  .grid button { font-size: 16px; line-height: 1.15; padding: 6px 4px; }
  .grid button:last-child:nth-child(3n+1) { grid-column: 1 / -1; } /* a lone last button spans the row */
  .seg { gap: 6px; }
  .seg button { font-size: 13px; padding: 4px 1px; }
  .item { padding: 10px 12px; }
}
/* Phone on its side: too short to stack, so the map sits left and the buttons right. */
@media (orientation: landscape) and (max-height: 500px) {
  #screen-run { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-items: start; }
  #screen-run > .bar, #screen-run > .status-row, #run-list { grid-column: 1 / -1; }
  #map-wrap[hidden] + #manoeuvre-wrap { grid-column: 1 / -1; }
  #manoeuvre-wrap { margin-top: 0; }
  .bar { padding: 4px 0; }
  .status-row { padding: 0; }
  #map-wrap { margin: 0; }
  #map { height: calc(100vh - 120px); min-height: 160px; max-height: none; }
  #map-wrap .row { display: none; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; }
  .grid button { min-height: 44px; font-size: 15px; line-height: 1.1; padding: 4px; }
  .grid button:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* iPad landscape: the entry editor docks as a right-hand panel instead of a modal, so the
   manoeuvre buttons stay live on the left while she writes with the Pencil on the right.
   The left column is always 54vw, so nothing shifts under her finger when the panel opens. */
@media (orientation: landscape) and (min-width: 960px) {
  :root { --tap: 76px; --pane: 46vw; }
  #screen-run { max-width: none; margin: 0; width: calc(100vw - var(--pane)); padding-right: 20px; }
  #screen-run .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  #screen-run::after {
    content: "Tap a button to log an entry. The detail opens here, ready to write on with the Pencil.";
    position: fixed; top: 0; right: 0; bottom: 0; width: var(--pane); box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 40px; color: var(--muted); font: 500 19px var(--head);
    border-left: 1px solid var(--line); background: var(--card);
  }
  .sheet { inset: 0 0 0 auto; width: var(--pane); background: none; align-items: stretch; }
  .sheet-card {
    max-width: none; max-height: none; height: 100%; border-radius: 0;
    border-left: 1px solid var(--line); background: var(--card);
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top) 20px calc(16px + env(safe-area-inset-bottom));
  }
  .sheet-card .bar { background: var(--card); }
  .sheet-card .seg { margin-bottom: 12px; }
  .sheet-card textarea { font-size: 20px; line-height: 1.55; resize: none; }
  .sheet-card #entry-location { min-height: 72px; }
  /* The writing area fills whatever height is left, so the panel never needs scrolling mid-drive. */
  .sheet-card textarea#entry-note { flex: 1 1 auto; min-height: 220px; }
}

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; z-index: 30; font-size: 15px; }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }