/*
 * Visual polish pass · 2026-10-01
 * One small, reversible layer for mobile rhythm. It sits after the historical
 * theme files so the interface has one final set of typography and spacing
 * decisions without rewriting the runtime templates.
 */
:root {
  --ui-canvas: #f2f2f7;
  --ui-card: #ffffff;
  --ui-label: #1c1c1e;
  --ui-secondary: #636366;
  --ui-tertiary: #8e8e93;
  --ui-separator: rgba(60, 60, 67, .18);
  --ui-blue: #007aff;
  --ui-blue-fill: rgba(0, 122, 255, .10);
  --ui-orange: #ff9500;
  --ui-orange-fill: rgba(255, 149, 0, .11);
  --ui-green: #34c759;
  --ui-radius-card: 16px;
  --ui-radius-control: 10px;
  --ui-ease: cubic-bezier(.22, .75, .18, 1);
}

html, body { background: #d1d1d6; color: var(--ui-label); }
body { line-height: 1.45; }
.app { background: var(--ui-canvas); }
.module { padding-left: 20px; padding-right: 20px; }

/* Keep one readable scale across every module. */
.page-head { padding: 26px 0 18px; }
.page-head h1 { font-size: 32px; line-height: 1.2; letter-spacing: -.25px; font-weight: 700; }
.section-head { margin: 26px 0 10px; }
.section-head h2 { font-size: 19px; line-height: 1.3; font-weight: 650; letter-spacing: -.35px; }
.section-head > span { font-size: 12px; color: var(--ui-tertiary); }

/* Daily header: metadata, title, then one calm reminder surface. */
.day-header { padding: 24px 0 14px; }
.day-meta { margin-bottom: 8px; color: var(--ui-tertiary); font-size: 13px; line-height: 1.3; }
.day-header h1 { max-width: 100%; font-size: 32px; line-height: 1.2; letter-spacing: -.25px; font-weight: 700; overflow-wrap: break-word; word-break: normal; }
.day-reminders { margin: 0 0 24px; border: 1px solid var(--ui-separator); border-radius: var(--ui-radius-card); background: var(--ui-card); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.day-reminders summary { min-height: 46px; padding: 10px 14px; color: var(--ui-label); font-size: 15px; font-weight: 600; line-height: 1.25; }
.day-reminders summary > .icon:first-child { color: var(--ui-orange); }
.day-reminders summary small { color: var(--ui-tertiary); font-size: 12px; }
.day-reminders summary > .icon:last-child { color: var(--ui-tertiary); }
.day-reminders > div { padding: 0 14px 12px; }
.day-reminders p { color: var(--ui-secondary); font-size: 14px; line-height: 1.55; margin: 4px 0 8px; }

/* Timeline: reserve a real gutter for the line, dot and time. */
.timeline-item { padding-left: 56px; padding-bottom: 28px; }
.timeline-item:before { left: 24px; top: 17px; bottom: -5px; width: 1px; background: var(--ui-separator); }
.event-dot { left: 19px; top: 12px; width: 11px; height: 11px; border: 2px solid var(--ui-tertiary); background: var(--ui-canvas); box-shadow: 0 0 0 4px var(--ui-canvas); }
.schedule-current .event-dot { border-color: var(--ui-blue); background: var(--ui-blue); box-shadow: 0 0 0 4px var(--ui-blue-fill); }
.schedule-past .event-dot { border-color: var(--ui-green); background: var(--ui-green); }
.event-top { min-height: 22px; margin-bottom: 10px; justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-top time { color: var(--ui-blue); font-size: 13px; line-height: 1.25; font-weight: 650; font-variant-numeric: tabular-nums; }
.status-badge { padding: 3px 8px; border: 0; border-radius: 999px; background: #e5e5ea; color: var(--ui-secondary); font-size: 12px; line-height: 1.25; font-weight: 600; }
.status-badge.booked, .status-badge.issued { background: rgba(52, 199, 89, .13); color: #248a3d; }
.status-badge.optional { background: var(--ui-orange-fill); color: #7a4d00; border: 0; }
.status-badge.plan { color: var(--ui-tertiary); background: #e5e5ea; }
.event-content, .transport-event { padding: 16px; border: 1px solid var(--ui-separator); border-left: 1px solid var(--ui-separator); border-radius: var(--ui-radius-card); background: var(--ui-card); box-shadow: 0 1px 2px rgba(0,0,0,.035); }
.event-title-row { gap: 10px; }
.event-title-row > h2, .transport-event .event-title-row > h2 { min-width: 0; font-size: 18px; line-height: 1.35; letter-spacing: -.2px; font-weight: 650; overflow-wrap: break-word; word-break: normal; }
.event-title-row > .icon { width: 18px; height: 18px; margin-top: 2px; }
.event-desc { margin-top: 8px; color: var(--ui-secondary); font-size: 14px; line-height: 1.55; }
.event-reminder { margin-top: 12px; padding-left: 10px; border-left: 2px solid rgba(255,149,0,.55); color: var(--ui-secondary); font-size: 13px; line-height: 1.55; }
.event-reminder::first-letter { color: var(--ui-orange); }
.event-actions { gap: 8px; margin-top: 14px; }
.event-actions .button.action, .fallback-actions .button.action { min-height: 40px; padding: 0 13px; border: 0; border-radius: var(--ui-radius-control); background: var(--ui-blue-fill); color: var(--ui-blue); font-size: 14px; font-weight: 600; line-height: 1.2; }
.event-actions .fallback-action, .fallback-actions .fallback-action { background: var(--ui-orange-fill) !important; color: #7a4d00 !important; }

/* Dates are an index, not another card competing with the timeline. */
.date-bar { top: calc(44px + env(safe-area-inset-top)); margin-left: -20px; margin-right: -20px; padding: 7px 14px 8px; gap: 2px; background: rgba(242,242,247,.94); border-bottom: 1px solid var(--ui-separator); }
.date-chip { flex-basis: 46px; min-height: 58px; border-radius: 12px; color: var(--ui-tertiary); }
.date-chip small { font-size: 11px; font-weight: 500; }
.date-chip strong { font-size: 21px; line-height: 1.2; font-weight: 650; }
.date-chip.active { color: var(--ui-blue); background: transparent; box-shadow: none; }
.date-chip.active:after { left: 8px; right: 8px; bottom: 2px; height: 3px; background: var(--ui-blue); border-radius: 99px; }

/* Lists and controls use the same surface and body copy scale. */
.focus-card, .departure-card, .next-event, .journey-list, .reservation-list, .todo-list, .todo-priority, .source-entry { border-radius: var(--ui-radius-card); box-shadow: 0 1px 2px rgba(0,0,0,.035); }
.focus-card { padding: 20px; background: var(--ui-card); border: 1px solid var(--ui-separator); }
.focus-card h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.7px; }
.focus-description { color: var(--ui-secondary); font-size: 15px; line-height: 1.55; }
.focus-note { color: var(--ui-secondary); font-size: 13px; line-height: 1.55; }
.focus-note .icon { color: var(--ui-orange); }
.button { min-height: 44px; border-radius: var(--ui-radius-control); padding: 0 15px; font-size: 15px; font-weight: 600; line-height: 1.2; }
.primary { background: var(--ui-blue); }
.secondary { background: var(--ui-blue-fill); color: var(--ui-blue); }
.journey-copy strong, .reservation-copy strong { font-size: 15px; line-height: 1.35; }
.journey-copy small, .reservation-copy > span { color: var(--ui-secondary); font-size: 13px; line-height: 1.5; }
.reservation-row { padding: 15px 16px; }
.reservation-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; }
.todo-priority { background: var(--ui-card); border: 1px solid var(--ui-separator); }
.priority-icon { color: var(--ui-blue); background: var(--ui-blue-fill); }
.todo-priority small { color: var(--ui-blue); }

/* Bottom sheet and detail copy follow the same rhythm as the cards. */
.bottom-sheet { max-height: 84dvh; border-radius: 22px 22px 0 0; background: var(--ui-canvas); }
.sheet-header { padding: 14px 20px 15px; border-bottom: 1px solid var(--ui-separator); }
.sheet-header h3 { font-size: 20px; line-height: 1.25; }
.sheet-content { padding-left: 20px; padding-right: 20px; }
.detail-section { padding: 18px 0; border-top-color: var(--ui-separator); }
.detail-section h4 { margin-bottom: 10px; color: var(--ui-tertiary); font-size: 12px; line-height: 1.3; }
.detail-desc, .detail-copy { color: var(--ui-secondary); font-size: 14px; line-height: 1.6; }
.location-heading strong { font-size: 16px; line-height: 1.35; }
.location-address { color: var(--ui-secondary); font-size: 13px; line-height: 1.55; }
.action-row > .button { border-radius: var(--ui-radius-control); }

@media (max-width: 360px) {
  .module { padding-left: 16px; padding-right: 16px; }
  .date-bar { margin-left: -16px; margin-right: -16px; }
  .day-header h1 { font-size: 30px; }
  .timeline-item { padding-left: 52px; }
  .timeline-item:before { left: 22px; }
  .event-dot { left: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}