@layer components {
  /* Assessment index */
  .assessment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 1.5rem;
  }

  .assessment-card {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
  }
  .assessment-card--row {
    align-items: center;
    display: flex;
    gap: 1rem;
  }
  .assessment-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .assessment-card-main {
    flex: 1;
    min-inline-size: 0;

    h3 {
      font-size: 1rem;
      font-weight: 600;
      margin: 0 0 0.25rem;
    }
    .meta {
      color: var(--color-text-secondary);
      font-size: 0.85rem;
      margin: 0;
    }
  }
  .assessment-card-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
  }

  .assessment-meta {
    align-items: center;
    display: flex;
    gap: 0.75rem;
  }
  .assessment-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;

    a {
      color: inherit;
      text-decoration: none;

      &:hover { color: var(--color-primary); }
    }
  }
  .assessment-description {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
  }
  .assessment-page-count {
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }
  .assessment-footer {
    align-items: center;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    margin-block-start: 0.5rem;
    padding-block-start: 0.75rem;
  }
  .assessment-updated {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }
  .assessment-submitted-by {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    margin: 0;
  }
  .assessment-actions {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
  }

  /* Approval queue */
  .reject-disclosure {
    position: relative;

    summary {
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker { display: none; }
    }
  }
  .reject-form {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    inline-size: 20rem;
    inset-block-start: 100%;
    inset-inline-start: 0;
    margin-block-start: 0.5rem;
    padding: 0.75rem;
    position: absolute;
    z-index: 10;

    textarea {
      inline-size: 100%;
      min-block-size: 5rem;
      resize: vertical;
    }
  }

  /* Inline confirm (e.g. duplicate actions) */
  .inline-confirm {
    align-items: center;
    display: inline-flex;
  }
  .inline-confirm-panel {
    align-items: center;
    color: var(--color-text-secondary);
    display: inline-flex;
    font-size: 0.85rem;
    gap: 0.4rem;
  }

  /* Banners on assessment show and edit (SEB lockdown, locked assessment). Variants only
     set --alert-*. */
  .alert {
    --alert-background: transparent;
    --alert-border: none;
    --alert-color: inherit;

    background: var(--alert-background);
    border: var(--alert-border);
    border-radius: var(--radius-md);
    color: var(--alert-color);
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
  }
  .alert--info {
    --alert-background: var(--color-primary-tint);
    --alert-border: 1px solid var(--color-border);
    --alert-color: var(--color-text);
  }
  .alert-warning,
  .alert--warning {
    --alert-background: light-dark(oklch(0.95 0.06 90), var(--color-warning-surface));
    --alert-border: 1px solid light-dark(oklch(0.8 0.1 90), oklch(var(--oklch-warning) / 0.5));
    --alert-color: light-dark(oklch(0.32 0.08 90), var(--color-warning-text));
  }
  .alert-warning p { margin: 0.25rem 0 0; }
  .alert-danger {
    --alert-background: var(--color-danger-surface);
    --alert-border: 1px solid var(--color-danger);
    --alert-color: var(--color-danger-text);
  }

  .section-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-block-end: 1rem;

    h2 { margin: 0; }
  }
  .table-actions {
    align-items: center;
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
    text-align: end;
    white-space: nowrap;

    form { display: inline; }
  }
  .header-actions {
    display: flex;
    gap: 0.75rem;
  }

  /* Authoring layout (page editor) */
  .authoring-layout {
    align-items: start;
    display: grid;
    grid-template-columns: var(--authoring-split, 1fr) 2rem 2fr;
    margin-block-start: 1.5rem;

    @media (max-width: 768px) { grid-template-columns: 1fr; }
  }
  .authoring-divider {
    --authoring-divider-color: var(--color-border);

    align-items: center;
    align-self: stretch;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    touch-action: none;

    &::before {
      background: var(--authoring-divider-color);
      block-size: 100%;
      border-radius: 2px;
      content: "";
      inline-size: 4px;
    }
    &:hover,
    &:focus-visible { --authoring-divider-color: var(--color-text-muted); }
    &:focus-visible {
      outline: 2px solid var(--color-text-secondary);
      outline-offset: 2px;
    }

    @media (max-width: 768px) { display: none; }
  }
  .authoring-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-inline-size: 0;
  }
  .authoring-section {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-inline-size: 0;
    padding: 1.5rem;
  }
  .section-heading {
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-block-end: 1.25rem;
    padding-block-end: 0.5rem;
    text-transform: uppercase;
  }
  .page-breadcrumb {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-block-start: 0.15rem;
  }

  /* Question jump nav (assessment show) */
  .question-jump-nav {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-start: 1.25rem;
    overflow-x: auto;
    padding: 0.75rem;
  }
  .question-jump-link {
    --question-jump-link-color: var(--color-text-secondary);
    --question-jump-link-border-color: var(--color-border);

    background: var(--color-bg);
    border: 1px solid var(--question-jump-link-border-color);
    border-radius: var(--radius-sm);
    color: var(--question-jump-link-color);
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    text-decoration: none;

    &:hover {
      --question-jump-link-border-color: var(--color-primary);
      --question-jump-link-color: var(--color-primary);
    }
  }

  /* Page list (assessment show) */
  .page-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin-block-start: 1.5rem;
  }
  .page-list-item {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
  }
  .page-list-item--dragging { opacity: 0.45; }
  .assessment-page-section--drop { box-shadow: inset 0 0 0 3px var(--color-accent); }
  .page-list-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-block-end: 0.5rem;
  }
  .page-number {
    font-size: 0.9rem;
    font-weight: 600;
  }
  .page-actions {
    display: flex;
    gap: 0.5rem;
  }
  .page-number-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .question-stem {
    color: oklch(var(--oklch-ink-dark));
    font-size: 0.95rem;
    margin-block-end: 0.5rem;
  }

  /* Item list (page editor) */
  .item-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin-block-end: 1.5rem;
  }
  .item-card {
    background: oklch(var(--oklch-canvas));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
  }
  .item-card-header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-block-end: 0.5rem;
  }
  .item-card-actions {
    display: flex;
    gap: 0.4rem;
    margin-inline-start: auto;
  }
  .item-number {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
  }
  .item-marks {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }

  /* Item type, focus area and topic tags. Variants only set --item-tag-*. */
  .item-type-badge,
  .item-focus-area,
  .item-topic {
    --item-tag-background: transparent;
    --item-tag-color: inherit;
    --item-tag-weight: 500;

    background: var(--item-tag-background);
    border-radius: 4px;
    color: var(--item-tag-color);
    font-size: 0.75rem;
    font-weight: var(--item-tag-weight);
    padding: 0.1em 0.5em;
  }
  .item-type-badge {
    --item-tag-background: light-dark(oklch(0.92 0.04 220), oklch(0.30 0.04 220));
    --item-tag-color: light-dark(oklch(0.32 0.08 220), oklch(0.85 0.06 220));
    --item-tag-weight: 600;
  }
  .item-focus-area {
    --item-tag-background: light-dark(oklch(0.92 0.06 140), var(--color-success-surface));
    --item-tag-color: light-dark(oklch(0.32 0.1 140), var(--color-success-text));
  }
  .item-topic {
    --item-tag-background: light-dark(oklch(0.93 0.04 60), oklch(0.30 0.04 60));
    --item-tag-color: light-dark(oklch(0.38 0.08 60), oklch(0.85 0.06 60));
  }

  .item-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
  }
  .item-summary-row {
    align-items: center;
    display: flex;
    font-size: 0.85rem;
    gap: 0.5rem;
  }

  /* Authoring fieldsets. .choices-fieldset holds a JS choice builder; .form-fieldset is the
     generic one for item forms built from plain nested fields. The base reset zeroes padding on
     everything, so without these a <fieldset> renders as a border hugging its content. */
  .choices-fieldset,
  .form-fieldset {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    margin-block-end: 1rem;
    padding: 1rem;

    legend {
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0 0.5rem;
    }
  }
  .form-fieldset {
    > .form-group:last-child { margin-block-end: 0; }
    input[type="text"],
    input[type="number"],
    textarea,
    select { inline-size: 100%; }

    /* Same box, but collapsible, for a long optional section. The <summary> stands in for
       the legend. */
    &.form-fieldset--details {
      > summary {
        align-items: baseline;
        cursor: pointer;
        display: flex;
        font-size: 0.9rem;
        font-weight: 600;
        gap: 0.5rem;

        .form-subhead {
          font-weight: 400;
          margin: 0;
        }
      }
      &[open] > summary { margin-block-end: 0.75rem; }
    }
  }

  /* A caption above a run of checkboxes, splitting a long tool list into the groups a
     teacher actually chooses between. The fieldset's legend still does the grouping for a
     screen reader; these are signposts inside it. */
  .form-subhead {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0.75rem 0 0.35rem;

    &:first-of-type { margin-block-start: 0.25rem; }
  }

  .form-check-grid {
    display: grid;
    gap: 0.35rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));

    .form-check { margin-block-end: 0; }
  }
  .form-check {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 0.5rem;

    &:last-child { margin-block-end: 0; }
    input[type="checkbox"] {
      flex: 0 0 auto;
      margin: 0;
    }
    label {
      font-size: 0.875rem;
      font-weight: 400;
      margin: 0;
    }
    /* A hint belonging to a checkbox drops onto its own line rather than squeezing the
       label into a column two words wide. */
    .form-hint {
      flex: 1 0 100%;
      margin: 0;
    }
  }

  /* A row of short related fields (axis label, min, max, step): as many across as fit,
     rather than the two-up wrap .form-row falls into. */
  .form-row-grid {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    margin-block-end: 0.9rem;

    .form-group {
      margin-block-end: 0;
      min-inline-size: 0;
    }
  }

  .form-table {
    border-collapse: collapse;
    font-size: 0.85rem;
    inline-size: 100%;

    th {
      border-block-end: 1px solid var(--color-border);
      color: var(--color-text-secondary);
      font-size: 0.8rem;
      padding: 0.3rem 0.4rem;
      text-align: start;
    }
    td { padding: 0.2rem 0.4rem 0.2rem 0; }
    td:last-child { padding-inline-end: 0; }
  }

  .choices-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-block-end: 0.75rem;
  }
  .choice-row {
    align-items: flex-start;
    display: flex;
    gap: 0.6rem;

    .lexxy-editor--compact { flex: 1; }
  }
  .lexxy-editor--compact lexxy-editor { min-block-size: 80px; }
  .choice-correct-label {
    --choice-correct-label-color: var(--color-text-muted);

    align-items: center;
    border-radius: var(--radius-sm);
    color: var(--choice-correct-label-color);
    cursor: pointer;
    display: flex;
    padding: 0.6rem 0.25rem 0.25rem;

    &:has(input:checked) { --choice-correct-label-color: light-dark(oklch(0.40 0.14 140), var(--color-success-text)); }
  }
  .choice-add-btn {
    --btn-border: 1px dashed var(--color-border);
    --btn-color: var(--color-primary);
    --btn-hover-opacity: 1;

    inline-size: 100%;
    margin-block-start: 0.25rem;

    &:hover { --btn-background: oklch(from var(--color-primary) l c h / 0.08); }
  }

  /* Add item form */
  .add-item-form {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: 0.5rem;
    padding-block-start: 1.25rem;
  }
  .add-item-heading {
    font-size: 0.9rem;
    font-weight: 600;
    margin-block-end: 0.75rem;
  }
  .form-inline {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

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

  /* Misc */
  .empty-hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-style: italic;
  }
  .item-meta {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }

  /* short_response preview */
  .item-preview-textarea {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text-secondary);
    display: block;
    font-size: 0.9rem;
    inline-size: 100%;
    margin-block-start: 0.25rem;
    min-block-size: 5rem;
    padding: 0.4rem 0.6rem;
    resize: none;
  }
  .item-sample-answer {
    font-size: 0.875rem;
    margin-block-start: 0.75rem;
  }
  .item-sample-answer-label {
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-block-end: 0.35rem;
    text-transform: uppercase;
  }

  /* Form two-column: compact fields left, rich content right. The left column stays a fixed
     compact width so it doesn't stretch as the card widens; only the rich-content column
     absorbs extra space. */
  .form-section--two-col {
    align-items: start;
    display: grid;
    gap: 1.5rem 2rem;
    grid-template-columns: minmax(16rem, 26rem) 1fr;

    /* Both sides hold compact fields/checkbox lists, so cap each column rather than let them
       stretch into empty space as the card widens. */
    &.form-section--equal { grid-template-columns: repeat(2, minmax(16rem, 28rem)); }
    .form-col {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

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

  /* Question and page preview layout. The two-column variants only set
     --page-preview-columns. */
  .page-preview-container {
    --page-preview-columns: none;

    margin: 0 auto;
    max-inline-size: 1100px;
  }
  .page-preview-container--two_column_1_2 { --page-preview-columns: 1fr 2fr; }
  .page-preview-container--two_column_1_1 { --page-preview-columns: 1fr 1fr; }
  .page-preview-container--two_column_2_1 { --page-preview-columns: 2fr 1fr; }
  .page-preview-container--two_column_1_2,
  .page-preview-container--two_column_1_1,
  .page-preview-container--two_column_2_1 { max-inline-size: 1400px; }

  .page-preview-two-col {
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-lg);
    display: grid;
    gap: 0;
    grid-template-columns: var(--page-preview-columns);
    overflow: hidden;

    @media (max-width: 640px) { grid-template-columns: 1fr; }
  }
  .page-preview-stem-col {
    background: oklch(var(--oklch-canvas));
    border-inline-end: 1px solid oklch(var(--oklch-border));
    overflow-y: auto;
    padding: 2rem;

    .question-stem {
      background: transparent;
      border: none;
      padding: 0;
    }

    @media (max-width: 640px) {
      border-block-end: 1px solid oklch(var(--oklch-border));
      border-inline-end: none;
    }
  }
  .page-preview-items-col {
    background: oklch(var(--oklch-canvas-raised));
    overflow-y: auto;
    padding: 2rem;
  }

  /* Video captions upload section (items/edit, pages/edit) */
  .video-captions-section {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    margin: 1rem 0 1.5rem;
    padding: 1rem;
  }
  .video-captions-section__heading {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
  }
  .video-captions-section__item {
    align-items: center;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.5rem 0;

    &:first-of-type {
      border-block-start: none;
      padding-block-start: 0;
    }
  }
  .video-captions-section__filename {
    color: var(--color-text);
    flex: 1;
    font-size: 0.875rem;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .video-captions-section__status {
    color: var(--color-success);
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .video-captions-section__form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .video-captions-section__file-input { font-size: 0.8rem; }
}