/* Travel Expenses (public/travel-expenses.js). Uses the brand tokens in styles.css. */
/* Flags beside country names: Windows has no flag emoji, so a flags-only font is
   served from public/vendor (see its README). The unicode-range limits it to the
   regional indicator letters; every other character keeps the normal font. */
@font-face {
    font-family: 'Twemoji Country Flags';
    unicode-range: U+1F1E6-1F1FF;
    src: url('vendor/TwemojiCountryFlags.woff2') format('woff2');
    font-display: swap;
}
#travel-root, #travel-root select, #travel-root input, #travel-root button { font-family: 'Twemoji Country Flags', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.te-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.te-btn { background: #fff; color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: 8px 14px; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.te-btn:hover { border-color: var(--brand-muted); }
.te-btn.te-danger { color: #a3241e; }
.te-small { padding: 4px 10px; }
.te-toolbar .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.te-scopes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 14px; }
.te-rates-btn { margin-left: auto; }
.te-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.te-table th { text-align: left; color: var(--brand-muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--brand-border); white-space: nowrap; }
.te-table td { padding: 6px 8px; border-bottom: 1px solid var(--brand-border); vertical-align: middle; }
/* List: one card per trip; the left edge carries the status colour. */
.te-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.te-trip-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; background: #fff; border: 1px solid var(--brand-border); border-left: 4px solid #6b7280; border-radius: var(--radius-md); padding: 14px 14px 12px 16px; cursor: pointer; }
.te-trip-card:hover { border-color: #c9ced6; border-left-color: inherit; box-shadow: var(--shadow-sm); }
.te-card-submitted { border-left-color: #2563eb; }
.te-card-returned { border-left-color: #b45309; }
.te-card-approved { border-left-color: #15803d; }
.te-card-main { min-width: 0; }
.te-card-title { font-size: var(--fs-md); font-weight: 700; margin: 0; }
.te-card-link { all: unset; cursor: pointer; overflow-wrap: anywhere; }
.te-card-link:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; border-radius: 2px; }
.te-card-dates { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--brand-text); }
.te-card-purpose, .te-card-owner { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--brand-muted); overflow-wrap: anywhere; }
.te-card-owner { font-weight: 600; }
.te-card-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.te-card-amount { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.te-card-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--brand-border); font-size: var(--fs-sm); color: var(--brand-muted); }
.te-card-status span:last-child { overflow-wrap: anywhere; }

