@layer components {
  /* Marker interface styles */
  .marker-item { position: relative; }

  .marker-score-row {
    align-items: flex-start;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
  }
  .marker-score-label {
    align-items: center;
    color: var(--color-text-secondary);
    display: flex;
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.5rem;
  }
  .marker-score-input {
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    inline-size: 4rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
  }
  /* Overall comment (#1327): collapsed <details> with a one-line preview in the summary. */
  .marker-comment {
    flex: 1;
    font-size: 0.875rem;
    min-inline-size: 16rem;
  }
  .marker-comment-summary {
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    list-style: none;
    min-inline-size: 0;
  }
  /* display: flex drops the native disclosure triangle, so draw one. */
  .marker-comment-summary::-webkit-details-marker { display: none; }
  .marker-comment-summary::before { content: "\25B8"; }
  .marker-comment[open] > .marker-comment-summary::before { content: "\25BE"; }
  .marker-comment-heading {
    flex-shrink: 0;
    font-weight: 500;
  }
  .marker-comment-preview {
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .marker-comment[open] .marker-comment-preview { display: none; }
  .marker-comment-input { margin-block-start: 0.5rem; }

  /* Marker pills. Variants only set --marker-badge-*. */
  .marker-auto-badge,
  .marker-override-badge,
  .marker-variant-badge {
    --marker-badge-background: transparent;
    --marker-badge-color: inherit;
    --marker-badge-weight: 600;

    background: var(--marker-badge-background);
    border-radius: 9999px;
    color: var(--marker-badge-color);
    font-size: 0.75rem;
    font-weight: var(--marker-badge-weight);
    padding: 0.125rem 0.5rem;
  }
  .marker-auto-badge {
    --marker-badge-background: light-dark(oklch(93% 0.08 250), oklch(0.30 0.06 250));
    --marker-badge-color: light-dark(oklch(35% 0.14 250), oklch(0.85 0.08 250));
  }
  .marker-override-badge,
  .marker-variant-badge--other {
    --marker-badge-background: light-dark(oklch(93% 0.06 80), var(--color-warning-surface));
    --marker-badge-color: light-dark(oklch(45% 0.12 55), var(--color-warning-text));
  }
  .marker-variant-badge { --marker-badge-weight: 500; }
  .marker-variant-badge--selected {
    --marker-badge-background: var(--color-primary-tint);
    --marker-badge-color: var(--color-primary-hover);
  }

  /* By-question list */
  .marker-by-question-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .marker-by-question-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
  }

  /* Student results view */
  .results-score-row {
    align-items: flex-start;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
  }
  .results-score {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
  }
  .results-comment {
    color: var(--color-text);
    font-size: 0.875rem;
    inline-size: 100%;
  }
  .results-comment-label {
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-inline-end: 0.375rem;
  }

  .marker-student-label {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-block-end: 0.75rem;
  }

  /* Variant marking */
  .marker-variant-notice {
    background: light-dark(oklch(93% 0.06 80), var(--color-warning-surface));
    border: 1px solid oklch(var(--oklch-warning));
    border-radius: 0.375rem;
    color: light-dark(oklch(45% 0.12 55), var(--color-warning-text));
    font-size: 0.875rem;
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
  }

  /* Variants only set --marker-variant-block-*. */
  .marker-variant-block {
    --marker-variant-block-background: transparent;
    --marker-variant-block-border-color: var(--color-border);

    background: var(--marker-variant-block-background);
    border: 1px solid var(--marker-variant-block-border-color);
    border-radius: 0.5rem;
    margin-block-start: 1rem;
    padding: 1rem;
  }
  .marker-variant-block--selected {
    --marker-variant-block-background: var(--color-primary-tint);
    --marker-variant-block-border-color: var(--color-primary);
  }
  .marker-variant-block--other { --marker-variant-block-background: var(--color-surface-sunken); }
  .marker-variant-header {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
  }
  .marker-variant-label {
    font-size: 1rem;
    font-weight: 600;
  }
}