/* ==========================================================================
   Page: LATENT Kit · K07 Elements
   Shell (sidebar, toolbar, headings, panels): components/kit-shell.css

   Every specimen reads semantic tokens, so the toolbar can switch
     <main class="elements" data-theme="paper|term" data-density="comfortable|compact">
   States are shown statically with state classes on the specimen:
     .is-hover · .is-focus · .is-active · .is-disabled · .is-loading
     .is-error · .is-success
   Several specimens use box-sizing: content-box so their heights read like
   the spec ("height 40" + 1px border).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme + density scope
   -------------------------------------------------------------------------- */
.elements {
  --hairline-2: var(--surface-sunken);   /* inner row dividers, tag fills */
  --action-hover: #C4E444;
  --action-border: var(--ink);           /* on Paper, lime carries an ink hairline */

  /* Density: control heights, text size, horizontal padding */
  --h-s: 32px;
  --h-m: 40px;
  --h-l: 52px;
  --fs: 15px;
  --pad: 16px;

  background: var(--canvas);
  color: var(--ink);
}

.elements[data-theme="term"] {
  --action-hover: #E2F78A;
  --action-border: var(--action);
}

.elements[data-density="compact"] {
  --h-s: 28px;
  --h-m: 32px;
  --h-l: 40px;
  --fs: 14px;
  --pad: 12px;
}

/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */
.elements-intro .kit-title {
  margin-top: 0;
}

.elements-intro .kit-lead {
  margin-top: 20px;
  text-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Shared page layout: frames, panel rows, specimen rows
   -------------------------------------------------------------------------- */
.spec-frame {
  margin-top: 24px;
}

.panel-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: 16px;
}

.panel-row--form {
  margin-top: 32px;
}

.spec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.spec-row--tight { gap: 8px; }
.spec-row--controls { gap: 6px; font: 500 12px/1 var(--font-mono); }
.spec-row--mono { font: 500 12px/1 var(--font-mono); }

/* State matrices (buttons, every element) */
.spec-matrix {
  width: 100%;
  table-layout: fixed;
}

.spec-matrix thead > tr > * {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-3);
  font: 500 11px/1 var(--font-mono);
  text-align: left;
}

.spec-matrix tbody th {
  border-bottom: 1px solid var(--hairline-2);
  color: var(--ink-2);
  font: 500 12px/1.2 var(--font-mono);
  text-align: left;
}

.spec-matrix td {
  border-bottom: 1px solid var(--hairline-2);
}

.spec-matrix--buttons { min-width: 1060px; }
.spec-matrix--buttons tr > :first-child { width: 110px; }
.spec-matrix--buttons tbody > tr > * { padding: 16px; }

.spec-matrix--states { min-width: 1100px; }
.spec-matrix--states tr > :first-child { width: 130px; }
.spec-matrix--states thead th { padding: 12px; }
.spec-matrix--states tbody th { padding: 14px 16px; }
.spec-matrix--states td { padding: 14px 12px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-spec {
  box-sizing: content-box;
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  width: max-content;
  height: var(--h-m);
  padding: 0 var(--pad);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font: 500 var(--fs)/1 var(--font-sans);
  white-space: nowrap;
  text-underline-offset: 3px;
  outline-offset: 2px;
}

.btn-spec--primary {
  border-color: var(--action-border);
  background: var(--action);
  color: var(--on-action);
  font-weight: 600;
}

.btn-spec--secondary {
  border-color: var(--ink);
  background: var(--surface);
}

.btn-spec--tertiary {
  border-color: var(--hairline);
}

.btn-spec--link {
  padding: 0;
  text-decoration: underline 1px;
}

.btn-spec--destructive {
  border-color: var(--error);
  background: var(--surface);
  color: var(--error);
}

/* hover and active share the hover look */
.btn-spec--primary:is(.is-hover, .is-active)     { background: var(--action-hover); }
.btn-spec--secondary:is(.is-hover, .is-active)   { background: var(--surface-2); }
.btn-spec--tertiary:is(.is-hover, .is-active)    { border-color: var(--ink); }
.btn-spec--ghost:is(.is-hover, .is-active)       { background: var(--hairline-2); }
.btn-spec--link:is(.is-hover, .is-active)        { text-decoration-thickness: 2px; }
.btn-spec--destructive:is(.is-hover, .is-active) { background: var(--error-tint); }

.btn-spec.is-focus    { outline: 2px solid var(--focus); }
.btn-spec.is-active   { transform: translateY(1px); }
.btn-spec.is-disabled { opacity: .4; }

/* Loading: label "Working…" + a short progress line */
.btn-spec.is-loading::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 5px;
  width: 40%;
  height: 2px;
  background: currentColor;
  opacity: .6;
}