/* "⋯" menu (list cards and the trip page). */
.te-menu { position: relative; }
.te-menu > summary { list-style: none; }
.te-menu > summary::-webkit-details-marker { display: none; }
.te-menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 20px; line-height: 1; color: var(--brand-text); cursor: pointer; }
.te-menu-btn:hover, .te-menu[open] > .te-menu-btn { background: var(--brand-gray); border-color: var(--brand-border); }
.te-menu-btn:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 1px; }
.te-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; display: flex; flex-direction: column; padding: 4px; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.te-menu-item { all: unset; display: block; min-height: 40px; line-height: 40px; padding: 0 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--brand-text); cursor: pointer; white-space: nowrap; }
.te-menu-item:hover, .te-menu-item:focus-visible { background: var(--brand-gray); }
.te-menu-item:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.te-menu-item.te-danger { color: #a3241e; }
.te-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.te-table th.te-num { text-align: right; }
.te-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.te-status-draft { background: #f3f4f6; color: #374151; }
.te-status-submitted { background: #dbeafe; color: #1e40af; }
.te-status-returned { background: #fef3c7; color: #92400e; }
.te-status-approved { background: #dcfce7; color: #166534; }


.te-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.te-editor { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.te-card { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-xs); min-width: 0; scroll-margin-top: calc(var(--topbar-height) + 12px); }
.te-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.te-card-head h3 { font-size: var(--fs-md); }
.te-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.te-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.te-label { font-size: var(--fs-xs); color: var(--brand-muted); font-weight: 600; }
.te-req { color: #a3241e; }
.te-field input, .te-field select, .te-field textarea, .te-table input, .te-table select { font: inherit; font-size: var(--fs-sm); padding: 7px 9px; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: #fff; color: var(--brand-text); min-width: 0; width: 100%; }
.te-check input { width: auto; }
.te-field input:disabled, .te-field select:disabled, .te-field textarea:disabled, .te-table input:disabled, .te-table select:disabled { background: var(--brand-gray); color: var(--brand-text); }
.te-invalid { border-color: #a3241e !important; box-shadow: 0 0 0 2px rgba(163, 36, 30, 0.12); }
.te-field-error { color: #9b2119; font-size: var(--fs-xs); }
.te-pair { display: flex; gap: 6px; }
.te-check { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); grid-column: 1 / -1; }
.te-explain { font-size: var(--fs-xs); color: var(--brand-muted); margin-top: 2px; }
.te-hint, .te-muted { color: var(--brand-muted); font-size: var(--fs-sm); }
.te-hint { margin-bottom: 10px; }

/* Compact traveller card */
.te-traveller > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-size: var(--fs-sm); }
.te-traveller > summary::-webkit-details-marker { display: none; }
.te-traveller[open] > summary { margin-bottom: 12px; }
.te-traveller-line { font-weight: 600; }
/* 1.12.0: "Taken from My Profile" under the traveller line */
.te-details-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 13px; color: var(--brand-muted); }
.te-details-hint:empty { display: none; }
.te-details-icon { font-weight: 700; }
.te-link { color: #1e40af; font-weight: 600; }
.te-traveller .te-when-open, .te-traveller[open] .te-when-closed, .te-traveller[open] .te-traveller-line { display: none; }
.te-traveller[open] .te-when-open { display: inline; }
.te-traveller[open] > summary { justify-content: flex-end; }

.te-summary { position: sticky; top: calc(var(--topbar-height) + 12px); background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--topbar-height) + 12px); }
.te-summary h3 { font-size: var(--fs-md); margin-bottom: 8px; }
.te-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: var(--fs-sm); }
.te-sum-total { border-top: 1px solid var(--brand-border); margin-top: 6px; padding-top: 9px; font-weight: 700; }
.te-sum-payout { font-weight: 800; font-size: var(--fs-base); }
.te-warnings { margin: 10px 0 0 18px; color: #92400e; font-size: var(--fs-sm); }
.te-notices { margin: 10px 0 0 18px; color: var(--brand-muted); font-size: var(--fs-sm); }
.te-ready { margin-top: 12px; border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-sm); }
.te-ready ul { margin: 6px 0 0 18px; }
.te-ready-no { background: #fef3c7; color: #78350f; }
.te-ready-yes { background: #dcfce7; color: #166534; font-weight: 700; }
.te-sum-note { margin-top: 10px; font-size: var(--fs-xs); }
.te-banner { background: #fef3c7; color: #78350f; border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0; font-size: var(--fs-sm); }
.te-banner-error, .te-message-error { background: #fde8e7; color: #9b2119; }
.te-message { border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; font-size: var(--fs-sm); }
.te-message ul { margin: 6px 0 0 18px; }
.te-message:empty { display: none; }
.te-message-ok { background: #dcfce7; color: #166534; }
.te-return-box { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 8px 0; }
.te-return-box[hidden] { display: none; }

/* History */
.te-history { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.te-history-item { font-size: var(--fs-sm); }
.te-history-comment { margin: 4px 0 0 8px; color: var(--brand-text); font-style: italic; }

.te-empty { color: var(--brand-muted); padding: 20px 0; max-width: 640px; }
/* Empty "My reports": a big centred hero. No text on the photo; it fades into the page.
   The image is 1536 px wide, so the hero stops at 1080 px (sharp up to 1.4x DPR). */
.te-hero { max-width: 1080px; margin: 4px auto 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.te-hero-pic, .te-hero-pic img { display: block; width: 100%; }
.te-hero-pic img { height: auto; aspect-ratio: 1536 / 904; max-height: 48vh; object-fit: cover; object-position: center 72%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-composite: intersect; }
.te-hero-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--brand-text); margin: 8px 0; letter-spacing: -0.01em; }
.te-hero-text { color: var(--brand-muted); max-width: 560px; margin: 0 0 20px; line-height: 1.5; }
.te-hero-btn { font-size: var(--fs-md); padding: 14px 32px; }
@media (max-width: 600px) {
    .te-hero-title { font-size: var(--fs-xl); }
    .te-hero-pic img { max-height: none; }
}
.te-error { color: #9b2119; }
.te-mileage { margin: 12px 0; }
.te-inline { flex-direction: row; align-items: center; gap: 8px; }
.te-search { margin: 8px 0; max-width: 320px; }
.te-rates-table input { max-width: 120px; }
.te-rates-scroll { max-height: 60vh; overflow: auto; }
.te-rates-scroll thead th { position: sticky; top: 0; background: #fff; z-index: 1; }

/* New trip: one question per step. */
.te-start { display: flex; justify-content: center; padding: 24px 0 48px; }
/* 1.12.2: the hero picture stays behind the list (with trips) and the new-trip steps,
   faded so the white cards stay readable; it fades out downwards. Decorative only. */
.te-backdrop { position: relative; isolation: isolate; }
.te-backdrop::before { content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: min(560px, 70vh); pointer-events: none;
    background: center 72% / cover no-repeat;
    opacity: 0.22;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, #000 35%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, #000 35%, transparent);
    mask-composite: intersect; }
/* 1.13.1: the picture of the season (travelSeason sets data-season). */
.te-backdrop[data-season="spring"]::before { background-image: url('img/travel-hero-spring.jpg'); background-image: image-set(url('img/travel-hero-spring.webp') type('image/webp'), url('img/travel-hero-spring.jpg') type('image/jpeg')); }
.te-backdrop[data-season="summer"]::before { background-image: url('img/travel-hero-summer.jpg'); background-image: image-set(url('img/travel-hero-summer.webp') type('image/webp'), url('img/travel-hero-summer.jpg') type('image/jpeg')); }
.te-backdrop[data-season="autumn"]::before { background-image: url('img/travel-hero-autumn.jpg'); background-image: image-set(url('img/travel-hero-autumn.webp') type('image/webp'), url('img/travel-hero-autumn.jpg') type('image/jpeg')); }
.te-backdrop[data-season="winter"]::before { background-image: url('img/travel-hero-winter.jpg'); background-image: image-set(url('img/travel-hero-winter.webp') type('image/webp'), url('img/travel-hero-winter.jpg') type('image/jpeg')); }
/* The step card sits in the middle of the screen, like the hero it is opened from. */
.te-start.te-backdrop { align-items: center; min-height: calc(100vh - var(--topbar-height) - 72px); }
/* Phones: a shorter band, so the picture is not cropped to empty sky. */
@media (max-width: 600px) { .te-backdrop::before { height: 300px; } }
.te-start-card { width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.te-start-count { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-muted); }
.te-start-title { margin: 4px 0 16px; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; outline: none; }
.te-start-body { display: flex; flex-direction: column; gap: 14px; }
.te-start-body .te-field input { padding: 10px 12px; font-size: var(--fs-base); }
.te-start-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--brand-border); }
.te-start-nav { display: flex; gap: 8px; }
.te-start-nav .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Trip page: the ticket. A dashed perforation with two notches separates the stub. */
.te-topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 12px; }
.te-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.te-ticket-main { padding: 22px 24px; min-width: 0; }
.te-ticket-dest { margin: 0; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.te-ticket-dates { margin: 6px 0 0; font-size: var(--fs-md); font-weight: 600; }
.te-ticket-purpose, .te-ticket-owner { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--brand-muted); overflow-wrap: anywhere; }
.te-ticket-owner { font-weight: 600; }
.te-ticket-stub { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; min-width: 230px; padding: 22px 24px 22px 30px; border-left: 2px dashed var(--brand-border); }
.te-ticket-stub::before, .te-ticket-stub::after { content: ''; position: absolute; left: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-gray); border: 1px solid var(--brand-border); }
.te-ticket-stub::before { top: -10px; }
.te-ticket-stub::after { bottom: -10px; }
.te-ticket-label { font-size: var(--fs-sm); font-weight: 600; color: var(--brand-muted); }
.te-ticket-amount { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.te-track { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 10px 0 0; padding: 0; }
.te-track li { padding: 3px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: #eef0f3; color: #4b5563; }
.te-track li.te-track-done { background: #dcfce7; color: #166534; }
.te-track li.te-track-done::before { content: '✓ '; }
.te-track li.te-track-current { background: var(--brand-black); color: #fff; }

/* Traveller and trip details: one line each until opened. */
.te-details { padding: 0; }
.te-details > details { padding: 14px 16px; }
.te-details > details + details { border-top: 1px solid var(--brand-border); }
.te-tripdetails > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; font-size: var(--fs-sm); }
.te-tripdetails > summary::-webkit-details-marker { display: none; }
.te-tripdetails[open] > summary { margin-bottom: 12px; justify-content: flex-end; }
.te-tripdetails .te-when-open, .te-tripdetails[open] .te-when-closed, .te-tripdetails[open] .te-traveller-line { display: none; }
.te-tripdetails[open] .te-when-open { display: inline; }
.te-trip-line { display: flex; flex-wrap: wrap; gap: 2px 16px; }

/* Days: one row per day; the meal chips are styled checkboxes. */
.te-timeline { display: flex; flex-direction: column; }
.te-day { display: grid; grid-template-columns: 104px minmax(140px, 200px) minmax(0, 1fr) auto; grid-template-areas: "when country chips amount" "when explain explain explain"; gap: 4px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--brand-border); }
.te-day:first-child { border-top: 0; padding-top: 2px; }
.te-day-when { grid-area: when; align-self: start; display: flex; flex-direction: column; white-space: nowrap; }
.te-day-country { grid-area: country; }
.te-day-when strong { font-size: var(--fs-base); }
.te-day-when span { font-size: var(--fs-xs); color: var(--brand-muted); }
.te-day-country select { width: 100%; font: inherit; font-size: var(--fs-sm); padding: 7px 9px; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); background: #fff; color: var(--brand-text); }
.te-day-country select:disabled { background: var(--brand-gray); }
.te-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; }
.te-chip { position: relative; display: inline-flex; }
.te-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.te-chip > span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--brand-border); border-radius: 999px; background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-text); cursor: pointer; user-select: none; }
.te-chip > span:hover { border-color: var(--brand-muted); }
.te-chip input:checked + span { background: var(--brand-black); border-color: var(--brand-black); color: #fff; }
.te-chip .te-emoji { margin-right: 6px; }
.te-chip input:checked + span .te-emoji { display: none; }
.te-chip input:checked + span::before { content: '✓'; margin-right: 6px; }
.te-chip input:focus-visible + span { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.te-chip input:disabled + span { cursor: default; }
/* amount and explanation become grid items of the day row */
.te-day-amount { display: contents; }
.te-day-amount .te-num { grid-area: amount; font-size: var(--fs-base); font-weight: 700; }
.te-day-amount .te-explain { grid-area: explain; margin: 0; text-align: right; }

/* Costs: one line each, opened to edit; tiles to add more. */
.te-cost-group + .te-cost-group { margin-top: 14px; }
.te-cost-group-title { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--brand-muted); }
.te-cost { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-md); }
.te-cost + .te-cost { margin-top: 6px; }
.te-cost-sum { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; cursor: pointer; list-style: none; }
.te-cost-sum::-webkit-details-marker { display: none; }
.te-cost-sum::after { content: ''; flex: none; width: 7px; height: 7px; margin: 0 2px 3px 2px; border-right: 2px solid var(--brand-muted); border-bottom: 2px solid var(--brand-muted); transform: rotate(45deg); transition: transform var(--transition-fast); }
.te-cost[open] > .te-cost-sum::after { transform: rotate(225deg); margin-bottom: -3px; }
.te-cost-sum:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; border-radius: var(--radius-md); }
.te-cost-icon { flex: none; width: 28px; font-size: 1.2rem; line-height: 1; text-align: center; }
.te-cost-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.te-cost-title { font-weight: 600; overflow-wrap: anywhere; }
.te-cost-meta { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: var(--fs-xs); color: var(--brand-muted); }
.te-cost-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.te-cost-body { padding: 0 14px 14px; border-top: 1px solid var(--brand-border); }
.te-cost-body .te-grid { margin-top: 12px; }
.te-cost-body .te-check { margin-top: 12px; }
.te-cost-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Receipts of a cost line (1.7.0). */
.te-receipts { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--brand-border); }
.te-receipt-list { list-style: none; margin: 6px 0 0; padding: 0; }
.te-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; padding: 4px 0; font-size: var(--fs-sm); }
.te-receipt + .te-receipt { border-top: 1px solid var(--brand-border); }
.te-receipt-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.te-receipt-actions { display: flex; gap: 6px; margin-left: auto; }
.te-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.te-attach .te-hint { margin: 0; }
.te-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.te-advance .te-field { max-width: 280px; }
.te-picker { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--brand-border); }
.te-picker-title { margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 700; }
.te-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.te-tile { min-height: 48px; padding: 8px 12px; border: 1px solid var(--brand-border); border-radius: var(--radius-md); background: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-text); text-align: left; cursor: pointer; }
.te-tile { display: flex; align-items: center; gap: 8px; }
.te-tile-icon { font-size: 1.15rem; line-height: 1; }
.te-tile:hover { border-color: var(--brand-muted); }
.te-tile:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

