/*
 * Korea 2026 — operational chrome (app.css)
 * Nav, topbar, toast, checklists, weather grid, update bar, install sheet, empty/error.
 * Consumes tokens exclusively. Editorial components live in editorial.css.
 */

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  padding: calc(10px + var(--safe-top)) var(--gutter) 10px;
  display: flex; align-items: flex-end; justify-content: space-between;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { border: 0; background: none; display: flex; gap: 10px; align-items: center; padding: 4px 0; min-height: 44px; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-size: 15px;
}
.brand b { display: block; font-size: 11px; letter-spacing: .18em; }
.brand small { display: block; font-size: 9px; letter-spacing: .13em; color: var(--ink-soft); margin-top: 2px; }
.icon-btn { border: 1px solid var(--line); background: var(--paper); width: 44px; height: 44px; border-radius: 50%; font-size: 20px; }

/* ── Bottom nav (thumb-reach, translucent, safe-area) ── */
.bottom-nav {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding: 6px max(10px, var(--safe-left)) var(--safe-bottom) max(10px, var(--safe-right));
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.bottom-nav button {
  border: 0; background: none; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; color: var(--ink-soft); user-select: none;
}
.bottom-nav button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav button svg .fill { fill: currentColor; stroke: none; }
.bottom-nav small { font-size: 10px; letter-spacing: .04em; }
.bottom-nav button.active { color: var(--ink); }
.bottom-nav button.active svg { stroke-width: 2; }
main { min-height: calc(100svh - 130px); padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 24px); }
body.has-update main { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 108px); } /* room for the update snackbar */

/* ── Checklists: hairline rows, generous touch, state survives via stable IDs ── */
.checklist { border-top: var(--divider-strong); }
.check-row {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3);
  align-items: start; padding: var(--space-4) 0;
  border-bottom: var(--divider); cursor: pointer; min-height: 44px;
}
.check-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent-text); }
.check-row span { font-size: .9375rem; }
.check-row span small { display: block; color: var(--ink-soft); font-size: .8125rem; margin-top: 1px; }
.check-row.done span { text-decoration: line-through; color: var(--ink-soft); }

/* ── Weather strip (FactRail-styled) ── */
.weather-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--space-4); }
.weather-day small { display: block; font-size: var(--text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.weather-day b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; margin: 2px 0; }
.weather-day em { font-style: normal; font-size: .75rem; color: var(--ink-soft); }

/* ── Warnings / notes (utility, no cards) ── */
.warning {
  border-left: 3px solid var(--accent); background: var(--paper-deep);
  padding: var(--space-2) var(--space-3); font-size: .875rem; border-radius: var(--radius-card);
}
.note-box { border-top: var(--divider-strong); padding-top: var(--space-4); }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-height) + var(--safe-bottom) + 18px);
  transform: translate(-50%, 12px); z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: var(--radius-sheet);
  font-size: .875rem; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Update bar ── */
