:root {
  --color-header: #1f4435;
  --color-nav: #285943;
  --color-accent: #519872;
  --color-blue: #22598f;
  --color-sage: #a4b494;
  --color-sage-light: #bec5ad;
  --color-bg: #f7f8f5;
  --color-text: #1c2620;
  --color-border: #d8ddd0;
  --color-muted: #5b6b60;
  --color-stale: #8b8f89;
  /* Vehicle health tiers (green/orange/red, same bands as the phone app). */
  --color-ok: #519872;
  --color-warn: #c27a1a;
  --color-bad: #b3362f;
  /* PowerMow maps (js/mower-view.js): site features and coverage, all
     from the brand tokens above so a theme change follows. */
  --map-area: var(--color-accent);
  --map-keepout: var(--color-bad);
  --map-passage: var(--color-blue);
  --map-crossing: var(--color-warn);
  --map-dock: var(--color-header);
  --map-power: var(--color-sage-light);
  --map-zone-1: var(--color-sage-light);
  --map-zone-2: var(--color-blue);
  --map-zone-3: var(--color-warn);
  --map-zone-4: var(--color-sage);
  --map-blade-on: var(--color-sage-light);
  --map-blade-off: var(--color-blue);
  --font: 'Inter', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
}

nav {
  background: var(--color-nav);
  color: white;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand lockup - matches grainwavetech.com / GrainWavePartners exactly:
   icon.png + wordmark.png, both white-filtered for the dark nav bar (see
   GrainWavePartners CLAUDE.md), plus a pill badge naming this app. */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: white;
}

