/* trip_brief.css (F2): the loyalty-aware trip brief, compact (Trips panel) and
   full (trip overview). Tokens only (tokens.css); state is carried by a text
   label AND a tint, never colour alone. Geist via the shell. */

.v2-tb {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  background: var(--paper-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-tb__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-tb__ic { display: inline-flex; width: 18px; height: 18px; color: var(--ink-muted); }
.v2-tb__svg { width: 18px; height: 18px; }
.v2-tb__flight { font-weight: 700; color: var(--ink-strong); letter-spacing: 0.01em; }
.v2-tb__route, .v2-tb__date { color: var(--ink-muted); font-size: 0.86667rem; }
.v2-tb__open { margin-left: auto; font-size: 0.86667rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.v2-tb__open:hover { text-decoration: underline; }

.v2-tb__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v2-tb__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--paper);
  font-size: 0.86667rem; color: var(--ink);
  max-width: 100%;
}
.v2-tb__chip a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline-strong); }
.v2-tb__state {
  font-size: 0.73333rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
}
.v2-tb__chip--confirmed .v2-tb__state, .v2-tb__state--confirmed { background: var(--pace-on-track-paper); color: var(--ink); }
.v2-tb__chip--conditional .v2-tb__state, .v2-tb__state--conditional { background: var(--pace-amber-paper); color: var(--pace-amber-dark); }
.v2-tb__chip--not_confirmed .v2-tb__state, .v2-tb__state--not_confirmed { background: var(--paper-shade); color: var(--ink-muted); }
.v2-tb__chip--not_covered .v2-tb__state, .v2-tb__state--not_covered { background: var(--paper-shade); color: var(--ink-faint); }

.v2-tb__seg { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline-soft); }
.v2-tb__seg:last-of-type { border-bottom: 0; padding-bottom: 0; }
.v2-tb__line { border-bottom: 1px solid var(--hairline); padding: 8px 0 12px; }
.v2-tb__line > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 44px; flex-wrap: wrap; }
.v2-tb__line > summary::-webkit-details-marker { display: none; }
.v2-tb__title { font-weight: 600; color: var(--ink-strong); }
.v2-tb__text { margin: 6px 0 0; color: var(--ink); font-size: 1rem; line-height: 1.55; max-width: 70ch; overflow-wrap: anywhere; }
.v2-tb__text a { color: var(--navy); }
.v2-tb__connection { margin: 0; color: var(--ink-muted); font-size: 0.86667rem; }
.v2-tb__watch { display: grid; grid-template-columns: 18px 1fr; gap: 4px 8px; align-items: center; padding-top: 8px; border-top: 1px solid var(--hairline-soft); }
.v2-tb__watch .v2-tb__text { grid-column: 1 / -1; margin: 0; }
.v2-tb__watch--paused .v2-tb__title { color: var(--pace-amber-dark); }
.v2-tb__watch--off .v2-tb__title { color: var(--ink-muted); }
.v2-tb__empty { margin: 0; color: var(--ink); line-height: 1.5; }
.v2-tb__actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 767px) {
  .v2-tb__chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .v2-tb__chip { flex: 0 0 auto; max-width: 85vw; }
  .v2-tb__open { margin-left: 0; }
  .v2-tb__line:not([open]) .v2-tb__text { display: none; }
}

.v2-tb__line > summary::after { content: '+'; margin-left: auto; color: var(--ink-muted); }
.v2-tb__line[open] > summary::after { content: '-'; }
.v2-tb a, .v2-tb__actions button { min-height: 44px; }
.v2-tb__open, .v2-tb__text a { display: inline-flex; align-items: center; }
.v2-tb a:focus-visible, .v2-tb summary:focus-visible, .v2-tb button:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 4px;
}