/* SPDX-License-Identifier: MIT
 * shadcn/ui new-york-v4 components, translated from their Tailwind classes to plain CSS.
 * Source for every block: https://github.com/shadcn-ui/ui/tree/main/apps/v4/registry/new-york-v4/ui/<name>.tsx
 * (fetched 2026-10-13 as data). Markup mirrors shadcn: data-slot / data-variant / data-size / data-state.
 * Deliberate changes are marked "CHANGED:" and listed in research/16-drive-design.md (port table).
 * Motion: tw-animate-css "animate-in/out" (fade, zoom, slide) rebuilt as two keyframes driven by variables.
 */

/* ---------- motion primitives (tw-animate-css) ---------- */
@keyframes sh-enter {
  from {
    opacity: var(--enter-opacity, 1);
    transform: translate3d(var(--enter-x, 0), var(--enter-y, 0), 0) scale(var(--enter-scale, 1));
  }
}
@keyframes sh-exit {
  to {
    opacity: var(--exit-opacity, 1);
    transform: translate3d(var(--exit-x, 0), var(--exit-y, 0), 0) scale(var(--exit-scale, 1));
  }
}
@keyframes sh-spin { to { transform: rotate(360deg); } }
@keyframes sh-pulse { 50% { opacity: 0.5; } }
.animate-in { animation: sh-enter var(--anim-duration, 150ms) var(--anim-ease, ease) both; }
.animate-out { animation: sh-exit var(--anim-duration, 150ms) var(--anim-ease, ease) both; }

/* ---------- icon (Lucide sprite) ---------- */
.icon { width: 1rem; height: 1rem; max-width: none; flex-shrink: 0; pointer-events: none; }
.icon[data-size="3"] { width: 0.75rem; height: 0.75rem; }
.icon[data-size="3.5"] { width: 0.875rem; height: 0.875rem; }
.icon[data-size="5"] { width: 1.25rem; height: 1.25rem; }
.icon[data-size="6"] { width: 1.5rem; height: 1.5rem; }

