/* ui-kit: estilos base. Va después de tokens.css y antes del CSS de la app.

   Reglas (detalle en docs/reglas.md):
   - Todo con tokens: acá no hay un solo color literal. Un tema sólo redefine tokens.
   - Hover parejo: lo clickeable con sombra se levanta (--lift, --shadow-*-hover);
     lo que no tiene sombra cambia fondo o borde, y nunca gana una.
   - Nada de franjas de color al costado de una card o de algo dentro de ella: el
     estado se marca con ícono, fondo teñido o borde parejo.
   - El contenido de una card respeta su margen interno (--pad), tablas incluidas.
   - Sin desplazamiento lateral mientras haya lugar: las tablas pasan a filas
     apiladas cuando su card es angosta. */

:root {
  --b: var(--bw) solid var(--line);
  --b-sm: var(--bw-sm) solid var(--line);
  --container: 1200px;
  --measure: 66ch;
  --gutter: clamp(16px, 3vw, 32px);
  --tint: 12%;                        /* fondo de los avisos: la señal mezclada en paper */
}

/* ── Base ──────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code, .mono { font-family: var(--mono); }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-spacing);
  text-transform: var(--head-transform);
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 0 0 16px; }
h2 { font-size: 1.2rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 16px 0 8px; }
h4 { font-size: 0.95rem; margin: 12px 0 6px; }
p { margin: 0 0 10px; }
/* La página ocupa todo el ancho; el texto corrido, una línea legible */
p, dd, li, .prose { max-width: var(--measure); }
.muted, .hint { color: var(--muted); }
.hint { font-size: 0.9rem; }
small { font-size: 0.85em; }
.label {
  display: block;
  font: 600 0.75rem var(--sans);
  text-transform: var(--label-transform);
  letter-spacing: var(--label-spacing);
  color: var(--muted);
  margin-bottom: 4px;
}
.icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Estructura: barra arriba ──────────────────────────────────────────────── */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page > main { flex: 1; padding-block: 28px 56px; min-width: 0; }

.topbar { background: var(--bar-bg); color: var(--bar-fg); border-bottom: var(--b); }
.topbar-row { display: flex; align-items: center; gap: 12px 24px; min-height: 56px; flex-wrap: wrap; padding-block: 8px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: var(--head-weight) 1.15rem var(--head);
  letter-spacing: var(--head-spacing);
  text-transform: var(--head-transform);
  color: inherit;
  text-decoration: none;
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a, .nav .link-button {
  padding: 6px 12px;
  border: var(--bw) solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  color: inherit;
  text-decoration: none;
}
.nav a:hover, .nav .link-button:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.nav a.active, .nav a[aria-current="page"] { background: var(--nav-active-bg); color: var(--nav-active-fg); }
.topbar-end { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 0.92rem; }
.topbar-end .who { opacity: 0.8; }
/* Links y botones sueltos de la barra (cuenta, salir): sin subrayado, con el hover de .nav */
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: none; color: inherit;
  font: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.nav-link:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.inline-form { display: inline; margin: 0; }
@media (max-width: 640px) {
  .topbar-end .who { display: none; }
}

.footer { border-top: var(--b-sm); color: var(--muted); font-size: 0.85rem; padding-block: 16px; }

/* ── Estructura: barra lateral (en ≤820px pasa arriba) ─────────────────────── */

.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.side {
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px 16px;
  position: sticky; top: 0; height: 100vh;
  background: var(--bar-bg); color: var(--bar-fg);
  border-right: var(--b);
}
.side .nav { flex-direction: column; flex: 0; }
.side .foot { margin-top: auto; font-size: 0.8rem; opacity: 0.8; }
.shell > main { padding: 32px var(--gutter) 64px; min-width: 0; }
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-right: 0; border-bottom: var(--b); }
  .side .nav { flex-direction: row; margin-left: auto; }
  .side .foot { display: none; }
}

