@layer components {

  /* Navbar. Variants only set --navbar-background. */
  .navbar {
    --navbar-background: var(--color-navbar);

    background: var(--navbar-background);
    color: var(--color-text-on-primary);
    padding-block: 0.75rem;
  }
  .navbar--admin { --navbar-background: oklch(0.30 0.05 280); }
  /* Signed-out layout: a quiet paper bar, matching the v3 landing's nav and
     the re-skinned entry pages (see components/student/session.css). */
  .navbar--signin {
    --navbar-background: var(--color-surface);

    border-block-end: 1px solid var(--color-border);

    .navbar-logo {
      color: var(--color-text);
      font-family: var(--font-serif);
      font-weight: 600;
    }
  }
  .navbar--student .navbar-brand {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }

  .navbar-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-inline: auto;
    max-inline-size: var(--max-width);
    padding-inline: var(--spacing-page);

    @media (max-width: 640px) {
      align-items: flex-start;
      flex-direction: column;
      gap: 0.75rem;
    }
  }

  .navbar-logo {
    align-items: baseline;
    color: var(--color-text-on-primary);
    display: flex;
    font-size: 1.125rem;
    font-weight: 700;
    gap: 0.5rem;
    text-decoration: none;
  }
  .navbar-logo-img {
    max-block-size: 2rem;
    max-inline-size: 5rem;
    object-fit: contain;
  }
  .navbar-school-name {
    color: oklch(1 0 0 / 0.8);
    font-size: 0.85rem;
    font-weight: 400;
  }

  .navbar-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;

    @media (max-width: 640px) { gap: 0.75rem; }

    a {
      color: oklch(1 0 0 / 0.85);
      font-size: 0.9rem;
      text-decoration: none;
    }
    a:hover,
    a[aria-current="page"] {
      color: var(--color-text-on-primary);
      text-decoration: underline;
    }
  }
  .navbar-admin-link { font-weight: 600; }

  .navbar-user {
    align-items: center;
    display: flex;
    gap: 0.75rem;
  }
  .navbar-help-link,
  .navbar-email {
    color: oklch(1 0 0 / 0.8);
    font-size: 0.85rem;
    text-decoration: none;

    &:hover {
      color: var(--color-text-on-primary);
      text-decoration: underline;
    }
  }
  .navbar-signout {
    background: transparent;
    border: 1px solid oklch(1 0 0 / 0.4);
    border-radius: var(--radius-sm);
    color: oklch(1 0 0 / 0.8);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.25rem 0.65rem;
    transition: border-color 0.15s, color 0.15s;

    &:hover {
      border-color: oklch(1 0 0 / 0.8);
      color: var(--color-text-on-primary);
    }
  }

  .navbar-dropdown { position: relative; }
  .navbar-dropdown-toggle {
    align-items: center;
    background: none;
    border: 1px solid oklch(1 0 0 / 0.4);
    border-radius: var(--radius-sm);
    color: oklch(1 0 0 / 0.85);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.9rem;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;

    &::after {
      block-size: 0;
      border-block-start: 0.35em solid currentColor;
      border-inline: 0.3em solid transparent;
      content: '';
      inline-size: 0;
      margin-block-start: 0.15rem;
    }
    &:hover,
    &[aria-expanded="true"] {
      border-color: oklch(1 0 0 / 0.8);
      color: var(--color-text-on-primary);
    }
    &[aria-expanded="true"]::after {
      margin-block-start: -0.15rem;
      transform: rotate(180deg);
    }
  }
  .navbar-dropdown-menu {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px oklch(0 0 0 / 0.2);
    inset-block-start: 100%;
    inset-inline-start: 0;
    list-style: none;
    margin-block-start: 0.5rem;
    min-inline-size: 10rem;
    padding-block: 0.35rem;
    position: absolute;
    z-index: 20;

    li a {
      color: var(--color-text);
      display: block;
      font-size: 0.9rem;
      padding: 0.4rem 0.9rem;
      text-decoration: none;
    }
    li a:hover,
    li a[aria-current="page"] {
      background: var(--color-primary-tint);
    }
  }

  /* Logo preview */
  .logo-preview {
    align-items: center;
    display: flex;
    gap: 1rem;
    margin-block-end: 0.75rem;
  }
  .logo-preview-img {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    max-block-size: 4rem;
    max-inline-size: 10rem;
    object-fit: contain;
    padding: 0.25rem;
  }
  .form-hint {
    color: var(--color-text-muted);
    /* Usually a <span>: without this it sits beside a narrow control instead of under it */
    display: block;
    font-size: 0.8rem;
    margin-block-start: 0.25rem;
  }

  /* Form subsection label (e.g. curriculum → subjects) */
  .form-subsection-label {
    color: oklch(var(--oklch-ink-mid));
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-block-end: 0.5rem;
    text-transform: uppercase;
  }

  /* Subjects summary row */
  .subjects-summary {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-block: 0.25rem;
  }

  /* Shorter lexxy editor for single-statement fields */
  .lexxy-editor--statement lexxy-editor { min-block-size: 120px; }

  /* Colour picker */
  .colour-input-group {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }
  .colour-picker {
    background: none;
    block-size: 2.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    inline-size: 3rem;
    padding: 0.15rem;
  }
  .colour-hex-input {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    max-inline-size: 7rem;
  }

  /* Detail list */
  .detail-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
  .detail-item {
    dt {
      color: var(--color-text-muted);
      font-size: 0.8rem;
      margin-block-end: 0.25rem;
    }
    dd { font-size: 0.95rem; }
  }

  /* Footer */
  .site-footer {
    background: var(--color-surface-sunken);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    padding-block: 1rem;
  }
  .footer-inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-between;
    margin-inline: auto;
    max-inline-size: var(--max-width);
    padding-inline: var(--spacing-page);
  }

  /* Flash. Variants only set the --flash-* properties. */
  .flash {
    --flash-background: transparent;
    --flash-border-color: transparent;
    --flash-color: inherit;

    background: var(--flash-background);
    border-block-end: 1px solid var(--flash-border-color);
    color: var(--flash-color);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }
  .flash-notice {
    --flash-background: var(--color-success-surface);
    --flash-border-color: oklch(var(--oklch-success) / 0.3);
    --flash-color: var(--color-success-text);
  }
  .flash-alert {
    --flash-background: var(--color-danger-surface);
    --flash-border-color: oklch(var(--oklch-danger) / 0.3);
    --flash-color: var(--color-danger-text);
  }

  /* Card */
  .card {
    --card-padding: 1.5rem;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--card-padding);
  }
  .form-card { max-inline-size: 40rem; }
  .form-card--wide { max-inline-size: 96rem; }
  .profile-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-inline-size: 36rem;

    h2 {
      font-size: 1.1rem;
      margin-block-end: 1.25rem;
    }
  }
  .stat-card { text-align: center; }
  .stat-label {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin-block-end: 0.25rem;
    text-transform: uppercase;
  }
  .stat-value {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
  }

  .settings-index {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
  .settings-index-card {
    color: inherit;
    display: block;
    text-decoration: none;
    transition: border-color 0.15s ease;

    &:hover,
    &:focus-visible {
      border-color: var(--color-primary);
    }
    .form-section-heading { margin-block-start: 0; }
    .form-section-hint { margin-block-end: 0.75rem; }

    @media (prefers-reduced-motion: reduce) { transition: none; }
  }

  /* Callout — accent side-tab box, shared by the marker comment, sample
     answer, and marking result panels (issue #900). Variants only set the
     --callout-* properties. */
  .callout {
    --callout-accent: var(--color-accent);
    --callout-background: var(--color-surface-raised);

    background: var(--callout-background);
    border-end-end-radius: var(--radius-sm);
    border-end-start-radius: 0;
    border-inline-start: 3px solid var(--callout-accent);
    border-start-end-radius: var(--radius-sm);
    border-start-start-radius: 0;
    padding: var(--space-6) var(--space-8);
  }
  .callout--success {
    --callout-accent: var(--color-success);
    --callout-background: var(--color-success-surface);
  }
  .callout--neutral { --callout-accent: var(--color-border); }

  /* Buttons. Colour variants and sizes only set the --btn-* properties; the
     defaults give a bare .btn the outlined look of .btn-ghost. */
  .btn {
    --btn-background: transparent;
    --btn-border: 1px solid oklch(var(--oklch-border));
    --btn-color: var(--color-text);
    --btn-font-size: 0.9rem;
    --btn-hover-opacity: 0.88;
    --btn-padding: 0.5rem 1rem;
    --btn-radius: var(--radius-sm);

    align-items: center;
    background: var(--btn-background);
    border: var(--btn-border);
    border-radius: var(--btn-radius);
    color: var(--btn-color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--btn-font-size);
    font-weight: 500;
    gap: 0.4rem;
    justify-content: center;
    min-block-size: 44px;
    padding: var(--btn-padding);
    text-decoration: none;
    transition: background 0.15s, opacity 0.15s;

    &:hover {
      opacity: var(--btn-hover-opacity);
      text-decoration: none;
    }

    &.btn--loading {
      cursor: progress;
      opacity: 0.75;
      pointer-events: none;

      &::before {
        animation: btn-spin 0.7s linear infinite;
        block-size: 0.9em;
        border: 2px solid currentColor;
        border-block-start-color: transparent;
        border-radius: 50%;
        content: "";
        flex-shrink: 0;
        inline-size: 0.9em;
        margin-inline-end: 0.1em;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;

      &.btn--loading::before { animation: none; }
    }

    /* Full width on phones, unless a variant sets --btn-inline-size */
    @media (max-width: 640px) { inline-size: var(--btn-inline-size, 100%); }
  }
  @keyframes btn-spin { to { transform: rotate(360deg); } }

  .btn-primary {
    --btn-background: var(--color-primary);
    --btn-border: none;
    --btn-color: var(--color-text-on-primary);
    --btn-hover-opacity: 1;

    &:hover { --btn-background: var(--color-primary-hover); }
  }
  .btn-accent {
    --btn-background: var(--color-accent);
    --btn-border: none;
    --btn-color: var(--color-text);
  }
  /* .btn-secondary had no rule and fell back to bare link colour (#1289) */
  .btn-ghost,
  .btn-secondary {
    --btn-hover-opacity: 1;

    &:hover { --btn-background: oklch(var(--oklch-canvas-raised)); }
  }
  .btn-danger {
    --btn-background: var(--color-danger);
    --btn-border: none;
    --btn-color: var(--color-text-on-primary);
  }
  .btn-success {
    --btn-background: oklch(var(--oklch-success));
    --btn-border: none;
    --btn-color: var(--color-text-on-primary);
    --btn-hover-opacity: 1;

    &:hover { --btn-background: oklch(var(--oklch-success) / 0.85); }
  }
  .btn-warning {
    --btn-background: oklch(var(--oklch-warning));
    --btn-border: none;
    --btn-color: oklch(0.2 0 0);
    --btn-hover-opacity: 1;

    &:hover { --btn-background: oklch(var(--oklch-warning) / 0.85); }
  }

  .btn-sm {
    --btn-font-size: 0.8rem;
    --btn-inline-size: auto;
    --btn-padding: 0.3rem 0.7rem;
  }
  .btn-lg {
    --btn-font-size: 1rem;
    --btn-padding: 0.75rem 1.25rem;
    --btn-radius: var(--radius-md);
  }
  .btn-xs {
    --btn-font-size: 0.72rem;
    --btn-padding: 0.2em 0.6em;

    min-inline-size: 44px;
  }

  .btn-remove {
    align-items: center;
    background: transparent;
    block-size: 44px;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    color: var(--color-danger);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.9rem;
    inline-size: 44px;
    justify-content: center;
    line-height: 1;
    padding: 0;

    &:hover {
      background: var(--color-danger);
      color: var(--color-text-on-primary);
    }
  }

  /* Forms */
  .form {
    display: flex;
    flex-direction: column;
    gap: 0;

    /* A bare <fieldset> wrapping a whole form exists only to carry `disabled`
       when an assessment is published (items/edit, questions/edit). The reset
       zeroes padding but not the browser's default fieldset border, so without
       this it draws a box tight against the form's first label. min-width keeps
       it from refusing to shrink, which is a fieldset-specific default. */
    > fieldset:not([class]) {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      min-inline-size: 0;
      padding: 1.25rem;
    }
  }
  .field {
    margin-block-end: 1rem;

    .form-hint { margin-block-end: 0; }
  }

  /* The sibling of .field used by the item and question authoring forms. Several
     rules around the app switch this off for inline layouts
     (.form-inline, .slideshow-add-form, .bank-insert-form), which only makes
     sense against a base margin -- without one every authoring form stacks its
     labels and inputs with no rhythm at all. */
  .form-group { margin-block-end: 1rem; }
  /* A group of radios or checkboxes: no browser fieldset border, and the legend reads as the
     field's label */
  fieldset.form-group {
    border: none;
    min-inline-size: 0;

    legend {
      color: var(--color-text);
      font-size: 0.875rem;
      font-weight: 500;
      margin-block-end: 0.3rem;
      padding: 0;
    }
  }

  .field label,
  label {
    color: var(--color-text);
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-block-end: 0.3rem;
  }

  /* Base control — inputs, textareas, and selects share the same foundation */
  .input,
  .field input,
  .field select,
  .field textarea,
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="text"],
  select.form-control,
  input.form-control,
  textarea.form-control {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.9rem;
    inline-size: 100%;
    min-block-size: 44px;
    padding: 0.5rem 0.75rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }

  /* Hover — lift the border to mid-ink so the control is clearly interactive */
  .input:hover,
  .field input:hover,
  .field select:hover,
  input[type="email"]:hover,
  input[type="number"]:hover,
  input[type="password"]:hover,
  input[type="text"]:hover,
  select.form-control:hover,
  input.form-control:hover {
    border-color: oklch(var(--oklch-ink-mid));
  }

  /* Focus ring */
  .input:focus,
  .field input:focus,
  .field select:focus,
  input:focus,
  select.form-control:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 4px oklch(var(--oklch-border-focus) / 0.12);
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* Custom select — strip OS chrome and inject a themed chevron. Not nested:
     `&` would wrap both selectors in :is() and lift plain `select` to the
     specificity of `select.form-control`, beating Lexxy's own pickers. */
  select,
  select.form-control {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  select:not([multiple]),
  select.form-control:not([multiple]) {
    background-image: var(--select-chevron);
    background-position: right 0.6rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-inline-end: 2.25rem;
  }
  select:disabled,
  select.form-control:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  .input-disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .form-group-header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-block-end: 0.3rem;

    label { margin-block-end: 0; }
  }

  /* Validation summary at the top of a form, in the .alert-danger style */
  .form-errors {
    background: var(--color-danger-surface);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    color: var(--color-danger-text);
    font-size: 0.875rem;
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;

    ul { margin: 0; padding-inline-start: 1.25rem; }
  }

  /* A read-only value shown where a control would be */
  .form-control-static {
    color: var(--color-text);
    font-size: 0.9rem;
    margin: 0;
    padding-block: 0.5rem;
  }

  .checkbox-group {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }

  .item-stem-source {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
  }

  /* Tables */
  .table-wrap { overflow-x: auto; }
  table {
    border-collapse: collapse;
    font-size: 0.9rem;
    inline-size: 100%;
  }
  th {
    border-block-end: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.75rem;
    text-align: start;
    text-transform: uppercase;
  }
  td {
    border-block-end: 1px solid var(--color-border);
    padding: 0.75rem;
    vertical-align: middle;
  }
  tr:last-child td { border-block-end: none; }

  /* A row of form groups sharing the width. */
  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    .form-group {
      flex: 1;
      min-inline-size: 10rem;
    }

    /* On widened form cards, cap each field so number/text inputs line up with the compact
       16–28rem columns used elsewhere, instead of stretching to fill the wider card. */
    .form-card--wide & > .form-group { flex: 0 1 28rem; }
  }

  /* Badges. Variants only set the --badge-* properties. */
  .badge {
    --badge-background: transparent;
    --badge-color: inherit;

    background: var(--badge-background);
    border-radius: var(--radius-full);
    color: var(--badge-color);
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.375em 1em;
    text-transform: uppercase;
  }
  .badge-admin,
  .badge-coordinator,
  .badge-school_admin {
    --badge-background: var(--color-primary-tint);
    --badge-color: var(--color-primary);
  }
  .badge-member,
  .badge-staff {
    --badge-background: var(--color-surface-sunken);
    --badge-color: var(--color-text-secondary);
  }
  .badge-pending,
  .badge-marker {
    --badge-background: var(--color-warning-surface);
    --badge-color: var(--color-warning-text);
  }
  .badge-accepted,
  .badge-student {
    --badge-background: var(--color-success-surface);
    --badge-color: var(--color-success-text);
  }
  .badge--submitted {
    --badge-background: light-dark(oklch(0.93 0.06 140), var(--color-success-surface));
    --badge-color: light-dark(oklch(0.35 0.12 140), var(--color-success-text));
  }
  .badge--practice,
  .badge--purpose-practice {
    --badge-background: light-dark(oklch(0.93 0.08 250), oklch(0.30 0.06 250));
    --badge-color: light-dark(oklch(0.35 0.14 250), oklch(0.85 0.08 250));
  }
  .badge--purpose-exam {
    --badge-background: light-dark(oklch(0.93 0.08 25), oklch(0.28 0.06 25));
    --badge-color: light-dark(oklch(0.40 0.15 25), oklch(0.80 0.12 25));
  }
  /* Sitting status (schedule) */
  .badge--scheduled,
  .badge--in_progress,
  .badge--completed,
  .badge--cancelled,
  .badge--manual,
  .badge--flagged { --badge-color: var(--color-text-on-primary); }
  .badge--scheduled { --badge-background: var(--color-primary); }
  .badge--in_progress { --badge-background: oklch(var(--oklch-warning)); }
  .badge--completed { --badge-background: var(--color-success); }
  .badge--cancelled { --badge-background: var(--color-text-muted); }
  .badge--manual { --badge-background: oklch(60% 0.23 293); }
  .badge--flagged { --badge-background: var(--color-danger); }
  /* Exam block planner and timetable */
  .badge--other {
    --badge-background: var(--color-surface-sunken);
    --badge-color: var(--color-text-secondary);
  }
  .badge--warning {
    --badge-background: var(--color-warning-surface);
    --badge-color: var(--color-warning-text);
  }
  /* Attempt status (sitting responses) */
  .badge-not_started {
    --badge-background: var(--color-surface-raised);
    --badge-color: var(--color-text-muted);
  }
  .badge-in_progress {
    --badge-background: light-dark(oklch(95% 0.05 250), oklch(0.30 0.06 250));
    --badge-color: light-dark(oklch(35% 0.15 250), oklch(0.85 0.08 250));
  }
  .badge-info {
    --badge-background: var(--color-primary-tint);
    --badge-color: var(--color-primary);
  }
  .badge-submitted {
    --badge-background: light-dark(oklch(93% 0.07 145), var(--color-success-surface));
    --badge-color: light-dark(oklch(30% 0.12 145), var(--color-success-text));
  }
  /* Item difficulty (analysis) */
  .badge-hardest {
    --badge-background: var(--color-danger-surface);
    --badge-color: var(--color-danger-text);
  }
  .badge-easiest {
    --badge-background: var(--color-success-surface);
    --badge-color: var(--color-success-text);
  }
  /* Assessment status, purpose and sample (authoring) */
  .badge-draft {
    --badge-background: light-dark(oklch(0.93 0.05 220), oklch(0.30 0.05 220));
    --badge-color: light-dark(oklch(0.32 0.08 220), oklch(0.85 0.06 220));
  }
  .badge-ready_for_review {
    --badge-background: light-dark(oklch(0.92 0.08 60), var(--color-warning-surface));
    --badge-color: light-dark(oklch(0.35 0.10 60), var(--color-warning-text));
  }
  .badge-published {
    --badge-background: light-dark(oklch(0.92 0.10 140), var(--color-success-surface));
    --badge-color: light-dark(oklch(0.32 0.12 140), var(--color-success-text));
  }
  .badge-archived {
    --badge-background: light-dark(oklch(0.90 0.02 0), oklch(0.30 0.02 0));
    --badge-color: light-dark(oklch(0.45 0.04 0), oklch(0.80 0.03 0));
  }
  .badge-neutral {
    --badge-background: light-dark(oklch(0.93 0.01 250), oklch(0.30 0.01 250));
    --badge-color: light-dark(oklch(0.40 0.03 250), oklch(0.80 0.02 250));
  }
  .badge-flagged {
    --badge-background: light-dark(oklch(0.93 0.08 30), var(--color-danger-surface));
    --badge-color: light-dark(oklch(0.45 0.19 30), var(--color-danger-text));
  }
  .badge-sample {
    --badge-background: light-dark(oklch(0.90 0.12 300), oklch(0.30 0.08 300));
    --badge-color: light-dark(oklch(0.35 0.15 300), oklch(0.85 0.10 300));
  }
  .badge-purpose-exam {
    --badge-background: light-dark(oklch(0.92 0.10 25), oklch(0.28 0.06 25));
    --badge-color: light-dark(oklch(0.40 0.15 25), oklch(0.80 0.12 25));
  }
  .badge-purpose-practice {
    --badge-background: light-dark(oklch(0.92 0.08 250), oklch(0.30 0.06 250));
    --badge-color: light-dark(oklch(0.38 0.12 250), oklch(0.85 0.08 250));
  }

  .question-id-badge { font-family: var(--font-mono); }

  /* Roles accordion in users table */
  .roles-accordion { font-size: 0.875rem; }
  .roles-accordion__summary {
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    list-style: none;
    user-select: none;

    &::-webkit-details-marker { display: none; }
    &::before {
      content: "▶ ";
      font-size: 0.65rem;
      vertical-align: middle;
    }
    details[open] &::before { content: "▼ "; }
  }
  .roles-accordion__list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
  }
  .roles-accordion__item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .roles-accordion__subject {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    min-inline-size: 6rem;
  }

  /* Pagy */
  .pagy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    margin-block-start: 1rem;

    a,
    span {
      align-items: center;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      color: var(--color-text);
      display: inline-flex;
      font-size: 0.85rem;
      justify-content: center;
      min-block-size: 2rem;
      min-inline-size: 2rem;
      padding: 0.25rem 0.5rem;
      text-decoration: none;
    }
    .active span {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-text-on-primary);
    }
  }

  /* Empty states */
  .empty-state {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    margin-block-start: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
  }
  .empty-state-message {
    font-size: 0.95rem;
    margin-block-end: 1rem;
  }

  /* Onboarding */
  .onboarding-page {
    margin-inline: auto;
    max-inline-size: 32rem;
    padding-block: 3rem;
    text-align: center;

    h1 { margin-block-end: 0.5rem; }
    video {
      block-size: auto;
      inline-size: 100%;
      margin-block-end: 1.5rem;
    }
    p {
      color: var(--color-text-secondary);
      margin-block-end: 2rem;
    }
    .form-card {
      margin-inline: auto;
      text-align: start;
    }
  }
  /* Signup and verify-email carry the founder's-letter serif, to match the
     login card and the v3 landing. The other .onboarding-page screens
     (welcome, pending approval, legal) deliberately keep the sans heading. */
  #signup-heading,
  #verify-heading {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* Signup uses the full page width: the form sits beside the "what's
     included" panel, and the organisation fields go two-up. */
  .onboarding-page--signup {
    max-inline-size: 64rem;
    text-align: start;
  }
  .signup-layout {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;

    .signup-form-card { margin-inline: 0; }
    .signup-plan-summary {
      margin-block-end: 0;
      order: -1;
    }

    @media (min-width: 60rem) {
      grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr);

      .signup-plan-summary {
        inset-block-start: 1.5rem;
        order: 0;
        position: sticky;
      }
    }
  }
  .signup-field-grid {
    display: grid;
    gap: 0 1.25rem;
    grid-template-columns: 1fr;

    @media (min-width: 40rem) {
      grid-template-columns: 1fr 1fr;

      .field--full { grid-column: 1 / -1; }
    }
  }

  .signup-plan-summary {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-block-end: 1.5rem;
    padding: 1.25rem;

    ul {
      margin: 0 0 1.25rem;
      padding-inline-start: 1.25rem;
    }
    li { margin-block-end: 0.25rem; }
    .signup-plan-heading {
      color: var(--color-text);
      font-weight: 600;
      margin: 1.5rem 0 0.5rem;

      &:first-child { margin-block-start: 0; }
    }
    .signup-plan-note {
      color: var(--color-text-muted);
      font-size: 0.9rem;
      margin-block-end: 0.5rem;

      &:last-child { margin-block-end: 0; }
    }
  }

  /* Indeterminate progress bar, used while a background job is running */
  .progress {
    background-color: var(--color-surface-sunken);
    block-size: 12px;
    border-radius: var(--radius-sm);
    inline-size: 160px;
    margin-block-end: 0.75rem;
    overflow: hidden;
    position: relative;
  }
  .progress__bar {
    animation: progress-slide 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, white));
    block-size: 100%;
    inline-size: 25%;
  }
  @keyframes progress-slide {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(425%); }
  }
  .setup-tip {
    color: var(--color-text-muted);
    font-size: 0.9rem;
  }
}