/* A trip (DESIGN.md sections 2–5): the header and section tabs, the two
   columns on wide screens, the Rio line, the option lists, field lines and
   the question flow. Tokens only; radius only on the line's knots. */

/* ---------- header ---------- */
.trip-backs { display: flex; justify-content: space-between; gap: var(--s4); }
.trip-title { margin-top: var(--s2); }
.meta { color: var(--ink-2); font-size: var(--t-small); }
.news { color: var(--accent); font-size: var(--t-small); margin-top: var(--s2); }
.trip-head { padding-bottom: var(--s3); }
.sect-title { font-size: var(--t-title); font-weight: 600; line-height: 1.25; margin: var(--s5) 0 var(--s1); }
.sect-title.orphans { margin-top: var(--s7); }
.trip-main > .backline { margin-top: var(--s3); }

/* The Itinerário tab is for narrow screens; on wide ones the line is always there. */
@media (min-width: 1024px) {
  .tabs a.tab-line { display: none; }
  .tabs a.wide-current { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
  .tabs { position: static; }
}

/* ---------- columns ---------- */
.trip-cols { display: block; }
.trip[data-tab="itinerario"] .trip-main { display: none; }
.trip:not([data-tab="itinerario"]) .trip-line { display: none; }
@media (min-width: 1024px) {
  .trip-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s7); align-items: start; }
  .trip .trip-line, .trip[data-tab="itinerario"] .trip-main { display: block; }
  .trip:not([data-tab="itinerario"]) .trip-line { display: block; }
  .trip-line {
    position: sticky; top: 0; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s3) 0 var(--s6) var(--s4); margin-left: calc(-1 * var(--s4)); scrollbar-width: thin;
  }
}

/* Region swaps crossfade (section 7). */
.swapped { animation: fade-in var(--d-fast) var(--ease); }
@keyframes fade-in { from { opacity: 0; } }
.group.lit > .group-h { animation: lit var(--d-slow) var(--ease) 2; }
@keyframes lit { 50% { opacity: .35; } }

/* ---------- the Rio line (section 5) ----------
   The line at x = 72 px, the date column ending at x = 56 px, text from 92 px. */
.rio { list-style: none; margin: var(--s4) 0 0; padding: 0; position: relative; }
.rio-n { position: relative; padding: var(--s3) 0 var(--s3) 92px; min-height: var(--line); }
.rio-n::before { content: ""; position: absolute; left: 71px; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.rio-n.gap::before { background: none; border-left: 2px dashed var(--warn); width: 0; }
.rio-place.start::before { top: 23px; }
.rio-place.end::before { bottom: auto; height: 23px; }
.rio-date {
  position: absolute; left: calc(-1 * var(--s4)); width: calc(56px + var(--s4)); top: var(--s3); text-align: right;
  font-size: var(--t-small); color: var(--ink-2); line-height: 1.35;
}
.knot {
  position: absolute; left: 66px; top: 17px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ink); z-index: 1;
}
.knot.hollow { background: var(--ground); border: 2px solid var(--ink); }
.rio-name { display: block; font-size: var(--t-title); font-weight: 600; line-height: 1.2; color: var(--ink); }
a.rio-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.rio-sub { font-size: var(--t-small); color: var(--ink-2); }
.rio-stop, .rio-place { padding-top: var(--s4); padding-bottom: var(--s4); }
.rio-stop .rio-date, .rio-place .rio-date { top: var(--s4); }
.rio-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: baseline;
  color: var(--ink); min-height: 28px;
}
.rio-row .rio-t { overflow-wrap: anywhere; }
.rio-row .rio-p { text-align: right; white-space: nowrap; }
.rio-row .rio-s { grid-column: 1 / -1; font-size: var(--t-small); color: var(--ink-2); }
.rio-s.warn, .rio-row .rio-s.warn { color: var(--warn); }
a.rio-row:active { background: var(--press); }
@media (hover: hover) { a.rio-row:hover .rio-t { text-decoration: underline; text-underline-offset: 4px; } }
.rio-stay, .rio-inside { padding-left: calc(92px + var(--s4)); }
.rio-leg .rio-t { font-weight: 500; }
.rio-add .rio-row { color: var(--accent); min-height: 48px; align-items: center; display: flex; }
.rio-hint .rio-s { color: var(--ink-2); }

