/* ============================================
   Drive detail modal
   ============================================ */

/* Rows open the modal on click/Enter. Their hover + rounded styles already live
   in cards.css, so here we only add the pointer affordance and a focus ring. */
.drive-row {
  cursor: pointer;
}

.drive-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.drive-modal {
  /* The global reset zeroes margins, which kills the native dialog's
     margin:auto centering — restore it explicitly. */
  margin: auto;
  width: min(30rem, calc(100vw - 2 * var(--spacing-lg)));
  max-height: calc(100dvh - 2 * var(--spacing-2xl));
  padding: 0;
  border: none;
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  /* display and overlay have to transition discretely, or the dialog leaves the
     top layer on the first frame of the close and the exit is never seen. */
  transition: opacity var(--duration-base) ease-out,
              transform var(--duration-base) ease-out;
}

/* Entry needs only @starting-style. The exit needs the dialog held in the top
   layer, which is what `overlay` does — hold `display` without it and the dialog
   reflows into the document and fades out there. */
@supports (overlay: auto) {
  .drive-modal {
    transition: opacity var(--duration-base) ease-out,
                transform var(--duration-base) ease-out,
                overlay var(--duration-base) ease-out allow-discrete,
                display var(--duration-base) ease-out allow-discrete;
  }
}

/* Still painted on top for the length of the exit, so it would otherwise eat the
   tap that lands where the modal used to be. */
.drive-modal:not([open]),
.drive-modal:not([open])::backdrop {
  pointer-events: none;
}

/* Flex layout only while open — applying display:flex unconditionally overrides
   the UA `dialog:not([open])` hide rule and leaves an empty dialog in the flow. */
.drive-modal[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* The open rule already matches on the frame the dialog enters the top layer,
   so the entry values can only come from here. */
@starting-style {
  .drive-modal[open] {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.drive-modal.is-restoring {
  transition: none;
}

/* The card fills the dialog and lets the body scroll when the notes are long,
   keeping the header pinned. min-height:0 lets the flex children shrink below
   their content size so overflow scrolling engages. */
.drive-modal-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.drive-modal::backdrop {
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--duration-base) ease-out;
}

@supports (overlay: auto) {
  .drive-modal::backdrop {
    transition: opacity var(--duration-base) ease-out,
                overlay var(--duration-base) ease-out allow-discrete,
                display var(--duration-base) ease-out allow-discrete;
  }
}

.drive-modal[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .drive-modal[open]::backdrop {
    opacity: 0;
  }
}

.drive-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-light);
}

.drive-modal-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drive-modal-badge.is-day {
  background: var(--recent-badge-day-bg);
  color: var(--recent-badge-day-fg);
}

.drive-modal-badge.is-night {
  background: var(--recent-badge-night-bg);
  color: var(--recent-badge-night-fg);
}

.drive-modal-badge.is-mixed {
  background: var(--recent-badge-mixed-bg);
  color: var(--recent-badge-mixed-fg);
}

/* Only the icon matching the drive type is shown. */
.drive-modal-badge-day,
.drive-modal-badge-night,
.drive-modal-badge-mixed {
  display: none;
}

.drive-modal-badge.is-day .drive-modal-badge-day,
.drive-modal-badge.is-night .drive-modal-badge-night,
.drive-modal-badge.is-mixed .drive-modal-badge-mixed {
  display: flex;
}

.drive-modal-heading {
  flex: 1;
  min-width: 0;
}

.drive-modal-date {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
}

.drive-modal-type {
  margin: 2px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.drive-modal-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-background);
  color: var(--color-text-secondary);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

@media (hover: hover) {
  .drive-modal-close:hover {
    background: var(--color-border);
    color: var(--color-text);
  }
}

.drive-modal-body {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 0;
  overflow-y: auto;
}

.drive-modal-stats {
  margin: 0;
  display: grid;
  gap: var(--spacing-md);
}

.drive-modal-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.drive-modal-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

.drive-modal-stat-value {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: right;
}

.drive-modal-notes-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-light);
}

.drive-modal-notes {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* These blocks set an explicit display, which beats the UA [hidden] rule (author
   origin wins over user-agent). Restore it, so a hidden stat row, the day modal's
   empty totals list, or an absent notes section actually disappears instead of
   showing whatever was rendered last. */
.drive-modal-stat[hidden],
.drive-modal-stats[hidden],
.drive-modal-notes-section[hidden] {
  display: none;
}

/* Mobile: dock to the bottom as a sheet. margin-top:auto keeps the modal at the
   bottom of the centering box while margin-bottom:0 flushes it to the edge. */
@media (max-width: 768px) {
  .drive-modal {
    width: 100%;
    /* The UA stylesheet gives dialog `max-width: calc(100% - 6px - 2em)` plus auto
       inline margins, which clamped width:100% and left a ~19px gutter each side.
       Override both so the sheet is edge to edge like the FAB's action sheet. */
    max-width: 100%;
    max-height: 85dvh;
    margin: auto 0 0;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  }

  /* Flush to the bottom edge, so the last row needs its own clearance from the
     home indicator and the phone's rounded corners. env() reads 0 without
     viewport-fit=cover on the viewport meta, so the fixed term carries it. */
  .drive-modal-body {
    padding-bottom: calc(var(--spacing-3xl) + env(safe-area-inset-bottom));
  }

  /* The sheet travels its own height rather than fading, on the drawer curve. */
  .drive-modal {
    opacity: 1;
    transform: translateY(100%);
    transition-duration: var(--duration-drawer);
    transition-timing-function: var(--ease-drawer);
  }

  .drive-modal[open] {
    transform: translateY(0);
  }

  @starting-style {
    .drive-modal[open] {
      opacity: 1;
      transform: translateY(100%);
    }
  }
}

/* ---- Day summary modal ---------------------------------------------------
   Shares the drive-modal shell; adds the per-day drive list. */

.day-modal-drives {
  list-style: none;
  margin: var(--spacing-lg) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.day-modal-drive {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  background: var(--color-background);
}

.day-modal-drive-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* One glyph per kind, the same three the drive row's badge and the detail modal
   show. A sun beside a moon read as two drives rather than one that crossed
   sunset. */
.day-modal-icon-day,
.day-modal-icon-night,
.day-modal-icon-mixed {
  display: none;
}

.day-modal-drive.is-day .day-modal-icon-day,
.day-modal-drive.is-night .day-modal-icon-night,
.day-modal-drive.is-mixed .day-modal-icon-mixed {
  display: inline-flex;
}

.day-modal-drive.is-day .day-modal-icon-day { color: var(--recent-badge-day-fg); }
.day-modal-drive.is-night .day-modal-icon-night { color: var(--recent-badge-night-fg); }
/* Night, not the sun: in the row badge the mixed gradient carries the day half,
   but this badge has no background, so amber would just read as a day drive. */
.day-modal-drive.is-mixed .day-modal-icon-mixed { color: var(--recent-badge-night-fg); }

.day-modal-drive-time {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--color-text);
}

.day-modal-drive-duration {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
}

.day-modal-empty {
  margin: var(--spacing-lg) 0 0;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* The dialog still fades in and out; it just doesn't travel. */
@media (prefers-reduced-motion: reduce) {
  .drive-modal {
    opacity: 0;
    transform: none;
  }

  .drive-modal[open] {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .drive-modal[open] {
      opacity: 0;
      transform: none;
    }
  }
}