/* Load after campus-shell.css. Keep the existing business DOM and print layout. */
@media screen {
  body.campus-ui #learningPanel,
  body.campus-ui #planningPanel {
    --campus-ink: #182e29;
    --campus-green: #143d30;
    --campus-lime: #d6f36b;
    --campus-line: #dce5df;
    --campus-resource-green: #286d52;
    --campus-resource-coral: #b94f39;
    --campus-muted: #62756b;
    min-width: 0;
    color: var(--campus-ink);
    font-family: inherit;
    letter-spacing: 0;
    /* A transformed panel would contain its fixed drawer and report dialog. */
    animation: none;
    transform: none;
  }

  body.campus-ui #learningPanel :is(button, input, select, textarea),
  body.campus-ui #planningPanel :is(button, input, select, textarea) {
    min-width: 0;
    max-width: 100%;
    border-radius: 5px;
    font-family: inherit;
    letter-spacing: 0;
  }

  body.campus-ui #learningPanel :is(input, select, textarea),
  body.campus-ui #planningPanel :is(input, select, textarea) {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #cddbd1;
    background: #fcfdfb;
    color: var(--campus-ink);
    font-size: 14px;
    line-height: 1.6;
    accent-color: var(--campus-green);
    color-scheme: light;
  }

  body.campus-ui #learningPanel textarea,
  body.campus-ui #planningPanel textarea {
    max-height: none;
    resize: vertical;
  }

  body.campus-ui #learningPanel button,
  body.campus-ui #planningPanel button {
    border-color: #cddbd1;
    color: var(--campus-ink);
    background: #fff;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel button:hover:not(:disabled),
  body.campus-ui #planningPanel button:hover:not(:disabled) {
    border-color: #91ac9b;
    background: #edf4e9;
  }

  body.campus-ui #learningPanel :is(button, input, select, textarea, a, summary):focus-visible,
  body.campus-ui #planningPanel :is(button, input, select, textarea, a):focus-visible {
    outline: 3px solid #548563;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
  }

  body.campus-ui #learningPanel :is(button, input, select, textarea):disabled,
  body.campus-ui #planningPanel :is(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  body.campus-ui #planningPanel :is(input, textarea):disabled {
    color: #485f52;
    background: #f2f5f1;
    opacity: 1;
    -webkit-text-fill-color: #485f52;
  }

  /* Hidden attributes remain authoritative for roles, filters and dialogs. */
  body.campus-ui #learningPanel[hidden],
  body.campus-ui #planningPanel[hidden],
  body.campus-ui #learningPanel [hidden],
  body.campus-ui #planningPanel [hidden] {
    display: none !important;
  }

  body.campus-ui #learningPanel:not([hidden]) {
    --campus-learning-time-width: 88px;
    --campus-learning-period-width: 60px;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: auto;
    scrollbar-gutter: auto;
    background: transparent;
  }

  body.campus-ui #learningPanel .learning-timetable-toolbar,
  body.campus-ui #learningPanel .learning-week-toolbar {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 6px 0 12px;
    border: 0;
    background: transparent;
  }

  body.campus-ui #learningPanel .learning-timetable-title {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  body.campus-ui #learningPanel .learning-timetable-title h2,
  body.campus-ui #planningPanel .planning-toolbar h2 {
    margin: 0;
    color: var(--campus-ink);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-timetable-title span {
    display: block;
    min-width: 0;
    max-width: none;
    overflow: visible;
    color: var(--campus-muted);
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-identity-controls,
  body.campus-ui #learningPanel .learning-week-actions,
  body.campus-ui #learningPanel .learning-week-meta {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.campus-ui #learningPanel .learning-identity-controls label,
  body.campus-ui #learningPanel .learning-week-actions label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--campus-muted);
    font-size: 12px;
    white-space: nowrap;
  }

  body.campus-ui #learningPanel .learning-identity-controls select {
    width: 148px;
    height: auto;
  }

  body.campus-ui #learningPanel .learning-identity-controls label:last-child select {
    width: 180px;
  }

  body.campus-ui #learningPanel .learning-week-actions input {
    width: 156px;
    height: auto;
  }

  body.campus-ui #learningPanel .learning-week-actions button {
    min-height: 38px;
    height: auto;
    padding: 7px 12px;
  }

  body.campus-ui #learningPanel #learningThisWeek {
    border-color: #c9d8b3;
    background: #eaf3d9;
    color: var(--campus-green);
  }

  body.campus-ui #learningPanel .learning-week-range {
    display: flex;
    min-width: 0;
    max-width: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    color: var(--campus-ink);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .week-state {
    border: 1px solid #cfddbb;
    background: #edf5df;
    color: var(--campus-green);
    font-size: 11px;
  }

  body.campus-ui #learningPanel .learning-scroll-controls {
    /* Keep vertical controls visible when legacy CSS switches to single-day view. */
    display: flex;
    gap: 4px;
  }

  body.campus-ui #learningPanel .learning-scroll-controls button {
    width: 36px;
    min-height: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
  }

  body.campus-ui #learningPanel .learning-day-tabs {
    flex: 0 0 auto;
    min-width: 0;
    gap: 6px;
    margin: 0 0 12px;
    padding: 4px 2px 8px;
    border: 0;
    background: transparent;
  }

  body.campus-ui #learningPanel .learning-day-tabs button {
    min-width: 64px;
    min-height: 50px;
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--campus-line);
    background: #edf2e8;
    color: #526b5a;
    font-size: 13px;
  }

  body.campus-ui #learningPanel .learning-day-tabs button[aria-selected="true"] {
    border-color: var(--campus-green);
    background: var(--campus-green);
    color: #fff;
  }

  body.campus-ui #learningPanel .learning-day-tabs button[aria-selected="true"] span {
    color: var(--campus-lime);
  }

  body.campus-ui #learningTimetable {
    flex: 1 1 0;
    min-width: 0;
    min-height: 180px;
    overflow: auto;
    border: 1px solid var(--campus-line);
    border-radius: 6px;
    background: #fff;
    scrollbar-gutter: stable;
    touch-action: pan-x pan-y;
  }

  body.campus-ui #learningPanel .learning-week-table {
    width: 100%;
    min-width: 1648px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  body.campus-ui #learningPanel .learning-week-table th,
  body.campus-ui #learningPanel .learning-week-table td {
    border-color: var(--campus-line);
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-week-table tr > :last-child {
    border-right: 0;
  }

  body.campus-ui #learningPanel .learning-week-table thead th {
    height: 60px;
    padding: 10px 12px;
    background: #f2f6ef;
    color: var(--campus-ink);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
  }

  body.campus-ui #learningPanel .learning-week-table thead th span {
    margin-top: 4px;
    color: var(--campus-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  body.campus-ui #learningPanel .learning-week-table thead th:first-child {
    left: 0;
    width: var(--campus-learning-time-width);
    padding: 10px 5px;
    text-align: center;
    font-size: 12px;
  }

  body.campus-ui #learningPanel .learning-week-table thead th:nth-child(2) {
    left: var(--campus-learning-time-width);
    width: var(--campus-learning-period-width);
    padding: 10px 5px;
    text-align: center;
    font-size: 12px;
  }

  body.campus-ui #learningPanel .learning-week-table thead th.is-selected-day {
    background: #e8f4c3;
    box-shadow: inset 0 -3px var(--campus-green);
  }

  body.campus-ui #learningPanel .learning-week-table tbody > tr > th {
    height: 142px;
    padding: 16px 5px;
    background: #fbfdf9;
    color: #4e6558;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
  }

  body.campus-ui #learningPanel .learning-week-table tbody > tr > th:first-child {
    left: 0;
    color: var(--campus-ink);
  }

  body.campus-ui #learningPanel .learning-week-table tbody > tr > th:nth-child(2) {
    left: var(--campus-learning-time-width);
  }

  body.campus-ui #learningPanel .learning-week-table tbody td {
    height: 142px;
    padding: 7px;
    background: #fff;
  }

  body.campus-ui #learningPanel .learning-week-table tbody td.is-selected-day {
    background: #f7faf1;
  }

  /* The legacy break rows use important backgrounds. */
  body.campus-ui #learningPanel .learning-display-period > th,
  body.campus-ui #learningPanel .learning-display-period td {
    height: 34px !important;
    padding: 7px 6px !important;
    background: #f0f4ee !important;
    color: var(--campus-muted);
    font-size: 11px;
    font-weight: 500;
  }

  body.campus-ui #learningPanel .learning-course {
    display: grid;
    width: 100%;
    min-height: 128px;
    align-content: start;
    gap: 8px;
    padding: 11px 10px;
    border: 1px solid var(--campus-line);
    border-left: 3px solid var(--course-accent, #80a77a);
    border-radius: 5px;
    background: #f2f7f2;
    background: color-mix(in srgb, var(--course-accent, #80a77a) 8%, white);
    color: var(--campus-ink);
    text-align: left;
    white-space: normal;
  }

  body.campus-ui #learningPanel .learning-course + .learning-course {
    margin-top: 7px;
  }

  body.campus-ui #learningPanel .learning-course:hover:not(:disabled),
  body.campus-ui #learningPanel .learning-course:focus-visible {
    border-color: var(--course-accent, #80a77a);
    background: #fff;
    box-shadow: 0 3px 12px #203d291a;
  }

  body.campus-ui #learningPanel .learning-course-main {
    align-items: start;
    gap: 7px;
  }

  body.campus-ui #learningPanel .learning-course-main strong {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-course-action {
    padding-top: 4px;
    color: #587966;
    font-size: 11px;
    line-height: 1.5;
  }

  body.campus-ui #learningPanel .learning-course-meta {
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 3px 9px;
    color: #536a5e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
  }

  body.campus-ui #learningPanel .learning-course-meta > span {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-course-meta > span + span::before {
    margin-right: 6px;
    color: #8a9e90;
  }

  /* Real download counts can be longer than the short labels in the preview. */
  body.campus-ui #learningPanel .learning-course-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 1px;
  }

  body.campus-ui #learningPanel .learning-course-badges > span {
    display: flex;
    min-width: 0;
    min-height: 28px;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 5px;
    padding: 5px 6px;
    border: 1px solid var(--campus-line);
    border-radius: 3px;
    background: #eef2ec;
    color: #607065;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
  }

  body.campus-ui #learningPanel .learning-course-badges b,
  body.campus-ui #learningPanel .learning-course-badges em {
    max-width: 100%;
    overflow: visible;
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-course-badges .courseware-chip.has-content {
    border-color: var(--campus-resource-green);
    background: var(--campus-resource-green);
    color: #fff;
  }

  body.campus-ui #learningPanel .learning-course-badges .homework-chip.has-content {
    border-color: var(--campus-resource-coral);
    background: var(--campus-resource-coral);
    color: #fff;
  }

  body.campus-ui #learningPanel .learning-course-badges > .is-empty {
    border-color: #dae2d8;
    background: #eef2ec;
    color: #657168;
  }

  body.campus-ui #learningPanel .learning-course-badges > .learning-submit-count,
  body.campus-ui #learningPanel .learning-course-badges > .learning-status {
    grid-column: 1 / -1;
  }

  body.campus-ui #learningPanel .learning-course-badges .learning-submit-count:not(.is-empty) {
    border-color: #c8dbbe;
    background: #edf5e5;
    color: #355938;
  }

  body.campus-ui #learningPanel .learning-status {
    min-height: 28px;
    border: 1px solid #d8e2d5;
    border-radius: 3px;
    background: #edf2e9;
    color: #576d5c;
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-status.status-submitted {
    border-color: #dfd79d;
    background: #faf5db;
    color: #71561b;
  }

  body.campus-ui #learningPanel .learning-status.status-reviewed {
    border-color: #c4d8b9;
    background: #eaf4e1;
    color: #345b33;
  }

  body.campus-ui #learningPanel .learning-status.status-redo {
    border-color: #ebc1b5;
    background: #fff0e9;
    color: #9f402e;
  }

  body.campus-ui #learningPanel .learning-loading,
  body.campus-ui #learningPanel .learning-empty {
    min-height: 180px;
    padding: 24px;
    color: var(--campus-muted);
    text-align: center;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningDetailBackdrop,
  body.campus-ui #planningPreviewBackdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: #12291e80;
  }

  body.campus-ui #learningDetailDrawer {
    z-index: 1101;
    display: flex;
    width: min(760px, 100%);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--campus-line);
    background: #fff;
    box-shadow: -12px 0 38px #182e2924;
  }

  body.campus-ui #learningPanel .learning-detail-header {
    min-width: 0;
    min-height: 62px;
    gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
    border-color: var(--campus-line);
    background: var(--campus-green);
  }

  body.campus-ui #learningPanel .learning-detail-header h2 {
    min-width: 0;
    color: #fff;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-detail-close {
    width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border-color: #668675;
    background: transparent;
    color: #fff;
    font-size: 26px;
    line-height: 1;
  }

  body.campus-ui #learningPanel .learning-detail-close:hover:not(:disabled) {
    border-color: #bad78f;
    background: #29533e;
    color: #fff;
  }

  body.campus-ui #learningDetailContent {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    scroll-padding-block: 16px;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningPanel .learning-detail-summary {
    padding: 20px;
    border-color: var(--campus-line);
    background: #f2f7eb;
  }

  body.campus-ui #learningPanel .learning-detail-summary > strong {
    color: var(--campus-ink);
    font-size: 23px;
    line-height: 1.4;
  }

  body.campus-ui #learningPanel .learning-detail-summary > div {
    color: #526b5a;
    font-size: 14px;
    line-height: 1.65;
  }

  body.campus-ui #learningPanel .learning-detail-section {
    min-width: 0;
    padding: 20px;
    border-color: var(--campus-line);
  }

  body.campus-ui #learningPanel .learning-section-heading {
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  body.campus-ui #learningPanel .learning-section-heading h3 {
    color: var(--campus-ink);
    font-size: 17px;
    font-weight: 750;
    line-height: 1.5;
  }

  body.campus-ui #learningPanel .learning-section-heading > span,
  body.campus-ui #learningPanel .learning-list-empty,
  body.campus-ui #learningPanel .learning-file-list span {
    color: var(--campus-muted);
    font-size: 12px;
    line-height: 1.6;
  }

  body.campus-ui #learningPanel .learning-file-list li {
    border-color: var(--campus-line);
    background: #f8faf6;
  }

  body.campus-ui #learningPanel .learning-file-list a {
    color: #24654b;
    font-size: 14px;
    line-height: 1.6;
    text-underline-offset: 3px;
  }

  body.campus-ui #learningPanel .learning-file-list li button {
    flex-shrink: 0;
  }

  body.campus-ui #learningPanel :is(.learning-upload-form, .learning-homework-form, .learning-review-form) {
    min-width: 0;
    gap: 12px;
  }

  body.campus-ui #learningPanel :is(.learning-upload-form, .learning-homework-form, .learning-review-form) label {
    min-width: 0;
    margin: 0;
    gap: 7px;
    color: #415e4a;
    font-size: 13px;
    line-height: 1.5;
  }

  body.campus-ui #learningPanel :is(.learning-homework-form, .learning-review-form) textarea {
    min-height: 96px;
  }

  body.campus-ui #learningPanel input[type="file"] {
    width: 100%;
    padding: 9px;
    border: 1px dashed #9bb690;
    background: #f8fbf4;
    font-size: 12px;
  }

  body.campus-ui #learningPanel input[type="file"]::file-selector-button {
    max-width: 100%;
    margin-right: 8px;
    padding: 7px 9px;
    border: 1px solid #d1dec5;
    border-radius: 4px;
    background: #eaf3de;
    color: var(--campus-green);
    font: inherit;
    cursor: pointer;
  }

  body.campus-ui #learningPanel :is(.learning-upload-form, .learning-homework-form, .learning-review-form) button[type="submit"] {
    min-height: 40px;
    padding: 9px 14px;
    border-color: var(--campus-green);
    background: var(--campus-green);
    color: #fff;
  }

  body.campus-ui #learningPanel :is(.learning-upload-form, .learning-homework-form, .learning-review-form) button[type="submit"]:hover:not(:disabled) {
    background: #25563e;
  }

  body.campus-ui #learningPanel button.danger,
  body.campus-ui #planningPanel button.danger {
    border-color: #e6bcb0;
    background: #fff8f4;
    color: #a34330;
  }

  body.campus-ui #learningPanel button.danger:hover:not(:disabled),
  body.campus-ui #planningPanel button.danger:hover:not(:disabled) {
    border-color: #ad4935;
    background: #ad4935;
    color: #fff;
  }

  body.campus-ui #learningPanel .learning-engagement-grid {
    padding: 16px 20px;
    border-color: var(--campus-line);
    background: #f5f8f1;
  }

  body.campus-ui #learningPanel .learning-engagement-card {
    padding: 12px;
    border: 0;
    border-top: 3px solid #b1ca93;
    border-radius: 0;
    background: transparent;
  }

  body.campus-ui #learningPanel .learning-engagement-card header {
    flex-wrap: wrap;
    gap: 4px;
  }

  body.campus-ui #learningPanel .learning-engagement-card header strong {
    color: var(--campus-ink);
    font-size: 14px;
  }

  body.campus-ui #learningPanel .learning-engagement-metrics span {
    padding: 7px 4px;
    font-size: 12px;
    line-height: 1.5;
  }

  body.campus-ui #learningPanel .learning-engagement-metrics b {
    font-size: 22px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }

  body.campus-ui #learningPanel .learning-material-stat summary {
    flex-wrap: wrap;
    padding-top: 10px;
    color: #42604c;
  }

  body.campus-ui #learningPanel .learning-material-stat summary span {
    color: #42604c;
    font-size: 13px;
  }

  body.campus-ui #learningPanel .learning-download-roster {
    min-width: 0;
    gap: 16px;
  }

  body.campus-ui #learningPanel .learning-download-roster > section {
    min-width: 0;
  }

  body.campus-ui #learningPanel .learning-download-roster li {
    padding: 9px 0;
    border: 0;
    border-top: 1px dashed var(--campus-line);
    border-radius: 0;
    background: transparent;
  }

  body.campus-ui #learningPanel .learning-download-roster li strong {
    color: var(--campus-ink);
    font-size: 14px;
  }

  body.campus-ui #learningPanel .learning-download-roster li span,
  body.campus-ui #learningPanel .learning-download-roster li em {
    font-size: 12px;
    line-height: 1.6;
  }

  body.campus-ui #learningPanel .learning-submission-filters {
    gap: 6px;
  }

  body.campus-ui #learningPanel .learning-submission-filters button {
    min-height: 38px;
    padding: 7px 10px;
    background: #f2f6ed;
    color: #516849;
  }

  body.campus-ui #learningPanel .learning-submission-filters button[aria-pressed="true"] {
    border-color: var(--campus-green);
    background: var(--campus-green);
    color: #fff;
  }

  body.campus-ui #learningPanel .learning-submission-filters button b {
    border-radius: 4px;
    background: #e0ebd7;
    color: var(--campus-green);
  }

  body.campus-ui #learningPanel .learning-submission-row > header,
  body.campus-ui #learningPanel .learning-my-submission > div:first-child,
  body.campus-ui #learningPanel .learning-review-return-heading {
    flex-wrap: wrap;
  }

  body.campus-ui #learningPanel .learning-submission-row > header > div {
    min-width: 0;
  }

  body.campus-ui #learningPanel .learning-submission-row > header strong {
    font-size: 16px;
    line-height: 1.5;
  }

  body.campus-ui #learningPanel .learning-submission-row > header span:not(.learning-status),
  body.campus-ui #learningPanel .learning-homework-copy span,
  body.campus-ui #learningPanel .learning-my-submission > div > span:not(.learning-status) {
    color: var(--campus-muted);
    font-size: 12px;
    line-height: 1.6;
  }

  body.campus-ui #learningPanel .learning-homework-copy {
    padding: 14px;
    border-left-color: #d57d60;
    background: #fff4ee;
    color: #714530;
  }

  body.campus-ui #learningPanel .learning-feedback,
  body.campus-ui #learningPanel .learning-review-return,
  body.campus-ui #learningPanel .learning-student-feedback-files {
    min-width: 0;
    padding: 14px;
    border-left-color: #83a365;
    background: #f2f7ec;
    color: #3e5d37;
    font-size: 14px;
    line-height: 1.6;
  }

  body.campus-ui #learningPanel .learning-review-return-heading,
  body.campus-ui #learningPanel .learning-student-feedback-files > strong {
    color: #3e5d37;
    font-size: 14px;
  }

  body.campus-ui #planningPanel:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
    scrollbar-gutter: auto;
  }

  body.campus-ui #planningPanel .planning-toolbar {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 4px 0;
  }

  body.campus-ui #planningPanel .planning-toolbar > div:first-child {
    min-width: 0;
  }

  body.campus-ui #planningPanel .planning-toolbar > div:first-child > .eyebrow,
  body.campus-ui #planningPanel .planning-toolbar > div:first-child > .muted {
    display: none;
  }

  /* Includes student binding and version selectors inserted by the workbench. */
  body.campus-ui #planningPanel .planning-toolbar-controls {
    display: flex;
    flex: 1 1 480px;
    width: auto;
    min-width: 0;
    align-items: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  body.campus-ui #planningPanel .planning-toolbar-controls label {
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--campus-muted);
    font-size: 12px;
    white-space: normal;
  }

  body.campus-ui #planningPanel .planning-toolbar-controls select,
  body.campus-ui #planningPanel .planning-toolbar-controls label:nth-child(2) select {
    width: 180px;
    height: auto;
    padding: 8px 10px;
  }

  body.campus-ui #planningPanel .planning-toolbar-controls button {
    min-height: 40px;
    height: auto;
    flex: 0 1 auto;
    padding: 8px 13px;
    background: #fff;
    color: var(--campus-green);
  }

  body.campus-ui #planningPanel #openPlanningPreviewButton,
  body.campus-ui #planningPanel #generatePlanningReportButton,
  body.campus-ui #planningPanel .primary-action {
    border-color: var(--campus-green);
    background: var(--campus-green);
    color: #fff;
  }

  body.campus-ui #planningPanel #openPlanningPreviewButton:hover:not(:disabled),
  body.campus-ui #planningPanel #generatePlanningReportButton:hover:not(:disabled),
  body.campus-ui #planningPanel .primary-action:hover:not(:disabled) {
    background: #25563e;
  }

  body.campus-ui #planningStatusBar {
    min-width: 0;
    min-height: 32px;
    gap: 8px 24px;
    padding: 2px 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--campus-ink);
    line-height: 1.5;
  }

  body.campus-ui #planningStatusBar > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  body.campus-ui #planningStatusBar span {
    color: var(--campus-muted);
    font-size: 12px;
  }

  body.campus-ui #planningStatusBar strong {
    font-size: 13px;
    font-weight: 750;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningPanel .planning-status-draft,
  body.campus-ui #planningPanel .planning-status-returned {
    padding: 3px 7px;
    border-radius: 3px;
    background: #fff0e8;
    color: #a14630;
  }

  body.campus-ui #planningPanel .planning-status-pending_review {
    color: #7a631c;
  }

  body.campus-ui #planningPanel .planning-status-approved,
  body.campus-ui #planningPanel .planning-status-published {
    color: #286c46;
  }

  body.campus-ui #planningPanel .planning-status-withdrawn {
    color: #a14630;
  }

  body.campus-ui #planningPanel .planning-review-comment {
    min-width: 0;
    max-width: 100%;
    color: #855033;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningPanel .planning-layout {
    display: grid;
    flex: 1 0 320px;
    width: 100%;
    min-width: 0;
    min-height: 320px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: visible;
  }

  /* A single form owns all fields and buttons; grid only changes presentation. */
  body.campus-ui #planningForm {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 170px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "sections heading"
      "sections fields"
      "sections actions";
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--campus-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
  }

  body.campus-ui #planningForm > .panel-heading {
    grid-area: heading;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
    padding: 22px 28px 16px;
    border: 0;
    background: #fff;
  }

  body.campus-ui #planningForm > .panel-heading > div {
    min-width: 0;
  }

  body.campus-ui #planningForm > .panel-heading h2 {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningForm > .panel-heading > div > .muted {
    display: none;
  }

  body.campus-ui #planningSaveState {
    display: block;
    min-width: 0;
    color: var(--campus-muted);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningSectionTabs {
    display: flex;
    grid-area: sections;
    min-width: 0;
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 22px 14px;
    overflow: auto;
    border: 0;
    border-right: 1px solid var(--campus-line);
    background: #f7faf4;
    scroll-padding: 12px;
    touch-action: pan-y;
    counter-reset: campus-planning-section;
  }

  body.campus-ui #planningSectionTabs button {
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 12px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #5c725e;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    counter-increment: campus-planning-section;
  }

  body.campus-ui #planningSectionTabs button::before {
    flex: 0 0 17px;
    color: #7b927d;
    font-size: 10px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    content: counter(campus-planning-section, decimal-leading-zero);
  }

  body.campus-ui #planningSectionTabs button[aria-selected="true"] {
    background: var(--campus-green);
    color: #fff;
    font-weight: 750;
  }

  body.campus-ui #planningSectionTabs button[aria-selected="true"]:hover:not(:disabled) {
    background: #25563e;
    color: #fff;
  }

  body.campus-ui #planningSectionTabs button[aria-selected="true"]::before {
    color: var(--campus-lime);
  }

  body.campus-ui #planningFormFields {
    grid-area: fields;
    min-width: 0;
    min-height: 0;
    padding: 6px 28px 24px;
    overflow: auto;
    scroll-padding: 18px;
    scrollbar-gutter: stable;
  }

  body.campus-ui #planningPanel .planning-field-grid {
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
  }

  body.campus-ui #planningFormFields label {
    min-width: 0;
    margin: 0;
    gap: 8px;
    color: var(--campus-ink);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningFormFields input {
    min-height: 44px;
    height: auto;
    padding: 10px 12px;
    font-weight: 500;
  }

  body.campus-ui #planningFormFields textarea {
    width: 100%;
    min-height: 128px;
    padding: 11px 12px;
    font-weight: 500;
    line-height: 1.7;
  }

  body.campus-ui #planningFormFields :is(input, textarea)::placeholder {
    color: #7b8b80;
    opacity: 1;
  }

  body.campus-ui #planningFormFields .planning-field-grid > .planning-wide-field {
    grid-column: auto;
  }

  body.campus-ui #planningFormFields > .planning-wide-field {
    margin-top: 18px;
  }

  body.campus-ui #planningFormFields > .planning-wide-field:first-child {
    margin-top: 0;
  }

  body.campus-ui #planningFormFields textarea[name="materials_list"] {
    min-height: 240px;
  }

  body.campus-ui #planningPanel .planning-section-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    padding: 0;
    border: 0;
    color: #667f5b;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.6;
  }

  body.campus-ui #planningPanel .planning-section-note::after {
    height: 1px;
    flex: 1 1 24px;
    background: var(--campus-line);
    content: "";
  }

  body.campus-ui #planningFormFields > .planning-section-note:first-child {
    margin-top: 0;
  }

  body.campus-ui #planningPanel .planning-repeat-list {
    min-width: 0;
    gap: 12px;
  }

  body.campus-ui #planningPanel .planning-repeat-row {
    min-width: 0;
    margin: 0;
    padding: 16px;
    border: 1px solid #dee7d8;
    border-left: 3px solid #8baa70;
    border-radius: 5px;
    background: #f5f8f2;
  }

  body.campus-ui #planningPanel .planning-repeat-grid {
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }

  body.campus-ui #planningPanel .planning-repeat-actions {
    flex-wrap: wrap;
    margin-top: 10px;
  }

  body.campus-ui #planningPanel .planning-repeat-actions:empty {
    margin: 0;
  }

  body.campus-ui #planningPanel .planning-repeat-actions button {
    min-height: 36px;
    padding: 7px 10px;
    border-color: #e1b6a9;
    background: #fff;
    color: #a04832;
  }

  body.campus-ui #planningPanel .planning-add-row {
    min-height: 40px;
    margin: 12px 0 0;
    padding: 8px 14px;
    border: 1px dashed #96b281;
    background: #f3f8ea;
    color: #426331;
  }

  body.campus-ui #planningPanel .planning-field-help {
    margin: 8px 0 0;
    color: var(--campus-muted);
    font-size: 12px;
    line-height: 1.6;
  }

  body.campus-ui #planningForm .planning-form-actions {
    grid-area: actions;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 14px 28px;
    border-top: 1px solid var(--campus-line);
    background: #fff;
  }

  body.campus-ui #planningForm .planning-form-actions button {
    min-height: 40px;
    padding: 9px 16px;
  }

  body.campus-ui #planningPanel #savePlanningProfileButton {
    border-color: #cbd8ce;
    background: #fff;
    color: var(--campus-green);
  }

  body.campus-ui #planningPanel #savePlanningProfileButton:hover:not(:disabled) {
    background: #edf4e5;
  }

  /* The report remains an on-demand dialog for every existing viewing role. */
  body.campus-ui #planningPanel .planning-report-panel {
    position: fixed;
    inset: 24px;
    z-index: 1101;
    display: flex;
    width: min(1160px, calc(100% - 48px));
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    max-width: none;
    max-height: calc(100dvh - 48px);
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    margin: 0 auto;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--campus-line);
    border-radius: 8px;
    background: #f2f5ef;
    box-shadow: 0 18px 50px #182e2938;
  }

  body.campus-ui #planningPanel .planning-preview-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    min-width: 0;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--campus-line);
    background: #fff;
  }

  body.campus-ui #planningPanel .planning-preview-heading > div {
    min-width: 0;
  }

  body.campus-ui #planningPanel .planning-preview-heading h2 {
    font-size: 17px;
    font-weight: 750;
    line-height: 1.5;
  }

  body.campus-ui #planningPanel .planning-preview-actions {
    flex: 0 0 auto;
    gap: 8px;
  }

  body.campus-ui #planningPanel .planning-preview-actions button {
    min-height: 40px;
    background: #fff;
  }

  body.campus-ui #planningPanel .planning-preview-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    font-size: 26px;
    line-height: 1;
  }

  body.campus-ui #planningReviewControls {
    min-width: 0;
    min-height: 0;
    max-height: 30dvh;
    flex: 0 1 auto;
    align-items: end;
    gap: 10px;
    padding: 12px 20px;
    overflow: auto;
    border-bottom: 1px solid var(--campus-line);
    background: #f8faf4;
    scroll-padding: 10px;
  }

  body.campus-ui #planningReviewControls:empty {
    padding: 0;
    border: 0;
  }

  body.campus-ui #planningReviewControls .review-comment-field {
    min-width: 0;
    flex: 1 1 360px;
    margin: 0;
    color: #4f6955;
    font-size: 13px;
  }

  body.campus-ui #planningReviewControls button {
    min-height: 40px;
    flex-shrink: 0;
    padding: 8px 13px;
  }

  body.campus-ui #planningPanel .planning-view-note {
    color: var(--campus-muted);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningReportPreview {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 120px;
    max-width: 100%;
    margin: 20px;
    padding: 24px;
    overflow: auto;
    border: 1px solid var(--campus-line);
    background: #fff;
    color: var(--campus-ink);
    scroll-padding: 16px;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningReportPreview .report-cover {
    min-width: 0;
    gap: 20px;
    border-color: var(--campus-green);
    background: #f2f7ea;
  }

  body.campus-ui #planningReportPreview .report-cover-heading,
  body.campus-ui #planningReportPreview .report-student-chip {
    min-width: 0;
  }

  body.campus-ui #planningReportPreview .report-cover h1 {
    color: var(--campus-green);
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: 0;
  }

  body.campus-ui #planningReportPreview .report-brand,
  body.campus-ui #planningReportPreview .report-section-title h3,
  body.campus-ui #planningReportPreview .report-student-chip strong {
    color: var(--campus-green);
    letter-spacing: 0;
  }

  body.campus-ui #planningReportPreview .report-student-chip {
    border-color: #c8d8b8;
    background: #fafff4;
  }

  body.campus-ui #planningReportPreview .report-student-chip span,
  body.campus-ui #planningReportPreview .report-student-chip em {
    color: #58704e;
    line-height: 1.6;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningReportPreview .report-section-title > span,
  body.campus-ui #planningReportPreview .report-core-banner {
    background: var(--campus-green);
    color: #fff;
  }

  body.campus-ui #planningReportPreview .report-core-banner {
    flex-wrap: wrap;
  }

  body.campus-ui #planningReportPreview .report-core-banner span {
    color: #d5e6c6;
  }

  body.campus-ui #planningReportPreview .report-value {
    border-color: var(--campus-line);
    background: #f5f8f1;
  }

  body.campus-ui #planningReportPreview .report-value strong,
  body.campus-ui #planningReportPreview .report-data-row strong {
    color: var(--campus-ink);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
  }

  body.campus-ui #planningReportPreview .report-core-card {
    border-color: var(--campus-line);
    border-top-color: #73985e;
    background: #fcfdf9;
  }

  body.campus-ui #planningReportPreview .report-core-card:nth-child(2) {
    border-top-color: #7394b8;
  }

  body.campus-ui #planningReportPreview .report-core-card:nth-child(3) {
    border-top-color: #cd8866;
  }

  body.campus-ui #planningReportPreview .report-goal-callout {
    border-left-color: #85a668;
    background: #eef5e6;
  }

  body.campus-ui #planningReportPreview .report-assessment-table,
  body.campus-ui #planningReportPreview .report-assessment-row {
    border-color: var(--campus-line);
  }

  body.campus-ui #planningReportPreview .report-assessment-header {
    background: #edf3e7;
    color: #59704e;
  }

  body.campus-ui #planningReportPreview .report-assessment-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.campus-ui #learningTimetable,
  body.campus-ui #learningDetailContent,
  body.campus-ui #planningSectionTabs,
  body.campus-ui #planningFormFields,
  body.campus-ui #planningReviewControls,
  body.campus-ui #planningReportPreview {
    scrollbar-color: #8ba18b #eef3ea;
    scrollbar-width: thin;
  }

  body.campus-ui #learningTimetable::-webkit-scrollbar-thumb,
  body.campus-ui #learningDetailContent::-webkit-scrollbar-thumb,
  body.campus-ui #planningSectionTabs::-webkit-scrollbar-thumb,
  body.campus-ui #planningFormFields::-webkit-scrollbar-thumb,
  body.campus-ui #planningReviewControls::-webkit-scrollbar-thumb,
  body.campus-ui #planningReportPreview::-webkit-scrollbar-thumb {
    border: 2px solid #eef3ea;
    border-radius: 6px;
    background: #8ba18b;
  }

  body.campus-ui #learningTimetable::-webkit-scrollbar-track {
    background: #eef3ea;
  }
}

