/* Harper component polish · 2026-10-03
   Scope: web components only (buttons, inputs, chips, rows, cards, dividers, focus). No layout, no bands, no new
   composition. Palette: University of Chicago identity colors used as pastel washes, with maroon shades carrying
   all actions and emphasis. One gothic device, used quietly: a double hairline with a small quatrefoil at the
   center of major dividers. Everything here can be removed by deleting one <link>. */

:root{
  /* Maroon shades (identity, actions, emphasis) */
  --m-900:#4B1020;--m-800:#641C2D;--m-700:#800000;--m-500:#A4343A;--m-300:#B46A55;--m-100:#F4E8E9;--m-50:#FAF4F4;
  /* UChicago greystones */
  --g-700:#737373;--meta:#5C544E;--g-500:#A6A6A6;--g-300:#D9D9D9;--g-100:#F2F1EE;
  /* UChicago accents as pastels (≈15–18% over white) with their dark variants for text */
  --lake-wash:#D6E9EE;--lake-ink:#002A3A;--lake-line:#9CC7D3;
  --ivy-wash:#E7EDDE;--ivy-ink:#284734;--ivy-line:#B9CDA0;
  --violet-wash:#E8E2E9;--violet-ink:#41273B;--violet-line:#BFAEC3;
  --gold-wash:#FBF0D1;--gold-ink:#5C4300;--gold-line:#E9D28A;
  --terra-wash:#FAEAD6;--terra-ink:#A9431E;--terra-line:#EFC39B;
  --brick-wash:#F3E3E4;--brick-ink:#643335;--brick-line:#D9AEB0;
  --p-ink:#302B29;--ring:0 0 0 2px #fff,0 0 0 4px var(--m-700);
  --quatrefoil:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='%23800000' stroke-width='1.1'><circle cx='8' cy='3.6' r='2.6'/><circle cx='8' cy='12.4' r='2.6'/><circle cx='3.6' cy='8' r='2.6'/><circle cx='12.4' cy='8' r='2.6'/></g></svg>");
}

/* ── 1. One button family. Primary = maroon; secondary = white with a warm hairline; both 44px, 4px radius. */
main :is(.primary,button.primary,.action.primary,.commons-search button,.board-views button[aria-pressed=true],.school-primary){
  background:var(--m-700);color:#fff;border:1px solid var(--m-700);border-radius:4px;font-weight:600}
main :is(.primary,button.primary,.action.primary,.commons-search button,.school-primary):hover{background:var(--m-800);border-color:var(--m-800);color:#fff}
main :is(.primary,button.primary,.action.primary,.commons-search button):active{background:var(--m-900);border-color:var(--m-900)}
main :is(.action,.button,.board-button,.plain-button,.directory-button,.board-views button,.major-link,.harper-save,.map-pager button,.course-pagination button,.text-button,.calendar-link):where(:not(.primary)):where(:not([aria-pressed=true])){
  background:#fff;color:var(--m-700);border:1px solid var(--g-300);border-radius:4px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
main :is(.action,.button,.board-button,.plain-button,.directory-button,.board-views button,.major-link,.harper-save,.map-pager button,.course-pagination button,.calendar-link):where(:not(.primary)):where(:not([aria-pressed=true])):hover{
  background:var(--m-50);border-color:var(--m-500);color:var(--m-800)}
main :is(.action,.button,.board-button,.plain-button,.directory-button,.major-link,.minor-link,.school-primary,.primary,.harper-save){min-height:44px}
main :is(button,.action,.button):disabled{opacity:.55;cursor:not-allowed}
main .minor-link{color:var(--m-700);border-color:var(--g-300);border-radius:4px}
main .minor-link:hover{border-color:var(--m-500);background:var(--m-50)}
/* Focus: a quiet double ring that reads on white, pastel and maroon alike. */
main :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--m-700);outline-offset:3px}
@media(forced-colors:active){main :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid CanvasText}}

