/*
  JudieAI UI components. Each block styles one partial in app/views/components
  and appears in the /playground gallery. Same rule as application.css: tokens
  only, no literal values.
*/

/* ---------- Button ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jd-space-xs);
  min-height: var(--jd-landing-button-height);
  padding: var(--jd-space-none) var(--jd-space-control-x);
  border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-color-transparent);
  border-radius: var(--jd-radius-pill);
  font-weight: var(--jd-font-weight-bold);
  line-height: var(--jd-font-leading-ui);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--jd-motion-duration-fast) var(--jd-motion-easing-standard), background-color var(--jd-motion-duration-base) var(--jd-motion-easing-standard), border-color var(--jd-motion-duration-base) var(--jd-motion-easing-standard);
}
.button:hover { transform: var(--jd-motion-lift); }
.button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: var(--jd-opacity-dim); transform: none; }
.button--primary { background: var(--jd-brand); color: var(--jd-brand-fg); }
.button--quiet { background: var(--jd-color-transparent); color: var(--jd-brand); border-color: var(--jd-brand); }
.button--band { background: var(--jd-band-button-bg); color: var(--jd-band-button-fg); }
.button--band-quiet { background: var(--jd-color-transparent); color: var(--jd-band-fg); border-color: var(--jd-band-line); }
.button--small { min-height: var(--jd-landing-button-height-small); padding-inline: var(--jd-space-control-x-small); font-size: var(--jd-font-size-small); }

/* ---------- Pill (flag / ok / neutral) ---------- */
.pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--jd-space-xs);
  padding: var(--jd-space-xxs) var(--jd-space-sm);
  font-family: var(--jd-font-mono);
  font-size: var(--jd-font-size-label);
  letter-spacing: var(--jd-font-tracking-pill);
  text-transform: uppercase;
  color: var(--jd-fg);
  background: var(--jd-flag-soft);
  border-radius: var(--jd-radius-pill);
}
.pill--ok { background: var(--jd-ok-soft); }
.pill--neutral { background: var(--jd-sunk); }
.pill__dot { width: var(--jd-size-pill-dot); height: var(--jd-size-pill-dot); background: var(--jd-flag); }
.pill--ok .pill__dot { background: var(--jd-ok); }
.pill--neutral .pill__dot { background: var(--jd-muted); }

/* ---------- Status (line outcome) ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--jd-space-xs);
  padding: var(--jd-space-hair) var(--jd-space-sm);
  border-radius: var(--jd-radius-pill);
  font-family: var(--jd-font-mono);
  font-size: var(--jd-font-size-micro);
  letter-spacing: var(--jd-font-tracking-pill);
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-color-transparent);
}
.status--match { background: var(--jd-ok-soft); color: var(--jd-ok-text); }
.status--adjust { background: var(--jd-correction); color: var(--jd-fg); }
.status--review { border-color: var(--jd-review); color: var(--jd-flag-text); }

/* ---------- Card ---------- */
.card {
  min-width: var(--jd-space-none);
  display: grid;
  gap: var(--jd-space-sm);
  align-content: start;
  padding: var(--jd-space-lg);
  background: var(--jd-surface);
  border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line);
  border-radius: var(--jd-radius-tile);
}
.card--sunk { background: var(--jd-sunk); }
.card__title { font-size: var(--jd-font-size-h3); }
.card__body { color: var(--jd-muted); }

/* ---------- Exception card (dog-ear flag) ---------- */
.exception {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--jd-space-sm);
  align-content: start;
  padding: var(--jd-space-lg);
  background: var(--jd-surface);
  border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line);
  border-radius: var(--jd-radius-tile);
}
.exception::after {
  content: "";
  position: absolute;
  top: var(--jd-space-none);
  right: var(--jd-space-none);
  width: var(--jd-size-flag-corner);
  height: var(--jd-size-flag-corner);
  background: linear-gradient(to bottom left, var(--jd-bg) var(--jd-size-half), var(--jd-flag) var(--jd-size-half));
}
.exception__amount { font-family: var(--jd-font-mono); font-size: var(--jd-font-size-amount); font-variant-numeric: var(--jd-font-numeric); }
.exception__why { font-size: var(--jd-font-size-small); color: var(--jd-muted); }

/* ---------- Flash ---------- */
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--jd-space-md);
  padding: var(--jd-space-md) var(--jd-space-lg);
  border-left: var(--jd-border-rule) var(--jd-border-solid) var(--jd-ok);
  border-radius: var(--jd-space-none) var(--jd-radius-tile) var(--jd-radius-tile) var(--jd-space-none);
  background: var(--jd-ok-soft);
}
.flash--alert { border-left-color: var(--jd-flag); background: var(--jd-flag-soft); }
.flash__content { flex: auto; max-width: var(--jd-size-measure); }
.close-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--jd-landing-toggle-icon);
  height: var(--jd-landing-toggle-icon);
  padding: var(--jd-space-none);
  background: none;
  border: none;
  color: var(--jd-muted);
  cursor: pointer;
}
.close-button:hover { color: var(--jd-fg); }
.close-button svg { width: var(--jd-size-full); height: var(--jd-size-full); fill: none; stroke: currentColor; stroke-width: var(--jd-icon-stroke); }

