/* Mentats Drivers — mobile-first (design-spec: "touchscreen mobile
   friendly as a first approach"). A normal scrolling page, not the
   Garage Display's fixed-viewport kiosk layout — this is read on a
   driver's own phone, which can and should scroll. */
body.ds-root {
  min-height: 100vh;
  padding-bottom: var(--ds-space-5);
}

/* --- gate (index.html) ---
   .ds-auth-wrap/.ds-auth-card/.ds-ring are the design system's own login-
   screen components (styleguide: "Login screen"/"Decorative rings"),
   used as documented — only the app-specific bits (the eyebrow line, the
   left-aligned fields a centred auth card doesn't default to, the
   full-width submit) are overridden here. */
.ds-auth-card { padding: var(--ds-space-5); }
.ds-auth-card .ds-eyebrow { margin: 0 0 var(--ds-space-4); }
.ds-auth-card .ds-field { text-align: left; }
.gate-submit { width: 100%; margin-top: var(--ds-space-2); height: 2.8rem; }

/* --- app shell (app.html) --- */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-panel-border);
}
.app-header-logo { height: 48px; width: auto; } /* 50% larger than the original 32px */
.app-header h1 { font-size: 1rem; margin: 0; flex: 1; }
/* Sound toggle uses .ds-icon-btn/.ds-icon-btn-confirm as-is (see
   components.css and the styleguide's "Icon buttons" section) — no
   sound-specific sizing/colour override needed here, unlike the old
   emoji button this replaced. */

.app-main {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--ds-space-3) var(--ds-space-4);
}

/* --- info panel (pitlane limit / safety car / briefing) ---
   The <summary>/chevron styling itself is .ds-details (components.css,
   added 2026-10-01 — shared with Mentats' own Setup page rather than
   each bespoke-styling its own collapsible section); .info-panel here is
   just the content below it (.info-row etc). Still a plain <details> —
   free keyboard/touch support and state that survives a re-render, which
   this panel needs since car-grid/car-detail redraw on every poll but
   this shouldn't re-collapse out from under someone reading it. */
.info-row { padding: var(--ds-space-2) 0; border-bottom: 1px solid var(--ds-panel-border); }
.info-row:last-child { border-bottom: none; }
.info-row .info-label { display: block; font-size: 0.7rem; letter-spacing: var(--ds-tracking-wide); text-transform: uppercase; color: var(--ds-text-dim); margin-bottom: 2px; }
.info-row .info-value { white-space: pre-line; }

/* --- nomination notice ---
   Same .ds-alert-info + dismiss-button shape as Stint Board's own banner
   (components.js's delegated listener removes it from the DOM on click;
   app.js's own listener persists that in localStorage, same pattern as
   Stint Board's nominationBannerHideKey). */
#nomination-notice:empty { display: none; }
#nomination-notice .ds-alert { margin-bottom: var(--ds-space-3); }

/* --- messages --- */
#messages-area .ds-alert { margin-bottom: var(--ds-space-2); }
#messages-area .ds-alert:last-child { margin-bottom: var(--ds-space-3); }

/* Stint status colours — the same as the Mentats Stint Board and Garage
   Display (their app.css): on track green, approaching the end yellow, in
   pits blue, planned purple, stint complete orange (the theme accent). */
:root {
  --app-status-on-track: var(--ds-ok);
  --app-status-approaching: var(--ds-warn);
  --app-status-pits: var(--ds-info);
  --app-status-planned: #a371f7;
  --app-status-complete: var(--ds-accent-light);
}

/* --- car grid --- */
.car-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-3);
}
.car-tile {
  cursor: pointer;
  border-left: 4px solid var(--ds-panel-border);
  text-align: left;
  padding: var(--ds-space-3);
}
.car-tile.retired { opacity: 0.45; filter: grayscale(1); }
.car-tile.level-on-track { border-left-color: var(--app-status-on-track); }
.car-tile.level-planned { border-left-color: var(--app-status-planned); }
.car-tile.level-complete { border-left-color: var(--app-status-complete); }
.car-tile.level-pits { border-left-color: var(--app-status-pits); }
/* Warning bands (set from tickClocks); same as the Garage Display. Declared
   after the level rules so they win. */