/* Sizes (M is the default) */
.btn-spec--s {
  height: var(--h-s);
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
}

.btn-spec--l {
  height: var(--h-l);
  padding: 0 24px;
  font-size: 17px;
}

/* Icon-only button, 44px touch target */
.icon-spec {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: 400 18px/1 var(--font-sans);
}

.icon-spec--bare {
  border: 0;
}

/* Anatomy (fixed Paper colours, independent of the theme switch) */
.anatomy-panel {
  gap: 12px;
}

.anatomy-panel__body {
  display: flex;
  align-items: center;
  gap: 14px;
}

.anatomy-panel__button {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--graphite-900);
  border-radius: var(--radius-control);
  background: var(--lime-400);
  color: var(--graphite-900);
  font: 600 15px/1 var(--font-sans);
  outline: 1px dashed var(--machine-ink);
  outline-offset: 6px;
}

.anatomy-panel__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 12px/1.35 var(--font-mono);
  color: var(--ink-2);
}

/* Do / don't usage cards (stage always on Paper) */
.usage-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.usage-card__stage {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: var(--paper-100);
}

.usage-card__caption {
  padding: 14px 16px;
  font: 400 14px/1.45 var(--font-sans);
}

.usage-card__lime-link {
  color: var(--lime-400);
  font: 600 17px/1 var(--font-sans);
}

.usage-btn {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--graphite-900);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--graphite-900);
  font: 500 15px/1 var(--font-sans);
}

.usage-btn--primary {
  background: var(--lime-400);
  font-weight: 600;
}

.usage-btn--no-border {
  border: 0;
}

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */
.input-states {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-top: 24px;
}

.input-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-state__name {
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3);
}

.input-state__label {
  font: 500 14px/1 var(--font-sans);
}

.input-state__field {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  height: var(--h-m);
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink-3);
  font: 400 var(--fs)/1 var(--font-sans);
  outline-offset: 2px;
}

.input-state__help {
  font: 400 13px/1.35 var(--font-sans);
  color: var(--ink-2);
}

.input-state--hover .input-state__field { border-color: var(--ink-3); }

.input-state--focus .input-state__field {
  border-color: var(--ink);
  color: var(--ink);
  outline: 2px solid var(--focus);
}

.input-state--filled .input-state__field { color: var(--ink); }

.input-state--error .input-state__field { border-color: var(--error); color: var(--ink); }
.input-state--error .input-state__help { color: var(--error); }

.input-state--disabled .input-state__label,
.input-state--disabled .input-state__field { opacity: .45; }
.input-state--disabled .input-state__field { color: var(--ink-2); }

/* Form panels */
.form-panel { gap: 8px; }
.choice-panel { gap: 14px; }
.upload-panel { gap: 12px; }

.composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
}

.composer__input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 var(--fs)/1.5 var(--font-sans);
  resize: vertical;
}

.composer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 400 11px/1 var(--font-mono);
  color: var(--ink-3);
}

.control-spec {
  height: var(--h-m);
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 400 var(--fs)/1 var(--font-sans);
}

.control-spec--date {
  box-sizing: content-box;
}

.elements[data-theme="term"] .control-spec--date {
  color-scheme: dark;
}

.search-spec {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--h-m);
  padding: 0 8px 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.search-spec__icon {
  color: var(--ink-3);
}

.search-spec__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 var(--fs)/1 var(--font-sans);
}

.search-spec__kbd {
  padding: 3px 5px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  font: 500 11px/1 var(--font-mono);
}

/* Checkbox, radio, switch (live) */
.check-spec,
.radio-spec,
.switch-spec {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 var(--fs)/1.3 var(--font-sans);
  text-align: left;
}

