/* ================================================
   GLOBAL BASE STYLES — structure and layout only
   This file should NEVER define colors or theme.
   Used for resets, layout, typography sizing, and
   container formatting shared by all themes.

   This allows me to keep this as a basic topography template and just change the color addon sheet for different looks.
   Colors and theme-specific styles go in the theme files. The the only thing I need to change is the css refernce link in the HTML document head.
   ================================================ */

/* Reset default browser margins, paddings, and box model */
* {
  margin: 0;
  /* Remove default outer spacing */
  padding: 0;
  /* Remove default inner spacing */
  box-sizing: border-box;
  /* Use border-box model globally */
}

/* Set default page height and global font */
html,
body {
  height: 100%;
  /* Fill entire screen vertically */
  font-family: Arial, sans-serif;
  /* Clean sans-serif base font */
  line-height: 1.5;
  /* Comfortable line spacing */
}

/* ================================================
   GLOBAL LAYOUT WRAPPER
   Constrains page width and centers layout
   ================================================ */
.wrapper {
  max-width: 1500px;
  /* Limits overall width of content */
  margin: 0 auto;
  /* Horizontally centers the page */
  padding: 0 1rem;
  /* Adds breathing room on left/right */
}

/* ================================================
   GLOBAL GRID: Responsive auto-wrapping layout
   Used to lay out TIM cards or song blocks
   ================================================ */
.grid-4col {
  display: grid;
  /* Enable CSS Grid */
grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;
  /* Gap between grid items */
  margin-top: 2rem;
  /* Space above grid */
}

/* Medium screens: switch to 2 columns */
@media (max-width: 1024px) {
  .grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens (phones): switch to 1 column */
@media (max-width: 600px) {
  .grid-4col {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   GLOBAL TYPOGRAPHY — sizing and alignment only
   Theme-specific colors are set in theme files
   ================================================ */
h1 {
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 2em;
  text-align: center;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 0.5em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.9em;
}

p {
  font-size: 1em;
  margin-bottom: 1em;
}

ul,
ol {
  margin-left: 1.5em;
  /* Indent lists */
  margin-bottom: 1em;
  /* Space below lists */
}

li {
  margin-bottom: 0.5em;
  /* Space between list items */
}
/* ================================================
   GLOBAL CONTAINERS — Card & Box Layouts
   Shared structural styles (color in theme files)
   ================================================ */

.card,
.box {
  padding: 1.5rem;              /* More breathing room */
  margin-bottom: 2rem;          /* Clear separation between sections */
  border-radius: 6px;           /* Softer corners */
  overflow-x: hidden;           /* Prevent horizontal scroll */
  max-width: 100%;              /* Contain inside parent */
}

/* 
.button-row — FLEX CONTAINER FOR BUTTONS
Horizontally aligns a row of buttons using flexbox. 
Buttons automatically wrap to a new line if the screen is too narrow.

- No vertical spacing between lines
- Horizontal gap between buttons
- Keeps layout compact and centered
*/
.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 12px;
    padding: 0.5rem;
}

/* 
.button-row .btn — BUTTON RESIZING RULES
Applies sizing rules for buttons inside .button-row.

- Prevents buttons from stretching
- Ensures they remain usable on smaller screens
- Centers button text for consistency
*/
.button-row .btn {
    flex: 0 1 auto;
    min-width: 120px;
    text-align: center;
}


/* ================================================
   TIM TILE (Track • Image • Music) Blocks
   Used inside .grid-4col for music cards
   ================================================ */

.TIM {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.1); /* Subtle glow (theme color adjustable) */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.TIM:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.4); /* Enhance on hover */
}

.TIM h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  text-align: center;
  min-height: 2.6rem;               /* Maintain consistent title height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: balance;
}

/* Responsive image handling inside TIM blocks */
.TIM img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* Audio player spacing */
.TIM audio {
  margin-top: auto;
  width: 100%;
}

/* ================================================
   GLOBAL FORMS / INPUTS / BUTTON STRUCTURE ONLY
   Colors defined in theme files
   ================================================ */