/* Drawn once per session: the line grows from the top. */
.rio.draw .rio-n::before { transform-origin: top; animation: draw var(--d-slow) var(--ease) both; }
@keyframes draw { from { transform: scaleY(0); } }

/* ---------- options in a group (section 3) ---------- */
.group-act {
  color: var(--accent); font-weight: 400; display: inline-flex; align-items: center;
  min-height: 48px; margin: calc(-1 * var(--s3)) 0;
}
.open-word { font-weight: 400; }
.line.opt, a.line.trip-item { color: var(--ink); }
.line.opt .line-aside { white-space: nowrap; }
.line.opt.chosen .line-text { font-weight: 600; }
.chosen-word { color: var(--accent); }
.line-aside.quiet { color: var(--ink-3); font-size: var(--t-small); }
details.others > summary { list-style: none; cursor: pointer; }
details.others > summary::-webkit-details-marker { display: none; }
details.others .when-open, details.others[open] .when-closed { display: none; }
details.others[open] .when-open { display: inline; }
details.others[open] > .line { animation: fade-in var(--d) var(--ease); }
.line.add.warn, a.line.warn { color: var(--warn); }
form.inline:has(> .line) { display: block; }
form.inline > .line { display: flex; justify-content: flex-start; }
.line.add.primary, button.line.primary { font-weight: 600; }

/* ---------- field lines (option, group, destino, definições) ---------- */
.line.fieldline { color: var(--ink); align-items: baseline; }
.field-l { font-size: var(--t-small); color: var(--ink-2); flex-shrink: 0; }
.field-v { text-align: right; overflow-wrap: anywhere; min-width: 0; }
.line.fieldline.stack { flex-direction: column; align-items: stretch; gap: var(--s1); }
.line.fieldline.stack .field-v { text-align: left; white-space: pre-line; }
.line.fieldline.fixed .field-v { color: var(--ink-2); }

/* ---------- the question flow (section 4) ---------- */
/* Without JS: one plain form, a question per field. */
.qf .qf-step { padding: var(--s4) 0; border-bottom: 1px solid var(--hair); }
.qf .q { display: block; font-size: var(--t-title); font-weight: 500; line-height: 1.25; margin-bottom: var(--s3); color: var(--ink); }
.qf .qf-fixed-v { color: var(--ink-2); }
.big-field { display: flex; align-items: baseline; gap: var(--s2); border-bottom: 2px solid var(--hair); }
.big-field:focus-within { border-bottom-color: var(--accent); }
.big {
  flex: 1; min-width: 0; width: 100%; font: inherit; font-size: var(--t-input); line-height: 1.2; color: var(--ink);
  background: none; border: 0; border-radius: 0; padding: var(--s2) 0; margin: 0; -webkit-appearance: none; appearance: none;
  color-scheme: dark;
}
.big:focus, .big:focus-visible { outline: none; }
textarea.big { resize: none; font-size: var(--t-title); line-height: 1.35; min-height: 6em; }
.big::placeholder { color: var(--ink-3); opacity: 1; }
.unit {
  font: inherit; font-size: var(--t-body); color: var(--ink-2); background: none; border: 0; border-radius: 0;
  min-height: 48px; padding: 0 var(--s2); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.unit:focus-visible { outline: 2px solid var(--accent); }
.unit option { background: var(--raised); color: var(--ink); }
.choice { border-top: 1px solid var(--hair); }
.choice-line {
  display: flex; align-items: center; gap: var(--s3); min-height: var(--line); cursor: pointer;
  font-size: var(--t-title); border-bottom: 1px solid var(--hair);
}
.choice-line input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-line:has(input:checked) { color: var(--accent); font-weight: 600; }
.choice-line:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.choice-line:active { background: var(--press); }
.qf-save { margin-top: var(--s5); }
.qf-where-page { margin-bottom: 0; }

/* With JS: full screen over the page, one question at a time. */
html.flowing, html.flowing body { overflow: hidden; }
.page { transition: opacity var(--d-slow) var(--ease); }
.page.away { opacity: .2; transition-duration: var(--d-fast); }
.flow { position: fixed; inset: 0; z-index: 10; }
.flow-in {
  position: absolute; left: 0; right: 0; top: 0; height: var(--vvh, 100dvh); transform: translateY(var(--vvt, 0px));
  max-width: var(--measure); margin: 0 auto; display: flex; flex-direction: column; background: var(--raised);
  padding: env(safe-area-inset-top) calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left));
  opacity: 0; transition: opacity var(--d-slow) var(--ease);
}
.flow.open .flow-in { opacity: 1; }
.flow-top { display: flex; align-items: center; min-height: var(--line); padding-top: var(--s2); font-size: var(--t-small); color: var(--ink-2); }
.flow-line {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: baseline;
  padding: var(--s3) 0; min-height: var(--line); border-bottom: 1px solid var(--ink);
  transition: transform var(--d-slow) var(--ease);
}
.fl-main { overflow-wrap: anywhere; font-weight: 600; }
.fl-main.ph { color: var(--ink-3); font-weight: 400; }
.fl-aside { white-space: nowrap; }
.fl-sub { grid-column: 1 / -1; font-size: var(--t-small); color: var(--ink-2); }
.fl-sub[hidden] { display: none; }
.flow-steps { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.flow .qf { height: 100%; }
.flow .qf-steps { position: relative; height: 100%; }
.flow .qf-step {
  position: absolute; inset: 0; overflow-y: auto; padding: var(--s6) 0 var(--s4); border: 0;
  transition: transform var(--d) var(--ease), opacity var(--d) var(--ease);
}
.flow .qf-step.after { transform: translateX(100%); opacity: 0; }
.flow .qf-step.before { transform: translateX(-100%); opacity: 0; }
.flow.still .qf-step { transition: none; }
.flow .qf-save, .flow .qf-fixed { display: none; }
.flow-err { flex: none; }
.bar {
  flex: none; display: flex; align-items: center; gap: var(--s5); min-height: 60px;
  padding: var(--s2) 0 max(var(--s2), env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--raised);
}
html.kb .bar { padding-bottom: var(--s2); }
.bar button {
  appearance: none; background: none; border: 0; border-radius: 0; font: inherit; color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s2);
}
.bar .back { color: var(--ink-2); margin-right: auto; margin-left: calc(-1 * var(--s2)); }
.bar .main { font-weight: 600; order: 2; margin-right: calc(-1 * var(--s2)); }
.bar [hidden] { display: none; }
.bar button:disabled { color: var(--ink-3); }
@media (min-width: 1024px) {
  .flow-in { top: var(--s6); height: calc(var(--vvh, 100dvh) - 2 * var(--s6)); }
}