/* ── Bloques ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--paper);
  border: var(--b);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
  margin: 0 0 20px;
  min-width: 0;
}
.card > :last-child { margin-bottom: 0; }
.card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.card-title > * { margin: 0; }
a.card { display: block; color: inherit; text-decoration: none; transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease; }
a.card:hover { transform: var(--lift); box-shadow: var(--shadow-hover); border-color: var(--line-hover); }

.on-color, .yellow, .blue, .green, .pink, .lilac, .red, .orange { color: var(--on-color); }
:is(.on-color, .yellow, .blue, .green, .pink, .lilac, .red, .orange) :is(.muted, .hint, .label) { color: var(--on-color-muted); }
.yellow { background: var(--yellow); }
.blue { background: var(--blue); }
.green { background: var(--green); }
.pink { background: var(--pink); }
.lilac { background: var(--lilac); }
.red { background: var(--red); }
.orange { background: var(--orange); }
.paper { background: var(--paper); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { margin: 0 0 4px; }
.page-head p { margin: 0; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions form { margin: 0; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1 1 220px; min-width: 0; }
.stack { display: grid; gap: 16px; }
.empty { text-align: center; padding-block: 28px; }
.empty > * { margin-inline: auto; }

/* ── Chips, etiquetas y puntos de estado ───────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 10px;
  border: var(--b-sm);
  border-radius: var(--chip-radius);
  font: 600 0.8rem var(--sans);
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--paper);
  color: var(--ink);
  vertical-align: middle;
}
.chip:is(.yellow, .blue, .green, .pink, .lilac, .red, .orange) { color: var(--on-color); border-color: var(--chip-line); }

/* Etiqueta chica de contorno. Con señal, el borde y el ícono toman el color;
   el texto sigue en tinta, así se lee igual en todos los temas. */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--tag-radius);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
  white-space: nowrap;
  vertical-align: middle;
}
.tag:is(.ok, .warn, .bad, .info) { color: var(--ink); }
.tag.ok { border-color: var(--ok); }
.tag.warn { border-color: var(--warn); }
.tag.bad { border-color: var(--bad); }
.tag.info { border-color: var(--info); }
.tag.ok .icon { color: var(--ok); }
.tag.warn .icon { color: var(--warn); }
.tag.bad .icon { color: var(--bad); }
.tag.info .icon { color: var(--info); }

/* Punto de estado: el color va en el punto, el texto al lado en tinta.
   .strong le suma un anillo para el nivel más grave de cada color, así dos
   niveles con el mismo color no dependen sólo del color. */
.status { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); transform: translateY(-1px); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.dot.info { background: var(--info); }
.dot.strong { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px currentColor; }
.dot.strong.ok { color: var(--ok); }
.dot.strong.warn { color: var(--warn); }
.dot.strong.bad { color: var(--bad); }

/* ── Botones ───────────────────────────────────────────────────────────────── */

.btn, :where(input[type="submit"], input[type="button"], button[type="submit"]:not([class])) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px;
  padding: 7px 16px;
  font: 600 0.95rem var(--sans);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bw) solid var(--btn-line);
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.08s ease, border-color 0.08s ease;
}
.btn:hover, :where(input[type="submit"], input[type="button"], button[type="submit"]:not([class])):hover {
  transform: var(--lift);
  box-shadow: var(--shadow-sm-hover);
  background: color-mix(in srgb, var(--btn-bg) 90%, var(--btn-fg));
  border-color: var(--line-hover);
}
.btn:active { transform: var(--press); box-shadow: var(--shadow-press); }
.btn.primary, :where(input[type="submit"], button[type="submit"]:not([class])) {
  background: var(--primary-bg);
  color: var(--primary-fg);
  border-color: var(--btn-line);
  border-color: color-mix(in srgb, var(--primary-bg) 70%, var(--btn-line));
}
.btn.primary:hover, :where(input[type="submit"], button[type="submit"]:not([class])):hover {
  background: color-mix(in srgb, var(--primary-bg) 88%, var(--primary-fg));
}
.btn.small { min-height: 30px; padding: 3px 11px; font-size: 0.85rem; }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.link-button {
  border: 0; background: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── Formularios ───────────────────────────────────────────────────────────── */

.field { display: grid; gap: 4px; margin-bottom: 16px; }
.field > label:not(.check), .field > .label-text { font-weight: 600; font-size: 0.92rem; }
.field .hint { margin: 0; }
.field-error { color: var(--bad); font-size: 0.88rem; font-weight: 600; margin: 0; }

.input,
:where(input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"], [type="url"], [type="tel"], [type="date"], :not([type])), select, textarea) {
  width: 100%;
  min-height: 38px;
  padding: 7px 11px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: var(--b);
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--line) 60%, var(--muted));
  border-radius: var(--radius-sm);
}
textarea { min-height: 96px; resize: vertical; }
:where(input, select, textarea):hover { border-color: var(--line-hover); }
:where(input, select, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.check { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 400; cursor: pointer; }
.check input { margin: 4px 0 0; accent-color: var(--primary-bg); }
fieldset { border: none; padding: 0; margin: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.filters > :is(input, select) { width: auto; }
.filters > input[type="search"] { flex: 1 1 240px; }

/* ── Tablas ────────────────────────────────────────────────────────────────── */
/* <div class="table-wrap"><table class="table">…</table></div>. Como hija
   directa de una .card, la caja llega hasta el borde de la card y la tabla pone
   el margen de la card (--pad) en sus celdas de los extremos: las líneas de las
   filas llegan al borde, el texto no. Cuando la caja queda angosta (container
   query: el ancho de la caja, no el de la pantalla), una tabla .stackable apila
   cada fila; sus celdas llevan data-label con el nombre de la columna (la primera y las
   .span-row van en su propio renglón, sin rótulo). */

.table-wrap { container-type: inline-size; min-width: 0; }
.card > .table-wrap { margin-inline: calc(-1 * var(--pad)); }
.card > .table-wrap:first-child { margin-top: calc(-1 * var(--pad)); }
.card > .table-wrap:last-child { margin-bottom: calc(-1 * var(--pad)); }
.card > .table-wrap:not(:last-child) { margin-bottom: 12px; }

.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th, .table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.table th {
  font-size: 0.75rem; font-weight: 600; color: var(--muted);
  text-transform: var(--label-transform); letter-spacing: var(--label-spacing);
  vertical-align: bottom;
}
.table :is(th, td):first-child { padding-left: var(--pad); }
.table :is(th, td):last-child { padding-right: var(--pad); }
.table thead th { padding-top: 12px; }
.table tbody tr:last-child td { border-bottom: 0; padding-bottom: 12px; }
.table .num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.table td.num { white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--hover-bg) 50%, transparent); }
.table a { font-weight: 600; }
/* Fuera de una card, la tabla no necesita el margen del borde */
:not(.card) > .table-wrap > .table :is(th, td):first-child { padding-left: 0; }
:not(.card) > .table-wrap > .table :is(th, td):last-child { padding-right: 0; }
.card > .table-wrap:not(:first-child) > .table thead th { padding-top: 8px; }