.check-spec { gap: 10px; }

.check-spec__box {
  box-sizing: content-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  color: var(--on-action);
  font: 700 13px/1 var(--font-sans);
}

.check-spec[aria-checked="true"] .check-spec__box {
  background: var(--action);
}

.check-spec[aria-checked="true"] .check-spec__box::after {
  content: "✓";
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.radio-spec {
  gap: 8px;
  line-height: 1;
}

.radio-spec__ring {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}

.radio-spec__ring::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.radio-spec[aria-checked="true"] .radio-spec__ring::after {
  background: var(--ink);
}

.switch-spec {
  justify-content: space-between;
  gap: 12px;
}

.switch-spec__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
}

.switch-spec__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ink);
}

.switch-spec[aria-checked="true"] .switch-spec__track { background: var(--action); }
.switch-spec[aria-checked="true"] .switch-spec__knob { left: 19px; }

.choice-panel__note {
  font: 400 12px/1.4 var(--font-mono);
  color: var(--ink-3);
}

/* Segmented + slider (live) */
.segmented-spec {
  display: flex;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.segmented-spec > button {
  flex: 1;
  height: calc(var(--h-m) - 8px);
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: 500 14px/1 var(--font-sans);
}

.segmented-spec > button[aria-checked="true"] {
  border-color: var(--ink);
  background: var(--surface);
}

.seats-label {
  display: flex;
  justify-content: space-between;
  font: 500 14px/1 var(--font-sans);
}

.seats-label__value {
  font: 500 14px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.seats-range {
  width: 100%;
  accent-color: var(--ink);
}

.seats-note {
  font: 400 12px/1.4 var(--font-mono);
  color: var(--ink-2);
}

/* File upload (live) */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
  border: 1px dashed var(--ink-3);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 14px/1.4 var(--font-sans);
}

.dropzone__title {
  font-weight: 600;
}

.dropzone__hint {
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-3);
}

.upload-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
}

.upload-item__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 500 14px/1.2 var(--font-sans);
}

.upload-item__status {
  font: 400 12px/1.2 var(--font-mono);
  color: var(--ink-2);
}

.upload-item__track {
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hairline-2);
}

/* width set by kit-elements.js via --progress */
.upload-item__bar {
  width: var(--progress, 0%);
  height: 3px;
  background: var(--ink);
}

.upload-item.is-done .upload-item__status { color: var(--success); }
.upload-item.is-done .upload-item__bar { background: var(--success); }

.upload-error {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--error);
  border-radius: var(--radius-control);
  background: var(--error-tint);
  color: var(--error);
  font: 400 13px/1.35 var(--font-sans);
}

/* --------------------------------------------------------------------------
   Tags & filter chips
   -------------------------------------------------------------------------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--h-s);
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 14px/1 var(--font-sans);
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
}

/* Check mark slot: empty (but still a flex item, so the gap applies)
   until the chip is pressed */
.filter-chip::before {
  content: "";
}

.filter-chip[aria-pressed="true"]::before {
  content: "✓";
}

.chip-row__divider {
  width: 1px;
  margin: 0 8px;
  background: var(--hairline);
}

.tag {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--hairline-2);
  font: 500 12px/1 var(--font-sans);
}

.tag--removable {
  gap: 6px;
  padding: 0 4px 0 8px;
}

.tag__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   Every element, every state
   -------------------------------------------------------------------------- */
.state-spec {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  min-height: 30px;
  margin-bottom: 6px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: 500 13px/1 var(--font-sans);
  white-space: nowrap;
  outline-offset: 2px;
}

.state-msg {
  display: block;
  font: 400 11px/1.3 var(--font-sans);
  color: var(--ink-3);
}

.state-msg--error { color: var(--error); }
.state-msg--success { color: var(--success); }

/* Generic states */
.state-spec.is-focus    { outline: 2px solid var(--focus); }
.state-spec.is-disabled { opacity: .4; }
.state-spec.is-loading  { opacity: .8; }
.state-spec.is-error    { border-color: var(--error); }
.state-spec.is-success  { border-color: var(--success); }

/* Filter chip */
.state-spec--chip { border-radius: var(--radius-pill); }
.state-spec--chip.is-hover { border-color: var(--ink); }
.state-spec--chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--canvas); }

