/* ContentVelo / ChatMai — the pickers drawn by cv-inputs.js, and the native controls it
 * does not replace (number, range, colour trigger, date trigger).
 *
 * Master: src/ContentVelo/brand/cv-inputs.css. Copied to every app by
 * `python tools/ui-rebuild/sync-brand.py`. Do not edit the copies.
 *
 * Token-agnostic on purpose: it is shared with ChatMai, which has its own palette. Everything
 * here reads `--cvi-*`, and each product maps those once — ContentVelo in cv-brand.css,
 * ChatMai in its app.css. A `--cvi-*` that no product maps is a bug, not a default.
 *
 * Flat: a hairline border and a small, neutral shadow for lift. No blur, no glow.
 */

/* ── The popover ───────────────────────────────────────────────────────────────────────── */

.cvi-pop {
    position: fixed;
    z-index: var(--cvi-z);
    box-sizing: border-box;
    min-width: 12rem;
    max-width: calc(100vw - 16px);
    padding: 0.375rem;
    background: var(--cvi-surface);
    color: var(--cvi-text);
    border: 1px solid var(--cvi-border);
    border-radius: var(--cvi-radius);
    box-shadow: var(--cvi-shadow);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top center;
    transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.cvi-pop[data-side="top"] {
    transform-origin: bottom center;
    transform: translateY(4px) scale(0.98);
}

.cvi-pop--in,
.cvi-pop--in[data-side="top"] {
    opacity: 1;
    transform: none;
}

.cvi-pop *,
.cvi-pop *::before,
.cvi-pop *::after {
    box-sizing: border-box;
}

/* On a phone the panel is a sheet from the bottom edge: a thumb reaches it, and a floating
   panel under a field near the keyboard has nowhere to go. */
.cvi-pop--sheet {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-radius: var(--cvi-radius) var(--cvi-radius) 0 0;
    border-width: 1px 0 0;
    transform: translateY(24px);
    transition: opacity 160ms ease-out, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cvi-pop--sheet::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 0.25rem;
    margin: 0.125rem auto 0.625rem;
    border-radius: 999px;
    background: var(--cvi-border-strong);
}

.cvi-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--cvi-z);
    background: var(--cvi-overlay);
}

@media (prefers-reduced-motion: reduce) {
    .cvi-pop,
    .cvi-pop--sheet {
        transition: none;
    }
}

/* ── Listbox ───────────────────────────────────────────────────────────────────────────── */

.cvi-list {
    max-height: min(20rem, 50vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    outline: none;
}

.cvi-pop--sheet .cvi-list {
    max-height: 60vh;
}

.cvi-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--cvi-radius-sm);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cvi-pop--sheet .cvi-option {
    min-height: 2.875rem;
}

.cvi-option__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cvi-option__check {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--cvi-accent);
    visibility: hidden;
}

.cvi-option__check svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cvi-option--active {
    background: var(--cvi-hover);
}

.cvi-option[aria-selected="true"] {
    color: var(--cvi-accent-text);
    font-weight: 600;
}

.cvi-option[aria-selected="true"] .cvi-option__check {
    visibility: visible;
}

.cvi-option[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.cvi-option--blank .cvi-option__text::before {
    content: "—";
    color: var(--cvi-muted);
}

.cvi-group {
    padding: 0.625rem 0.625rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cvi-muted);
}

.cvi-empty {
    padding: 0.75rem 0.625rem;
    color: var(--cvi-muted);
    font-size: 0.875rem;
}

.cvi-search {
    position: relative;
    margin-bottom: 0.375rem;
}

.cvi-search svg {
    position: absolute;
    inset-inline-start: 0.625rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    transform: translateY(-50%);
    color: var(--cvi-muted);
    pointer-events: none;
}

.cvi-search input,
.cvi-hex input {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem 0.5rem 2.125rem;
    background: var(--cvi-subtle);
    color: var(--cvi-text);
    border: 1px solid transparent;
    border-radius: var(--cvi-radius-sm);
    /* 16px so iOS does not zoom the page on focus. */
    font: inherit;
    font-size: 16px;
    box-shadow: none;
    outline: none;
}

.cvi-search input:focus,
.cvi-hex input:focus {
    border-color: var(--cvi-accent);
    background: var(--cvi-surface);
}

/* ── Calendar ──────────────────────────────────────────────────────────────────────────── */

.cvi-pop[data-kind="date"],
.cvi-pop[data-kind="datetime-local"] {
    width: 19rem;
}

.cvi-pop[data-kind="datetime-local"]:not(.cvi-pop--sheet) {
    width: 27.5rem;
}

.cvi-pop[data-kind="datetime-local"]:not(.cvi-pop--sheet) {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
}