@media (prefers-reduced-motion: reduce) {
  .flow .qf-step { transform: none !important; transition: opacity var(--d-fast) linear; }
  .flow-line { transform: none !important; }
  .rio.draw .rio-n::before { animation: none; }
}

/* ---------- por resolver (the checks, at the top of the line) ---------- */
.todo { margin: var(--s4) 0 var(--s2); }
.todo-h { font-size: var(--t-small); font-weight: 600; color: var(--ink); padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); }
.todo ul { list-style: none; margin: 0; padding: 0; }
.todo-i {
  display: flex; align-items: center; min-height: 48px; padding: var(--s2) 0; border-bottom: 1px solid var(--hair);
  font-size: var(--t-small); color: var(--ink-2); overflow-wrap: anywhere;
}
.todo-i.warn { color: var(--warn); }
a.todo-i:active { background: var(--press); }
@media (hover: hover) { a.todo-i:hover { background: var(--press); } }

/* ---------- bookings on the line (section 5) ---------- */
.rio-docs { display: flex; flex-wrap: wrap; gap: 0 var(--s3); font-size: var(--t-small); }
.rio-docs a { display: inline-flex; align-items: center; min-height: 32px; overflow-wrap: anywhere; }
@media (hover: hover) { .rio-docs a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.rio-row.has-thumb { grid-template-columns: minmax(0, 1fr) auto 64px; }
.rio-row.has-thumb .rio-s { grid-column: 1 / 3; }
.rio-thumb { grid-column: 3; grid-row: 1 / span 4; align-self: start; width: 64px; height: 48px; object-fit: cover; background: var(--ph); }

/* Housing options: the first photo at the left, on wide screens only (section 6). */
.line.opt .opt-thumb { display: none; }
@media (min-width: 1024px) {
  .line.opt.has-thumb { justify-content: flex-start; }
  .line.opt .opt-thumb { display: block; flex: none; width: 64px; height: 48px; object-fit: cover; background: var(--ph); }
}

/* ---------- Reserva: documents ---------- */
.check-here { font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s2); }
.check-here.warn { color: var(--warn); }
.line.doc { gap: var(--s3); }
.doc-main { display: flex; align-items: center; gap: var(--s3); flex: 1; min-width: 0; color: var(--ink); min-height: 48px; }
.doc-main .line-text { color: var(--accent); }
.doc-thumb { flex: none; width: 64px; height: 48px; object-fit: cover; background: var(--ph); }
.doc-edit { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding-left: var(--s2); }
a.doc-main:active, a.doc-edit:active { background: var(--press); }
@media (hover: hover) { a.doc-main:hover .line-text, a.doc-edit:hover { text-decoration: underline; text-underline-offset: 4px; } }
.doc-preview { display: block; margin: var(--s4) 0; }
.doc-preview img { width: 240px; height: auto; background: var(--ph); }

