/* Atlas: the site's design language, for every page outside the schedule
 * review's app. One stylesheet, served at /assets/atlas.css, that a page opts
 * into with <body class="atlas"> and the a- classes below. The colours are
 * the theme's tokens (theme.yaml, written into each page's own <style> by
 * scripts/theme.py); the fallbacks only keep a page legible without them.
 *
 * The vocabulary, outermost first (the style guide at /internal/design/
 * shows each one):
 *   a-page / a-wrap / a-read      the page and its widths
 *   a-crumbs                      where the page sits: University > School > Program
 *   a-head, a-eyebrow, a-lede,    the page's header: what kind of page, its name,
 *     a-actions, a-facts          one paragraph, what to do next, its key facts
 *   a-section, a-section-head,    a band of the page, with a heading and a note
 *     a-note
 *   a-grid, a-card                cards in a responsive grid; a-card.a-link is
 *                                 a card that is a link
 *   a-stats, a-stat               big numbers, as the schedule review shows them
 *   a-table                       a data table
 *   a-pill, a-chips               small labels; a row of them
 *   a-btn                         buttons and button-links (a-primary, a-small)
 *   a-tabs                        a page's own contents, as tabs
 *   a-callout                     an aside (a-info, a-warn)
 *   a-split                       main column and an aside
 *   rq, rq-list                   a requirement card and its courses (a guide's "The degree")
 *   a-person, a-avatar            a person in a card: initials, name, role
 *   a-foot                        the page's foot
 * The site's own navigation bar is added to every page by the middleware
 * (functions/_middleware.js), with its own styles; pages do not write it. */