.car-tile.warn-yellow { border-left-color: var(--app-status-approaching); }
.car-tile.warn-yellow-flash { animation: app-warn-flash 1.2s ease-in-out infinite; }
.car-tile.warn-red-flash { animation: app-danger-flash 0.8s ease-in-out infinite; }
@keyframes app-warn-flash {
  0%, 100% { border-left-color: var(--app-status-approaching); }
  50% { border-left-color: color-mix(in srgb, var(--app-status-approaching) 20%, var(--ds-panel-border)); }
}
@keyframes app-danger-flash {
  0%, 100% { border-left-color: var(--ds-danger); }
  50% { border-left-color: color-mix(in srgb, var(--ds-danger) 20%, var(--ds-panel-border)); }
}
[data-live-remaining].warn-yellow, [data-live-remaining].warn-yellow-flash { color: var(--app-status-approaching); }
[data-live-remaining].warn-red-flash { color: var(--ds-danger); }
/* Car number + current weather share a row, number left / weather right —
   weather comes from the live stint's own captured snapshot (set at Start
   Stint on Mentats), same "glimpse" concept as the Stint Board's own
   weather-glimpse, so it's blank until a car's first stint has started. */
.car-tile-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-2); }
.car-tile .car-tile-number { font-size: 1.6rem; font-weight: 700; margin: 0 0 4px; color: var(--ds-text-dim); }
.car-tile .car-tile-weather { font-size: 0.85rem; color: var(--ds-text-dim); white-space: nowrap; padding-top: 4px; }
.car-tile .car-tile-driver { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.car-tile .car-tile-stat { font-size: 0.75rem; color: var(--ds-text-dim); }
.car-tile .car-tile-stat strong { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.car-tile .idle { color: var(--ds-text-dim); font-size: 0.85rem; }

/* --- car detail --- */
#back-to-grid-btn { margin-bottom: var(--ds-space-3); }
.detail-top-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-2); }
.detail-top-row h2 { margin: 0; }
.detail-weather { font-size: 1rem; color: var(--ds-text-dim); white-space: nowrap; }
.detail-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-3);
  margin: var(--ds-space-3) 0;
}
.detail-stat { padding: var(--ds-space-3); text-align: center; }
.detail-stat .stat-label { display: block; font-size: 0.7rem; letter-spacing: var(--ds-tracking-wide); text-transform: uppercase; color: var(--ds-text-dim); margin-bottom: 4px; }
.detail-stat .stat-value { display: block; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.next-driver-alert { margin: var(--ds-space-3) 0; }

.stint-order-row {
  padding: var(--ds-space-2) var(--ds-space-3);
  border-left: 4px solid var(--ds-panel-border);
  margin-bottom: var(--ds-space-2);
  background: color-mix(in srgb, var(--ds-text-dim) 5%, transparent);
}
.stint-order-row { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.stint-order-main { display: flex; align-items: center; gap: var(--ds-space-3); }
.stint-order-caret { flex: 0 0 auto; color: var(--ds-text-dim); font-size: 0.8rem; }
.stint-order-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-3); margin-top: var(--ds-space-2); padding-top: var(--ds-space-2); border-top: 1px solid var(--ds-panel-border); font-variant-numeric: tabular-nums; }
.stint-order-details > div { display: flex; flex-direction: column; gap: 2px; }
.stint-order-detail-label { font-size: 0.7rem; letter-spacing: var(--ds-tracking-wide); text-transform: uppercase; color: var(--ds-text-dim); }
.stint-order-row.level-on-track { border-left-color: var(--app-status-on-track); }
.stint-order-row.level-planned { border-left-color: var(--app-status-planned); }
.stint-order-row.level-complete { border-left-color: var(--app-status-complete); }
.stint-order-row.level-pits { border-left-color: var(--app-status-pits); }
.stint-order-row .stint-order-num { flex: 0 0 auto; color: var(--ds-text-dim); font-size: 0.8rem; }
.stint-order-row .stint-order-driver { flex: 1; font-weight: 600; }
/* "so drivers know when the car is due in" — only ever present on the
   row that actually has one to show (started, not yet pitted); blank
   otherwise rather than a dash, so it doesn't read as a real time. */
.stint-order-row .stint-order-pitin { flex: 0 0 auto; font-size: 0.7rem; color: var(--ds-text-dim); font-variant-numeric: tabular-nums; }
.stint-order-row .stint-order-status { flex: 0 0 auto; font-size: 0.7rem; letter-spacing: var(--ds-tracking-wide); text-transform: uppercase; color: var(--ds-text-dim); }

/* Footer brand on the gate page — filled by branding.js from the theme. */
.app-footer-brand { position: fixed; bottom: var(--ds-space-3); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: var(--ds-space-2); font-size: 0.7rem; letter-spacing: var(--ds-tracking-wide); text-transform: uppercase; color: var(--ds-text-dim); text-decoration: none; }
.app-footer-brand[hidden], [data-brand][hidden] { display: none; }
.app-footer-brand img { height: 1rem; width: auto; }