/* Local preview only (not committed): "Clarity · Navy" — Clarity's layout with
   PearlNavi's navy / ivory / restrained-gold identity.
   Active when <html data-design="clarity" data-tone="navy">. */

html[data-design="clarity"][data-tone="navy"] {
  --n-navy:#172E50; --n-navy-2:#22406B; --n-ivory:#FAF8F3; --n-ivory-2:#F3EFE6; --n-line:#E6E0D3;
  --n-gold:#C6A15B; --n-gold-ink:#7A5A1E; --n-gold-on-navy:#EDCF8E; --n-gold-tint:#F4EAD3;
  --ink:#172E50; --muted:#5F6878; --c-link:#22406B; --c-blue:#172E50; --c-fill:#FFFFFF; --c-fill2:#EFEADF;
}
html[data-design="clarity"][data-tone="navy"] body { background:var(--n-ivory); color:#1E2A3C; }

/* ---------- Header ---------- */
html[data-design="clarity"][data-tone="navy"] .site-header { background:rgba(250,248,243,.8); box-shadow:0 1px 0 var(--n-line); }
html[data-design="clarity"][data-tone="navy"] .brand-wordmark { color:var(--n-navy); font-weight:700; }
html[data-design="clarity"][data-tone="navy"] .text-button { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] #header-review { background:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] #header-review:hover { background:var(--n-navy-2); }

/* ---------- Hero: compass mark + campus band ---------- */
html[data-design="clarity"][data-tone="navy"] .home { padding:56px 0 0; margin-bottom:0; }
html[data-design="clarity"][data-tone="navy"] .search-intro::before { content:""; width:44px; height:44px; margin-bottom:18px; background:url("navy-compass.svg") center / contain no-repeat; }
html[data-design="clarity"][data-tone="navy"] .home-eyebrow,
html[data-design="clarity"][data-tone="navy"] .home .scope-divider { color:var(--n-gold-ink); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
html[data-design="clarity"][data-tone="navy"] .hero-wordmark { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .hero-emphasis { text-decoration:underline; text-decoration-color:var(--n-gold); text-decoration-thickness:.07em; text-underline-offset:.14em; }
html[data-design="clarity"][data-tone="navy"] .home-description { color:var(--muted); font-size:19px; margin:14px 0 24px; }
html[data-design="clarity"][data-tone="navy"] .search-form { background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line), 0 6px 20px rgba(23,46,80,.07); }
html[data-design="clarity"][data-tone="navy"] .home .search-form:focus-within { outline:2px solid var(--n-gold); outline-offset:2px; }
html[data-design="clarity"][data-tone="navy"] .search-icon { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .home .search-submit { background:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .home .search-submit:hover { background:var(--n-navy-2); }
html[data-design="clarity"][data-tone="navy"] .home .search-examples { margin-top:14px; }
html[data-design="clarity"][data-tone="navy"] .home .search-examples a { color:var(--n-navy); text-decoration:underline; text-decoration-color:var(--n-gold); text-underline-offset:4px; }
html[data-design="clarity"][data-tone="navy"] .home .browse-link { margin-top:6px; color:var(--n-navy); font-weight:600; }
html[data-design="clarity"][data-tone="navy"] .home .count-label,
html[data-design="clarity"][data-tone="navy"] .count-label { background:var(--n-gold-tint); color:var(--n-gold-ink); font-weight:600; }
/* the campus band: the existing illustration, cropped to a slim strip under the search */
html[data-design="clarity"][data-tone="navy"] .search-intro::after { content:""; align-self:stretch; width:100vw; max-width:1080px; height:112px; margin:32px auto 0; position:relative; left:50%; transform:translateX(-50%); border-radius:18px; background:var(--n-navy) url("campus-illustration.png") center 78% / cover no-repeat; }
html[data-design="clarity"][data-tone="navy"] .search-intro { overflow:visible; }

/* ---------- Filters ---------- */
html[data-design="clarity"][data-tone="navy"] .discovery-filter-bar { padding-top:28px; }
html[data-design="clarity"][data-tone="navy"] .discovery-filters { background:var(--c-fill2); }
html[data-design="clarity"][data-tone="navy"] .discovery-filters button { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .discovery-filters button[aria-pressed="true"] { background:var(--n-navy); color:#FFFFFF; box-shadow:none; }
html[data-design="clarity"][data-tone="navy"] .discovery-layout { padding-top:28px; }

/* ---------- Headings ---------- */
html[data-design="clarity"][data-tone="navy"] .discovery-heading h2,
html[data-design="clarity"][data-tone="navy"] .section-heading { color:var(--n-navy); font-size:28px; }
html[data-design="clarity"][data-tone="navy"] .discovery-sort select { background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); color:var(--n-navy); }

/* ---------- Professor list: structured rows, score easy to spot ---------- */
html[data-design="clarity"][data-tone="navy"] .faculty-cards { background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); }
html[data-design="clarity"][data-tone="navy"] .faculty-card { grid-template-columns:60px minmax(0,1fr) 176px; gap:4px 20px; padding:18px 22px; }
html[data-design="clarity"][data-tone="navy"] .faculty-card + .faculty-card { box-shadow:inset 0 1px 0 var(--n-line); }
html[data-design="clarity"][data-tone="navy"] .faculty-card:hover { background:#FCFBF8; }
html[data-design="clarity"][data-tone="navy"] .professor-rating { width:60px; height:60px; min-height:60px; flex-basis:60px; gap:1px; border-radius:14px; background:var(--n-navy); color:var(--n-gold-on-navy); }
html[data-design="clarity"][data-tone="navy"] .professor-rating-value { font-size:22px; font-weight:700; letter-spacing:-.02em; }
html[data-design="clarity"][data-tone="navy"] .professor-rating-label { display:block; font-size:9px; line-height:1; color:#C9D3E3; }
html[data-design="clarity"][data-tone="navy"] .professor-rating.is-unrated { background:var(--n-ivory); border:1.5px dashed #CFC6B3; color:#8C8471; }
html[data-design="clarity"][data-tone="navy"] .professor-rating.is-unrated .professor-rating-label { color:#8C8471; }
html[data-design="clarity"][data-tone="navy"] .faculty-identity h3 { font-size:18px; }
html[data-design="clarity"][data-tone="navy"] .faculty-identity h3 a { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .faculty-identity p { color:var(--muted); }
html[data-design="clarity"][data-tone="navy"] .faculty-scores { padding-left:18px; box-shadow:inset 1px 0 0 var(--n-line); align-items:stretch; gap:6px; }
html[data-design="clarity"][data-tone="navy"] .faculty-scores > div { justify-content:space-between; }
html[data-design="clarity"][data-tone="navy"] .faculty-scores dt { color:var(--muted); }
html[data-design="clarity"][data-tone="navy"] .faculty-scores dd { color:var(--n-navy); font-variant-numeric:tabular-nums; }
html[data-design="clarity"][data-tone="navy"] .faculty-courses { color:#3E4A5C; }
html[data-design="clarity"][data-tone="navy"] .faculty-card-foot { justify-content:space-between; padding-top:4px; }
html[data-design="clarity"][data-tone="navy"] .faculty-card-foot > span { display:inline; font-size:12px; color:var(--muted); }
html[data-design="clarity"][data-tone="navy"] .faculty-card-foot a { color:var(--n-navy); font-weight:600; }
html[data-design="clarity"][data-tone="navy"] .directory-link { color:var(--n-navy); font-weight:600; }

/* ---------- Recent reviews & sidebar ---------- */
html[data-design="clarity"][data-tone="navy"] .recent-card,
html[data-design="clarity"][data-tone="navy"] .sidebar-card { background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); }
html[data-design="clarity"][data-tone="navy"] .recent-professor { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .sidebar-card h2 { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .sidebar-eyebrow { color:var(--n-gold-ink); }
html[data-design="clarity"][data-tone="navy"] .sidebar-link,
html[data-design="clarity"][data-tone="navy"] .subject-card a { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .review-invite { background:var(--n-navy); color:#E8EDF5; box-shadow:none; }
html[data-design="clarity"][data-tone="navy"] .review-invite h2 { color:#FFFFFF; }
html[data-design="clarity"][data-tone="navy"] .review-invite p { color:#C9D3E3; }
html[data-design="clarity"][data-tone="navy"] .sidebar-review-button { background:var(--n-ivory); color:var(--n-navy); font-weight:600; }

/* ---------- Professor page ---------- */
html[data-design="clarity"][data-tone="navy"] .back-button { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .profile-overview { padding-top:32px; }
html[data-design="clarity"][data-tone="navy"] .score-label { color:var(--n-gold-ink); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:12px; }
html[data-design="clarity"][data-tone="navy"] .profile-score strong { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .profile-score strong { box-shadow:inset 0 -.12em 0 var(--n-gold-tint); }
html[data-design="clarity"][data-tone="navy"] .profile-identity h1 { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .profile-school { color:var(--n-gold-ink); font-weight:600; }
html[data-design="clarity"][data-tone="navy"] .official-link,
html[data-design="clarity"][data-tone="navy"] .score-count { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .profile-secondary > div,
html[data-design="clarity"][data-tone="navy"] .profile-secondary > div + div { background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); }
html[data-design="clarity"][data-tone="navy"] .profile-secondary dd { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .primary-button { background:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .primary-button:hover { background:var(--n-navy-2); }
html[data-design="clarity"][data-tone="navy"] .profile-sidebar > section { background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); }
html[data-design="clarity"][data-tone="navy"] .panel-heading h2,
html[data-design="clarity"][data-tone="navy"] h2.panel-heading { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .distribution-track { background:var(--n-ivory-2); }
html[data-design="clarity"][data-tone="navy"] .distribution-track span { background:var(--n-gold); }
html[data-design="clarity"][data-tone="navy"] .reviews-section .review-entry,
html[data-design="clarity"][data-tone="navy"] .review-empty { background:#FFFFFF; box-shadow:0 0 0 1px var(--n-line); }
html[data-design="clarity"][data-tone="navy"] .review-score { color:var(--n-navy); }
html[data-design="clarity"][data-tone="navy"] .review-course { color:var(--n-navy); }

/* ---------- Dialogs & footer ---------- */
html[data-design="clarity"][data-tone="navy"] .modal { background:var(--n-ivory); }
html[data-design="clarity"][data-tone="navy"] footer { box-shadow:inset 0 1px 0 var(--n-line); }
html[data-design="clarity"][data-tone="navy"] .footer-link { color:var(--n-navy); }

@media (max-width:680px) {
  html[data-design="clarity"][data-tone="navy"] .home { padding-top:36px; }
  html[data-design="clarity"][data-tone="navy"] .search-intro::after { width:auto; left:0; transform:none; height:88px; margin-top:24px; border-radius:14px; }
  html[data-design="clarity"][data-tone="navy"] .faculty-card { grid-template-columns:52px minmax(0,1fr); padding:16px; gap:4px 14px; }
  html[data-design="clarity"][data-tone="navy"] .professor-rating { width:52px; height:52px; min-height:52px; flex-basis:52px; }
  html[data-design="clarity"][data-tone="navy"] .professor-rating-value { font-size:19px; }
  html[data-design="clarity"][data-tone="navy"] .faculty-scores { padding-left:0; box-shadow:none; }
}

/* fix: band must not exceed the viewport (100vw includes the scrollbar) */
html[data-design="clarity"][data-tone="navy"] .search-intro::after { width:min(1080px, calc(100vw - 64px)); }
@media (max-width:680px) { html[data-design="clarity"][data-tone="navy"] .search-intro::after { width:auto; } }
@media (max-width:680px) { html[data-design="clarity"][data-tone="navy"] .search-intro::after { width:100%; margin:24px 0 0; } }

/* ---- Round 2: simplify ---- */
/* no "Overall / 10" label in the score tiles */
html[data-design="clarity"][data-tone="navy"] .professor-rating-label,
html[data-design="clarity"][data-tone="navy"] .professor-rating.is-unrated .professor-rating-label { display:none; }
html[data-design="clarity"][data-tone="navy"] .professor-rating { width:52px; height:52px; min-height:52px; flex-basis:52px; border-radius:12px; }
html[data-design="clarity"][data-tone="navy"] .professor-rating-value { font-size:20px; }
/* no campus band */
html[data-design="clarity"][data-tone="navy"] .search-intro::after { content:none; display:none; }
/* plain headline, no underline */
html[data-design="clarity"][data-tone="navy"] .hero-emphasis { text-decoration:none; }
/* spacing */
html[data-design="clarity"][data-tone="navy"] .home { padding:64px 0 8px; }
html[data-design="clarity"][data-tone="navy"] .search-intro::before { margin-bottom:16px; }
html[data-design="clarity"][data-tone="navy"] .home-eyebrow { margin-bottom:10px; }
html[data-design="clarity"][data-tone="navy"] .home-description { margin:12px 0 28px; }
html[data-design="clarity"][data-tone="navy"] .home .search-examples { margin-top:16px; }
html[data-design="clarity"][data-tone="navy"] .home .browse-link { margin-top:4px; }
html[data-design="clarity"][data-tone="navy"] .discovery-filter-bar { padding-top:32px; }
html[data-design="clarity"][data-tone="navy"] .discovery-layout { padding-top:32px; }
html[data-design="clarity"][data-tone="navy"] .discovery-heading { margin-bottom:16px; }
html[data-design="clarity"][data-tone="navy"] .faculty-card { grid-template-columns:52px minmax(0,1fr) 176px; gap:2px 20px; padding:18px 24px; align-items:start; }
html[data-design="clarity"][data-tone="navy"] .professor-rating { align-self:start; margin-top:2px; }
html[data-design="clarity"][data-tone="navy"] .faculty-courses { margin-top:4px; }
html[data-design="clarity"][data-tone="navy"] .faculty-card-foot { padding-top:6px; }
html[data-design="clarity"][data-tone="navy"] .faculty-card-foot a { min-height:28px; }
@media (max-width:680px) {
  html[data-design="clarity"][data-tone="navy"] .home { padding-top:40px; }
  html[data-design="clarity"][data-tone="navy"] .discovery-filter-bar { padding-top:24px; }
  html[data-design="clarity"][data-tone="navy"] .faculty-card { grid-template-columns:48px minmax(0,1fr); padding:16px; gap:2px 14px; }
  html[data-design="clarity"][data-tone="navy"] .professor-rating { width:48px; height:48px; min-height:48px; flex-basis:48px; }
  html[data-design="clarity"][data-tone="navy"] .professor-rating-value { font-size:18px; }
}