input,
select,
textarea {
  font-size: 1em;
  padding: 0.5em;
  margin-bottom: 1em;
  border: 1px solid;
  /* Color defined in theme */
  background-color: transparent;
  color: inherit;
  /* Text color from theme */
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

button,
.btn {
  font-size: 1em;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  border: 2px solid;
  /* Color defined in theme */
  cursor: pointer;
  text-align: center;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  width: 20%;
  font-weight: bold;
  text-decoration: none;
}

/* Misc */
hr {
  border: 0;
  height: 1px;
  margin: 1em 0;
}

blockquote {
  margin: 1em 2em;
  padding: 0.5em 1em;
  border-left: 4px solid;
}

code,
pre {
  font-family: monospace;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

pre {
  overflow-x: auto;
  padding: 1em;
}

/* ================================================
   LEFT SIDEBAR NAVIGATION LAYOUT
   Used to keep navigation consistent across pages.
   ================================================ */
.page-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.sidebar {
  min-width: 220px;
}

/* Stacked sidebar: primary panel (nav + address) + Contact Instructor; 16px gap */
.sidebar.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-primary-panel {
  display: flex;
  flex-direction: column;
}

.sidebar-contact-instructor h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
}

.sidebar-contact-instructor .dashboard-contact-actions {
  margin-top: 0;
}

/* Tighter chrome than generic .card (1.5rem) — legacy single-card sidebar */
.sidebar.card {
  padding: 0.75rem;
}

/* Sidebar stack children use their own .card borders; suppress extra vertical margin from dashboard grid */
.dashboard-page .sidebar.sidebar-stack > .card {
  margin-bottom: 0;
}

/* Dashboard: keep sidebar visible while scrolling */
.dashboard-page .sidebar {
  position: sticky;
  top: 8px;
  align-self: flex-start;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar-nav .btn {
  width: 100% !important;
  margin-bottom: 0;
  height: auto;
  padding: 8px;
  min-height: 0;
}

/* Gold mailto address card in sidebar: black text (overrides .dashboard-page p white from theme) */
.dashboard-page a.sidebar-address-card,
.dashboard-page a.sidebar-address-card p,
.dashboard-page a.sidebar-address-card strong {
  color: #000000;
}

.dashboard-page a.sidebar-address-card:visited {
  color: #000000;
}

.page-content {
  flex: 1;
  width: 100%;
  min-width: 0;
}

/* Mobile top nav only (hidden on desktop); bottom nav not used */
.site-nav--mobile-top,
.site-nav--mobile-bottom {
  display: none;
}

.site-nav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.site-nav-row .btn {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 8rem;
  width: auto !important;
  margin-bottom: 0;
}

/* Dashboard: vertical gaps between sections ≤ 8px */
.dashboard-page .card {
  margin-bottom: 8px;
}

/* Title + personal info: one bordered panel; inner wrappers must not draw a second box */
.dashboard-page .dashboard-header-personal {
  padding: 1.5rem;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.dashboard-page .dashboard-header-personal .dashboard-page-header-panel,
.dashboard-page .dashboard-header-personal .dashboard-personal-main {
  border: none !important;
  box-shadow: none !important;
  outline: none;
  background: transparent !important;
  padding: 0;
  margin: 0;
}

.dashboard-page .dashboard-header-personal .dashboard-page-header-panel h1 {
  margin-top: 0;
}

.dashboard-page .dashboard-header-personal .dashboard-personal-main {
  margin-top: 0.5rem;
}

.dashboard-page .dashboard-header-personal .dashboard-personal-grid {
  margin-top: 0;
}

.dashboard-page .dashboard-student-id-combobox {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.dashboard-page .page-layout {
  gap: 8px;
}

.dashboard-page .sidebar-nav {
  gap: 8px;
}

/* Dashboard: site links row inside page footer (not a separate card) */
.dashboard-page footer.card {
  padding: 0.5rem 1rem 0.65rem;
}

.dashboard-page .dashboard-mobile-footer-nav {
  display: block;
  margin-top: 0;
  padding-top: 0;
  box-sizing: border-box;
}

.dashboard-page .dashboard-mobile-footer-nav .site-nav-row {
  flex-wrap: nowrap;
  gap: 0.2rem;
  justify-content: stretch;
}

.dashboard-page .dashboard-mobile-footer-nav .site-nav-row .btn {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: auto;
  min-height: 2.1rem;
  padding: 0.3rem 0.12rem;
  font-size: clamp(0.54rem, 2.4vw, 0.72rem);
  font-weight: 600;
  line-height: 1.1;
  border-width: 2px;
  white-space: nowrap;
  text-align: center;
  hyphens: none;
  overflow-wrap: normal;
  margin-bottom: 0;
}

.dashboard-page .dashboard-mobile-footer-nav .site-nav-row .btn[href="dashboard.html"] {
  font-size: clamp(0.68rem, 3.04vw, 0.91rem);
}

.dashboard-page .dashboard-footer-tagline {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.45;
}

.dashboard-page .dashboard-footer-tagline__school,
.dashboard-page .dashboard-footer-tagline__street,
.dashboard-page .dashboard-footer-tagline__locality,
.dashboard-page .dashboard-footer-tagline__phone {
  display: inline;
}

/* Mobile: stacked “mailing block” address; desktop stays one line (min-width matches sidebar breakpoint) */
@media (max-width: 768px) {
  .dashboard-page .dashboard-footer-tagline {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2em;
    line-height: 1.35;
  }

  .dashboard-page .dashboard-footer-tagline__dash,
  .dashboard-page .dashboard-footer-tagline__sep {
    display: none;
  }

  .dashboard-page .dashboard-footer-tagline__school,
  .dashboard-page .dashboard-footer-tagline__street,
  .dashboard-page .dashboard-footer-tagline__locality,
  .dashboard-page .dashboard-footer-tagline__phone {
    display: block;
  }
}

/* ================================================
   RESPONSIVE: Mobile + Large Screens
   ================================================ */

/* Phones / small tablets: fixed top nav only, hide sidebar */
@media (max-width: 768px) {
  .page-layout {
    flex-direction: column;
  }

  /* Sidebar is desktop-only */
  .sidebar {
    display: none !important;
  }

  .page-content {
    width: 100%;
  }

  .wrapper {
    padding: 0 0.75rem;
  }

  /* Fixed (not sticky): sticky breaks when an ancestor uses overflow:hidden — e.g. .home-page .wrapper */
  .site-nav--mobile-top {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
  }

  /* Reserve space: fixed nav is out of flow; match prior nav block + margin (1rem; dashboard uses 8px) */
  .wrapper > .page-layout {
    padding-top: calc(max(0.45rem, env(safe-area-inset-top, 0px)) + 3.25rem + 1rem);
  }

  .dashboard-page .wrapper > .page-layout {
    padding-top: calc(max(0.45rem, env(safe-area-inset-top, 0px)) + 3.25rem + 8px);
  }

  html {
    scroll-padding-top: calc(max(0.45rem, env(safe-area-inset-top, 0px)) + 3.35rem);
  }

  /* Tighter horizontal padding so four buttons fit (iPhone 12 ~390px) */
  .site-nav--mobile-top.card {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    padding-bottom: 0.45rem;
  }

  /* Four small buttons in one row */
  .site-nav-row {
    flex-wrap: nowrap;
    gap: 0.2rem;
    justify-content: stretch;
  }

  .site-nav-row .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    height: auto;
    min-height: 2.1rem;
    padding: 0.3rem 0.12rem;
    font-size: clamp(0.54rem, 2.4vw, 0.72rem);
    font-weight: 600;
    line-height: 1.1;
    border-width: 2px;
    white-space: nowrap;
    text-align: center;
    hyphens: none;
    overflow-wrap: normal;
  }

  /* Mobile nav: Student Dashboard slightly smaller than siblings */
  .site-nav--mobile-top .site-nav-row .btn[href="dashboard.html"] {
    font-size: clamp(0.68rem, 3.04vw, 0.91rem);
  }

  /* Any horizontal button row should become full-width on mobile */
  .button-row .btn {
    width: 100%;
  }

  body {
    overflow-x: hidden;
  }

}

/* Dashboard hero flags: US → KSW → Korea in one row (overrides stacked .home-row below 900px from home.css) */
@media (max-width: 900px) {
  .dashboard-page .dashboard-hero-flags.home-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.2rem, 2vw, 0.45rem);
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
    align-items: center;
  }

  .dashboard-page .dashboard-hero-flags .home-flag-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.1rem;
  }

  .dashboard-page .dashboard-hero-flags .home-flag-cell img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }
}