.nav-logo {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.nav-wordmark {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* "Atlas" - plain text, same treatment as the old .brand span (not a
   pill), sits right after the wordmark with a touch more breathing room
   than the icon/wordmark gap. Sized so its cap-height visually fills the
   same 32px the logo/wordmark occupy - Inter's cap-height is ~0.73x the
   font-size, so font-size needs to be well above 32px to actually match,
   not equal to it. */
.nav-app-name {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: white;
  margin-left: 0.25rem;
}

/* "Admin" - a separate small pill next to (not merged into) the app
   name, only present on the admin console's nav. */
.nav-badge {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.65;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

nav button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
}

nav button:hover {
  background: rgba(255, 255, 255, 0.1);
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
}

.card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

h1,
h2,
h3 {
  color: var(--color-header);
}

.auth-card {
  max-width: 380px;
  margin: 4rem auto;
  text-align: center;
}

input[type='email'] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.75rem 0;
}

button.primary {
  background: var(--color-accent);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
}

button.primary:hover {
  opacity: 0.9;
}

button.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status-message {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  min-height: 1.2em;
}

.status-message.error {
  color: #a33;
}

.status-message.success {
  color: var(--color-accent);
}

.device-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.device-chip {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: white;
  cursor: pointer;
  font-size: 0.9rem;
}

.device-chip.active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.overview-map {
  height: 420px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.device-overview-card {
  text-align: left;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-family: var(--font);
}

.device-overview-card:hover {
  border-color: var(--color-accent);
}

/* Briefly flags the card for a device that was just paired (see
   dashboard.js pollForNewlyPairedDevice) so it's obvious which new card
   appeared, rather than a customer having to spot one new tile among
   however many others they already have. Fades on its own - not tied to
   a click/dismiss action, since there's nothing wrong to acknowledge. */
.device-overview-card.just-paired {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(81, 152, 114, 0.35);
  animation: just-paired-fade 4s ease-out forwards;
}

@keyframes just-paired-fade {
  0%, 60% {
    box-shadow: 0 0 0 3px rgba(81, 152, 114, 0.35);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(81, 152, 114, 0);
  }
}

.device-overview-name {
  font-weight: 600;
  color: var(--color-header);
  margin-bottom: 0.2rem;
}

.device-overview-status {
  font-size: 0.85rem;
  color: var(--color-muted);
  overflow-wrap: break-word;
}

/* Device hasn't reported within its own normal publish interval - see
   .device-marker-dot.stale's comment for the same reasoning. */
.device-overview-status-stale {
  color: #a35d1f;
  font-weight: 600;
}

.device-overview-status + .device-overview-status {
  margin-top: 0.15rem;
}

/* Coordinates are secondary to the city/state line above them - lighter
   weight distinguishes the two without a heavier color change (this is
   already the muted status color; the city/state line above it just
   reads as more prominent by being first and not tabular). */
.device-overview-status-coords {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.detail-title {
  margin: 0;
  margin-right: auto;
}

.device-name-editor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.device-name-editor h2 {
  margin: 0;
}

.device-name-editor input[type='text'] {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: var(--font);
  min-width: 200px;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #778;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}

.icon-btn:hover {
  background: var(--color-bg);
  color: var(--color-header);
}

.telemetry-card {
  padding: 1.5rem;
}

.telemetry-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* No location data for this device - the map column is hidden, let
   charts take the full row instead of leaving a dead second column. */
.telemetry-layout.telemetry-layout-no-map {
  grid-template-columns: 1fr;
}

.telemetry-layout.telemetry-layout-no-map .chart-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (max-width: 900px) {
  .telemetry-layout {
    grid-template-columns: 1fr;
  }
}

.telemetry-map h2,
.telemetry-charts h2 {
  margin-top: 0;
}

#map,
#admin-map {
  height: 460px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

/* Custom device marker: a labeled circle, not a generic map pin - reads
   unambiguously as "a device is here" with its name always visible,
   rather than a place marker that needs a tap to identify. */
.device-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.device-marker-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

/* A device that hasn't reported in longer than its own normal publish
   interval allows for (see backend telemetry.py's adaptive per-device
   timeout) - greyed out rather than removed, since its last-known
   position is still real information, just possibly stale. */
.device-marker-dot.stale {
  background: var(--color-stale);
}

.device-marker-label {
  margin-top: 3px;
  padding: 0.1rem 0.5rem;
  background: white;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-header);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.chart-container {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem;
}

.chart-container h3 {
  margin-top: 0;
  font-size: 0.95rem;
}

.chart-container canvas {
  max-height: 190px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.export-buttons {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.export-buttons a {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
}

.export-buttons a:hover {
  background: var(--color-accent);
  color: white;
}

.empty-state {
  text-align: center;
  color: var(--color-muted);
  padding: 2rem;
}

.unmapped-note {
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Device self-service pairing (see DEVICE_ONBOARDING.md "Self-service
   pairing") - the toolbar's "+ Pair a device" button and the card it
   reveals below the device grid. */
#pair-device-btn {
  margin-left: auto;
}

#pairing-card p {
  color: var(--color-muted);
}

#pairing-card #cancel-pairing-btn {
  margin-top: 1rem;
}

.pairing-code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  /* Nudge the text visually back to centered - letter-spacing adds
     trailing space after the last character that isn't there before the
     first, so a naive centered block reads as off-center to the right
     without this. */
  padding-left: 0.35em;
  color: var(--color-header) !important;
  text-align: center;
  margin: 1rem 0 0.5rem;
}

.pairing-expiry {
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.form-note {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-top: -0.5rem;
}

.unmapped-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}

.unmapped-list li {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

.unmapped-list .signal-name {
  font-weight: 600;
  color: var(--color-header);
}

/* Admin console */

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.on {
  background: var(--color-accent);
  color: white;
}

.badge.off {
  background: var(--color-sage-light);
  color: #445;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

table th {
  color: var(--color-header);
  font-weight: 600;
}

table tr:hover td {
  background: var(--color-bg);
}

table td.actions {
  display: flex;
  gap: 0.4rem;
}

button.small {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

button.small:hover {
  background: var(--color-bg);
}

button.small.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

button.small.primary:hover {
  opacity: 0.9;
}

button.small.danger {
  background: white;
  border-color: #a33;
  color: #a33;
}

button.small.danger:hover {
  background: #a33;
  color: white;
}

.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.tab-btn {
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: #556;
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  color: var(--color-header);
  font-weight: 600;
  border-bottom-color: var(--color-accent);
}

.control-lock-note {
  background: #fff8e6;
  border: 1px solid #e8d29a;
  color: #6b5525;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--color-blue);
  text-decoration: none;
  font-size: 0.9rem;
}

.back-link:hover {
  text-decoration: underline;
}

.auth-about {
  margin-top: 20px;
  font-size: 0.85rem;
  text-align: center;
}
.auth-about a { color: var(--color-blue); }

/* --- Vehicles (phone app) - see js/vehicle-view.js --- */

.section-heading {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.6rem;
}

/* Health-coloured map dot for vehicles; a square-ish shape tells a vehicle
   apart from a round gateway dot at a glance. */
.device-marker-dot.vehicle {
  border-radius: 5px;
}
.device-marker-dot.band-green { background: var(--color-ok); }
.device-marker-dot.band-orange { background: var(--color-warn); }
.device-marker-dot.band-red { background: var(--color-bad); }
.device-marker-dot.band-none { background: var(--color-stale); }

.fleet-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fleet-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: center;
  width: 100%;
  text-align: left;
  background: white;
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-stale);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--color-text);
}
.fleet-row:hover { border-color: var(--color-accent); }
.fleet-row.level-red { border-left-color: var(--color-bad); }
.fleet-row.level-orange { border-left-color: var(--color-warn); }
.fleet-row.level-green { border-left-color: var(--color-ok); }

.fleet-name {
  font-weight: 600;
  color: var(--color-header);
}
.fleet-reasons {
  color: var(--color-muted);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.fleet-meta {
  color: var(--color-muted);
  font-size: 0.8rem;
  text-align: right;
  white-space: nowrap;
}

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-weight: 700;
  color: white;
  background: var(--color-stale);
}
.score-badge.band-green { background: var(--color-ok); }
.score-badge.band-orange { background: var(--color-warn); }
.score-badge.band-red { background: var(--color-bad); }
.score-badge.large {
  min-width: 4.2rem;
  height: 4.2rem;
  font-size: 1.5rem;
}

.vehicle-header-top {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.vehicle-header h2 { margin: 0; }
.vehicle-sub {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}
.vehicle-facts {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.fact-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-muted);
}
.fact-value {
  font-weight: 600;
  color: var(--color-header);
}
.code-list, .factor-list, .maint-list, .concern-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.code-list li, .factor-list li {
  padding: 0.35rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.code-list .code {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 0.5rem;
}
.muted { color: var(--color-muted); }

.vehicle-columns {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1.5rem;
  align-items: start;
}
.vehicle-columns .card h2 { margin-top: 0; }
@media (max-width: 900px) {
  .vehicle-columns { grid-template-columns: 1fr; }
}

.maint-list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.tier-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.25rem;
  background: var(--color-stale);
}
.tier-dot.tier-green { background: var(--color-ok); }
.tier-dot.tier-orange { background: var(--color-warn); }
.tier-dot.tier-red { background: var(--color-bad); }
.tier-dot.tier-unknown { background: var(--color-sage); }

.drive-list {
  display: flex;
  flex-direction: column;
}
.drive-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  padding: 0.65rem 0.25rem;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--color-text);
}
.drive-row:hover { background: var(--color-bg); }
.drive-when { font-weight: 600; color: var(--color-header); }
.drive-dist { color: var(--color-muted); font-size: 0.8rem; }

.chip {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  margin: 0.1rem 0.3rem 0.1rem 0;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-sage-light);
  color: var(--color-text);
}
.chip.urgency-high { background: var(--color-bad); color: white; }
.chip.urgency-medium { background: var(--color-warn); color: white; }
.chip.urgency-low { background: var(--color-sage-light); }
.chip.quiet { background: none; border: 1px solid var(--color-border); color: var(--color-muted); font-weight: 400; }

.drive-title { margin: 0; }
.drive-facts {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.export-buttons button.download {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-accent);
  background: white;
  color: var(--color-accent);
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: var(--font);
}
.export-buttons button.download:hover { background: var(--color-accent); color: white; }
.raw-missing-note { color: var(--color-muted); font-size: 0.85rem; max-width: 22rem; }

.concern-list li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--color-border);
}
.concern-head { font-weight: 600; color: var(--color-header); }
.concern-time { color: var(--color-muted); font-size: 0.8rem; margin-left: 0.4rem; }
.concern-explain { margin: 0.25rem 0 0; font-size: 0.9rem; }
.concern-list details { margin-top: 0.35rem; font-size: 0.85rem; color: var(--color-muted); }
.concern-list details summary { cursor: pointer; color: var(--color-blue); }
.concern-list pre {
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  background: var(--color-bg);
  padding: 0.5rem;
  border-radius: 4px;
}

