/* Admin page chrome */
.admin-page {
  padding-block: 1.5rem 4rem;
}

.admin-header {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-block-end: 1.25rem;
}

.admin-header__title-group {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  min-inline-size: 0;
}

.admin-header__back {
  color: var(--color-subtle-dark);
  display: inline-flex;
  transition: color 200ms ease;

  .icon {
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }

  @media (any-hover: hover) {
    &:hover {
      color: var(--color-ink);
    }
  }
}

.admin-header__title {
  color: var(--color-ink);
  font-size: 1.35rem;
  font-weight: 700;
  margin-block: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrow screens: title + subtitle side by side crushed the title to one
   letter — let the group wrap and the title breathe on its own line. Same for
   the header itself: three actions no longer share a row with the title. */
@media (max-width: 40rem) {
  .admin-header {
    flex-wrap: wrap;
  }

  .admin-header__title-group {
    flex-wrap: wrap;
  }

  .admin-header__title {
    white-space: normal;
  }
}

/* Stacked header: back-link / title / subtitle in a column (user card, log). */
.admin-header__title-group--stacked {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.35rem;

  .admin-header__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
    overflow: visible;
    white-space: normal;
  }
}

.admin-back {
  color: var(--color-subtle-dark);
  font-size: 0.875rem;
}

.admin-header__subtitle {
  color: var(--color-subtle-dark);
  font-size: 0.9rem;
  margin-block: 0;
}

/* User card — management controls grouped above the read-only snapshot. */
.admin-user__manage {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  margin-block-end: var(--block-space-double);
}

.admin-header__actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
}

.admin-header__view-live {
  font-size: 0.85rem;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-row {
  align-items: center;
  border-radius: 0.5em;
  color: var(--color-ink);
  display: flex;
  gap: 0.75rem;
  padding: var(--block-space-half) 0.9rem;
  text-decoration: none;
  transition: background-color 200ms ease;

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-subtle-light);
    }
  }
}

.admin-row__lead {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 0.75rem;
  min-inline-size: 0;
}

.admin-row__meta {
  align-items: center;
  color: var(--color-subtle-dark);
  display: flex;
  flex-shrink: 0;
  font-size: 0.75rem;
  gap: 0.75rem;

  .icon {
    block-size: 1rem;
    inline-size: 1rem;
  }
}

.admin-row__position {
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
  inline-size: 1.5rem;
  text-align: end;
}

/* Person rows (a profession's team): avatar + name + status badges inline. */
.admin-row__title--person {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;

  .avatar {
    --avatar-size: 1.75rem;
  }

  .badge {
    flex: none;
  }
}

.admin-row__title {
  color: var(--color-ink);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-row__icon {
  color: var(--color-subtle-dark);
  flex-shrink: 0;
  margin-inline-start: auto;

  .icon {
    block-size: 1rem;
    inline-size: 1rem;
  }
}

.admin-row__column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
  min-inline-size: 0;
}

.admin-row__line {
  align-items: center;
  display: flex;
  gap: var(--block-space-half);
  min-inline-size: 0;
}

.admin-row__subtle {
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
  margin-block: 0;
}

/* Path grouping — shared by the lessons index and the moderation queue */
.admin-group + .admin-group {
  margin-block-start: var(--block-space);
}

/* A group standing after non-group content (the builder tree): give it air
   and let the head's action sit at the far edge. */
.admin-group--spaced {
  margin-block-start: var(--block-space-double);

  .admin-group__head {
    justify-content: space-between;
  }
}

.admin-group__head {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-block: 0 0.75rem;
}

.admin-group__title {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  margin-block: 0 var(--block-space-half);
}

.admin-group__meta {
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
}