/* ---------- Field ---------- */
.field { display: grid; gap: var(--jd-space-xs); min-width: var(--jd-space-none); margin: var(--jd-space-none); padding: var(--jd-space-none); border: none; }
.field__label { font-size: var(--jd-font-size-small); font-weight: var(--jd-font-weight-bold); }
.field__hint { font-size: var(--jd-font-size-caption); color: var(--jd-muted); }
.field__error { font-size: var(--jd-font-size-caption); color: var(--jd-flag-text); }
.field__control {
  width: var(--jd-size-full);
  min-height: var(--jd-landing-input-height);
  padding: var(--jd-space-sm) var(--jd-space-md);
  background: var(--jd-surface);
  color: var(--jd-fg);
  border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line);
  border-radius: var(--jd-radius-tile);
}
textarea.field__control { min-height: var(--jd-landing-textarea-min); resize: vertical; }
.field__control:focus-visible { outline-color: var(--jd-accent); border-color: var(--jd-accent); }
.field__control[aria-invalid="true"] { border-color: var(--jd-flag); }
.field__control:disabled { cursor: not-allowed; opacity: var(--jd-opacity-dim); }

/* ---------- Logo mark ----------
   Geometry lives once in the hidden SVG library (layouts/_svg_library).
   Each instance picks a colourway by setting --mark-stem / --mark-fold / --mark-dot. */
.svg-library { position: absolute; width: var(--jd-space-none); height: var(--jd-space-none); overflow: hidden; }
.mark { aspect-ratio: var(--jd-mark-aspect); width: var(--jd-size-auto); display: block; flex: none; }
.mark__stem { fill: var(--mark-stem); }
.mark__fold { fill: var(--mark-fold); }
.mark__dot { fill: var(--mark-dot); }
.mark--two-tone { --mark-stem: var(--jd-mark-two-tone-stem); --mark-fold: var(--jd-mark-two-tone-fold); --mark-dot: var(--jd-mark-two-tone-dot); }
.mark--one-ink { --mark-stem: var(--jd-mark-ink); --mark-fold: var(--jd-mark-ink); --mark-dot: var(--jd-mark-ink); }
.mark--on-dark { --mark-stem: var(--jd-mark-dark-stem); --mark-fold: var(--jd-mark-dark-fold); --mark-dot: var(--jd-mark-dark-dot); }
.mark--reversed { --mark-stem: var(--jd-mark-reversed); --mark-fold: var(--jd-mark-reversed); --mark-dot: var(--jd-mark-reversed); }
.mark--themed { --mark-stem: var(--jd-brand); --mark-fold: var(--jd-flag); --mark-dot: var(--jd-patch); }
.mark--small { height: var(--jd-size-mark-small); }
.mark--medium { height: var(--jd-size-mark-medium); }
.mark--large { height: var(--jd-size-mark-large); }
.mark--xlarge { height: var(--jd-size-mark-xlarge); }
.mark--hero { height: var(--jd-size-mark-hero); }

/* ---------- Lockup (outlined wordmark; fills follow the theme) ---------- */
.lockup { height: var(--jd-landing-lockup-height); width: var(--jd-size-auto); display: block; }
.lockup--large { height: var(--jd-size-lockup-hero); }
.lockup__stem, .lockup__word { fill: var(--jd-brand); }
.lockup__fold { fill: var(--jd-flag); }
.lockup__dot { fill: var(--jd-patch); }
.lockup--on-brand .lockup__stem, .lockup--on-brand .lockup__word { fill: var(--jd-hero-fg); }

/* ---------- Specimen grounds (for marks and lockups) ---------- */
.specimen {
  display: grid;
  place-items: center;
  min-height: var(--jd-size-spec-min-small);
  padding: var(--jd-space-lg);
  border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line);
  border-radius: var(--jd-radius-tile);
  background: var(--jd-ground-light);
}
.specimen--light { background: var(--jd-ground-light); }
.specimen--dark { background: var(--jd-ground-dark); }
.specimen--brand { background: var(--jd-ground-brand); }
.specimen--page { background: var(--jd-bg); }

/* ---------- Hem (pixel sprites) ----------
   Scale only by whole numbers; always pixelated. */
.sprite { image-rendering: pixelated; image-rendering: crisp-edges; display: block; flex: none; }
.sprite--small { width: var(--jd-size-sprite-native-small); height: var(--jd-size-sprite-native-small); }
.sprite--medium { width: var(--jd-size-sprite-native-medium); height: var(--jd-size-sprite-native-medium); }
.sprite--large { width: var(--jd-size-sprite-native-large); height: var(--jd-size-sprite-native-large); }
.sprite--enlarged { width: var(--jd-size-sprite-enlarged); height: var(--jd-size-sprite-enlarged); }
.sprite--chat { width: var(--jd-size-hem-chat); height: var(--jd-size-hem-chat); }
.hem-live { position: relative; width: var(--jd-size-hem-hero); aspect-ratio: var(--jd-size-square); animation: var(--jd-motion-breathe); }
.hem-live img { position: absolute; inset: var(--jd-space-none); width: var(--jd-size-full); height: var(--jd-size-full); }
.hem-live .hem-live__blink { opacity: var(--jd-opacity-hidden); animation: var(--jd-motion-blink); }
.hem-state { display: grid; justify-items: center; gap: var(--jd-space-xs); text-align: center; }
.hem-state__name { font-family: var(--jd-font-display); font-weight: var(--jd-font-weight-semibold); }