#drive-map {
  height: 460px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}
.chart-legend-note {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin: -0.5rem 0 0.75rem;
}

@media (max-width: 600px) {
  main { padding: 1rem; }
  /* Keeps the full brand lockup but scaled, so it plus Account and Sign
     out fit a phone-width bar without horizontal scroll. */
  nav { padding: 0.75rem 1rem; gap: 0.5rem; }
  .nav-brand { gap: 0.4rem; }
  .nav-logo { height: 24px; }
  .nav-wordmark { height: 18px; }
  .nav-app-name { font-size: 1.3rem; }
  nav .nav-actions { gap: 0.75rem; }
  nav button { padding: 0.35rem 0.6rem; }
  .fleet-row { grid-template-columns: auto 1fr; }
  .fleet-meta { grid-column: 2; text-align: left; }
  .drive-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* Grid children default to min-width:auto, which let the map/charts push
   past the card edge on phones. */
.telemetry-layout > * { min-width: 0; }

/* Drive view: keep the route in view while scrolling the chart column. */
@media (min-width: 901px) {
  #drive-map-column { position: sticky; top: 1rem; }
}

.chart-container { min-width: 0; overflow: hidden; }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-link { color: white; text-decoration: none; font-size: 0.9rem; }
.nav-link:hover { text-decoration: underline; }

/* button.primary is full width for the sign-in form; toolbar-sized
   primary buttons (e.g. "+ Pair a device") size to their label. */
button.small.primary { width: auto; }

/* --- Account settings: data sharing with GrainWave (js/sharing-view.js) --- */
.account-card { max-width: 640px; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.account-card .form-note { margin-top: 1rem; }
.setting-title { font-weight: 600; color: var(--color-header); }
.setting-line { color: var(--color-muted); font-size: 0.9rem; margin-top: 0.2rem; }

.switch {
  flex: none;
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: var(--color-sage-light);
  cursor: pointer;
  transition: background 0.15s;
  padding: 0;
}
.switch.on { background: var(--color-accent); }
.switch:disabled { opacity: 0.6; cursor: progress; }
.switch:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.switch.on .switch-knob { transform: translateX(22px); }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-blue);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}
.inline-error {
  color: var(--color-bad);
  font-size: 0.9rem;
  margin: 0.75rem 0 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 38, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2000; /* above Leaflet panes */
}
.modal {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.modal h3 { margin-top: 0; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.modal-actions button.small { padding: 0.5rem 1rem; font-size: 0.9rem; }

.choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  cursor: pointer;
}
.choice:has(input[type='radio']:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, white);
}
.choice input[type='radio'],
.check-row input[type='checkbox'] {
  accent-color: var(--color-accent);
  width: 18px;
  height: 18px;
  margin: 0.1rem 0 0;
  flex: none;
}
.choice .muted { font-size: 0.85rem; }
.choice > span { flex: 1; min-width: 0; }
.check-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.35rem 0;
  cursor: pointer;
}
#sharing-vehicles-block { margin-top: 0.75rem; }
.vehicle-checklist {
  margin-left: 1.6rem;
  border-left: 2px solid var(--color-border);
  padding-left: 0.75rem;
}