/* Stage subheading inside a course group (admin lessons drill-in) */
.admin-stage {
  margin-block: 0.75rem 0.35rem;
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-empty {
  color: var(--color-subtle-dark);
  padding-block: 4rem;
  text-align: center;
}

.admin-empty__text {
  font-size: 1.05rem;
}

/* Suggestion review (admin/lesson_suggestions/show) */
.admin-meta-card {
  background-color: var(--color-subtle);
  border: 1px solid var(--color-subtle);
  border-radius: 0.5em;
  margin-block-end: 1.5rem;
  padding: var(--block-space);
}

.admin-meta-card__row {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: var(--block-space);
}

.admin-meta-card__label {
  color: var(--color-subtle-dark);
}

.admin-meta-card__value {
  color: var(--color-ink);
}

.admin-meta-card__value--marker {
  color: var(--color-marker);
}

.admin-meta-card__value--subtle {
  color: var(--color-subtle-dark);
}

.admin-comparison {
  display: grid;
  gap: var(--block-space);
  margin-block-end: 1.5rem;

  @media (min-width: 1024px) {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-comparison__heading {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  font-weight: 500;
  margin-block: 0 var(--block-space-half);
}

.admin-comparison__heading--proposed {
  color: var(--color-link);
}

.admin-comparison__body {
  background-color: var(--color-subtle);
  border: 1px solid var(--color-subtle);
  border-radius: 0.5em;
  /* Use most of the screen height so the reviewer reads as much of the diff as
     possible before scrolling, with a cap so a huge edit still stays bounded. */
  max-block-size: min(75vh, 60rem);
  min-block-size: 20rem;
  overflow-y: auto;
  padding: var(--block-space) 1.25rem;
}

.admin-comparison__body--proposed {
  border-color: oklch(var(--lch-blue) / 0.25);
}

.admin-decision__hint {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  margin-block: 0 var(--block-space-half);
}

.admin-decision {
  background-color: var(--color-subtle);
  border: 1px solid var(--color-subtle);
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  padding: var(--block-space);

  @media (min-width: 640px) {
    /* Bottom-align so Approve and Reject sit on one line — the reject label
       floats above its input, so top-align left Approve looking "crooked". */
    align-items: flex-end;
    flex-direction: row;
  }
}

/* The button_to wrapper around Approve. */
.admin-decision__approve {
  flex: 0 0 auto;
}

.admin-decision__reject {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--block-space-half);

  @media (min-width: 640px) {
    align-items: flex-end;
    flex-direction: row;
    gap: 0.75rem;
  }
}

.admin-decision__reject-field {
  flex: 1;
}

/* Comfortable column width on the wide admin container — page stays full-width
   (section nav never shifts between pages), only form content is capped. Wide
   content (lesson rich editor, YAML import) opts out by not using this class. */
.admin-form {
  max-inline-size: 44rem;
}

.admin-form__field {
  margin-block-end: var(--block-space);
}

.admin-form__field--lg {
  margin-block-end: 1.5rem;
}

.admin-form__grid > .admin-form__field {
  margin-block-end: 0;
}

.admin-form__actions {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

.admin-form__grid {
  display: grid;
  gap: var(--block-space);

  @media (min-width: 640px) {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-form__hint {
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
  margin-block: 0 var(--block-space-half);
}

/* Read-only section context on the suggestion form (replaces the old select) */
.suggestion-section {
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 500;
  margin-block: 0;
}

.admin-alert {
  border: 1px solid;
  border-radius: 0.5em;
  font-size: 0.9rem;
  margin-block-end: var(--block-space);
  padding: 0.75rem 1rem;
}

.admin-alert > p {
  margin-block: 0.1em;
}

.admin-alert--error {
  background-color: oklch(var(--lch-red) / 0.1);
  border-color: oklch(var(--lch-red) / 0.3);
  color: var(--color-negative);
}

.admin-alert--info {
  background-color: oklch(var(--lch-blue) / 0.1);
  border-color: oklch(var(--lch-blue) / 0.3);
  color: var(--color-link);
}

/* Moderation queue: sort toggle + grouping by lesson */
.admin-sort {
  align-items: center;
  color: var(--color-subtle-dark);
  display: flex;
  font-size: 0.85rem;
  gap: 0.75rem;
  margin-block-end: 1.5rem;
}

.admin-sort__option {
  color: var(--color-subtle-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-subtle);
}

.admin-sort__option--active {
  color: var(--color-ink);
  font-weight: 600;
}

/* A non-clickable row (e.g. revision history with its own action button) */
.admin-row--static {
  justify-content: space-between;

  @media (any-hover: hover) {
    &:hover {
      background-color: transparent;
    }
  }
}

/* ── Users & roles ── */

.admin-users-search {
  display: flex;
  gap: var(--inline-space);
  margin-block-end: var(--block-space);

  .input {
    max-inline-size: 24rem;
  }
}

/* The active filter fills like a primary button so the current scope is unmistakable. */
.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
  margin-block-end: var(--block-space);
}

.admin-filter {
  align-items: center;
  border: 1px solid var(--color-subtle);
  border-radius: 2rem;
  color: var(--color-ink);
  display: inline-flex;
  gap: var(--inline-space-half);
  font-size: 0.9rem;
  font-weight: 600;
  padding-block: 0.3rem;
  padding-inline: 0.85rem;

  &:hover {
    background-color: var(--color-subtle-light);
  }
}

.admin-filter--active {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg);

  &:hover {
    background-color: var(--color-ink);
  }
}

.admin-filter__count {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;

  .admin-filter--active & {
    color: var(--color-bg);
    opacity: 0.7;
  }
}

.admin-list__summary {
  color: var(--color-subtle-dark);
  font-size: 0.875rem;
  margin-block: 0 var(--block-space-half);
}

/* Category tabs on one side, the actor picker on the other. */
.admin-log-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space) var(--block-space);
  justify-content: space-between;
  margin-block-end: var(--block-space);

  .admin-filters {
    margin-block-end: 0;
  }
}

.admin-log-actor {
  display: flex;
  gap: var(--inline-space-half);

  .input {
    max-inline-size: 18rem;
  }
}

.admin-role-form {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--inline-space);
}

