/* ==========================================================================
   courselist.css — the CADR catalog look, scoped under .courselist so it sits
   inside a ProcessWire page without touching the rest of the site, and the
   site's global p / li / h3 rules don't reach in. Fonts are the site's own
   (Open Sans body, Encode Sans Compressed display) so it reads as this site.
   ========================================================================== */

.courselist{
  --ink:#211d2b; --ink-soft:#534d63; --paper:#faf9fc; --card:#fff;
  --purple:#4b2e83; --gold:#b7a57a; --gold-deep:#85754d;
  --line:#e6e2ee; --focus:#7b5bc4; --muted:#6f6880;
  --display:'encodesanscompressed-600-semibold-webfont','Open Sans',sans-serif;
  --label:'encode_sans_compressedregular','Open Sans',sans-serif;
  /* gen-ed tints, UW palette (AA on white and on their own tint) */
  --AH-bg:#fdecf7; --AH-fg:#b62f86;
  --DIV-bg:#f6fbe8; --DIV-fg:#57700f;
  --NSc-bg:#fff9e6; --NSc-fg:#7f6300;
  --RSN-bg:#edeaf3; --RSN-fg:#4b2e83;
  --SSc-bg:#ebf0f6; --SSc-fg:#386a9f;
  color:var(--ink); font-family:'Open Sans',sans-serif; font-size:16px; line-height:1.5;
  margin:0 0 4em;
}
.courselist *{box-sizing:border-box}
/* neutralise site-wide p / li / heading rules inside the component */
.courselist p, .courselist li{font-size:inherit; line-height:inherit; color:inherit; margin:0}
.courselist h3{font-family:var(--display); color:var(--ink); font-size:22px; margin:0 0 8px; font-weight:normal}
.courselist a{color:var(--purple)}
.courselist :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}
.cl-vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- search ---------- */
.cl-searchbar{position:relative; margin:0}
.cl-searchbar input{width:100%; font-family:inherit; font-size:18px; color:var(--ink);
  padding:15px 16px 15px 46px; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  box-shadow:0 2px 0 var(--gold-deep)}
.cl-searchbar input::placeholder{color:#8b8598}
.cl-searchbar input:focus{border-color:var(--focus); outline:none}
.cl-searchbar svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--purple)}
.cl-evallink{margin:12px 0 0!important; font-size:15px; color:var(--ink-soft)}
.cl-evallink a{font-weight:600}

/* ---------- layout ---------- */
.cl-layout{display:grid; grid-template-columns:250px 1fr; gap:34px; padding:26px 0 0; align-items:start}
@media (max-width:820px){ .cl-layout{grid-template-columns:1fr; gap:0; padding-top:0} }