/* ---------- button (button.tsx) ---------- */
.btn {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--text-sm--lh); font-weight: 500;
  white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none;
  border: 1px solid transparent; outline: none;
  transition-property: color, background-color, border-color, box-shadow, opacity, transform; /* CHANGED: transition-all named */
  transition-duration: var(--duration); transition-timing-function: var(--ease);
  height: var(--target); padding: 0.5rem 1rem;             /* size default: h-9 px-4 py-2 */
  background: var(--primary); color: var(--primary-foreground);
}
.btn:has(> .icon) { padding-inline: 0.75rem; }                      /* has-[>svg]:px-3 */
.btn:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
.btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.btn:disabled, .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
.btn[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.btn:active { transform: translateY(0.5px); }                      /* CHANGED: a half-pixel press, no scale */
/* Site v4 (17-brand.md v3): the default variant is each view's one primary, in Tari's lime with the ink label and,
   on light pages, the lime-700 edge (the home's Open your drive). Every other action names its variant. */
.btn:not([data-variant]) { background: var(--brand-solid); color: var(--on-brand); box-shadow: inset 0 0 0 1px var(--brand-edge); font-weight: 600; }
.btn:not([data-variant]):hover { background: var(--brand-solid-hover); }
.btn:not([data-variant]):focus-visible { box-shadow: inset 0 0 0 1px var(--brand-edge), 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.btn[data-variant="destructive"] { background: var(--destructive); color: oklch(1 0 0); }
.btn[data-variant="destructive"]:hover { background: color-mix(in oklab, var(--destructive) 90%, transparent); }
.btn[data-variant="destructive"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.btn[data-variant="outline"] { background: var(--background); color: var(--foreground); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn[data-variant="outline"]:hover { background: var(--accent); color: var(--accent-foreground); }
.btn[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
.btn[data-variant="secondary"]:hover { background: color-mix(in oklab, var(--secondary) 80%, transparent); }
.btn[data-variant="ghost"] { background: transparent; color: inherit; }
.btn[data-variant="ghost"]:hover, .btn[data-variant="ghost"][aria-expanded="true"], .btn[data-variant="ghost"][aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); }
.btn[data-variant="link"] { background: transparent; color: var(--primary); height: auto; padding: 0; text-underline-offset: 4px; }
.btn[data-variant="link"]:hover { text-decoration: underline; }
.btn[data-size="xs"] { height: 1.5rem; gap: 0.25rem; padding-inline: 0.5rem; font-size: var(--text-xs); }
.btn[data-size="sm"] { height: max(2rem, calc(var(--target) - 0.25rem)); gap: 0.375rem; padding-inline: 0.75rem; }
.btn[data-size="lg"] { height: max(2.5rem, var(--target)); padding-inline: 1.5rem; }
.btn[data-size="lg"]:has(> .icon) { padding-inline: 1rem; }            /* has-[>svg]:px-4 */
.btn[data-size="sm"]:has(> .icon) { padding-inline: 0.625rem; }        /* has-[>svg]:px-2.5 */
.btn[data-size="icon"], .btn[data-size="icon"]:has(> .icon) { width: var(--target); height: var(--target); padding: 0; }
.btn[data-size="icon-sm"], .btn[data-size="icon-sm"]:has(> .icon) { width: max(2rem, calc(var(--target) - 0.25rem)); height: max(2rem, calc(var(--target) - 0.25rem)); padding: 0; }
.btn[data-size="icon-lg"], .btn[data-size="icon-lg"]:has(> .icon) { width: 2.5rem; height: 2.5rem; padding: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn[data-variant="outline"] { background: color-mix(in oklab, var(--input) 30%, transparent); border-color: var(--input); }
  :root:not([data-theme="light"]) .btn[data-variant="outline"]:hover { background: color-mix(in oklab, var(--input) 50%, transparent); }
  :root:not([data-theme="light"]) .btn[data-variant="destructive"] { background: color-mix(in oklab, var(--destructive) 60%, transparent); }
  :root:not([data-theme="light"]) .btn[data-variant="ghost"]:hover { background: color-mix(in oklab, var(--accent) 50%, transparent); } }
:root[data-theme="dark"] .btn[data-variant="outline"] { background: color-mix(in oklab, var(--input) 30%, transparent); border-color: var(--input); }
:root[data-theme="dark"] .btn[data-variant="outline"]:hover { background: color-mix(in oklab, var(--input) 50%, transparent); }
:root[data-theme="dark"] .btn[data-variant="destructive"] { background: color-mix(in oklab, var(--destructive) 60%, transparent); }
:root[data-theme="dark"] .btn[data-variant="ghost"]:hover { background: color-mix(in oklab, var(--accent) 50%, transparent); }

/* ---------- badge (badge.tsx) ---------- */
.badge {
  display: inline-flex; width: fit-content; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.25rem;
  overflow: hidden; border-radius: var(--radius-full); border: 1px solid transparent; padding: 0.125rem 0.5rem;
  font-size: var(--text-xs); line-height: var(--text-xs--lh); font-weight: 500; white-space: nowrap;
  transition: color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  background: var(--primary); color: var(--primary-foreground);
}
.badge > .icon { width: 0.75rem; height: 0.75rem; }
.badge[data-variant="secondary"] { background: var(--secondary); color: var(--secondary-foreground); }
.badge[data-variant="destructive"] { background: var(--destructive); color: oklch(1 0 0); }
.badge[data-variant="outline"] { background: transparent; border-color: var(--border); color: var(--foreground); }
a.badge[data-variant="outline"]:hover { background: var(--accent); }
/* CHANGED (addition): meaning variants from shadcn's violet/emerald/amber themes; soft fill + coloured text */
.badge[data-variant="tari"] { background: var(--tari-soft); color: var(--tari); }
.badge[data-variant="success"] { background: var(--success-soft); color: var(--success); }
.badge[data-variant="warning"] { background: var(--warning-soft); color: var(--warning); }

/* ---------- card (card.tsx) ---------- */
.card { display: flex; flex-direction: column; gap: 1.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--card); color: var(--card-foreground); padding-block: 1.5rem; box-shadow: var(--shadow-sm); }
.card-header { display: grid; grid-auto-rows: min-content; grid-template-rows: auto auto; align-items: start; gap: 0.5rem; padding-inline: 1.5rem; }
.card-header:has(.card-action) { grid-template-columns: 1fr auto; }
.card-header.bordered { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.card-title { line-height: 1; font-weight: 600; }
.card-description { font-size: var(--text-sm); color: var(--muted-foreground); }
.card-action { grid-column-start: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; }
.card-content { padding-inline: 1.5rem; }
.card-footer { display: flex; align-items: center; padding-inline: 1.5rem; }
.card-footer.bordered { padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* ---------- table (table.tsx) ---------- */
.table-container { position: relative; width: 100%; overflow-x: auto; }
.table { width: 100%; caption-side: bottom; font-size: var(--text-sm); border-collapse: collapse; }
.table thead tr { border-bottom: 1px solid var(--border); }
.table tbody tr { border-bottom: 1px solid var(--border); transition: background-color var(--duration) var(--ease); }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:hover, .table tbody tr:has([aria-expanded="true"]) { background: color-mix(in oklab, var(--muted) 50%, transparent); }
.table tbody tr[data-state="selected"] { background: var(--brand-subtle); }   /* site v4: picked rows are yours */
.table th { height: 2.5rem; padding-inline: 0.5rem; text-align: left; vertical-align: middle; font-weight: 500; white-space: nowrap; color: var(--foreground); }
.table td { padding: 0.5rem; vertical-align: middle; white-space: nowrap; }
.table th:has([role="checkbox"]), .table td:has([role="checkbox"]) { padding-right: 0; }
.table caption { margin-top: 1rem; font-size: var(--text-sm); color: var(--muted-foreground); }

/* ---------- overlay + dialog + alert-dialog (dialog.tsx, alert-dialog.tsx) ---------- */
.overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--scrim); }
.overlay[data-state="open"] { --enter-opacity: 0; animation: sh-enter 200ms var(--ease) both; }
.overlay[data-state="closed"] { --exit-opacity: 0; animation: sh-exit 200ms var(--ease) both; }
.dialog {
  position: fixed; top: 50%; left: 50%; translate: -50% -50%; z-index: var(--z-overlay);
  display: grid; width: 100%; max-width: calc(100% - 2rem); gap: 1rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--background); padding: 1.5rem; box-shadow: var(--shadow-lg); outline: none;
  max-height: calc(100dvh - 2rem); overflow-y: auto;                       /* CHANGED: tall content scrolls inside */
}
.dialog[data-state="open"] { --enter-opacity: 0; --enter-scale: 0.95; animation: sh-enter 200ms var(--ease) both; }
.dialog[data-state="closed"] { --exit-opacity: 0; --exit-scale: 0.95; animation: sh-exit 200ms var(--ease) both; }
@media (min-width: 640px) { .dialog { max-width: 32rem; } .dialog[data-size="sm"] { max-width: 20rem; } .dialog[data-size="lg"] { max-width: 40rem; } }
.dialog-close { position: absolute; top: 1rem; right: 1rem; border-radius: var(--radius-xs); opacity: 0.7; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; transition: opacity var(--duration) var(--ease); display: grid; place-items: center; }
.dialog-close:hover { opacity: 1; }
.dialog-close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (pointer: coarse) { .dialog-close { top: 0.5rem; right: 0.5rem; width: 2.75rem; height: 2.75rem; } }
.dialog-header { display: flex; flex-direction: column; gap: 0.5rem; text-align: center; }
@media (min-width: 640px) { .dialog-header { text-align: left; } }
.dialog-footer { display: flex; flex-direction: column-reverse; gap: 0.5rem; }
@media (min-width: 640px) { .dialog-footer { flex-direction: row; justify-content: flex-end; } }
.dialog-title { font-size: var(--text-lg); line-height: 1.2; font-weight: 600; }   /* CHANGED: leading-none -> 1.2 so two-line titles do not collide */
.dialog-description { font-size: var(--text-sm); color: var(--muted-foreground); }
.dialog[role="alertdialog"] .dialog-header { place-items: center; gap: 0.375rem; }
@media (min-width: 640px) { .dialog[role="alertdialog"] .dialog-header { place-items: start; } }
.alert-media { margin-bottom: 0.5rem; display: inline-flex; width: 4rem; height: 4rem; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--muted); }
.alert-media .icon { width: 2rem; height: 2rem; }

/* ---------- sheet (sheet.tsx) ---------- */
.sheet { position: fixed; z-index: var(--z-overlay); display: flex; flex-direction: column; gap: 1rem; background: var(--background); box-shadow: var(--shadow-lg); outline: none; }
.sheet[data-side="right"] { inset-block: 0; right: 0; height: 100%; width: 75%; border-left: 1px solid var(--border); --enter-x: 100%; --exit-x: 100%; }
.sheet[data-side="left"] { inset-block: 0; left: 0; height: 100%; width: 75%; border-right: 1px solid var(--border); --enter-x: -100%; --exit-x: -100%; }
.sheet[data-side="bottom"] { inset-inline: 0; bottom: 0; height: auto; max-height: 85dvh; border-top: 1px solid var(--border); --enter-y: 100%; --exit-y: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } /* CHANGED: rounded top on phones */
@media (min-width: 640px) { .sheet[data-side="right"], .sheet[data-side="left"] { max-width: 24rem; } }
.sheet[data-side="left"].sidebar-sheet { width: var(--sidebar-width-mobile); max-width: 85vw; background: var(--sidebar); color: var(--sidebar-foreground); padding: 0; gap: 0; }
.sheet[data-state="open"] { animation: sh-enter 500ms var(--ease-in-out) both; }
.sheet[data-state="closed"] { animation: sh-exit 300ms var(--ease-in-out) both; }
.sheet-header { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem; }
.sheet-footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; }
.sheet-title { font-weight: 600; color: var(--foreground); }
.sheet-description { font-size: var(--text-sm); color: var(--muted-foreground); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding-inline: 1rem; }