/* Role form + suspend/reinstate button, side by side. */
.admin-row__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--inline-space);
}

/* ── Dashboard (admin overview) ── */

.admin-callout {
  --panel-padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--inline-space);
  margin-block-end: var(--block-space);
}

.admin-callout__text {
  font-weight: 600;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--block-space-half);
  margin-block-end: var(--block-space);
}

/* Tighter padding than a default panel, so more KPIs fit per row and above the fold. */
.admin-stat {
  --panel-padding: 0.9rem 1rem;
}

/* Children are explicit blocks: .panel (loaded after this file) forces
   display: block on the card itself, so don't rely on flex here. */
.admin-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  margin-block-end: 0.15rem;
}

.admin-stat__label {
  display: block;
  font-weight: 600;
}

/* Vital-sign warning: low disk or failed jobs — red value + border so it reads
   as "needs attention" at a glance among the calm monochrome cards. */
.admin-stat--warn {
  border-color: oklch(var(--lch-red) / 0.55);

  .admin-stat__value {
    color: var(--color-negative);
  }
}

.admin-stat__detail {
  color: var(--color-subtle-dark);
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
  margin-block-start: 0.15rem;
}

/* The lazy vitals frame is layout-transparent, so its cards land directly in
   the .admin-stats grid instead of forming one squashed cell. */
#dashboard_vitals {
  display: contents;
}

/* Placeholder tiles shown while the vitals frame loads — same footprint as a
   real card so the grid doesn't reflow when the numbers arrive. */
.admin-stat--skeleton {
  --panel-background: var(--color-subtle);
  --panel-border-color: transparent;

  @media (prefers-reduced-motion: no-preference) {
    animation: pulse 1.2s ease-in-out infinite;
  }
}

.admin-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  margin-block-end: var(--block-space);
}

.admin-chart__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
}

.admin-chart__bar {
  background-color: var(--color-link);
  border-radius: 3px 3px 0 0;
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 2.5rem;
  min-block-size: 2px;
}

.admin-chart__count {
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
  text-align: center;
}

/* ── Pager for long admin lists (users, feedbacks) ── */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--inline-space);
  margin-block-start: var(--block-space);
}

.admin-pagination__page {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
}

/* ── Founder inbox (admin/feedbacks) ── */
/* One compact row per message, full text revealed on click (native <details>, no JS). */
.inbox {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--color-subtle);
}

.inbox__item {
  border-block-end: 1px solid var(--color-subtle);
}

.inbox__summary {
  display: flex;
  align-items: center;
  gap: var(--inline-space);
  padding-block: 0.6rem;
  cursor: pointer;
  list-style: none;
}

.inbox__summary::-webkit-details-marker {
  display: none;
}

/* Caret instead of the default disclosure triangle — points right, rotates
   down when the message is open. */
.inbox__summary::before {
  content: "";
  flex: none;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-inline-end: 1.5px solid var(--color-subtle-dark);
  border-block-end: 1.5px solid var(--color-subtle-dark);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.inbox__entry[open] .inbox__summary::before {
  transform: rotate(45deg);
}

.inbox__from {
  flex: none;
  font-weight: 600;
}

.inbox__snippet {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-subtle-dark);
}

.inbox__date {
  flex: none;
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
}

.inbox__detail {
  padding-block: var(--block-space-half) var(--block-space);
  padding-inline-start: calc(0.4rem + var(--inline-space));
}

.inbox__meta {
  margin-block: 0 var(--block-space-half);
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
}

.inbox__body {
  margin-block: 0 var(--block-space);

  p {
    margin-block: 0.25em;
  }
}

/* Coauthor application → one-gesture approval block */
.inbox__approve {
  margin-block: 0 var(--block-space);
}

.inbox__approve-label {
  margin-block: 0 var(--block-space-half);
  font-weight: 600;
  font-size: 0.8125rem;
}

.inbox__approve-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
  align-items: center;
}

