/* Roteiros (docs/travel-plan.md). Só o que é desta tela: a base (.module-*, botões, campos,
   cartões, carregamento) vem do app.css do host, e nenhuma cor é literal — tudo por token, que é o
   que faz o tema do espaço valer aqui também. */
@layer components {
    /* Uma vista por vez: lista OU roteiro. */
    .trip-view {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* ---------- compositor ---------- */
    /* Os campos são os do host (form-modal-*). Aqui só o espaçamento do cartão. */
    .trip-composer {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Divisória entre grupos do formulário: fecha um assunto antes de começar o próximo. */
    .trip-rule {
        grid-column: 1 / -1;
        margin: 2px 0;
        border: 0;
        border-block-start: 1px solid var(--line);
    }

    /* O que a viagem inclui. Fieldset porque são duas escolhas do mesmo assunto, e o leitor de
       tela precisa ouvir o rótulo do grupo antes de cada caixa. */
    .trip-includes {
        grid-column: 1 / -1;
        border: 0;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .trip-include {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--text-sm);
        /* O alvo do toque é a linha inteira, não o quadradinho: a etiqueta envolve a caixa. */
        cursor: pointer;
    }

    .trip-include input {
        /* Acompanha o tema: sem isto a caixa fica azul do sistema no tema ameixa. */
        accent-color: var(--accent);
        inline-size: 16px;
        block-size: 16px;
        margin: 0;
    }

    /* ---------- exemplos ---------- */    /* ---------- exemplos ---------- */
    .trip-examples {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .trip-example-button {
        font: inherit;
        font-size: var(--text-sm);
        color: var(--ink-muted);
        border: 1px dashed var(--line-control);
        background: transparent;
        border-radius: 999px;
        padding: 9px 15px;
        min-block-size: 40px;
        cursor: pointer;
        text-align: start;
    }

    .trip-example-button:hover {
        border-style: solid;
        background: var(--surface-hover);
        color: var(--ink);
    }

    .trip-example {
        display: flex;
    }

    /* A gaveta do segundo plano: separada do que está acima por uma linha, não por espaço solto. */
    .trip-more {
        border-block-start: 1px solid var(--line);
        padding-block-start: 14px;
    }

    .trip-recent {
        display: flex;
        flex-direction: column;
    }

    /* ---------- lista ---------- */
    .trip-section-title {
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-muted);
        margin: 0 0 8px;
    }

    /* A grade dos roteiros é a tabela padrão dos módulos: daqui saem só as células próprias. */
    .trip-plans .trip-status {
        margin-block-end: 0;
    }

    .trip-plan-title {
        display: block;
        font-weight: 600;
    }

    .trip-plan-meta {
        display: block;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
        margin-block-start: 2px;
    }

    .trip-plan-total {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        white-space: nowrap;
    }

    /* ---------- cabeçalho do roteiro ---------- */
    .trip-back-row {
        display: flex;
    }

    .trip-back {
        font: inherit;
        font-size: var(--text-sm);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: 0;
        padding: 6px 4px;
        min-block-size: 40px;
        color: var(--ink-muted);
        cursor: pointer;
    }

    .trip-back svg {
        inline-size: 16px;
        block-size: 16px;
    }

    .trip-back:hover {
        color: var(--ink);
    }

    .trip-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "text figures"
            "controls figures";
        gap: 10px 24px;
        align-items: start;
        padding-block-end: 18px;
        border-block-end: 1px solid var(--line);
    }

    .trip-header-text {
        grid-area: text;
        min-inline-size: 0;
    }

    /* O estado do ROTEIRO. Por forma e texto — a cor reforça, nunca carrega sozinha. */
    .trip-status {
        display: inline-block;
        font-size: var(--text-2xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 999px;
        border: 1px solid var(--line-control);
        color: var(--ink-muted);
        margin-block-end: 6px;
    }

    .trip-status.is-working {
        border-color: var(--accent-ink);
        color: var(--accent-ink);
    }

    .trip-status.is-ready {
        border-color: var(--green);
        color: var(--green-dark);
    }

    .trip-status.is-partial {
        border-color: var(--warn-border);
        color: var(--warn-ink);
        background: var(--warn-bg);
    }

    .trip-status.is-failed {
        border-color: var(--danger-border);
        color: var(--danger);
        background: var(--danger-bg);
    }

    .trip-tally {
        margin: 6px 0 0;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .trip-title {
        margin: 0;
        font-size: var(--text-display-sm);
        text-wrap: balance;
    }

    .trip-subtitle {
        margin: 4px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-sm);
    }

    /* ---------- percurso ----------
       Casa → paradas e destinos → casa. Quebra de linha, nunca rolagem: a regra do repositório para
       grade vale aqui, e num celular quatro lugares não cabem numa linha só.

       Destino e parada se distinguem por FORMA: o destino é uma pílula cheia, a parada tem contorno
       tracejado e a palavra escrita. Casa não tem moldura nenhuma — é o ponto de partida, não um
       lugar da viagem.
    */
    .trip-route {
        list-style: none;
        margin: 10px 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 0;
        font-size: var(--text-sm);
    }

    .trip-route-point {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px 8px;
        min-inline-size: 0;
        padding: 4px 10px;
        border: 1px solid transparent;
        border-radius: 999px;
    }

    /* A seta é do item, e não um elemento a mais: leitor de tela lê a lista, não a pontuação. */
    .trip-route-point + .trip-route-point {
        position: relative;
        margin-inline-start: 26px;
    }

    /* Fora da pílula: a seta liga dois lugares, não pertence a nenhum deles. */
    .trip-route-point + .trip-route-point::before {
        content: "→";
        position: absolute;
        inset-inline-start: -20px;
        inset-block-start: 50%;
        translate: 0 -50%;
        color: var(--ink-muted);
        font-weight: 400;
    }

    .trip-route-home {
        color: var(--ink-muted);
        padding-inline: 0;
    }

    .trip-route-destination {
        border-color: var(--line-control);
        background: var(--surface);
        font-weight: 600;
    }

    .trip-route-stop {
        border-style: dashed;
        border-color: var(--line-control);
    }

    .trip-route-name {
        overflow-wrap: anywhere;
    }

    .trip-route-facts {
        font-size: var(--text-2xs);
        font-weight: 400;
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
    }

    /* Texto, não ícone: "mover" sem dizer para onde obrigaria a clicar para descobrir. */
    .trip-route-move {
        font: inherit;
        font-size: var(--text-2xs);
        font-weight: 400;
        border: 0;
        background: transparent;
        color: var(--accent-ink);
        padding: 4px 2px;
        min-block-size: 28px;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        white-space: nowrap;
    }

    .trip-route-move:hover:not(:disabled) {
        text-decoration-thickness: 2px;
    }

    .trip-route-move:disabled {
        opacity: 0.5;
        cursor: default;
        text-decoration: none;
    }

    @media (pointer: coarse) {
        /* No toque o alvo cresce até os 44px sem mudar o desenho: a área é do botão, não do texto. */
        .trip-route-move {
            min-block-size: 44px;
            padding-inline: 6px;
        }
    }

    .trip-header-figures {
        grid-area: figures;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        min-inline-size: 180px;
    }

    .trip-total {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .trip-total-label {
        font-size: var(--text-2xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-muted);
    }

    .trip-total-value {
        font-size: var(--text-heading-md);
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

    .trip-header-controls {
        grid-area: controls;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Orçamento é barra, não número: número sozinho não diz onde cortar. */
    .trip-budget {
        inline-size: 100%;
    }

    .trip-budget-bar {
        block-size: 6px;
        border-radius: 999px;
        background: var(--surface-strong);
        overflow: hidden;
    }

    .trip-budget-fill {
        block-size: 100%;
        inline-size: 0;
        background: var(--green);
        transition: inline-size 240ms ease;
    }

    .trip-budget-fill.is-over {
        background: var(--danger);
    }

    .trip-budget-text {
        margin: 5px 0 0;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    /* ---------- o que o viajante pediu ----------
       Cartão neutro, não faixa de alarme: a maioria destas linhas é boa notícia ("está no roteiro"),
       e vesti-las de amarelo ensinaria o viajante a ignorar o amarelo que importa. O que não foi
       honrado se distingue por FORMA — marca de alfinete em vez de visto, e a barra lateral de
       atenção só nele.
    */
    .trip-wishes {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        padding: 12px 14px;
    }

    .trip-wishes-title {
        margin: 0 0 8px;
        font-size: var(--text-2xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-muted);
        font-weight: 600;
    }

    .trip-wish-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .trip-wish {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        font-size: var(--text-sm);
    }

    .trip-wish-mark {
        inline-size: 16px;
        block-size: 16px;
        flex: none;
        color: var(--accent-ink);
    }

    .trip-wish-text {
        flex: 1 1 200px;
        min-inline-size: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 8px;
    }

    .trip-wish-state {
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    /* Quem decidiu a posição. Neutro quando foi ele; marcado quando foi o César — pela borda e
       pela palavra, não por cor de alarme: não é um problema, é uma escolha à vista. */
    .trip-wish-author {
        font-size: var(--text-2xs);
        color: var(--ink-muted);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 1px 8px;
        white-space: nowrap;
    }

    .trip-wish-author.is-chosen {
        border-style: dashed;
        border-color: var(--line-control);
        color: var(--ink);
    }

    /* A frase do viajante ocupa a linha inteira embaixo: é a citação, não o título. */
    .trip-wish-said {
        flex-basis: 100%;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .trip-wish-unmet {
        border-inline-start: 3px solid var(--warn-border);
        padding-inline-start: 9px;
        margin-inline-start: -12px;
    }

    .trip-wish-unmet .trip-wish-mark {
        color: var(--warn-ink);
    }

    .trip-wish-action {
        font: inherit;
        font-size: var(--text-sm);
        border: 1px solid var(--line-control);
        background: transparent;
        color: inherit;
        border-radius: 8px;
        padding: 6px 11px;
        min-block-size: 36px;
        cursor: pointer;
        white-space: nowrap;
    }

    .trip-wish-action:hover:not(:disabled) {
        border-color: var(--accent-ink);
        background: var(--surface-hover);
    }

    /* Enquanto o motor monta, o botão espera: o pedido de montagem seria engolido. */
    .trip-wish-action:disabled {
        opacity: 0.5;
        cursor: default;
    }

    /* ---------- avisos ---------- */
    .trip-warnings {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .trip-warnings:empty {
        display: none;
    }

    /* Aviso é TEXTO, nunca tooltip: tooltip em hover não existe no celular e some para o teclado. */
    .trip-warning {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 9px 12px;
        border: 1px solid var(--warn-border);
        border-inline-start-width: 3px;
        background: var(--warn-bg);
        color: var(--warn-ink);
        border-radius: 10px;
        font-size: var(--text-sm);
    }

    .trip-warning-text {
        flex: 1 1 200px;
        min-inline-size: 0;
    }

    .trip-warning-action {
        font: inherit;
        font-size: var(--text-sm);
        border: 1px solid currentColor;
        background: transparent;
        color: inherit;
        border-radius: 8px;
        padding: 6px 11px;
        min-block-size: 36px;
        cursor: pointer;
        white-space: nowrap;
    }

    /* ---------- geração em curso ---------- */
    .trip-progress {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /*
       A régua das etapas. Uma linha contínua com quatro nós: o que passou fica cheio, o que está
       acontecendo pulsa, o que falta fica vazio. Estado por FORMA (nó cheio, anel, contorno) antes
       de por cor — a cor reforça, nunca carrega sozinha.
    */
    .trip-steps {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 0;
    }

    .trip-step {
        flex: 1 1 0;
        min-inline-size: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "node line"
            "label label"
            "bar bar";
        align-items: center;
        gap: 8px 10px;
    }

    /* A última não puxa a linha: ela é o fim do caminho, não um trecho dele. */
    .trip-step:last-child {
        flex: 0 0 auto;
    }

    .trip-step-node {
        grid-area: node;
        inline-size: 18px;
        block-size: 18px;
        border-radius: 999px;
        border: 2px solid var(--line-control);
        background: var(--surface);
        display: grid;
        place-items: center;
        transition: border-color 200ms ease, background-color 200ms ease;
    }

    /* O trilho entre um nó e o próximo. */
    .trip-step::after {
        content: "";
        grid-area: line;
        block-size: 2px;
        border-radius: 999px;
        background: var(--line);
    }

    .trip-step:last-child::after {
        display: none;
    }

    .trip-step-label {
        grid-area: label;
        font-size: var(--text-sm);
        color: var(--ink-muted);
        display: flex;
        align-items: baseline;
        gap: 6px;
        min-inline-size: 0;
    }

    .trip-step-count {
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        font-size: var(--text-2xs);
        color: var(--ink);
        padding: 1px 7px;
        border-radius: 999px;
        background: var(--surface-strong);
    }

    /* ── Passou ── */
    .trip-step.is-done .trip-step-node {
        border-color: var(--accent-ink);
        background: var(--accent-ink);
    }

    /* A marca é o que diz "feito" sem depender de cor nenhuma. */
    .trip-step.is-done .trip-step-node::after {
        content: "";
        inline-size: 5px;
        block-size: 9px;
        border: solid var(--on-accent);
        border-width: 0 2px 2px 0;
        transform: translateY(-1px) rotate(45deg);
    }

    .trip-step.is-done::after {
        background: var(--accent-ink);
    }

    .trip-step.is-done .trip-step-label {
        color: var(--ink);
    }

    /* ── Acontecendo ── */
    .trip-step.is-running .trip-step-node {
        border-color: var(--accent-ink);
    }

    .trip-step.is-running .trip-step-node::after {
        content: "";
        inline-size: 7px;
        block-size: 7px;
        border-radius: 999px;
        background: var(--accent-ink);
        animation: trip-pulse 1.4s ease-in-out infinite;
    }

    .trip-step.is-running .trip-step-label {
        color: var(--ink);
        font-weight: 600;
    }

    /* O trilho da etapa em curso é meio caminho: começou, não terminou. */
    .trip-step.is-running::after {
        background: linear-gradient(90deg, var(--accent-ink) 50%, var(--line) 50%);
    }

    @keyframes trip-pulse {
        50% { transform: scale(0.55); opacity: 0.45; }
    }

    /* A contagem em forma de barra, só na etapa cara. */
    .trip-step-bar {
        grid-area: bar;
        block-size: 3px;
        border-radius: 999px;
        background: var(--surface-strong);
        overflow: hidden;
        margin-block-start: 2px;
        margin-inline-end: 10px;
    }

    .trip-step-bar i {
        display: block;
        block-size: 100%;
        background: var(--accent-ink);
        transition: inline-size 300ms ease;
    }

    .trip-skeleton {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .trip-skeleton-row {
        block-size: 52px;
        border-radius: 10px;
        background: linear-gradient(90deg, var(--surface-strong), var(--surface-hover), var(--surface-strong));
        background-size: 200% 100%;
        animation: trip-shimmer 1.4s linear infinite;
    }

    @keyframes trip-shimmer {
        to { background-position: -200% 0; }
    }

    /* ---------- linha do tempo + painel ---------- */
    .trip-layout {
        display: grid;
        grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .trip-timeline {
        position: sticky;
        top: 12px;
        max-block-size: calc(100vh - 40px);
        overflow-y: auto;
    }

    /* Listas ordenadas de verdade: o leitor de tela anuncia "item 3 de 7" sozinho. */
    .trip-days,
    .trip-day-slots {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .trip-day {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        column-gap: 10px;
    }

    .trip-day-date {
        grid-column: 1;
        padding-block-start: 10px;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
        text-align: end;
        font-variant-numeric: tabular-nums;
        line-height: 1.25;
    }

    .trip-day-date strong {
        display: block;
        font-size: var(--text-sm);
        color: var(--ink);
    }

    /* O trilho: uma linha contínua que amarra o dia inteiro. */
    .trip-day-slots {
        grid-column: 2;
        border-inline-start: 1px solid var(--line);
        padding-inline-start: 12px;
        padding-block: 6px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .trip-day:last-child .trip-day-slots {
        border-inline-start-color: transparent;
    }

    .trip-slot-item {
        position: relative;
    }

    /* O nó no trilho, alinhado com a linha do botão. */
    .trip-slot-item::before {
        content: "";
        position: absolute;
        inset-inline-start: -17px;
        inset-block-start: 20px;
        inline-size: 7px;
        block-size: 7px;
        border-radius: 999px;
        background: var(--line-control);
    }

    .trip-slot-item.is-chosen::before {
        background: var(--accent-ink);
    }

    /* O translado vive no trilho, entre dois itens: recuado para a esquerda, discreto, texto. */
    .trip-hop {
        margin: 0;
        padding: 3px 10px 3px 0;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    /* O ícone do translado fica na cor do texto que ele acompanha (--ink-muted, herdado do
       .trip-hop) e sem caixa: ele é sinalização de passagem, não uma parada na agenda.
       `align-items: baseline` no pai alinharia o SVG pela borda de baixo — `translate` devolve o
       desenho ao centro óptico da linha. */
    .trip-hop-mark {
        display: inline-flex;
        flex: none;
        line-height: 1;
        transform: translateY(2px);
        opacity: 0.9;
    }

    .trip-hop-main {
        min-inline-size: 0;
    }

    .trip-hop-alt {
        opacity: 0.75;
    }

    .trip-slot-button {
        inline-size: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        text-align: start;
        min-block-size: 46px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        color: var(--ink);
        cursor: pointer;
        font: inherit;
    }

    .trip-slot-button:hover {
        background: var(--surface-hover);
    }

    .trip-slot-item.is-selected .trip-slot-button {
        background: var(--surface-strong);
        border-color: var(--accent-ink);
    }

    /* Travado muda de fundo: sem isso não se entende por que a remontagem poupou aquilo. */
    .trip-slot-item.is-locked .trip-slot-button {
        background: var(--surface-strong);
    }

    /*
       O selo do trecho. Duas cores derivadas de um matiz só (o mesmo truque das capas em
       .trip-cover-art): fundo bem claro, traço saturado. Assim uma família nova precisa de uma
       linha — o matiz — e não de um par de cores escolhido à mão, que é onde o contraste escapa.

       26px porque o ícone dentro tem 16: menos que isso e a caixa aperta o desenho, mais e ela
       começa a competir com o nome do trecho, que é a informação.
    */
    .trip-glyph {
        --glyph-hue: 214;
        --glyph-tint: hsl(var(--glyph-hue) 62% 95%);
        --glyph-ink: hsl(var(--glyph-hue) 46% 40%);
        inline-size: 26px;
        block-size: 26px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        background: var(--glyph-tint);
        color: var(--glyph-ink);
        /* O selo nunca encolhe: a coluna de ícones tem de ficar reta de cima a baixo, senão a
           varredura vertical — a razão de o ícone existir — se perde. */
        flex: none;
        transition: transform 120ms ease, background-color 120ms ease;
    }

    /* Deslocamento (voo, ônibus, trem, carro, transfer): azul, a família mais numerosa. */
    .trip-glyph-move {
        --glyph-hue: 214;
    }

    /* Onde se dorme: violeta. É o trecho que ancora o dia, e destacá-lo dos deslocamentos é o que
       deixa a silhueta da viagem legível de longe. */
    .trip-glyph-stay {
        --glyph-hue: 262;
    }

    /* Comer: âmbar. */
    .trip-glyph-eat {
        --glyph-hue: 30;
        --glyph-ink: hsl(var(--glyph-hue) 58% 36%);
    }

    /* Ver e fazer (passeio e entrada): verde-água. */
    .trip-glyph-see {
        --glyph-hue: 172;
        --glyph-ink: hsl(var(--glyph-hue) 52% 32%);
    }

    /* Tempo livre não é categoria, é ausência de compromisso: fica no cinza dos tokens, sem matiz,
       para não disputar atenção com o que o viajante realmente tem de decidir. */
    .trip-glyph-idle {
        background: var(--surface-strong);
        color: var(--ink-muted);
    }

    /* Hover no trecho inteiro levanta o selo de leve: confirma o alvo do clique sem mover o texto
       (que causaria reflow e leitura instável na lista). */
    .trip-slot-button:hover .trip-glyph {
        transform: scale(1.06);
    }

    /* Escolhido: o selo ganha um anel na cor de acento — o mesmo sinal do nó no trilho, para os
       dois lerem como um só estado. */
    .trip-slot-item.is-chosen .trip-glyph {
        box-shadow: 0 0 0 1.5px var(--accent-ink);
    }

    .trip-glyph-art {
        display: block;
    }

    /* Quem pediu menos movimento não recebe nenhum. */
    @media (prefers-reduced-motion: reduce) {
        .trip-glyph {
            transition: none;
        }

        .trip-slot-button:hover .trip-glyph {
            transform: none;
        }
    }

    .trip-slot-name {
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
    }

    .trip-slot-name b {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trip-slot-name span {
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .trip-slot-price {
        font-variant-numeric: tabular-nums;
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    .trip-slot-price.is-empty {
        color: var(--ink-muted);
    }

    .trip-panel {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        padding: 20px;
        min-inline-size: 0;
    }

    .trip-panel-idle {
        color: var(--ink-muted);
        text-align: center;
        margin: 0;
        padding-block: 40px;
    }

    .trip-panel-head {
        margin-block-end: 16px;
    }

    .trip-panel-kind {
        font-size: var(--text-2xs);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ink-muted);
    }

    .trip-panel-title {
        margin: 2px 0 0;
        font-size: var(--text-heading-sm);
        text-wrap: balance;
    }

    .trip-panel-meta {
        margin: 4px 0 0;
        color: var(--ink-muted);
        font-size: var(--text-2xs);
    }

    .trip-candidates {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 10px;
    }

    /* Cartão comparável, não linha de tabela: três atributos sempre na mesma posição. */
    .trip-candidate {
        border: 1px solid var(--line-control);
        border-radius: 12px;
        padding: 13px;
        background: var(--surface);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .trip-candidate:hover {
        border-color: var(--line-hover);
        background: var(--surface-hover);
    }

    /* Escolhido por FORMA (marca + borda), nunca só por cor. */
    .trip-candidate.is-chosen {
        border-color: var(--accent-ink);
        box-shadow: inset 0 0 0 1px var(--accent-ink);
    }

    .trip-candidate.is-reported {
        border-style: dashed;
    }

    /* Capa do passeio: proporção fixa para a grade não dançar conforme a foto. */
    .trip-candidate-cover {
        inline-size: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 8px;
        background: var(--surface-strong);
        display: block;
    }

    /*
       A ilustração: matiz vindo do TS, claro e escuro resolvidos aqui. Ela não compete com o texto
       — é fundo de cartão, não obra.
    */
    .trip-cover-art {
        --cover-bg: hsl(var(--cover-hue) 52% 94%);
        --cover-ink: hsl(var(--cover-hue) 42% 38%);
    }

    .trip-candidate-head {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .trip-candidate-summary {
        flex: 1 1 auto;
        font-weight: 600;
        min-inline-size: 0;
    }

    .trip-candidate-check {
        inline-size: 18px;
        block-size: 18px;
        border-radius: 999px;
        border: 1.5px solid var(--line-control);
        display: grid;
        place-items: center;
        font-size: 11px;
        flex: 0 0 auto;
    }

    .trip-candidate.is-chosen .trip-candidate-check {
        background: var(--accent-ink);
        border-color: var(--accent-ink);
        color: var(--on-accent);
    }

    /* As três posições fixas. Faltando, "—": esconder a coluna desalinharia a comparação. */
    .trip-facts {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .trip-fact {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-inline-size: 0;
    }

    .trip-fact dt {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--ink-muted);
    }

    .trip-fact dd {
        margin: 0;
        font-size: var(--text-sm);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trip-fact-price dd {
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .trip-candidate.is-stale .trip-fact-price dd {
        opacity: 0.5;
    }

    .trip-candidate-foot {
        display: flex;
        gap: 6px;
        align-items: center;
        flex-wrap: wrap;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .trip-tag {
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 2px 8px;
    }

    .trip-tag.is-stale {
        border-color: var(--warn-border);
        color: var(--warn-ink);
    }

    /* O selo de fonte do Airbnb e do Booking.com é a LOGO, não a palavra. A logo vai como SVG
       inline no background — o mesmo padrão dos .integration-catalog-logo-* do app.css, que também
       não usam arquivo nem <img>: uma marca é parte do estilo, e assim ela nunca falha em carregar
       nem pisca em tela lenta. O nome fica no DOM em .sr-only (o TS o escreve), então a caixa
       PRECISA de tamanho próprio: sem conteúdo visível ela colapsaria para nada. Sem borda e sem
       padding porque a logo já é a etiqueta inteira. */
    .trip-tag-brand {
        display: inline-block;
        flex: none;
        inline-size: 18px;
        block-size: 18px;
        padding: 0;
        border: 0;
        border-radius: 3px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* Airbnb: o símbolo "Bélo" no coral oficial (#ff5a5f). Path do Simple Icons (CC0). */
    .trip-brand-airbnb {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff5a5f' d='M12.001 18.275c-1.353-1.697-2.148-3.184-2.413-4.457-.263-1.027-.16-1.848.291-2.465.477-.71 1.188-1.056 2.121-1.056s1.643.345 2.12 1.063c.446.61.558 1.432.286 2.465-.291 1.298-1.085 2.785-2.412 4.458zm9.601 1.14c-.185 1.246-1.034 2.28-2.2 2.783-2.253.98-4.483-.583-6.392-2.704 3.157-3.951 3.74-7.028 2.385-9.018-.795-1.14-1.933-1.695-3.394-1.695-2.944 0-4.563 2.49-3.927 5.382.37 1.565 1.352 3.343 2.917 5.332-.98 1.085-1.91 1.856-2.732 2.333-.636.344-1.245.558-1.828.609-2.679.399-4.778-2.2-3.825-4.88.132-.345.395-.98.845-1.961l.025-.053c1.464-3.178 3.242-6.79 5.285-10.795l.053-.132.58-1.116c.45-.822.635-1.19 1.351-1.643.346-.21.77-.315 1.246-.315.954 0 1.698.558 2.016 1.007.158.239.345.557.582.953l.558 1.089.08.159c2.041 4.004 3.821 7.608 5.279 10.794l.026.025.533 1.22.318.764c.243.613.294 1.222.213 1.858zm1.22-2.39c-.186-.583-.505-1.271-.9-2.094v-.03c-1.889-4.006-3.642-7.608-5.307-10.844l-.111-.163C15.317 1.461 14.468 0 12.001 0c-2.44 0-3.476 1.695-4.535 3.898l-.081.16c-1.669 3.236-3.421 6.843-5.303 10.847v.053l-.559 1.22c-.21.504-.317.768-.345.847C-.172 20.74 2.611 24 5.98 24c.027 0 .132 0 .265-.027h.372c1.75-.213 3.554-1.325 5.384-3.317 1.829 1.989 3.635 3.104 5.382 3.317h.372c.133.027.239.027.265.027 3.37.003 6.152-3.261 4.802-6.975z'/%3E%3C/svg%3E");
    }

    /* Booking.com: o quadrado azul-marinho oficial (#003580) com o "B" vazado em branco. O path do
       Simple Icons (CC0) desenha o quadrado e recorta o B pelo sentido de traçado — daí o retângulo
       branco atrás, que é o que aparece pelo recorte. */
    .trip-brand-booking {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cpath fill='%23003580' d='M24 0H0v24h24ZM8.575 6.563h2.658c2.108 0 3.473 1.15 3.473 2.898 0 1.15-.575 1.82-.91 2.108l-.287.263.335.192c.815.479 1.318 1.389 1.318 2.395 0 1.988-1.51 3.257-3.857 3.257H7.449V7.713c0-.623.503-1.126 1.126-1.15zm1.7 1.868c-.479.024-.694.264-.694.79v1.893h1.676c.958 0 1.294-.743 1.294-1.365 0-.815-.503-1.318-1.318-1.318zm-.096 4.36c-.407.071-.598.31-.598.79v2.251h1.868c.934 0 1.509-.55 1.509-1.533 0-.934-.599-1.509-1.51-1.509zm7.737 2.394c.743 0 1.341.599 1.341 1.342a1.34 1.34 0 0 1-1.341 1.341 1.355 1.355 0 0 1-1.341-1.341c0-.743.598-1.342 1.34-1.342z'/%3E%3C/svg%3E");
    }

    /* A logo de quem ENTREGA, quando ela vem do próprio fornecedor: locadora de carro, hoje. Aqui
       é <img> e não SVG no background, e a diferença é deliberada — as duas marcas acima cobrem o
       catálogo de hospedagem inteiro e cabem no estilo; locadora é conjunto aberto (Localiza,
       Movida, Unidas, Hertz, mais as regionais de cada país), e um arquivo por empresa seria uma
       lista que nunca fica pronta. Então a imagem vem do fornecedor pelo nosso proxy assinado.

       Sem inline-size fixo: as logos têm proporções diferentes entre si, e travar a largura
       achataria umas e esticaria outras. A altura é que alinha a linha. */
    .trip-tag-logo {
        display: inline-flex;
        align-items: center;
        flex: none;
        padding: 0;
        border: 0;
        background: none;
    }

    .trip-brand-logo {
        block-size: 18px;
        inline-size: auto;
        max-inline-size: 72px;
        object-fit: contain;
    }

    /* O "Abrir" fecha a linha do rodapé pela borda oposta às etiquetas: `auto` na margem inicial
       come toda a folga entre a logo e ele, então os dois ficam nas pontas sem precisar de
       `space-between` (que espalharia também as etiquetas de "estimado" e "vencido" no meio). */
    .trip-candidate-buy {
        margin-inline-start: auto;
        flex: none;
    }

    /* No estreito o rodapé já quebra em duas linhas; ali o `auto` não tem folga para comer, e o
       botão ocupa a linha inteira em vez de ficar pendurado num canto. */
    @media (max-width: 520px) {
        .trip-candidate-buy {
            inline-size: 100%;
            margin-inline-start: 0;
            text-align: center;
        }
    }

    .trip-panel-note {
        margin: 14px 0 0;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .trip-panel-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-block-start: 14px;
        padding-block-start: 14px;
        border-block-start: 1px solid var(--line);
    }

    /* Foco visível sempre — nunca outline: none. */
    .trip-slot-button:focus-visible,
    .trip-candidate:focus-visible,
    .trip-example-button:focus-visible,
    .trip-warning-action:focus-visible,
    .trip-wish-action:focus-visible,
    .trip-route-move:focus-visible,
    .trip-chip:focus-visible,
    .trip-plan-open:focus-visible,
    .trip-back:focus-visible,
    .trip-input:focus-visible,
    .trip-select:focus-visible {
        outline: 2px solid var(--accent-ink);
        outline-offset: 2px;
    }

    /*
       No escuro o fundo escurece e o traço clareia: mesma cena, mesmo peso. Os dois blocos abaixo
       são o padrão do host: a preferência do sistema vale para quem não escolheu tema à mão, e a
       escolha explícita vence nos dois sentidos. Sem o `prefers-color-scheme`, a regra do
       `:not([data-theme="light"])` pegaria também o tema claro.
    */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .trip-cover-art {
            --cover-bg: hsl(var(--cover-hue) 28% 18%);
            --cover-ink: hsl(var(--cover-hue) 45% 68%);
        }

        /* O selo do trecho segue a mesma inversão das capas: fundo escuro e dessaturado, traço
           claro. As famílias não são redeclaradas — cada uma só define o matiz, e é ele que estas
           duas linhas recolorem. */
        :root:not([data-theme="light"]) .trip-glyph {
            --glyph-tint: hsl(var(--glyph-hue) 26% 19%);
            --glyph-ink: hsl(var(--glyph-hue) 58% 72%);
        }
    }

    :root[data-theme="dark"] .trip-cover-art {
        --cover-bg: hsl(var(--cover-hue) 28% 18%);
        --cover-ink: hsl(var(--cover-hue) 45% 68%);
    }

    :root[data-theme="dark"] .trip-glyph {
        --glyph-tint: hsl(var(--glyph-hue) 26% 19%);
        --glyph-ink: hsl(var(--glyph-hue) 58% 72%);
    }

    @media (max-width: 900px) {
        /* Uma coluna: a linha do tempo vira a página e o painel vem abaixo dela. */
        .trip-layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .trip-timeline {
            position: static;
            max-block-size: none;
        }

        .trip-header {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "text"
                "figures"
                "controls";
        }

        .trip-header-figures {
            align-items: flex-start;
            min-inline-size: 0;
        }

        .trip-total {
            align-items: flex-start;
        }

        .trip-budget-text {
            text-align: start;
        }
    }

    @media (max-width: 560px) {
        /* Empilhada: o trilho vira vertical, ligando os nós de cima para baixo. */
        .trip-steps {
            flex-direction: column;
            gap: 2px;
        }

        .trip-step,
        .trip-step:last-child {
            flex: 0 0 auto;
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-areas:
                "node label"
                "line bar";
            align-items: start;
            gap: 4px 10px;
        }

        .trip-step::after {
            inline-size: 2px;
            block-size: 14px;
            justify-self: center;
            margin-block: 2px;
        }

        .trip-step.is-running::after {
            background: linear-gradient(180deg, var(--accent-ink) 50%, var(--line) 50%);
        }

        .trip-step-bar {
            margin-inline-end: 0;
            align-self: center;
        }

        .trip-sentence {
            font-size: var(--text-sm);
            line-height: 2.4;
        }

        .trip-facts {
            grid-template-columns: minmax(0, 1fr);
        }

        .trip-day {
            grid-template-columns: 44px minmax(0, 1fr);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .trip-budget-fill,
        .trip-inline {
            transition: none;
        }

        .trip-step.is-running .trip-step-node::after,
        .trip-skeleton-row {
            animation: none;
        }

        .trip-step-bar i,
        .trip-step-node {
            transition: none;
        }
    }
}