/* ---------- uploads ---------- */
.upload { margin: 0; }
.upload-pick { position: relative; cursor: pointer; }
.upload-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: var(--t-body); }
.upload-pick:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.upload .hint { margin-bottom: 0; }
.upload-status { list-style: none; margin: 0; padding: 0; }
.upload-status li { font-size: var(--t-small); color: var(--ink-2); padding: var(--s1) 0; overflow-wrap: anywhere; }
.upload-status li.err { color: var(--warn); }
html.js-upload .upload-send { display: none; }

/* ---------- photos (section 6) ---------- */
.reading { color: var(--ink-3); padding: var(--s3) 0; }
.read-failed { color: var(--ink-2); padding: var(--s3) 0 0; }
.strip {
  display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: var(--s3) 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.strip-i { flex: none; scroll-snap-align: start; }
.strip-i img { width: 120px; height: 90px; object-fit: cover; background: var(--ph); }
.strip-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-full { width: 100%; height: auto; margin: var(--s4) 0; background: var(--ph); }

/* The viewer: the screen copy on the dark ground, a bar with fechar. */
html.viewing, html.viewing body { overflow: hidden; }
.viewer {
  position: fixed; inset: 0; z-index: 20; background: var(--ground); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 0; transition: opacity var(--d-fast) var(--ease);
}
.viewer.open { opacity: 1; }
.viewer-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform var(--d) var(--ease); }
.viewer-stage img.dragging { transition: none; }
.viewer-bar {
  flex: none; display: flex; align-items: center; gap: var(--s5); min-height: 60px;
  padding: 0 var(--gutter); border-top: 1px solid var(--hair); max-width: var(--measure); width: 100%; margin: 0 auto;
}
.viewer-bar button {
  appearance: none; background: none; border: 0; border-radius: 0; font: inherit; color: var(--accent); font-weight: 600;
  cursor: pointer; min-height: 48px; padding: 0;
}
.v-count { flex: 1; text-align: center; color: var(--ink-2); font-size: var(--t-small); }
.v-del { color: var(--warn); min-height: 48px; display: inline-flex; align-items: center; }

/* ---------- Orçamento (section 11) ----------
   Plain lines: the question left, the amounts right, one per currency
   stacked; planned and paid side by side in each category's heading. */
.sect-title.sub-title { margin-top: var(--s7); }
.line.sum { align-items: baseline; }
.line-aside.amts { flex-direction: column; align-items: flex-end; gap: 0; white-space: nowrap; }
.amt { display: block; }
.line-sub.warn { color: var(--warn); }
.line-sub-link { display: block; font-size: var(--t-small); min-height: 32px; padding-top: var(--s1); }
@media (hover: hover) { .line-sub-link:hover { text-decoration: underline; text-underline-offset: 4px; } }
.pairs { display: flex; flex-direction: column; align-items: flex-end; font-weight: 400; color: var(--ink); white-space: nowrap; }
.pair-k, .pair-sep { color: var(--ink-2); }
.line.bline, .line.pay { color: var(--ink); }
.line.bline .line-aside, .line.pay .line-aside { white-space: nowrap; }
.owing .line-aside form.inline { display: inline; }
@media (max-width: 420px) {
  .group-h:has(.pairs) { flex-direction: column; align-items: stretch; gap: var(--s1); }
  .pairs { align-items: flex-start; }
}

/* Custom split: one amount per person under one question. */
.parts { display: flex; flex-direction: column; gap: var(--s3); }
.part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; gap: var(--s3); }
.part-l { font-size: var(--t-body); color: var(--ink-2); overflow-wrap: anywhere; }
.part .big { font-size: var(--t-title); }
.unit-t { color: var(--ink-3); font-size: var(--t-body); }