.inbox__approve-form .input {
  flex: 1 1 14rem;
}

.inbox__approve-hint {
  margin-block: var(--block-space-half) 0;
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
}

/* ── Persistent section nav (tabs) ── */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block-end: var(--block-space);
  padding-block-end: var(--block-space-half);
  border-block-end: 1px solid var(--color-subtle);
}

.admin-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--inline-space-half);
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  color: var(--color-subtle-dark);
  font-weight: 500;
  text-decoration: none;
}

@media (any-hover: hover) {
  .admin-nav__link:hover {
    background-color: var(--color-subtle-light);
    color: var(--color-ink);
  }
}

/* Active = a more visible fill, NOT a heavier weight — changing font-weight
   would widen the label and shove the other links (visible jitter on click). */
.admin-nav__link[aria-current="page"] {
  background-color: var(--color-subtle);
  color: var(--color-ink);
}

/* Moderation-queue count on «Правки» — same red as .badge--norm */
.admin-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.4em;
  padding: 0.05em 0.4em;
  border-radius: 1em;
  background-color: oklch(var(--lch-red) / 0.18);
  color: oklch(var(--lch-red));
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

/* Per-profession edit-access grant on /admin/users (shown under expert rows) */
.admin-access {
  margin-block: var(--block-space-half) var(--block-space);
  padding: var(--block-space);
  border: 1px solid var(--color-subtle);
  border-radius: 0.5rem;
  background-color: var(--color-subtle-light);
}

.admin-access__legend {
  margin-block-end: var(--block-space-half);
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.admin-access__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space-half) var(--inline-space-double);
  margin-block-end: var(--block-space);
}

.admin-access__option {
  display: inline-flex;
  align-items: center;
  gap: var(--inline-space-half);
}

/* Native popover (zero JS), visual model mirrors .term-info__pop; marker chips
   reuse the callout accent tokens, so each marker matches the rendered lesson. */
.editor-cheatsheet__trigger {
  background: none;
  border: none;
  color: var(--color-link);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3ch;
  font: inherit;
  padding: 0;
}

.editor-cheatsheet__trigger .icon {
  block-size: 1.1em;
  inline-size: 1.1em;
}

.editor-cheatsheet {
  background-color: var(--color-subtle-light);
  border: 1px solid var(--color-subtle);
  border-radius: 0.7em;
  box-shadow:
    0 12px 32px -8px oklch(var(--lch-always-black) / 0.5),
    0 4px 8px -4px oklch(var(--lch-always-black) / 0.4);
  color: var(--color-ink);
  margin: auto;
  max-inline-size: min(30rem, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem;

  &::backdrop {
    background-color: oklch(var(--lch-always-black) / 0.45);
  }
}

.editor-cheatsheet__heading {
  color: var(--color-subtle-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-block: 0 0.5lh;
  text-transform: uppercase;
}

.editor-cheatsheet__heading:not(:first-child) {
  margin-block-start: 1lh;
}

.editor-cheatsheet__intro {
  color: var(--color-subtle-dark);
  font-size: 0.9rem;
  margin-block: 0 0.7lh;
}

.editor-cheatsheet__list {
  display: grid;
  gap: 0.45lh;
  list-style: none;
  margin: 0;
  padding: 0;
}

.editor-cheatsheet__item {
  align-items: center;
  display: flex;
  gap: 1.2ch;
}

.editor-cheatsheet__marker {
  color: var(--callout-accent);
  font-weight: 700;
  white-space: nowrap;
}

.editor-cheatsheet__meaning {
  align-items: center;
  color: var(--color-subtle-dark);
  display: flex;
  font-size: 0.9rem;
  gap: var(--inline-space-half);
}

.editor-cheatsheet__meaning .icon {
  block-size: 1.1em;
  color: var(--callout-accent);
  inline-size: 1.1em;
}

.editor-cheatsheet__full {
  color: var(--color-link);
  display: inline-block;
  margin-block-start: 1lh;
}

/* Copy-the-marker button inside the cheatsheet: the marker text itself is the
   click target, with a copy icon that flips to a check on success. */
.editor-cheatsheet__hint {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  margin-block: 0 0.7lh;
}

.editor-cheatsheet__copy {
  align-items: center;
  background: none;
  border: 1px solid color-mix(in oklab, var(--callout-accent) 35%, transparent);
  border-radius: 0.4em;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 0.6ch;
  padding: 0.15lh 0.7ch;
}

.editor-cheatsheet__copy:hover {
  background-color: color-mix(in oklab, var(--callout-accent) 14%, transparent);
}

.editor-cheatsheet__copy-icon {
  color: var(--color-subtle-dark);
  display: inline-flex;
}

.editor-cheatsheet__copy-icon .icon {
  block-size: 1em;
  inline-size: 1em;
}

.editor-cheatsheet__copy-icon--done {
  color: var(--color-positive);
  display: none;
}

.editor-cheatsheet__copy.is-copied .editor-cheatsheet__copy-icon--copy {
  display: none;
}

.editor-cheatsheet__copy.is-copied .editor-cheatsheet__copy-icon--done {
  display: inline-flex;
}

/* The row no longer links as a whole (see .admin-row--static) — this link
   grows to fill the row, with approve/reject buttons pinned to the end. */
.admin-row__main {
  color: var(--color-ink);
  flex: 1;
  min-inline-size: 0;
  text-decoration: none;
}

.admin-row__action-form {
  margin: 0;
}

/* Inline reject-with-reason (resource queue): the reason field rides next to
   the reject button, since links have no separate review page. */
.admin-row__reject-form {
  display: flex;
  align-items: center;
  gap: var(--inline-space-half);
  margin: 0;
}

.admin-row__reject-input {
  inline-size: 13rem;
  max-inline-size: 100%;
}

/* ── Illustration center ── */

/* Narrow screens: the health chips drop below the profession title instead
   of crushing it into an ellipsis. The title link's flex: 1 means basis 0 —
   force it onto its own full-width line so the chips wrap under it. */
@media (max-width: 40rem) {
  .illustration-row {
    flex-wrap: wrap;
  }

  .illustration-row .admin-row__main {
    flex-basis: 100%;
  }
}

/* Per-profession health line: quiet count chips, broken in red. */
.illustration-health {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
}

.illustration-health__stat {
  background-color: var(--color-subtle-light);
  border-radius: 1em;
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.1rem 0.6rem;
  white-space: nowrap;
}

.illustration-health__stat--broken {
  background-color: color-mix(in oklab, var(--color-negative) 18%, transparent);
  color: var(--color-negative);
}

.admin-group__title--negative {
  color: var(--color-negative);
}

/* Gallery: one column on a phone, tiles on wider screens. */
.illustration-grid {
  display: grid;
  gap: var(--inline-space);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.illustration-card {
  border: 1px solid var(--color-subtle);
  border-radius: 0.75em;
  margin: 0;
  overflow: hidden;
}

.illustration-card__thumb {
  aspect-ratio: 4 / 3;
  background-color: var(--color-subtle-light);
  display: block;
  inline-size: 100%;
  object-fit: contain;
}

.illustration-card__caption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.75rem;
}

.illustration-card__alt {
  color: var(--color-ink);
  font-size: 0.85rem;
  margin-block: 0;
}

.illustration-card__external {
  color: var(--color-subtle-dark);
  font-size: 0.75rem;
  margin-inline-start: 0.35rem;
}

.illustration-card__meta {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  margin-block: 0;
}

/* ── Emblem picker (admin/shared/_icon_field) ─────────────────────────────────
   Native radios in a grid: the input is hidden, the label IS the swatch, and
   :has(:checked) draws the selected ring. No JS.

   Deliberately UNCAPPED — the whole set is on screen at once. A capped, scrolling
   box hid the «inherit / default» row above the fold (the option most authors
   want) and made picking a hunt through a viewport instead of a glance. The set is
   small enough that laying it all out is both shorter to use and simpler to style. */
.icon-picker {
  border: 1px solid var(--color-subtle);
  border-radius: 0.5rem;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  padding: 0.6rem;
}

.icon-picker__option {
  --icon-size: 1.75rem;

  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  color: var(--color-subtle-dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: center;
  padding-block: var(--block-space-half);
  transition: color 100ms ease-out, background-color 100ms ease-out;

  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-subtle-light);
      color: var(--color-ink);
    }
  }

  &:has(input:checked) {
    border-color: var(--color-link);
    color: var(--color-ink);
  }

  &:has(input:focus-visible) {
    outline: 2px solid var(--color-link);
    outline-offset: 1px;
  }
}

/* The "inherit / default" option spans the row — it carries a caption, and it's the
   answer most chapters want. Left-aligned on purpose: centred it read as a heading
   for the block rather than a row you can pick. No rule under it — a border would
   land inside its own hover fill and square the pill off (the mistake this file's
   sibling, the account menu, already made once). */
.icon-picker__option--blank {
  flex-direction: row;
  gap: var(--block-space-half);
  grid-column: 1 / -1;
  justify-content: flex-start;
  padding-inline: 0.6rem;
}

.icon-picker__caption {
  font-size: 0.7rem;
}