/* Admin display density (Account → Compact / Comfortable / Large).
   Comfortable is the default (`default` in storage) and lives in
   core/variables.css. Compact tightens rows and steps type down one pixel;
   Large raises both. Whole pixels only. */

body[data-density="compact"] {
  --control: 28px;
  --control-sm: 24px;
  --control-xs: 20px;
  --control-md: 28px;
  --chrome-row: 36px;
  --nav-row: 26px;
  --row-list: 32px;
  --row-table: 36px;
  --card-h: 84px;
  --sidebar-width: 216px;
  --size-number: 26px;     --lh-number: 28px;
  --size-page-title: 18px; --lh-page-title: 24px;
  --size-title-l: 16px;    --lh-title-l: 22px;
  --size-slab-title: 14px; --lh-slab-title: 20px;
  --size-title: 13px;      --lh-title: 18px;
  --size-body: 13px;       --lh-body: 20px;
  --size-small: 12px;      --lh-small: 16px;
  --size-caption: 11px;    --lh-caption: 16px;
  --size-mono: 12px;       --lh-mono: 18px;
}

body[data-density="large"] {
  --control: 40px;
  --control-sm: 34px;
  --control-xs: 28px;
  --control-md: 40px;
  --chrome-row: 48px;
  --nav-row: 36px;
  --row-list: 52px;
  --row-table: 60px;
  --card-h: 128px;
  --sidebar-width: 256px;
  --size-number: 32px;     --lh-number: 36px;
  --size-page-title: 22px; --lh-page-title: 30px;
  --size-title-l: 19px;    --lh-title-l: 26px;
  --size-slab-title: 17px; --lh-slab-title: 24px;
  --size-title: 16px;      --lh-title: 22px;
  --size-body: 16px;       --lh-body: 24px;
  --size-small: 14px;      --lh-small: 20px;
  --size-caption: 13px;    --lh-caption: 18px;
  --size-mono: 14px;       --lh-mono: 22px;
}

body[data-density="compact"] .card-body,
body[data-density="compact"] .settings-form .form-group {
  gap: var(--s-2);
}

body[data-density="compact"] .entry-editor-page .editor-content,
body[data-density="compact"] .entry-editor-page .language-tab-content,
body[data-density="compact"] .collection-editor-page .editor-content {
  gap: var(--s-5);
}

body[data-density="large"] .card-body,
body[data-density="large"] .settings-form .form-group {
  gap: var(--s-5);
}

body[data-density="large"] .entry-editor-page .editor-content,
body[data-density="large"] .entry-editor-page .language-tab-content,
body[data-density="large"] .collection-editor-page .editor-content {
  gap: 32px;
}

/* Selectable density / security option cards (Account, Settings → Security) */
.radio-card {
  display: block;
  position: relative;
  cursor: pointer;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--dur-1) var(--ease),
    background-color var(--dur-1) var(--ease);
}

.radio-card + .radio-card {
  margin-block-start: var(--s-2);
}

.radio-card > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-card:has(> input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.radio-card > input:focus-visible + span,
.radio-card > input:focus-visible ~ span {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.radio-card span {
  display: block;
  color: var(--text-2);
  font-size: var(--size-small);
}

.radio-card strong {
  color: var(--text);
}