/* Native inputs behind ui.css's visual controls (.radio, .check, .toggle): still focusable and announced,
   but invisible; the visual control shows the focus ring. */
.app-visually-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}

.app-visually-hidden:focus-visible + .radio,
.app-visually-hidden:focus-visible + .check {
  box-shadow: var(--focus-ring);
}

/* The vocabulary picker's listbox opens under its control. */
.app-picker {
  position: relative;
}

/* An open picker keeps the accent outline the design draws on it (P6 domain picker). */
.app-picker .input[aria-expanded="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 calc(var(--pad-1) / 2) var(--color-accent-soft);
}

.app-picker-popover {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 30;
}

/* Modal dialogs: the native <dialog> with the design's scrim (--color-backdrop, design round 3). */
.app-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
}

.app-dialog::backdrop {
  background: var(--color-backdrop);
}

/* Radio cards (Form::RadioCardsComponent): the card shows the state; the radio-cards controller moves .is-selected. */
.app-radio-card {
  border: thin solid var(--color-border);
  background: var(--color-bg-surface);
  cursor: pointer;
}

.app-radio-card.is-selected {
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
}

.app-radio-card.is-selected.is-danger {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.app-radio-card.is-selected.is-danger .radio.is-on {
  border-color: var(--color-error);
}

.app-radio-card.is-selected.is-danger .mono {
  color: var(--color-error);
}

.app-radio-card.is-later {
  border-style: dashed;
  border-color: var(--color-locked-border);
  background: var(--color-locked-soft);
  color: var(--color-locked);
  cursor: not-allowed;
}

.app-visually-hidden:focus-visible ~ .radio {
  box-shadow: var(--focus-ring);
}

/* A picker's empty key or name (nothing chosen yet, or an option without a name) takes no room. */
.app-picker .input > span:empty {
  display: none;
}

/* A picker's name after its key truncates rather than wrapping the control (P2: "Do not lift more…"). */
.app-picker .input > .small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Content editors (P5–P8): the save bar appears once the draft has unsaved changes (draft-form controller). */
.app-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--pad-3) var(--pad-4);
  background: var(--color-bg-surface);
  border-top: thin solid var(--color-border);
  box-shadow: var(--shadow-2);
}

.app-save-bar[hidden] {
  display: none;
}

/* The header's lint popover (P5–P8): findings under the "Lint N" button. */
.app-lint-popover {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 30;
  width: var(--app-drawer-w);
}

/* Placeholder chips drag into a textarea as text (P7 palette). */
.placeholder-chip[draggable="true"] {
  user-select: none;
}

/* Long-form copy grows with its text (the design draws these as auto-height .textarea). */
.app-autogrow {
  field-sizing: content;
  height: auto;
  resize: none;
}

/* A palette chip another locale uses but this one is missing (P7). */
.placeholder-chip.is-missing {
  border-color: var(--color-error);
  box-shadow: 0 0 0 calc(var(--pad-1) / 2) var(--color-error-soft);
}

.placeholder-chip[aria-pressed="true"] {
  border-color: var(--color-accent);
}

/* A .check mark over a hidden checkbox (the check controller): its icon shows only while it is on. */
.app-check-mark:not(.is-on) > .ic {
  visibility: hidden;
}

/* P25 · the ⌘K palette: centred at the top of the viewport; the active option (↑/↓) and hover share the design's
   selected row. */
.app-palette {
  margin: 0 auto;
}

.app-search-hit[aria-selected="true"],
.app-search-hit:hover {
  background-color: var(--color-accent-soft);
}