/* ==========================================================================
   ASP Parking demo — dark-theme stylesheet (Phase 41, Plan 41-03)
   Design tokens, reset/base, and typography roles live in ../common.css
   (shared with docs/explorer/styles.css so the two pages stay visually in
   sync — palette + type + spacing originally adopted from the project's
   spike baseline, .planning/spikes/006-sign-coordinate-side/map.html). This
   file holds only the demo-page-specific rules (41-UI-SPEC contract).
   ========================================================================== */

a { color: var(--accent); }             /* Accent reserved use #6 — text links */
a:focus-visible,
button:focus-visible,
[role="radio"]:focus-visible,
#map:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* .hero / .hero-subhead live in ../common.css (shared with explorer). */

.mode-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  flex-wrap: wrap;
}
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.mode-option {
  background: var(--surface);
  color: var(--muted);
  border: 0;
  padding: var(--sp-sm) var(--sp-md);
  min-height: 44px;               /* touch target */
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.mode-option[aria-checked="true"] { color: var(--fg); background: #1b2130; }
.mode-status { color: var(--muted); }

/* .layout / .panel / #map (base rule) / .card live in ../common.css (shared
   with docs/explorer/styles.css). This file overrides #map's min-height at
   wider breakpoints below. */

/* --- Map region --- */
.map-region { display: flex; flex-direction: column; gap: var(--sp-sm); }

.primary-cta {                    /* Accent reserved use #1 */
  color: var(--accent);
  font-weight: 600;
  margin: 0;
}

.restriction-summary { margin: 0 0 var(--sp-xs); }
.restriction-meta { margin: 0 0 var(--sp-md); }

/* --- State chips --- */
.chip {
  display: inline-block;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--border);
}
.chip-positive { color: var(--positive); border-color: var(--positive); }  /* safe green */
.chip-warning  { color: var(--warning);  border-color: var(--warning);  }  /* urgency amber */
.chip-neutral  { color: var(--muted);    border-color: var(--border);   }

/* --- Profile picker --- */
.profile-picker {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
  flex-wrap: wrap;
}
.profile-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.profile-option {
  background: var(--surface);
  color: var(--muted);
  border: 0;
  padding: var(--sp-sm) var(--sp-md);
  min-height: 44px;               /* touch target */
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.profile-option[aria-checked="true"] {   /* Accent reserved use #4 — active profile */
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}

/* --- HA sensor card --- */
.sensor { margin-bottom: var(--sp-md); }
.sensor-entity { color: var(--muted); margin-bottom: var(--sp-xs); word-break: break-all; }
.sensor-state { margin: var(--sp-xs) 0 var(--sp-sm); }
.attrs { width: 100%; border-collapse: collapse; }
.attrs th,
.attrs td { text-align: left; padding: var(--sp-xs) 0; vertical-align: top; }
.attrs td:first-child { color: var(--muted); font-family: var(--font-mono); font-size: 14px; padding-right: var(--sp-md); white-space: nowrap; }
.attrs td:last-child { color: var(--fg); font-family: var(--font-mono); font-size: 14px; }

.copy-row { display: flex; align-items: center; gap: var(--sp-md); margin-top: var(--sp-md); flex-wrap: wrap; }
.btn-copy {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-sm) var(--sp-md);
  min-height: 44px;               /* touch target */
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.btn-copy:hover { border-color: var(--accent); }
.copy-status { color: var(--positive); }

/* --- Error state --- */
.error-state { border-color: var(--warning); }

/* ==========================================================================
   Surface 4 — calendar
   ========================================================================== */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
.calendar-day {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 14px;
}
/* Highlighted next-move cell — animation defined here, DISABLED under reduced-motion below. */
.calendar-day.is-next {
  color: var(--bg);
  background: var(--accent);       /* Accent reserved use #5 — next-move cell */
  border-color: var(--accent);
  font-weight: 600;
  transform: scale(1);
  opacity: 1;
  animation: cell-in 200ms ease-out both;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.calendar-day.is-today {
  color: var(--bg);
  background: var(--warning);      /* urgency amber if the next move is today */
  border-color: var(--warning);
  font-weight: 600;
  animation: cell-in 200ms ease-out both, ring-pulse 600ms ease-out 1;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

@keyframes cell-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ring-pulse {
  0%   { box-shadow: 0 0 0 0 var(--warning); }
  100% { box-shadow: 0 0 0 8px rgba(245, 166, 35, 0); }
}

/* .site-footer lives in ../common.css (shared with explorer). */

/* ==========================================================================
   Responsive — tablet (768–1023px) full-width map, then panels stacked
   ========================================================================== */
@media (min-width: 768px) {
  #map { min-height: 360px; }     /* tablet map height */
}

/* ==========================================================================
   Responsive — desktop (≥1024px) two columns: map ~60% / panel ~40%
   ========================================================================== */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 3fr 2fr;   /* ~60% / ~40% */
    align-items: start;
  }
  #map { min-height: 480px; }         /* explicit desktop map height (Pitfall 7) */
  .panel {
    position: sticky;
    top: var(--sp-lg);
    max-height: calc(100vh - var(--sp-xl));
    overflow-y: auto;
  }
}

/* ==========================================================================
   Reduced motion — strip ALL calendar motion; static highlight only.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .calendar-day.is-next,
  .calendar-day.is-today {
    animation: none;
    transition: none;
    transform: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}