/* ==========================================================================
   Buckettrips — the departure list

   One departure, drawn the same in both places it appears: the checkout's
   picker and the tour page's schedule.

   These rules were the checkout's. The tour page had a second set of its own,
   written months apart, and the two had drifted into disagreeing about the
   date format, whether a weekday showed, whether the route repeated on every
   row, what counts as nearly full, whether a sold-out departure was drawn at
   all, whether the ordinary case said anything, and whether the coordinator
   appeared. The checkout's answers were the researched ones -- each carries a
   comment saying why, several citing what the field does -- so the checkout's
   component is the one that survived and this is where it lives now.

   Loaded by `booking/base_booking.html` and by `public/tour.html`'s own head
   block, before their sheets, so either can still override a rule it needs to.
   The markup that consumes it is `templates/macros/departures.html`.
   ========================================================================== */

/* ── Trip cards ──
   Three columns, the same tracks on every row so they line up down the list: when and where, who
   leads it, and the price with whether it runs. Each row is its own grid, so only fixed tracks align:
   two flexible halves and a price column of one width. The chosen card below is this row with the
   trip's photograph in front of it. */
.trip-option { display:block; overflow:hidden; cursor:pointer; }
.dep-pass {
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 176px;
    gap:0 18px; align-items:center; padding:12px 16px;
}
.dep-main { display:flex; flex-direction:column; min-width:0; }
.dep-when { font-size:.98rem; font-weight:700; letter-spacing:-.018em; line-height:1.3; }
.dep-where {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:2px;
    font-size:.76rem; color:var(--text-muted);
}
.dep-where .dot { opacity:.5; }
.dep-where .trip-group { margin-left:2px; }
/* The overlapped stack the header and the chosen card use, ringed in the card's own ground. */
.dep-flags { display:inline-flex; align-items:center; }
.dep-flags img { width:15px; height:15px; border-radius:50%; display:block; box-shadow:0 0 0 1.5px var(--bg-primary); }
.dep-flags img + img { margin-left:-5px; }

/* The coordinator: what they are above, the avatar and name under, left edges together. */
.dep-coord { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dep-coord small {
    font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-muted); line-height:1;
}
.dep-coord > span {
    display:flex; align-items:center; gap:7px; min-width:0;
    font-size:.84rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dep-coord > span.tba { font-weight:500; color:var(--text-muted); }
.dep-coord .bk-av { width:20px; height:20px; font-size:.58rem; line-height:1; }

.dep-buy { display:flex; flex-direction:column; align-items:flex-end; gap:3px; min-width:0; text-align:right; }
/* The struck price above rather than beside: inline it widened the money line on exactly the rows
   that also carry a badge. */
.dep-money .trip-was { display:block; font-size:.72rem; }
.dep-money { font-weight:800; font-size:1rem; letter-spacing:-.02em; white-space:nowrap; }
/* ── A live deal, on the dates that have it ──
   Solid rather than a tint, because it has to survive being scanned past: it is the one thing on
   the row that is not a fact about the trip but a deal that expires. */
.dep-sale {
    background:var(--sale-color); color:var(--sale-text);
    font-size:.63rem; font-weight:800; letter-spacing:.04em;
    padding:3px 8px; border-radius:20px; white-space:nowrap;
}
.dep-money small { font-weight:400; font-size:.68rem; color:var(--text-muted); }
.dep-buy .trip-tag { margin-top:0; }

/* A phone has no room for a middle column: the coordinator goes under where and when, on one line. */
@media (max-width:620px) {
    .dep-pass { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:12px 14px; }
    .dep-coord { grid-row:2; grid-column:1; flex-direction:row; align-items:center; gap:7px; }
    .dep-buy { grid-row:1 / span 2; grid-column:2; }
    .dep-money small { display:none; }
}

.trip-option:hover { border-color:var(--text-muted); }
.trip-option.selected { border-color:var(--accent-color); background:var(--accent-alpha); }
.trip-option input[type="radio"] { display:none; }
/* A note against the date, not a capsule beside it. The filled pill read as a
   status badge and competed with the availability tag, which is the one thing
   on the row that genuinely is one. */
.trip-group {
    font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-muted); margin-left:8px; white-space:nowrap;
}
/* The special edition is the one variant drawn as a badge, so it gets a fill.
   Everything else on the row is text. */
.trip-group.is-special {
    display:inline-flex; align-items:center; gap:4px;
    background:var(--warning-alpha); color:var(--warning-color);
    padding:3px 8px; border-radius:20px; letter-spacing:.04em;
}
.trip-group.is-special svg { width:11px; height:11px; fill:currentColor; flex:0 0 auto; }
.trip-group.is-private { color:var(--accent-color); }
/* No fill. .tour-trip-card on the tour page has none, and the gray one here
   swallowed the border so a departure read as a slab rather than as a card you
   could press. Same mistake as the traveler list: a filled box on a filled
   page has no edge. */