/* Very small phones: scale down headings slightly */
@media (max-width: 420px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* Large screens: allow a bit more width (optional) */
@media (min-width: 1920px) {
  .wrapper {
    max-width: 1800px;
  }
}

/* Desktop (PC): no horizontal page scroll; avoid 100vw + scrollbar overflow */
@media (min-width: 1024px) {
  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    max-width: 100%;
  }

  img,
  video,
  svg {
    max-width: 100%;
    height: auto;
  }
}

/* ================================================
   DASHBOARD: Personal Information form grid
   Single column on mobile; three from 769px; four from 1280px (widescreen).
   Breakpoint aligns with sidebar / page-layout (769px+).
   ================================================ */
.dashboard-personal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
  align-items: start;
}

.dashboard-field {
  min-width: 0;
}

.dashboard-field p {
  margin-bottom: 0.35em;
}

.dashboard-field input,
.dashboard-field select {
  width: 100%;
  max-width: 100%;
}

.dashboard-field .dashboard-reset-button {
  width: 100%;
  max-width: 100%;
  font-size: 1em;
  padding: 0.5em;
  border: 1px solid;
  background-color: #ffcc00;
  color: #000000;
  cursor: pointer;
  border-radius: 14px;
  margin-bottom: 1em;
}

.dashboard-page .dashboard-membership {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0.15rem 0 0.25rem;
  padding: 0.55rem 0.75rem 0.65rem;
  border: 1px solid rgba(255, 204, 0, 0.4);
  border-radius: 6px;
  box-sizing: border-box;
}