@container (max-width: 560px) {
  .table.stackable, .table.stackable tbody { display: block; }
  .table.stackable thead { display: none; }
  .table.stackable tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px var(--pad); border-bottom: 1px solid var(--line-soft); }
  .table.stackable tbody tr:last-child { border-bottom: 0; }
  .table.stackable tr td:nth-child(n) { display: block; padding: 0; border: 0; background: none; }
  /* La primera celda, y las .span-row, ocupan su propio renglón (sin rótulo) */
  .table.stackable td:is(:first-child, .span-row) { grid-column: 1 / -1; }
  .table.stackable td.num { text-align: left; }
  :not(.card) > .table-wrap > .table.stackable tr { padding-inline: 0; }
  .table.stackable td[data-label]:not(:first-child)::before {
    content: attr(data-label) ": ";
    color: var(--muted); font-family: var(--sans); font-size: 0.8rem;
  }
}

/* ── Avisos ────────────────────────────────────────────────────────────────── */
/* Fondo teñido con la señal y borde parejo del mismo tono, con ícono. Nunca
   una franja de color al costado. */

.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.alert > .icon { margin-top: 0.2em; }
.alert > .alert-body { flex: 1; min-width: 0; }
.alert > .alert-body > :last-child { margin-bottom: 0; }
.alert.ok { background: color-mix(in srgb, var(--ok) var(--tint), var(--paper)); border-color: color-mix(in srgb, var(--ok) 55%, var(--paper)); }
.alert.warn { background: color-mix(in srgb, var(--warn) var(--tint), var(--paper)); border-color: color-mix(in srgb, var(--warn) 55%, var(--paper)); }
.alert.bad { background: color-mix(in srgb, var(--bad) var(--tint), var(--paper)); border-color: color-mix(in srgb, var(--bad) 55%, var(--paper)); }
.alert.info { background: color-mix(in srgb, var(--info) var(--tint), var(--paper)); border-color: color-mix(in srgb, var(--info) 55%, var(--paper)); }
.alert.ok > .icon { color: var(--ok); }
.alert.warn > .icon { color: var(--warn); }
.alert.bad > .icon { color: var(--bad); }
.alert.info > .icon { color: var(--info); }
.alert-close {
  flex: none; display: inline-grid; place-items: center;
  width: 26px; height: 26px; margin: -3px -6px -3px 0;
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--muted); cursor: pointer;
}
.alert-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: var(--ink); }

/* ── Cifras ────────────────────────────────────────────────────────────────── */
/* .tiles: grilla de cifras que suma columnas a medida que entran, sin dejar una
   sola en la última fila (3+1 pasa a 2+2). */