.update-bar {
  position: fixed; z-index: 95; left: var(--space-4); right: var(--space-4);
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-card); padding: 10px 14px;
  box-shadow: var(--shadow-sheet);
}
.update-bar b { display: block; font-size: .84rem; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.update-bar small { display: none; }  /* snackbar-compact: subline only in install sheet */
.update-bar button {
  border: 1px solid rgba(247,245,240,.4); background: transparent; color: var(--paper);
  border-radius: var(--radius-card); padding: 8px 14px; min-height: 38px; font-weight: 600; flex: 0 0 auto;
}

/* ── Install sheet (iOS Add to Home Screen help) ── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(var(--scrim), .55);
  display: grid; place-items: end center; padding: var(--space-4);
}
.modal-backdrop[hidden] { display: none; }
.install-sheet {
  position: relative; width: min(520px, 100%);
  background: var(--paper); border-radius: var(--radius-sheet);
  padding: var(--space-5) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
  box-shadow: var(--shadow-sheet);
}
.install-sheet h2 { font-family: var(--font-display); font-size: var(--text-h2); margin: var(--space-2) 44px var(--space-4) 0; }
.install-sheet ol { padding-left: 22px; line-height: 1.8; }
.modal-close {
  position: absolute; right: var(--space-3); top: var(--space-3);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--paper-deep); color: var(--ink); font-size: 22px;
}

/* ── Utility bits ── */
.empty { color: var(--ink-soft); padding: var(--space-6) 0; }
.img-credit { font-size: var(--text-caption); color: var(--ink-faint); padding-top: var(--space-3); border-top: var(--divider); margin-top: var(--space-4); }
.img-credit a { color: inherit; }
.source-list { padding-left: 18px; color: var(--ink-soft); font-size: .875rem; }
.source-list b { color: var(--ink); }
.privacy-note { font-size: .8125rem; color: var(--ink-soft); border-top: var(--divider); padding-top: var(--space-4); }
.place-search input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  background: var(--paper); color: var(--ink); font-size: 1rem;
}
.place-search input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
#placeList .section-head { margin-top: var(--space-6); margin-bottom: var(--space-4); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-8) 0 var(--space-5); }
.section-head h2 { font-family: var(--font-display); font-size: var(--text-h2); margin: 0; }
.section-head .meta { font-size: var(--text-caption); color: var(--ink-faint); }

/* map embed (deliberately plain chrome) */
.map-embed-card { background: var(--paper-deep); padding: 0; border-radius: var(--radius-card); overflow: hidden; }
.map-embed-card iframe { width: 100%; height: min(52vh, 430px); border: 0; display: block; }
.map-day-thumb { width: 46px; height: 46px; border-radius: var(--radius-card); object-fit: cover; background: var(--paper-deep); flex: 0 0 46px; }
.map-day-head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: 6px; }
.map-day-head .eyebrow { margin: 0; }

/* generic day-thumb (trip index + map grid) */
.day-thumb { width: var(--thumb-size); height: var(--thumb-size); border-radius: var(--radius-card); object-fit: cover; background: var(--paper-deep); flex: 0 0 var(--thumb-size); }

/* Trip index day entries — button is its own row; detail expands BELOW, never beside */
.day-entry { display: block; padding: 0; border-bottom: var(--divider); }
.day-entry-btn {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4);
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--space-5) 0; align-items: start; min-height: 44px;
}
.day-entry-btn .day-no {
  font-family: var(--font-display); font-size: 1.9rem; line-height: 1;
  color: var(--ink); opacity: .32; font-variant-numeric: tabular-nums;
}
.day-entry-btn .day-no small {
  display: block; font-family: var(--font-meta); font-size: .625rem;
  letter-spacing: .06em; color: var(--ink-faint); margin-top: 3px; opacity: 1;
  white-space: nowrap;
}
.day-entry-main { display: block; min-width: 0; }
.day-entry-main h3 { font-size: var(--text-h3); font-weight: 600; margin: 0 0 3px; line-height: 1.25; }
.day-entry .day-where { font-size: var(--text-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 4px; }
.day-entry .day-sum { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.day-detail { padding: 0 0 var(--space-5); }
/* nested timeline inside an expanded day: kill the double gutter */
.day-detail .editorial-timeline { padding-inline: 0; margin-bottom: var(--space-4); }
.day-detail .timeline-label { margin-bottom: var(--space-4); }
.day-detail[hidden] { display: none; }
.day-detail .day-note { margin: 0 0 8px; color: var(--ink-soft); font-size: .9rem; }
.day-now { font-size: .6875rem; letter-spacing: .1em; color: var(--accent-text); vertical-align: 2px; }
.day-current .day-no { opacity: .55; }
.day-current { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--space-3); margin-inline-start: calc(var(--space-3) * -1); }

/* fact rows used inside day detail (hotel facts) */
.fact-row { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--divider); font-size: .875rem; }
.fact-row b { font-size: var(--text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .utility-sheet, .sheet-scrim, .toast { transition: none; }
}