/* Scoped visual refinement layer. Loaded after site, page and reference themes. */
:root {
  --ui-radius: var(--radius-md);
  --ui-border: var(--color-border-strong);
  --ui-focus: var(--color-focus);
}

/* Compact the shared introductory block without changing document flow. */
.main-area > .topbar { margin-bottom: 14px; }
.main-area .page-heading {
  gap: 16px;
  padding: 17px 22px;
  margin-bottom: 16px;
  border-radius: var(--ui-radius);
}
.main-area .page-heading h1,
.main-area .form-intro h1 {
  margin: 3px 0 5px;
  line-height: 1.15;
  letter-spacing: -.7px;
}
.main-area .page-heading .muted,
.main-area .form-intro .muted { line-height: 1.45; }
.main-area .eyebrow { font-size: 11px; letter-spacing: .08em; }
.main-area .form-intro { margin: 0 0 12px; padding: 0 2px; }
.main-area .form-page { max-width: 820px; }

/* Promote the existing next action; no new controls or behavior. */
.main-area .next-action-panel {
  gap: 16px;
  padding: 16px 19px;
  margin-bottom: 14px;
  border-radius: var(--ui-radius);
  border-left: var(--border-accent-width) solid var(--color-brand);
}
.main-area .next-action-panel h2 { font-size: 17px !important; }
.main-area .next-action-panel .next-action-title { font-size: 17px; margin: 2px 0; }
.main-area .next-action-panel .next-action-copy > p:last-child { font-size: 13px !important; line-height: 1.4; margin: 3px 0 0; }
.main-area .next-action-button { min-height: 44px; padding-inline: 19px; font-size: 13px; }
.main-area .stat-grid { gap: 11px; margin-bottom: 14px; }
.main-area .stat-card { min-height: 122px; padding: 13px 16px; border-radius: var(--ui-radius); }
.main-area .stat-icon { width: 31px; height: 31px; margin-bottom: 6px; }
.main-area .stat-card strong { font-size: 25px; }
.main-area .stat-card small { color: var(--color-text-tertiary); font-size: 11px; }
.main-area .panel { padding: 18px; border-radius: var(--ui-radius); }
.main-area .panel-header { margin-bottom: 12px; }

/* Consistent controls, legible helper text and explicit disabled state. */
.main-area :where(.button, .category-tab, .child-chip, .icon-button) {
  border-radius: 9px;
  font-family: inherit;
}
.main-area .button { min-height: 42px; font-size: 13px; }
.main-area .button-sm { min-height: 38px; font-size: 12px; }
.main-area :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  max-width: 100%;
  border-radius: 9px;
  border-color: var(--ui-border);
  color: var(--ink);
  font: inherit;
}
.main-area :where(.field input, .field select, .calendar-filters input, .calendar-filters select, .review-tools input, .catalog-page input, .catalog-page select) { min-height: 42px; }
.main-area .field { min-width: 0; }
.main-area .field > :where(input, select, textarea),
.main-area .field > label,
.main-area .field .upload-dropzone > input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.main-area .field select { text-overflow: ellipsis; }
.main-area :where(.field label, .catalog-filter-panel label, .edition-switch label, .staff-controls label, .review-tools label) { font-size: 13px; color: var(--color-text-strong); }
.main-area :where(.help-text, .review-tools small, .stat-card small, .edition-summary span, .publication-label, .reliability-chip) { font-size: 12px; line-height: 1.45; }
.main-area :where(.muted, .catalog-result-count, .catalog-notice, .edition-card p, .organizer) { color: var(--color-text-secondary); }
.main-area :where(.panel, .edition-card, .form-panel, .catalog-filter-panel, .review-row, .dashboard-shortcut, .stat-card) { border-radius: var(--ui-radius); }
.main-area :where(.button, button, input, select, textarea):disabled,
.main-area :where(button, input, select, textarea)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .56;
  box-shadow: none;
  transform: none;
}
.main-area .button:disabled:hover,
.main-area button:disabled:hover { transform: none; }
.main-area :where(.field input, .field select, .field textarea):focus { outline: none; }
.main-area :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--color-surface);
  position: relative;
  z-index: 2;
}
.main-area :where(a, button):hover { text-decoration-thickness: 2px; }
.main-area .button-dark:hover,
.main-area .button-primary:hover { background: var(--color-brand-strong); }
.main-area .button-outline:hover { border-color: var(--color-brand); color: var(--color-brand-strong); background: var(--color-brand-soft); }