/* ── 2. One input family. */
main :is(input[type=search],input[type=text],input[type=email],input[type=url],input[type=date],input[type=datetime-local],input:not([type]),select,textarea){
  border:1px solid var(--g-500);border-radius:4px;background-color:#fff;color:var(--p-ink);transition:border-color .15s,box-shadow .15s}
main :is(input,select,textarea)::placeholder{color:var(--g-700)}
main :is(input[type=search],input[type=text],input[type=email],input[type=url],input[type=date],input[type=datetime-local],input:not([type]),select,textarea):hover{border-color:var(--g-700)}
main :is(input[type=search],input[type=text],input[type=email],input[type=url],input[type=date],input[type=datetime-local],input:not([type]),select,textarea):focus-visible{border-color:var(--m-700);outline:2px solid var(--m-700);outline-offset:2px}
main input[type=checkbox],main input[type=radio]{accent-color:var(--m-700)}

/* ── 3. Area chips and washes, mapped the same way everywhere:
      academics = lake · careers = violet · community = ivy · opportunities = goldenrod · social = terracotta. */
.board-row[data-area=academic]{--board-accent:var(--lake-ink);--board-wash:var(--lake-wash);--board-line:var(--lake-line)}
.board-row[data-area=community]{--board-accent:var(--ivy-ink);--board-wash:var(--ivy-wash);--board-line:var(--ivy-line)}
.board-row[data-area=opportunity]{--board-accent:var(--gold-ink);--board-wash:var(--gold-wash);--board-line:var(--gold-line)}
.board-row[data-area=social]{--board-accent:var(--terra-ink);--board-wash:var(--terra-wash);--board-line:var(--terra-line)}
.board-row{border-left-width:3px;border-top-color:var(--g-300);transition:background .15s}
.board-row:hover{background:var(--board-wash)}
.board-category{background:var(--board-wash);color:var(--board-accent);border:1px solid var(--board-line);border-radius:3px;font-weight:650;letter-spacing:.02em;padding:4px 9px}
.board-date{color:var(--m-700)}
.board-date span{color:var(--meta)}
.board-content h3{color:var(--p-ink)}
.board-facts dt{color:var(--board-accent)}
.board-deadline{background:var(--m-100);color:var(--m-900);border-left:3px solid var(--m-700);border-radius:0 4px 4px 0}
@media(min-width:900px){.board-row{grid-template-columns:64px minmax(0,1fr) 184px}}
.board-actions .board-button{max-width:184px}
.board-source{color:var(--m-700);font-weight:600}
.board-empty{background:var(--m-50);border-left:3px solid var(--m-700);border-radius:0 4px 4px 0}
/* Home destination panels: same three panels, UChicago pastels, maroon headings. */
.home-hub .destination.events{--accent:var(--ivy-ink);--wash:var(--ivy-wash)}
.home-hub .destination.academics{--accent:var(--lake-ink);--wash:var(--lake-wash)}
.home-hub .destination.career{--accent:var(--violet-ink);--wash:var(--violet-wash)}
.home-hub .destination{border-top:3px solid var(--accent);border-radius:0 0 4px 4px}
.home-hub .destination h2{color:var(--m-800)}
.home-hub .destination .eyebrow,.home-hub .destination .card-symbol{color:var(--accent)}
.home-hub .destination .major-link{color:var(--m-700);border-color:var(--accent)}
.home-hub .destination .major-link:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.home-hub .destination .minor-link{color:var(--m-700);background:#fff;border-color:transparent}
.home-hub .destination .minor-link:hover{border-color:var(--accent)}
.home-hub .destination:hover{box-shadow:0 6px 18px rgba(48,43,41,.10)}
/* Journey: violet pastel for preparation, maroon for the active stage. */
.home-hub .journey{background:var(--g-100);border-color:var(--g-300)}
.journey-steps button{border-bottom-color:var(--g-300)}
.journey-steps button span{color:var(--m-500)}
.journey-steps button[aria-pressed=true]{border-radius:4px 4px 0 0}
.journey-detail{border-left-color:var(--m-700)}
.journey-detail h3{color:var(--m-800)}
.journey-heading p{color:var(--violet-ink)}

/* ── 4. The one gothic device: a double hairline with a quatrefoil at the center of major dividers. */
.commons-board{position:relative}
.commons-board{border-top:1px solid var(--m-700)}
.commons-board::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid var(--m-700);opacity:.45}
/* Bulletin heading has its own boundary; no floating decorative badge. */
.commons-board::after{content:none}
.directory{border-top:1px solid var(--m-700)}
.board-footer{border-top-color:var(--g-300)}

/* ── 5. My Harper components. */
.personal-hero{border-bottom-color:var(--g-300)}
.personal-hero h1{color:var(--m-900)}
#guest.notice,#guest{background:var(--m-50);border-left:3px solid var(--m-700);border-radius:0 4px 4px 0}
.workspace-nav a{border-left:3px solid transparent;border-radius:0 4px 4px 0;transition:background .15s}
.workspace-nav a:is([href="#classes"],[href="#degree"],[href="#calendar"]){border-left-color:var(--lake-ink)}
.workspace-nav a[href="#next"]{border-left-color:var(--gold-ink)}
.workspace-nav a:is([href="#saved"],[href="#clubs"]){border-left-color:var(--ivy-ink)}
.workspace-nav a:is([href="#connections"],[href="#vision"]){border-left-color:var(--violet-ink)}
.workspace-nav a:hover{background:var(--g-100)}
.workspace-nav a:is([href="#classes"],[href="#degree"],[href="#calendar"]):hover{background:var(--lake-wash)}
.workspace-nav a[href="#next"]:hover{background:var(--gold-wash)}
.workspace-nav a:is([href="#saved"],[href="#clubs"]):hover{background:var(--ivy-wash)}
.workspace-nav a:is([href="#connections"],[href="#vision"]):hover{background:var(--violet-wash)}
.workspace-nav a[aria-current=page],.workspace-nav a[aria-current=page]:hover{background:var(--m-100);border-left-color:var(--m-700);color:var(--m-900)}
.workspace-nav .nav-group-label{color:var(--m-800)}
.workspace-content>section{border-top-color:var(--g-300)}
.workspace-content>section>h2{color:var(--m-900);border-bottom-color:var(--g-300)}
.workspace-arrival-links{border-color:var(--g-300);background:#fff}
.workspace-arrival-links a{color:var(--m-900);border-right-color:var(--g-300)}
.workspace-arrival-links a:hover{background:var(--m-50)}
.library-categories a{border-radius:4px;border-bottom:0;border-left:3px solid var(--lake-ink);background:var(--lake-wash);color:var(--lake-ink);font-weight:600}
.library-categories a:nth-child(2){background:var(--ivy-wash);color:var(--ivy-ink);border-left-color:var(--ivy-ink)}
.library-categories a:nth-child(3){background:var(--violet-wash);color:var(--violet-ink);border-left-color:var(--violet-ink)}
.library-categories a:nth-child(4){background:var(--m-100);color:var(--m-900);border-left-color:var(--m-700)}
#saved .item[data-kind=course]{--item-color:var(--lake-ink);--item-wash:var(--lake-wash)}
#saved .item[data-kind=club]{--item-color:var(--ivy-ink);--item-wash:var(--ivy-wash)}
#saved .item[data-kind=event]{--item-color:var(--ivy-ink);--item-wash:var(--ivy-wash)}
#saved .item[data-kind=reflection]{--item-color:var(--violet-ink);--item-wash:var(--violet-wash)}
#saved .item[data-kind=resource]{--item-color:var(--g-700);--item-wash:var(--g-100)}
#saved .item{border-color:var(--g-300);border-radius:4px}
#saved .item h3{color:var(--m-900)}
.my-next{background:var(--gold-wash);border-top:3px solid var(--gold-ink);border-radius:0 0 4px 4px}
.my-next .eyebrow{color:var(--gold-ink)}
.next-row{border-top-color:var(--gold-line)}
.values-node[aria-pressed=true]{background:var(--m-900);border-color:var(--m-900)}
.values-hub{background:var(--m-100)}
.degree-track span{background:var(--m-700)}
.degree-track span.planned{background:var(--m-300)}

/* ── 6. Course viewer components: weights decide the hierarchy, nothing moves.
      One solid control per region (the pressed area chip, the pressed course); everything else outlined or pastel. */
.school-paths a{border-radius:4px;border-bottom-width:2px}
.school-paths a:first-child{background:var(--m-100);border-color:var(--m-700);color:var(--m-900)}
.school-paths a:nth-child(2){background:var(--violet-wash);border-color:var(--violet-ink);color:var(--violet-ink)}
.school-paths a:nth-child(3){background:var(--lake-wash);border-color:var(--lake-ink);color:var(--lake-ink)}
.school-paths a:nth-child(4){background:#fff;border-color:var(--g-300);color:var(--m-700)}
.area-button{background:var(--lake-wash);color:var(--lake-ink);border:1px solid var(--lake-line);border-radius:4px;font-weight:600;min-height:40px}
.area-button:hover{border-color:var(--lake-ink);background:#fff}
.area-button[aria-pressed=true]{color:var(--m-900);border-color:var(--m-700);font-weight:700;box-shadow:inset 0 0 0 2px var(--m-700)}
.area-button[aria-pressed=true] span{opacity:1}
.map-plane{background:#fff;border-color:var(--g-300);border-radius:4px}
.map-pager{border-top-color:var(--g-300);background:var(--g-100)}
svg#map .node:hover rect,svg#map .node:focus rect{stroke:var(--m-700)}
.legend{color:var(--meta)}
.detail{background:var(--m-50);border-radius:0 0 4px 4px}
.detail .course-code{color:var(--m-700);font-weight:700}
.detail h3{color:var(--m-900)}
.detail .detail-label{color:var(--m-800)}
.detail .course-description{background:#fff;border-left:3px solid var(--m-500)}
.detail .official{color:var(--m-700)}
.recorded-section{border-radius:4px}
.course-list li{border-bottom-color:var(--g-300)}
.course-button{border-radius:4px}
.course-button:hover{background:var(--m-50)}
.course-button[aria-pressed=true]{background:var(--m-100);box-shadow:inset 3px 0 var(--m-700)}
.list-code{color:var(--m-700)}
.list-meta{color:var(--meta)}
.directory-head p{color:var(--meta)}
#course-directory-view .empty{background:var(--m-50);border-left:3px solid var(--m-700);border-radius:0 4px 4px 0}
.school-path{border-radius:4px}
.school-path.law{background:var(--violet-wash);border-top-color:var(--violet-ink)}
.school-path.policy{background:var(--lake-wash);border-top-color:var(--lake-ink)}
.school-path.law .school-primary{background:var(--violet-ink);border-color:var(--violet-ink)}
.school-path.policy .school-primary{background:var(--lake-ink);border-color:var(--lake-ink)}
.catalog-overview{background:var(--g-100);border-radius:4px}
#network-dialog{border-radius:6px;border-color:var(--g-300)}
.network-node.selected circle{stroke:var(--m-700)}
.network-edge.highlight{stroke:var(--m-700)}

/* Codex's slate workbook toolbar keeps its own values. */
main .academic-view-tools select,main .academic-view-tools button{border-color:#9aadb9;background-color:#fffdf9;border-radius:3px}
main .academic-view-tools button:hover{background-color:#d8e3e9}

/* ── 7. Clubs, calendar, recruiting: shared components only. */
.club-browse-toolbar :is(select,input){border-color:var(--g-500)}
details.club-filters>summary,.explainer>summary,.catalog-overview>summary,.harper-page-help summary{color:var(--m-700);font-weight:600}
.section-nav button:hover{background:var(--m-50);color:var(--m-800)}
.section-nav button[aria-selected=true]{color:var(--m-800)}
.date-ribbon{border-radius:4px}
.harper-hero-secs a{background:#fff;border:1px solid var(--g-300);border-radius:4px;padding:6px 10px;min-height:36px;display:inline-flex;align-items:center;text-decoration:none}
.harper-hero-secs a:hover{border-color:var(--m-500);background:var(--m-50)}

/* ── 9. Affordance grammar: one visual signature per behavior, so a label tells you what it does before you read it.
      choose one of N = select (soft grey fill, chevron, label above) · act here = button (white, hairline, maroon text)
      go somewhere = link (maroon; as a button it keeps its → or ↗) · expand here = summary (ink text, maroon +/− badge)
      open a menu = ribbon label with ▾ · switch views = one joined segmented control. */
main select:is([id],:not([id])){background-color:#F4F3EF;border-color:#CFCFC9;color:var(--p-ink);font-weight:600}
main select:is([id],:not([id])):hover{background-color:#fff;border-color:var(--m-500)}
main .academic-view-tools select:is([id],:not([id])){background-color:#fffdf9;border-color:#9aadb9}
main label:has(>select),main label:has(>input[type=search]){color:var(--meta);font-weight:650}
main details:not(.harper-page-help):not(.workspace-navigation)>summary{list-style:none;display:flex;align-items:center;gap:10px;color:var(--p-ink);font-weight:600;cursor:pointer;min-height:44px;padding:8px 0;text-decoration:none}
main details:not(.harper-page-help):not(.workspace-navigation)>summary::-webkit-details-marker{display:none}
main details:not(.harper-page-help):not(.workspace-navigation)>summary::before{content:"+";flex:0 0 auto;box-sizing:border-box;width:20px;height:20px;border:1.5px solid var(--m-700);border-radius:50%;color:var(--m-700);background:#fff;font:700 14px/17px system-ui;text-align:center}
main details[open]:not(.harper-page-help):not(.workspace-navigation)>summary::before{content:"−";background:var(--m-700);color:#fff}
main details:not(.harper-page-help):not(.workspace-navigation)>summary:hover{color:var(--m-800)}
main details:not(.harper-page-help):not(.workspace-navigation)>summary:hover::before{background:var(--m-100)}
main details[open]:not(.harper-page-help):not(.workspace-navigation)>summary:hover::before{background:var(--m-800)}
.harper-ribbon .harper-menu>a{display:flex;align-items:center;gap:4px}
.harper-ribbon .harper-menu>a::before{content:"▾";order:2;font-size:10px;opacity:.7;line-height:1}
@media(min-width:601px){
  .board-views{gap:0;border:1px solid var(--g-300);border-radius:4px;width:max-content;max-width:100%;overflow:hidden;background:#fff}
  .board-views button{border:0;border-right:1px solid var(--g-300);border-radius:0}
  .board-views button:last-child{border-right:0}
  .board-views button[aria-pressed=true]{box-shadow:none}
}

/* ── 8. Motion and print. */
@media(prefers-reduced-motion:reduce){main *{transition:none!important}}
@media print{.commons-board::after{display:none}}