.tiles, .grid {
  --gap: 16px;
  --c: 1;
  display: flex; flex-wrap: wrap; gap: var(--gap);
  container-type: inline-size;
  margin: 0 0 20px;
}
:is(.tiles, .grid) > * {
  flex: 1 1 calc((100% - (var(--c) - 1) * var(--gap)) / var(--c) - 0.5px);
  min-width: 0;
  margin: 0;
}
.tile {
  display: grid; gap: 2px; align-content: start;
  background: var(--paper);
  border: var(--b);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px var(--pad);
}
.tile-label { font-size: 0.82rem; color: var(--muted); }
.tile-value { font: 600 1.35rem/1.25 var(--num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-value small { font: 400 0.8rem var(--sans); color: var(--muted); }
/* En una cifra el estado sí puede partirse: la caja es angosta y no hay fila que se apile */
.tile-value .status { white-space: normal; }

/* .tiles: dos columnas desde los 300px, después una cada ~180px */
@container (min-width: 300px) { .tiles > * { --c: 2; } }
@container (min-width: 572px) { .tiles > * { --c: 3; } }
@container (572px <= width < 768px) { .tiles > :nth-child(3n+1):last-child, .tiles > :has(+ :nth-child(3n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 768px) { .tiles > * { --c: 4; } }
@container (768px <= width < 964px) { .tiles > :nth-child(4n+1):last-child, .tiles > :has(+ :nth-child(4n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 964px) {
  .tiles > * { --c: 5; }
  .tiles > :nth-child(5n+1):last-child, .tiles > :has(+ :nth-child(5n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); }
}
/* .grid, cards: una columna cada ~280px */
@container (min-width: 576px) { .grid > * { --c: 2; } }
@container (min-width: 872px) { .grid > * { --c: 3; } }
@container (872px <= width < 1168px) { .grid > :nth-child(3n+1):last-child, .grid > :has(+ :nth-child(3n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); } }
@container (min-width: 1168px) {
  .grid > * { --c: 4; }
  .grid > :nth-child(4n+1):last-child, .grid > :has(+ :nth-child(4n+1):last-child) { flex-basis: calc(50% - var(--gap) / 2 - 0.5px); }
}

/* ── Paginación, detalles ──────────────────────────────────────────────────── */

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
details > summary { cursor: pointer; font-weight: 600; }
details > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
details[open] > summary { margin-bottom: 8px; }

/* htmx: la región que se está pidiendo se atenúa mientras llega la respuesta */
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 0.6; transition: opacity 0.2s; }

/* ── Gráficos ──────────────────────────────────────────────────────────────── */

.chart { width: 100%; height: 300px; }
.chart.small { height: 200px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.82rem; color: var(--muted); }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* ── Selector de apariencia ────────────────────────────────────────────────── */
/* <details class="prefs"> con un form: en la barra de arriba baja hacia la
   derecha; en la barra lateral sube desde abajo. Sin JS es un form con botón
   "Aplicar"; con JS se aplica al cambiar (ui-kit/appearance.js). */

.prefs { position: relative; }
.prefs > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: var(--bw) solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.92rem;
  cursor: pointer;
}
.prefs > summary::-webkit-details-marker { display: none; }
.prefs > summary:hover, .prefs[open] > summary { background: color-mix(in srgb, currentColor 10%, transparent); text-decoration: none; }
.prefs > form {
  position: absolute; z-index: 20;
  top: 100%; right: 0; margin-top: 6px;
  width: min(300px, calc(100vw - 32px));
  display: grid; gap: 12px;
  padding: 12px;
  background: var(--paper); color: var(--ink);
  border: var(--b);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 0.92rem;
}
.side .prefs { margin-top: auto; }
.side .prefs > form { top: auto; bottom: 100%; left: 0; right: auto; margin: 0 0 6px; }
@media (max-width: 820px) {
  .side .prefs { margin-top: 0; }
  .side .prefs > form { top: 100%; bottom: auto; left: auto; right: 0; margin: 6px 0 0; }
}
.prefs legend { font: 600 0.72rem var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; padding: 0; }
.prefs .pick { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; }
.prefs .pick:hover { background: var(--hover-bg); }
.prefs .pick input { margin-top: 4px; accent-color: var(--focus); }
.prefs .pick span { display: grid; line-height: 1.3; }
.prefs .pick small { color: var(--muted); font-size: 0.78rem; }
.prefs .pick:has(input:checked) { background: var(--canvas); }
.segmented { display: flex; border: var(--b); border-radius: var(--radius-sm); overflow: hidden; }
.segmented label { flex: 1; position: relative; text-align: center; cursor: pointer; margin: 0; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 5px 4px; font-size: 0.82rem; font-weight: 600; }
.segmented label + label { border-left: var(--b); }
.segmented label:hover span { background: var(--hover-bg); }
.segmented input:checked + span { background: var(--nav-active-bg); color: var(--nav-active-fg); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }