/* Buttons */

.btn-host {
  display: inline-flex;
  max-width: 100%;
  vertical-align: middle;
}
.btn-host--disabled {
  cursor: not-allowed;
}
.btn-host--disabled > .btn:disabled {
  /* Host owns the cursor; control must not steal / fall through. */
  pointer-events: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--accent-strong);
}

.btn:disabled {
  opacity: 1;
  border-color: var(--border-subtle);
  background: var(--bg-inset);
  color: var(--text-muted);
  cursor: not-allowed;
}
.btn.primary:disabled,
.btn.primary:disabled:hover {
  border-color: var(--border-subtle);
  background: var(--bg-inset);
  color: var(--text-muted);
}

/* Slider — thin rail, thumb centered on the rail (not a fat pill).
   Hit target is control-h; the rail is a 2px hairline. */
.ui-slider {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 7rem;
  min-height: calc(var(--ui-space, 0.25rem) * 6);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.ui-slider.w-full {
  width: 100%;
}

.ui-slider__rail {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background: var(--bg-inset);
  box-shadow: 0 0 0 1px var(--border-subtle);
}

.ui-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: hsl(var(--chrome-hue) 22% 42%);
  pointer-events: none;
}

.ui-slider__thumb {
  position: absolute;
  top: 50%;
  width: var(--space-3);
  height: var(--space-3);
  margin-top: calc(var(--space-3) / -2);
  margin-left: calc(var(--space-3) / -2);
  border-radius: 9999px;
  background: var(--text);
  border: 1px solid var(--border);
  box-sizing: border-box;
  pointer-events: none;
}

.btn.primary {
  /* Light accent fill + dark same-hue ink — white on mid-tone fails AA. */
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn.primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, black);
  border-color: color-mix(in srgb, var(--accent) 88%, black);
}

.btn.small {
  padding: var(--space-1) var(--space-2);
}

.btn.icon {
  padding: var(--space-1);
  width: var(--control-h);
  height: var(--control-h);
  justify-content: center;
}

.btn.icon-label {
  gap: var(--space-1);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
}

.btn.danger {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}

.btn.caution {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 50%, transparent);
}

.btn.caution:hover:not(:disabled) {
  background: color-mix(in srgb, var(--warning) 22%, transparent);
  border-color: var(--warning);
}

.btn.danger.armed {
  background: color-mix(in srgb, var(--danger) 60%, black);
  border-color: color-mix(in srgb, var(--danger) 60%, black);
  color: #fff;
}

.btn.cursor-open .cursor-icon {
  display: block;
}

/* Segmented control */

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.segment {
  padding: var(--space-1) var(--space-4);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.segment.active {
  background: var(--accent);
  color: white;
}

/* Form fields */

.search-input {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
}

.field {
  display: flex;
  flex-direction: column;
  /* RHYTHM_FIELD — label cluster ↔ control ↔ hint (not RELATED gap-1). */
  gap: var(--space-2);
  color: var(--text-muted);
  max-width: var(--measure);
}

.field input:not(.confirm-field__control),
.field textarea:not(.confirm-field__control) {
  width: 100%;
  max-width: var(--measure);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
}

.field-error {
  margin: 0;
  color: var(--danger);
}

.field-label {
  display: block;
  color: var(--text-label);
}

/* Dropzone — system file picker (drag / browse) */

.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-inset);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
  outline: none;
}

.dropzone:hover:not(.is-disabled):not(.is-processing),
.dropzone:focus-visible:not(.is-disabled):not(.is-processing) {
  border-color: var(--accent);
}

.dropzone.is-dragover {
  border-style: solid;
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-inset));
}

.dropzone.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dropzone.is-processing {
  opacity: 1;
  cursor: default;
  border-style: solid;
  pointer-events: none;
  min-height: calc(28 * var(--u));
}

.dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dropzone-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  pointer-events: none;
}

.dropzone-body--processing {
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(90 * var(--u));
  text-align: start;
}

.dropzone-icon {
  display: inline-flex;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
}

.dropzone-preview {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.dropzone-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 28rem;
}

.dropzone-label {
  color: var(--text);
  font-weight: 500;
}

.dropzone-hint {
  font-weight: 400;
}

/* Image tiles — square thumbs + empty uploader tile (2× `--row-h`). */

.image-tiles {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-2);
  margin: 0;
  /* No extra top pad — Field `gap` is the label↔control rhythm (same as inputs). */
  padding: 0;
  list-style: none;
}

.image-tile {
  position: relative;
  width: calc(2 * var(--row-h));
  height: calc(2 * var(--row-h));
  flex: 0 0 calc(2 * var(--row-h));
  border-radius: var(--radius);
}

.image-tile--thumb {
  /* Allow corner remove to sit on the outer corner. */
  overflow: visible;
}