/* ---------- filters ---------- */
.cl-aside[hidden]{display:none}
.cl-ftoggle{display:none}
@media (max-width:820px){
  .cl-ftoggle{display:flex; align-items:center; justify-content:space-between; width:100%;
    margin:16px 0 0; padding:13px 16px; font:600 15px 'Open Sans',sans-serif; color:var(--ink);
    background:#fff; border:1px solid var(--line); border-radius:10px; cursor:pointer}
  .cl-panel{display:none; padding:18px 4px 4px}
  .cl-open .cl-panel{display:block}
}
.courselist fieldset{border:0; margin:0 0 22px; padding:0; min-width:0}
.courselist legend{font-family:var(--label); font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); padding:0 0 8px; font-weight:normal}
.cl-row{display:flex; flex-wrap:wrap; gap:0 18px}
.cl-opt{display:flex; align-items:center; gap:10px; padding:5px 0; cursor:pointer; font-size:15.5px; color:var(--ink-soft)}
.cl-opt input{position:absolute; opacity:0; width:0; height:0}
.cl-box{width:18px; height:18px; border:1.5px solid #c3bdd2; border-radius:5px; flex:0 0 auto;
  display:grid; place-items:center; background:#fff; transition:all .12s}
.cl-opt input:checked + .cl-box{background:var(--purple); border-color:var(--purple)}
.cl-opt input:checked + .cl-box::after{content:""; width:9px; height:9px; border-radius:2px; background:#fff}
.cl-opt input:focus-visible + .cl-box{outline:3px solid var(--focus); outline-offset:2px}
.cl-opt:hover{color:var(--ink)}
.cl-ct{margin-left:auto; font-size:13px; color:var(--muted)}
.cl-row .cl-ct{margin-left:2px}
.cl-row .cl-ct::before{content:"("} .cl-row .cl-ct::after{content:")"}

.cl-chips{display:flex; flex-wrap:wrap; gap:8px}
.cl-chip{position:relative; cursor:pointer}
.cl-chip input{position:absolute; opacity:0; width:0; height:0}
.cl-face{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:7px;
  border:1.5px solid var(--line); font-size:14px; background:#fff; transition:all .12s}
.cl-code{font-weight:700; font-size:13px}
.cl-chip input:checked + .cl-face{border-color:currentColor}
.cl-chip input:focus-visible + .cl-face{outline:3px solid var(--focus); outline-offset:2px}
.cl-chip[data-d="A&H"] .cl-face{color:var(--AH-fg)}  .cl-chip[data-d="A&H"] input:checked + .cl-face{background:var(--AH-bg)}
.cl-chip[data-d="DIV"] .cl-face{color:var(--DIV-fg)} .cl-chip[data-d="DIV"] input:checked + .cl-face{background:var(--DIV-bg)}
.cl-chip[data-d="NSc"] .cl-face{color:var(--NSc-fg)} .cl-chip[data-d="NSc"] input:checked + .cl-face{background:var(--NSc-bg)}
.cl-chip[data-d="RSN"] .cl-face{color:var(--RSN-fg)} .cl-chip[data-d="RSN"] input:checked + .cl-face{background:var(--RSN-bg)}
.cl-chip[data-d="SSc"] .cl-face{color:var(--SSc-fg)} .cl-chip[data-d="SSc"] input:checked + .cl-face{background:var(--SSc-bg)}
.cl-matchnote{font-size:13px!important; color:var(--muted)!important; margin:9px 0 0!important; line-height:1.4!important}
.cl-clear{font:14.5px 'Open Sans',sans-serif; color:var(--purple); background:none; border:0; padding:6px 0;
  cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.cl-clear[hidden]{display:none}

/* ---------- results ---------- */
.cl-rhead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:0 0 14px; border-bottom:1px solid var(--line); margin:0 0 18px}
.cl-rhead[hidden]{display:none}
@media (max-width:820px){ .cl-rhead{margin-top:18px} }
.cl-count{font-family:var(--display); font-size:22px!important}
.cl-sortwrap{font-size:14.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px}
.cl-sortwrap select{font:14.5px 'Open Sans',sans-serif; color:var(--ink); padding:6px 8px;
  border:1px solid var(--line); border-radius:7px; background:#fff}
.cl-dirbtn{display:inline-grid; place-items:center; width:32px; height:32px; border:1px solid var(--line);
  border-radius:7px; background:#fff; color:var(--ink-soft); cursor:pointer; padding:0}
.cl-dirbtn svg{width:16px; height:16px; transition:transform .15s}
.cl-dirbtn[aria-pressed="true"]{background:var(--purple); border-color:var(--purple); color:#fff}
.cl-dirbtn[aria-pressed="true"] svg{transform:rotate(180deg)}

ul.cl-results{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.cl-course{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:13px 18px;
  transition:border-color .12s, box-shadow .12s}
.cl-course:hover{border-color:#d4cce6; box-shadow:0 4px 18px -10px rgba(75,46,131,.3)}
.cl-top{display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap}
.cl-ccode{font-weight:700; font-size:15px; text-decoration:none; white-space:nowrap}
.cl-ccode:hover{text-decoration:underline; text-underline-offset:3px; color:var(--purple)}
.cl-title{font-family:var(--display); font-size:19px; color:var(--ink); line-height:1.2}
.cl-cat{font-family:var(--label); font-size:13.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-left:auto; white-space:nowrap}
@media (max-width:560px){ .cl-cat{margin-left:0; flex-basis:100%} }

.cl-tags{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0}
.cl-tag{display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:6px; font-size:13px}
.cl-tag .cl-code{font-size:12px}
.cl-tag-a-h{background:var(--AH-bg); color:var(--AH-fg)}
.cl-tag-div{background:var(--DIV-bg); color:var(--DIV-fg)}
.cl-tag-nsc{background:var(--NSc-bg); color:var(--NSc-fg)}
.cl-tag-rsn{background:var(--RSN-bg); color:var(--RSN-fg)}
.cl-tag-ssc{background:var(--SSc-bg); color:var(--SSc-fg)}
.cl-tag-plain{background:#eceaf2; color:var(--ink-soft)}

.cl-desc{margin:12px 0 0!important; color:var(--ink-soft)!important; font-size:15.5px!important; line-height:1.55!important}
.cl-desc.cl-clamp{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cl-more{font:14px 'Open Sans',sans-serif; color:var(--purple); background:none; border:0; padding:6px 0 0; cursor:pointer}

.cl-prereqs, .cl-offered{margin:7px 0 0!important; font-size:14px!important; color:var(--ink-soft)!important}
.cl-offered + .cl-note, .cl-prereqs + .cl-offered{margin-top:3px!important}
.cl-meta-label{font-family:var(--label); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); margin-right:6px}
.cl-term{display:inline-block; margin-right:10px; white-space:nowrap}
.cl-term + .cl-term::before{content:"·"; margin-right:10px; color:#c3bdd2}
.cl-note{margin:10px 0 0!important; font-size:14px!important; color:var(--gold-deep)!important; font-style:italic}

.cl-empty, .cl-loading{text-align:center; padding:60px 20px; color:var(--ink-soft)}
.cl-empty[hidden], .cl-loading[hidden]{display:none}

@media (prefers-reduced-motion:reduce){ .courselist *{transition:none!important} }

/* ---------- evaluation page ---------- */
.eval-intro ol{counter-reset:s; list-style:none; margin:14px 0 0; padding:0}
.eval-intro ol li{position:relative; padding:0 0 16px 44px; margin:0; line-height:1.55}
.eval-intro ol li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:0;
  width:28px; height:28px; background:#4b2e83; color:#fff; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:14px}
.eval-intro ol li:not(:last-child)::after{content:""; position:absolute; left:13px; top:32px; bottom:4px; width:2px; background:#e6e2ee}
.eval-lookup{max-width:820px; margin-top:2.5em}
.eval-h{margin-bottom:4px!important}
.eval-sub{color:var(--ink-soft)!important; margin:0 0 14px!important}
.eval-count{font-size:13.5px!important; color:var(--muted)!important; margin:12px 0 0!important}
.eval-list{margin-top:10px!important}
.eval-row .cl-ccode{color:var(--ink)}
.eval-title{color:var(--ink-soft)}
.eval-outcome{display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  background:#eceaf2; border-radius:6px; padding:3px 9px; margin-left:auto}
@media (max-width:560px){ .eval-outcome{margin-left:0} }
.eval-empty{padding:18px 4px 0; color:var(--ink-soft); font-size:14.5px; line-height:1.6}
.eval-empty:empty{display:none}
.eval-empty b{color:var(--ink)}
/* callout: tinted panel, gold rule, icon; holds whatever CKEditor gives it */
.eval-note{display:flex; gap:14px; align-items:flex-start; margin:22px 0 0; padding:16px 18px 16px 16px;
  background:linear-gradient(180deg,#fbf8f1 0%,#f6efdf 100%); border:1px solid #e6d9b8; border-left:5px solid var(--gold-deep);
  border-radius:10px; color:var(--ink); font-size:15px; line-height:1.55; box-shadow:0 2px 10px -6px rgba(75,46,131,.18)}
.eval-note-icon{flex:0 0 auto; width:22px; height:22px; margin-top:2px; color:var(--gold-deep)}
.eval-note-body{min-width:0}
.eval-note-body p{margin:0 0 .5em!important; font-size:inherit!important; line-height:inherit!important; color:inherit!important}
.eval-note-body p:last-child{margin-bottom:0!important}
.eval-note-body b, .eval-note-body strong{color:var(--purple); font-weight:700}
.eval-note-body a{color:var(--purple); font-weight:600}
@media (max-width:560px){ .eval-note{padding:14px; gap:10px} }

/* course list: "this was petitioned" message in the empty state */
.cl-denied{margin:14px auto 0!important; max-width:52ch; padding:12px 16px; text-align:left; background:#fff;
  border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:10px; line-height:1.55!important}
.cl-notlisted{border-left-color:var(--purple, #4b2e83)}
.cl-denied b{color:var(--ink)}

/* ---------- view toggle ---------- */
.cl-viewtoggle{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-right:6px}
.cl-viewtoggle button{display:inline-flex; align-items:center; gap:6px; font:14px 'Open Sans',sans-serif; color:var(--ink-soft);
  background:#fff; border:0; padding:6px 11px; cursor:pointer}
.cl-viewtoggle button + button{border-left:1px solid var(--line)}
.cl-viewtoggle button svg{width:15px; height:15px}
.cl-viewtoggle button[aria-pressed="true"]{background:var(--purple); color:#fff}
@media (max-width:820px){ .cl-viewtoggle{display:none} }
/* in compact view the table headers do the sorting */
.cl-is-compact .cl-sortwrap > label, .cl-is-compact #cl-sort, .cl-is-compact #cl-dir{display:none}

/* ---------- compact table ---------- */
.cl-tablewrap[hidden]{display:none}
.cl-table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line);
  border-radius:10px; font-size:14.5px}
.cl-table thead th:first-child{border-top-left-radius:10px}
.cl-table thead th:last-child{border-top-right-radius:10px}
.cl-table thead th{position:sticky; top:0; z-index:1; background:#f6f4fa; text-align:left; font-weight:normal;
  font-family:var(--label); font-size:13.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep);
  padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
.cl-thsort{font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px}
.cl-thsort:hover{color:var(--purple)}
.cl-sortmark{font-size:9px; color:var(--purple)}
.cl-table td, .cl-table tbody th{padding:5px 10px; line-height:1.4; border-bottom:1px solid #f0edf5; vertical-align:top; text-align:left; font-weight:normal}
.cl-table tbody tr:last-child > *{border-bottom:0}
.cl-table tbody tr:hover > *{background:#faf9fc}
.cl-tcode{white-space:nowrap}
.cl-tcode a{font-weight:700; text-decoration:none}
.cl-tcode a:hover{text-decoration:underline; text-underline-offset:3px}
.cl-ttitle{color:var(--ink); min-width:16em; width:44%}
.cl-tcat{width:1%}
.cl-tcat{color:var(--ink-soft); font-size:13.5px}
.cl-tge{white-space:nowrap}
.cl-gemini{display:inline-block; text-decoration:none; font-size:11.5px; font-weight:700; padding:1px 5px; border-radius:4px; margin:0 3px 2px 0}
.cl-num{text-align:right!important; white-space:nowrap; color:var(--ink-soft)}
.cl-table th.cl-num{text-align:right}
.cl-termcol{text-align:center!important; width:3.4em}
.cl-termcol abbr{text-decoration:none}
.cl-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--purple); vertical-align:middle}
.cl-info{font:12px 'Open Sans',sans-serif; color:var(--purple); background:#f3f0fa; border:0; border-radius:4px;
  padding:1px 6px; margin-left:4px; cursor:pointer; vertical-align:1px}
.cl-info[aria-expanded="true"]{background:var(--purple); color:#fff}
.cl-infobox{margin:6px 0 2px; font-size:13.5px; color:var(--ink-soft)}
.cl-infobox p{margin:3px 0 0!important}

/* ---------- cards as a grid: two-up on desktop, one on narrow ---------- */
/* Two columns, set by the width of the list column itself (container query),
   so it doesn't matter how wide the filters or the page are. */
.cl-main{container-type:inline-size; min-width:0}
ul.cl-results{display:grid!important; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px!important; align-items:stretch}
@container (max-width: 560px){ ul.cl-results{grid-template-columns:1fr} }
ul.cl-results .cl-course{display:flex; flex-direction:column; min-width:0}
ul.cl-results .cl-cat{margin:0 0 4px!important; flex-basis:auto; font-size:12.5px; letter-spacing:.1em; white-space:normal}
ul.cl-results .cl-top{gap:2px 10px}
.cl-foot{margin-top:auto}
.cl-foot:empty{display:none}
.cl-foot .cl-offered{margin-top:10px!important; padding-top:8px; border-top:1px solid #f0edf5}
ul.cl-results .cl-more{align-self:flex-start}
/* quarters as small pills: they wrap cleanly in a narrow card, no stray separators */
.cl-offered{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 6px}
.cl-offered .cl-meta-label{margin-right:2px}
.cl-term{margin:0!important; padding:1px 7px; border-radius:4px; background:#f6f4fa; font-size:13px; color:var(--ink-soft)}
.cl-term + .cl-term::before{content:none!important}
/* the evaluation lookup: one column, not the course-card grid */
.eval-lookup ul.cl-results{grid-template-columns:1fr}
.eval-lookup .cl-course{padding:11px 16px}
/* a sub-step inside a numbered step (e.g. the Special Topics note under step 1) */
.eval-intro ol ol{counter-reset:none; margin:8px 0 0; padding:0}
.eval-intro ol ol li{padding:0 0 6px 0; font-size:15px; color:var(--ink-soft)}
.eval-intro ol ol li::before, .eval-intro ol ol li::after{content:none}