/*
 * Kun tur-spesifikke stiler. Basis-elementer (input, button, select,
 * textarea, label, fieldset, typografi osv.) styles i den delte
 * ../styles.css - ikke her. Denne fila skal ikke inneholde egne regler
 * for slike elementer.
 *
 * Alt her legges i `@layer side-spesifikt` (lag-rekkefølgen er erklært i
 * ../styles.css) - da vinner disse side-spesifikke reglene alltid over
 * de generiske element-reglene i base-laget, uavhengig av kildeorden.
 */
@layer side-spesifikt {
    nav.tilbake {
        margin-block-end: 1lh;
    }

    section {
        margin-block-end: 2lh;
    }

    .trip-list {
        list-style: none;
        padding: 0;
    }

    /* Spinnet (linjen) og møtepunktet (prikken) deler samme faste bredde
       (--timeline-marker-size) og sentreres begge på 50% av den bredden med
       moderne CSS shape() - dermed havner de garantert nøyaktig oppå
       hverandre, uansett skrift/tegnbredde. Tidligere ble de to plassert
       uavhengig av hverandre med ch-baserte offset som ga ulik sentrering.
       Spinnet tegnes per listepunkt (ikke som én lang kant på selve lista),
       slik at reisetid-strekninger kan stiples (via mask-image) uten at det
       oppstår overlapp med en heltrukken linje liggende bak. Prikken tegnes
       i ::after (males etter, altså over, linja i ::before) slik at den
       alltid er synlig oppå spinnet. */
    .timeline {
        list-style: none;
        padding: 0;

        > li {
            --timeline-marker-size: 0.9ch;
            padding-inline-start: 1.5ch;
            padding-block: 0.6lh;
            margin-block-end: 0;
            position: relative;

            &::before, &::after {
                inset-inline-start: calc(var(--timeline-marker-size) / -2);
            }

            &::before {
                content: "";
                position: absolute;
                inset-block: 0;
                inline-size: var(--timeline-marker-size);
                background: var(--border-color);
                clip-path: shape(
                    from calc(50% - 1px) 0,
                    line to calc(50% + 1px) 0,
                    line to calc(50% + 1px) 100%,
                    line to calc(50% - 1px) 100%,
                    close
                );
            }

            &::after {
                content: "";
                position: absolute;
                top: 1.2lh;
                inline-size: var(--timeline-marker-size);
                block-size: var(--timeline-marker-size);
                background: currentColor;
                clip-path: shape(
                    from 50% 0%,
                    arc to 50% 100% of 50% cw,
                    arc to 50% 0% of 50% cw,
                    close
                );
            }

            /* Dag-overskrifter markerer hvor tidslinjen deles opp i dager -
               spinnet fortsetter gjennom dem (::before beholdes), men ingen
               prikk (::after fjernes), siden de ikke selv er en hendelse. */
            &.day-heading {
                padding-block-start: 1.2lh;

                &::after {
                    content: none;
                }

                h3 {
                    margin: 0;
                    font-size: var(--font-size-small);
                    font-weight: bold;
                }
            }

            /* Plassholder for en dag i turens periode uten noe planlagt
               ennå - ikke en faktisk hendelse, så den får ingen prikk på
               spinnet, i tråd med samme konvensjon som dag-overskrifter. */
            &.day-tom::after {
                content: none;
            }

            /* Reisetid mellom to steder er ikke selv et sted, men
               strekningen mellom dem - vises derfor som en stiplet linje på
               spinnet, uten prikk, slik at reisetid og stopp har et tydelig
               ulikt uttrykk. mask-image gjentar seg selv uansett høyde på
               listepunktet, så stiplingen blir riktig uansett hvor mye tekst
               reisetiden inneholder. */
            &.segment {
                &::before {
                    mask-image: repeating-linear-gradient(to bottom, black 0 4px, transparent 4px 8px);
                }

                &::after {
                    content: none;
                }
            }
        }
    }

    .segment {
        opacity: var(--opacity-muted);
        font-size: var(--font-size-small);
        padding-inline-start: 1.5ch;
        margin-block: 0.2lh 0.4lh;
    }

    .entry-icon {
        display: inline-flex;
        flex: none;

        svg {
            display: block;
        }
    }

    /* Fargekoding per type, for rask visuell gjenkjenning - ikonet farges,
       ikke selve teksten (som fortsatt følger currentColor/tema som ellers). */
    li[data-entry-type="stopp"] .entry-icon {
        color: var(--category-color-one);
    }

    li[data-entry-type^="fly"] .entry-icon {
        color: var(--category-color-two);
    }

    li[data-entry-type^="hotell"] .entry-icon {
        color: var(--category-color-three);
    }

    /* Fly avgang/ankomst deler samme ikon, men roteres i hver sin retning -
       samme konvensjon som avgangstavler på flyplasser bruker. */
    li[data-entry-type="fly-avgang"] .entry-icon svg {
        transform: rotate(-45deg);
    }

    li[data-entry-type="fly-ankomst"] .entry-icon svg {
        transform: rotate(135deg);
    }

    .entry-title {
        margin: 0;
        font-size: 1em;
        font-weight: bold;
        flex: 1 1 auto;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Sekundærinfo vises som en etikett/verdi-liste (én rad per fakta -
       adresse, tid, varighet, land, osv.) i stedet for én lang linje med
       "·"-atskilte biter, slik at hvert enkelt fakta er lett å skanne for
       seg. Samme grid-mønster som <lm-preview-image>/<lm-preview-document>
       sin metadata-liste, for et gjenkjennbart uttrykk på tvers av appen. */
    .entry-details {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.1lh 1ch;
        margin: 0.3lh 0 0;
        font-size: var(--font-size-small);

        dt {
            opacity: var(--opacity-muted);
        }

        dd {
            margin: 0;
        }
    }

    .stop-map {
        margin-block-start: 0.4lh;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.6ch;

        input {
            inline-size: auto;
        }
    }

    .tur-bilde {
        inline-size: 100%;
        max-block-size: 12em;
        object-fit: cover;
        border-radius: var(--radius-medium);
        margin-block-end: 0.6lh;
    }

    .stop-actions {
        display: inline-flex;
        gap: 0.4ch;
        flex: none;

        button {
            font-size: var(--font-size-small);
            padding: var(--space-2xs, 0.2em) var(--space-xs, 0.4em);
        }
    }

    .muted {
        opacity: var(--opacity-muted);
        font-size: var(--font-size-small);
    }

    .kvittering-element {
        position: relative;
        aspect-ratio: 1;

        :is(lm-preview-image, lm-preview-document) {
            inline-size: 100%;
            block-size: 100%;
        }

        button {
            position: absolute;
            top: var(--space-2xs, 0.2em);
            right: var(--space-2xs, 0.2em);
            font-size: var(--font-size-extra-small);
            padding: var(--space-2xs, 0.2em) var(--space-xs, 0.4em);
            background: var(--color-surface, canvas);
        }
    }
}