/* Inflate the hover hit box so the overhanging × stays reachable at the edge. */
.image-tile--thumb::before {
  content: "";
  position: absolute;
  /* Half of the 4u remove control + a little slack (`translate(50%, -50%)`). */
  inset: calc(-3 * var(--u));
  z-index: 0;
}

.image-tile__frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: inherit;
  overflow: hidden;
  background: var(--bg-inset);
  cursor: zoom-in;
  color: inherit;
}

.image-tile__frame:disabled {
  cursor: default;
}

.image-tile__frame:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.image-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.image-tile__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Corner remove — center sits on the tile corner; compact hit target. */
.image-tile__remove.btn.icon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  min-width: calc(4 * var(--u));
  min-height: calc(4 * var(--u));
  padding: 0;
  transform: translate(50%, -50%);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 18%, transparent);
  transition: opacity 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out,
    border-color 120ms ease-out;
}

/* Fine pointers: show × only while the tile (incl. hover margin) is hovered / focused. */
@media (hover: hover) and (pointer: fine) {
  .image-tile--thumb:not(:hover):not(:focus-within) .image-tile__remove.btn.icon {
    opacity: 0;
    pointer-events: none;
  }
}

.image-tile__remove.btn.icon:hover:not(:disabled),
.image-tile__remove.btn.icon:focus-visible:not(:disabled) {
  background: var(--bg-elevated);
  color: var(--danger, var(--text));
  border-color: var(--danger, var(--border));
}

.image-tile--uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  background: var(--bg-inset);
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.image-tile--uploader:hover:not(.is-disabled),
.image-tile--uploader:focus-visible:not(.is-disabled) {
  border-color: var(--accent);
}

.image-tile--uploader.is-dragover {
  border-style: solid;
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-inset));
}

.image-tile--uploader.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.image-tile__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.image-tile__upload-icon {
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: none;
}

/* Chip — removable label (multi-select values, filters) */

.chip {
  box-sizing: border-box;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: var(--space-1);
  height: calc(var(--row-h) - 2 * var(--space-1) - 2px);
  max-height: calc(var(--row-h) - 2 * var(--space-1) - 2px);
  margin: 0;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 12%, var(--bg-inset));
  color: var(--text);
  font: inherit;
  font-size: var(--ui-text-xs, 0.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}

.chip--removable {
  padding-right: 0;
}

.chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip__remove {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: calc(var(--row-h) - 2 * var(--space-1) - 2px);
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.chip__remove:hover,
.chip__remove:focus-visible {
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

/* MultiSelect — idle chips / instruction; shell chrome only while editing */

.multi-select {
  position: relative;
  min-width: 0;
  width: auto;
}

.multi-select--stretch {
  width: 100%;
}

.multi-select__shell {
  /* Same action tile geometry as `.confirm-field` (vars are scoped there). */
  --confirm-field-action-w: calc(var(--row-h) - 2px);
  --confirm-field-actions-w: calc(var(--confirm-field-action-w) * 2);
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 0;
  /* Active/edit: one control row. Idle chips may wrap (see below). */
  height: var(--row-h);
  min-height: var(--row-h);
  max-height: var(--row-h);
  /* Equal inset around chips (matches chip height = row-h − 2×space-1 − borders). */
  padding: var(--space-1);
  /* Idle: no input chrome — transparent border keeps layout stable on activate. */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

/* Idle with chips — wrap; grow with content; flush with field label. */
.multi-select:not(.is-open):not(.is-dirty).has-chips .multi-select__shell {
  height: auto;
  min-height: var(--row-h);
  max-height: none;
  align-items: flex-start;
  padding-left: 0;
  padding-right: 0;
}

/* Idle empty — instruction stands in for the field label (flush, label size). */
.multi-select:not(.is-open):not(.is-dirty):not(.has-chips) .multi-select__shell {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
}

.multi-select:not(.is-open):not(.is-dirty):not(.has-chips) .multi-select__shell:hover,
.multi-select:not(.is-open):not(.is-dirty):not(.has-chips) .multi-select__shell:focus-within {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}

/* Hover highlight only in the quiet idle state. */
.multi-select:not(.is-open):not(.is-dirty) .multi-select__shell:hover,
.multi-select:not(.is-open):not(.is-dirty) .multi-select__shell:focus-within {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Active selector — bordered inset field (open menu and/or dirty draft). */
.multi-select.is-open .multi-select__shell,
.multi-select.is-dirty .multi-select__shell {
  height: var(--row-h);
  min-height: var(--row-h);
  max-height: var(--row-h);
  border-color: var(--border-outer);
  background: var(--bg-inset);
}

.multi-select.is-dirty .multi-select__shell {
  border-color: var(--text);
  /* Flush trailing edge for action tiles; keep left/top/bottom chip inset. */
  padding-right: 0;
}

.multi-select.is-open .multi-select__shell {
  border-color: var(--accent-strong);
}

.multi-select.is-dirty.is-open .multi-select__shell {
  border-color: var(--text);
}

.multi-select__face {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--ui-text-xs, 0.75rem);
  line-height: 1.333;
  text-align: left;
  cursor: pointer;
}

.multi-select:not(.is-open):not(.is-dirty).has-chips .multi-select__face {
  align-items: flex-start;
  padding-block: 0;
}

.multi-select__placeholder {
  padding-inline: var(--space-1);
  color: var(--text-muted);
}

/* Empty idle: same size/tone as `.field-label` (constitution — say it once). */
.multi-select:not(.is-open):not(.is-dirty):not(.has-chips) .multi-select__placeholder {
  padding-inline: 0;
  color: var(--text-label);
  font-size: inherit;
  line-height: inherit;
}

.multi-select__chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  height: 100%;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.multi-select:not(.is-open):not(.is-dirty) .multi-select__chips {
  flex-wrap: wrap;
  align-content: flex-start;
  height: auto;
  overflow: visible;
}

.multi-select__chips .chip {
  flex: 0 0 auto;
  max-width: min(12rem, 70%);
  border-color: var(--border-inner);
}

/* Idle: chips sit on the page — no nested “field inside field” border fight. */
.multi-select:not(.is-open):not(.is-dirty) .multi-select__chips .chip {
  border-color: var(--border);
}

.multi-select__actions {
  display: inline-flex;
  flex: 0 0 var(--confirm-field-actions-w);
  align-items: stretch;
  align-self: stretch;
  justify-content: flex-end;
  gap: 0;
  width: var(--confirm-field-actions-w);
  min-width: var(--confirm-field-actions-w);
  /* Same inset as chips ↔ shell edge (padding-right is flushed for the tiles). */
  margin-left: var(--space-1);
  height: auto;
  min-height: 0;
}

/* Guarantee tile size even if kit action rules load without our shell vars. */
.multi-select__actions .confirm-field__action {
  flex: 0 0 var(--confirm-field-action-w);
  width: var(--confirm-field-action-w);
  min-width: var(--confirm-field-action-w);
  height: 100%;
  min-height: 100%;
}

.multi-select__menu {
  z-index: 71;
  box-sizing: border-box;
}

.multi-select__menu--fixed {
  position: fixed;
}

.multi-select__panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: 100%;
  /* 10 option rows + panel padding */
  max-height: calc(10 * 28px + 2 * var(--space-1));
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 18%, transparent);
}

.multi-select__option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 6px var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--ui-text-xs, 0.75rem);
  line-height: 1.333;
  text-align: left;
  cursor: pointer;
}