/* Admin side: what a customer does not share with GrainWave. */
.sharing-placeholder {
  text-align: center;
  color: var(--color-muted);
  padding: 2rem 1rem;
}
.sharing-placeholder strong { display: block; color: var(--color-header); font-size: 1.05rem; margin-bottom: 0.35rem; }
.sharing-note {
  background: color-mix(in srgb, var(--color-blue) 7%, white);
  border: 1px solid color-mix(in srgb, var(--color-blue) 25%, white);
  color: var(--color-text);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.device-overview-status-unshared { font-style: italic; }

/* --- Date picker (js/date-picker.js): brand-styled, never the native one --- */
.dp { display: block; margin-top: 0.5rem; }
.dp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-muted);
  cursor: pointer;
}
.dp-toggle.has-value { color: var(--color-text); font-weight: 600; }
.dp-toggle:hover { border-color: var(--color-accent); }
.dp-toggle:focus-visible, .dp-nav:focus-visible, .dp-day:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
}
.dp-caret {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg) translateY(-2px);
}
.dp-toggle[aria-expanded='true'] .dp-caret { transform: rotate(-135deg) translateY(-1px); }
.dp-panel {
  margin-top: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: white;
  width: 100%;
  max-width: 300px;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.dp-month { font-weight: 600; color: var(--color-header); font-size: 0.95rem; }
.dp-nav {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  color: var(--color-header);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.dp-nav:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.dp-nav:disabled { opacity: 0.35; cursor: default; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: 0.75rem; color: var(--color-muted); padding: 0.2rem 0; }
.dp-day {
  aspect-ratio: 1;
  min-height: 2.1rem;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
}
.dp-day:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 12%, white); }
.dp-day.today { box-shadow: inset 0 0 0 1px var(--color-accent); }
.dp-day.selected { background: var(--color-accent); color: white; font-weight: 600; }
.dp-day:disabled { color: var(--color-sage-light); cursor: default; }

