/*
 * The Vehicle Year sheet (task 199, the owner's reference;
 * public/js/site/vehicle-year-sheet.js). Website sign-up
 * (partials/driver-vehicle-fields) and the driver portal
 * (Portal/Driver/VehicleYearSheet.vue, which imports this file).
 *
 * A centred dialog from 640px up, a bottom sheet with a drag handle below.
 * Each row: a rounded card (min 56px, 1px border, 8px apart) with a circle
 * and the year; the picked row is tinted with a brand border and a filled
 * brand circle carrying a tick in the colour that reads on the brand
 * (--gt-accent-ink: white on a red brand); the others a grey ring. Footer:
 * Cancel (outlined) and Done (filled), equal widths, 52px, radius 12.
 * Scoped under .gt-vy*, resetting what the sign-up pages set on bare
 * button / span / ul / h2. Colours from the theme tokens, with fallbacks.
 */
.gt-vy-sheet, .gt-vy-control {
    --gt-vy-brand: var(--site-color, #C23F38);
    --gt-vy-on-brand: var(--gt-accent-ink, #FFFFFF);
    --gt-vy-tint: var(--gt-accent-soft, #FBEDEC);
    --gt-vy-line: var(--gt-line, #E3DEDD);
    --gt-vy-ring: #B9B4B3;
    --gt-vy-ink: var(--gt-ink, #1A1413);
    --gt-vy-soft: var(--gt-muted, #6B6462);
    /* The field's hint: the colour the form's own placeholders use. */
    --gt-vy-hint: var(--gt-su-faint, var(--gt-faint, #8A8F98));
    --gt-vy-fill: var(--gt-bg-2, #F3F2F1);
    --gt-vy-surface: var(--gt-bg, #FFFFFF);
}

/* The field: the form's own input look, a value (or the hint) and a chevron. */
.gt-vy-native {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important;
}
button.gt-vy-control {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    text-align: start; cursor: pointer; text-transform: none; letter-spacing: 0; float: none;
}
button.gt-vy-control .gt-vy-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gt-vy-ink); font-weight: 400; }
button.gt-vy-control .gt-vy-value.is-empty { color: var(--gt-vy-hint); }
button.gt-vy-control .gt-vy-chev { flex: 0 0 auto; color: var(--gt-vy-soft); }
button.gt-vy-control[aria-invalid="true"] { border-color: var(--gt-danger, #B91C1C) !important; }
button.gt-vy-control:focus-visible { outline: 2px solid var(--gt-vy-brand); outline-offset: 2px; }

/* The sheet. */
html.gt-vy-locked { overflow: hidden; }
.gt-vy-sheet {
    width: min(440px, calc(100vw - 32px)); max-width: none; max-height: min(640px, calc(var(--gt-vy-vh, 100vh) - 48px));
    margin: auto; padding: 0; border: 0; border-radius: 16px; overflow: hidden;
    background: var(--gt-vy-surface); color: var(--gt-vy-ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    font-size: 15px; line-height: 1.4; text-align: start;
}
.gt-vy-sheet:not([open]) { display: none; }
.gt-vy-sheet[open] { display: flex; flex-direction: column; }
.gt-vy-sheet::backdrop { background: rgba(17, 12, 11, .48); }
.gt-vy-sheet *, .gt-vy-sheet *::before, .gt-vy-sheet *::after { box-sizing: border-box; }
.gt-vy-sheet [hidden] { display: none !important; }
.gt-vy-sheet .gt-vy-grab { display: none; }
.gt-vy-sheet .gt-vy-head { flex: 0 0 auto; padding: 20px 20px 12px; }
.gt-vy-sheet .gt-vy-title {
    margin: 0 0 4px; padding: 0; border: 0; float: none;
    font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--gt-vy-ink); text-align: start; text-transform: none; letter-spacing: 0;
}
.gt-vy-sheet .gt-vy-sub { margin: 0; font-size: 14px; line-height: 1.4; color: var(--gt-vy-soft); }

.gt-vy-sheet .gt-vy-searchbox { position: relative; display: flex; align-items: center; margin: 12px 0 0; }
.gt-vy-sheet .gt-vy-searchicon { position: absolute; inset-inline-start: 14px; display: inline-flex; color: var(--gt-vy-soft); pointer-events: none; }
.gt-vy-sheet input.gt-vy-search {
    width: 100%; height: 48px; margin: 0; padding: 0 48px 0 44px; border: 1px solid transparent; border-radius: 12px;
    background: var(--gt-vy-fill); color: var(--gt-vy-ink); font: inherit; font-size: 16px; box-shadow: none; outline: none;
}
.gt-vy-sheet input.gt-vy-search::placeholder { color: var(--gt-vy-soft); opacity: 1; }
.gt-vy-sheet input.gt-vy-search:focus-visible { border-color: var(--gt-vy-brand); }
.gt-vy-sheet button.gt-vy-clear {
    position: absolute; inset-inline-end: 4px; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--gt-vy-soft);
    cursor: pointer; box-shadow: none; float: none;
}
.gt-vy-sheet button.gt-vy-clear:hover { background: rgba(0, 0, 0, .06); color: var(--gt-vy-ink); }

.gt-vy-sheet .gt-vy-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 4px 20px 16px; list-style: none;
}
.gt-vy-sheet .gt-vy-list > li { margin: 0; padding: 0; float: none; list-style: none; }
.gt-vy-sheet button.gt-vy-row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0; padding: 0 16px;
    background: var(--gt-vy-surface); border: 1px solid var(--gt-vy-line); border-radius: 12px; box-shadow: none;
    color: var(--gt-vy-ink); font: inherit; font-size: 16px; font-weight: 500; text-align: start; cursor: pointer;
    float: none; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .gt-vy-sheet button.gt-vy-row:hover { border-color: var(--gt-vy-ring); } }
.gt-vy-sheet button.gt-vy-row:focus-visible { outline: 2px solid var(--gt-vy-brand); outline-offset: 2px; }
.gt-vy-sheet button.gt-vy-row.is-on { background: var(--gt-vy-tint); border-color: var(--gt-vy-brand); }
.gt-vy-sheet .gt-vy-dot {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 24px; height: 24px; border: 2px solid var(--gt-vy-ring); border-radius: 999px; background: transparent; color: transparent;
}
.gt-vy-sheet .is-on .gt-vy-dot { border-color: var(--gt-vy-brand); background: var(--gt-vy-brand); color: var(--gt-vy-on-brand); }
.gt-vy-sheet .gt-vy-empty { flex: 1 1 auto; margin: 0; padding: 32px 20px; color: var(--gt-vy-soft); text-align: center; font-size: 15px; }

.gt-vy-sheet .gt-vy-foot {
    flex: 0 0 auto; display: flex; gap: 12px; padding: 12px 20px 16px; border-top: 1px solid var(--gt-vy-line); background: var(--gt-vy-surface);
}
.gt-vy-sheet button.gt-vy-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; height: 52px; margin: 0; padding: 0 16px;
    border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: none; float: none; width: auto;
    text-transform: none; letter-spacing: 0;
}
.gt-vy-sheet button.gt-vy-cancel { background: var(--gt-vy-surface); border: 1px solid var(--gt-vy-brand); color: var(--gt-vy-brand); }
.gt-vy-sheet button.gt-vy-done { background: var(--gt-vy-brand); border: 1px solid var(--gt-vy-brand); color: var(--gt-vy-on-brand); }
.gt-vy-sheet button.gt-vy-done:disabled { opacity: .45; cursor: not-allowed; }
.gt-vy-sheet button.gt-vy-btn:focus-visible { outline: 2px solid var(--gt-vy-brand); outline-offset: 2px; }

/* A phone: a sheet from the bottom, rounded top corners, a handle, the safe
   area under the footer, and above the on-screen keyboard (--gt-vy-kb, the
   keyboard's height from visualViewport). */
@media (max-width: 639.98px) {
    .gt-vy-sheet {
        width: 100vw; max-height: calc(var(--gt-vy-vh, 100vh) - 24px);
        margin: auto 0 var(--gt-vy-kb, 0px); inset: auto 0 0; border-radius: 20px 20px 0 0;
    }
    .gt-vy-sheet .gt-vy-grab { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: var(--gt-vy-ring); flex: 0 0 auto; }
    .gt-vy-sheet .gt-vy-head { padding: 12px 16px 8px; }
    .gt-vy-sheet .gt-vy-list { padding: 4px 16px 12px; }
    .gt-vy-sheet .gt-vy-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: no-preference) {
    .gt-vy-sheet[open] { animation: gt-vy-in .18s ease-out; }
    @keyframes gt-vy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* The /provider/login REGISTER step's `.login-frm .col-md-6 span` (0,2,1)
   pins every span absolutely, black; an id in :is() outranks it, so the
   sheet's own spans stay in flow with their own colours. */
:is(#gt-vy-x, .gt-vy-control) span, :is(#gt-vy-x, .gt-vy-sheet) span { position: static; top: auto; left: auto; right: auto; float: none; }
:is(#gt-vy-x, .gt-vy-control) span.gt-vy-value { color: var(--gt-vy-ink); }
:is(#gt-vy-x, .gt-vy-control) span.gt-vy-value.is-empty { color: var(--gt-vy-hint); }
:is(#gt-vy-x, .gt-vy-sheet) span.gt-vy-searchicon { position: absolute; inset-inline-start: 14px; color: var(--gt-vy-soft); }
:is(#gt-vy-x, .gt-vy-sheet) span.gt-vy-dot { color: transparent; }
:is(#gt-vy-x, .gt-vy-sheet) .is-on span.gt-vy-dot { color: var(--gt-vy-on-brand); }
:is(#gt-vy-x, .gt-vy-sheet) span.gt-vy-year { color: inherit; }
:is(#gt-vy-x, .gt-vy-sheet) span.gt-vy-grab { display: none; }
@media (max-width: 639.98px) { :is(#gt-vy-x, .gt-vy-sheet) span.gt-vy-grab { display: block; } }