/* ===========================================================================
   Use case 3 — ride hailing specifics.

   Only what is unique to the ride app: the map, the pickup/destination card,
   the address suggestion drop-down, the schedule row and the time picker wheel.
   Everything else (coordinate system, Sova screen, app header, agent pill,
   cursor, playback controls, the sheet shell and the action bar) lives in
   kit.css. Accent colour comes from --uc-accent on the card.

   Vertical budget on the 300x650 design grid:
       header       0 .. 92    (kit)
       map         92 .. 236
       agent pill 196 .. 233   (floats over the map, just above the card)
       card       236 .. 382   (pickup / destination / schedule)
       drop-down  326 .. 388   (over the schedule row while typing)
       action bar 392 .. 432   (kit)
       sheet      200 .. 440   (kit shell, slides up over everything)
   Nothing meaningful below y=450 — the playback pill floats there.

   The map is drawn in its own 300x144 SVG user space, which happens to share
   the design grid's horizontal units: a map x of 212 is a design x of 212, and
   a map y of 32 is a design y of 92+32. That is why the pin animation in the
   storyboard uses bare numbers where everything else multiplies by `u`.
   =========================================================================== */

.uc-illo[data-uc-illo="ride"] {
    /* the picker needs more room than the food sheet, so it starts higher */
    --uc-sheet-top: 200;
}

/* The pill floats over the map, in the strip between the pickup marker and the
   card. Anything higher sits on the route and hides the destination pin. */
.uc-illo[data-uc-illo="ride"] .uc-agent-pill { inset-block-start: calc(196 * var(--u)); }

/* --- map ------------------------------------------------------------------ */

/* Runs from under the header down to the card's top edge, so the SVG's own
   user space is exactly the band the map is allowed to occupy. */
.uc3-map {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(92 * var(--u));
    height: calc(144 * var(--u));
    background: #eaeff6;
}

.uc3-map svg { display: block; width: 100%; height: 100%; }

/* the route is drawn on with stroke-dashoffset; the length is measured at
   build time because it depends on nothing but the path */
