:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --ink: #1b1a17;
  --ink-soft: #55524b;
  --line: #e2ded4;
  --accent: #1f5c4a;
  --danger: #8c2f1f;
  --danger-bg: #fbeee9;
  --radius: 14px;
  --tap: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14150f;
    --surface: #1d1f18;
    --ink: #f2efe6;
    --ink-soft: #b0aca0;
    --line: #34362c;
    --accent: #7fc7a8;
    --danger: #f0a08c;
    --danger-bg: #3a211a;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "DejaVu Sans", sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

.app {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1rem calc(var(--tap) + 3rem);
  padding-bottom: max(calc(var(--tap) + 3rem), env(safe-area-inset-bottom));
}

.view[hidden] {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 0.75rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.topbar__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.topbar__action {
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.banner {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  border-radius: var(--radius);
}

.banner--error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.banner--saved {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.banner button {
  min-height: 36px;
  padding: 0.3rem 0.75rem;
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: var(--surface);
  border: 1px solid currentColor;
  border-radius: 999px;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1rem;
}

.empty {
  padding: 2.5rem 0.25rem;
  color: var(--ink-soft);
}

.empty__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
}

.empty p {
  margin: 0 0 0.35rem;
}

.loading {
  margin: 0;
  padding: 2.25rem 0.25rem;
  color: var(--ink-soft);
}

.day__heading {
  position: sticky;
  top: 3.1rem;
  z-index: 1;
  margin: 0 0 0.5rem;
  padding: 0.2rem 0;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg);
}

.day--today .day__heading {
  color: var(--accent);
}

.day__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.entry {
  display: block;
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.entry__time {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.entry__text {
  margin: 0.15rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.entry__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

/*
 * The thumbnail box is sized from the upright photo's own dimensions before a
 * single byte of it is decoded, so filling it in never moves the text around it.
 * That is what keeps the reading place still while a day of photos arrives.
 */
.thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  overflow: hidden;
  background: var(--line);
  border-radius: 10px;
}

.thumb[style*="aspect-ratio"] {
  width: auto;
  height: 5.5rem;
}

.thumb__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb__note {
  padding: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--ink-soft);
  text-align: center;
}

.thumb[data-display-state="undecodable"],
.thumb[data-display-state="no-thumbnail"] {
  width: 8rem;
  height: auto;
  padding: 0.35rem;
  background: transparent;
  border: 1px dashed var(--line);
}

.thumb[data-display-state="undecodable"] .thumb__note,
.thumb[data-display-state="no-thumbnail"] .thumb__note {
  text-align: left;
}

.thumb--failed {
  background: var(--danger-bg);
}

.photo-preview {
  margin-top: 0.6rem;
}

.photo-preview[hidden] {
  display: none;
}

.photo-preview__image {
  display: block;
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.photo-preview__note {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.photo-preview[data-display-state="undecodable"] .photo-preview__note,
.photo-preview[data-display-state="no-decoder"] .photo-preview__note,
.photo-preview[data-display-state="missing"] .photo-preview__note {
  color: var(--danger);
}

.storage-note__text {
  margin: 0;
}

.storage-note__facts {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.storage-note__actions {
  margin-top: 0.5rem;
}

.link-button {
  min-height: 32px;
  padding: 0.2rem 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--accent);
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.fab {
  position: fixed;
  right: max(1rem, calc(50vw - 17rem + 1rem));
  bottom: max(1rem, env(safe-area-inset-bottom));
  min-height: var(--tap);
  padding: 0 1.15rem;
  font: inherit;
  font-weight: 650;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}

.field {
  display: block;
  margin-top: 1rem;
}

.field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.field__input {
  width: 100%;
  padding: 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}

.photos {
  margin-top: 1rem;
}

.photos__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photos__button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0 0.95rem;
  font-size: 0.95rem;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.photos__note {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.sheet__actions {
  margin-top: 1.5rem;
}

.button {
  width: 100%;
  min-height: var(--tap);
  font: inherit;
  font-weight: 650;
  border-radius: 999px;
  border: 1px solid transparent;
}

.button--primary {
  color: #fff;
  background: var(--accent);
}

.entry-detail {
  padding-top: 1rem;
}

.entry-detail__meta {
  margin: 0 0 0.15rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.entry-detail__trip {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.entry-detail__no-photos {
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
}

.entry-photo {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  /* Belt and braces for a photo this browser did not rotate. */
  image-orientation: from-image;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.entry-photo[data-display-state="missing"],
.entry-photo[data-display-state="undecodable"],
.entry-photo[data-display-state="no-decoder"] {
  color: var(--danger);
  background: var(--danger-bg);
}

.entry-photo[data-display-state="loading"] {
  color: var(--ink-soft);
}

.entry-photo__image {
  display: block;
  width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  image-orientation: from-image;
}

.entry-photo__note {
  margin: 0;
  font-size: 0.9rem;
}

.entry-detail__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.storage-note {
  margin-top: 2rem;
  padding: 0.75rem 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* ------------------------------------------------------------------ flow C */

.trips {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1rem;
}

/* A whole row is the tap target: the list is the only way back into a trip. */
.trip {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0.75rem 0.9rem;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.trip__name {
  font-weight: 650;
}

/*
 * An ended trip is not greyed out and not marked unavailable. Whether a closed
 * trip can still be written to is the owner's open decision, and this row does
 * not guess at it in either direction.
 */
.trip__detail {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.storage-note--list .storage-note__text + .storage-note__text {
  margin-top: 0.5rem;
}

/*
 * The finished-draft line, on the trips list and on the trip's own story screen.
 *
 * One sentence, in the same quiet ink as every other secondary line on this
 * screen. No badge, no dot, no count, no colour of its own, and nothing that
 * behaves like a score: it reports that a draft is there and it is gone the
 * moment the draft is read. A line styled as a signal would be the nag the
 * definition refuses, so the styling has to refuse it too.
 */
.draft-line {
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.story__ready {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.storage-note__title {
  margin: 0 0 0.35rem;
  font-weight: 650;
  color: var(--ink);
}

.compose-destination {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Two actions in the timeline header: `Trips` then `End trip`, one tap apart. */
.topbar__action + .topbar__action {
  margin-left: -0.5rem;
}

/* ---------------------------------------------------------------- story */

/*
 * The draft story screen. Every sentence carries its sources and the sources are
 * one tap away, because floor 2 is not a nice-to-have: the owner is being asked
 * to trust generated text about their own trip.
 */
.story {
  padding: 1rem 1rem 5rem;
  max-width: 42rem;
  margin: 0 auto;
}

.story__title {
  font-size: 1.35rem;
  margin: 0.25rem 0 0.15rem;
}

.story__meta,
.story__note {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0.25rem 0;
}

.story__sentence {
  margin: 1.25rem 0;
  padding: 0 0 0.25rem;
}

.story__sentence-text {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

.story__sources {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.story__sources summary {
  cursor: pointer;
}

.story__sources-list {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.story__editor {
  margin-top: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.story__editor-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
}

.story__editor-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.story__editor-error {
  margin: 0.5rem 0 0;
  color: var(--danger);
  font-size: 0.88rem;
}

.story__actions {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.story__refusal,
.story__cost {
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.story__refusal p,
.story__cost p {
  margin: 0;
  font-size: 0.9rem;
}

.story__steps {
  margin: 0.75rem 0 1rem;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}