@media screen and (min-width: 681px) and (max-width: 1200px) {
  body.campus-ui #planningForm {
    grid-template-columns: 148px minmax(0, 1fr);
  }

  body.campus-ui #planningSectionTabs {
    padding: 18px 9px;
  }

  body.campus-ui #planningSectionTabs button {
    padding: 12px 8px;
    gap: 6px;
    font-size: 12px;
  }

  body.campus-ui #planningForm > .panel-heading,
  body.campus-ui #planningFormFields,
  body.campus-ui #planningForm .planning-form-actions {
    padding-right: 20px;
    padding-left: 20px;
  }

  body.campus-ui #planningPanel .planning-field-grid,
  body.campus-ui #planningPanel .planning-repeat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  body.campus-ui #planningFormFields .planning-field-grid > .planning-wide-field {
    grid-column: 1 / -1;
  }
}

/* Keep the original single-day breakpoint and all seven selectable days. */
@media screen and (max-width: 960px) {
  body.campus-ui #learningPanel .learning-scroll-controls button {
    width: 44px;
    min-height: 44px;
    height: 44px;
  }

  body.campus-ui #learningPanel .learning-week-table,
  body.campus-ui #learningPanel .learning-week-table thead,
  body.campus-ui #learningPanel .learning-week-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  body.campus-ui #learningPanel .learning-week-table tr {
    display: grid;
    width: 100%;
    grid-template-columns: var(--campus-learning-time-width) var(--campus-learning-period-width) minmax(0, 1fr);
  }

  body.campus-ui #learningPanel .learning-week-table th,
  body.campus-ui #learningPanel .learning-week-table td {
    width: auto !important;
    min-width: 0;
    height: auto;
  }

  body.campus-ui #learningPanel .learning-week-table thead {
    position: sticky;
    top: 0;
    z-index: 6;
  }

  body.campus-ui #learningPanel .learning-week-table thead th,
  body.campus-ui #learningPanel .learning-week-table tbody > tr > th {
    position: static;
    min-height: 0;
    height: auto;
  }

  body.campus-ui #learningPanel .learning-display-period td {
    grid-column: 3;
  }

  body.campus-ui #learningPanel .learning-week-table .learning-day-column:not(.is-selected-day) {
    display: none;
  }

  body.campus-ui #learningPanel .learning-course {
    min-height: 132px;
    padding: 12px;
  }
}