.uc3-route {
    fill: none;
    stroke: var(--uc-accent, #2563eb);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.uc3-origin-ring { fill: #fff; }
.uc3-origin-dot { fill: var(--uc-accent, #2563eb); }
.uc3-pin { color: var(--uc-accent, #2563eb); }

/* --- pickup / destination card ------------------------------------------- */

.uc3-card {
    position: absolute;
    inset-inline: calc(12 * var(--u));
    inset-block-start: calc(236 * var(--u));
    z-index: 2;
    background: #fff;
    border-radius: calc(18 * var(--u));
    box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(15, 23, 42, .13);
    padding-block: calc(10 * var(--u)) calc(8 * var(--u));
}

.uc3-fields { position: relative; }

/* dotted leader between the two markers, in the gutter they share */
.uc3-connect {
    position: absolute;
    inset-block-start: calc(26 * var(--u));
    inset-inline-start: calc(18.2 * var(--u));
    width: calc(1.6 * var(--u));
    height: calc(28 * var(--u));
    background: repeating-linear-gradient(#cbd5e1 0 calc(3 * var(--u)),
        transparent calc(3 * var(--u)) calc(6 * var(--u)));
}

.uc3-row {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--u));
    height: calc(40 * var(--u));
    padding-inline: calc(14 * var(--u));
    position: relative;
}

/* highlight used by the tap and by the scan sweep */
.uc3-hl {
    position: absolute;
    inset: 0;
    background: var(--uc-accent, #2563eb);
    opacity: 0;
    pointer-events: none;
}

.uc3-marker {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    flex: none;
}

.uc3-marker--pick {
    border-radius: 50%;
    background: #fff;
    border: calc(3 * var(--u)) solid var(--uc-accent, #2563eb);
}

.uc3-marker--dest {
    border-radius: calc(2.5 * var(--u));
    background: var(--uc-accent, #2563eb);
}

/* Direct child of the row, so the pickup label fills the line. Inside
   .uc3-input it is a grandchild and stays its natural width, which keeps the
   caret hugging the last typed character instead of drifting to the far edge. */
.uc3-row > .uc3-text { flex: 1; }

.uc3-text {
    min-width: 0;
    font-size: calc(13 * var(--u));
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uc3-text.is-hint { color: #94a3b8; font-weight: 500; }

.uc3-input {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: calc(3 * var(--u));
}

.uc3-caret {
    width: calc(1.8 * var(--u));
    height: calc(16 * var(--u));
    border-radius: calc(1 * var(--u));
    background: var(--uc-accent, #2563eb);
    flex: none;
    opacity: 0;
}

/* focus ring on the field Sova is typing into */
.uc3-row.is-focus::after {
    content: "";
    position: absolute;
    inset-block: calc(2 * var(--u));
    inset-inline: calc(8 * var(--u));
    border-radius: calc(11 * var(--u));
    border: calc(1.5 * var(--u)) solid var(--uc-accent, #2563eb);
    pointer-events: none;
}

/* --- schedule row --------------------------------------------------------- */

.uc3-sched {
    margin-block-start: calc(8 * var(--u));
    border-block-start: 1px solid #f1f2f4;
}

.uc3-sched-icon,
.uc3-chev {
    width: calc(15 * var(--u));
    height: calc(15 * var(--u));
    flex: none;
}

.uc3-sched-icon { color: #94a3b8; }
.uc3-chev { color: #cbd5e1; }

/* the shared back chevron, turned around to point the way the row leads */
.uc3-chev { transform: scaleX(-1); }
[dir="rtl"] .uc3-chev { transform: none; }

.uc3-sched-text {
    flex: 1;
    min-width: 0;
    font-size: calc(13 * var(--u));
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
}

/* the scheduled time is the payoff of this illustration — it only appears once
   Sova has actually set it in the picker */
.uc3-when { display: none; }
.uc3-sched.is-set .uc3-when { display: flex; align-items: center; }
.uc3-sched.is-set .uc3-now { display: none; }
.uc3-sched.is-set .uc3-sched-text,
.uc3-sched.is-set .uc3-sched-icon { color: var(--uc-accent, #2563eb); }

/* separator drawn in CSS: day and time stay two independent strings, so no
   locale has to translate a glued-together phrase */
.uc3-when > span + span::before {
    content: "\00B7";
    margin-inline: calc(5 * var(--u));
}

/* --- address suggestions -------------------------------------------------- */

.uc3-drop {
    position: absolute;
    inset-inline: calc(12 * var(--u));
    inset-block-start: calc(326 * var(--u));
    z-index: 4;
    background: #fff;
    border-radius: calc(14 * var(--u));
    box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(15, 23, 42, .16);
    padding-block: calc(3 * var(--u));
    /* hidden in the poster state; the animator drives it with autoAlpha + y */
    opacity: 0;
    visibility: hidden;
}

.uc3-sugg {
    display: flex;
    align-items: center;
    gap: calc(11 * var(--u));
    height: calc(28 * var(--u));
    padding-inline: calc(14 * var(--u));
}

.uc3-sugg svg {
    width: calc(14 * var(--u));
    height: calc(14 * var(--u));
    flex: none;
    color: var(--uc-accent, #2563eb);
}

/* the second suggestion is a placeholder bar: it exists to make the list read
   as a list, and being text-free it needs no translation */
.uc3-sugg--stub svg { color: #cbd5e1; }

.uc3-sugg-text {
    min-width: 0;
    font-size: calc(12.5 * var(--u));
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- time picker ---------------------------------------------------------- */

.uc3-days {
    display: flex;
    gap: calc(12 * var(--u));
    height: calc(36 * var(--u));
    flex: none;
}

.uc3-day {
    flex: 1;                       /* halves the row, so the tap target sits at
                                      the same x in every locale */
    min-width: 0;
    border-radius: calc(12 * var(--u));
    border: 1px solid #e5e7eb;
    font-size: calc(12.5 * var(--u));
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
}

.uc3-day.is-on {
    border-color: var(--uc-accent, #2563eb);
    color: var(--uc-accent, #2563eb);
    background: #f5f8ff;
}

.uc3-wheel {
    position: relative;
    flex: none;
    height: calc(80 * var(--u));
    margin-block-start: calc(10 * var(--u));
    overflow: hidden;
    /* fade the rows leaving the window, so the strip reads as a wheel rather
       than a list that got cut off */
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}

/* selection band, sitting behind the strip */
.uc3-wheel-band {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(25 * var(--u));
    height: calc(30 * var(--u));
    border-radius: calc(10 * var(--u));
    background: var(--uc-accent, #2563eb);
    opacity: .09;
}

/* The strip is offset by exactly one band, so item N lands in the band at
   y = -30N design units. Keep the padding and the item height in step. */
.uc3-wheel-strip {
    display: block;
    position: relative;
    padding-block-start: calc(25 * var(--u));
}

.uc3-wheel-item {
    height: calc(30 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(15 * var(--u));
    font-weight: 700;
    color: var(--uc-accent, #2563eb);
}

/* the neighbouring times are bars: legible as a wheel, nothing to translate */
.uc3-wheel-item .uc-bar { width: calc(52 * var(--u)); }
.uc3-wheel-item:nth-child(odd) .uc-bar { width: calc(64 * var(--u)); }