/* ---------- dropdown-menu (dropdown-menu.tsx) and select content (select.tsx) ---------- */
.menu {
  position: fixed; z-index: var(--z-overlay); min-width: 8rem; max-height: var(--menu-available-height, 24rem);
  overflow-x: hidden; overflow-y: auto; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--popover); color: var(--popover-foreground); padding: 0.25rem; box-shadow: var(--shadow-md);
  transform-origin: var(--menu-origin, top left);
}
.menu[data-state="open"] { --enter-opacity: 0; --enter-scale: 0.95; animation: sh-enter var(--duration) var(--ease) both; }
.menu[data-state="open"][data-side="bottom"] { --enter-y: -0.5rem; }
.menu[data-state="open"][data-side="top"] { --enter-y: 0.5rem; }
.menu[data-state="closed"] { --exit-opacity: 0; --exit-scale: 0.95; animation: sh-exit var(--duration) var(--ease) both; }
.menu-item {
  position: relative; display: flex; width: 100%; cursor: default; align-items: center; gap: 0.5rem; border-radius: var(--radius-sm);
  padding: 0.375rem 0.5rem; font-size: var(--text-sm); line-height: var(--text-sm--lh); outline: none; user-select: none;
  background: none; border: 0; text-align: left; color: inherit; text-decoration: none;
}
@media (pointer: coarse) { .menu-item { min-height: 2.75rem; } }
.menu-item > .icon { color: var(--muted-foreground); }
.menu-item:focus, .menu-item[data-highlighted] { background: var(--accent); color: var(--accent-foreground); }
.menu-item[data-disabled], .menu-item[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
.menu-item[data-inset] { padding-left: 2rem; }
.menu-item[data-variant="destructive"], .menu-item[data-variant="destructive"] > .icon { color: var(--destructive); }
.menu-item[data-variant="destructive"]:focus { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
.menu-item[role="menuitemradio"], .menu-item[role="menuitemcheckbox"] { padding-left: 2rem; }
.menu-indicator { position: absolute; left: 0.5rem; display: flex; width: 0.875rem; height: 0.875rem; align-items: center; justify-content: center; }
.menu-item[aria-checked="false"] .menu-indicator { visibility: hidden; }
.menu-label { padding: 0.375rem 0.5rem; font-size: var(--text-sm); font-weight: 500; }
.menu-separator { margin: 0.25rem -0.25rem; height: 1px; background: var(--border); }
.menu-shortcut { margin-left: auto; font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--muted-foreground); }
/* select trigger + items */
.select-trigger {
  display: flex; width: fit-content; align-items: center; justify-content: space-between; gap: 0.5rem; border-radius: var(--radius-md);
  border: 1px solid var(--input); background: transparent; padding: 0.5rem 0.75rem; font-size: var(--text-sm); white-space: nowrap;
  box-shadow: var(--shadow-xs); outline: none; height: var(--target); cursor: pointer; color: inherit;
  transition: color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.select-trigger[data-size="sm"] { height: 2rem; }
.select-trigger > .icon:last-child { opacity: 0.5; color: var(--muted-foreground); }
.select-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.select-trigger:disabled { cursor: not-allowed; opacity: 0.5; }
.select-trigger[data-placeholder] .select-value { color: var(--muted-foreground); }
.select-item { padding-right: 2rem; }
.select-item .select-check { position: absolute; right: 0.5rem; display: flex; width: 0.875rem; height: 0.875rem; align-items: center; justify-content: center; }
.select-item[aria-selected="false"] .select-check { visibility: hidden; }
.select-label { padding: 0.375rem 0.5rem; font-size: var(--text-xs); color: var(--muted-foreground); }

/* ---------- tabs (tabs.tsx) ---------- */
.tabs { display: flex; flex-direction: column; gap: 0.5rem; }
.tabs-list { display: inline-flex; width: fit-content; height: 2.25rem; align-items: center; justify-content: center; border-radius: var(--radius-lg); padding: 3px; background: var(--muted); color: var(--muted-foreground); }
.tabs-list[data-stretch] { width: 100%; }
@media (pointer: coarse) { .tabs-list { height: 2.75rem; } }
.tabs-trigger {
  position: relative; display: inline-flex; height: calc(100% - 1px); flex: 1; align-items: center; justify-content: center; gap: 0.375rem;
  border-radius: var(--radius-md); border: 1px solid transparent; padding: 0.25rem 0.5rem; font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  color: color-mix(in oklab, var(--foreground) 60%, transparent); background: transparent; cursor: pointer; outline: none;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.tabs-trigger:hover { color: var(--foreground); }
.tabs-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); outline: 1px solid var(--ring); }
.tabs-trigger:disabled { pointer-events: none; opacity: 0.5; }
.tabs-trigger[data-state="active"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .tabs-trigger { color: var(--muted-foreground); }
:root[data-theme="dark"] .tabs-trigger[data-state="active"] { border-color: var(--input); background: color-mix(in oklab, var(--input) 30%, transparent); color: var(--foreground); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs-trigger { color: var(--muted-foreground); }
  :root:not([data-theme="light"]) .tabs-trigger[data-state="active"] { border-color: var(--input); background: color-mix(in oklab, var(--input) 30%, transparent); color: var(--foreground); } }
.tabs-content { flex: 1; outline: none; }
.tabs-content[data-state="inactive"] { display: none; }

/* ---------- input + label + textarea (input.tsx, label.tsx) ---------- */
.input, .textarea {
  display: flex; width: 100%; min-width: 0; border-radius: var(--radius-md); border: 1px solid var(--input); background: transparent;
  padding: 0.25rem 0.75rem; font-size: var(--text-base); box-shadow: var(--shadow-xs); outline: none; color: inherit;
  transition: color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
  height: var(--target);
}
.textarea { height: auto; min-height: 4rem; padding-block: 0.5rem; resize: vertical; field-sizing: content; }
@media (min-width: 768px) { .input, .textarea { font-size: var(--text-sm); } }
.input::placeholder, .textarea::placeholder { color: var(--muted-foreground); }
.input::selection { background: var(--primary); color: var(--primary-foreground); }
.input:focus-visible, .textarea:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.input:disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
.input[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent); }
.input.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
:root[data-theme="dark"] .input, :root[data-theme="dark"] .textarea, :root[data-theme="dark"] .select-trigger { background: color-mix(in oklab, var(--input) 30%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .input, :root:not([data-theme="light"]) .textarea, :root:not([data-theme="light"]) .select-trigger { background: color-mix(in oklab, var(--input) 30%, transparent); } }
.label { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); line-height: 1; font-weight: 500; user-select: none; }
.field { display: grid; gap: 0.5rem; }
.field-hint { font-size: var(--text-sm); color: var(--muted-foreground); }
.field-error { font-size: var(--text-sm); color: var(--destructive); }

/* ---------- switch (switch.tsx) ---------- */
.switch {
  display: inline-flex; flex-shrink: 0; align-items: center; height: 1.15rem; width: 2rem; border-radius: var(--radius-full);
  border: 1px solid transparent; box-shadow: var(--shadow-xs); outline: none; cursor: pointer; padding: 0; background: var(--input);
  transition: background-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.switch[data-state="checked"] { background: var(--primary); }
.switch:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.switch:disabled { cursor: not-allowed; opacity: 0.5; }
.switch-thumb { pointer-events: none; display: block; width: 1rem; height: 1rem; border-radius: var(--radius-full); background: var(--background); transition: transform var(--duration) var(--ease); transform: translateX(0); }
.switch[data-state="checked"] .switch-thumb { transform: translateX(calc(100% - 2px)); }
:root[data-theme="dark"] .switch[data-state="unchecked"] { background: color-mix(in oklab, var(--input) 80%, transparent); }
:root[data-theme="dark"] .switch[data-state="unchecked"] .switch-thumb { background: var(--foreground); }
:root[data-theme="dark"] .switch[data-state="checked"] .switch-thumb { background: var(--primary-foreground); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .switch[data-state="unchecked"] { background: color-mix(in oklab, var(--input) 80%, transparent); }
  :root:not([data-theme="light"]) .switch[data-state="unchecked"] .switch-thumb { background: var(--foreground); }
  :root:not([data-theme="light"]) .switch[data-state="checked"] .switch-thumb { background: var(--primary-foreground); } }
@media (pointer: coarse) { .switch { position: relative; } .switch::after { content: ""; position: absolute; inset: -0.85rem -0.4rem; } }

/* ---------- checkbox (checkbox.tsx) ---------- */
.checkbox {
  display: inline-grid; place-content: center; width: 1rem; height: 1rem; flex-shrink: 0; border-radius: 4px; border: 1px solid var(--input);
  box-shadow: var(--shadow-xs); outline: none; cursor: pointer; padding: 0; background: transparent; color: var(--primary-foreground);
  transition: box-shadow var(--duration) var(--ease);
}
.checkbox .icon { width: 0.875rem; height: 0.875rem; visibility: hidden; }
.checkbox[data-state="checked"], .checkbox[data-state="indeterminate"] { background: var(--primary); border-color: var(--primary); }
.checkbox[data-state="checked"] .icon { visibility: visible; }
.checkbox:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.checkbox:disabled { cursor: not-allowed; opacity: 0.5; }
:root[data-theme="dark"] .checkbox:not([data-state="checked"]) { background: color-mix(in oklab, var(--input) 30%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .checkbox:not([data-state="checked"]) { background: color-mix(in oklab, var(--input) 30%, transparent); } }
@media (pointer: coarse) { .checkbox { position: relative; } .checkbox::after { content: ""; position: absolute; inset: -0.875rem; } }

/* ---------- radio-group (radio-group.tsx) ---------- */
.radio-group { display: grid; gap: 0.75rem; }
.radio {
  aspect-ratio: 1; width: 1rem; height: 1rem; flex-shrink: 0; border-radius: var(--radius-full); border: 1px solid var(--input); color: var(--primary);
  box-shadow: var(--shadow-xs); outline: none; display: grid; place-items: center; padding: 0; background: transparent; cursor: pointer;
  transition: color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.radio::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary); transform: scale(0); }
.radio[aria-checked="true"]::after { transform: scale(1); }
.radio:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }

/* ---------- progress (progress.tsx) ---------- */
.progress { position: relative; height: 0.5rem; width: 100%; overflow: hidden; border-radius: var(--radius-full); background: color-mix(in oklab, var(--primary) 20%, transparent); }
.progress-indicator { height: 100%; width: 100%; flex: 1; background: var(--primary); transform: translateX(calc(-100% + var(--value, 0) * 1%)); transition: transform 300ms var(--ease); }
.progress[data-tone="warning"] { background: var(--warning-soft); } .progress[data-tone="warning"] .progress-indicator { background: var(--warning); }

/* ---------- tooltip (tooltip.tsx) ---------- */
.tooltip { position: fixed; z-index: var(--z-overlay); width: fit-content; max-width: 18rem; border-radius: var(--radius-md); background: var(--foreground); color: var(--background); padding: 0.375rem 0.75rem; font-size: var(--text-xs); line-height: var(--text-xs--lh); text-wrap: balance; pointer-events: none; }
.tooltip[data-state="open"] { --enter-opacity: 0; --enter-scale: 0.95; animation: sh-enter var(--duration) var(--ease) both; }
.tooltip[data-side="bottom"][data-state="open"] { --enter-y: -0.5rem; }
.tooltip[data-side="top"][data-state="open"] { --enter-y: 0.5rem; }
.tooltip-arrow { position: absolute; width: 0.625rem; height: 0.625rem; rotate: 45deg; border-radius: 2px; background: var(--foreground); }

/* ---------- sonner toast (sonner.tsx -> sonner styles.css defaults) ---------- */
.toaster { position: fixed; z-index: var(--z-toast); bottom: 24px; right: 24px; width: 356px; display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
@media (max-width: 600px) { .toaster { left: 16px; right: 16px; bottom: 16px; width: auto; } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--popover); color: var(--popover-foreground); box-shadow: 0 4px 12px rgb(0 0 0 / 0.1); font-size: 13px; line-height: 1.4;
  --enter-y: 100%; --enter-opacity: 0; animation: sh-enter 400ms ease both;
}
.toast[data-state="closed"] { --exit-opacity: 0; --exit-y: 0.5rem; animation: sh-exit 200ms ease both; }
.toast > .icon { margin-inline: -3px 4px; }
.toast[data-type="success"] > .icon { color: var(--success); }
.toast[data-type="error"] > .icon { color: var(--destructive); }
.toast-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-title { font-weight: 500; line-height: 1.5; }
.toast-description { color: var(--muted-foreground); }
.toast-action { margin-left: auto; height: 24px; padding: 0 8px; border-radius: 4px; border: 0; font-size: 12px; font-weight: 500; background: var(--popover-foreground); color: var(--popover); cursor: pointer; flex-shrink: 0; }
@media (pointer: coarse) { .toast-action { height: 2.25rem; padding: 0 12px; } }

/* ---------- separator, avatar, skeleton, spinner, kbd ---------- */
.separator { flex-shrink: 0; background: var(--border); height: 1px; width: 100%; }
.separator[data-orientation="vertical"] { height: 100%; width: 1px; align-self: stretch; }
.avatar { position: relative; display: flex; width: 2rem; height: 2rem; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-full); user-select: none; }
.avatar[data-size="sm"] { width: 1.5rem; height: 1.5rem; } .avatar[data-size="lg"] { width: 2.5rem; height: 2.5rem; }
.avatar-fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--muted); color: var(--muted-foreground); font-size: var(--text-sm); }
.avatar[data-shape="square"], .avatar[data-shape="square"] .avatar-fallback { border-radius: var(--radius-lg); }
.skeleton { animation: sh-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; border-radius: var(--radius-md); background: var(--accent); }
.spinner { width: 1rem; height: 1rem; animation: sh-spin 1s linear infinite; }
.kbd { pointer-events: none; display: inline-flex; height: 1.25rem; width: fit-content; min-width: 1.25rem; align-items: center; justify-content: center; gap: 0.25rem; border-radius: var(--radius-sm); background: var(--muted); padding: 0 0.25rem; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); user-select: none; }