/* Checkbox */
.state-spec--checkbox { padding: 0; border-color: transparent; }
.state-spec--checkbox.is-hover { padding: 0 6px; background: var(--hairline-2); }
.state-spec--checkbox.is-success { border-color: transparent; }

/* Switch */
.state-spec--switch { border-radius: var(--radius-pill); }
.state-spec--switch.is-hover { border-color: var(--ink); }
.state-spec--switch.is-active { border-color: var(--action-border); background: var(--action); color: var(--on-action); }

/* Citation marker */
.state-spec--citation {
  min-height: 20px;
  padding: 0 5px;
  border-color: var(--machine-ink);
  border-radius: var(--radius-xs);
  font: 500 11px/1 var(--font-mono);
}
.state-spec--citation.is-hover { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
.state-spec--citation.is-active { transform: translateY(1px); }
.state-spec--citation.is-error { color: var(--error); }

/* Verification chip */
.state-spec--verification {
  border-color: transparent;
  border-radius: var(--radius-pill);
  background: var(--success-tint);
  color: var(--success);
  font: 600 12px/1 var(--font-sans);
}
.state-spec--verification.is-active { transform: translateY(1px); }
.state-spec--verification.is-loading { opacity: 1; background: var(--machine-tint); color: var(--machine-ink); }
.state-spec--verification.is-error { border-color: transparent; background: var(--error-tint); color: var(--error); }

/* Model picker */
.state-spec--picker { font: 500 12px/1 var(--font-mono); }
.state-spec--picker:is(.is-hover, .is-active) { border-color: var(--ink); }

/* Feedback button */
.state-spec--feedback { border-radius: var(--radius-sm); }
.state-spec--feedback.is-hover { background: var(--hairline-2); }
.state-spec--feedback.is-active { border-color: var(--ink); background: var(--hairline-2); }

/* Anatomy cards */
.anatomy-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.anatomy-card__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3);
}

.anatomy-card__spec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-bottom: 1px solid var(--hairline);
  font: 400 13px/1.45 var(--font-mono);
  color: var(--ink-2);
}

.anatomy-card__rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  font: 400 14px/1.45 var(--font-sans);
}

/* --------------------------------------------------------------------------
   AI & provenance
   -------------------------------------------------------------------------- */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin-top: 24px;
}

/* Two columns wide – only once the grid has two columns (fixes the
   original's horizontal overflow on phones) */
.spec-grid__wide {
  min-width: 0;
}

@media (min-width: 600px) {
  .spec-grid__wide {
    grid-column: span 2;
  }
}

/* AI mark: diamond + centre point, 12 / 16 / 24 */
.ai-marks {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ai-mark {
  --mark: 8px;
  --stroke: 1.5px;
  --dot: 1.5px;
  --dot-offset: 2px;
  box-sizing: content-box;
  position: relative;
  width: var(--mark);
  height: var(--mark);
  border: var(--stroke) solid var(--machine-ink);
  transform: rotate(45deg);
}

.ai-mark::after {
  content: "";
  position: absolute;
  top: var(--dot-offset);
  left: var(--dot-offset);
  width: var(--dot);
  height: var(--dot);
  background: var(--machine-ink);
}

.ai-mark--16 { --mark: 11px; --dot: 2px; --dot-offset: 3.5px; }
.ai-mark--24 { --mark: 17px; --stroke: 2px; --dot: 3px; --dot-offset: 5.5px; }

.ai-label {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--machine-tint);
  color: var(--machine-ink);
  font: 500 12px/1 var(--font-sans);
}

.ai-label__mark {
  box-sizing: content-box;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.demo-badge {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--machine-ink);
  border-radius: var(--radius-pill);
  color: var(--machine-ink);
  font: 500 11px/1 var(--font-mono);
}

.provenance-chip {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font: 500 12px/1 var(--font-sans);
}

.provenance-chip.is-hover {
  border-color: var(--machine-ink);
  background: var(--machine-tint);
}

.verify-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font: 600 13px/1 var(--font-sans);
}

