/* Question area: cards, page layouts, choices, response inputs, word count, marks hint, bottom navigation and submitted state. */
@layer components {
  .student-attempt-main {
    background: var(--exam-bg-colour, transparent);
    flex: 1;
    inline-size: 100%;
    padding: var(--space-4) var(--space-5);

    @media (max-width: 640px) { padding: var(--space-4) var(--space-3); }
  }

  .student-question-card {
    container-type: inline-size;
    inline-size: 100%;
    overflow: hidden;

    @media (max-width: 640px) { margin: 0; }
  }
  .student-question-header {
    align-items: baseline;
    background: var(--exam-bg-colour, oklch(var(--oklch-canvas)));
    border-block-end: 1px solid oklch(var(--oklch-border));
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
  }
  .student-question-number {
    color: var(--exam-font-colour, oklch(var(--oklch-ink-dark)));
    font-family: var(--exam-font-family, inherit);
    font-size: calc(0.875rem * var(--exam-font-scale, 1));
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .student-question-marks {
    color: var(--exam-font-colour, oklch(var(--oklch-ink-mid)));
    font-family: var(--exam-font-family, inherit);
    font-size: calc(0.8125rem * var(--exam-font-scale, 1));
  }
  .student-question-stem {
    border-block-end: 1px solid oklch(var(--oklch-border));
    color: var(--exam-font-colour, oklch(var(--oklch-ink-darkest)));
    font-family: var(--exam-font-family, inherit);
    font-size: calc(1rem * var(--exam-font-scale, 1));
    font-weight: 400;
    line-height: var(--exam-line-height, 1.7);
    margin: 0;
    padding: 2rem;

    @media (max-width: 640px) {
      font-size: 1rem;
      padding: var(--space-5);
    }
  }
  .student-item-divider {
    border: none;
    border-block-start: 1px solid oklch(var(--oklch-border));
    margin: 0;
  }
  .student-item {
    font-size: 1rem;
    padding: 2rem;

    @media (max-width: 640px) { padding: var(--space-4); }
  }

  /* Two-column page layouts. The page's layout class only sets --two-col-columns. */
  .student-question-two-col {
    --two-col-columns: 1fr 1fr;

    display: grid;
    gap: 0;
    grid-template-columns: var(--two-col-columns);
    min-block-size: 240px;

    .student-page--two_column_1_2 & { --two-col-columns: 1fr 2fr; }
    .student-page--two_column_2_1 & { --two-col-columns: 2fr 1fr; }

    @media (max-width: 640px) { grid-template-columns: 1fr; }
  }
  .student-question-stem-col,
  .student-question-items-col {
    max-block-size: calc(100vh - 300px);
    overflow-y: auto;

    @media (max-width: 640px) {
      max-block-size: none;
      overflow-y: visible;
    }
  }
  .student-question-stem-col {
    border-inline-end: 1px solid oklch(var(--oklch-border));

    .student-question-stem {
      border-block-end: none;
      box-sizing: border-box;
    }

    @media (max-width: 640px) {
      border-block-end: 1px solid oklch(var(--oklch-border));
      border-inline-end: none;
    }
  }

  /* Choice list for MCQ/checklist. Item#choices_grid_style sets --choice-cols (and,
     column-major, --choice-rows/--choice-flow) on the fieldset when the author picks a
     multi-column layout. Row-major leaves --choice-rows unset, so grid-template-rows is
     invalid at computed time and falls back to none. */
  .item-choices-fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;

    &[style*="--choice-cols"] {
      display: grid;
      grid-auto-flow: var(--choice-flow, row);
      grid-template-columns: repeat(var(--choice-cols), 1fr);
      grid-template-rows: repeat(var(--choice-rows), 1fr);
    }
  }
  .item-choice-label {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    font-size: 0.95rem;
    gap: var(--space-3);
    line-height: 1.4;
    margin: var(--space-1) 0;
    padding: var(--space-2) var(--space-4);
    transition: background 150ms, box-shadow 150ms, border-color 150ms;

    &:hover { background: oklch(var(--oklch-canvas-sunken)); }
    &:focus-within {
      border-color: oklch(var(--oklch-primary) / 0.4);
      box-shadow: 0 0 0 3px oklch(var(--oklch-primary) / 0.12);
    }
    &.selected {
      background: oklch(var(--oklch-canvas-raised));
      border-color: oklch(var(--oklch-primary) / 0.4);
    }
  }
  .item-choice-input {
    block-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    inline-size: 1rem;
    margin-block-start: 0;
    margin-inline-end: var(--space-4);
    vertical-align: middle;
  }
  .item-choice-text {
    color: var(--exam-font-colour, oklch(var(--oklch-ink-darkest)));
    flex: 1;
    font-family: var(--exam-font-family, inherit);
    font-size: calc(1rem * var(--exam-font-scale, 1));
    line-height: var(--exam-line-height, 1.6);
  }

  .item-stem {
    color: var(--exam-font-colour, inherit);
    font-family: var(--exam-font-family, inherit);
    font-size: calc(1rem * var(--exam-font-scale, 1));
    line-height: var(--exam-line-height, 1.6);
  }

  /* Student response inputs: plain textarea and rich text editor */
  .item-student-textarea,
  .item-student-richtext {
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-md);
    color: var(--exam-font-colour, oklch(var(--oklch-ink-darkest)));
    font-family: var(--exam-font-family, inherit);
    font-size: calc(1rem * var(--exam-font-scale, 1));
    line-height: var(--exam-line-height, 1.6);
    min-block-size: 10rem;
    transition: border-color 150ms, box-shadow 150ms;
  }
  .item-student-textarea {
    background: var(--exam-bg-colour, oklch(var(--oklch-canvas)));
    inline-size: 100%;
    padding: var(--space-4);
    resize: vertical;

    &:focus {
      border-color: oklch(var(--oklch-primary));
      box-shadow: 0 0 0 3px oklch(var(--oklch-primary) / 0.15);
      outline: none;
    }
  }
  .item-student-richtext {
    position: relative; /* anchors the spell check popover (#971) */

    &:focus-within {
      border-color: oklch(var(--oklch-primary));
      box-shadow: 0 0 0 3px oklch(var(--oklch-primary) / 0.15);
    }
  }

  .item-word-count {
    color: var(--exam-font-colour, oklch(var(--oklch-ink-light)));
    font-size: calc(0.8125rem * var(--exam-font-scale, 1));
    margin-block-start: var(--space-2);
    text-align: end;
  }
  .item-word-count__suggested { opacity: 0.7; }

  /* Live spell check underline + suggestions popover (#971).
     The wavy underline itself is applied as a real Lexical TextNode style (see
     spellcheck_controller.js#SPELLCHECK_STYLE), not by this class — a same-format DOM class
     alone gives Lexical no reason not to silently coalesce the isolated word node back into an
     adjacent plain-text sibling on the next reconciliation. This class only marks the resulting
     span as interactive. */
  .spellcheck-underline { cursor: pointer; }
  .spellcheck-popover {
    background: var(--exam-bg-colour, oklch(var(--oklch-canvas)));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.15);
    display: flex;
    flex-direction: column;
    font-size: calc(0.8125rem * var(--exam-font-scale, 1));
    gap: 0.125rem;
    margin-block-start: 0.25rem;
    min-inline-size: 8rem;
    padding: var(--space-1);
    position: absolute;
    z-index: 20;
  }
  .spellcheck-popover-suggestion {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--exam-font-colour, oklch(var(--oklch-ink-darkest)));
    cursor: pointer;
    font: inherit;
    padding: 0.25rem 0.5rem;
    text-align: start;

    &:hover,
    &:focus-visible {
      background: oklch(var(--oklch-primary) / 0.1);
      outline: none;
    }
  }
  .spellcheck-popover-empty {
    color: var(--exam-font-colour, oklch(var(--oklch-ink-light)));
    margin: 0;
    padding: 0.25rem 0.5rem;
  }

  /* Marks hint */
  .item-stem-row {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;

    .item-stem {
      flex: 1;
      min-inline-size: 0;
    }
  }
  .item-marks-inline {
    color: var(--exam-font-colour, oklch(var(--oklch-ink-light)));
    flex-shrink: 0;
    font-size: calc(0.8125rem * var(--exam-font-scale, 1));
    font-weight: 600;
    padding-block-start: 0.15em;
    white-space: nowrap;
  }
  .item-marks-inline--no-stem {
    margin: 0 0 var(--space-3);
    text-align: end;
  }

  /* Bottom navigation */
  .student-attempt-nav {
    background: oklch(var(--oklch-canvas-raised));
    border-block-start: 2px solid oklch(var(--oklch-border));
    inset-block-end: 0;
    position: sticky;
    z-index: 10;
  }
  .student-attempt-nav-inner {
    align-items: center;
    display: flex;
    gap: var(--space-4);
    margin-inline: auto;
    max-inline-size: 100%;
    padding: var(--space-5);
  }
  .student-attempt-nav-spacer { flex: 1; }
  .btn-submit { min-inline-size: 12rem; }

  /* Submitted state */
  .student-attempt-submitted {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-5);
    justify-content: center;
    padding: var(--space-12) var(--space-5);
    text-align: center;

    h2 {
      font-size: 1.75rem;
      font-weight: 700;
      margin: 0;
    }
    p {
      color: oklch(var(--oklch-ink-mid));
      font-size: 1.0625rem;
    }
  }
  .student-attempt-submitted-icon {
    align-items: center;
    background: light-dark(oklch(0.93 0.06 140), var(--color-success-surface));
    block-size: 5rem;
    border-radius: 50%;
    color: light-dark(oklch(0.35 0.12 140), var(--color-success-text));
    display: flex;
    font-size: 2.5rem;
    inline-size: 5rem;
    justify-content: center;
  }
  .student-attempt-submitted-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-block-start: var(--space-2);
  }

  .student-empty-state {
    color: oklch(var(--oklch-ink-mid));
    padding: var(--space-12) var(--space-5);
    text-align: center;
  }
}