/* ---------- breadcrumb (breadcrumb.tsx) ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: var(--text-sm); overflow-wrap: break-word; color: var(--muted-foreground); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .breadcrumb ol { gap: 0.625rem; } }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.375rem; }
.breadcrumb a { text-decoration: none; transition: color var(--duration) var(--ease); }
.breadcrumb a:hover { color: var(--foreground); }
.breadcrumb [aria-current="page"] { font-weight: 400; color: var(--foreground); }
.breadcrumb .crumb-sep .icon { width: 0.875rem; height: 0.875rem; }

/* ---------- alert (alert.tsx) ---------- */
.alert { position: relative; display: grid; width: 100%; grid-template-columns: 0 1fr; align-items: start; row-gap: 0.125rem; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 0.75rem 1rem; font-size: var(--text-sm); background: var(--card); color: var(--card-foreground); }
.alert:has(> .icon) { grid-template-columns: 1rem 1fr; column-gap: 0.75rem; }
.alert > .icon { translate: 0 0.125rem; color: currentColor; }
.alert-title { grid-column-start: 2; min-height: 1rem; font-weight: 500; letter-spacing: var(--tracking-tight); }
.alert-description { grid-column-start: 2; display: grid; justify-items: start; gap: 0.25rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.alert-description p { line-height: 1.625; }
.alert[data-variant="destructive"] { color: var(--destructive); }
.alert[data-variant="destructive"] .alert-description { color: color-mix(in oklab, var(--destructive) 90%, transparent); }
.alert[data-variant="tari"] > .icon, .alert[data-variant="tari"] .alert-title { color: var(--tari); }  /* CHANGED (addition) */

/* ---------- command (command.tsx) ---------- */
.command { display: flex; height: 100%; width: 100%; flex-direction: column; overflow: hidden; border-radius: var(--radius-md); background: var(--popover); color: var(--popover-foreground); }
.dialog.command-dialog { padding: 0; gap: 0; overflow: hidden; }
.command-input-wrap { display: flex; height: 3rem; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding-inline: 0.75rem; }
.command-input-wrap > .icon { width: 1.25rem; height: 1.25rem; opacity: 0.5; }
.command-input { display: flex; height: 2.5rem; width: 100%; border-radius: var(--radius-md); background: transparent; border: 0; padding-block: 0.75rem; font-size: var(--text-sm); outline: none; color: inherit; }
.command-input::placeholder { color: var(--muted-foreground); }
.command-list { max-height: 300px; scroll-padding-block: 0.25rem; overflow-x: hidden; overflow-y: auto; }
.command-empty { padding-block: 1.5rem; text-align: center; font-size: var(--text-sm); }
.command-group { overflow: hidden; padding: 0.25rem 0.5rem; color: var(--foreground); }
.command-group-heading { padding: 0.375rem 0.5rem; font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); }
.command-item { position: relative; display: flex; cursor: default; align-items: center; gap: 0.5rem; border-radius: var(--radius-sm); padding: 0.75rem 0.5rem; font-size: var(--text-sm); outline: none; user-select: none; }
.command-item > .icon { width: 1.25rem; height: 1.25rem; color: var(--muted-foreground); }
.command-item[data-selected="true"] { background: var(--accent); color: var(--accent-foreground); }
.command-item[data-disabled="true"] { pointer-events: none; opacity: 0.5; }
.command-separator { margin-inline: -0.25rem; height: 1px; background: var(--border); }