/* Keep desktop actions in view and let mobile content wrap naturally. */
@media (min-width: 1060px) {
  .main-area .page-heading { padding-block: 14px; }
  .main-area .student-dash-grid { gap: 16px; }
  .main-area .student-dash-main > .student-calendar-embed { margin-bottom: 8px; }
}
@media (max-width: 1050px) {
  .main-area .bulk-forms-grid { grid-template-columns: minmax(0, 1fr); }
  .main-area .bulk-forms-grid > form,
  .main-area .bulk-forms-grid .form-stack,
  .main-area .bulk-forms-grid .form-stack > p { min-width: 0; max-width: 100%; }
  .main-area .bulk-forms-grid .form-stack { grid-template-columns: minmax(0, 1fr); }
  .main-area .bulk-forms-grid .form-stack > p,
  .main-area .bulk-forms-grid .form-stack label { overflow-wrap: anywhere; }
  .main-area .bulk-forms-grid .form-stack select,
  .main-area .bulk-forms-grid .form-stack input { min-width: 0; max-width: 100%; }
  .main-area .heading-actions { min-width: 0; }
  .main-area .heading-actions .button { white-space: normal; }
  .main-area .catalog-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-area .catalog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sidebar .side-nav { flex-wrap: wrap; overflow: visible; min-width: 0; }
  .sidebar .nav-link { white-space: normal; min-width: 0; max-width: 100%; }
  .main-area { min-width: 0; }
  .main-area .page-heading { gap: 10px; padding: 14px; margin-bottom: 12px; }
  .main-area .page-heading h1 { font-size: 23px; }
  .main-area .heading-actions { display: flex; gap: 7px; }
  .main-area .heading-actions .button { flex: 1 1 145px; min-width: 0; }
  .main-area .stat-card { min-width: 0; padding: 11px; }
  .main-area .stat-card > span, .main-area .stat-card small { overflow-wrap: anywhere; }
  .main-area .next-action-panel { align-items: flex-start; flex-wrap: wrap; gap: 9px; padding: 13px; }
  .main-area .next-action-panel > * { min-width: 0; }
  .main-area .next-action-button { width: 100%; white-space: normal; }
  .main-area .panel, .main-area .form-panel { padding: 14px; }
  .main-area .form-stack { gap: 13px; }
  .main-area .form-actions { position: static; flex-wrap: wrap; margin: 0; padding: 0; border: 0; background: transparent; backdrop-filter: none; }
  .main-area .form-actions .button { flex: 1 1 140px; width: auto; min-width: 0; white-space: normal; }
  .main-area .catalog-filter-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .main-area .filter-actions { flex-wrap: wrap; gap: 10px; }
  .main-area .filter-actions > * { min-width: 0; }
  .main-area .catalog-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .main-area .edition-card { padding: 16px; gap: 10px; }
  .main-area .catalog-page { width: 100%; min-width: 0; }
  .main-area .catalog-modes { gap: 6px; }
  .main-area .catalog-modes a { min-width: 0; white-space: normal; }
  .main-area .review-tools { min-width: 0; }
  .main-area .review-tools > * { min-width: 0; overflow-wrap: anywhere; }
  .main-area .review-row { min-width: 0; gap: 8px; }
  .main-area .review-info { flex: 1 1 180px; overflow-wrap: anywhere; }
  .main-area .review-row > a { max-width: 100%; white-space: normal; }
  .main-area .status-update-form { min-width: 0; }
  .main-area .status-update-form > * { min-width: 0; max-width: 100%; }
  .main-area .site-footer { flex-wrap: wrap; gap: 4px 12px; }
}
@media (max-width: 420px) {
  .sidebar { grid-template-columns: minmax(0, 1fr) auto; }
  .sidebar .side-nav { gap: 3px; }
  .sidebar .nav-link { flex: 1 1 auto; padding: 7px 8px; font-size: 11px; }
  .main-area { padding-inline: 11px; }
  .main-area .topbar { margin-bottom: 10px; }
  .main-area .page-heading h1 { font-size: 21px; }
  .main-area .heading-actions .button { flex-basis: 100%; }
  .main-area .catalog-modes a { flex: 1 1 140px; text-align: center; }
  .main-area .filter-actions .button { flex: 1 1 100%; }
  .main-area .form-actions .button { flex-basis: 100%; }
}