/* --- Toast notices (js/notice.js): styled stand-in for alert() --- */
.toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  z-index: 3000;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 420px;
  width: 100%;
  background: white;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem;
  color: var(--color-text);
}
.toast-error { border-left-color: var(--color-bad); }
.toast-success { border-left-color: var(--color-accent); }
.toast-text { flex: 1; overflow-wrap: anywhere; }
.toast-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0 0.1rem;
}
.toast-close:hover { color: var(--color-text); }
.confirm-dialog-body { color: var(--color-text); }
#state-confirm .link-btn { margin-top: 0.75rem; }

/* --- Vehicle data on Atlas (js/vehicle-data-view.js) --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tab-strip {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}
.tab-strip a {
  flex: none;
  padding: 0.6rem 0.9rem;
  color: var(--color-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tab-strip a:hover { color: var(--color-header); }
.tab-strip a.active { color: var(--color-header); border-bottom-color: var(--color-accent); font-weight: 600; }
.tab-strip a:focus-visible { outline: 3px solid var(--color-blue); outline-offset: -3px; }
.pane-note { font-size: 0.85rem; color: var(--color-muted); margin: 0 0 0.25rem; }
.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
  vertical-align: 1px;
}

.maint-list li.maint-item { display: block; padding: 0; }
.maint-row {
  display: grid;
  grid-template-columns: 12px 1fr 14px;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  cursor: pointer;
}
.maint-row:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; border-radius: 4px; }
.maint-row .caret {
  width: 8px; height: 8px; margin-top: 0.4rem;
  border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg); transition: transform 0.15s;
}
.maint-row[aria-expanded='true'] .caret { transform: rotate(225deg); margin-top: 0.6rem; }
.maint-text { min-width: 0; }
.maint-history { padding: 0 0 0.75rem 1.35rem; }
.entry-list { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.maint-list .entry-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding: 0.4rem 0;
  border-top: 1px dashed var(--color-border);
  font-size: 0.85rem;
}
.entry-line { min-width: 0; overflow-wrap: anywhere; }
.entry-actions { display: flex; gap: 0.75rem; }
.link-btn.danger-link { color: var(--color-bad); }

.health-summary { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.health-now { font-size: 2rem; font-weight: 700; color: var(--color-header); font-variant-numeric: tabular-nums; }
.health-chart { position: relative; height: 260px; }
.chart-container .health-chart canvas { max-height: none; }
.detail-foot { font-size: 0.85rem; margin: 0.75rem 0 0; }
.notif-list a { color: var(--color-blue); font-size: 0.88rem; }
.table-view { margin-top: 0.75rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem; }
.data-table th, .data-table td { text-align: left; padding: 0.3rem 0.5rem; border-top: 1px solid var(--color-border); }
.data-table th { color: var(--color-muted); font-weight: 500; }

.normal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.normal-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.9rem 1rem; }
.normal-card h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--color-header); }
.normal-card ul { list-style: none; padding: 0; margin: 0; }
.normal-card li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
}
.normal-band { color: var(--color-muted); }
.normal-range { font-weight: 600; font-variant-numeric: tabular-nums; }
.normal-meta { grid-column: 2; font-size: 0.8rem; }
.normal-class, .normal-foot { font-size: 0.8rem; margin: 0.6rem 0 0; }

.notif-list { list-style: none; padding: 0; margin: 0; }
.notif-list li { padding: 0.7rem 0; border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.notif-list li:first-child { border-top: none; }
.notif-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.notif-time { margin-left: auto; color: var(--color-muted); font-size: 0.8rem; }
.notif-list p { margin: 0.3rem 0 0.2rem; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0.5rem 0 1rem;
}
.detail-grid dt { font-size: 0.75rem; text-transform: uppercase; color: var(--color-muted); }
.detail-grid dd { margin: 0.1rem 0 0; font-weight: 600; color: var(--color-header); overflow-wrap: anywhere; }
.sub-heading { font-size: 0.95rem; margin: 0.5rem 0 0.25rem; color: var(--color-header); }
.plain-list { list-style: none; padding: 0; margin: 0.25rem 0 0.75rem; font-size: 0.88rem; }
.plain-list li { padding: 0.3rem 0; border-top: 1px solid var(--color-border); }

.field { display: block; margin: 0 0 0.9rem; }
.field > span { display: block; font-size: 0.85rem; font-weight: 500; color: var(--color-header); margin-bottom: 0.3rem; }
.field input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 1rem;
  background: white;
  color: var(--color-text);
}
.field input[type='text']:focus { outline: 2px solid var(--color-accent); outline-offset: 0; border-color: var(--color-accent); }

.phone-list { list-style: none; padding: 0; margin: 0; }
.phone-row { padding: 0.75rem 0; border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.phone-row:first-child { border-top: none; }
.phone-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.phone-head .tier-dot { margin-top: 0; }
.phone-lines { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0.3rem 0 0 1.35rem; }
.phone-row details { margin: 0.4rem 0 0 1.35rem; }
.setting-list { margin: 0.4rem 0 0; display: grid; gap: 0.2rem; }
.setting-list div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px dashed var(--color-border); padding: 0.25rem 0; }
.setting-list dt { color: var(--color-muted); }
.setting-list dd { margin: 0; font-weight: 600; text-align: right; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }

/* --- PowerMow mowers and sites (js/mower-view.js) --- */