/* ---------- scroll-area (scroll-area.tsx): native scroller, themed bar ---------- */
.scroll-area { overflow: auto; border-radius: inherit; outline: none; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.scroll-area:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.scroll-area::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; border: 1px solid transparent; background-clip: padding-box; }

/* ---------- toggle (toggle.tsx) ---------- */
.toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; outline: none; border: 1px solid transparent; background: transparent; color: inherit; height: var(--target); min-width: var(--target); padding-inline: 0.5rem; cursor: pointer; transition: color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.toggle:hover { background: var(--muted); color: var(--muted-foreground); }
.toggle[aria-pressed="true"], .toggle[data-state="on"] { background: var(--accent); color: var(--accent-foreground); }
.toggle:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.toggle[data-variant="outline"] { border-color: var(--input); box-shadow: var(--shadow-xs); }
.toggle-group { display: inline-flex; align-items: center; border-radius: var(--radius-md); }
.toggle-group[data-variant="outline"] { box-shadow: var(--shadow-xs); }
.toggle-group[data-variant="outline"] .toggle { box-shadow: none; border-radius: 0; border-color: var(--input); }
.toggle-group[data-variant="outline"] .toggle + .toggle { border-left-width: 0; }
.toggle-group[data-variant="outline"] .toggle:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.toggle-group[data-variant="outline"] .toggle:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ---------- item (item.tsx) ---------- */
.item { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--text-sm); outline: none; transition: background-color 100ms var(--ease), border-color 100ms var(--ease); text-decoration: none; color: inherit; background: transparent; text-align: left; width: 100%; }
.item[data-size="sm"] { gap: 0.625rem; padding: 0.75rem 1rem; }
.item[data-variant="outline"] { border-color: var(--border); }
.item[data-variant="muted"] { background: color-mix(in oklab, var(--muted) 50%, transparent); }
a.item:hover, button.item:hover { background: color-mix(in oklab, var(--accent) 50%, transparent); }
.item:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.item-media { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.5rem; }
.item:has(.item-description) > .item-media { align-self: flex-start; translate: 0 0.125rem; }
.item-media[data-variant="icon"] { width: 2rem; height: 2rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--muted); }
.item-content { display: flex; flex: 1; flex-direction: column; gap: 0.25rem; min-width: 0; }
.item-title { display: flex; width: fit-content; align-items: center; gap: 0.5rem; font-size: var(--text-sm); line-height: 1.375; font-weight: 500; }
.item-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-sm); line-height: 1.5; font-weight: 400; text-wrap: balance; color: var(--muted-foreground); }
.item-actions { display: flex; align-items: center; gap: 0.5rem; }
.item-group { display: flex; flex-direction: column; }
.item-separator { height: 1px; background: var(--border); margin: 0; }

