/*
 * Unified phone and tablet responsive layer.
 * Loaded last so it can safely normalize both the public and admin themes.
 */

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

/*
 * Navigation state is path-driven in the shared header. These rules
 * intentionally override older page-structure selectors so a reused
 * directory shell can never highlight the wrong section.
 */
.site-nav > a:not(.button) {
  color: #2c3547 !important;
  font-weight: 500 !important;
}

.site-nav > a:not(.button)::after {
  display: none !important;
}

.site-nav > a.nav-active:not(.button) {
  position: relative;
  color: #1677e8 !important;
  font-weight: 600 !important;
}

.site-nav > a.nav-active:not(.button)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  display: block !important;
  background: #1677e8;
}

.admin-sidebar-backdrop {
  display: none;
}

@media (min-width: 1025px) {
  .replica-admin-content .sidebar-collapse {
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 22px;
    transition:
      color 0.16s ease,
      background-color 0.16s ease,
      transform 0.2s ease;
  }

  .replica-admin-content .sidebar-collapse:hover,
  .replica-admin-content .sidebar-collapse:focus-visible {
    color: #1d4ed8;
    background: #eff6ff;
  }

  .replica-admin-content .admin-menu {
    margin-top: 44px;
  }
}

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

button,
a,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}

@media (max-width: 1024px) {
  :root {
    --mobile-gutter: 20px;
  }

  .container,
  .directory-page > .container,
  .directory-page .directory-hero .container,
  body:has(.school-directory) .school-directory > .container,
  body:has(.school-directory) .school-directory .directory-hero .container,
  .public-directory-theme > .container,
  .public-directory-theme > article.container {
    width: calc(100% - (var(--mobile-gutter) * 2));
    max-width: none;
    margin-inline: var(--mobile-gutter);
  }

  /* Public header and navigation */
  .site-header,
  body:has(.directory-page) .site-header,
  body:has(.school-directory) .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 64px;
    min-height: 64px;
  }

  .header-inner,
  body:has(.directory-page) .header-inner,
  body:has(.school-directory) .header-inner {
    width: calc(100% - (var(--mobile-gutter) * 2));
    max-width: none;
    min-height: 64px;
    height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 12px;
    margin-inline: var(--mobile-gutter);
  }

  .site-brand,
  body:has(.school-directory) .site-brand {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
    font-size: 15px;
  }

  .site-brand > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-brand br {
    display: none;
  }

  .site-brand small {
    display: none;
  }

  .school-directory-brand-icon,
  body:has(.school-directory) .school-directory-brand-icon {
    width: 42px;
    height: 30px;
    object-fit: contain;
  }

  .brand-mark {
    display: none;
  }

  .nav-toggle,
  body:has(.school-directory) .nav-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #1f2d45;
    background: #fff;
    border: 1px solid #d7deea;
    border-radius: 7px;
    font-size: 0;
    cursor: pointer;
  }

  .nav-toggle::before {
    content: "";
    width: 20px;
    height: 14px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-shadow: inset 0 5px 0 -3px currentColor, inset 0 -5px 0 -3px currentColor;
  }

  .nav-toggle[aria-expanded="true"]::before {
    width: 20px;
    height: 20px;
    border: 0;
    background:
      linear-gradient(45deg, transparent 45%, currentColor 46% 54%, transparent 55%),
      linear-gradient(-45deg, transparent 45%, currentColor 46% 54%, transparent 55%);
    box-shadow: none;
  }

  .site-nav,
  body:has(.directory-page) .site-nav,
  body:has(.school-directory) .site-nav {
    position: fixed;
    top: 64px;
    right: 0;
    left: 0;
    z-index: 99;
    max-height: calc(100dvh - 64px);
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    padding: 14px var(--mobile-gutter) calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #dfe5ed;
    box-shadow: 0 16px 34px rgba(31, 45, 69, 0.16);
  }

  .site-nav.open,
  body:has(.directory-page) .site-nav.open,
  body:has(.school-directory) .site-nav.open {
    display: grid;
  }

  .site-nav > a:not(.button),
  body:has(.directory-page) .site-nav > a:not(.button),
  body:has(.school-directory) .site-nav > a:not(.button) {
    min-height: 46px;
    height: auto;
    display: flex;
    align-items: center;
    padding: 0 13px;
    color: #26364f;
    background: #f8fafc;
    border-radius: 7px;
    font-size: 15px;
  }

  .site-nav > a:not(.button)::after {
    display: none !important;
  }

  .site-nav > a:not(.button):active,
  .site-nav > a:not(.button):focus-visible {
    color: #1769d2;
    background: #edf5ff;
  }

  .school-directory-header-search,
  .school-directory-consult {
    display: none !important;
  }

  body.public-nav-open {
    overflow: hidden;
  }

  body.public-nav-open::after {
    content: "";
    position: fixed;
    z-index: 90;
    inset: 64px 0 0;
    background: rgba(15, 23, 42, 0.28);
  }

  /* Public directory and detail pages */
  .directory-hero,
  body:has(.school-directory) .school-directory .directory-hero,
  .public-directory-theme > .directory-default-hero {
    min-height: 124px;
    height: auto;
  }

  .directory-hero .container,
  body:has(.school-directory) .school-directory .directory-hero .container,
  .public-directory-theme > .directory-default-hero .container {
    min-height: 124px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 20px;
  }

  .directory-hero h1,
  body:has(.school-directory) .school-directory .directory-hero h1,
  .public-directory-theme > .directory-default-hero .directory-title {
    font-size: clamp(25px, 4vw, 31px);
    white-space: normal;
  }

  .directory-hero p:last-child,
  body:has(.school-directory) .school-directory .directory-hero p {
    margin-top: 8px;
  }

  .directory-shell {
    min-width: 0;
    padding-top: 14px;
  }

  .directory-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .directory-search input,
  .directory-search .button {
    min-height: 44px;
    height: 44px;
  }

  body:has(.school-directory) .school-directory .directory-search input[type="text"],
  body:has(.school-directory) .school-directory .directory-search input:not([type]),
  body:has(.school-directory) .school-directory .directory-search .button {
    min-height: 44px;
    height: 44px;
  }

  .directory-search input {
    width: 100%;
    font-size: 16px;
  }

  .directory-reset {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .directory-filter-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .directory-options label span,
  .directory-more summary {
    min-height: 44px;
  }

  .directory-more-panel,
  .directory-advanced-panel {
    max-width: calc(100vw - (var(--mobile-gutter) * 2));
  }

  .directory-grid {
    grid-template-columns: 1fr;
  }

  .directory-card:nth-child(odd) {
    border-right: 0;
  }

  .directory-card-links a,
  .news-more,
  .table-text-button,
  .link-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .school-pagination {
    max-width: 100%;
    overflow: hidden;
  }

  .school-pagination .pagination,
  .directory-page .pagination {
    max-width: 100%;
    gap: 6px;
  }

  .school-pagination .pagination a,
  .school-pagination .pagination strong,
  .directory-page .pagination a,
  .directory-page .pagination strong {
    min-width: 42px;
    height: 42px;
  }

  .public-directory-theme .prose,
  .public-directory-theme .rich-article,
  .news-article-body {
    overflow-wrap: anywhere;
  }

  .public-directory-theme .prose table,
  .public-directory-theme .rich-article table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .footer-brand-column {
    grid-column: 1 / -1;
  }

  /* Admin shell */
  .admin-body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .admin-topbar {
    min-width: 0;
  }

  .admin-mobile-menu {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #334155;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    font-size: 22px;
    cursor: pointer;
  }

  .legacy-admin-content .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #334155;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    cursor: pointer;
  }

  .replica-admin-content .admin-topbar {
    height: 60px;
    min-height: 60px;
    padding: 0 16px;
  }

  .legacy-admin-content .admin-topbar {
    height: 60px;
    min-height: 60px;
  }

  .replica-admin-content .admin-topbar-brand {
    min-width: 0;
  }

  .replica-admin-content .admin-topbar-brand > a {
    display: none;
  }

  .replica-admin-content .admin-topbar-brand strong {
    max-width: min(46vw, 360px);
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .replica-admin-content .admin-account {
    min-width: 0;
    gap: 8px;
  }

  .replica-admin-content .admin-account > span,
  .replica-admin-content .admin-account .role-badge:not(:first-of-type) {
    display: none;
  }

  .replica-admin-content .admin-body-row {
    position: relative;
  }

  .replica-admin-content .admin-sidebar,
  .legacy-admin-content .admin-sidebar {
    position: fixed;
    z-index: 310;
    top: 60px;
    bottom: 0;
    left: 0;
    width: min(82vw, 320px);
    height: auto;
    max-height: calc(100dvh - 60px);
    display: block;
    padding: 14px 12px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    transform: translateX(-105%);
    transition: transform 0.2s ease-out;
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.2);
  }

  .legacy-admin-content .admin-sidebar {
    color: #fff;
    background: #101c33;
  }

  .legacy-admin-content .admin-workspace {
    width: 100%;
    min-width: 0;
  }

  .replica-admin-content.sidebar-expanded .admin-sidebar,
  .legacy-admin-content .admin-sidebar.open {
    width: min(82vw, 320px);
    transform: translateX(0);
  }

  .replica-admin-content .sidebar-collapse {
    display: none;
  }

  .replica-admin-content.sidebar-expanded .admin-menu span,
  .replica-admin-content.sidebar-expanded .admin-menu-group > div {
    display: initial;
  }

  .replica-admin-content.sidebar-expanded .admin-menu-group > div {
    display: grid;
  }

  .replica-admin-content .admin-menu {
    margin-top: 0;
  }

  .replica-admin-content .admin-menu > a,
  .replica-admin-content .admin-menu-group > summary {
    justify-content: flex-start;
  }

  .replica-admin-content .admin-menu span {
    display: inline;
  }

  .admin-sidebar-backdrop {
    position: fixed;
    z-index: 300;
    inset: 60px 0 0;
    display: none;
    padding: 0;
    background: rgba(15, 23, 42, 0.46);
    border: 0;
  }

  .replica-admin-content.sidebar-expanded .admin-sidebar-backdrop,
  .legacy-admin-content:has(.admin-sidebar.open) .admin-sidebar-backdrop {
    display: block;
  }

  .replica-admin-content .admin-main,
  .legacy-admin-content .admin-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 18px;
  }

  .replica-title-row,
  .replica-heading,
  .admin-page-heading,
  .section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .replica-title-row h1,
  .replica-heading h1,
  .admin-page-heading h1 {
    font-size: 22px;
  }

  .replica-search-card,
  .student-filter-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .replica-search-card input,
  .student-filter-card > *,
  .student-filter-card input,
  .student-filter-card select,
  .student-filter-card .student-keyword,
  .student-filter-card .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    font-size: 16px;
  }

  .student-operation-bar {
    align-items: flex-start;
  }

  .student-filter-mobile-heading {
    display: none;
  }

  .student-operation-bar > div {
    gap: 8px;
  }

  .student-op,
  .text-action,
  .row-actions button,
  .replica-dialog header > button {
    min-height: 44px;
    min-width: 44px;
  }

  .student-table-card,
  .replica-table-card,
  .permission-page .replica-table-card,
  .admin-table-wrap,
  .table-wrap {
    max-width: 100%;
  }

  .student-table-scroll,
  .replica-table-scroll,
  .admin-table-wrap,
  .table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .student-table-pagination,
  .replica-pagination {
    min-width: 0;
    flex-wrap: wrap;
  }

  .replica-dialog,
  .student-dialog,
  .confirm-dialog {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
  }

  .replica-dialog form,
  .student-dialog form {
    max-height: calc(100dvh - 24px);
  }

  .replica-dialog .dialog-body,
  .replica-dialog-body,
  .student-dialog form {
    overscroll-behavior: contain;
  }

  .permission-dialog .dialog-body {
    -webkit-overflow-scrolling: touch;
  }

  .admin-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid,
  .student-form-grid,
  .permission-name-row,
  .catalog-import-grid,
  .catalog-result-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  :root {
    --mobile-gutter: 14px;
  }

  .site-nav,
  body:has(.directory-page) .site-nav,
  body:has(.school-directory) .site-nav {
    grid-template-columns: 1fr;
  }

  .site-brand,
  body:has(.school-directory) .site-brand {
    font-size: 14px;
  }

  .directory-hero,
  body:has(.school-directory) .school-directory .directory-hero,
  .public-directory-theme > .directory-default-hero {
    min-height: 108px;
  }

  .directory-hero .container,
  body:has(.school-directory) .school-directory .directory-hero .container,
  .public-directory-theme > .directory-default-hero .container {
    min-height: 108px;
    padding-block: 16px;
  }

  .directory-hero h1,
  body:has(.school-directory) .school-directory .directory-hero h1,
  .public-directory-theme > .directory-default-hero .directory-title {
    font-size: 24px;
  }

  .directory-hero p:last-child,
  body:has(.school-directory) .school-directory .directory-hero p {
    font-size: 13px;
  }

  .directory-search {
    grid-template-columns: minmax(0, 1fr) 68px;
    gap: 8px;
  }

  .directory-reset {
    grid-column: 1 / -1;
  }

  .directory-filter-row {
    grid-template-columns: 1fr;
    padding-block: 8px;
  }

  .directory-filter-label {
    padding: 0 0 3px;
  }

  .directory-options {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .directory-options::-webkit-scrollbar {
    display: none;
  }

  .directory-options label span {
    padding-inline: 12px;
  }

  .directory-more {
    position: static;
    flex: 0 0 auto;
  }

  .directory-more-panel {
    right: var(--mobile-gutter);
    left: var(--mobile-gutter);
    width: auto;
  }

  .directory-advanced {
    padding-left: 0;
  }

  .directory-advanced-grid,
  .directory-advanced-panel {
    grid-template-columns: 1fr;
  }

  .directory-result-toolbar {
    align-items: center;
    gap: 8px;
  }

  .directory-result-toolbar p {
    min-width: 0;
  }

  .directory-result-toolbar label {
    flex: 0 0 auto;
  }

  .directory-result-toolbar select {
    min-width: 100px;
  }

  .directory-card,
  body:has(.school-directory) .school-directory .directory-card {
    min-height: 0;
    padding: 14px 12px;
  }

  .directory-card-links {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .major-card-facts,
  body:has(.major-directory) .major-directory .major-card-facts {
    grid-template-columns: 1fr;
  }

  .school-pagination {
    min-height: 0 !important;
    padding: 12px var(--mobile-gutter) !important;
  }

  .school-pagination .pagination,
  .directory-page .pagination {
    margin-block: 0;
  }

  .school-pagination .pagination span,
  .directory-page .pagination span {
    width: 100%;
    flex-basis: 100%;
    margin: 0 0 4px;
    text-align: center;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
  }

  .footer-note {
    gap: 8px;
  }

  /* Admin phone */
  .replica-admin-content .admin-topbar,
  .legacy-admin-content .admin-topbar {
    padding-inline: 10px;
  }

  .replica-admin-content .admin-topbar-brand strong {
    max-width: 42vw;
    font-size: 14px;
  }

  .replica-admin-content .admin-account .role-badge {
    display: none;
  }

  .replica-admin-content .admin-logout {
    min-height: 44px;
    padding-inline: 8px;
  }

  .replica-admin-content .admin-main,
  .legacy-admin-content .admin-main {
    padding: 12px;
  }

  .replica-title-row,
  .replica-heading,
  .admin-page-heading {
    gap: 10px;
    margin-bottom: 14px;
  }

  .replica-title-row h1,
  .replica-heading h1,
  .admin-page-heading h1 {
    font-size: 20px;
  }

  .replica-title-row > *,
  .replica-heading > * {
    max-width: 100%;
  }

  .replica-search-card,
  .student-filter-card,
  .admin-filter,
  .form-grid,
  .student-form-grid,
  .permission-name-row,
  .catalog-import-grid,
  .catalog-result-columns {
    grid-template-columns: 1fr;
  }

  .student-filter-mobile-heading {
    grid-column: 1 / -1;
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
  }

  .student-filter-mobile-heading strong {
    color: #1f2937;
    font-size: 16px;
  }

  .student-filter-mobile-heading button {
    min-width: 92px;
    min-height: 44px;
    padding: 0 12px;
    color: #2563eb;
    background: #eff6ff;
    border: 0;
    border-radius: 7px;
    font-weight: 600;
  }

  .student-filter-card:not(.is-mobile-open) > select {
    display: none;
  }

  .student-operation-bar {
    flex-direction: column;
    gap: 8px;
  }

  .student-operation-bar > div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-op {
    width: 100%;
  }

  .student-table-card {
    min-height: 420px;
  }

  .student-table-pagination {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .student-table-pagination > label,
  .student-table-pagination > div,
  .student-table-pagination > span {
    justify-content: center;
    text-align: center;
  }

  .student-table-pagination > div {
    min-height: 44px;
  }

  .replica-pagination {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
  }

  .replica-pagination > div {
    justify-content: center;
  }

  .replica-dialog,
  .student-dialog,
  .confirm-dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 10px;
  }

  .replica-dialog form,
  .student-dialog form {
    max-height: calc(100dvh - 16px);
  }

  .replica-dialog header,
  .replica-dialog footer,
  .replica-dialog .dialog-body,
  .replica-dialog-body,
  .student-dialog form {
    padding: 16px;
  }

  .replica-dialog footer,
  .student-dialog .dialog-actions,
  .sticky-actions {
    flex-wrap: wrap;
  }

  .replica-dialog footer .button,
  .student-dialog .dialog-actions .button {
    min-height: 44px;
  }

  .permission-dialog .detail-permission-grid,
  .permission-dialog .scope-options,
  .role-check-grid,
  .school-check-list {
    grid-template-columns: 1fr;
  }

  .field-permission-head,
  .field-permission-row {
    grid-template-columns: minmax(0, 1fr) 58px 58px;
    padding-inline: 10px;
  }

  .repeat-row,
  .repeat-row.faq-row,
  .major-editor .repeat-row {
    grid-template-columns: 1fr;
  }

  .school-editor fieldset,
  .card {
    padding: 16px;
  }

  .form-tabs {
    top: 60px;
  }

  .login-page {
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  }

  .login-card {
    padding: 22px 18px;
    border-radius: 14px;
  }

  .toast-region {
    top: 70px;
    right: 12px;
    left: 12px;
  }

  .toast {
    width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .site-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .replica-dialog,
  .student-dialog,
  .confirm-dialog {
    max-height: calc(100dvh - 8px);
  }

  .replica-dialog form,
  .student-dialog form {
    max-height: calc(100dvh - 8px);
  }
}

/*
 * Final responsive corrections.
 *
 * Older school-library replica rules intentionally use fixed row heights on
 * desktop. The shared public shell also carries the school-directory theme,
 * so those fixed heights used to leak into the other directory pages on
 * phones and tablets. Keep the desktop geometry, but let compact layouts size
 * themselves from their content.
 */
.directory-mobile-filter-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .directory-page .directory-filter,
  .directory-page .guide-unified-filter,
  body:has(.major-directory) .major-directory .directory-filter,
  body:has(.school-library-page) .school-library-page .directory-filter {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .directory-page .directory-filter-row,
  .directory-page .directory-filter-row:last-of-type,
  body:has(.major-directory) .major-directory .directory-filter-row,
  body:has(.school-library-page) .school-library-page .directory-filter-row {
    height: auto !important;
    min-height: 64px !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 10px 14px;
    align-items: start;
    padding: 9px 0 !important;
  }

  .directory-page .directory-filter-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 !important;
  }

  .directory-page .directory-options,
  body:has(.major-directory) .major-directory .directory-options,
  body:has(.school-library-page) .school-library-page .directory-options {
    height: auto !important;
    min-height: 44px !important;
    flex-wrap: wrap !important;
    align-items: center;
    overflow: visible !important;
  }

  .directory-page .directory-options label > span,
  .directory-page .directory-options > a,
  .directory-page .directory-more summary,
  body:has(.major-directory) .major-directory .directory-options label > span,
  body:has(.school-library-page) .school-library-page .directory-options label > span {
    height: auto !important;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    line-height: 1.35 !important;
  }

  .guide-inline-selects {
    min-width: 0;
    flex-wrap: wrap;
    align-items: end;
  }

  .guide-inline-selects label {
    min-width: min(180px, 100%);
    flex: 1 1 180px;
  }

  .guide-inline-selects select,
  .guide-inline-selects .button {
    min-height: 44px;
  }

  .directory-grid,
  .news-list,
  .faq-unified-list {
    gap: 14px;
  }

  .directory-card-heading h2,
  .unified-content-card .directory-card-heading h2,
  .news-list h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .directory-card-heading h2 a,
  .unified-content-card .directory-card-heading h2 a,
  .news-list h2 a {
    white-space: normal;
  }

  .footer-notice {
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /*
   * The school-major table is presented as stacked labelled rows on phones.
   * Reset its desktop min-width so the stacked rows do not retain a hidden
   * 930px canvas.
   */
  .public-directory-theme .school-major-table-wrap {
    overflow: visible;
  }

  .public-directory-theme .school-major-link-table,
  .public-directory-theme .school-major-link-table tbody,
  .public-directory-theme .school-major-row {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .public-directory-theme .school-major-row {
    display: block;
    padding: 8px 0;
  }

  .public-directory-theme .school-major-row td {
    width: 100% !important;
    max-width: none !important;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    white-space: normal;
  }

  .public-directory-theme .school-major-row td::before {
    margin: 0;
    color: #68758a;
    font-size: 12px;
    font-weight: 500;
  }

  .public-directory-theme .school-major-row .cell-ellipsis {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .public-directory-theme .facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-directory-theme .facts-grid > div {
    min-width: 0;
    min-height: 72px;
    padding: 12px;
  }

  .public-directory-theme .facts-grid dd {
    overflow-wrap: anywhere;
  }

  .public-directory-theme .breadcrumbs,
  .public-directory-theme .breadcrumb {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .public-directory-theme .breadcrumbs::-webkit-scrollbar,
  .public-directory-theme .breadcrumb::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 640px) {
  .directory-mobile-filter-toggle {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 0 15px;
    color: #225ea8;
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: 9px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(42, 73, 117, 0.06);
  }

  .directory-mobile-filter-toggle i {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.16s ease;
  }

  .directory-mobile-filter-toggle[aria-expanded="true"] i {
    transform: rotate(225deg) translate(-2px, -1px);
  }

  .directory-filter[data-mobile-filter-panel]:not(.is-mobile-open) {
    display: none !important;
  }

  .directory-filter[data-mobile-filter-panel].is-mobile-open {
    display: block !important;
    margin-bottom: 12px;
  }

  .directory-page .directory-filter-row,
  .directory-page .directory-filter-row:last-of-type,
  body:has(.major-directory) .major-directory .directory-filter-row,
  body:has(.school-library-page) .school-library-page .directory-filter-row {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px;
    padding: 10px 0 !important;
  }

  .directory-page .directory-filter-label {
    min-height: 24px;
    font-size: 13px;
  }

  .directory-page .directory-options,
  body:has(.major-directory) .major-directory .directory-options,
  body:has(.school-library-page) .school-library-page .directory-options {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
  }

  .directory-page .directory-options > label,
  .directory-page .directory-options > a,
  .directory-page .directory-more {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .directory-page .directory-more summary {
    min-height: 44px !important;
  }

  .directory-filter-reset {
    position: static;
    min-height: 44px;
    margin-top: 8px;
  }

  .directory-result-toolbar {
    min-height: 52px;
  }

  .directory-result-toolbar p {
    font-size: 14px;
    white-space: nowrap;
  }

  .directory-result-toolbar select {
    width: min(132px, 38vw);
    min-width: 0;
    height: 44px;
    padding-inline: 9px 28px;
    font-size: 14px;
  }

  .directory-card-heading h2,
  .unified-content-card .directory-card-heading h2,
  .news-list h2 {
    height: auto !important;
    min-height: 0;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .directory-card-heading h2 a,
  .unified-content-card .directory-card-heading h2 a,
  .news-list h2 a {
    white-space: normal !important;
  }

  .unified-card-summary,
  .news-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .directory-card-links {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .directory-card-links a {
    justify-content: center;
  }

  .footer-notice {
    grid-column: 1 / -1;
  }

  .footer-note {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 359px) {
  .public-directory-theme .facts-grid {
    grid-template-columns: 1fr;
  }

  .site-brand > span:last-child {
    font-size: 13px;
  }

  .content-project-switcher summary {
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}