.dashboard-page .dashboard-membership > legend {
  padding: 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffcc00;
}

.dashboard-page .dashboard-membership-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}

@media (min-width: 769px) {
  .dashboard-page .dashboard-membership-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 769px) {
  .dashboard-personal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Widescreen: four columns (standard tablet/desktop stays three above) */
@media (min-width: 1280px) {
  .dashboard-personal-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dashboard-contact-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.dashboard-contact-actions .btn {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  box-sizing: border-box;
}

/* Dashboard: syllabus requirements list (grouped by curriculum rank) */
.dashboard-page .requirements-hint {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.dashboard-page .requirements-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.dashboard-page .requirements-actions .btn {
  width: auto !important;
  height: auto;
  min-height: 2.2rem;
  margin-bottom: 0;
}

.dashboard-page .dashboard-modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 1000;
}

.dashboard-page .dashboard-modal-backdrop.is-open {
  display: flex;
}

.dashboard-page .scroll-controls {
  position: fixed;
  top: 40%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 900;
}

.dashboard-page .scroll-controls-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}

/* Double-arrow jump controls (top / end of page) */
.dashboard-page .scroll-controls-btn--jump {
  font-size: 20px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .dashboard-page .scroll-controls {
    display: none;
  }

  /* Mobile dashboard table: show only Learning Objective + Status */
  .dashboard-page .requirement-table .description-col {
    display: none;
  }

  .dashboard-page .requirement-table {
    min-width: 0;
  }
}

.dashboard-page .dashboard-modal {
  max-width: 480px;
  width: 100%;
  background-color: #000;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
}

.dashboard-page .dashboard-modal-header {
  margin-bottom: 0.5rem;
}

.dashboard-page .dashboard-modal-title {
  margin: 0;
  font-size: 1.2rem;
  text-align: left;
}

.dashboard-page .dashboard-modal-body {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.dashboard-page .dashboard-modal-body p {
  margin-bottom: 0.5rem;
}

.dashboard-page .dashboard-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.dashboard-page .dashboard-modal-footer .btn {
  width: auto !important;
  min-height: 2rem;
  margin-bottom: 0;
}

.dashboard-page .dashboard-testable h3 {
  text-align: left;
}

.dashboard-page .dashboard-testable .testable-intro {
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  text-align: left;
}

.dashboard-page .testable-rollups {
  margin-top: 0.25rem;
}

.dashboard-page .testable-rollup-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 0;
}

.dashboard-page .testable-rollup-line {
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255, 204, 0, 0.18);
  font-size: 0.95rem;
  text-align: left;
}

.dashboard-page .testable-rollup-line:last-child {
  border-bottom: none;
}

.dashboard-page .testable-empty {
  margin: 0;
  font-size: 0.9rem;
  text-align: left;
  opacity: 0.92;
}

.dashboard-page .dashboard-progress-summary .progress-summary-intro {
  margin-bottom: 0.35rem;
}

