@layer components {
  /* Variants only set --assessment-page-*. */
  .assessment-page-section {
    --assessment-page-border-style: solid;
    --assessment-page-label-color: oklch(var(--oklch-ink-mid));

    border: 1px var(--assessment-page-border-style) oklch(var(--oklch-border));
    border-radius: var(--radius-lg);
    margin-block-end: var(--space-5);
    overflow: hidden;
  }
  .assessment-page-section--unassigned {
    --assessment-page-border-style: dashed;
    --assessment-page-label-color: oklch(var(--oklch-warning));

    opacity: 0.85;
  }
  .assessment-page-header {
    align-items: center;
    background: oklch(var(--oklch-canvas-raised));
    border-block-end: 1px solid oklch(var(--oklch-border));
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
  }
  .assessment-page-label {
    color: var(--assessment-page-label-color, oklch(var(--oklch-ink-mid)));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* Assessment page meta (question count) */
  .assessment-page-meta {
    color: oklch(var(--oklch-ink-mid));
    font-size: 0.8125rem;
  }

  /* ── Page layout picker. The checked option only sets --page-layout-option-*. ── */
  .page-layout-picker {
    align-items: center;
    display: flex;
    gap: var(--space-1);
  }
  .page-layout-radio {
    block-size: 0;
    inline-size: 0;
    opacity: 0;
    position: absolute;
  }
  .page-layout-option {
    --page-layout-option-background: oklch(var(--oklch-canvas));
    --page-layout-option-border-color: oklch(var(--oklch-border));
    --page-layout-option-fill: oklch(var(--oklch-ink-mid) / 0.25);

    align-items: center;
    background: var(--page-layout-option-background);
    border: 1px solid var(--page-layout-option-border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 4px;
    transition: border-color 0.12s, background 0.12s;

    &:hover { --page-layout-option-border-color: oklch(var(--oklch-accent)); }
    &:has(.page-layout-radio:checked) {
      --page-layout-option-background: oklch(var(--oklch-accent) / 0.08);
      --page-layout-option-border-color: oklch(var(--oklch-accent));
      --page-layout-option-fill: oklch(var(--oklch-accent) / 0.6);
    }
  }
  .page-layout-preview {
    block-size: 22px;
    display: flex;
    gap: 2px;
    inline-size: 36px;
  }
  .plp-col {
    background: var(--page-layout-option-fill);
    block-size: 100%;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
  }
  .plp-col--full,
  .plp-col--half,
  .plp-col--third { flex: 1; }
  .plp-col--two-thirds { flex: 2; }
  .page-layout-label {
    color: oklch(var(--oklch-ink-mid));
    font-size: 0.6rem;
    white-space: nowrap;
  }

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

  /* Sections management panel */
  .assessment-sections-panel {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-lg);
    margin-block-end: var(--space-6);
    padding: 1.25rem 1.5rem;
  }
  .assessment-sections-panel-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-end: var(--space-4);
  }
  .assessment-sections-panel-title {
    color: oklch(var(--oklch-ink-dark));
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
  }
  .section-add-form {
    align-items: center;
    display: flex;
    flex: 1;
    gap: var(--space-2);
  }
  .section-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .section-list-item {
    background: oklch(var(--oklch-canvas));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-md);
    padding: 0.625rem 1rem;
  }
  .section-list-item-header {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
  }
  .section-list-item-name {
    color: oklch(var(--oklch-ink-darkest));
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .section-list-item-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--space-1);
  }
}