body.atlas{
  margin:0; background:var(--bg, #f3f1ec); color:var(--text, #201e1a);
  font:400 15px/1.6 var(--font-ui, system-ui, sans-serif);
  -webkit-font-smoothing:antialiased;
}
body.atlas *{box-sizing:border-box}
body.atlas a{color:var(--accent, #0f6f6a)}
body.atlas h1, body.atlas h2, body.atlas h3{font-family:var(--font-display, system-ui, sans-serif); letter-spacing:-.015em; color:var(--text, #201e1a)}

/* ---- the page and its widths ---- */
.a-page{padding:28px 20px 72px}
.a-wrap{max-width:1120px; margin:0 auto}
.a-read{max-width:46rem}

/* ---- where the page sits ---- */
.a-crumbs{display:flex; flex-wrap:wrap; gap:.15rem .45rem; align-items:center; margin:0 0 14px; padding:0; list-style:none;
  font:600 .72rem/1.4 var(--font-ui, system-ui, sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--muted, #6b665c)}
.a-crumbs li{display:flex; align-items:center; gap:.45rem}
.a-crumbs li + li::before{content:"/"; opacity:.5}
.a-crumbs a{color:inherit; text-decoration:none}
.a-crumbs a:hover{color:var(--accent, #0f6f6a)}
.a-crumbs [aria-current]{color:var(--text, #201e1a)}

/* ---- the page's header ---- */
.a-head{margin:0 0 28px}
.a-eyebrow{margin:0 0 8px; font:600 .72rem/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.12em; text-transform:uppercase; color:var(--accent, #0f6f6a)}
.a-head h1{margin:0 0 12px; font-weight:700; font-size:clamp(1.8rem, 4vw, 2.6rem); line-height:1.12}
.a-lede{margin:0; max-width:46rem; font-size:1.08rem; line-height:1.6; color:var(--muted, #6b665c)}
.a-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:18px}
.a-facts{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:18px; padding:0; list-style:none}
.a-facts li{display:flex; flex-direction:column; gap:.15rem; padding:.55rem .8rem; border:1px solid var(--border, #ddd7ca); border-radius:10px; background:var(--surface, #fff); min-width:7.5rem}
.a-facts b{font:700 1.05rem/1.2 var(--font-display, system-ui, sans-serif)}
.a-facts span{font-size:.75rem; color:var(--muted, #6b665c)}

/* ---- bands of the page ---- */
.a-section{margin:0 0 36px}
.a-section-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1rem; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--border, #ddd7ca)}
.a-section-head h2, .a-section > h2{margin:0; font-size:1.25rem; font-weight:700}
.a-section > h2{margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--border, #ddd7ca)}
.a-section-head a{font-size:.85rem}
.a-note{margin:0 0 14px; max-width:46rem; font-size:.92rem; color:var(--muted, #6b665c)}
.a-section p{max-width:46rem}

/* ---- cards ---- */
.a-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr))}
.a-grid.a-wide{grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr))}
.a-card{display:flex; flex-direction:column; gap:.5rem; padding:18px 20px; background:var(--surface, #fff); border:1px solid var(--border, #ddd7ca);
  border-radius:12px; box-shadow:var(--shadow, 0 1px 2px rgba(0,0,0,.05)); color:inherit}
.a-card h3{margin:0; font-size:1.05rem; font-weight:700; line-height:1.3}
.a-card h3 a{color:inherit; text-decoration:none}
.a-card p{margin:0; font-size:.92rem; color:var(--muted, #6b665c)}
.a-card .a-card-foot{margin-top:auto; padding-top:.4rem; display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.85rem}
.a-card .a-kicker{font:600 .68rem/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.11em; text-transform:uppercase; color:var(--muted, #6b665c)}
.a-card.a-link{text-decoration:none; transition:border-color .15s, transform .15s}
.a-card.a-link:hover{border-color:var(--accent, #0f6f6a); transform:translateY(-1px)}
.a-card.a-tone{border-top:3px solid var(--tone, var(--accent, #0f6f6a))}
.a-card ul{margin:0; padding-left:1.1rem; font-size:.92rem}

/* ---- big numbers ---- */
.a-stats{display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin:0 0 28px}
.a-stat{padding:14px 16px; background:var(--surface, #fff); border:1px solid var(--border, #ddd7ca); border-radius:12px}
.a-stat b{display:block; font:700 1.6rem/1.1 var(--font-display, system-ui, sans-serif)}
.a-stat span{font-size:.8rem; color:var(--muted, #6b665c)}

/* ---- tables ---- */
.a-table-wrap{overflow-x:auto; border:1px solid var(--border, #ddd7ca); border-radius:12px; background:var(--surface, #fff)}
.a-table{width:100%; border-collapse:collapse; font-size:.9rem}
.a-table th, .a-table td{text-align:left; padding:.6rem .85rem; border-bottom:1px solid var(--border, #ddd7ca); vertical-align:top}
.a-table thead th{font:600 .7rem/1.2 var(--font-ui, system-ui, sans-serif); letter-spacing:.08em; text-transform:uppercase; color:var(--muted, #6b665c); background:var(--surface-2, #faf9f6)}
.a-table tr:last-child td{border-bottom:0}
.a-table .a-num{text-align:right; font-variant-numeric:tabular-nums}

/* ---- labels ---- */
.a-chips{display:flex; flex-wrap:wrap; gap:.35rem; margin:0; padding:0; list-style:none}
.a-pill{display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem; border-radius:999px; border:1px solid var(--border, #ddd7ca);
  background:var(--surface-2, #faf9f6); font:600 .76rem/1.3 var(--font-ui, system-ui, sans-serif); color:var(--text, #201e1a); text-decoration:none; white-space:nowrap}
a.a-pill:hover{border-color:var(--accent, #0f6f6a); color:var(--accent, #0f6f6a)}
.a-pill.a-accent{background:var(--accent-soft, #e3f1ef); border-color:transparent; color:var(--accent, #0f6f6a)}
.a-pill .a-dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--tone, var(--accent, #0f6f6a))}

/* ---- buttons ---- */
.a-btn{display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; border-radius:9px; border:1px solid var(--border, #ddd7ca);
  background:var(--surface, #fff); color:var(--text, #201e1a) !important; font:600 .88rem/1.2 var(--font-ui, system-ui, sans-serif); text-decoration:none; cursor:pointer}
.a-btn:hover{border-color:var(--accent, #0f6f6a)}
.a-btn.a-primary{background:var(--accent, #0f6f6a); border-color:var(--accent, #0f6f6a); color:var(--accent-ink, #fff) !important}
.a-btn.a-primary:hover{filter:brightness(1.07)}
.a-btn.a-small{padding:.35rem .7rem; font-size:.8rem}

/* ---- a page's own contents ---- */
.a-tabs{display:flex; flex-wrap:wrap; gap:.25rem; margin:0 0 28px; padding:4px; border:1px solid var(--border, #ddd7ca); border-radius:11px; background:var(--surface, #fff); width:max-content; max-width:100%}
.a-tabs a{padding:.4rem .8rem; border-radius:8px; font:600 .85rem/1.2 var(--font-ui, system-ui, sans-serif); color:var(--muted, #6b665c); text-decoration:none}
.a-tabs a:hover, .a-tabs a[aria-current]{background:var(--accent-soft, #e3f1ef); color:var(--accent, #0f6f6a)}

/* ---- asides ---- */
.a-callout{padding:14px 18px; border-radius:12px; border:1px solid var(--border, #ddd7ca); background:var(--surface-2, #faf9f6); font-size:.92rem}
.a-callout.a-info{background:var(--accent-soft, #e3f1ef); border-color:transparent}
.a-callout.a-warn{background:var(--brass-soft, #f6ecd7); border-color:transparent}
.a-callout h2, .a-callout h3{margin:0 0 .3rem; font-size:1.05rem}
.a-callout p{margin:.2rem 0}

/* ---- main column and an aside ---- */
.a-split{display:grid; gap:28px; grid-template-columns:minmax(0, 1fr) 300px; align-items:start}
.a-split > aside{position:sticky; top:72px; display:flex; flex-direction:column; gap:14px}
@media (max-width: 900px){ .a-split{grid-template-columns:minmax(0, 1fr)} .a-split > aside{position:static} }

/* ---- what a degree asks for: a requirement card's courses ---- */
.rq-list{list-style:none; margin:.2rem 0 0; padding:0; font-size:.9rem}
.rq-list li{display:grid; grid-template-columns:5.6rem minmax(0, 1fr) auto; gap:.6rem; padding:.42rem 0; border-top:1px solid var(--border, #ddd7ca)}
.rq-list li:first-child{border-top:0}
.rq-code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8rem; color:var(--muted, #6b665c); padding-top:.1rem}
.rq-cr{color:var(--muted, #6b665c); font-variant-numeric:tabular-nums}
.a-card h4{margin:.5rem 0 0; font:600 .85rem/1.3 var(--font-ui, system-ui, sans-serif)}

/* ---- a band that opens: a details element as a card ---- */
body.atlas details.pathway-details{margin:0 0 10px; border:1px solid var(--border, #ddd7ca); border-radius:12px; background:var(--surface, #fff); overflow:hidden}
body.atlas details.pathway-details > summary{display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; list-style:none}
body.atlas details.pathway-details > summary::-webkit-details-marker{display:none}
body.atlas details.pathway-details > summary::before{content:"\25B8"; color:var(--muted, #6b665c); transition:transform .15s}
body.atlas details.pathway-details[open] > summary::before{transform:rotate(90deg)}
body.atlas details.pathway-details .pathway-summary-main{flex:1; min-width:0}
body.atlas details.pathway-details[open] > summary{border-bottom:1px solid var(--border, #ddd7ca)}
body.atlas details.pathway-details .pathway-body{padding:14px 18px}
body.atlas details.pathway-details h2{font-size:1.05rem; margin:0}

/* ---- a guide's side column ---- */
.a-split > aside .a-card h2{margin:0; font-size:1rem; font-weight:700}
.a-split > aside .a-card p{font-size:.9rem}
.a-person{display:flex; gap:.75rem; align-items:center}
.a-avatar{width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft, #e3f1ef); color:var(--accent, #0f6f6a); font:700 .9rem/1 var(--font-display, system-ui, sans-serif)}
img.a-avatar{object-fit:cover; border:1px solid var(--border, #ddd7ca)}
.a-person b{display:block; font-size:.95rem}
.a-person span{font-size:.8rem; color:var(--muted, #6b665c)}

/* ---- the foot ---- */
.a-foot{margin-top:48px; padding-top:18px; border-top:1px solid var(--border, #ddd7ca); font-size:.82rem; color:var(--muted, #6b665c); display:flex; flex-wrap:wrap; gap:.4rem 1.2rem}
.a-foot a{color:inherit}

@media print{ .a-actions, .a-tabs{display:none} body.atlas{background:#fff} }

/* People cards - the guides' generated "Meet your instructors" block
   (scripts/render_instructors.py): one card a person, a ring for full-time
   faculty, the courses they teach this term as chips. Scoped to that block:
   its class names are generic, and unscoped they took over other pages' own -
   the programs page's <table class="grid"> became a CSS grid. */
body.atlas .pathway-body .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px}
body.atlas .pathway-body .card{background:var(--surface, #fff); border:1px solid var(--border, #ddd7ca); border-radius:12px; padding:18px; margin:0; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px}
body.atlas .pathway-body .card-top{display:flex; gap:14px; align-items:center}
body.atlas .pathway-body .av-frame{position:relative; display:inline-block; flex:none; line-height:0}
body.atlas .pathway-body .avatar{width:64px; height:64px; border-radius:50%; flex:none; object-fit:cover; border:1px solid var(--border, #ddd7ca); background-color:var(--surface-2, #f4f1ea)}
body.atlas .pathway-body .avatar-initials, body.atlas .pathway-body .avatar.initials{display:flex; align-items:center; justify-content:center; line-height:1; font:600 20px/1 var(--font-display, serif); color:var(--accent); background-color:var(--accent-soft)}
body.atlas .pathway-body .avatar.has-photo{display:block; background-size:cover; background-position:center}
body.atlas .pathway-body .ft-ring{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
body.atlas .pathway-body .ft-band{fill:none; stroke:var(--accent); stroke-width:12}
body.atlas .pathway-body .ft-t{fill:var(--accent-ink); font:700 9.5px var(--font-ui, sans-serif); letter-spacing:.07em}
body.atlas .pathway-body .ft-chip{display:inline-block; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px}
body.atlas .pathway-body .who h3{font:600 1.05rem/1.25 var(--font-display, serif); margin:0 0 3px}
body.atlas .pathway-body .role{font-size:13px; color:var(--muted); line-height:1.4; margin:0}
body.atlas .pathway-body .courses{display:flex; flex-wrap:wrap; gap:6px}
body.atlas .pathway-body .course-chip{font-size:11.5px; font-weight:600; padding:4px 8px; border-radius:6px; background:var(--soft, var(--accent-soft)); color:var(--ink, var(--accent)); white-space:nowrap}
body.atlas .pathway-body .course-chip .name{font-weight:400; opacity:.85}
body.atlas .pathway-body .bio-row{display:block}
body.atlas .pathway-body .bio{font-size:14px; line-height:1.55; margin:0}
body.atlas .pathway-body .bio-more{display:none}
body.atlas .pathway-body .ask{font-size:13.5px; margin:0; color:var(--text)}
body.atlas .pathway-body .ask span{display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
body.atlas .pathway-body .card-foot{margin-top:auto; padding-top:10px; border-top:1px solid var(--border, #ddd7ca); display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap}
body.atlas .pathway-body .email{font-size:12.5px; color:var(--accent); text-decoration:none; word-break:break-all}
body.atlas .pathway-body .email:hover{text-decoration:underline}
body.atlas .pathway-count{font-size:12.5px; color:var(--muted)}
body.atlas .pathway-note{font-size:14.5px; color:var(--muted); margin:0 0 14px; max-width:68ch}
body.atlas .chevron{display:none}
body.atlas .mini-stack{display:flex; align-items:center}