/* v0.4: task-focused pages and responsive controls. */
.campus-clock { min-width: 112px; }
.campus-clock strong { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.schedule-controls, .schedule-list { width: 100%; max-width: none; }
.schedule-controls .date-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 10px; margin: 20px 0 0; padding: 2px; overflow: visible; }
.schedule-controls .date-button { width: 100%; min-width: 0; min-height: 84px; padding: 12px 8px; }
.schedule-controls .date-button.active { background: var(--forest,#234b63); border-color: var(--forest,#234b63); }
.schedule-controls .date-button:not(.active):hover { background: #f1f5f5; }
.schedule-list { margin-top: 24px; }
.schedule-list .empty-state { padding: 48px 20px; }
.housing-service-grid { display: flex; flex-direction: column; gap: 0; }
.housing-service-button { width: 100%; min-height: 67px; display: flex; align-items: center; justify-content: flex-start; padding: 10px 8px; gap: 12px; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; }
.housing-service-button:last-child { border-bottom: 0; }
.housing-service-button:hover { background: #f4f7f7; border-color: var(--line); border-radius: 10px; }
.housing-service-button .housing-service-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: #edf3f4; color: #446d7b; border-radius: 12px; }
.housing-service-button .housing-service-icon svg { width: 20px; height: 20px; margin: 0; }
.housing-service-button .housing-service-copy { flex: 1; min-width: 0; }
.housing-service-copy strong { color: #2d4658; font-size: 13px; font-weight: 600; }
.housing-service-copy small { margin-top: 3px; font-size: 11px; line-height: 1.5; color: #72848d; }
.housing-service-button > svg { width: 16px; height: 16px; flex: none; }
.housing-layout { align-items: start; }
.housing-layout > .card { height: auto; }
.content-scope-tabs { display: flex; width: fit-content; max-width: 100%; gap: 5px; padding: 5px; background: #e9eeef; border-radius: 12px; margin: 0 0 20px; }
.content-scope-tabs button { border: 0; background: transparent; color: #6b7d87; border-radius: 8px; min-height: 38px; padding: 8px 21px; font: inherit; font-size: 13px; cursor: pointer; }
.content-scope-tabs button.active { background: #fff; color: #274c62; box-shadow: 0 2px 5px #173b5010; }
.doctor-filters { display: grid; grid-template-columns: minmax(180px,1.5fr) minmax(140px,1fr) minmax(150px,1fr); gap: 15px; align-items: end; background: #eef3f3; border: 1px solid #dde7e6; border-radius: 16px; padding: 20px; margin: 0 0 22px; }
.doctor-filters .field { margin: 0; min-width: 0; }
.doctor-filters label { display: block; color: #58707c; font-size: 11px; margin-bottom: 8px; }
.doctor-filters input, .doctor-filters select { width: 100%; background: #fff; min-height: 44px; }
.doctor-filter-count,.doctor-search-empty { grid-column: 1/-1; margin: 0; font-size: 11px; }
.doctor-card[hidden], .clinic-slot[hidden], .doctor-search-empty[hidden] { display: none !important; }
.clinic-slot-grid { max-height: 48vh; overflow-y: auto; padding: 3px; }
.sports-view-tabs { margin-bottom: 24px; }
.sports-section-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-bottom: 24px; }
.sports-section-grid > .empty-state { grid-column: 1/-1; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.sport-section-card { display: flex; flex-direction: column; min-width: 0; padding: 25px; margin: 0; }
.sport-section-card .card-header { margin: 0 0 20px; gap: 10px; }
.section-sport-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #e7f0ed; color: #517968; }
.section-sport-icon svg { width: 22px; height: 22px; }
.sport-section-card h2 { margin: 0 0 11px; font-size: 21px; color: #304b5c; }
.sport-section-card > p { font-size: 12px; line-height: 1.7; color: #6e7e88; margin: 0 0 18px; }
.sport-section-details { display: grid; gap: 12px; margin: auto 0 20px; }
.sport-section-details > div { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.6; color: #54707d; }
.sport-section-details svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.section-contact { display: grid; gap: 5px; padding: 14px; background: #f4f6f5; border-radius: 11px; font-size: 11px; line-height: 1.6; color: #6c7e87; overflow-wrap: anywhere; }
.section-contact > span { font-size: 10px; color: #82918f; }
.section-contact > strong { font-weight: 500; color: #506875; }
.section-contact > a { color: #315b70; }
.section-enrollment { display: grid; gap: 12px; margin-top: 20px; }
.section-enrollment > span { font-size: 11px; }
.section-enrollment .btn { width: 100%; }
.section-enrollment .text-link { justify-content: flex-start; min-height: 36px; }
.notification-center { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 24px; align-items: start; }
.notification-feed { padding: 24px; margin: 0; min-width: 0; }
.notification-feed > .filter-row { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.notification-feed-items { display: grid; gap: 10px; }
.notification-item { display: flex; align-items: flex-start; gap: 16px; padding: 21px 18px; border: 1px solid #e6ebec; border-radius: 14px; background: #fff; }
.notification-item.is-unread { border-color: #dce7eb; background: #f3f7f9; }
.notification-symbol { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: #e9f0f2; color: #52778a; border-radius: 12px; }
.notification-symbol svg { width: 20px; height: 20px; }
.notification-symbol.tone-amber { color: #9a794d; background: #f5eddc; }
.notification-symbol.tone-green { color: #4d7b6b; background: #e5f0eb; }
.notification-copy { flex: 1; min-width: 0; }
.notification-item-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 9px; font-size: 10px; color: #728690; }
.notification-item-meta time { white-space: nowrap; font-size: 10px; }
.notification-item h2 { margin: 0 0 7px; font-size: 14px; line-height: 1.5; font-weight: 600; color: #344f60; }
.notification-item p { color: #6b7f8a; font-size: 12px; line-height: 1.7; margin: 0 0 13px; overflow-wrap: anywhere; }
.notification-item-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.notification-item-actions .text-link { font-size: 11px; min-height: 32px; }
.notification-mark { border: 0; padding: 4px 0; background: none; color: #7b8d94; font-size: 10px; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; cursor: pointer; }
.notification-mark:hover { color: #30566a; }
.notification-mark svg { width: 14px; height: 14px; }
.notification-preferences { padding: 24px; background: #f0f4f3; border-color: #e1e9e6; }
.notification-preferences h2 { font-size: 17px; margin: 17px 0 11px; }
.notification-preferences p { font-size: 12px; line-height: 1.8; color: #69808a; }
.notification-preferences small { display: block; font-size: 10px; line-height: 1.7; margin-top: 16px; color: #85938f; }
.notification-feed > .btn { margin-top: 20px; }
.search-page { width: 100%; padding: 30px; }
.search-page-label { display: block; font-size: 12px; color: #667f89; margin-bottom: 10px; }
.search-page .search-field { min-height: 60px; background: #f6f8f7; border-color: #d6e0e2; }
.search-page .search-field input { font-size: 16px; min-height: 30px; }
.search-start { padding: 65px 20px 50px; text-align: center; max-width: 600px; margin: 0 auto; }
.search-start-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; background: #edf3f3; color: #73909d; border-radius: 20px; }
.search-start-icon svg { width: 28px; height: 28px; }
.search-start h2 { font-size: 23px; margin: 24px 0 13px; }
.search-start p { color: #738791; font-size: 13px; line-height: 1.8; }
.search-examples { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.search-examples button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 13px; min-height: 40px; background: #fff; border: 1px solid #dae3e5; border-radius: 9px; color: #567585; font-size: 12px; cursor: pointer; }
.search-examples button svg { width: 14px; height: 14px; }
.search-examples button:hover { background: #edf3f4; }
.search-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: 30px 0 20px; }
.search-results-heading h2 { margin: 0; font-size: 19px; }
.search-results-heading > span { font-size: 12px; color: #7d8d95; overflow-wrap: anywhere; }
.search-result-list { display: grid; gap: 0; }
.search-page-result { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 12px; border: 0; border-bottom: 1px solid #e6ecee; background: transparent; text-align: left; border-radius: 0; cursor: pointer; }
.search-page-result:hover { background: #f2f6f6; border-radius: 10px; }
.search-page-result > .action-icon { width: 42px; height: 42px; flex: none; }
.search-page-result > span:nth-child(2) { flex: 1; min-width: 0; }
.search-page-result strong { display: block; font-size: 14px; line-height: 1.6; color: #2f5063; }
.search-page-result small { display: block; font-size: 12px; line-height: 1.7; color: #7c8e98; max-width: 850px; overflow-wrap: anywhere; }
.search-page-result .search-result-category { font-size: 9px; color: #5f8a86; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.search-page-result > svg { width: 17px; height: 17px; flex: none; color: #8097a2; }
@media (max-width: 1250px) {
  .sports-section-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .notification-center { grid-template-columns: minmax(0,1fr); }
  .notification-preferences { display: grid; grid-template-columns: 42px 1fr auto; column-gap: 18px; align-items: center; }
  .notification-preferences .notification-symbol { grid-row: 1/3; }
  .notification-preferences h2 { margin: 0 0 6px; }
  .notification-preferences p { grid-column: 2; margin: 0; }
  .notification-preferences .btn { grid-column: 3; grid-row: 1/3; }
  .notification-preferences small { grid-column: 2/-1; }
}
@media (max-width: 760px) {
  .campus-clock { min-width: 94px; }
  .campus-clock strong { font-size: 22px; }
  .schedule-controls .date-strip { gap: 6px; }
  .schedule-controls .date-button { min-height: 73px; padding: 10px 3px; border-radius: 11px; gap: 7px; }
  .schedule-controls .date-button strong { font-size: 18px; }
  .schedule-controls .date-button span { font-size: 10px; }
  .schedule-controls .card-header { gap: 15px; }
  .schedule-controls .schedule-period { gap: 7px; }
  .schedule-period .section-title { font-size: 13px; }
  .schedule-date-picker { flex-wrap: wrap; gap: 12px; }
  .schedule-date-picker .text-link { margin-left: 0; }
  .doctor-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 17px; }
  .doctor-filters > .field:first-child { grid-column: 1/-1; }
  .doctor-filters select { padding: 10px 24px 10px 9px; font-size: 12px; }
  .notification-feed, .search-page { padding: 18px; }
  .notification-item { padding: 16px 13px; gap: 11px; }
  .notification-symbol { width: 34px; height: 34px; border-radius: 10px; }
  .notification-item h2 { font-size: 13px; }
  .notification-item p { font-size: 12px; }
  .notification-item-meta { font-size: 9px; flex-wrap: wrap; gap: 5px; }
  .notification-preferences { padding: 20px; }
  .notification-item-actions { gap: 5px; }
  .search-results-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .search-start { padding: 40px 4px; }
  .search-page .search-field { min-height: 53px; }
  .search-page .search-field input { font-size: 14px; }
  .search-page-result { gap: 11px; padding: 18px 2px; }
  .search-page-result > .action-icon { width: 33px; height: 33px; }
  .search-page-result strong { font-size: 13px; }
  .search-page-result small { font-size: 11px; }
  .housing-service-button { padding: 13px 4px; gap: 12px; }
  .housing-service-copy strong { font-size: 13px; }
  .housing-service-copy small { font-size: 11px; }
}
@media (max-width: 540px) {
  .sports-section-grid { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .sport-section-card { padding: 22px; }
  .notification-preferences { grid-template-columns: 34px 1fr; gap: 0 13px; }
  .notification-preferences .btn { grid-row: auto; grid-column: 1/-1; margin-top: 17px; }
  .notification-preferences small { grid-column: 1/-1; }
  .notification-item { gap: 9px; }
  .notification-item > .notification-symbol { width: 28px; height: 28px; }
  .notification-item > .notification-symbol svg { width: 16px; height: 16px; }
  .search-start h2 { font-size: 21px; }
  .search-page-result > svg { display: none; }
  .schedule-controls .date-strip { gap: 4px; }
  .schedule-controls .date-button { padding: 10px 1px; min-height: 67px; border-radius: 9px; }
  .schedule-controls .date-button strong { font-size: 16px; }
  .schedule-controls .date-button span { font-size: 9px; }
  .schedule-controls .card-header { flex-wrap: wrap; }
  .schedule-controls .schedule-period { width: 100%; justify-content: space-between; }
  .schedule-list .empty-state { padding: 35px 8px; }
  .content-scope-tabs { width: 100%; }
  .content-scope-tabs button { flex: 1; padding: 8px 14px; }
}

.pagination-more { margin-top: 20px; }
.housing-layout .housing-service-button .housing-service-copy { display: block; }
.housing-layout .housing-service-button .housing-service-icon { display: grid; }
/* Override the older scoped housing grid rules as well as base button styles. */
.housing-layout .housing-service-grid { display: flex; flex-direction: column; gap: 0; margin: 0; }
.housing-layout .housing-service-button { min-height: 67px; padding: 10px 8px; gap: 12px; justify-content: flex-start; }
.housing-layout .housing-service-copy small { margin-top: 3px; font-size: 11px; line-height: 1.5; }
.housing-layout .housing-service-button .housing-service-icon svg { width: 20px; height: 20px; }

/* v0.4 polish: a single, readable academic filter panel. */
.academic-filter-panel { padding: 24px; margin: 0 0 24px; }
.academic-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.academic-filter-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: #345466; font-size: 16px; }
.academic-filter-heading h2 svg { width: 18px; height: 18px; color: #6d8c97; }
.academic-reset { font-size: 12px; min-height: 32px; }
.academic-reset[hidden] { display: none; }
.academic-filter-panel .academic-filters { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin: 0; align-items: start; }
.academic-filter-panel .academic-filters.for-teacher { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(130px, .6fr); }
.academic-filter-panel .field { min-width: 0; margin: 0; }
.academic-filter-panel label { display: block; margin: 0 0 8px; color: #687f8b; font-size: 12px; }
.academic-filter-panel input, .academic-filter-panel select { width: 100%; min-height: 47px; padding: 11px 13px; border: 1px solid #dce5e7; background: #f8faf9; color: #3d5e70; border-radius: 10px; font: inherit; font-size: 13px; }
.academic-filter-panel select { padding-right: 25px; text-overflow: ellipsis; }
.academic-filter-panel input:focus, .academic-filter-panel select:focus { outline: 2px solid #7099a5; outline-offset: 2px; background: #fff; }
.academic-status-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; padding-top: 20px; border-top: 1px solid #e5ebeb; }
.academic-status { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 41px; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px; background: #f2f5f5; color: #607a88; cursor: pointer; font: inherit; font-size: 12px; }
.academic-status:hover { background: #e8f0ef; }
.academic-status.active { background: #31586b; color: #fff; border-color: #31586b; }
.academic-status-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 6px; color: #6c828c; background: #e5ebeb; font-size: 10px; font-variant-numeric: tabular-nums; }
.academic-status.active .academic-status-count { color: #fff; background: #ffffff25; }
#academic-results > .card { margin: 0 0 22px; }
.academic-courses { margin: 0 0 24px; padding: 0; }
.academic-courses > summary { display: flex; gap: 12px; align-items: center; min-height: 50px; color: #5c7785; font-size: 13px; cursor: pointer; list-style: none; }
.academic-courses > summary::-webkit-details-marker { display: none; }
.academic-courses > summary span { color: #8d9c9f; }
.academic-courses > summary svg { width: 15px; height: 15px; margin-left: auto; }
.academic-courses[open] > summary svg { transform: rotate(90deg); }
.academic-courses .course-grid { margin-top: 14px; }
.housing-layout { align-items: stretch; }
.housing-layout > .card { height: 100%; margin-bottom: 0; }
.housing-layout .residence-summary { display: flex; flex-direction: column; }
.housing-layout .residence-summary > .detail-list { flex: 1; display: grid; align-content: space-between; gap: 10px; }
.help-route-link { display: block; margin-top: 18px; }
@media (max-width: 1000px) {
  .academic-filter-panel .academic-filters.for-teacher { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .academic-filters.for-teacher .academic-query-field { grid-column: 1/-1; }
}
@media (max-width: 760px) {
  .academic-filter-panel { padding: 19px; }
  .academic-filter-heading { align-items: flex-start; gap: 10px; margin-bottom: 19px; }
  .academic-filter-heading h2 { font-size: 15px; padding-top: 6px; }
  .academic-reset { font-size: 10px; max-width: 88px; text-align: right; }
  .academic-filter-panel .academic-filters, .academic-filter-panel .academic-filters.for-teacher { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .academic-filter-panel label { font-size: 11px; }
  .academic-filter-panel input, .academic-filter-panel select { font-size: 13px; }
  .academic-status-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 19px; padding-top: 17px; }
  .academic-status { padding: 9px 8px; justify-content: space-between; gap: 5px; font-size: 11.5px; min-height: 42px; }
  .academic-status-count { min-width: 18px; height: 18px; font-size: 10px; }
  .academic-status:first-child { grid-column: 1/-1; }
  .housing-layout > .card { height: auto; }
  .housing-layout .residence-summary > .detail-list { display: block; }
}