.dashboard-page .progress-summary-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 0.35rem;
}

@media (min-width: 768px) {
  .dashboard-page .progress-summary-split {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
}

.dashboard-page .progress-summary-column {
  min-width: 0;
  border: 1px solid #ffcc00;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
}

.dashboard-page .progress-summary-subheading {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  color: #ffcc00;
  text-align: left;
}

.dashboard-page .progress-summary-by-status {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0.4rem 0 0;
}

.dashboard-page .progress-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 204, 0, 0.22);
}

.dashboard-page .progress-summary-row:last-child {
  border-bottom: none;
}

.dashboard-page .progress-summary-label {
  font-weight: 600;
}

.dashboard-page .progress-summary-num {
  font-variant-numeric: tabular-nums;
  min-width: 2.5ch;
  text-align: right;
}

.dashboard-page .requirements-status {
  min-height: 1.25em;
  margin-bottom: 0.35rem;
}

.dashboard-page .requirements-by-rank {
  margin-top: 0.25rem;
}

.dashboard-page .requirement-major-section {
  margin-top: 1.75rem;
}

.dashboard-page .requirement-major-section:first-child {
  margin-top: 0;
}

.dashboard-page .requirements-section-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin: 1.5rem 0;
  height: 0;
}

.dashboard-page .requirements-section-divider + .requirement-major-section {
  margin-top: 0;
}

.dashboard-page .requirement-section-heading {
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  text-align: left;
}

.dashboard-page .requirement-section-subtext {
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 0.75rem;
  max-width: 52rem;
  text-align: left;
  opacity: 0.95;
}

.dashboard-page .requirement-major-section--by-status {
  margin-top: 1rem;
  padding: 0.85rem 1rem 1rem;
  border-radius: 6px;
}

.dashboard-page .requirement-major-section--by-status:first-of-type {
  margin-top: 0;
}

.dashboard-page .requirement-section-empty {
  font-size: 0.95rem;
  margin: 0;
  font-style: italic;
}

.dashboard-page .requirement-rank-group {
  margin-top: 1.35rem;
}

.dashboard-page .requirement-groups .requirement-rank-group:first-child {
  margin-top: 0;
}

.dashboard-page .requirement-rank-heading {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
  text-align: left;
}

.dashboard-page .requirement-disclosure {
  margin: 0.5rem 0 0;
  border-radius: 4px;
}

.dashboard-page .requirement-disclosure--lo {
  margin: 0.35rem 0 0 0.75rem;
  padding-left: 0.35rem;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.dashboard-page .requirement-disclosure-summary {
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  padding: 0.25rem 0;
}

.dashboard-page .requirement-disclosure-summary--lo {
  font-weight: 500;
  font-size: 0.95rem;
}

.dashboard-page .requirement-type-heading {
  margin: 0.8rem 0 0.35rem;
  font-size: 0.98rem;
  text-align: left;
}

.dashboard-page .requirement-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.dashboard-page .requirement-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

.dashboard-page .requirement-table th,
.dashboard-page .requirement-table td {
  padding: 0.35rem 0.45rem;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.dashboard-page .requirement-table th {
  font-size: 0.92rem;
}

.dashboard-page .requirement-table td {
  font-size: 0.9rem;
}

.dashboard-page .requirement-status-select {
  width: 100%;
  min-width: 9rem;
  margin: 0;
}

/* Final mobile override: force-hide Description column */
@media (max-width: 768px) {
  .dashboard-page .requirement-table th.description-col,
  .dashboard-page .requirement-table td.description-col,
  .dashboard-page .requirement-table th:first-child,
  .dashboard-page .requirement-table td:first-child {
    display: none !important;
  }

  .dashboard-page .requirement-table-wrap {
    overflow-x: hidden;
  }

  .dashboard-page .requirement-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
  }

  /* Visible mobile columns: Learning Objective + Status */
  .dashboard-page .requirement-table th:nth-child(2),
  .dashboard-page .requirement-table td:nth-child(2) {
    width: 20ch;
    max-width: 20ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dashboard-page .requirement-table th:nth-child(3),
  .dashboard-page .requirement-table td:nth-child(3) {
    width: 10ch;
    max-width: 10ch;
  }

  .dashboard-page .requirement-status-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 0.85rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}