/* ---------- empty (empty.tsx) ---------- */
.empty { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; border-radius: var(--radius-lg); border: 1px dashed var(--border); padding: 1.5rem; text-align: center; text-wrap: balance; }
@media (min-width: 768px) { .empty { padding: 3rem; } }
.empty-header { display: flex; max-width: 24rem; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.empty-media { margin-bottom: 0.5rem; display: flex; flex-shrink: 0; align-items: center; justify-content: center; }
.empty-media[data-variant="icon"] { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: var(--muted); color: var(--foreground); }
.empty-media[data-variant="icon"] .icon { width: 1.5rem; height: 1.5rem; }
.empty-title { font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-tight); }
.empty-description { font-size: var(--text-sm); line-height: 1.625; color: var(--muted-foreground); }
.empty-content { display: flex; width: 100%; max-width: 24rem; min-width: 0; flex-direction: column; align-items: center; gap: 1rem; font-size: var(--text-sm); }

/* ---------- sidebar (sidebar.tsx), default variant, collapsible offcanvas ---------- */
.sidebar-wrapper { display: flex; min-height: 100svh; width: 100%; }
.sidebar { display: none; position: fixed; inset-block: 0; left: 0; z-index: var(--z-sticky); height: 100svh; width: var(--sidebar-width); flex-direction: column; background: var(--sidebar); color: var(--sidebar-foreground); border-right: 1px solid var(--sidebar-border); transition: left 200ms linear; }
.sidebar-gap { display: none; position: relative; width: var(--sidebar-width); flex-shrink: 0; background: transparent; transition: width 200ms linear; }
@media (min-width: 768px) { .sidebar { display: flex; } .sidebar-gap { display: block; } }
.sidebar-wrapper[data-state="collapsed"] .sidebar { left: calc(var(--sidebar-width) * -1); }
.sidebar-wrapper[data-state="collapsed"] .sidebar-gap { width: 0; }
.sidebar-inner { display: flex; height: 100%; width: 100%; flex-direction: column; }
.sidebar-header, .sidebar-footer { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; }
.sidebar-content { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 0.5rem; overflow: auto; }
.sidebar-group { position: relative; display: flex; width: 100%; min-width: 0; flex-direction: column; padding: 0.5rem; }
.sidebar-group-label { display: flex; height: 2rem; flex-shrink: 0; align-items: center; border-radius: var(--radius-md); padding-inline: 0.5rem; font-size: var(--text-xs); font-weight: 500; color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); }
.sidebar-menu { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.sidebar-menu-item { position: relative; }
.sidebar-menu-button {
  display: flex; width: 100%; align-items: center; gap: 0.5rem; overflow: hidden; border-radius: var(--radius-md); padding: 0.5rem; text-align: left;
  font-size: var(--text-sm); height: 2rem; outline: none; color: inherit; text-decoration: none; background: transparent; border: 0; cursor: pointer;
  transition: width 150ms, height 150ms, padding 150ms, background-color var(--duration) var(--ease);
}
@media (pointer: coarse) { .sidebar-menu-button { height: 2.75rem; } }
.sidebar-menu-button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-menu-button:hover, .sidebar-menu-button:active, .sidebar-menu-button[aria-expanded="true"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.sidebar-menu-button:focus-visible { box-shadow: 0 0 0 2px var(--sidebar-ring); }
.sidebar-menu-button[data-active="true"], .sidebar-menu-button[aria-current="page"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500; }
.sidebar-menu-button[data-size="lg"] { height: 3rem; font-size: var(--text-sm); }
.sidebar-menu-badge { pointer-events: none; position: absolute; right: 0.25rem; top: 50%; translate: 0 -50%; display: flex; height: 1.25rem; min-width: 1.25rem; align-items: center; justify-content: center; border-radius: var(--radius-md); padding-inline: 0.25rem; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--sidebar-foreground); user-select: none; }
.sidebar-separator { margin-inline: 0.5rem; width: auto; height: 1px; background: var(--sidebar-border); }
.sidebar-inset { position: relative; display: flex; width: 100%; min-width: 0; flex: 1; flex-direction: column; background: var(--background); }

/* ---------- CHANGED (drive v3, docs/review/drive-v3.md): the home's v3 look ----------
   Dark mode: the raised surfaces are frosted glass, after v2.css's recipe (tokens.css --glass*): a light from above inside
   a white hairline with a brighter top edge, on an opaque gunmetal base, so nothing needs a backdrop blur and text
   contrast never depends on what is behind. Light mode keeps shadcn's plain surfaces (--glass is none there).
   Badges take v3's chip: a white wash over whatever they sit on, so a rule still reads on a glass card. */
.card, .dialog, .sheet, .menu, .toast, .alert { background-image: var(--glass); border-color: var(--glass-edge); border-top-color: var(--glass-top); }
.dialog, .sheet { background-color: var(--card); }
.badge[data-variant="secondary"] { background: var(--chip); }
/* Red text at 4.5:1 or more on its own wash; a red badge's label in ink on the dark theme's light red (white was 2.89:1). */
.badge[data-variant="destructive"] { color: var(--on-destructive); }
.menu-item[data-variant="destructive"]:is(:focus, [data-highlighted]) { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive-text); }
.menu-item[data-variant="destructive"]:is(:focus, [data-highlighted]) > .icon { color: var(--destructive-text); }
.alert[data-variant="destructive"] .alert-description { color: var(--destructive-text); }
@media (prefers-contrast: more) {
  .card, .dialog, .sheet, .menu, .toast, .alert { background-image: none; border-color: var(--border); }
}