.device-marker-dot.mower {
  border-radius: 50% 50% 4px 4px;
}
#site-details a { color: var(--color-blue); }
.battery-badge { font-size: 0.8rem; }
.battery-badge.large { font-size: 1.15rem; }
.site-links {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}
.site-chip { text-decoration: none; color: var(--color-blue); font-weight: 600; }
.site-chip:hover { border-color: var(--color-accent); }
.mower-map {
  height: 520px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: -0.4rem 0 0.6rem;
}
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-swatch { display: inline-block; width: 18px; height: 12px; }
.legend-swatch.fill { background: var(--swatch); opacity: 0.6; border: 2px solid var(--swatch); border-radius: 2px; }
.legend-swatch.line-thick { height: 6px; background: var(--swatch); border-radius: 3px; }
.legend-swatch.line-dashed { height: 0; border-top: 3px dashed var(--swatch); }
.legend-swatch.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--swatch); border: 2px solid white; box-shadow: 0 0 0 1px var(--color-border); }
#site-details .section-heading:first-child { margin-top: 0; }
@media (min-width: 901px) {
  #run-map-column, #site-layout > .telemetry-map { position: sticky; top: 1rem; }
}
@media (max-width: 600px) {
  .mower-map { height: 380px; }
}

/* --- Diagnostics log viewer (js/diagnostics-view.js) --- */
.diag-filters { display: grid; gap: 0.6rem; margin: 0.25rem 0 0.75rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-chip {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: white;
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--color-accent); }
.filter-chip.on { background: var(--color-accent); border-color: var(--color-accent); color: white; font-weight: 600; }
.filter-chip:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }
.diag-search-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.diag-search-row .small { flex: none; }
.code-input {
  padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: 6px;
  font: inherit; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; width: 14rem; max-width: 100%;
}
.code-input:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent); }
.diag-search {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.95rem;
}
.diag-search:focus { outline: 2px solid var(--color-accent); border-color: var(--color-accent); }
.diag-status { font-size: 0.85rem; margin: 0 0 0.4rem; }
.diag-list { list-style: none; padding: 0; margin: 0; max-height: 70vh; overflow-y: auto; border-top: 1px solid var(--color-border); }
.diag-row {
  display: grid;
  grid-template-columns: 11.5rem 6.5rem 1fr;
  gap: 0.2rem 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.84rem;
  align-items: start;
}
.diag-time { font-variant-numeric: tabular-nums; color: var(--color-muted); white-space: nowrap; }
.diag-kind { font-weight: 600; color: var(--color-header); }
.diag-msg { min-width: 0; overflow-wrap: anywhere; }
.diag-msg details { margin-top: 0.2rem; }
.diag-msg summary { color: var(--color-blue); cursor: pointer; font-size: 0.8rem; }
.diag-msg pre { margin: 0.3rem 0 0; padding: 0.5rem; background: var(--color-bg); border-radius: 4px; overflow-x: auto; font-size: 0.78rem; }
.diag-row.kind-crash .diag-kind { color: var(--color-bad); }
@media (max-width: 640px) {
  .diag-row { grid-template-columns: 1fr auto; }
  .diag-row .diag-msg { grid-column: 1 / -1; }
}
.phone-diag-btn { margin-left: auto; }
#drive-connlog-card .diag-list { margin-top: 0.5rem; }

/* Installed-app (standalone) polish: keep the dark nav clear of the iOS
   status bar / notch when the page runs edge to edge. */
@supports (padding: env(safe-area-inset-top)) {
  nav {
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-left: calc(1.5rem + env(safe-area-inset-left));
    padding-right: calc(1.5rem + env(safe-area-inset-right));
  }
}

/* "Add Atlas to your home screen" hint (js/pwa.js). */
.install-hint {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: white;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 10px;
  padding: 0.7rem 0.6rem 0.7rem 0.8rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  font-size: 0.88rem;
  color: var(--color-text);
  z-index: 2500;
}
.install-hint-icon { border-radius: 9px; flex: none; }
.install-hint-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.install-hint-body strong { color: var(--color-header); }
.install-hint-text { color: var(--color-muted); line-height: 1.35; }
.install-share-icon { vertical-align: -4px; color: var(--color-blue); }
.install-hint-btn {
  flex: none;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.install-hint-close {
  flex: none;
  background: transparent;
  border: none;
  color: var(--color-muted);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.install-hint-close:hover { color: var(--color-text); }