.cvi-pop[data-kind="datetime-local"]:not(.cvi-pop--sheet) .cvi-foot {
    grid-column: 1 / -1;
}

.cvi-pop--sheet[data-kind] {
    width: 100%;
}

.cvi-cal__head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.125rem 0.375rem;
}

.cvi-cal__title {
    flex: 1 1 auto;
    min-height: 2.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: var(--cvi-radius-sm);
    background: transparent;
    color: var(--cvi-heading);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.cvi-cal__title:hover,
.cvi-icon-btn:hover {
    background: var(--cvi-hover);
}

.cvi-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--cvi-radius-sm);
    background: transparent;
    color: var(--cvi-text);
    cursor: pointer;
}

.cvi-icon-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

[dir="rtl"] .cvi-icon-btn svg {
    transform: scaleX(-1);
}

.cvi-cal__grid--days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
}

.cvi-cal__grid--months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    padding-block: 0.25rem;
}

.cvi-cal__wd {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cvi-muted);
}

.cvi-day,
.cvi-month {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 2.25rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cvi-radius-sm);
    background: transparent;
    color: var(--cvi-text);
    font: inherit;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cvi-month {
    aspect-ratio: auto;
    min-height: 2.75rem;
}

.cvi-day:hover:not(:disabled),
.cvi-month:hover {
    background: var(--cvi-hover);
}

.cvi-day--out {
    color: var(--cvi-muted);
}

.cvi-day--today {
    border-color: var(--cvi-border-strong);
    font-weight: 700;
}

.cvi-day--on,
.cvi-day--on:hover:not(:disabled) {
    background: var(--cvi-accent);
    border-color: var(--cvi-accent);
    color: var(--cvi-on-accent);
    font-weight: 700;
}

.cvi-day:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cvi-day:focus-visible,
.cvi-month:focus-visible,
.cvi-cal__title:focus-visible,
.cvi-icon-btn:focus-visible,
.cvi-col__item:focus-visible,
.cvi-link:focus-visible,
.cvi-btn:focus-visible,
.cvi-swatch:focus-visible {
    outline: 2px solid var(--cvi-accent);
    outline-offset: 1px;
}

/* ── Time columns ──────────────────────────────────────────────────────────────────────── */

.cvi-time {
    display: flex;
    gap: 0.375rem;
}

.cvi-pop[data-kind="time"] {
    width: 11rem;
}

.cvi-pop--sheet .cvi-time {
    justify-content: center;
    margin-top: 0.5rem;
}

.cvi-col {
    display: flex;
    flex-direction: column;
    width: 4rem;
}

.cvi-pop--sheet .cvi-col {
    flex: 1 1 0;
    max-width: 8rem;
}

.cvi-col__label {
    padding: 0.375rem 0 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cvi-muted);
}

.cvi-col__list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    height: 15.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.cvi-pop--sheet .cvi-col__list {
    height: 11rem;
}

.cvi-col__item {
    flex: none;
    min-height: 2.25rem;
    border: 0;
    border-radius: var(--cvi-radius-sm);
    background: transparent;
    color: var(--cvi-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cvi-col__item:hover {
    background: var(--cvi-hover);
}

.cvi-col__item[aria-selected="true"] {
    background: var(--cvi-accent);
    color: var(--cvi-on-accent);
    font-weight: 700;
}

/* ── Footer ────────────────────────────────────────────────────────────────────────────── */

.cvi-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--cvi-border);
}

.cvi-foot > :first-child {
    margin-inline-end: auto;
}

.cvi-link,
.cvi-btn {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--cvi-radius-sm);
    background: transparent;
    color: var(--cvi-accent-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.cvi-link:hover {
    background: var(--cvi-hover);
}

.cvi-btn {
    background: var(--cvi-accent);
    color: var(--cvi-on-accent);
}

.cvi-btn:hover {
    background: var(--cvi-accent-hover);
}

/* ── Colour ────────────────────────────────────────────────────────────────────────────── */

.cvi-pop[data-kind="color"] {
    width: 15.5rem;
}

.cvi-pop--sheet[data-kind="color"] {
    width: 100%;
}

.cvi-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
    gap: 0.375rem;
    padding: 0.25rem;
}

.cvi-swatch {
    aspect-ratio: 1;
    min-height: 2rem;
    padding: 0;
    border: 1px solid var(--cvi-border);
    border-radius: var(--cvi-radius-sm);
    background: var(--cvi-swatch);
    cursor: pointer;
}

.cvi-swatch[aria-pressed="true"] {
    outline: 2px solid var(--cvi-accent);
    outline-offset: 2px;
}

.cvi-hex {
    position: relative;
    margin: 0.375rem 0.25rem 0.25rem;
}

