/*
 * Konsta-inspired iOS theme layer.
 * This file is intentionally local and additive: the trip runtime and manifest
 * remain unchanged, while the presentation uses one restrained component system.
 */
:root {
  --k-bg: #f2f2f7;
  --k-surface: #ffffff;
  --k-surface-2: #f7f7fa;
  --k-label: #1c1c1e;
  --k-secondary-label: #636366;
  --k-tertiary-label: #8e8e93;
  --k-separator: rgba(60, 60, 67, .18);
  --k-blue: #007aff;
  --k-green: #34c759;
  --k-orange: #ff9500;
  --k-red: #ff3b30;
  --k-radius-sm: 10px;
  --k-radius-md: 14px;
  --k-radius-lg: 16px;
  --k-ease-snappy: cubic-bezier(.34, 1.28, .64, 1);
  --k-ease-gentle: cubic-bezier(.25, .46, .45, .94);
}

html, body { background: #dfe0e5; color: var(--k-label); }
body { line-height: 1.45; }
.app { background: var(--k-bg); box-shadow: 0 0 70px rgba(0,0,0,.08); }

/* System chrome */
.topbar {
  height: calc(44px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 20px 0;
  background: rgba(242,242,247,.88);
  border-bottom: .5px solid var(--k-separator);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.brand { gap: 8px; padding: 8px 0; font-size: 16px; font-weight: 650; letter-spacing: -.2px; }
.brand .icon { width: 18px; height: 18px; color: var(--k-blue); stroke-width: 1.8; }
.status-text { font-size: 12px; color: var(--k-tertiary-label); font-variant-numeric: tabular-nums; }
.module { padding-left: 20px; padding-right: 20px; }
.module.active { animation: k-module-in 220ms var(--k-ease-gentle); }
@keyframes k-module-in { from { opacity: .78; } to { opacity: 1; } }

.page-head { padding: 28px 0 20px; }
.page-head h1 { font-size: 34px; line-height: 1.14; letter-spacing: -1.2px; font-weight: 720; }
.section-head { margin: 28px 0 10px; }
.section-head h2 { font-size: 20px; line-height: 1.2; letter-spacing: -.45px; font-weight: 680; }
.section-head > span { font-size: 12px; color: var(--k-tertiary-label); }
.text-button { color: var(--k-blue); font-size: 14px; min-height: 36px; }

/* Buttons follow one iOS hierarchy: filled, tinted, plain. */
.button { min-height: 44px; border-radius: var(--k-radius-sm); padding: 0 16px; font-size: 15px; font-weight: 600; letter-spacing: -.1px; transition: transform 140ms var(--k-ease-snappy), background 140ms ease, opacity 140ms ease; }
.button .icon { width: 17px; height: 17px; }
.button:active { transform: scale(.97); }
.primary { background: var(--k-blue); box-shadow: none; }
.primary:active { background: #006fe6; }
.secondary { background: rgba(0,122,255,.1); color: var(--k-blue); }
.action, .button.small { min-height: 40px; padding: 0 13px; border: 0; border-radius: var(--k-radius-sm); background: #eef0f5; color: var(--k-blue); font-size: 14px; }
.action:active, .button.small:active { background: #e1e4eb; }

/* Now */
.countdown-pill { margin: 10px 0 0; padding: 6px 10px; border: 0; border-radius: 8px; background: rgba(0,122,255,.1); color: var(--k-blue); font-size: 13px; font-weight: 600; }
.focus-card { padding: 20px; border: 0; border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.focus-kicker { gap: 7px; color: var(--k-blue); font-size: 13px; font-weight: 600; }
.focus-kicker > .icon { width: 17px; height: 17px; }
.focus-card h2 { margin-top: 18px; font-size: 28px; line-height: 1.18; letter-spacing: -.9px; font-weight: 720; }
.focus-description { margin-top: 10px; color: var(--k-secondary-label); font-size: 16px; line-height: 1.5; }
.focus-time { margin-top: 11px; color: var(--k-blue); font-size: 22px; font-weight: 650; }
.focus-note { margin-top: 14px; color: #9a6700; font-size: 13px; }
.focus-actions { gap: 10px; margin-top: 20px; }
.focus-progress { color: var(--k-tertiary-label); font-size: 13px; }
.departure-card, .next-event { border: 0; border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.departure-card { padding: 18px; }
.departure-top { color: var(--k-secondary-label); font-size: 14px; }
.departure-top > .icon:first-child { color: var(--k-blue); }
.quiet-status { color: var(--k-green); font-size: 12px; }
.flight-route { gap: 10px; margin: 20px 0 15px; }
.flight-route strong { font-size: 28px; font-weight: 650; letter-spacing: -.6px; }
.flight-route b { font-size: 15px; }
.flight-route span:not(.flight-line), .departure-card > p { color: var(--k-tertiary-label); }
.flight-line { color: var(--k-tertiary-label); }
.departure-note { color: var(--k-blue); border-top-color: var(--k-separator); font-size: 13px; }
.destination-preview { height: 216px; margin: 28px 0 8px; border-radius: var(--k-radius-lg); box-shadow: none; }
.destination-preview:after, .overview-cover:after { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.62)); }
.destination-caption { left: 18px; bottom: 18px; }
.destination-caption strong { font-size: 28px; font-weight: 720; letter-spacing: -1px; }
.photo-arrow { right: 16px; bottom: 16px; width: 38px; height: 38px; border: 0; background: rgba(0,0,0,.25); }

/* Dates and timeline */
.date-bar { top: calc(44px + env(safe-area-inset-top)); margin: 0 -20px; padding: 8px 14px 9px; gap: 2px; background: rgba(242,242,247,.94); border-bottom: .5px solid var(--k-separator); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
.date-chip { flex-basis: 48px; min-height: 64px; border-radius: 12px; color: var(--k-tertiary-label); gap: 1px; }
.date-chip small { font-size: 11px; font-weight: 500; }
.date-chip strong { font-size: 23px; font-weight: 650; }
.date-chip.active { background: transparent; color: var(--k-blue); box-shadow: none; }
.date-chip.active:after { left: 9px; right: 9px; bottom: 3px; height: 3px; background: var(--k-blue); }
.day-header { padding-top: 26px; }
.day-meta { margin-bottom: 8px; color: var(--k-tertiary-label); font-size: 13px; }
.day-header h1 { font-size: 34px; line-height: 1.14; font-weight: 720; letter-spacing: -1.2px; }
.day-header > p { margin-top: 9px; color: var(--k-secondary-label); font-size: 16px; line-height: 1.5; }
.day-route { margin: 15px -20px 16px; padding: 0 20px 11px; border-bottom: .5px solid var(--k-separator); }
.day-route > span { color: var(--k-secondary-label); font-size: 13px; }
.day-route > span:not(:last-child):after { padding: 0 8px; color: var(--k-tertiary-label); }
.day-reminders { margin-bottom: 22px; border: 0; border-radius: var(--k-radius-md); background: rgba(255,149,0,.12); }
.day-reminders summary { min-height: 44px; padding: 8px 12px; color: #9a6700; font-size: 14px; }
.day-reminders > div { padding: 0 13px 11px; }
.day-reminders p { color: #8a5f00; font-size: 14px; }
.timeline-item { padding-left: 30px; padding-bottom: 22px; }
.timeline-item:before { left: 5px; top: 13px; bottom: -7px; background: var(--k-separator); }
.event-dot { left: 1px; top: 10px; width: 10px; height: 10px; border: 2px solid var(--k-tertiary-label); background: var(--k-bg); box-shadow: 0 0 0 4px var(--k-bg); }
.schedule-current .event-dot { border-color: var(--k-blue); background: var(--k-blue); box-shadow: 0 0 0 4px rgba(0,122,255,.12); animation: k-pulse 2.2s ease infinite; }
@keyframes k-pulse { 50% { box-shadow: 0 0 0 7px rgba(0,122,255,.06); } }
.schedule-past .event-dot { border-color: var(--k-green); background: var(--k-green); }
.event-top { min-height: 24px; margin-bottom: 8px; }
.event-top time { color: var(--k-blue); font-size: 14px; font-weight: 650; }
.status-badge { padding: 3px 8px; border: 0; border-radius: 7px; background: #e5e5ea; color: var(--k-secondary-label); font-size: 12px; font-weight: 600; }
.status-badge.booked, .status-badge.issued { background: rgba(52,199,89,.13); color: #248a3d; }
.status-badge.optional { background: rgba(255,149,0,.13); color: #9a6700; }
.event-content { padding: 16px; border: 0; border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 1px 2px rgba(0,0,0,.035); }
.transport-event { border: 0; border-left: 0; border-radius: var(--k-radius-lg); box-shadow: none; }
.event-title-row > h2, .transport-event .event-title-row > h2 { font-size: 19px; line-height: 1.3; font-weight: 680; letter-spacing: -.35px; }
.event-content { box-shadow: none; }
.event-title-row > .icon { color: var(--k-tertiary-label); }
.event-icon-flight, .reservation-symbol-flight { color: var(--k-blue) !important; }
.event-icon-bus, .reservation-symbol-bus { color: var(--k-orange) !important; }
.event-icon-boat, .reservation-symbol-boat { color: #00a7a0 !important; }
.event-icon-hotel, .reservation-symbol-hotel { color: #af52de !important; }
.event-icon-restaurant, .reservation-symbol-restaurant { color: var(--k-red) !important; }
.event-icon-entry, .reservation-symbol-entry { color: var(--k-indigo, #5856d6) !important; }
.event-desc { margin-top: 6px; color: var(--k-secondary-label); font-size: 14px; line-height: 1.55; }
.event-reminder { color: #8a5f00; border-left-color: rgba(255,149,0,.5); font-size: 13px; }
.event-photo { margin-top: 13px; border-radius: var(--k-radius-md); }
.event-actions { gap: 7px; margin-top: 13px; }

/* Overview and todo use grouped iOS lists. */
.overview-cover { height: 226px; border-radius: var(--k-radius-lg); box-shadow: none; }
.overview-cover > div { left: 18px; bottom: 18px; }
.overview-cover h2 { font-size: 34px; letter-spacing: -1.2px; }
.overview-cover span { font-size: 13px; }
.journey-list, .reservation-list, .todo-list { border: 0; border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.journey-day { gap: 14px; padding: 15px 16px; }
.journey-day + .journey-day, .reservation-row + .reservation-row, .todo-item + .todo-item { border-top-color: var(--k-separator); }
.journey-date { min-width: 32px; color: var(--k-blue); }
.journey-date strong { font-size: 25px; font-weight: 650; }
.journey-date small { color: var(--k-tertiary-label); font-size: 10px; }
.journey-copy strong { font-size: 16px; font-weight: 650; }
.journey-copy small, .reservation-copy > span { color: var(--k-secondary-label); font-size: 13px; }
.journey-day > .icon, .reservation-row > .icon, .source-entry > .icon:last-child { color: var(--k-tertiary-label); }
.reservation-row { padding: 15px 16px; }
.reservation-icon, .reservation-thumb { width: 40px; height: 40px; flex-basis: 40px; border-radius: var(--k-radius-sm); background: #f2f2f7; color: var(--k-tertiary-label); }
.reservation-icon-flight { background: rgba(0,122,255,.1); }
.reservation-icon-bus { background: rgba(255,149,0,.12); }
.reservation-icon-boat { background: rgba(0,199,190,.12); }
.reservation-icon-hotel { background: rgba(175,82,222,.12); }
.reservation-icon-restaurant { background: rgba(255,59,48,.1); }
.reservation-icon-entry { background: rgba(88,86,214,.1); }
.reservation-copy strong { font-size: 15px; }
.source-entry { margin-top: 26px; padding: 15px 16px; border: 0; border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.source-entry > .icon:first-child { color: var(--k-blue); }
.progress-ring { width: 58px; height: 58px; flex-basis: 58px; background: conic-gradient(var(--k-blue) var(--progress), #d9d9de 0); }
.progress-ring:before { background: var(--k-bg); }
.todo-priority { border: 0; border-radius: var(--k-radius-lg); background: var(--k-surface); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.priority-icon { color: var(--k-blue); background: rgba(0,122,255,.1); }
.todo-priority small { color: var(--k-blue); }
.check-visual { border-color: #c7c7cc; }
.todo-item input:checked + .check-visual { background: var(--k-blue); border-color: var(--k-blue); }

/* iOS-style bottom tab bar: quiet, full-width, always available. */
.bottom-nav { bottom: 0; width: min(600px,100%); height: calc(49px + env(safe-area-inset-bottom)); padding: 3px 6px env(safe-area-inset-bottom); border: 0; border-top: .5px solid var(--k-separator); border-radius: 0; background: rgba(249,249,249,.9); box-shadow: 0 -3px 16px rgba(0,0,0,.04); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); }
.nav-button { gap: 2px; border-radius: 10px; color: var(--k-tertiary-label); font-size: 10px; font-weight: 500; }
.nav-button > .icon { width: 20px; height: 20px; }
.nav-button.active { color: var(--k-blue); background: transparent; }
.nav-count { top: 1px; right: calc(50% - 25px); min-width: 17px; height: 17px; background: var(--k-red); border-color: #fff; font-size: 10px; }

/* Sheet and preview */
.sheet-backdrop.active { background: rgba(0,0,0,.32); }
.bottom-sheet { max-height: 82dvh; border-radius: 20px 20px 0 0; background: var(--k-surface); box-shadow: 0 -10px 30px rgba(0,0,0,.16); }
.sheet-handle { width: 36px; height: 4px; margin-top: 9px; background: #c7c7cc; }
.sheet-header { padding: 13px 20px 14px; border-bottom: .5px solid var(--k-separator); }
.sheet-header h3 { font-size: 20px; font-weight: 700; letter-spacing: -.45px; }
.sheet-close { width: 34px; height: 34px; background: #e5e5ea; color: var(--k-secondary-label); }
.sheet-content { padding-left: 20px; padding-right: 20px; }
.detail-section, .fallback-card { border-top-color: var(--k-separator); }
.detail-desc, .detail-copy, .fallback-action-copy { color: var(--k-secondary-label); }
.detail-section h4, .fallback-confidence { color: var(--k-tertiary-label); }
.location-heading > .icon { color: var(--k-red); }
.fallback-location .icon { color: var(--k-orange); }
.detail-gallery > img { border-radius: var(--k-radius-lg); }
.sheet-code { border: 0; border-radius: var(--k-radius-md); background: var(--k-bg); }
.credential-docs { display: grid; gap: 8px; margin-top: 16px; }
.credential-docs h4 { margin-bottom: 0; }
.credential-docs .button { width: 100%; justify-content: center; }
.credential-gallery {
  grid-auto-columns: 128px;
  grid-template-rows: 128px;
  gap: 10px;
  padding: 2px 1px 4px;
}
.credential-gallery > img,
.credential-gallery > img.ticket-thumb,
.credential-gallery > img:only-child {
  width: 128px;
  height: 128px;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8px;
  border: 1px solid var(--k-separator);
  border-radius: var(--k-radius-md);
  background: var(--k-bg);
  cursor: zoom-in;
}
.toast { background: #1c1c1e; border-radius: 12px; }

@media (max-width: 420px) {
  .module { padding-left: 16px; padding-right: 16px; }
  .topbar { padding-left: 16px; padding-right: 16px; }
  .date-bar { margin-left: -16px; margin-right: -16px; padding-left: 10px; padding-right: 10px; }
  .day-route { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

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

/*
 * Consistency pass: keep the iOS hierarchy legible at a glance.
 * This is deliberately additive so it can be removed without touching the
 * runtime templates or the trip manifest.
 */
:root {
  --k-warning: #ff9500;
  --k-warning-ink: #8a4b00;
  --k-warning-fill: rgba(255, 149, 0, .12);
  --k-card-radius: 16px;
  --k-action-radius: 10px;
  --k-action-height: 40px;
  --k-action-label: 14px;
}

/* Every compact action uses the same label metrics, regardless of its card. */
.button.action,
.transport-event .button.action,
.fallback-actions .button.action,
.button.small {
  min-height: var(--k-action-height);
  padding: 0 13px;
  border-radius: var(--k-action-radius);
  font-size: var(--k-action-label);
  font-weight: 600;
  letter-spacing: -.1px;
  line-height: 1.2;
}

.button.action .icon,
.button.small .icon { width: 16px; height: 16px; }
.fallback-actions .button.action { background: #fff; }

/* Cards share one surface rhythm; lists remain grouped, with no floating noise. */
.focus-card,
.departure-card,
.next-event,
.event-content,
.transport-event,
.todo-priority,
.journey-list,
.reservation-list,
.todo-list,
.source-entry { border-radius: var(--k-card-radius); }

.focus-card,
.departure-card,
.next-event,
.event-content,
.transport-event,
.todo-priority,
.journey-list,
.reservation-list,
.todo-list,
.source-entry {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .035);
}

/* Warnings are orange accents on a quiet label, rather than yellow body text. */
.focus-note,
.event-reminder,
.fallback-trigger,
.fallback-note,
.day-reminders p { color: var(--k-secondary-label); }
.focus-note .icon,
.fallback-note .icon,
.day-reminders summary > .icon:first-child { color: var(--k-warning); }
.event-reminder { border-left-color: rgba(255, 149, 0, .55); }
.day-reminders {
  background: var(--k-warning-fill);
  border-color: rgba(255, 149, 0, .26);
}
.day-reminders summary { color: #3a3a3c; }
.status-badge.optional {
  background: var(--k-warning-fill);
  border-color: rgba(255, 149, 0, .3);
  color: var(--k-warning-ink);
}
.fallback-action {
  background: var(--k-warning-fill) !important;
  border-color: rgba(255, 149, 0, .28) !important;
  color: var(--k-warning-ink) !important;
}

/* Keep the timeline's time and state on one baseline without crowding the dot. */
.event-top { align-items: center; gap: 10px; }
.event-top time { line-height: 1.25; }
.event-top .status-badge { line-height: 1.25; }