.trip-option {
    background:transparent; border:1.5px solid var(--border-color);
    border-radius:14px; padding:0; margin-bottom:8px;
    transition:border-color .18s ease, box-shadow .18s ease;
}
.trip-option.selected { background:var(--accent-alpha); }
.trip-option:hover { border-color:var(--accent-color); box-shadow:0 4px 24px var(--accent-alpha); }
.bk-view-bar {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.bk-view-hint { font-size:.78rem; color:var(--text-muted); font-style:italic; }
.bk-seg {
    display:inline-flex; position:relative;
    background:var(--bg-tertiary); border-radius:50px; padding:3px;
}
.bk-seg button {
    position:relative; z-index:1; border:none; background:transparent;
    color:var(--text-muted); font-family:inherit; font-size:.78rem; font-weight:600;
    padding:7px 18px; border-radius:50px; cursor:pointer; transition:color .18s ease;
}
.bk-seg button[aria-pressed="true"] { color:var(--white); }
.bk-seg-thumb {
    position:absolute; top:3px; bottom:3px; z-index:0; border-radius:50px;
    background:var(--accent-gradient);
    transition:left .28s cubic-bezier(.4,1.3,.5,1), width .28s cubic-bezier(.4,1.3,.5,1);
}
.bk-cal-pager {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:14px;
}
.bk-cal-pager:empty { display:none; }
.bk-cal-nav {
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    border:1.5px solid var(--border-color); background:transparent;
    color:var(--text-secondary); font-family:inherit; font-size:.9rem;
    cursor:pointer; transition:all .16s ease;
}
.bk-cal-nav:hover:not(:disabled) { border-color:var(--accent-color); color:var(--accent-color); }
.bk-cal-nav:disabled { opacity:.32; cursor:default; }
.bk-cd {
    position:relative; aspect-ratio:1/.94; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size:.82rem; color:var(--text-secondary); font-variant-numeric:tabular-nums;
}
.bk-cd.pad { opacity:.16; }
/* The span band: a departure is a week, not a point. */
.bk-cd.inspan::before {
    content:''; position:absolute; inset:14% -1px; z-index:-1;
    background:var(--accent-alpha);
}
.bk-cd.spanstart::before { border-radius:9px 0 0 9px; left:9%; }
.bk-cd.spanend::before { border-radius:0 9px 9px 0; right:9%; }
.bk-cd.start { cursor:pointer; }
.bk-cd.start b {
    display:grid; place-items:center; width:29px; height:29px; border-radius:50%;
    font-size:.82rem; font-weight:700; color:var(--white);
    background:var(--accent-gradient); transition:transform .16s ease;
}
.bk-cd.start:hover b, .bk-cd.start:focus-visible b { transform:scale(1.14); }
.bk-cd.start .bk-pt {
    font-family:var(--font-mono);
    font-size:.57rem; font-weight:600; color:var(--accent-color);
    margin-top:2px; letter-spacing:-.02em; white-space:nowrap;
}
.bk-cd.start.few b { background:linear-gradient(135deg,#f59e0b,#fb923c); }
.bk-cd.start.few .bk-pt { color:var(--warning-color); }
.bk-cd.start.sel b {
    box-shadow:0 0 0 3px var(--bg-secondary), 0 0 0 5px var(--accent-color);
}
.bk-cal-legend {
    display:flex; gap:16px; flex-wrap:wrap; margin-top:18px; padding-top:14px;
    border-top:1px solid var(--border-color); font-size:.74rem; color:var(--text-muted);
}
.bk-cal-legend i {
    width:11px; height:11px; border-radius:50%; display:inline-block;
    margin-right:6px; vertical-align:-1px; font-style:normal;
}
.bk-cal-legend i.go { background:var(--accent-color); }
.bk-cal-legend i.few { background:#f59e0b; }
.bk-cal-legend i.span { background:var(--accent-alpha); border-radius:3px; }
.trip-tag {
    display:inline-flex; align-items:center; gap:5px; margin-top:8px;
    font-size:.7rem; font-weight:700; letter-spacing:.02em;
}
.trip-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.trip-tag.go { color:var(--success-color); }
/* Present, not shouting. The ordinary case keeps a green dot so the row answers
   the question, but the words go muted and unbolded so six of them do not
   compete with the one that says "Only 3 left". */
.trip-tag.quiet { color:var(--text-muted); font-weight:500; }
.trip-tag.go.quiet::before { background:var(--success-color); }
.trip-tag.few { color:var(--warning-color); }
.trip-tag.out { color:var(--error-color); }
.trip-option.is-out { opacity:.55; cursor:default; }
.trip-option.is-out:hover { border-color:var(--border-color); box-shadow:none; }
/* A row with nowhere to go: nothing is on sale yet. The date and price stand. */
a.trip-option:not([href]) { cursor:default; }
a.trip-option:not([href]):hover { border-color:var(--border-color); box-shadow:none; }
.bk-cd.start.out { cursor:default; }
.bk-cd.start.out b {
    background:var(--bg-tertiary); color:var(--text-muted);
    text-decoration:line-through; box-shadow:none;
}
.bk-cd.start.out:hover b { transform:none; }
.bk-cd.start.out .bk-pt { color:var(--text-muted); }
.bk-cal-legend i.out { background:var(--bg-tertiary); box-shadow:0 0 0 1px var(--border-color); }
/* ── Who is leading this departure. ──
   Not one operator in thirteen names the coordinator on a departure row; only
   Solresor does, and it is column four of seven, ahead of price. We already
   assign one per departure and were spending it as the word "Tomas" between a
   route and a seat count. */
.bk-who { display:inline-flex; align-items:center; gap:9px; min-width:0; margin-top:9px; }
/* The role stays. Hiding it for density made the name ambiguous -- a name beside
   a date could be anyone, and "Travel coordinator" is the whole reason it earns
   the space. */
.trip-option .bk-who { margin-top:9px; }
.trip-option .bk-av { width:28px; height:28px; font-size:.68rem; }
.bk-av {
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    display:grid; place-items:center; font-size:.73rem; font-weight:700;
    color:var(--white); background:var(--accent-gradient); letter-spacing:.02em;
}
/* Their photograph where they have one, in the same circle. */
.bk-av { overflow:hidden; }
.bk-av img { width:100%; height:100%; object-fit:cover; display:block; }
/* Their name, a link to their page where they have one: the name, underlined on hover only. */
.dep-coord a, .bk-who-name a { color:inherit; text-decoration:none; }
.dep-coord a:hover, .bk-who-name a:hover { color:var(--accent-color); text-decoration:underline; }
.bk-av.tba {
    background:transparent; color:var(--text-muted);
    border:1.5px dashed var(--border-color);
}
.bk-who-name { font-size:.85rem; font-weight:600; line-height:1.2; }
.bk-who-role { font-size:.67rem; color:var(--text-muted); line-height:1.2; letter-spacing:.03em; }
.bk-who-name.tba { color:var(--text-muted); font-weight:500; }
/* ── The trip you have chosen ──
   The row it was chosen from, green, with the trip's photograph in front and Change trip under the
   price. Same columns as the list, so nothing moves but the color. A trip still waiting to confirm
   says so in a sentence across the bottom. */
.bk-chosen {
    border:1.5px solid var(--accent-color); border-radius:14px; background:var(--accent-alpha);
    display:grid; grid-template-columns:56px minmax(0,1.15fr) minmax(0,1fr) 176px;
    gap:0 18px; align-items:center; padding:12px 16px;
}
.bk-chosen:empty { display:none; }
/* Scoped to the route photo, not `.bk-chosen img`, which also caught the flag stack. */
.bk-chosen-shot { width:56px; height:56px; border-radius:11px; object-fit:cover; }
.bk-chosen-change {
    background:none; border:none; color:var(--accent-color); font-family:inherit;
    font-size:.78rem; font-weight:600; cursor:pointer; padding:0;
}
.bk-chosen-change:hover { text-decoration:underline; }
@media (max-width:620px) {
    .bk-chosen { grid-template-columns:48px minmax(0,1fr) auto; gap:8px 12px; padding:12px 14px; }
    .bk-chosen-shot { width:48px; height:48px; grid-row:1 / span 2; }
    .bk-chosen .dep-coord { grid-row:2; grid-column:2; flex-direction:row; align-items:center; gap:7px; }
    .bk-chosen .dep-buy { grid-row:1 / span 2; grid-column:3; }
}
.bk-cal-range { font-family:var(--font-mono);
                font-size:.74rem; font-weight:600; color:var(--text-muted);
                letter-spacing:.02em; }
/* ============================================================
   The departure calendar. Ported from app/static/mockups/departure-lab-2.html.

   Two ideas come back from v1's checkout, which had both and rendered them
   badly: the price is printed on the day (`onDayCreate` appended a red
   `.price-tag` to every bookable cell) and the whole trip is drawn as a span
   rather than a dot (`in-trip-range`, styled in a <style> block inside
   booking-stage-1.html). The span is the one thing a list physically cannot
   show, and the price tags are what stop a sparse month reading as empty.

   No flatpickr. v1 pulled the library plus jQuery for this; it is about ninety
   lines of vanilla against tokens we already have.
   ============================================================ */

/* The month box and the seven-column grid inside it. These are what the day
   cells need to be cells: without `.bk-cg` the container is a plain block, and
   every `.bk-cd` -- which is `display:flex` with an aspect ratio -- becomes a
   full-width box nearly as tall as the column, so a month renders as a heading,
   a run-together weekday row, and thousands of pixels of empty padding cells.

   They were left behind when this file was split out of booking.css, because
   the extractor matched selector prefixes and none of `.bk-cm`, `.bk-cg` or
   `.bk-dow` starts with `.bk-cal`. */
.bk-cm h4 {
    font-size:.83rem; font-weight:700; margin:0 0 10px;
    display:flex; align-items:center; gap:8px;
}
.bk-cm h4 span {
    font-family:var(--font-mono);
    font-size:.68rem; color:var(--text-muted); font-weight:500;
}
.bk-cg { display:grid; grid-template-columns:repeat(7,1fr); gap:2px 0; }
.bk-cg .bk-dow {
    font-family:var(--font-mono);
    font-size:.6rem; font-weight:600; color:var(--text-muted);
    text-align:center; padding-bottom:6px; letter-spacing:.06em;
}

/* The calendar's own grid. Moved with the rest of the calendar so a page
   that draws one does not need booking.css to make it two months wide. */
#bk-cal { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:720px) { #bk-cal { grid-template-columns:1fr 1fr; } }

/* ── The month split ──
   Thirteen rows is a list nobody reads to the end, and the month is the axis
   somebody is choosing on: "can I go in May" comes before "which May date".
   A heading and a loop, so it costs nothing and goes wherever the list goes. */
.trip-month + .trip-month { margin-top:22px; }
.trip-month-head {
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    padding:0 2px 7px; border-bottom:1px solid var(--border-color); margin-bottom:10px;
}
.trip-month-name { font-weight:800; font-size:.95rem; letter-spacing:-.015em; }
.trip-month-count { font-size:.72rem; color:var(--text-muted); }

/* The tour page's row is an anchor, not a label, so it needs the reset a label
   never did. Same box, same everything else. */
a.trip-option { display:flex; text-decoration:none; color:inherit; }

/* The struck price. Only ever a substantiated one: see `_reference`. */
.trip-was { font-size:.75rem; color:var(--text-muted); text-decoration:line-through; }


/* "From", in front of the cheapest departure. Small, muted and on the baseline
   of the number rather than above it, so the price stays the biggest thing in
   the card and the qualifier does not become a second line. Always drawn: the
   card's shape does not change with the data. */
.tour-sidebar-from {
    font-size:.78rem; font-weight:600; color:var(--text-muted);
    letter-spacing:0; margin-right:1px;
}

/* The count never wraps away from its month. */
.trip-month-count { white-space:nowrap; }

/* ── What the date you pressed actually is. ──
   The calendar used to commit on the first press, which collapsed the picker
   and took the calendar with it. It shows the departure now; choosing is a
   second, deliberate act. */
.bk-pick-empty {
    margin-top:20px; padding:24px; text-align:center; border-radius:16px;
    border:1.5px dashed var(--border-color); color:var(--text-muted); font-size:.86rem;
}
.bk-pick {
    margin-top:20px; padding:16px 18px; border-radius:16px;
    border:1.5px solid var(--accent-color); box-shadow:0 6px 30px var(--accent-alpha);
    display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width:640px) {
    .bk-pick { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; }
}
.bk-pick-when { font-size:1.02rem; font-weight:700; letter-spacing:-.018em; }
.bk-pick-sub { font-size:.79rem; color:var(--text-muted); margin:2px 0 0;
               display:flex; align-items:center; gap:6px; }
.bk-pick-buy { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
@media (min-width:640px) { .bk-pick-buy { align-items:flex-end; } }
.bk-pick-price { font-size:1.3rem; font-weight:800; letter-spacing:-.025em; }
.bk-pick-buy .trip-tag { margin-top:0; }

/* The choose button, which `drawPick` emits. Duplicated rather than moved: the
   checkout uses `.bk-btn` for its own controls all over the funnel, so this file
   carries only what the calendar itself writes. */
.bk-btn.bk-btn-sm {
    display:inline-block; padding:7px 16px; font-size:.8rem; font-weight:700;
    border:none; border-radius:8px; cursor:pointer;
    background:var(--brand-highlight); color:var(--brand-highlight-text);
}
.bk-btn.bk-btn-sm:hover { filter:brightness(1.08); }