.multi-select__option:hover,
.multi-select__option:focus-visible {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Same tinted wash as rail selection — background only (no inset bar). */
.multi-select__option.is-selected {
  background: var(--selection);
  color: var(--text);
}

.multi-select__option.is-selected:hover,
.multi-select__option.is-selected:focus-visible {
  background: var(--selection);
  filter: brightness(1.06);
}

.multi-select__option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select__option-check {
  display: inline-flex;
  flex: 0 0 12px;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}

/* Lightbox — full-viewport image preview */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--bg) 72%, black);
  cursor: zoom-out;
}

.lightbox__close.btn.icon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  color: var(--text);
  cursor: pointer;
}

.lightbox__nav-hit {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  cursor: pointer;
}

.lightbox__nav-hit--prev {
  left: var(--space-3);
}

.lightbox__nav-hit--next {
  right: var(--space-3);
}

.lightbox__nav.btn.icon {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  min-width: calc(10 * var(--u));
  min-height: calc(10 * var(--u));
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  color: var(--text);
  cursor: pointer;
}

.lightbox__img {
  display: block;
  max-width: min(96vw, calc(160 * var(--u)));
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px color-mix(in srgb, black 45%, transparent);
  cursor: default;
}

/* Editor pane — titled editor with dirty Cancel/Save in chrome */

.editor-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-outer);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.editor-pane__chrome {
  flex-shrink: 0;
  /* Actions flush to the trailing chrome edge (match confirm-field). */
  padding-right: 0;
}

.editor-pane__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-pane__actions {
  align-self: stretch;
  height: 100%;
}

.editor-pane__dirty-actions {
  display: inline-flex;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  gap: 0;
}

.editor-pane__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pane-chrome-height);
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--text);
}

.editor-pane__action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.editor-pane__action--cancel {
  background: transparent;
}

.editor-pane__action--cancel:hover:not(:disabled),
.editor-pane__action--cancel:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.editor-pane__action--assist {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
}

.editor-pane__action--assist:hover:not(:disabled),
.editor-pane__action--assist:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--warning) 22%, transparent);
}

.editor-pane__action--accept {
  background: var(--text);
  color: var(--bg);
  /* Flush to the pane’s outer trailing corner. */
  border-radius: 0 var(--radius) 0 0;
}

.editor-pane__action--accept:hover:not(:disabled),
.editor-pane__action--accept:focus-visible:not(:disabled) {
  background: var(--text);
  filter: brightness(1.08);
}

.editor-pane__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
}