/* ===========================
 * Chip (Selectable Filter Tag) Component Styles
 * ===========================
 * A small toggle button that looks like a Tag but carries an on/off
 * pressed state. Off = the Tag SECONDARY look (light tinted bg + border).
 * On = the Tag PRIMARY look (solid). Multi-select rows and standalone
 * toggles only — exclusive single-select is Button Group's job.
 *
 * Markup:  <button type="button" class="chip" aria-pressed="false">
 *            <i class="chip-icon …" aria-hidden="true"></i>   (optional)
 *            <span class="chip-text">Label</span>
 *            <span class="chip-count">12</span>               (optional)
 *          </button>
 * Row:     <div class="chip-group" role="group" aria-label="…">…</div>
 *
 * CSS-only — no JS engine. Consumers wire their own clicks and flip
 * aria-pressed; EVERY visual keys off [aria-pressed="true"] (the
 * Button Group [aria-checked] precedent), so ARIA state and paint
 * can never drift apart.
 *
 * Variants: .chip (neutral off → brand solid on) · .chip-error
 * (error-tinted off → error solid on — the "Þarf aðgerð" recipe).
 * Sizes: md 24px (default) · sm 18px (.chip-sm) · lg 32px (.chip-lg)
 * — Tag metrics verbatim.
 *
 * Paint values are copied from the tags.css secondary/primary pairs so
 * chips sit visually flush beside static tags. Deliberately a SIBLING
 * root, not a .tag modifier — static tags must never become interactive
 * by accident (the .lab-res precedent). Zero new design tokens.
 *
 * CASCADE CONTRACT (do not reorder):
 * light base → light error → dark base → dark error → disabled LAST.
 * Each dark rule mirrors its light counterpart +1 specificity via the
 * [data-theme="dark"] prefix; the error section always follows the base
 * section so equal-specificity ties resolve to the variant; the disabled
 * block sits last so its ties with pressed rules resolve to disabled.
 * Spec: docs/specs/2026-07-21-chip-design.md (LSH-194)
 * =========================== */


/* ─── 1. Base Chip (md, off state) ─── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-feature-settings: 'lnum', 'tnum';
  white-space: nowrap;
  box-sizing: border-box;
  /* md size defaults — Tag metrics */
  height: 24px;
  padding: 0 8px;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  border-radius: var(--radius-xs);
  /* off paint = tag-secondary-neutral pair */
  border: 1px solid var(--neutral-brand-300);
  background-color: var(--neutral-brand-50);
  color: var(--neutral-brand-600);
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  /* Targeted transition — NOT `all`, so the focus ring snaps on. */
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out,
              border-color 0.15s ease-in-out;
}


/* ─── 2. Elements ─── */

.chip-text {
  display: inline-flex;
  align-items: center;
}

.chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: inherit;
}

/* Live count — consumers put ONLY the number in the span; the "·"
   separator is CSS-supplied. Inherits the base 'tnum' so counts
   don't jitter as they update. */
.chip-count {
  display: inline-flex;
  align-items: center;
}

.chip-count::before {
  content: "· ";
  white-space: pre;
}


/* ─── 3. Sizes: sm (18px) · lg (32px) — Tag metrics ─── */

.chip.chip-sm {
  height: 18px;
  padding: 1px 8px;
}

.chip.chip-sm .chip-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

.chip.chip-lg {
  height: 32px;
  padding: 6px 8px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.chip.chip-lg .chip-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
}


/* ─── 4. Group Row ─── */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1);
}


/* ─── 5. States: base variant (light) ─── */

/* Off hover — one step deeper (the neutral-darker pair's bg). */
.chip:hover:not(:disabled):not([aria-pressed="true"]) {
  background-color: var(--neutral-brand-100);
}

/* On — tag-primary-brand pair. */
.chip[aria-pressed="true"] {
  background-color: var(--brand-200);
  border-color: var(--brand-200);
  color: var(--brand-800);
}

.chip[aria-pressed="true"]:hover:not(:disabled) {
  background-color: var(--brand-300);
  border-color: var(--brand-300);
}

/* Focus — standard LSH-ds two-layer ring (Button Group precedent). */
.chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--brand-500);
}


/* ─── 6. Error variant (light) — the "Þarf aðgerð" recipe ─── */

/* Off = tag-secondary-error pair (red-tinted even when off). */
.chip-error {
  background-color: var(--error-25);
  border-color: var(--error-300);
  color: var(--error-700);
}

.chip-error:hover:not(:disabled):not([aria-pressed="true"]) {
  background-color: var(--error-50);
}

/* On = tag-primary-error pair. */
.chip-error[aria-pressed="true"] {
  background-color: var(--error-600);
  border-color: var(--error-600);
  color: var(--error-25);
}

/* Hover deepens 600 → 700 (.btn-primary-error hover precedent). */
.chip-error[aria-pressed="true"]:hover:not(:disabled) {
  background-color: var(--error-700);
  border-color: var(--error-700);
}


/* ─── 7. Dark Mode: base variant ─── */

[data-theme="dark"] .chip {
  background-color: var(--neutral-800);
  border-color: var(--neutral-700);
  color: var(--neutral-300);
}

[data-theme="dark"] .chip:hover:not(:disabled):not([aria-pressed="true"]) {
  background-color: var(--neutral-700);
}

/* Dark pressed chips do NOT deepen on hover — brand-700/error-600 fail
   AA against the light on-state text (4.41 / 4.10, gate-measured), and
   brand-900 melts into the dark canvas. Off-chips still hover-darken.
   The :hover rules below are deliberate HOLDS, not omissions: without
   them the light on-hover rules (0,4,0) out-specify the dark on rules
   (0,3,0) and would paint the light hover colors in dark mode. */
[data-theme="dark"] .chip[aria-pressed="true"],
[data-theme="dark"] .chip[aria-pressed="true"]:hover:not(:disabled) {
  background-color: var(--brand-800);
  border-color: var(--brand-800);
  color: var(--brand-200);
}


/* ─── 8. Dark Mode: error variant ─── */

[data-theme="dark"] .chip-error {
  background-color: var(--error-950);
  border-color: var(--error-800);
  color: var(--error-300);
}

[data-theme="dark"] .chip-error:hover:not(:disabled):not([aria-pressed="true"]) {
  background-color: var(--error-900);
}

[data-theme="dark"] .chip-error[aria-pressed="true"],
[data-theme="dark"] .chip-error[aria-pressed="true"]:hover:not(:disabled) {
  background-color: var(--error-700);
  border-color: var(--error-700);
  color: var(--error-100);
}


/* ─── 9. Disabled — MUST STAY LAST (see cascade contract) ─── */
/* Family-standard disabled (bg-disabled / fg-disabled / transparent
   border). Both selectors are needed: the plain one out-orders the
   light pressed rules at equal specificity; the dark companion
   out-orders the (0,3,0) dark pressed rules. Disabled beats pressed. */

.chip:disabled,
[data-theme="dark"] .chip:disabled {
  background-color: var(--bg-disabled);
  border-color: transparent;
  color: var(--fg-disabled);
  cursor: not-allowed;
}