/* Local preview only (not committed): "D · Clarity" look over the real app.
   Active when <html data-design="clarity">. */

/* ---------- Design switcher tab ---------- */
.design-switch { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:1000; display:flex; padding:3px; border-radius:12px; background:rgba(30,30,32,.78); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); box-shadow:0 8px 28px rgba(0,0,0,.22); font:500 13px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
.design-switch button { border:0; background:transparent; color:#D1D1D6; padding:10px 16px; border-radius:9px; cursor:pointer; transition:transform 100ms ease-out, background-color 150ms ease; }
.design-switch button:active { transform:scale(.96); }
.design-switch button[aria-pressed="true"] { background:#FFFFFF; color:#1D1D1F; }
html[data-design] footer { padding-bottom:72px; }
@media (prefers-reduced-motion: reduce) { .design-switch button { transition:none; } .design-switch button:active { transform:none; } }

/* ---------- Tokens ---------- */
html[data-design="clarity"] {
  --paper:#FFFFFF; --white:#FFFFFF; --ink:#1D1D1F; --muted:#6E6E73; --line:#E3E3E8;
  --accent:#1D1D1F; --accent-hover:#3A3A3C; --deep:#1D1D1F; --soft:#F5F5F7; --lime:#0071E3; --gold:#0071E3; --control-line:#D2D2D7;
  --c-blue:#0071E3; --c-link:#0066CC; --c-fill:#F5F5F7; --c-fill2:#EEEEF0;
}
html[data-design="clarity"] body { background:#FFFFFF; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI","Noto Sans JP",system-ui,sans-serif; letter-spacing:-.01em; }
html[data-design="clarity"] h1, html[data-design="clarity"] h2, html[data-design="clarity"] h3,
html[data-design="clarity"] .brand-wordmark, html[data-design="clarity"] .hero-wordmark,
html[data-design="clarity"] .professor-rating-value, html[data-design="clarity"] .profile-score strong { font-family:inherit; }
html[data-design="clarity"] *, html[data-design="clarity"] *::before { box-shadow:none; }

/* Press feedback on pointer-down */
html[data-design="clarity"] button, html[data-design="clarity"] .faculty-card { transition:transform 100ms ease-out, background-color 120ms ease; }
html[data-design="clarity"] button:active { transform:scale(.97); }
@media (prefers-reduced-motion: reduce) { html[data-design="clarity"] button:active { transform:none; } }

/* ---------- Header: translucent material ---------- */
html[data-design="clarity"] .site-header { position:sticky; top:0; z-index:50; width:100%; max-width:none; height:52px; min-height:52px; padding:0 max(24px, calc((100% - 1080px) / 2)); box-sizing:border-box; border-bottom:0; background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); box-shadow:0 1px 0 rgba(0,0,0,.06); }
html[data-design="clarity"] .brand-wordmark { font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
html[data-design="clarity"] .text-button { font-size:14px; color:var(--ink); }
html[data-design="clarity"] #header-review { height:32px; min-height:32px; padding:0 16px; border-radius:980px; background:var(--c-blue); color:#fff; font-size:14px; font-weight:500; }
html[data-design="clarity"] #header-review svg { display:none; }

/* ---------- Hero ---------- */
html[data-design="clarity"] .home { background:transparent; color:var(--ink); border-radius:0; margin:0 auto; padding:88px 0 40px; overflow:visible; }
html[data-design="clarity"] .home::before { display:none; }
html[data-design="clarity"] .search-intro { width:min(680px,100%); margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
html[data-design="clarity"] .home-eyebrow, html[data-design="clarity"] .home .scope-divider { color:var(--muted); font-size:15px; font-weight:600; letter-spacing:0; margin-bottom:12px; }
html[data-design="clarity"] .hero-wordmark, html[data-design="clarity"][lang="ja"] .hero-wordmark { font-size:clamp(44px,6.5vw,80px); line-height:1.05; letter-spacing:-.035em; font-weight:700; text-wrap:balance; }
html[data-design="clarity"] .hero-emphasis { color:inherit; }
html[data-design="clarity"] .home-description { color:var(--muted); font-size:21px; line-height:1.4; margin:18px 0 28px; }
html[data-design="clarity"] .search-form { height:56px; padding:0 6px 0 20px; border:0; border-radius:16px; background:var(--c-fill); }
html[data-design="clarity"] .home .search-form:focus-within { outline:3px solid rgba(0,113,227,.35); outline-offset:0; }
html[data-design="clarity"] .search-icon { color:var(--muted); }
html[data-design="clarity"] .search-box { font-size:19px; height:54px; }
html[data-design="clarity"] .home .search-submit { height:44px; padding:0 18px; border-radius:12px; background:var(--c-blue); color:#fff; font-weight:500; font-size:15px; }
html[data-design="clarity"] .home .search-submit svg { display:none; }
html[data-design="clarity"] .home .search-examples { justify-content:center; margin-top:16px; font-size:14px; }
html[data-design="clarity"] .home .search-examples > span { color:var(--muted); }
html[data-design="clarity"] .home .search-examples a, html[data-design="clarity"] .home .browse-link { color:var(--c-link); text-decoration:none; }
html[data-design="clarity"] .home .search-examples a:hover, html[data-design="clarity"] .home .browse-link:hover { text-decoration:underline; }
html[data-design="clarity"] .home .count-label, html[data-design="clarity"] .count-label { background:var(--c-fill2); color:var(--ink); border-radius:6px; font-family:inherit; }

/* ---------- Filters: segmented control ---------- */
html[data-design="clarity"] .discovery-filter-bar { display:flex; justify-content:center; padding:0; border:0; }
html[data-design="clarity"] .discovery-filters { display:inline-flex; gap:0; padding:3px; border-radius:10px; background:var(--c-fill2); }
html[data-design="clarity"] .discovery-filters button { min-height:32px; padding:0 16px; border:0; border-radius:8px; background:transparent; color:var(--ink); font-size:14px; }
html[data-design="clarity"] .discovery-filters button:hover { background:transparent; }
html[data-design="clarity"] .discovery-filters button[aria-pressed="true"] { background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12); }

/* ---------- Section headings ---------- */
html[data-design="clarity"] .discovery-layout { padding-top:48px; }
html[data-design="clarity"] .discovery-heading { align-items:baseline; margin-bottom:18px; }
html[data-design="clarity"] .discovery-heading h2, html[data-design="clarity"] .section-heading { font-size:32px; font-weight:700; letter-spacing:-.025em; }
html[data-design="clarity"] .discovery-heading p { font-size:15px; color:var(--muted); }
html[data-design="clarity"] .discovery-sort select { min-height:32px; border:0; border-radius:8px; background:var(--c-fill2); font-size:14px; padding:4px 10px; }

/* ---------- Professor list: one grouped inset list ---------- */
html[data-design="clarity"] .faculty-cards { grid-template-columns:minmax(0,1fr); gap:0; background:var(--c-fill); border-radius:18px; overflow:hidden; }
html[data-design="clarity"] .faculty-card { grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:2px 16px; padding:14px 20px; border:0; border-radius:0; background:transparent; }
html[data-design="clarity"] .faculty-card + .faculty-card { box-shadow:inset 76px 0 0 var(--c-fill), inset 0 1px 0 #E3E3E8; }
html[data-design="clarity"] .faculty-card:hover { background:#EFEFF2; }
html[data-design="clarity"] .professor-rating { grid-row:1 / span 3; align-self:center; flex-basis:44px; width:44px; min-height:44px; height:44px; padding:0; gap:0; border-radius:12px; background:#fff; color:var(--ink); }
html[data-design="clarity"] .professor-rating::after { display:none; }
html[data-design="clarity"] .professor-rating.is-unrated { background:transparent; border:1.5px dashed #C7C7CC; color:var(--muted); }
html[data-design="clarity"] .professor-rating-value { font-size:15px; font-weight:600; letter-spacing:-.01em; }
html[data-design="clarity"] .professor-rating-label { display:none; }
html[data-design="clarity"] .faculty-identity h3 { font-size:17px; font-weight:600; letter-spacing:-.015em; }
html[data-design="clarity"] .faculty-identity h3 a { color:var(--ink); }
html[data-design="clarity"] .faculty-identity p { margin-top:0; font-size:13px; color:var(--muted); }
html[data-design="clarity"] .faculty-scores { grid-column:3; grid-row:1 / span 2; flex-direction:column; align-items:flex-end; gap:0; }
html[data-design="clarity"] .faculty-scores dt { font-size:12px; }
html[data-design="clarity"] .faculty-scores dd { font-size:13px; font-weight:600; }
html[data-design="clarity"] .faculty-courses { grid-column:2; font-size:14px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0; }
html[data-design="clarity"] .faculty-card-foot { grid-column:2 / -1; font-size:13px; }
html[data-design="clarity"] .faculty-card-foot a { min-height:32px; color:var(--c-link); font-weight:500; }
html[data-design="clarity"] .directory-link { color:var(--c-link); }

/* ---------- Recent reviews & sidebar: soft tiles ---------- */
html[data-design="clarity"] .recent-section { margin-top:64px; }
html[data-design="clarity"] .recent-card { padding:24px; margin-bottom:12px; border:0; border-radius:22px; background:var(--c-fill); }
html[data-design="clarity"] .recent-professor { color:var(--ink); font-size:15px; }
html[data-design="clarity"] .discovery-sidebar { border-top:0; gap:16px; }
html[data-design="clarity"] .sidebar-card { padding:24px; border:0; border-radius:22px; background:var(--c-fill); color:var(--ink); }
html[data-design="clarity"] .sidebar-card h2 { font-size:21px; font-weight:700; letter-spacing:-.02em; }
html[data-design="clarity"] .sidebar-eyebrow { color:var(--muted); }
html[data-design="clarity"] .sidebar-link, html[data-design="clarity"] .subject-card a { color:var(--c-link); }
html[data-design="clarity"] .sidebar-review-button { border:0; border-radius:980px; background:var(--c-blue); color:#fff; padding:0 18px; min-height:40px; }

/* ---------- Professor page ---------- */
html[data-design="clarity"] .back-button { color:var(--c-link); }
html[data-design="clarity"] .profile-overview { background:transparent; border:0; border-radius:0; padding:40px 0 8px; }
html[data-design="clarity"] .profile-score strong { font-size:80px; font-weight:700; letter-spacing:-.045em; color:var(--ink); }
html[data-design="clarity"] .profile-score::after, html[data-design="clarity"] .profile-score > div::after { display:none; }
html[data-design="clarity"] .profile-identity h1 { font-size:clamp(40px,5vw,60px); font-weight:700; letter-spacing:-.035em; line-height:1.05; }
html[data-design="clarity"] .profile-identity .name-romanized { font-size:19px; color:var(--muted); }
html[data-design="clarity"] .profile-actions { border-top:0; gap:16px; }
html[data-design="clarity"] .profile-secondary { gap:12px; }
html[data-design="clarity"] .profile-secondary > div, html[data-design="clarity"] .profile-secondary > div + div { padding:16px 22px; border:0; border-radius:18px; background:var(--c-fill); }
html[data-design="clarity"] .profile-secondary dd { font-size:32px; font-weight:700; letter-spacing:-.035em; color:var(--ink); }
html[data-design="clarity"] .primary-button { border-radius:980px; background:var(--c-blue); color:#fff; font-weight:500; }
html[data-design="clarity"] .primary-button:hover { background:#0077ED; }
html[data-design="clarity"] .profile-sidebar > section { border:0; border-radius:22px; background:var(--c-fill); }
html[data-design="clarity"] .distribution-track { background:#E3E3E8; }
html[data-design="clarity"] .distribution-track span { background:var(--ink); }
html[data-design="clarity"] .reviews-section .review-entry, html[data-design="clarity"] .review-empty { border:0; border-radius:22px; background:var(--c-fill); padding:28px; }
html[data-design="clarity"] .review-score { font-weight:700; letter-spacing:-.03em; }
html[data-design="clarity"] .review-comment { font-size:16px; line-height:1.6; }

/* ---------- Dialogs & footer ---------- */
html[data-design="clarity"] .modal { border:0; border-radius:22px; box-shadow:0 24px 64px rgba(0,0,0,.25); }
html[data-design="clarity"] .modal::backdrop { background:rgba(0,0,0,.3); backdrop-filter:blur(6px); }
html[data-design="clarity"] footer { border-top:0; color:var(--muted); font-size:12px; }
html[data-design="clarity"] .footer-link { color:var(--c-link); }

@media (max-width:680px) {
  html[data-design="clarity"] .home { padding-top:56px; }
  html[data-design="clarity"] .faculty-card { grid-template-columns:44px minmax(0,1fr); }
  html[data-design="clarity"] .faculty-scores { grid-column:2; grid-row:auto; flex-direction:row; gap:4px 12px; align-items:baseline; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-design="clarity"] .site-header { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* fixes after first look */
html[data-design="clarity"] .professor-rating-value { border-bottom:0; padding-bottom:0; }
html[data-design="clarity"] .faculty-card-foot > span { display:none; }
html[data-design="clarity"] .faculty-card-foot { justify-content:flex-start; }
html[data-design="clarity"] .profile-score strong { border-bottom:0; padding-bottom:0; }

/* Headline always on one line: scales down with the window instead of wrapping */
html[data-design="clarity"] .search-intro { width:min(900px,100%); }
html[data-design="clarity"] .catalog-search-shell { max-width:680px; }
html[data-design="clarity"] .hero-wordmark { white-space:nowrap; font-size:clamp(28px,6.8vw,64px); letter-spacing:-.03em; }
html[data-design="clarity"][lang="ja"] .hero-wordmark { white-space:nowrap; font-size:clamp(20px,5.2vw,52px); letter-spacing:-.01em; }
html[data-design="clarity"] .hero-emphasis { display:inline; }
.design-switch button { white-space:nowrap; } @media (max-width:420px) { .design-switch button { padding:10px 12px; } }
/* keep the preview switcher on screen */
.design-switch { flex-wrap:wrap; justify-content:center; row-gap:3px; max-width:calc(100vw - 16px); box-sizing:border-box; }
.design-switch { flex-direction:column; align-items:stretch; gap:3px; }
.design-switch .design-group { display:flex; gap:2px; justify-content:center; }
/* the pencil icon is hidden in Clarity; drop its empty wrapper too so the label sits dead centre */
html[data-design="clarity"] #header-review > span[aria-hidden="true"] { display:none; }
/* "Profile" picker row: only on professor pages in Clarity Navy+ */
.design-switch .profile-group { display:none; gap:2px; align-items:center; justify-content:center; flex-wrap:wrap; padding-top:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
html[data-plus] body:has(.profile-page) .design-switch .profile-group { display:flex; }
.design-switch .group-label { padding:0 6px 0 4px; font-size:11px; color:#8E8E93; white-space:nowrap; }
@media (max-width:420px) { .design-switch .group-label { display:none; } }