.verify-chip--grounded    { background: var(--success-tint); color: var(--success); }
.verify-chip--review      { background: var(--warning-tint); color: var(--warning); }
.verify-chip--verified    { background: var(--success); color: var(--canvas); }
.verify-chip--unsupported { background: var(--error-tint); color: var(--error); }

.model-badge {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

/* Meter: token budget, progress bar (fill width via --value) */
.meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meter__head {
  display: flex;
  justify-content: space-between;
  font: 500 12px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.meter__head--plain {
  font: 400 12px/1 var(--font-mono);
}

.meter__pct {
  color: var(--ink-3);
}

.meter__track {
  height: 4px;
  border-radius: 2px;
  background: var(--hairline-2);
}

.meter__track--thin {
  height: 3px;
}

.meter__fill {
  width: var(--value);
  height: 100%;
  border-radius: 2px;
  background: var(--ink);
}

.meta-chip {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--hairline-2);
}

/* Streaming caret + working indicator */
.streaming-panel {
  background: var(--machine-tint);
}

.streaming-panel .kit-panel__label {
  color: var(--machine-ink);
}

.streaming-panel__text {
  font: 400 15px/1.5 var(--font-sans);
}

.streaming-panel .caret {
  animation: none; /* static specimen */
}

.working {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/1 var(--font-mono);
  color: var(--ink-2);
}

.working__bars {
  display: flex;
  gap: 2px;
}

.working__bars > span {
  width: 3px;
  height: 10px;
  background: var(--machine-ink);
}

.working__bars > span:nth-child(2) { opacity: .55; }
.working__bars > span:nth-child(3) { opacity: .25; }

/* Citation marker specimens */
.cite-specs {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11px/1 var(--font-mono);
}

.cite-spec {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--machine-ink);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--ink-2);
}

.cite-spec.is-hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--canvas);
}

.cite-spec--unsupported {
  border: 1px dashed var(--error);
  background: transparent;
  color: var(--error);
}

.output-control {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.output-control--strong {
  border-color: var(--ink);
}

/* Feedback (live) */
.feedback-panel {
  gap: 12px;
}

.feedback-panel__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.feedback-panel__question {
  margin-right: 4px;
  font: 400 14px/1 var(--font-sans);
  color: var(--ink-2);
}

.feedback-panel__thanks {
  font: 400 13px/1 var(--font-sans);
  color: var(--success);
}

.feedback-panel__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feedback-btn,
.reason-chip,
.feedback-send {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
}

.feedback-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font: 500 13px/1 var(--font-sans);
}

.feedback-btn--up[aria-pressed="true"] {
  border-color: var(--action-border);
  background: var(--action);
}

.feedback-btn--down[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--hairline-2);
}

.reason-chip {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font: 400 13px/1 var(--font-sans);
}

.reason-chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--hairline-2);
}

.feedback-send {
  height: 28px;
  padding: 0 12px;
  border-color: var(--action-border);
  border-radius: var(--radius-sm);
  background: var(--action);
  color: var(--on-action);
  font: 600 13px/1 var(--font-sans);
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.key-spec {
  padding: 4px 6px;
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  font: inherit;
}

.slash-spec {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--machine-tint);
  color: var(--machine-ink);
}

.code-spec {
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  background: var(--hairline-2);
  font: 400 13px/1 var(--font-mono);
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 14px/1 var(--font-sans);
}

.status-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-badges {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .04em;
}

.plan-badge {
  padding: 5px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}

.plan-badge--pro { border-color: var(--ink); }
.plan-badge--team { border: 0; background: var(--ink); color: var(--canvas); }
.plan-badge--enterprise { border-color: var(--machine-ink); color: var(--machine-ink); }

/* Tooltip (live) */
.tooltip-demo {
  position: relative;
  display: flex;
  padding-top: 40px;
}

.tooltip-demo__trigger {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: 500 12px/1 var(--font-mono);
}

.tooltip-demo__tip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--canvas);
  font: 400 12px/1.3 var(--font-sans);
  white-space: nowrap;
}

.divider-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-3);
}

.divider-spec > span {
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.skeleton-panel {
  gap: 10px;
}

.skeleton-line {
  width: var(--value);
  height: 12px;
  border-radius: var(--radius-xs);
  background: var(--hairline-2);
}