/* Action bar: stays at the bottom of the screen while the page scrolls. */
.te-actionbar { position: sticky; bottom: 0; z-index: 15; margin-top: 18px; padding: 10px 16px; background: #fff; border: 1px solid var(--brand-border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -6px 20px rgba(17, 19, 24, 0.07); }
.te-actionbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.te-actionbar-total { display: flex; flex-direction: column; }
.te-actionbar-label { font-size: var(--fs-xs); font-weight: 600; color: var(--brand-muted); }
.te-actionbar-total strong { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.te-actionbar-state { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.te-actionbar-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.te-actionbar .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.te-actionbar .te-return-box { margin: 0 0 10px; }
.te-link-btn { all: unset; color: #92400e; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.te-link-btn:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.te-ready-ok { color: #166534; font-weight: 700; }
.te-bar-status { color: var(--brand-muted); }

@media (max-width: 900px) {
    .te-layout { grid-template-columns: minmax(0, 1fr); }
    .te-summary { position: static; }
    .te-day { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "when country" "chips chips" "explain amount"; gap: 8px 12px; }
    .te-day-amount .te-explain { text-align: left; }
}
@media (max-width: 640px) {
    .te-ticket { grid-template-columns: minmax(0, 1fr); }
    .te-ticket-main { padding: 18px; }
    .te-ticket-dest { font-size: var(--fs-xl); }
    .te-ticket-stub { align-items: flex-start; min-width: 0; padding: 16px 18px; border-left: 0; border-top: 2px dashed var(--brand-border); }
    .te-ticket-stub::before, .te-ticket-stub::after { display: none; }
    .te-track { justify-content: flex-start; }
    .te-ticket-amount { font-size: 1.875rem; }
    .te-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .te-actionbar { padding: 10px 12px; }
    .te-actionbar-state { order: 3; flex-basis: 100%; }
    .te-actionbar-buttons { margin-left: auto; }
    .te-start-card { padding: 18px; }
}
.te-rates-sub { margin: 18px 0 8px; font-size: var(--fs-md); font-weight: 700; }
.te-rules .te-field input { max-width: 140px; }