/* Local preview only (not committed): "Clarity Navy+" — personality pass on Clarity Navy. Active when . html[data-design="clarity"][data-tone="navy"][data-plus] is expanded to that selector when the file is generated. */ html[data-design="clarity"][data-tone="navy"][data-plus] { --display:"Figtree","Zen Maru Gothic","Hiragino Maru Gothic ProN","Segoe UI",system-ui,sans-serif; --hand:"Patrick Hand","Klee One","Zen Maru Gothic",cursive; --pearl-off:#D9D0BD; } html[data-design="clarity"][data-tone="navy"][data-plus] body { font-family:var(--display); } html[data-design="clarity"][data-tone="navy"][data-plus] ::selection { background:#F4EAD3; color:#172E50; } html[data-design="clarity"][data-tone="navy"][data-plus] :focus-visible { outline:2px solid var(--n-gold); outline-offset:2px; } /* The page area (after moving between pages) and the reviews section (after "jump to reviews") are focused for screen readers; they need no outline. */ /* Until the first page is fully drawn (design layer applied, fonts ready) nothing shows, so the plain version never flashes on reload. If scripts fail, the page appears anyway after 2 seconds. */ html.pn-loading body { visibility:hidden; animation:pn-reveal 0s 2s forwards; } @keyframes pn-reveal { to { visibility:visible; } } html[data-design="clarity"][data-tone="navy"][data-plus] #app:focus, html[data-design="clarity"][data-tone="navy"][data-plus] #app:focus-visible, html[data-design="clarity"][data-tone="navy"][data-plus] #profile-reviews:focus, html[data-design="clarity"][data-tone="navy"][data-plus] #profile-reviews:focus-visible { outline:none; } /* Scrolling past the top or bottom shows the page colour, not a white strip, and doesn't bounce where browsers allow it. */ html[data-design="clarity"][data-tone="navy"][data-plus] { background:#FAF8F3; overscroll-behavior-y:none; } /* ---------- Header: compass beside the wordmark, same edges as the content ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .site-header { padding:0 max(24px, calc((100% - 1160px) / 2)); } html[data-design="clarity"][data-tone="navy"][data-plus] .brand { display:inline-flex; align-items:center; gap:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .brand::before { content:""; flex:none; width:26px; height:26px; background:url("/assets/navy-compass.5fe58c0f9e.svg") center / contain no-repeat; } html[data-design="clarity"][data-tone="navy"][data-plus] .brand-wordmark { font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-.01em; } /* ---------- Hero: centred, review carousel underneath ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .home { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; padding:48px 0 0; text-align:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .search-intro { width:100%; max-width:760px; margin:0 auto; text-align:center; align-items:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .search-intro::before, html[data-design="clarity"][data-tone="navy"][data-plus] .search-intro::after { content:none; display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .home-eyebrow { display:none; margin:0 0 14px; font-size:12px; line-height:20px; letter-spacing:.14em; color:var(--n-gold-ink); } html[data-design="clarity"][data-tone="navy"][data-plus][lang="ja"] .home-eyebrow { letter-spacing:.06em; } html[data-design="clarity"][data-tone="navy"][data-plus] .home .scope-divider { display:inline-block; width:5px; height:5px; margin:0 10px; border-radius:50%; background:var(--n-gold); font-size:0; line-height:0; vertical-align:middle; position:relative; top:-1px; } html[data-design="clarity"][data-tone="navy"][data-plus] .search-intro { container-type:inline-size; } /* Headline: rounded "Find your", handwritten "next class." */ html[data-design="clarity"][data-tone="navy"][data-plus] .hero-wordmark { --emw:9.11; --hmax:72px; font-family:"Nunito",var(--display); font-weight:800; font-size:min(var(--hmax), calc(100cqi / var(--emw) * .95)); line-height:1.08; letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:lining-nums; } html[data-design="clarity"][data-tone="navy"][data-plus] .hero-emphasis { display:inline-block; margin-left:.06em; font-family:var(--hand); font-weight:400; font-size:1.15em; letter-spacing:0; transform:rotate(-2deg); } html[data-design="clarity"][data-tone="navy"][data-plus][lang="ja"] .hero-wordmark { --emw:14.91; --hmax:52px; font-family:var(--display); font-weight:700; line-height:1.25; letter-spacing:.01em; } html[data-design="clarity"][data-tone="navy"][data-plus][lang="ja"] .hero-emphasis { margin-left:0; font-family:"Klee One",cursive; font-weight:600; font-size:1.1em; transform:rotate(-1.5deg); } /* Logo: your design G, recoloured to Keio navy with a gold gem */ html[data-design="clarity"][data-tone="navy"][data-plus] .site-header { height:68px; min-height:68px; } html[data-design="clarity"][data-tone="navy"][data-plus] .brand { height:56px; padding:0; aspect-ratio:608 / 242; background:url("/assets/preview-logo-g-keio.6f20495f0e.png") left center / contain no-repeat; } html[data-design="clarity"][data-tone="navy"][data-plus] .brand::before { content:none; display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .brand-wordmark { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } @media (max-width:740px) { html[data-design="clarity"][data-tone="navy"][data-plus] .site-header { height:58px; min-height:58px; } html[data-design="clarity"][data-tone="navy"][data-plus] .brand { height:46px; } } html[data-design="clarity"][data-tone="navy"][data-plus] .hero-emphasis { font-style:normal; text-decoration:none; } html[data-design="clarity"][data-tone="navy"][data-plus][lang="ja"] .hero-emphasis { font-style:normal; } html[data-design="clarity"][data-tone="navy"][data-plus] .home-description { font-size:19px; margin:12px 0 22px; } html[data-design="clarity"][data-tone="navy"][data-plus] .catalog-search-shell { width:100%; max-width:640px; } html[data-design="clarity"][data-tone="navy"][data-plus] .home .search-examples { justify-content:center; align-items:center; margin-top:14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .home .search-examples .browse-link { margin:0; padding-left:16px; min-height:0; gap:8px; font-size:inherit; box-shadow:inset 1px 0 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .search-submit { background:var(--n-navy); color:#FFFFFF; border-radius:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .search-submit:hover { background:var(--n-navy-2); } /* Review carousel: light cards on the page, no heavy panel */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel { min-width:0; text-align:left; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel-titles { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel-label { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--n-gold-ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel-total { font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-add { min-height:32px; padding:0; border:0; background:none; font:inherit; font-size:13px; font-weight:600; color:var(--n-navy); text-decoration:underline; text-decoration-color:var(--n-gold); text-underline-offset:4px; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-add:hover { color:var(--n-navy-2); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel-nav { display:flex; gap:8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-nav { width:40px; height:40px; display:grid; place-items:center; padding:0; border:1px solid #D8D0BF; border-radius:50%; background:#FFFFFF; color:var(--n-navy); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-nav:hover { border-color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-nav[aria-disabled="true"] { opacity:.4; cursor:default; border-color:#D8D0BF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-track { display:flex; gap:22px; margin:0; padding:16px 8px 22px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:8px; overscroll-behavior-x:contain; scrollbar-width:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-track::-webkit-scrollbar { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide { --note:#FBF0C6; --tilt:-1.2deg; position:relative; flex:0 0 calc((100% - 66px) / 3.2); min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; gap:14px; box-sizing:border-box; padding:26px 22px 18px; border:0; border-radius:3px; background:var(--note); box-shadow:4px 4px 0 rgba(23,46,80,.16); transform:rotate(var(--tilt)); transition:transform 180ms ease-out, box-shadow 180ms ease-out; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide:nth-child(3n+2) { --note:#E5ECF7; --tilt:.9deg; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide:nth-child(3n) { --note:#F7E8DA; --tilt:-.5deg; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide::before { content:""; position:absolute; top:-9px; left:50%; width:68px; height:20px; transform:translateX(-50%) rotate(-3deg); background:rgba(214,198,156,.5); box-shadow:inset 0 0 0 1px rgba(23,46,80,.05); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide:hover, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide:focus-within { transform:rotate(0deg) translateY(-3px); box-shadow:6px 7px 0 rgba(23,46,80,.18); } @media (prefers-reduced-motion: reduce) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide { transition:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide:hover, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide:focus-within { transform:rotate(var(--tilt)); } } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-quote { flex:0 0 auto; max-height:calc(1.35em * 4); margin:0; font-family:var(--hand); font-size:21px; line-height:1.35; color:var(--n-navy); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-foot { margin:0; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-who { min-width:0; margin:0; display:flex; flex-direction:column; gap:1px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-who a { color:var(--n-navy); font-weight:600; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-who a:hover { text-decoration:underline; text-decoration-color:var(--n-gold); text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-who span { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-score { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:13px; color:var(--muted); white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-score strong { font-family:var(--display); font-size:20px; font-weight:700; color:var(--n-navy); font-variant-numeric:lining-nums; } /* ---------- Pearl score mark: five pearls, halves allowed ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls { display:inline-flex; gap:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls i { width:7px; height:7px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1px var(--pearl-off); animation:pn-pop 320ms cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 40ms); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls i.on { background:var(--n-gold); box-shadow:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls i.half { background:linear-gradient(90deg, var(--n-gold) 50%, transparent 50%); box-shadow:inset 0 0 0 1px var(--n-gold); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls--lg { gap:5px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls--lg i { width:13px; height:13px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel .pn-pearls { gap:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel .pn-pearls i { width:9px; height:9px; box-shadow:inset 0 0 0 1px rgba(23,46,80,.28); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel .pn-pearls i.on { background:#B08A3E; box-shadow:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel .pn-pearls i.half { background:linear-gradient(90deg, #B08A3E 50%, transparent 50%); box-shadow:inset 0 0 0 1px #B08A3E; } @keyframes pn-pop { from { opacity:0; transform:scale(.4); } } @media (prefers-reduced-motion: reduce) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls i { animation:none; } } /* ---------- One language at a time ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .name-romanized, html[data-design="clarity"][data-tone="navy"][data-plus] .course-native, html[data-design="clarity"][data-tone="navy"][data-plus] .class-result-native, html[data-design="clarity"][data-tone="navy"][data-plus] .professor-suggestion small { display:none; } /* ---------- Typography: serif for display, sans for UI ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-heading h2, html[data-design="clarity"][data-tone="navy"][data-plus] .section-heading, html[data-design="clarity"][data-tone="navy"][data-plus] .sidebar-card h2, html[data-design="clarity"][data-tone="navy"][data-plus] .panel-heading h2, html[data-design="clarity"][data-tone="navy"][data-plus] h2.panel-heading, html[data-design="clarity"][data-tone="navy"][data-plus] .modal h2 { font-family:var(--display); font-weight:700; letter-spacing:-.015em; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-heading h2, html[data-design="clarity"][data-tone="navy"][data-plus] .section-heading { font-size:32px; } html[data-design="clarity"][data-tone="navy"][data-plus] .sidebar-card h2 { font-size:22px; } html[data-design="clarity"][data-tone="navy"][data-plus] .modal h2 { font-size:28px; color:var(--n-navy); } /* ---------- Home: only what earns its place ---------- */ /* The carousel now carries recent reviews and the "add yours" prompt; guidelines stay in the footer. */ html[data-design="clarity"][data-tone="navy"][data-plus] .recent-section, html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-sidebar { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-filter-bar { justify-content:flex-start; padding-top:28px; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-layout { padding-top:24px; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-heading { margin-bottom:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .directory-link { margin-top:8px; } /* ---------- Professor list as a compact catalog table ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-colhead, html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-card { display:grid; grid-template-columns:76px minmax(0,1fr) 92px 140px; column-gap:20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-colhead { white-space:nowrap; padding:0 24px 8px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-colhead span:nth-child(n+3) { text-align:right; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-card { position:relative; row-gap:0; padding:16px 24px; align-items:start; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-identity > div:not(.professor-rating) { grid-column:2; grid-row:1; } html[data-design="clarity"][data-tone="navy"][data-plus] .professor-rating { grid-column:1; grid-row:1 / span 2; align-self:start; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; width:auto; height:auto; min-height:0; flex-basis:auto; margin:0; padding:2px 0 0; border:0; border-radius:0; background:none; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .professor-rating.is-unrated { background:none; border:0; color:#A39B88; } html[data-design="clarity"][data-tone="navy"][data-plus] .professor-rating-value { font-family:var(--display); font-size:34px; font-weight:700; line-height:.9; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums; border-bottom:0; padding-bottom:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-identity h3 { display:inline; font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.01em; line-height:1.25; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-identity p { margin-top:2px; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores { display:contents; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores > div { grid-row:1; display:flex; flex-direction:column; align-items:flex-end; padding-top:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores > div:first-child { grid-column:3; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores > div:last-child { grid-column:4; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores dt { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores dd { font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-courses { grid-column:2; grid-row:2; margin-top:6px; } /* Review count sits on the courses line; the name already links to the profile. */ html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-card-foot { grid-column:3 / -1; grid-row:2; align-self:end; justify-content:flex-end; padding-top:0; font-size:12px; line-height:20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-card-foot a { display:none; } /* ---------- Reviews read like quotes ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .review-scores { align-items:center; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-score { font-family:var(--display); font-size:26px; font-weight:700; font-variant-numeric:lining-nums; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .review-course { font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.01em; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-comment { font-family:var(--display); font-size:18px; line-height:1.6; color:#1E2A3C; } html[data-design="clarity"][data-tone="navy"][data-plus] .recent-professor { font-family:var(--display); font-size:17px; font-weight:700; } /* ---------- Review form: 0.5–5 options ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .rating-option input:checked + span { background:var(--n-navy); border-color:var(--n-navy); color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .rating-option span { font-variant-numeric:tabular-nums; } /* ---------- Professor page ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .profile-intro { grid-template-columns:auto minmax(0,1fr); gap:32px; } html[data-design="clarity"][data-tone="navy"][data-plus] .profile-score strong { font-family:var(--display); font-size:88px; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:lining-nums; box-shadow:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .profile-score .pn-pearls { display:flex; width:max-content; margin:10px 0 8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .profile-identity h1 { font-family:var(--display); font-weight:700; font-size:clamp(40px,5vw,60px); letter-spacing:-.02em; line-height:1.05; } html[data-design="clarity"][data-tone="navy"][data-plus] .profile-identity .name-romanized { font-family:var(--display); font-size:20px; color:#6B6455; } html[data-design="clarity"][data-tone="navy"][data-plus] .profile-secondary dd { font-family:var(--display); font-weight:700; font-variant-numeric:lining-nums; } /* ---------- Directory & search results ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .page-eyebrow { color:var(--n-gold-ink); font-size:12px; font-weight:600; letter-spacing:.1em; } html[data-design="clarity"][data-tone="navy"][data-plus] .results-page h1 { font-family:var(--display); font-weight:700; font-size:clamp(36px,5vw,52px); letter-spacing:-.02em; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .results-heading { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .result-row { grid-template-columns:76px minmax(0,1fr) auto 16px; align-items:start; } html[data-design="clarity"][data-tone="navy"][data-plus] .result-name { font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .result-arrow { color:var(--n-gold); } html[data-design="clarity"][data-tone="navy"][data-plus] .class-result-title { font-family:var(--display); font-size:20px; font-weight:700; color:var(--n-navy); } /* ---------- Footer: slim navy strip ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] footer { margin-top:48px; padding:20px 0 76px; min-height:0; border:0; background:var(--n-navy); color:#C9D3E3; box-shadow:0 0 0 100vmax var(--n-navy); clip-path:inset(0 -100vmax); } html[data-design="clarity"][data-tone="navy"][data-plus] .footer-link { color:var(--n-gold-on-navy); } /* ---------- Narrower screens ---------- */ @media (max-width:1000px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide { flex-basis:calc((100% - 44px) / 2.2); } } @media (max-width:960px) { html[data-design="clarity"][data-tone="navy"][data-plus] .profile-score strong { font-size:64px; } } @media (max-width:740px) { html[data-design="clarity"][data-tone="navy"][data-plus] .site-header { padding:0 16px; } } @media (max-width:680px) { html[data-design="clarity"][data-tone="navy"][data-plus] .home { gap:24px; padding-top:32px; } html[data-design="clarity"][data-tone="navy"][data-plus] .hero-wordmark { --hmax:46px; } html[data-design="clarity"][data-tone="navy"][data-plus][lang="ja"] .hero-wordmark { --hmax:30px; } html[data-design="clarity"][data-tone="navy"][data-plus] .home-description { font-size:17px; } html[data-design="clarity"][data-tone="navy"][data-plus] .home .search-examples .browse-link { padding-left:0; box-shadow:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-who { align-self:stretch; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-carousel-head { padding:0 0 10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-track { gap:16px; padding:16px 6px 20px; scroll-padding-inline:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide { flex-basis:86%; padding:18px 18px 16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-quote { font-size:20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-foot { gap:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-score { gap:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-filter-bar { padding-top:24px; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-filters { min-width:0; max-width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-filters::-webkit-scrollbar { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-filters button { flex:none; white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-heading > div { display:contents; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-heading h2 { grid-column:1 / -1; font-size:28px; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-heading p { grid-column:1; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-sort { grid-column:2; grid-row:2; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-sort > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-colhead { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-card { grid-template-columns:72px minmax(0,1fr); column-gap:14px; padding:16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .professor-rating { grid-row:1 / span 2; } html[data-design="clarity"][data-tone="navy"][data-plus] .professor-rating-value { font-size:28px; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores { display:flex; grid-column:2; grid-row:2; flex-wrap:wrap; gap:2px 16px; margin-top:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores > div { grid-column:auto; grid-row:auto; flex-direction:row; align-items:baseline; gap:6px; padding-top:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores dt { position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-scores dd { font-size:14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-courses { grid-column:2; grid-row:3; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-card-foot { grid-column:1; grid-row:3 / span 2; align-self:start; justify-content:flex-start; padding-top:4px; font-size:11px; line-height:1.35; } html[data-design="clarity"][data-tone="navy"][data-plus] .result-row { grid-template-columns:72px minmax(0,1fr); } html[data-design="clarity"][data-tone="navy"][data-plus] .profile-score strong { font-size:72px; } html[data-design="clarity"][data-tone="navy"][data-plus] footer { margin-top:40px; } } /* Whole sticky note opens the professor's reviews: the name link is stretched over the note */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-link::after { content:""; position:absolute; inset:0; z-index:1; border-radius:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide-link:focus-visible { outline:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide:has(.pn-slide-link:focus-visible) { outline:2px solid var(--n-gold); outline-offset:3px; transform:rotate(0deg) translateY(-3px); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-slide:hover .pn-slide-link { text-decoration:underline; text-decoration-color:var(--n-gold); text-underline-offset:3px; } /* The review you came for flashes gold once on the professor page */ html[data-design="clarity"][data-tone="navy"][data-plus] .review-entry.pn-highlight { animation:pn-flash 1.8s ease-out; outline:none; } @keyframes pn-flash { 0%, 35% { box-shadow:0 0 0 3px var(--n-gold), 0 8px 24px -12px rgba(23,46,80,.35); } 100% { box-shadow:0 0 0 1px var(--n-line); } } @media (prefers-reduced-motion: reduce) { html[data-design="clarity"][data-tone="navy"][data-plus] .review-entry.pn-highlight { animation:none; box-shadow:0 0 0 3px var(--n-gold); } } /* ================= Professor page remakes ================= */ /* shared */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof { margin-top:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof-head h1 { margin:0; font-family:"Nunito",var(--display); font-weight:800; font-size:clamp(34px,4.6vw,56px); line-height:1.06; letter-spacing:-.02em; color:var(--n-navy); overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof-sub { display:flex; flex-wrap:wrap; align-items:center; margin:10px 0 0; font-size:15px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof-sub .official-link { margin:0; padding:0; min-height:0; font-size:15px; color:var(--n-navy); text-decoration-color:var(--n-gold); text-underline-offset:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dot-sep { margin:0 10px; color:#B9B1A0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-chips li { display:inline-flex; align-items:baseline; gap:8px; padding:6px 12px; border-radius:999px; background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-chips small { font-size:11px; font-weight:500; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-chips-more { display:none; } @media (max-width:680px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-chips--many:not(.is-open) li:nth-child(n+5) { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-chips-more { display:inline-flex; align-items:center; min-height:32px; margin-top:8px; padding:0 14px; border:1px dashed var(--n-line); border-radius:999px; background:transparent; font-size:13px; font-weight:700; color:var(--n-navy); cursor:pointer; } } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls--diff i.on { background:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-pearls--diff i.half { background:linear-gradient(90deg, var(--n-navy) 50%, transparent 50%); box-shadow:inset 0 0 0 1px var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-meter { display:block; width:100%; max-width:120px; height:7px; margin-top:10px; border-radius:4px; background:#EFE9DC; overflow:hidden; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-meter i { display:block; height:100%; border-radius:4px; background:var(--n-gold); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-score strong { font-family:"Nunito",var(--display); font-weight:800; letter-spacing:-.03em; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .score-label { font-size:11px; letter-spacing:.1em; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .score-count { color:var(--n-navy); text-decoration-color:var(--n-gold); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary dd { font-family:"Nunito",var(--display); font-weight:800; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .review-heading .section-heading { font-family:"Nunito",var(--display); font-weight:800; font-size:28px; letter-spacing:-.01em; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .review-score { font-family:"Nunito",var(--display); font-weight:800; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .review-course { font-family:"Nunito",var(--display); font-weight:800; letter-spacing:-.005em; } /* ---------- A: Notes ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes { display:grid; grid-template-columns:minmax(0,1fr) 320px; grid-template-rows:auto 1fr; grid-template-areas:"head side" "reviews side"; gap:24px 48px; align-items:start; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .pn-prof-head { grid-area:head; padding-top:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .pn-prof-side { grid-area:side; position:sticky; top:84px; display:grid; gap:16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard { display:grid; gap:18px; padding:22px 22px 20px; border-radius:20px; background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line), 0 12px 30px -20px rgba(23,46,80,.35); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-score strong { font-size:64px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-score .pn-pearls { margin:8px 0 6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary > div, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary > div + div { padding:12px 14px; border:0; border-radius:14px; background:var(--n-ivory); box-shadow:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary dd { font-size:26px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary .pn-pearls { margin-top:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .primary-button { width:100%; min-height:48px; border-radius:999px; justify-content:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .distribution-panel { padding:18px 22px; border:0; border-radius:20px; background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); } /* ---------- B: Report card ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report { display:grid; gap:24px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .pn-prof-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 32px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .pn-prof-title { flex:1 1 420px; min-width:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .pn-prof-head > .primary-button { flex:none; min-height:48px; padding:0 26px; border-radius:999px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr); align-items:stretch; border-radius:20px; background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip > .profile-secondary { display:contents; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip > .profile-score, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary > div, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary > div + div, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip > .distribution-panel { min-width:0; margin:0; padding:20px 24px; border:0; border-radius:0; background:none; box-shadow:inset 1px 0 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip > .profile-score { box-shadow:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-score strong { font-size:56px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-score .pn-pearls { margin:8px 0 6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary dt { font-size:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary dd { margin-top:8px; font-size:34px; line-height:1.1; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary .pn-pearls { margin-top:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .distribution-panel .panel-heading h2 { font-size:13px; font-weight:700; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .rating-distribution { gap:6px; margin-top:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .rating-distribution li { grid-template-columns:44px minmax(0,1fr) 16px; gap:8px; font-size:11px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .distribution-track { height:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .reviews-section { display:grid; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-heading .section-heading { margin-bottom:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-entry { display:grid; grid-template-columns:150px auto minmax(0,1fr); grid-template-areas:"scores course course" "scores term again" "scores comment comment" "scores foot foot"; align-items:start; gap:6px 10px; margin:0; padding:20px 24px; border:0; border-radius:16px; background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-scores { grid-area:scores; flex-direction:column; align-items:flex-start; gap:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-score { font-size:30px; line-height:1; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-scores .difficulty { font-size:12px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-course { grid-area:course; margin:0; font-size:18px; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-term, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-again { margin:0; padding:3px 9px; border-radius:999px; background:var(--n-ivory); font-size:11px; color:var(--n-navy); white-space:nowrap; justify-self:start; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-term { grid-area:term; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-again { grid-area:again; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-comment { grid-area:comment; margin:8px 0 0; font-family:var(--display); font-size:16px; line-height:1.65; color:#1E2A3C; max-width:72ch; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-foot { grid-area:foot; margin:0; text-align:right; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .report-button { min-height:32px; padding:0; font-size:12px; color:var(--muted); } /* ---------- narrower screens ---------- */ @media (max-width:960px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes { grid-template-columns:minmax(0,1fr) 280px; gap:24px 28px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip > .distribution-panel { grid-column:1 / -1; box-shadow:inset 0 1px 0 var(--n-line); } } @media (max-width:740px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "side" "reviews"; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .pn-prof-side { position:static; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip > .profile-score { grid-column:1 / -1; box-shadow:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary > div { box-shadow:inset 0 1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary > div + div { box-shadow:inset 1px 0 0 var(--n-line), inset 0 1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-entry { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"scores scores" "course course" "term again" "comment comment" "foot foot"; padding:18px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .review-scores { flex-direction:row; align-items:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--report .pn-prof-head > .primary-button { width:100%; } } /* ===== Key stats first (Rate My Professors style): Would take again + Difficulty are big; breakdown is secondary ===== */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary > div { display:flex; flex-direction:column; align-items:flex-start; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary > div:first-child { order:2; } /* Difficulty after Would take again */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary > div:last-child { order:1; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary dd { order:0; margin:0; font-family:"Nunito",var(--display); font-weight:800; line-height:1; color:var(--n-navy); letter-spacing:-.02em; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary dt { order:1; margin-top:8px; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary dt span { font-weight:500; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary .pn-pearls, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .profile-secondary .pn-meter { order:2; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof .pn-pearls--diff i { width:9px; height:9px; } /* Notes: big pair under the overall score */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary { gap:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary > div, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary > div + div { padding:16px 16px 14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-scorecard .profile-secondary dd { font-size:40px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .distribution-panel { padding:14px 18px; box-shadow:0 0 0 1px var(--n-line); opacity:.85; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .distribution-panel .panel-heading h2 { font-size:13px; font-weight:700; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .rating-distribution { gap:5px; margin-top:8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .rating-distribution li { font-size:11px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .distribution-track { height:5px; } /* Report card: Overall | Would take again | Difficulty big; breakdown narrow and quiet */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary dd { margin-top:22px; font-size:56px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip > .profile-score { order:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary > div:last-child { order:1; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary > div:first-child { order:2; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip > .distribution-panel { order:3; padding:16px 18px; opacity:.85; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .distribution-panel .panel-heading h2 { color:var(--muted); font-size:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .rating-distribution { gap:4px; margin-top:8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .rating-distribution li { grid-template-columns:38px minmax(0,1fr) 14px; font-size:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .distribution-track { height:4px; } @media (max-width:960px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:740px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary dd { margin-top:0; font-size:44px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary > div:last-child { box-shadow:inset 0 1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-strip .profile-secondary > div:first-child { box-shadow:inset 1px 0 0 var(--n-line), inset 0 1px 0 var(--n-line); } } /* Main site (index.html): no preview switcher, so the footer needs no extra room for it */ html[data-main][data-design="clarity"][data-tone="navy"][data-plus] footer { padding-bottom:28px; } /* ---------- Professor page reviews: clean cards with Overall / Difficulty grade boxes ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .reviews-section { grid-area:reviews; display:grid; gap:14px; min-width:0; container-type:inline-size; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-heading .section-heading { margin-bottom:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-entry { display:grid; grid-template-columns:92px minmax(0,1fr) auto; grid-template-areas:"grades course term" "grades comment comment" "grades again foot"; align-items:start; gap:8px 22px; margin:0; padding:22px 24px 16px; border:0; border-radius:16px; background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-scores { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rv-grades { grid-area:grades; display:grid; gap:8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade { display:grid; justify-items:center; gap:2px; padding:10px 6px 9px; border-radius:12px; text-align:center; background:var(--n-ivory); color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.8; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade-value { font-family:"Nunito",var(--display); font-size:28px; font-weight:800; line-height:1.05; font-variant-numeric:lining-nums tabular-nums; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-course { grid-area:course; margin:2px 0 0; font-size:18px; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-term { grid-area:term; justify-self:end; margin:2px 0 0; font-size:13px; color:var(--muted); white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-comment { grid-area:comment; max-width:72ch; margin:4px 0 0; font-family:var(--display); font-size:16px; line-height:1.65; color:#1E2A3C; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-again { grid-area:again; justify-self:start; margin:6px 0 0; padding:4px 10px; border-radius:999px; background:var(--n-ivory); font-size:12px; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-foot { grid-area:foot; margin:4px 0 0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .report-button { min-height:32px; padding:0; font-size:12px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-empty { padding:28px; border:1px dashed #CFC6B3; border-radius:16px; background:#FFFFFF; box-shadow:none; text-align:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-empty p { margin-inline:auto; } @media (max-width:740px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-entry { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"grades grades" "course term" "comment comment" "again foot"; padding:18px; gap:8px 12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rv-grades { grid-template-columns:repeat(2,minmax(0,1fr)); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade { grid-template-columns:auto auto; justify-content:center; align-items:baseline; gap:10px; padding:8px 10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade-value { font-size:22px; } } /* Review grade boxes: a subtle shade step per half point */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="1"] { background:#666278; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="2"] { background:#5C5E77; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="3"] { background:#525A76; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="4"] { background:#485573; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="5"] { background:#3E5070; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="6"] { background:#354A6B; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="7"] { background:#2C4365; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="8"] { background:#243C5E; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="9"] { background:#1D3557; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--overall[data-level="10"] { background:#172E50; color:#FFFFFF; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="1"] { background:#EEF2F4; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="2"] { background:#F0F2F1; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="3"] { background:#F2F2EE; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="4"] { background:#F4F2EA; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="5"] { background:#F6F1E6; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="6"] { background:#F7EFE1; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="7"] { background:#F7ECDC; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="8"] { background:#F7E8D6; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="9"] { background:#F6E4D1; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade--difficulty[data-level="10"] { background:#F5DFCB; color:var(--n-navy); } /* ---------- Review form: click-or-drag ratings ---------- */ /* The app's radio buttons stay in the form for saving; they are visually hidden here. */ html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .rating-row { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .field-hint { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .pn-rate-legend { display:flex; align-items:baseline; justify-content:space-between; gap:0 8px; width:100%; min-height:22px; padding:0; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .rating-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 24px; align-items:start; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate { display:grid; gap:6px; margin-top:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-track { display:flex; border-radius:12px; cursor:pointer; touch-action:pan-y; user-select:none; -webkit-user-select:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-track:focus-visible { outline:2px solid var(--n-gold); outline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-fill { position:absolute; inset:0 auto 0 0; width:0; } /* Quality: five small pearls in a row. Hover shows a light-gold preview; a choice fills them gold. No animation. */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--overall .pn-rate-track { gap:8px; width:100%; max-width:192px; height:36px; align-items:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--overall .pn-rate-caps { max-width:192px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--overall .pn-rate-unit { position:relative; display:grid; place-items:center; flex:1 1 0; min-width:0; max-width:32px; height:100%; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-pearl { position:relative; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:#F3EFE6; box-shadow:inset 0 0 0 1.5px #D9D0BD; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--overall .pn-rate-fill { background:var(--n-gold); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--overall.is-preview .pn-rate-fill { background:#E8D3A0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--overall .pn-rate-unit:hover .pn-rate-pearl { box-shadow:inset 0 0 0 2px var(--n-gold); } /* Difficulty: a straight line with five marks and a round dial; clicks or drags to 1–5 in half steps */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty .pn-rate-track { width:100%; height:36px; align-items:center; padding:0 11px; box-sizing:border-box; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dial { position:relative; flex:1; height:100%; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dial-line, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dial-fill { position:absolute; left:0; top:50%; height:4px; margin-top:-2px; border-radius:2px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dial-line { right:0; background:#E2DACA; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dial-fill { width:0; background:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dial-ticks { position:absolute; inset:0; pointer-events:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dial-ticks i { position:absolute; top:50%; width:2px; height:12px; margin:-6px 0 0 -1px; border-radius:1px; background:#D2C8B4; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty.is-shooting .pn-dial-fill { transition:width 340ms cubic-bezier(.2,.8,.2,1); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty.is-shooting .pn-dial-knob { transition:left 340ms cubic-bezier(.2,.8,.2,1); } @media (prefers-reduced-motion: reduce) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty.is-shooting .pn-dial-fill, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty.is-shooting .pn-dial-knob { transition:none; } } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-dial-knob { position:absolute; left:0; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--n-navy); box-shadow:0 0 0 3px var(--n-ivory), 0 1px 4px #18264F40; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty.is-empty .pn-dial-knob { visibility:hidden; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty.is-preview .pn-dial-knob { visibility:visible; background:#9AA3BA; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty.is-preview .pn-dial-fill { background:#9AA3BA; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty .pn-rate-track:hover .pn-dial-knob, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty.is-dragging .pn-dial-knob { box-shadow:0 0 0 3px var(--n-ivory), 0 0 0 5px #C9A24A66, 0 1px 4px #18264F40; } /* Readout on the title line, right-aligned: "4 / 5 · Good" once chosen */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout { display:flex; align-items:baseline; gap:5px; line-height:1.2; font-weight:400; white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout strong { font-family:"Nunito",var(--display); font-size:17px; font-weight:800; color:var(--n-navy); font-variant-numeric:tabular-nums; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout .pn-rate-of { font-size:12px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout .pn-rate-dot { color:#B9B1A0; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout em { font-style:normal; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout.is-empty strong, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout.is-empty .pn-rate-of, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout.is-empty .pn-rate-dot { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout.is-empty em { font-size:12px; font-weight:500; color:var(--muted); } /* End labels at the two ends */ html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-caps { display:flex; justify-content:space-between; gap:12px; font-size:11px; font-weight:500; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--difficulty .pn-rate-caps { padding:0 2px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-msg { margin:2px 0 0; font-size:12px; font-weight:600; color:#9A2F22; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate.is-invalid .pn-rate-track { box-shadow:0 0 0 2px #C9574A; } @media (max-width:520px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout .pn-rate-dot, html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate-readout em { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .rating-pair { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rate--overall .pn-rate-track { gap:5px; } } /* The popup keeps its rounded corners on all sides: the form scrolls inside it, not the popup itself */ html[data-design="clarity"][data-tone="navy"][data-plus] .modal { overflow:hidden; } html[data-design="clarity"][data-tone="navy"][data-plus] .modal > form { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; } /* "Your review" and its hint on one line */ html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .field-label-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .field-label-row .comment-help { display:inline; margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form #comment { min-height:124px; resize:none; overflow:hidden; } /* Course matches in the professor suggestions */ html[data-design="clarity"][data-tone="navy"][data-plus] .professor-suggestion .suggestion-course { font-style:normal; font-size:12px; font-weight:500; color:var(--muted); } /* Save stays grey until the required parts are done; parts left unfinished turn red */ html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .review-submit-wrap { cursor:not-allowed; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .review-submit-wrap:has(button:not(:disabled)) { cursor:auto; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form button[type="submit"]:disabled { background:#D8D3C8; border-color:#D8D3C8; color:#8A8577; box-shadow:none; pointer-events:none; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form [data-req].is-missing > span:first-child, html[data-design="clarity"][data-tone="navy"][data-plus] #review-form [data-req].is-missing > legend, html[data-design="clarity"][data-tone="navy"][data-plus] #review-form [data-req].is-missing > legend *, html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .review-agree.is-missing, html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .professor-field.is-missing label { color:#B3261E; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form [data-req].is-missing select, html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .professor-field.is-missing input { border-color:#C9574A; box-shadow:0 0 0 1px #C9574A; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form fieldset.is-missing .pn-rate-track { box-shadow:0 0 0 2px #C9574A; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form fieldset.is-missing .choice-row label, html[data-design="clarity"][data-tone="navy"][data-plus] #review-form fieldset.is-missing .choice-row .choice { border-color:#C9574A; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .review-agree.is-missing input { outline:2px solid #C9574A; outline-offset:1px; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form .review-name-field.is-missing input { border-color:#C9574A; box-shadow:0 0 0 1px #C9574A; } /* Header: the "Search" link only returned to the home page (the logo does the same), so it is hidden */ html[data-design="clarity"][data-tone="navy"][data-plus] .header-actions > .text-button[data-home] { display:none; } /* ---------- Sign-in dialog ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] #signin-form label { display:grid; gap:6px; margin:16px 0 4px; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] #signin-email, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-code { width:100%; box-sizing:border-box; min-height:44px; padding:10px 14px; font:inherit; font-weight:400; font-size:15px; border:1px solid var(--n-line); border-radius:12px; background:#fff; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] #signin-email:focus-visible, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password:focus-visible { outline:2px solid var(--n-gold); outline-offset:1px; } html[data-design="clarity"][data-tone="navy"][data-plus] #signin-form .primary-button { margin-top:8px; } html[data-design="clarity"][data-tone="navy"][data-plus] #signin-sent-text { margin:14px 0 16px; line-height:1.6; } /* ---------- Footer links ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; } html[data-design="clarity"][data-tone="navy"][data-plus] a.footer-link { text-decoration:none; padding:10px 0; } html[data-design="clarity"][data-tone="navy"][data-plus] a.footer-link:hover { color:var(--n-gold-on-navy); text-decoration:underline; text-underline-offset:4px; } /* ---------- Review actions: report / your review ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .review-foot { display:flex; justify-content:flex-end; align-items:center; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-button[disabled] { cursor:default; opacity:.7; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-mine { margin-right:auto; padding:3px 9px; border-radius:999px; background:#F6EEDB; color:#7A5A12; font-size:11px; font-weight:600; } html[data-design="clarity"][data-tone="navy"][data-plus] [data-delete-review]:hover { color:#9A2F22; } /* ---------- Report / delete dialogs ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] #report-intro, html[data-design="clarity"][data-tone="navy"][data-plus] #delete-text { margin:14px 0 4px; line-height:1.6; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-reasons { display:grid; gap:6px; margin:12px 0 0; padding:0; border:0; } html[data-design="clarity"][data-tone="navy"][data-plus] #report-form [hidden] { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-confirm-text { margin:4px 0 0; line-height:1.6; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-actions { margin-top:16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-actions .primary-button:not(.full-width) { flex:1 1 0; width:auto; min-height:48px; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-reason { display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 14px; border:1px solid var(--n-line); border-radius:12px; background:#fff; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-reason:has(input:checked) { border-color:var(--n-navy); box-shadow:inset 0 0 0 1px var(--n-navy); background:#F7F5EF; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-reason input { accent-color:var(--n-navy); margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-details { display:block; margin:14px 0 0; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-details textarea { min-height:84px; font-weight:400; } html[data-design="clarity"][data-tone="navy"][data-plus] #report-form .primary-button { margin-top:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .dialog-actions { display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .dialog-actions .secondary-button { margin:0; color:var(--n-navy); font-size:14px; } html[data-design="clarity"][data-tone="navy"][data-plus] #discard-dialog .dialog-actions button { flex:1 1 0; width:auto; min-height:48px; white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .danger-button { background:#9A2F22 !important; border-color:#9A2F22 !important; } /* ---------- Agreement lines ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .review-agree { display:flex; align-items:flex-start; gap:10px; margin:18px 0 4px; font-size:13px; font-weight:500; line-height:1.5; color:var(--ink); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-agree input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .review-agree a, html[data-design="clarity"][data-tone="navy"][data-plus] .dialog-fineprint a { color:var(--n-navy); text-decoration:underline; text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .dialog-fineprint { margin:12px 0 0; font-size:12px; line-height:1.6; color:var(--muted); text-align:center; } /* ---------- Terms & Privacy pages ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page { width:min(720px, calc(100% - 32px)); margin:40px auto 0; } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-updated { margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page h1 { margin:0 0 12px; font-family:"Nunito",var(--display); font-size:34px; font-weight:800; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-intro { margin:0 0 28px; font-size:16px; line-height:1.7; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page section { padding:18px 0; box-shadow:inset 0 1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page h2 { margin:0 0 8px; font-size:16px; font-weight:700; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page section p { margin:0 0 8px; font-size:14px; line-height:1.8; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page a { color:var(--n-navy); text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-todo { color:#9A2F22; font-weight:600; } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-switch { margin:16px 0 0; font-weight:600; } @media (max-width:520px) { html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page { margin-top:24px; } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page h1 { font-size:28px; } } /* ---------- Search box: one rounded focus ring around the whole bar, none on the inner input ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .search-form .search-box:focus, html[data-design="clarity"][data-tone="navy"][data-plus] .search-form .search-box:focus-visible { outline:none; box-shadow:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .search-form:focus-within { outline:2px solid var(--n-gold); outline-offset:2px; } /* ---------- Directory filters: toggles + sort switch ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .dir-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:18px 0 0; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-divider { width:1px; height:20px; background:var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-group-label { margin-right:2px; font-size:12px; font-weight:600; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-toggle { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 13px; border:1px solid var(--n-line); border-radius:999px; background:#fff; color:var(--n-navy); font-size:13px; font-weight:600; cursor:pointer; transition:background-color 120ms, border-color 120ms, color 120ms; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-toggle:hover:not(:disabled) { border-color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-toggle[aria-pressed="true"] { background:var(--n-navy); border-color:var(--n-navy); color:#fff; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-toggle.is-excluded[aria-pressed="true"] { background:#FBEAE7; border-color:#C9574A; color:#9A2F22; text-decoration:line-through; text-decoration-thickness:1.5px; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-toggle:disabled { opacity:.4; cursor:not-allowed; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-count { font-size:11px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-off { font-size:15px; line-height:1; font-weight:500; color:rgba(255,255,255,.75); } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-clear { border:0; background:none; padding:6px 2px; font-size:13px; font-weight:600; color:var(--n-navy); text-decoration:underline; text-underline-offset:3px; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-results-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:26px 0 8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-results-bar .results-heading { margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-sort { display:flex; gap:2px; padding:3px; border-radius:999px; background:#EFEAE0; max-width:100%; overflow-x:auto; scrollbar-width:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-sort button { flex:none; min-height:30px; padding:0 13px; border:0; border-radius:999px; background:transparent; color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-sort button:hover { color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-sort button[aria-pressed="true"] { background:#fff; color:var(--n-navy); box-shadow:0 1px 2px rgba(23,46,80,.12); } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-empty { display:grid; justify-items:start; gap:4px; padding:28px 0; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-empty .secondary-button { margin:0; color:var(--n-navy); font-weight:600; } @media (prefers-reduced-motion: reduce) { html[data-design="clarity"][data-tone="navy"][data-plus] .dir-toggle { transition:none; } } @media (max-width:640px) { html[data-design="clarity"][data-tone="navy"][data-plus] .dir-filters { gap:10px 16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .dir-results-bar { margin-top:20px; } } /* ---------- Phone header: keep everything on one line (Write a review becomes a pencil button) ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .header-actions { flex-wrap:nowrap; } @media (max-width:480px) { html[data-design="clarity"][data-tone="navy"][data-plus] .header-actions { gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] #header-review { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; min-height:36px; padding:0; } html[data-design="clarity"][data-tone="navy"][data-plus] #header-review > span[aria-hidden="true"] { display:inline-flex; } html[data-design="clarity"][data-tone="navy"][data-plus] #header-review svg { display:block; width:18px; height:18px; } html[data-design="clarity"][data-tone="navy"][data-plus] #header-review .review-action-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } } /* ---------- Search suggestions: score and scale on one line ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .catalog-option-score { display:inline-flex; align-items:baseline; gap:3px; font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--n-navy); font-variant-numeric:tabular-nums; white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .catalog-option-score small { display:inline; font-family:inherit; font-size:12px; font-weight:500; letter-spacing:0; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .catalog-option-score.is-unrated { font-family:inherit; font-size:12px; font-weight:500; letter-spacing:0; color:var(--muted); } /* Legal pages: links to the other two documents; guidelines popup link */ html[data-design="clarity"][data-tone="navy"][data-plus] .legal-switch { display:flex; flex-wrap:wrap; gap:8px 24px; padding-top:18px; box-shadow:inset 0 1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page strong { color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .dialog-link { font-weight:600; color:var(--n-navy); text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page section ul { margin:0 0 8px; padding-left:20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page section li { margin:0 0 6px; padding-left:4px; font-size:14px; line-height:1.8; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .legal-page section li::marker { color:var(--n-gold); } /* ---------- Account popup: tabs, password field, links ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin:16px 0 4px; padding:3px; border-radius:999px; background:#EFEAE0; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-tabs[hidden] { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-tabs button { min-height:36px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:14px; font-weight:600; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-tabs button[aria-selected="true"] { background:#fff; color:var(--n-navy); box-shadow:0 1px 2px rgba(23,46,80,.12); } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-intro { margin:14px 0 0; line-height:1.6; } html[data-design="clarity"][data-tone="navy"][data-plus] #signin-form label[hidden], html[data-design="clarity"][data-tone="navy"][data-plus] .auth-intro[hidden], html[data-design="clarity"][data-tone="navy"][data-plus] .auth-forgot[hidden], html[data-design="clarity"][data-tone="navy"][data-plus] .auth-hint[hidden], html[data-design="clarity"][data-tone="navy"][data-plus] .dialog-fineprint[hidden] { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-password { position:relative; display:block; } html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password { padding-right:68px; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-reveal { position:absolute; top:50%; right:8px; transform:translateY(-50%); min-height:30px; padding:0 10px; border:0; border-radius:8px; background:transparent; color:var(--n-navy); font:inherit; font-size:12px; font-weight:600; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-reveal:hover { background:#F3EFE6; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-hint { font-size:12px; font-weight:500; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-forgot { display:block; margin:2px 0 0 auto; padding:6px 0; border:0; background:none; color:var(--n-navy); font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-inline-action { padding:0; border:0; background:none; color:var(--n-navy); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; } /* Password field: one Show/Hide control only (hide Edge's built-in eye and clear buttons), and autofilled or browser-suggested values keep the site's white field instead of yellow/blue. */ html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password::-ms-reveal, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password::-ms-clear { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] #signin-email:-webkit-autofill, html[data-design="clarity"][data-tone="navy"][data-plus] #signin-email:-webkit-autofill:hover, html[data-design="clarity"][data-tone="navy"][data-plus] #signin-email:-webkit-autofill:focus, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password:-webkit-autofill, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password:-webkit-autofill:hover, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #fff inset; box-shadow:0 0 0 1000px #fff inset; -webkit-text-fill-color:var(--ink); caret-color:var(--ink); transition:background-color 99999s; } html[data-design="clarity"][data-tone="navy"][data-plus] #signin-email:autofill, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-password:autofill { background:#fff; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-reveal { z-index:1; } /* Home: "Explore professors" heading first, then the filter chips, then the list */ /* Filter chips and Sort by share one row under the heading */ html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:2px 0 18px; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-toolbar > .discovery-filter-bar { flex:0 1 auto; min-width:0; max-width:100%; padding:0; margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .discovery-toolbar > .discovery-sort { flex:none; margin-left:auto; } html[data-design="clarity"][data-tone="navy"][data-plus] .faculty-section { margin-top:12px; } /* Professor page: filter reviews by class */ html[data-design="clarity"][data-tone="navy"][data-plus] .review-filter { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-filter button { display:inline-flex; align-items:center; gap:7px; max-width:100%; min-height:34px; padding:0 13px; border:1px solid var(--n-line); border-radius:999px; background:#fff; color:var(--n-navy); font:inherit; font-size:13px; font-weight:600; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-filter button span { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-filter button small { font-size:11px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-filter button:hover { border-color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .review-filter button[aria-pressed="true"] { background:var(--n-navy); border-color:var(--n-navy); color:#fff; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-filter button[aria-pressed="true"] small { color:rgba(255,255,255,.75); } html[data-design="clarity"][data-tone="navy"][data-plus] #profile-reviews .review-entry[hidden] { display:none; } /* Account popup notice (e.g. an email link opened in another browser) and the author's hidden-review note */ html[data-design="clarity"][data-tone="navy"][data-plus] .auth-intro.is-notice { padding:10px 12px; border-radius:10px; background:#F6EEDB; color:#5A4413; } html[data-design="clarity"][data-tone="navy"][data-plus] .hidden-review-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 14px; padding:12px 14px; border-radius:14px; background:#F6EEDB; color:#5A4413; font-size:13px; line-height:1.5; } html[data-design="clarity"][data-tone="navy"][data-plus] .hidden-review-notice p { margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .hidden-review-notice .report-button { flex:none; color:#9A2F22; font-weight:600; } /* Account popup: code entry */ html[data-design="clarity"][data-tone="navy"][data-plus] #auth-code { font-size:22px; font-weight:600; letter-spacing:.3em; font-variant-numeric:tabular-nums; text-align:center; } html[data-design="clarity"][data-tone="navy"][data-plus] #auth-code:focus-visible { outline:2px solid var(--n-gold); outline-offset:1px; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-links { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-links .auth-forgot { margin:2px 0 0; } html[data-design="clarity"][data-tone="navy"][data-plus] .auth-links .auth-forgot:last-child { margin-left:auto; } /* ---------- My account ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .account-page { width:min(760px, calc(100% - 32px)); margin:36px auto 0; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-page h1 { margin:0 0 16px; font-family:"Nunito",var(--display); font-size:34px; font-weight:800; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-loading { padding:40px 0; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-card { padding:18px 20px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-identity { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding:20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-avatar { position:relative; flex:none; display:grid; place-items:center; width:56px; height:56px; padding:0; border:0; border-radius:50%; background:var(--n-navy); color:#fff; font-family:"Nunito",var(--display); font-size:24px; font-weight:800; box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--n-gold); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-avatar img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-avatar-edit { position:absolute; right:-4px; bottom:-4px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px var(--n-line); font-size:12px; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-avatar:hover .account-avatar-edit { box-shadow:0 0 0 1px var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-actions { display:flex; align-items:center; gap:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-who { flex:1 1 200px; display:grid; gap:2px; min-width:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-who strong { font-size:18px; color:var(--n-navy); overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-who span { font-size:13px; color:var(--muted); overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-name-line { display:flex; align-items:center; gap:6px; min-width:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-name-edit { flex:none; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-name-edit svg { width:17px; height:17px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-name-edit:hover, html[data-design="clarity"][data-tone="navy"][data-plus] .account-name-edit[aria-expanded="true"] { background:var(--n-ivory); color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-card.account-name-form { margin-top:10px; padding:18px 20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-stats { display:flex; gap:8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-stats a { display:grid; justify-items:center; min-width:84px; padding:8px 12px; border-radius:14px; background:var(--n-ivory); text-decoration:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-stats a:hover { box-shadow:inset 0 0 0 1px var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-stats strong { font-family:"Nunito",var(--display); font-size:22px; font-weight:800; line-height:1.1; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-stats span { font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-private { margin:8px 4px 0; font-size:12px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-head-link { font-size:13px; font-weight:700; color:var(--n-navy); text-decoration:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-head-link:hover { text-decoration:underline; text-decoration-color:var(--n-gold); text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule { padding:6px 20px 14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule-term { margin:10px 0 4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule ul { margin:0; padding:0; list-style:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule li { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:baseline; gap:10px; padding:9px 0; box-shadow:inset 0 -1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-when { font-size:12px; font-weight:800; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule li a { font-size:14px; font-weight:600; color:var(--n-navy); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule li a:hover { text-decoration:underline; text-decoration-color:var(--n-gold); text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-teacher { font-size:12px; color:var(--muted); white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule-more { margin:8px 0 0; font-size:12px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-timetable-link { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--n-navy); text-decoration:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-timetable-link:hover { text-decoration:underline; text-decoration-color:var(--n-gold); text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule-empty { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule-empty p { flex:1 1 260px; margin:0; font-size:14px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule-empty .primary-button { width:auto; margin:0; text-decoration:none; } @media (max-width:520px) { html[data-design="clarity"][data-tone="navy"][data-plus] .account-stats { width:100%; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-stats a { flex:1; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-schedule li { grid-template-columns:56px minmax(0,1fr); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-teacher { grid-column:2; } } html[data-design="clarity"][data-tone="navy"][data-plus] .account-identity strong { display:block; font-size:16px; color:var(--n-navy); overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-identity span, html[data-design="clarity"][data-tone="navy"][data-plus] .account-identity small { font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-section { margin-top:30px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-section h2 { margin:0 0 12px; font-size:18px; font-weight:700; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-section-head h2 { margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-head-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-sort { flex-direction:row; align-items:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-sort select { max-width:none; } @media (max-width:520px) { html[data-design="clarity"][data-tone="navy"][data-plus] .account-sort > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } } html[data-design="clarity"][data-tone="navy"][data-plus] .account-empty p { margin:0; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review + .account-review { margin-top:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review.is-hidden { background:#FCFAF5; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-prof { margin:0; font-size:16px; font-weight:700; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-course { margin:2px 0 0; font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-status { flex:none; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-status.is-public { background:#E7EFE6; color:#2F5D34; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-status.is-hidden { background:#F6EEDB; color:#7A5A12; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-scores { margin:10px 0 0; font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-scores strong { color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-comment { margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--ink); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-hidden-note { margin:10px 0 0; padding:8px 12px; border-radius:10px; background:#F6EEDB; color:#5A4413; font-size:12px; line-height:1.5; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-actions { display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-actions a { font-size:13px; font-weight:600; color:var(--n-navy); text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-actions .report-button { min-height:28px; padding:0; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-actions [data-delete-review] { color:#9A2F22; } html[data-design="clarity"][data-tone="navy"][data-plus] #account-password-form label { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] #account-password { width:100%; box-sizing:border-box; min-height:44px; padding:10px 68px 10px 14px; font:inherit; font-weight:400; font-size:15px; border:1px solid var(--n-line); border-radius:12px; background:#fff; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] #account-password::-ms-reveal { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] #account-password-form .primary-button { margin-top:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-danger .account-card { box-shadow:0 0 0 1px #E8C9C3; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-danger p { margin:0 0 12px; font-size:14px; line-height:1.6; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .danger-outline { padding:10px 16px; border:1px solid #C9574A; border-radius:999px; background:#fff; color:#9A2F22; font:inherit; font-size:14px; font-weight:600; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .danger-outline:hover { background:#FBEFED; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-confirm { display:grid; gap:6px; margin:14px 0 0; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] #delete-account-input { min-height:44px; padding:10px 14px; font:inherit; font-size:15px; border:1px solid var(--n-line); border-radius:12px; background:#fff; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .danger-button:disabled { opacity:.45; cursor:not-allowed; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-edited { margin-left:8px; padding:1px 8px; border-radius:999px; background:#EFEAE0; color:var(--muted); font-size:11px; font-weight:600; } html[data-design="clarity"][data-tone="navy"][data-plus] #review-form.is-editing #review-professor-search, html[data-design="clarity"][data-tone="navy"][data-plus] #review-form.is-editing #course-select { background:#F3EFE6; color:var(--muted); cursor:not-allowed; } @media (max-width:520px) { html[data-design="clarity"][data-tone="navy"][data-plus] .account-page { margin-top:22px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-page h1 { font-size:28px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-actions { justify-content:flex-start; } } /* ---------- Display names ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .review-author { margin:2px 0 0; font-size:13px; font-weight:600; color:var(--n-gold-ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rv-grades .review-author { margin:2px 0 0 2px; text-align:left; overflow-wrap:anywhere; line-height:1.3; } @media (max-width:740px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rv-grades .review-author { grid-column:1 / -1; margin:0; text-align:left; } } html[data-design="clarity"][data-tone="navy"][data-plus] .review-name[hidden], html[data-design="clarity"][data-tone="navy"][data-plus] .review-name-field[hidden] { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-name .review-agree { margin-bottom:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-name-field { display:grid; gap:6px; margin:4px 0 10px 28px; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] #review-display-name, html[data-design="clarity"][data-tone="navy"][data-plus] #account-display-name, html[data-design="clarity"][data-tone="navy"][data-plus] #auth-name { width:100%; box-sizing:border-box; min-height:42px; padding:9px 14px; font:inherit; font-weight:400; font-size:15px; border:1px solid var(--n-line); border-radius:12px; background:#fff; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] #account-name-form label { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-form-actions .secondary-button { margin:0; padding:10px 16px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--n-line); color:var(--n-navy); font-weight:600; font-size:14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-review-name { margin:6px 0 0; font-size:12px; font-weight:600; color:var(--n-gold-ink); } /* Error messages in red; while the sign-in popup shows an error, its fields get a red outline too */ html[data-design="clarity"][data-tone="navy"][data-plus] .form-error { color:#B3261E; font-weight:600; } html[data-design="clarity"][data-tone="navy"][data-plus] .form-error .auth-inline-action { color:#B3261E; } html[data-design="clarity"][data-tone="navy"][data-plus] #signin-form:has(#signin-error:not(:empty)) :is(#signin-email, #auth-password, #auth-code, #auth-name) { border-color:#C9574A; box-shadow:0 0 0 1px #C9574A; } /* My account: one folded "Account" area; delete account folded inside it */ html[data-design="clarity"][data-tone="navy"][data-plus] .account-settings > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:14px 18px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--n-line); cursor:pointer; list-style:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-settings > summary::-webkit-details-marker { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-settings > summary::after { content:"›"; margin-left:auto; font-size:20px; color:var(--muted); transition:transform 150ms; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-settings[open] > summary::after { transform:rotate(90deg); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-settings > summary h2 { margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-settings > summary span { font-size:13px; color:var(--muted); } /* Account settings: one panel, a row per action (text on the left, button on the right) */ html[data-design="clarity"][data-tone="navy"][data-plus] .account-settings > .settings-list { margin-top:12px; padding:4px 20px; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-row { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; padding:16px 0; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-row + .settings-row, html[data-design="clarity"][data-tone="navy"][data-plus] .settings-password + .settings-row { box-shadow:inset 0 1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-text { display:grid; gap:3px; min-width:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-text strong { font-size:15px; font-weight:700; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-text span { font-size:13px; line-height:1.5; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-action { flex:none; min-height:38px; padding:8px 16px; border:0; border-radius:999px; background:var(--n-ivory); box-shadow:inset 0 0 0 1px var(--n-line); color:var(--n-navy); font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-action:hover { box-shadow:inset 0 0 0 1px var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-action[aria-expanded="true"] { visibility:hidden; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-password { display:grid; gap:10px; padding:0 0 18px; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-password[hidden] { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-password label > span:first-child { font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-form-actions { display:flex; align-items:center; gap:14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-form-actions .primary-button { width:auto; margin:0; padding:10px 18px; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-cancel { padding:8px 4px; border:0; background:none; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; } @media (max-width:520px) { html[data-design="clarity"][data-tone="navy"][data-plus] .settings-row { flex-direction:column; align-items:stretch; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-action { align-self:flex-start; } html[data-design="clarity"][data-tone="navy"][data-plus] .settings-action[aria-expanded="true"] { display:none; } } html[data-design="clarity"][data-tone="navy"][data-plus] .account-delete { margin-top:18px; padding-left:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-delete > summary { font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-delete .account-danger { margin-top:10px; box-shadow:0 0 0 1px #E8C9C3; } html[data-design="clarity"][data-tone="navy"][data-plus] #delete-account-password { min-height:44px; padding:10px 14px; font:inherit; font-size:15px; border:1px solid var(--n-line); border-radius:12px; background:#fff; color:var(--ink); } /* ---------- Timetable (/timetable) and My schedule (/schedule) ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .timetable-page, html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-page { max-width:1080px; } /* Tabs shared by the timetable, the professor list and My schedule */ html[data-design="clarity"][data-tone="navy"][data-plus] .browse-tabs { display:flex; gap:4px; width:max-content; max-width:100%; margin:0 0 18px; padding:4px; box-sizing:border-box; overflow-x:auto; scrollbar-width:none; border-radius:999px; background:#F1ECE1; } html[data-design="clarity"][data-tone="navy"][data-plus] .browse-tabs a { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; font-size:14px; font-weight:600; color:var(--n-navy); text-decoration:none; white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .browse-tabs a:hover { background:rgba(255,255,255,.6); } html[data-design="clarity"][data-tone="navy"][data-plus] .browse-tabs a[aria-current="page"] { background:#fff; box-shadow:0 1px 3px rgba(23,46,80,.14); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-intro { max-width:62ch; margin:6px 0 18px; font-size:15px; line-height:1.6; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-term { display:inline-flex; padding:3px; border-radius:999px; background:#F1ECE1; } html[data-design="clarity"][data-tone="navy"][data-plus] #tt-term { display:flex; flex-wrap:wrap; align-items:center; gap:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-ayear select { min-height:40px; padding:0 34px 0 14px; border:1px solid var(--n-line); border-radius:999px; background-color:#fff; font:inherit; font-size:13px; font-weight:700; color:var(--n-navy); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-term button { min-height:34px; padding:0 18px; border:0; border-radius:999px; background:transparent; font-size:13px; font-weight:700; color:var(--n-navy); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-term button[aria-pressed="true"] { background:var(--n-navy); color:#fff; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-search { flex:1 1 240px; max-width:380px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-search input { width:100%; box-sizing:border-box; min-height:40px; padding:8px 16px; border:1px solid var(--n-line); border-radius:999px; background:#fff; font:inherit; font-size:14px; color:var(--ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; margin-top:16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-group { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-group-label { margin-right:4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-group .dir-toggle { min-height:32px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-group[aria-label] [data-tt-key="year"] { min-width:38px; justify-content:center; padding:0 11px; } /* Day tabs stay under the header while scrolling; each period's heading stays under them */ html[data-design="clarity"][data-tone="navy"][data-plus] .tt-days { position:sticky; top:68px; z-index:20; display:flex; gap:6px; height:66px; box-sizing:border-box; margin:18px 0 0; padding:9px 0; overflow-x:auto; scrollbar-width:none; background:var(--n-ivory); box-shadow:0 1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-days::-webkit-scrollbar { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-days button { flex:1 0 auto; min-width:58px; max-width:150px; display:grid; justify-items:center; align-content:center; gap:1px; padding:0 10px; border:1px solid var(--n-line); border-radius:12px; background:#fff; color:var(--n-navy); font-size:14px; font-weight:700; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-days button small { font-size:11px; font-weight:600; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-days button[aria-pressed="true"] { background:var(--n-navy); border-color:var(--n-navy); color:#fff; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-days button[aria-pressed="true"] small { color:rgba(255,255,255,.75); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-days button.is-empty:not([aria-pressed="true"]) { opacity:.5; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-period-head { position:sticky; top:calc(68px + 66px); z-index:10; display:flex; align-items:baseline; gap:10px; margin:0; padding:16px 2px 10px; background:var(--n-ivory); font-size:16px; font-weight:800; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-period-count { margin-left:auto; font-size:12px; font-weight:600; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-period + .tt-period { border-top:1px solid var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-period-head small { font-size:12px; font-weight:600; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-period.is-empty .tt-period-head { position:static; padding:10px 2px 2px; font-size:14px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-none { margin:0 2px 6px; font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-classes { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items:start; gap:12px; padding:2px 0 14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class { padding:14px 16px 4px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class-name { margin:0; font-size:15px; font-weight:700; line-height:1.35; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-credits { flex:none; font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap; } /* The professor link stretches over the whole card (one professor) or over its row (several); Add stays on top */ html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class { position:relative; transition:box-shadow 150ms; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class:hover { box-shadow:inset 0 0 0 1.5px var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-sections li { position:relative; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class.is-single .tt-sections li { position:static; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-who a::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class.is-single .tt-who a::after { border-radius:16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class:not(.is-single) .tt-sections li:hover { background:linear-gradient(90deg, transparent, var(--n-ivory) 12%, var(--n-ivory) 88%, transparent); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-add { position:relative; z-index:2; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-who a:focus-visible { outline:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class.is-single:has(.tt-who a:focus-visible), html[data-design="clarity"][data-tone="navy"][data-plus] .tt-sections li:has(.tt-who a:focus-visible) { outline:2px solid var(--n-gold); outline-offset:2px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-badges { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-badges span { padding:2px 9px; border-radius:999px; background:var(--n-ivory); font-size:11px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-sections { margin:0; padding:0; list-style:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-sections li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; box-shadow:inset 0 1px 0 var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-who { display:grid; gap:2px; min-width:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-who a { font-size:14px; font-weight:600; color:var(--n-navy); text-decoration:none; overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-who a:hover { text-decoration:underline; text-decoration-color:var(--n-gold); text-underline-offset:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-rating { display:inline-flex; align-items:baseline; gap:4px; font-size:12px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-rating .pn-pearls { align-self:center; margin-right:3px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-rating .pn-pearls i { animation:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-rating strong { font-family:"Nunito",var(--display); font-size:14px; font-weight:800; color:var(--n-navy); font-variant-numeric:tabular-nums; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-rating small { font-size:11px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-count { margin-left:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-room { font-size:12px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-rating.is-unrated { opacity:.8; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-add { flex:none; min-height:32px; padding:0 12px; border:1px solid var(--n-navy); border-radius:999px; background:#fff; color:var(--n-navy); font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-add[aria-pressed="true"] { background:var(--n-navy); color:#fff; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-continuing { margin:0 2px 10px; font-size:12px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-none-day, html[data-design="clarity"][data-tone="navy"][data-plus] .tt-other-note { margin:18px 2px; font-size:14px; color:var(--muted); } /* My schedule: a week grid, clashes in red */ html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-note { margin:0 0 14px; font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-signin { padding:0; border:0; background:none; font:inherit; font-weight:700; color:var(--n-navy); text-decoration:underline; text-underline-offset:3px; cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-conflict { margin:14px 0 0; padding:10px 14px; border-radius:12px; background:#FBEAE7; font-size:13px; font-weight:600; color:#9A2F22; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid-wrap { margin-top:14px; overflow-x:auto; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid { width:100%; min-width:620px; border-collapse:collapse; table-layout:fixed; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid th, html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid td { border:1px solid var(--n-line); vertical-align:top; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid tr > :first-child { border-left:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid tr > :last-child { border-right:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid thead th { border-top:0; padding:10px 6px; background:var(--n-ivory); font-size:13px; font-weight:800; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid thead th:first-child, html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid tbody th { width:56px; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid tbody th { padding:8px 4px; background:var(--n-ivory); font-size:15px; font-weight:800; text-align:center; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid tbody th small { display:block; font-size:10px; font-weight:600; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid tbody tr:last-child > * { border-bottom:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid td { height:64px; padding:4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-grid td.is-conflict { background:#FBEAE7; box-shadow:inset 0 0 0 2px #C9574A; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip { position:relative; display:grid; gap:1px; margin-bottom:4px; padding:6px 24px 6px 8px; border-radius:10px; background:#E5ECF7; font-size:12px; line-height:1.3; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip a { font-weight:700; color:var(--n-navy); text-decoration:none; overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip span { font-size:11px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip.is-continued { opacity:.65; } /* The whole box opens the professor's page (the link is stretched over it); the × stays above it */ html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip a::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip { cursor:pointer; transition:box-shadow 120ms; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip:hover { box-shadow:inset 0 0 0 1.5px var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip a:focus-visible { outline:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-chip:has(a:focus-visible) { outline:2px solid var(--n-gold); outline-offset:1px; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-remove { z-index:2; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-remove { position:absolute; top:3px; right:3px; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:transparent; font-size:15px; line-height:1; color:var(--muted); cursor:pointer; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-remove:hover { background:#fff; color:#9A2F22; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-subhead { margin:22px 0 10px; font-size:16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-untimed { display:flex; flex-wrap:wrap; gap:8px; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-untimed .schedule-chip { min-width:200px; margin:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-count, html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-other-term { margin:14px 2px 0; font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-empty { margin-top:16px; padding:28px; text-align:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-empty p { margin:0 0 14px; } html[data-design="clarity"][data-tone="navy"][data-plus] .schedule-empty .primary-button { display:inline-flex; width:auto; text-decoration:none; } @media (max-width:740px) { html[data-design="clarity"][data-tone="navy"][data-plus] .tt-days { top:58px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-period-head { top:calc(58px + 66px); } html[data-design="clarity"][data-tone="navy"][data-plus] .browse-tabs a { padding:8px 12px; font-size:13px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-class { padding:12px 14px 4px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-filters { gap:10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .tt-group-label { min-width:62px; } } /* A narrow reviews column (e.g. a half-screen window, which still has the side panel) uses the phone card layout. */ @container (max-width:560px) { html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-entry { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"grades grades" "course term" "comment comment" "again foot"; padding:18px; gap:8px 12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rv-grades { grid-template-columns:repeat(2,minmax(0,1fr)); } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade { grid-template-columns:auto auto; justify-content:center; align-items:baseline; gap:10px; padding:8px 10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-grade-value { font-size:22px; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-rv-grades .review-author { grid-column:1 / -1; margin:0; text-align:left; } } /* ---------- Reports page (moderators only) ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .account-mod-link { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; text-decoration:none; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-mod-link strong { display:block; font-size:15px; } html[data-design="clarity"][data-tone="navy"][data-plus] .account-mod-link small { font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .account-mod-link:hover { box-shadow:0 0 0 1px var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-intro { margin:0; max-width:64ch; font-size:14px; line-height:1.6; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-card { display:grid; gap:10px; margin-top:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-card.is-handled { opacity:.85; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-head > div { display:grid; gap:2px; min-width:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-head a { font-weight:700; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-head > div > span { font-size:13px; color:var(--muted); overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-status { flex:none; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--n-ivory); color:var(--n-navy); white-space:nowrap; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-status--modHiddenNow, html[data-design="clarity"][data-tone="navy"][data-plus] .mod-status--modRemoved { background:#F6E3DF; color:#9A2F22; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-scores { margin:0; font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-comment { margin:0; padding:10px 14px; border-left:3px solid var(--n-line); background:var(--n-ivory); border-radius:0 10px 10px 0; font-size:15px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; color:#1E2A3C; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-reports { display:grid; gap:6px; margin:0; padding:0; list-style:none; font-size:13px; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-reports li { padding:8px 12px; border-radius:10px; box-shadow:0 0 0 1px var(--n-line); } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-reports li.is-resolved { opacity:.6; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-reports li span { color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-reports li p { margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-actions { display:flex; justify-content:flex-end; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-actions button { min-height:40px; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-actions .secondary-button { margin:0; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-handled summary { cursor:pointer; list-style:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-handled summary::-webkit-details-marker { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-handled summary h2 { display:inline; } /* ---------- Helpful / not helpful votes ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .review-foot { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; } html[data-design="clarity"][data-tone="navy"][data-plus] .review-votes { display:inline-flex; align-items:center; gap:2px; margin-right:auto; } html[data-design="clarity"][data-tone="navy"][data-plus] .vote-button { display:inline-flex; align-items:center; gap:3px; min-height:32px; padding:0 8px; border:0; border-radius:999px; background:transparent; font:inherit; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; font-variant-numeric:tabular-nums; } html[data-design="clarity"][data-tone="navy"][data-plus] .vote-button svg { width:16px; height:16px; } html[data-design="clarity"][data-tone="navy"][data-plus] .vote-button:hover:not(:disabled) { background:var(--n-ivory); color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .vote-button.is-on { background:var(--n-navy); color:#fff; } html[data-design="clarity"][data-tone="navy"][data-plus] .vote-button.is-on[data-vote="-1"] { background:#5B6478; } html[data-design="clarity"][data-tone="navy"][data-plus] .vote-button:disabled { cursor:default; opacity:.7; } html[data-design="clarity"][data-tone="navy"][data-plus] .pn-prof--notes .review-foot { justify-self:stretch; } /* ---------- Your reports (My account) ---------- */ html[data-design="clarity"][data-tone="navy"][data-plus] .report-status-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-status-card { display:grid; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-status-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-status-head > div { display:grid; gap:2px; min-width:0; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-status-head strong { color:var(--n-navy); overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-status-head > div > span { font-size:13px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-pill { flex:none; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; background:var(--n-ivory); color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-pill b { color:var(--n-gold-ink); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-pill--hidden { background:#FBF1DC; color:#7A5A12; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-pill--removed { background:#F6E3DF; color:#9A2F22; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-pill--kept { background:#E5ECF6; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:0; list-style:none; counter-reset:step; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-steps li { position:relative; padding-top:18px; font-size:12px; color:var(--muted); text-align:center; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-steps li::before { content:""; position:absolute; top:4px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px #D2C8B4; z-index:1; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-steps li::after { content:""; position:absolute; top:8px; left:-50%; width:100%; height:2px; background:#E2DACA; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-steps li:first-child::after { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-steps li.is-done::before { background:var(--n-navy); box-shadow:0 0 0 2px var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-steps li.is-done::after { background:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-steps li.is-current { font-weight:700; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .report-status-text { display:grid; gap:4px; margin:0; font-size:14px; line-height:1.55; color:#1E2A3C; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-status-text small { font-size:12px; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .semester-note { display:block; margin-top:6px; font-size:12px; font-weight:400; color:var(--muted); } html[data-design="clarity"][data-tone="navy"][data-plus] .semester-note[hidden] { display:none; } html[data-design="clarity"][data-tone="navy"][data-plus] #semester:disabled { opacity:1; color:var(--n-navy); background:var(--n-ivory); cursor:not-allowed; } /* Moderator messages */ html[data-design="clarity"][data-tone="navy"][data-plus] .mod-note { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--n-navy); } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-note textarea { width:100%; box-sizing:border-box; min-height:56px; padding:10px 12px; border:1px solid var(--n-line); border-radius:12px; background:#fff; font:inherit; font-weight:400; font-size:14px; line-height:1.5; color:var(--ink); resize:vertical; } html[data-design="clarity"][data-tone="navy"][data-plus] .mod-sent-note { margin:0; padding:8px 12px; border-radius:10px; background:#E5ECF6; font-size:13px; line-height:1.5; color:var(--n-navy); white-space:pre-wrap; overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-mod-note { display:grid; gap:4px; margin:0; padding:10px 14px; border-left:3px solid var(--n-gold); border-radius:0 10px 10px 0; background:var(--n-ivory); font-size:14px; line-height:1.55; color:#1E2A3C; white-space:pre-wrap; overflow-wrap:anywhere; } html[data-design="clarity"][data-tone="navy"][data-plus] .report-mod-note strong { font-size:12px; letter-spacing:.02em; color:var(--n-gold-ink); white-space:normal; }