/* ================================================
   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 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 */
  max-width: 100%;              /* Contain inside parent */
}

/* ================================================
   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;
  min-height: 2.75rem;
  width: auto;
  max-width: 100%;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 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: 0 0 220px;
  flex-direction: column;
  gap: 16px;
  width: 220px;
  max-width: 220px;
  min-width: 0;
}

.sidebar-primary-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.sidebar-nav {
  min-width: 0;
  width: 100%;
}

.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;
}

/* DigiPortAI portal — bottom of sidebar column (desktop: margin-top: auto) */
.sidebar-dai-portal {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 0.5rem;
  text-align: center;
}

.sidebar-dai-portal dai-home-button {
  --dai-btn-max-height: 44px;
}

.sidebar-dai-portal-caption {
  margin: 0.35rem 0 0;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

@media (min-width: 769px) {
  .sidebar.sidebar-stack {
    align-self: stretch;
  }
}

/* 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: 2.5rem;
}

.sidebar-nav .sidebar-feature-thumb-btn {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
  aspect-ratio: auto;
  height: auto !important;
  max-height: none;
  padding: 0.35rem;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.sidebar-nav .sidebar-feature-thumb-label {
  display: block;
  width: 100%;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.sidebar-nav .sidebar-feature-thumb-btn img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

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

/* Mobile top nav only (hidden on desktop) */
.site-nav--mobile-top {
  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 .dashboard-field--student-name .dashboard-student-name-stack {
  margin-bottom: 0;
}

.dashboard-page .dashboard-student-name-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.dashboard-page .dashboard-student-name-stack .dashboard-student-name-roster,
.dashboard-page .dashboard-student-name-stack .dashboard-student-name-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

.dashboard-page .dashboard-student-name-stack .is-hidden {
  display: none !important;
}

/* Under the student name control: caption first, checkbox immediately after (same row); snug to input. */
.dashboard-page .dashboard-field--student-name .dashboard-manual-entry-label {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.88rem;
  line-height: 1.35;
  cursor: pointer;
}

.dashboard-page .dashboard-field--student-name .dashboard-manual-entry-text {
  flex: 0 1 auto;
}

.dashboard-page .dashboard-field--student-name .dashboard-manual-entry-toggle-input {
  flex-shrink: 0;
  margin: 0;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}

.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, then sidebar actions in the vertical flow */
@media (max-width: 768px) {
  .page-layout {
    flex-direction: column;
  }

  /* Keep desktop sidebar features available on mobile by turning the sidebar into a full-width section. */
  .page-layout > .sidebar.sidebar-stack {
    display: flex !important;
    position: static;
    top: auto;
    align-self: stretch;
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    order: 0;
  }

  .sidebar.sidebar-stack > .card {
    width: 100%;
    margin-bottom: 0;
  }

  .page-layout > .sidebar.sidebar-stack > .sidebar-contact-instructor {
    order: 0;
  }

  .page-layout > .sidebar.sidebar-stack > .sidebar-primary-panel {
    order: 1;
  }

  .sidebar-primary-panel,
  .sidebar-nav {
    width: 100%;
  }

  .sidebar-nav {
    gap: 0.5rem;
  }

  .sidebar-nav .btn,
  .sidebar-contact-instructor .dashboard-contact-actions .btn {
    width: 100% !important;
  }

  .sidebar-address-card {
    margin-top: 0.75rem;
  }

  /* Dashboard mobile priority: hero/flags first, then Weekly Focus, then existing dashboard content. */
  .dashboard-page .page-layout > .page-content,
  .dashboard-page .page-layout > .sidebar.sidebar-stack {
    display: contents !important;
  }

  .dashboard-page .page-content > * {
    order: 2;
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .dashboard-page .dashboard-hero {
    order: 0;
  }

  .dashboard-page .page-layout > .sidebar.sidebar-stack > .sidebar-primary-panel {
    order: 1;
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .dashboard-page .sidebar-nav > .btn:not(.sidebar-feature-thumb-btn),
  .dashboard-page .sidebar-address-card,
  .dashboard-page .sidebar-contact-instructor {
    display: none !important;
  }

  .about-page .page-layout > .sidebar.sidebar-stack {
    display: none !important;
  }

  .about-page .page-layout > .page-content {
    display: block !important;
    width: 100%;
  }

  .about-page main.card > .box:nth-of-type(2),
  .about-page main.card > .box:nth-of-type(3) {
    display: none;
  }

  .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);
  }

  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;
  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;
  border-radius: 6px;
  box-sizing: border-box;
}

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

.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%;
  height: auto;
  min-height: 2.5rem;
  margin-bottom: 0;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.2;
}

/* 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;
  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: hide Description; show Learning Objective, Study, 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%;
  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;
  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;
  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;
  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;
}

.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;
  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;
}

.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: auto;
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .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;
  }

}