/* Phone and tablet layouts for the school and professor pages. */
/* Phones: up to 720px. Tablets (iPad, Split View, small windows): 721–1099px. The desktop layout
   (1100px and wider) is style.css alone: every rule below is either inside a phone/tablet query
   or styles an element that only exists or shows on phones and tablets. The 1099px edge must
   match sheetMode in js/professor.js. */

:root { --pages-thumb: #ffffff; --pages-bar: rgba(255, 255, 255, 0.86); }
:root[data-theme="dark"] { --pages-thumb: #636366; --pages-bar: rgba(0, 0, 0, 0.78); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pages-thumb: #636366; --pages-bar: rgba(0, 0, 0, 0.78); }
}

/* Phone and tablet extras, hidden on the desktop layout. */
.reviews-bar, .summary-dots, .side-cta, .review-sheet-done, .prof-action-icon { display: none; }
.summary-dots[hidden] { display: none !important; }

/* ---------- Review sheet (a modal dialog on phones and tablets) ---------- */

html.review-sheet-open { overflow: hidden; }
.review-sheet {
  --review-sheet-keyboard: 0px;
  padding: 0;
  color: var(--text);
  background: var(--surface);
  border: 0;
  box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.3);
  overscroll-behavior: contain;
}
.review-sheet[open] { display: flex; flex-direction: column; overflow: hidden; }
.review-sheet::backdrop {
  background: rgba(0, 0, 0, 0.42);
  animation: pages-fade-in 0.32s ease;
}
.review-sheet.is-closing::backdrop { animation: pages-fade-out 0.3s ease forwards; }
.review-sheet-top {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 50px;
  padding: 6px 8px 0;
  touch-action: none;
  cursor: grab;
}
.review-sheet-grabber {
  position: absolute;
  left: 50%; top: 7px;
  width: 38px; height: 5px;
  margin-left: -19px;
  background: var(--line-strong);
  border-radius: 3px;
}
.review-sheet-close {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.review-sheet-close svg {
  width: 30px; height: 30px;
  padding: 8px;
  background: var(--surface-2);
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease);
}
.review-sheet-close:active svg { background: var(--surface-3); }
.review-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom));
  outline: none;
}
.review-sheet .review-form {
  position: static;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.review-sheet .review-form h2 { margin-top: -2px; font-size: 26px; letter-spacing: -0.03em; }
.review-sheet .form-hint { margin-bottom: 24px; font-size: 15px; }
.review-sheet .fieldset { margin-bottom: 26px; }
.review-sheet .fieldset legend, .review-sheet .label { font-size: 16px; }
/* Ratings: big squares, two rows of five. */
.review-sheet .rating-picker { gap: 8px; }
.review-sheet .rating-picker label { min-height: 54px; font-size: 20px; border-radius: 14px; }
.review-sheet .rating-picker--5 label { min-height: 50px; font-size: 18px; }
.review-sheet .rating-picker--choice label { min-height: 48px; font-size: 17px; }
.review-sheet .tag-option label { min-height: 44px; padding: 0 16px; font-size: 15px; }
.review-sheet .input, .review-sheet .textarea { font-size: 17px; }
.review-sheet .input { height: 48px; }
.review-sheet .textarea { min-height: 150px; }
.review-sheet .link-btn { min-height: 44px; }
/* Submit stays in reach at the bottom of the sheet while the form scrolls. */
.review-sheet .review-form [type="submit"] {
  position: sticky;
  bottom: 0;
  z-index: 2;
  min-height: 54px;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 -14px 18px 6px var(--surface), 0 14px 0 14px var(--surface);
}
.review-sheet .status { position: relative; z-index: 3; }
.review-sheet .review-sheet-done { display: flex; margin-top: 16px; min-height: 50px; font-weight: 600; }

@keyframes pages-fade-in { from { opacity: 0; } }
@keyframes pages-fade-out { to { opacity: 0; } }
@keyframes pages-sheet-up { from { transform: translateY(100%); } }
@keyframes pages-sheet-pop { from { opacity: 0; transform: translateY(40px) scale(0.98); } }
@keyframes pages-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Phones and tablets ---------- */

@media (max-width: 1099px) {
  /* Native touch: no double-tap zoom delay, no grey tap flash; pressed states instead. */
  .prof-layout :is(a, button, label, select, input), .review-sheet :is(a, button, label, select, input),
  .mobile-cta a, .toolbar :is(input, select), #prof-grid a, .page-hero a, .breadcrumbs a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .prof-layout .btn:active, .review-sheet .btn:active, .mobile-cta .btn:active { transform: scale(0.97); }
  .prof-layout .btn-primary:active, .review-sheet .btn-primary:active, .mobile-cta .btn-primary:active { background: var(--accent-hover); }
  .prof-layout .btn-ghost:active, .review-sheet .btn-ghost:active { background: var(--surface-3); }
  .rate-option:active label, .tag-option:active label { background: var(--surface-2); }
  .review-report:active { color: var(--danger-text); background: var(--surface-2); }
  .prof-action-icon { display: block; }

  /* Sort bar: a segmented control that pins under the site header. */
  .reviews-controls { display: none; }
  .reviews-bar {
    position: sticky;
    top: var(--pages-sticky-top, var(--header-h));
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 calc(-1 * var(--gutter)) 12px;
    padding: 8px var(--gutter);
    background: var(--pages-bar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base) var(--ease);
  }
  .reviews-bar.is-stuck { border-bottom-color: var(--line); }
  .segmented {
    flex: 1 1 auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    min-width: 0;
    padding: 2px;
    background: var(--surface-2);
    border-radius: 11px;
  }
  .segment { position: relative; display: grid; min-width: 0; }
  .segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .segment span {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 0 6px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
    border-radius: 9px;
    transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .segment input:checked + span {
    font-weight: 600;
    background: var(--pages-thumb);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  }
  .segment input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
  .segment:active input:not(:checked) + span { opacity: 0.6; }
  .reviews-bar-course { flex: 0 1 auto; min-width: 0; }
  .reviews-bar-course .select {
    width: 100%;
    max-width: 140px;
    height: 44px;
    padding: 0 30px 0 12px;
    font-size: 16px;
    font-weight: 500;
    text-overflow: ellipsis;
    background-color: var(--surface-2);
    border-color: transparent;
    border-radius: 11px;
  }

  /* Rating spread as ten small columns: compact enough for a card or the side panel. */
  .stat-dist .dist { display: flex; flex-direction: row-reverse; gap: 5px; height: 116px; margin-top: 8px; }
  .stat-dist .dist li { display: flex; flex: 1 1 0; flex-direction: column-reverse; align-items: center; gap: 4px; min-width: 0; font-size: 12px; }
  .stat-dist .dist li > span:first-child { text-align: center; }
  .stat-dist .dist-bar { display: flex; flex: 1 1 auto; align-items: flex-end; width: 100%; max-width: 24px; height: auto; background: var(--surface-2); border-radius: 6px; }
  .stat-dist .dist-bar span { width: 100% !important; height: var(--pct, 0%); border-radius: 6px; transform-origin: center bottom; animation-name: pages-grow-y; }
  .stat-dist .dist-count { font-size: 11px; text-align: center; color: var(--text-2); }

  /* School page: the filter bar pins under the header too. */
  .toolbar {
    position: sticky;
    top: var(--pages-sticky-top, var(--header-h));
    z-index: 20;
    margin: 0 calc(-1 * var(--gutter)) 16px;
    padding: 8px var(--gutter);
    background: var(--pages-bar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base) var(--ease);
  }
  .toolbar.is-stuck { border-bottom-color: var(--line); }
  .toolbar .input {
    padding-left: 38px;
    background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%238a8a8f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
    border-color: transparent;
  }
  .toolbar .input:focus { background-color: var(--surface); }
  .toolbar .select { background-color: var(--surface-2); border-color: transparent; }
}

/* ---------- Phones ---------- */

@media (max-width: 720px) {
  /* Breadcrumbs become a back link, as in an app's navigation bar. */
  .breadcrumbs--light { padding-top: 4px; }
  .breadcrumbs--light li:first-child, .breadcrumbs--light li:last-child { display: none; }
  .breadcrumbs li + li::before { content: none; }
  .breadcrumbs--light a, .page-hero .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding-right: 10px;
    font-size: 17px;
  }
  .breadcrumbs--light a { color: var(--accent); }
  .breadcrumbs--light a::before, .page-hero .breadcrumbs a::before {
    content: '';
    width: 11px; height: 11px;
    margin-left: 3px;
    border-bottom: 2.5px solid currentColor;
    border-left: 2.5px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
  }
  .breadcrumbs--light a:active, .page-hero .breadcrumbs a:active { opacity: 0.55; }
  .page-hero .breadcrumbs li:last-child { display: none; }

  /* Professor header: 64px initials, name and title beside it, pills and actions below. */
  .prof-header { grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 4px 0 18px; }
  .prof-header > div:not(.prof-actions) { display: contents; }
  .prof-header .avatar { grid-row: 1 / span 2; width: 64px; height: 64px; }
  .prof-header h1 { grid-column: 2; align-self: end; font-size: 24px; line-height: 1.15; letter-spacing: -0.03em; }
  .prof-header .prof-title { grid-column: 2; align-self: start; margin-top: 3px; font-size: 15px; }
  .prof-header .prof-meta, .prof-header .prof-inactive { grid-column: 1 / -1; }
  .prof-meta { gap: 6px; margin-top: 14px; }
  .prof-meta .pill { font-size: 13px; }
  .prof-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin-top: 12px; }
  .prof-actions .btn { flex: 0 0 auto; gap: 7px; min-height: 44px; padding: 0 16px; font-size: 15px; font-weight: 600; }
  .prof-actions .btn svg { width: 17px; height: 17px; }

  /* Summary: a sideways shelf of cards that snaps, overall rating first and widest. */
  .summary-band { padding: 14px 0 12px; }
  .summary {
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .summary::-webkit-scrollbar { display: none; }
  /* Keeps the gutter after the last card (end padding is dropped in some scrollers). */
  .summary::after { content: ''; flex: 0 0 1px; margin-left: -1px; }
  .summary > .stat {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: min(62%, 300px);
    min-width: 0;
    padding: 16px 16px 14px;
    border-radius: 20px;
    scroll-snap-align: start;
  }
  .summary > .stat-overall { width: min(74%, 330px); }
  .summary > .stat-insight { width: min(46%, 210px); }
  .summary > .stat-dist, .summary > .stat-tags { width: min(80%, 360px); }
  .stat-overall .rating-badge.large { align-self: flex-start; }
  .stat-overall .stars { margin-top: 8px; }
  .stat-note { margin-top: auto; padding-top: 8px; }
  .stat-insight .meter { margin-top: auto; }
  .stat-insight .stat-value { margin-bottom: 14px; }
  .stat-tags .tag-list { gap: 6px; }
  .summary-dots { display: flex; justify-content: center; gap: 6px; padding-top: 10px; }
  .summary-dots span {
    width: 6px; height: 6px;
    background: var(--text-3);
    border-radius: 3px;
    opacity: 0.35;
    transition: width var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .summary-dots span.is-active { width: 16px; opacity: 0.85; }

  /* Reviews: clean cards under the pinned sort bar. */
  .prof-columns { padding-top: 22px; }
  .reviews-head { margin-bottom: 4px; }
  .reviews-head h2 { font-size: 22px; }
  .reviews-head h2 .prof-title { font-size: 17px; }
  .review-list { gap: 10px; }
  .review { padding: 16px; border-radius: 18px; }
  .review-meta { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .review-facts { gap: 2px 12px; font-size: 13px; }
  .review p { font-size: 16px; }
  .review p.review-empty { font-size: 14px; }
  .review-report { min-height: 44px; margin: -6px -8px -6px auto; padding: 0 10px; font-size: 14px; }
  .report-form { padding: 14px; border-radius: 14px; }
  .report-form .report-row { display: grid; grid-template-columns: 1fr 1fr; }
  .report-form .report-row .select { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .report-form .btn { min-height: 44px; }
  .state .btn { min-height: 48px; }

  /* Faculty removal: readable, with full-size fields and buttons. */
  .removal { font-size: 15px !important; }
  #removal-toggle { min-height: 44px; font-size: 15px; line-height: 1.35; text-align: left; }
  #removal-form .report-row { display: grid; grid-template-columns: 1fr 1fr; }
  #removal-form .btn { min-height: 48px; font-size: 16px; }

  /* "Write a review": a floating button above the tab bar instead of a full-width bar. */
  .mobile-cta {
    left: 0; right: 0;
    bottom: var(--tabbar-h, 0px);
    display: flex;
    justify-content: center;
    padding: 0 var(--gutter) max(12px, calc(12px + env(safe-area-inset-bottom) - var(--tabbar-h, 0px)));
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    pointer-events: none;
  }
  .mobile-cta .btn {
    width: auto;
    min-height: 50px;
    padding: 0 24px 0 20px;
    font-size: 17px;
    font-weight: 600;
    pointer-events: auto;
    box-shadow: 0 12px 28px -10px rgba(11, 99, 206, 0.6), 0 2px 8px rgba(0, 0, 0, 0.14);
  }
  .mobile-cta .btn svg { width: 19px; height: 19px; }
  .mobile-cta.is-hidden { transform: translateY(calc(100% + 24px)); }
  html:has(.mobile-cta:not(.is-hidden)) { scroll-padding-bottom: calc(84px + var(--tabbar-h, 0px)); }
  body:has(.mobile-cta:not(.is-hidden)) .site-footer {
    padding-bottom: calc(96px + var(--tabbar-h, 0px) + env(safe-area-inset-bottom));
  }

  /* The sheet rises from the bottom, with a grabber, and follows the keyboard. */
  .review-sheet {
    position: fixed;
    inset: auto 0 var(--review-sheet-keyboard) 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: min(92dvh, calc(var(--review-sheet-viewport, 100dvh) - 10px));
    margin: 0;
    border-radius: 24px 24px 0 0;
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .review-sheet[open] { animation: pages-sheet-up 0.44s cubic-bezier(0.32, 0.72, 0, 1); }
  .review-sheet.is-dragging { transition: none; }
  .review-sheet.is-closing { transform: translateY(100%) !important; transition-duration: 0.28s; }

  /* School page: a compact hero, the pinned filter bar, then professors as list rows. */
  .page-hero .container { min-height: 0; padding-top: 2px; padding-bottom: 22px; }
  .page-hero-kicker { margin-top: 16px; gap: 8px; font-size: 13px; }
  .page-hero-icon .school-art-icon { width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
  .page-hero h1 { margin-top: 4px; font-size: 28px; line-height: 1.12; }
  .page-hero-stats { gap: 2px 18px; margin-top: 12px; }
  .page-hero-stats li { gap: 5px; font-size: 13px; }
  .page-hero-stats strong { font-size: 17px; }
  .page-hero-mark { top: auto; right: 6px; bottom: -0.2em; left: auto; font-size: 96px; }

  #faculty-title { font-size: 22px; }
  .section:has(#prof-grid) { padding: 16px 0 44px; }
  .section:has(#prof-grid) .section-head { margin-bottom: 6px; }
  .section:has(#prof-grid) .section-kicker { display: none; }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: center;
    margin-bottom: 12px;
  }
  .toolbar .input { flex: none; height: 44px; min-width: 0; font-size: 16px; border-radius: 11px; }
  .toolbar .field-inline { flex: none; }
  .field-inline-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .toolbar .select { flex: none; max-width: 150px; height: 44px; font-size: 16px; font-weight: 500; border-radius: 11px; }
  .toolbar .result-count { grid-column: 1 / -1; width: auto; margin: 0; padding-left: 2px; font-size: 13px; }

  /* Inset grouped list: avatar, name and title, rating, chevron. */
  #prof-grid {
    gap: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
  }
  #prof-grid:has(> .state) { overflow: visible; background: none; border: 0; }
  #prof-grid > li { animation: none; }
  #prof-grid > .skeleton-card { min-height: 68px; border-radius: 0; }
  #prof-grid > .skeleton-card + .skeleton-card { border-top: 1px solid var(--surface); }
  #prof-grid .prof-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto 10px;
    grid-template-rows: auto auto;
    gap: 1px 12px;
    align-items: center;
    min-height: 68px;
    padding: 10px 16px 10px 14px;
    background-color: var(--surface);
    border: 0;
    border-radius: 0;
    transition: background-color var(--dur-fast) var(--ease);
  }
  #prof-grid > li + li > .prof-card {
    background-image: linear-gradient(var(--line), var(--line));
    background-repeat: no-repeat;
    background-position: 74px 0;
    background-size: calc(100% - 74px) 1px;
  }
  #prof-grid .prof-card:hover { transform: none; box-shadow: none; }
  #prof-grid .prof-card:active { transform: none; background-color: var(--surface-2); }
  #prof-grid .prof-card:focus-visible { outline-offset: -3px; border-radius: 0; }
  #prof-grid .prof-card-top { display: contents; }
  #prof-grid .prof-card .avatar { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; }
  #prof-grid .prof-card-top .rating-badge { grid-column: 3; grid-row: 1 / span 2; }
  #prof-grid .rating-badge.r-none { padding: 5px 9px; font-size: 12px; }
  #prof-grid .prof-card > div:nth-child(2) { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; }
  #prof-grid .prof-card h3 { font-size: 16px; line-height: 1.25; }
  #prof-grid .prof-card .prof-title { margin-top: 1px; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
  #prof-grid .prof-spec { display: none; }
  #prof-grid .prof-card-foot { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  #prof-grid .prof-card-foot .pill { height: auto; padding: 0; font-size: 13px; color: var(--text-3); background: none; }
  #prof-grid .prof-card-foot .pill:not(:last-child) { display: none; }
  #prof-grid .prof-card::after {
    content: '';
    grid-column: 4;
    grid-row: 1 / span 2;
    width: 8px; height: 8px;
    border-top: 2px solid var(--text-3);
    border-right: 2px solid var(--text-3);
    transform: rotate(45deg);
  }
}

/* ---------- Tablets ---------- */

@media (min-width: 721px) and (max-width: 1099px) {
  /* Professor: header across the top, reviews on the left, a pinned summary panel on the right. */
  .prof-layout.has-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(270px, 36%, 340px);
    grid-template-areas: "head head" "reviews side" "removal removal";
    column-gap: 28px;
    align-items: start;
  }
  .prof-layout.has-profile > .prof-header { grid-area: head; }
  .prof-layout.has-profile > .removal { grid-area: removal; }
  .prof-layout.has-profile .prof-columns { display: contents; }
  .prof-layout.has-profile .reviews { grid-area: reviews; min-width: 0; }
  .prof-layout.has-profile .prof-columns > .review-form { grid-column: 1 / -1; }

  .prof-header { grid-template-columns: 96px minmax(0, 1fr); gap: 0 22px; padding: 22px 0 28px; }
  .prof-header .avatar { width: 96px; height: 96px; }
  .prof-header h1 { font-size: 34px; }
  .prof-header .prof-title { font-size: 17px; }
  .prof-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin-top: 16px; }
  .prof-actions .btn-primary { display: none; }
  .prof-actions .btn { gap: 7px; min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; }
  .prof-actions .btn svg { width: 17px; height: 17px; }

  .prof-layout.has-profile > .summary-band {
    grid-area: side;
    position: sticky;
    top: calc(var(--pages-sticky-top, var(--header-h)) + 16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100dvh - var(--pages-sticky-top, var(--header-h)) - 32px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: var(--bg-alt);
    border-radius: 24px;
    box-shadow: none;
    clip-path: none;
  }
  .side-cta { display: inline-flex; flex: none; order: -1; min-height: 50px; font-weight: 600; }
  .side-cta svg { width: 18px; height: 18px; }
  .summary-band .summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .summary-band .stat { min-width: 0; padding: 16px; border-radius: 18px; }
  .stat-overall, .stat-dist, .stat-tags { grid-column: 1 / -1; }
  .summary:not(:has(.stat-insight + .stat-insight)) .stat-insight { grid-column: 1 / -1; }
  .rating-badge.large { font-size: 50px; }
  .stat-value { font-size: 28px; }
  .stat-value small { font-size: 15px; }

  .reviews-head h2 { font-size: 26px; }
  .reviews-bar { margin-inline: -8px; padding-inline: 8px; }
  .review { padding: 20px; }

  .mobile-cta { display: none; }

  /* The sheet is a centred card, like an iPad form sheet. */
  .review-sheet {
    width: min(620px, calc(100% - 48px));
    max-width: none;
    max-height: min(88dvh, calc(var(--review-sheet-viewport, 100dvh) - 32px), 960px);
    margin: auto;
    border-radius: 24px;
    box-shadow: var(--shadow-pop);
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
  }
  .review-sheet[open] { animation: pages-sheet-pop 0.38s var(--ease); }
  .review-sheet.is-closing { opacity: 0; transform: translateY(32px) scale(0.98); }
  .review-sheet-grabber { display: none; }
  .review-sheet-top { cursor: auto; }
  .review-sheet-body { padding: 0 28px 28px; }

  /* School: a shorter hero, the pinned filter bar, and roomy cards in two or three columns. */
  .page-hero .container { min-height: 300px; padding-bottom: 44px; }
  .section:has(#prof-grid) { padding-top: 48px; }
  .toolbar { gap: 10px; }
  #prof-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
}

/* Phones turned sideways fall in the tablet range but are short: the side panel scrolls with
   the page instead of being pinned. */
@media (min-width: 721px) and (max-width: 1099px) and (max-height: 600px) {
  .prof-layout.has-profile > .summary-band { position: static; max-height: none; overflow: visible; }
}

/* Touch screens: no hover effects that stick after a tap. */
@media (hover: none) {
  .rate-option:hover label, .tag-option:hover label { border-color: var(--border-input); }
  .review-report:hover { color: var(--text-3); background: none; }
  .prof-meta a.pill:hover { background: var(--surface-2); }
  .btn-primary:hover { background: var(--accent); }
  .btn-ghost:hover { background: var(--surface-2); }
}

@media (prefers-reduced-motion: reduce) {
  .review-sheet, .review-sheet::backdrop { animation: none !important; transition: none !important; }
}