.cvi-hex__chip {
    position: absolute;
    inset-inline-start: 0.625rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--cvi-border);
    background: var(--cvi-swatch);
    transform: translateY(-50%);
}

.cvi-hex input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    text-transform: lowercase;
}

.cvi-hex input.cvi-invalid {
    border-color: var(--cvi-danger);
}

/* ══ The fields themselves ══════════════════════════════════════════════════════════════ */

/* A field whose panel is open looks focused even though focus may be inside the panel. */
select.cvi-open,
input.cvi-open {
    border-color: var(--cvi-accent) !important;
}

/* Every single-choice select gets the chevron. The ones already styled by `.cv-select` or
   a page draw their own; this is for the ones that had nothing and showed the OS arrow. */
:where(select:not([multiple]):not([size]):not([data-cv-native])) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--cvi-chevron);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem;
    padding-inline-end: 2.5rem;
    cursor: pointer;
}

:where([dir="rtl"]) :where(select:not([multiple]):not([size]):not([data-cv-native])) {
    background-position: left 0.75rem center;
}

/* The date/time fields keep their typed segments (keyboard entry is still the browser's) but
   lose its calendar button, which opened the OS picker. Our own icon stands in its place. */
/* `input:is(…)` rather than `:where(…)`: the Tailwind forms plugin's `[type='date']` padding
   is 0-1-0 and injected after this file, and it would put the text under the icon. */
input:is([type="date"], [type="datetime-local"], [type="time"]):not([data-cv-native]) {
    background-image: var(--cvi-calendar);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem;
    padding-inline-end: 2.5rem;
    cursor: pointer;
}

input[type="time"]:not([data-cv-native]) {
    background-image: var(--cvi-clock);
}

input[type="date"]:not([data-cv-native])::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:not([data-cv-native])::-webkit-calendar-picker-indicator,
input[type="time"]:not([data-cv-native])::-webkit-calendar-picker-indicator {
    display: none;
}

/* Number fields: no spinner. The arrow keys still step; a pair of 8px triangles was never
   a usable target on a phone, and on desktop they were the only grey OS chrome left. */
input[type="number"]:not([data-cv-native]) {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"]:not([data-cv-native])::-webkit-inner-spin-button,
input[type="number"]:not([data-cv-native])::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Colour field: a swatch, not the OS button with a colour inside it. */
input[type="color"]:not([data-cv-native]) {
    -webkit-appearance: none;
    appearance: none;
    padding: 3px;
    border: 1px solid var(--cvi-border-strong);
    border-radius: var(--cvi-radius-sm);
    background: var(--cvi-surface);
    cursor: pointer;
}

input[type="color"]:not([data-cv-native])::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]:not([data-cv-native])::-webkit-color-swatch {
    border: 0;
    border-radius: calc(var(--cvi-radius-sm) - 3px);
}

input[type="color"]:not([data-cv-native])::-moz-color-swatch {
    border: 0;
    border-radius: calc(var(--cvi-radius-sm) - 3px);
}

/* Range: a flat track, filled to the value, and a round thumb. `--cvi-fill` is kept current
   by cv-inputs.js. */
input[type="range"]:not([data-cv-native]) {
    -webkit-appearance: none;
    appearance: none;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

input[type="range"]:not([data-cv-native])::-webkit-slider-runnable-track {
    height: 0.375rem;
    border-radius: 999px;
    /* One solid colour, as an image layer so it can be sized to the value; the track colour
       underneath shows past it. No blend: the layer is a single stop. */
    background: linear-gradient(var(--cvi-accent) 0 100%) 0 0 / var(--cvi-fill, 50%) 100% no-repeat, var(--cvi-track);
}

input[type="range"]:not([data-cv-native])::-moz-range-track {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--cvi-track);
}

input[type="range"]:not([data-cv-native])::-moz-range-progress {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--cvi-accent);
}

input[type="range"]:not([data-cv-native])::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: -0.375rem;
    border: 2px solid var(--cvi-accent);
    border-radius: 50%;
    background: var(--cvi-surface);
    transition: transform 100ms ease-out;
}

input[type="range"]:not([data-cv-native])::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--cvi-accent);
    border-radius: 50%;
    background: var(--cvi-surface);
}

input[type="range"]:not([data-cv-native]):active::-webkit-slider-thumb {
    transform: scale(1.15);
}

input[type="range"]:not([data-cv-native]):focus-visible {
    outline: none;
}

input[type="range"]:not([data-cv-native]):focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--cvi-ring);
}

input[type="range"]:not([data-cv-native]):focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--cvi-ring);
}

input[type="range"]:not([data-cv-native]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}