@layer components {
  /* ── Exam block planner (#1362): sessions grid and the exams still to place ── */
  .exam-planner {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    margin-block-end: 2rem;

    @media (width < 64rem) { grid-template-columns: minmax(0, 1fr); }
  }

  .exam-planner-grid-wrap { overflow-x: auto; }

  .exam-planner-grid {
    border-collapse: collapse;
    min-inline-size: 100%;

    & th,
    & td {
      border: 1px solid var(--color-border);
      padding: 0.375rem;
      vertical-align: top;
    }
    & thead th { font-size: 0.8125rem; white-space: nowrap; }
    & tbody th { font-size: 0.8125rem; text-align: start; white-space: nowrap; }
  }

  .exam-planner-time { color: var(--color-text-muted); display: block; font-weight: 400; }

  .exam-planner-cell {
    min-inline-size: 11rem;

    &.exam-planner-cell--over { background: var(--color-primary-tint); }
  }

  .exam-planner-list {
    display: grid;
    gap: 0.375rem;
    list-style: none;
    margin: 0 0 0.375rem;
    padding: 0;
  }

  .exam-planner-exam {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-inline-start: 4px solid var(--color-border);
    border-radius: 0.375rem;
    display: grid;
    font-size: 0.8125rem;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;

    &[draggable="true"] { cursor: grab; }
  }
  .exam-planner-exam--selected { border-inline-start-color: var(--color-primary); outline: 2px solid var(--color-primary); }
  .exam-planner-exam--clash { background: var(--color-danger-surface); border-inline-start-color: var(--color-danger); }
  .exam-planner-exam--fixed { background: var(--color-surface-sunken); border-style: dashed; }

  .exam-planner-name { font-weight: 600; }
  .exam-planner-meta { color: var(--color-text-secondary); }
  .exam-planner-badges:empty { display: none; }

  /* Venue flags and load (#1365): red can't hold the exam, amber warns */
  .exam-planner-flags {
    display: grid;
    gap: 0.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .exam-planner-flag { font-weight: 600; }
  .exam-planner-flag--hard { color: var(--color-danger-text); }
  .exam-planner-flag--soft { color: var(--color-warning-text); }

  .exam-planner-load {
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 0 0.5rem;
    list-style: none;
    margin: 0 0 0.375rem;
    padding: 0;
  }
  .exam-planner-load--over { color: var(--color-danger-text); font-weight: 600; }

  .exam-planner-clash {
    color: var(--color-danger-text);

    & summary { cursor: pointer; font-weight: 600; }
    & ul { margin: 0.25rem 0 0; padding-inline-start: 1rem; }
  }

  /* Soft-constraint flags (#1366) */
  .exam-planner-clash--soft { color: var(--color-warning-text); }
  .exam-planner-reason { margin: 0; }

  .exam-planner-actions,
  .exam-planner-inline-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .exam-planner-icon-form { display: contents; }
  /* Square icon buttons, keeping .btn's 44px minimum target */
  .exam-planner-icon-btn {
    --btn-padding: 0;

    inline-size: 44px;
  }
  .exam-planner-icon { flex: none; }

  .exam-planner-side section { margin-block-end: 1.5rem; }

  /* Session rows on the exam block form */
  .exam-block-sessions {
    max-inline-size: 36rem;

    & td:last-child,
    & th:last-child { text-align: center; }
  }
}