/* Mobile content follows the shell's page scroller, without nested editor panes. */
@media screen and (max-width: 680px) {
  body.campus-ui #learningPanel:not([hidden]),
  body.campus-ui #planningPanel:not([hidden]) {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  body.campus-ui #learningPanel:not([hidden]) {
    --campus-learning-time-width: 72px;
    --campus-learning-period-width: 48px;
  }

  body.campus-ui #learningPanel :is(input, select, textarea),
  body.campus-ui #planningPanel :is(input, select, textarea) {
    min-height: 44px;
    font-size: 16px;
  }

  body.campus-ui #learningPanel button,
  body.campus-ui #planningPanel button {
    min-height: 44px;
  }

  body.campus-ui #learningPanel .learning-timetable-toolbar,
  body.campus-ui #learningPanel .learning-week-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 12px;
  }

  body.campus-ui #learningPanel .learning-timetable-title h2,
  body.campus-ui #planningPanel .planning-toolbar h2 {
    font-size: 22px;
  }

  body.campus-ui #learningPanel .learning-timetable-title span {
    display: block;
    font-size: 12px;
  }

  body.campus-ui #learningPanel .learning-identity-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.campus-ui #learningPanel .learning-identity-controls label {
    display: grid;
    gap: 5px;
  }

  body.campus-ui #learningPanel .learning-identity-controls select,
  body.campus-ui #learningPanel .learning-identity-controls label:last-child select {
    width: 100%;
  }

  body.campus-ui #learningPanel .learning-week-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.campus-ui #learningPanel .learning-week-actions > button:nth-of-type(n) {
    grid-column: auto;
    min-height: 44px;
    padding: 9px 6px;
  }

  body.campus-ui #learningPanel .learning-week-actions label {
    grid-column: 1 / -1;
  }

  body.campus-ui #learningPanel .learning-week-actions input {
    flex: 1 1 auto;
    width: 100%;
  }

  body.campus-ui #learningPanel .learning-week-meta {
    justify-content: flex-start;
  }

  body.campus-ui #learningPanel .learning-day-tabs {
    margin-bottom: 8px;
  }

  body.campus-ui #learningTimetable {
    flex: 0 0 auto;
    height: 60vh;
    height: 60dvh;
    min-height: 320px;
    overflow: auto;
    scrollbar-gutter: auto;
  }

  body.campus-ui #learningPanel .learning-week-table thead {
    position: sticky;
    top: 0;
    z-index: 8;
  }

  body.campus-ui #learningPanel .learning-week-table tbody > tr > th {
    padding: 12px 4px;
    font-size: 11px;
  }

  body.campus-ui #learningPanel .learning-week-table tbody td {
    padding: 6px;
  }

  body.campus-ui #learningPanel .learning-course {
    min-height: 138px;
    padding: 10px 8px;
    gap: 7px;
  }

  body.campus-ui #learningPanel .learning-course-main strong {
    font-size: 17px;
  }

  body.campus-ui #learningPanel .learning-course-meta {
    font-size: 13px;
  }

  body.campus-ui #learningPanel .learning-course-badges > span {
    padding: 4px 5px;
    gap: 2px 4px;
  }

  body.campus-ui #learningPanel .learning-course-badges b,
  body.campus-ui #learningPanel .learning-course-badges em {
    font-size: 12px;
  }

  body.campus-ui #learningDetailDrawer {
    width: 100%;
    border-left: 0;
  }

  body.campus-ui #learningPanel .learning-detail-header {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  body.campus-ui #learningPanel .learning-detail-close {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  body.campus-ui #learningPanel .learning-detail-summary,
  body.campus-ui #learningPanel .learning-detail-section,
  body.campus-ui #learningPanel .learning-engagement-grid {
    padding: 16px 14px;
  }

  body.campus-ui #learningPanel .learning-detail-summary > strong {
    font-size: 21px;
  }

  body.campus-ui #learningPanel .learning-engagement-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.campus-ui #learningPanel .learning-upload-form,
  body.campus-ui #learningPanel .learning-review-return-upload,
  body.campus-ui #learningPanel .learning-download-roster {
    grid-template-columns: minmax(0, 1fr);
  }

  body.campus-ui #learningPanel :is(.learning-upload-form, .learning-homework-form, .learning-review-form) button[type="submit"] {
    width: 100%;
    min-height: 44px;
  }

  body.campus-ui #planningPanel .planning-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  body.campus-ui #planningPanel .planning-toolbar-controls {
    display: grid;
    flex: 0 0 auto;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.campus-ui #planningPanel .planning-toolbar-controls label {
    display: grid;
    gap: 5px;
  }

  body.campus-ui #planningPanel .planning-toolbar-controls select,
  body.campus-ui #planningPanel .planning-toolbar-controls label:nth-child(2) select {
    width: 100%;
  }

  body.campus-ui #planningPanel .planning-toolbar-controls button {
    grid-column: auto;
    min-height: 44px;
    height: auto;
    padding: 9px 8px;
  }

  body.campus-ui #planningStatusBar {
    gap: 8px 14px;
    padding-bottom: 2px;
  }

  body.campus-ui #planningPanel .planning-layout {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  body.campus-ui #planningForm {
    display: flex;
    height: auto;
    min-height: 0;
    flex-direction: column;
    overflow: visible;
  }

  body.campus-ui #planningForm > .panel-heading {
    padding: 18px 14px 12px;
    border-radius: 6px 6px 0 0;
  }

  body.campus-ui #planningForm > .panel-heading h2 {
    font-size: 19px;
  }

  body.campus-ui #planningSectionTabs {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-block: 1px solid var(--campus-line);
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }

  body.campus-ui #planningSectionTabs button {
    width: auto;
    min-height: 44px;
    gap: 6px;
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  body.campus-ui #planningFormFields {
    flex: 0 0 auto;
    padding: 20px 14px 24px;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  body.campus-ui #planningPanel .planning-field-grid,
  body.campus-ui #planningPanel .planning-repeat-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.campus-ui #planningPanel .planning-repeat-row {
    padding: 14px 12px;
  }

  body.campus-ui #planningFormFields input,
  body.campus-ui #planningFormFields textarea {
    font-size: 16px;
  }

  body.campus-ui #planningFormFields textarea {
    min-height: 132px;
  }

  body.campus-ui #planningForm .planning-form-actions {
    position: static;
    flex: 0 0 auto;
    justify-content: stretch;
    gap: 8px;
    padding: 14px 14px max(14px, env(safe-area-inset-bottom));
    border-radius: 0 0 6px 6px;
  }

  body.campus-ui #planningForm .planning-form-actions button {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 0;
    padding: 10px 8px;
  }

  body.campus-ui #planningPanel .planning-report-panel {
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border: 0;
    border-radius: 0;
  }

  body.campus-ui #planningPanel .planning-preview-heading {
    gap: 8px;
    padding: 12px;
  }

  body.campus-ui #planningPanel .planning-preview-heading h2 {
    font-size: 16px;
  }

  body.campus-ui #planningPanel .planning-preview-heading .muted {
    display: block;
    font-size: 11px;
    overflow-wrap: anywhere;
  }

  body.campus-ui #planningPanel .planning-preview-actions {
    gap: 6px;
  }

  body.campus-ui #planningPanel .planning-preview-actions button {
    min-height: 44px;
    padding: 8px;
    font-size: 12px;
  }

  body.campus-ui #planningPanel .planning-preview-actions .planning-preview-close {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    padding: 0;
    font-size: 26px;
  }

  body.campus-ui #planningReviewControls {
    max-height: 36dvh;
    padding: 12px;
  }

  body.campus-ui #planningReviewControls .review-comment-field {
    flex-basis: 100%;
  }

  body.campus-ui #planningReviewControls button {
    min-height: 44px;
  }

  body.campus-ui #planningReportPreview {
    margin: 12px;
    padding: 16px;
  }

  body.campus-ui #planningReportPreview .report-cover {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  body.campus-ui #planningReportPreview .report-cover h1 {
    font-size: 23px;
  }

  body.campus-ui #planningReportPreview .report-student-chip {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.campus-ui #planningReportPreview .report-identity-grid,
  body.campus-ui #planningReportPreview .report-goal-grid,
  body.campus-ui #planningReportPreview .report-core-grid,
  body.campus-ui #planningReportPreview .report-timeline-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (min-width: 681px) and (max-height: 720px) {
  body.campus-ui #learningPanel .learning-timetable-toolbar,
  body.campus-ui #learningPanel .learning-week-toolbar {
    min-height: 44px;
    padding-top: 2px;
    padding-bottom: 8px;
  }

  body.campus-ui #planningPanel:not([hidden]) {
    gap: 8px;
  }

  body.campus-ui #planningForm > .panel-heading {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  body.campus-ui #planningSectionTabs {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  body.campus-ui #planningForm .planning-form-actions {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body.campus-ui #planningPanel .planning-report-panel {
    inset-block: 12px;
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  body.campus-ui #learningPanel,
  body.campus-ui #learningPanel *,
  body.campus-ui #learningPanel *::before,
  body.campus-ui #learningPanel *::after,
  body.campus-ui #planningPanel,
  body.campus-ui #planningPanel *,
  body.campus-ui #planningPanel *::before,
  body.campus-ui #planningPanel *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}