/* ---------- Chat (Hem speaks) ---------- */
.chat { display: grid; gap: var(--jd-space-md); padding: var(--jd-space-lg); background: var(--jd-surface); border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); border-radius: var(--jd-radius-tile); }
.msg { display: flex; align-items: flex-end; gap: var(--jd-space-sm); }
.msg--me { justify-content: flex-end; }
.bubble {
  min-width: var(--jd-space-none);
  padding: var(--jd-space-sm) var(--jd-space-md);
  font-size: var(--jd-font-size-bubble);
  background: var(--jd-sunk);
  border-radius: var(--jd-radius-bubble) var(--jd-radius-bubble) var(--jd-radius-bubble) var(--jd-radius-bubble-tail);
}
.msg--me .bubble { background: var(--jd-brand); color: var(--jd-brand-fg); border-radius: var(--jd-radius-bubble) var(--jd-radius-bubble) var(--jd-radius-bubble-tail) var(--jd-radius-bubble); }

/* ---------- Swatch ---------- */
.swatch { overflow: hidden; background: var(--jd-surface); border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); border-radius: var(--jd-radius-tile); }
.swatch__chip { height: var(--jd-size-swatch-chip); background: var(--chip); border-bottom: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); }
.swatch__meta { display: grid; gap: var(--jd-space-hair); padding: var(--jd-space-md); }
.swatch__name { font-family: var(--jd-font-display); }
.swatch__value { font-family: var(--jd-font-mono); font-size: var(--jd-font-size-code); color: var(--jd-muted); overflow-wrap: anywhere; }
.chip--mulberry { --chip: var(--jd-color-mulberry); }
.chip--oat { --chip: var(--jd-color-oat); }
.chip--clay { --chip: var(--jd-color-clay); }
.chip--lilac { --chip: var(--jd-color-lilac); }
.chip--moss { --chip: var(--jd-color-moss); }
.chip--night { --chip: var(--jd-color-night); }
.chip--bg { --chip: var(--jd-bg); }
.chip--surface { --chip: var(--jd-surface); }
.chip--fg { --chip: var(--jd-fg); }
.chip--brand { --chip: var(--jd-brand); }
.chip--flag { --chip: var(--jd-flag); }
.chip--ok { --chip: var(--jd-ok); }
.chip--patch { --chip: var(--jd-patch); }
.chip--accent { --chip: var(--jd-accent); }

/* ---------- Data table ---------- */
.table-scroll { overflow-x: auto; background: var(--jd-surface); border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); border-radius: var(--jd-radius-tile); }
.data-table { width: var(--jd-size-full); min-width: var(--jd-size-table-min); border-collapse: collapse; font-size: var(--jd-font-size-small); }
.data-table caption { padding: var(--jd-space-md); text-align: left; font-size: var(--jd-font-size-caption); color: var(--jd-muted); caption-side: bottom; }
.data-table th {
  padding: var(--jd-space-md);
  text-align: left;
  font-family: var(--jd-font-mono);
  font-size: var(--jd-font-size-label);
  font-weight: var(--jd-font-weight-medium);
  letter-spacing: var(--jd-font-tracking-wide);
  text-transform: uppercase;
  color: var(--jd-muted);
  border-bottom: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line);
}
.data-table td { padding: var(--jd-space-md); border-bottom: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-family: var(--jd-font-mono); font-variant-numeric: var(--jd-font-numeric); }
.data-table .is-flagged { background: var(--jd-flag-row); }
.data-table .is-flagged td:first-child { position: relative; }
.data-table .is-flagged td:first-child::before {
  content: "";
  position: absolute;
  top: var(--jd-space-none);
  left: var(--jd-space-none);
  width: var(--jd-size-flag-row);
  height: var(--jd-size-flag-row);
  background: linear-gradient(to bottom right, var(--jd-flag) var(--jd-size-half), var(--jd-color-transparent) var(--jd-size-half));
}

/* ---------- Theme toggle (system → light → dark) ---------- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--jd-landing-touch);
  height: var(--jd-landing-touch);
  padding: var(--jd-space-none);
  background: var(--jd-color-transparent);
  border: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line);
  border-radius: var(--jd-radius-pill);
  cursor: pointer;
}
.theme-toggle__icon { width: var(--jd-landing-toggle-icon); height: var(--jd-landing-toggle-icon); }
.theme-toggle__ring { fill: none; stroke: var(--jd-fg); stroke-width: var(--jd-icon-stroke); }
.theme-toggle__half { fill: var(--jd-fg); }
:root[data-theme-pref="light"] .theme-toggle__half { fill: none; }
:root[data-theme-pref="dark"] .theme-toggle__ring { fill: var(--jd-fg); }