/* ============================================================
   COURSE EXPLORER — /courses

   Third of the directories, after /careers and /exams, and the
   richest: five filters and two outcome counts on every card.
   Same skeleton as its siblings, its own identity:

     the masthead leads VIOLET. Careers lead saffron, exams lead
     blue. Three directories that look related and not identical.

     ENTRY STAGE GETS ITS OWN RAIL. For this audience the first
     question is not "what subject" but "what can I do from where I
     am now" - after 10th, after 12th, after graduation. It is a
     server filter, so the chips are real links that survive with no
     JavaScript and can be crawled.

     THE CARD ANSWERS THE TWO REAL QUESTIONS. How long is it, and
     what does it lead to. Duration and the career count are the two
     things a reader is actually comparing, so they are set as
     figures rather than buried in a meta line.

   Behaviour is explorer.js, shared with the other two and driven
   only by data attributes. Everything here is scoped under .ce.
   ============================================================ */

.ce{ --ce-line:var(--line); --ce-line-2:var(--line-2); --ce-radius:14px; --ce-shadow:19,27,46; }
.ce *{box-sizing:border-box}

/* ---------------- masthead ---------------- */
.ce-hero{
  position:relative;overflow:hidden;color:#efeaf7;
  background:
    radial-gradient(110% 130% at 14% -16%, rgba(109,40,217,.42), rgba(109,40,217,0) 58%),
    radial-gradient(95% 120% at 92% 110%, rgba(14,138,95,.26), rgba(14,138,95,0) 62%),
    linear-gradient(152deg, #241a4d, #0e0b1f 70%);
  padding:56px 0 82px;
}
.ce-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
}
.ce-hero-in{position:relative;z-index:1;display:grid;gap:46px;grid-template-columns:1.15fr .85fr;align-items:end}

.ce-eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0;
  font-family:var(--f-data);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#c4a6ff;
}
.ce-eyebrow i{width:6px;height:6px;border-radius:50%;background:#4ad3a0;box-shadow:0 0 0 3px rgba(74,211,160,.2)}
.ce-hero h1{
  margin:20px 0 0;font-family:var(--f-display);font-weight:800;
  font-size:clamp(32px,4.6vw,56px);line-height:1.03;letter-spacing:-.035em;
  color:#fbfaf7;max-width:20ch;text-wrap:balance;
}
.ce-hero h1 em{font-style:normal;color:#7fe3bd}
.ce-hero-lede{margin:18px 0 0;max-width:54ch;font-size:16px;line-height:1.62;color:rgba(239,234,247,.74)}
.ce-hero-lede b{color:#fbfaf7;font-weight:600}

.ce-figs{display:flex;flex-wrap:wrap;margin:0;padding:0}
.ce-figs > div{padding:0 26px 0 0;margin-right:26px;border-right:1px solid rgba(255,255,255,.15)}
.ce-figs > div:last-child{border-right:0;margin-right:0;padding-right:0}
.ce-figs dt{
  margin:0;font-family:var(--f-data);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(239,234,247,.5);
}
.ce-figs dd{
  margin:8px 0 0;font-family:var(--f-display);font-size:34px;font-weight:800;
  letter-spacing:-.035em;line-height:1;color:#c4a6ff;font-variant-numeric:tabular-nums;
}

/* ---------------- command bar ---------------- */
.ce-bar-hold{position:relative;z-index:30;margin-top:-38px}
.ce-bar{
  position:sticky;top:calc(var(--icg-head-h,0px) + 10px);
  display:flex;align-items:stretch;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--ce-line);border-radius:var(--ce-radius);
  box-shadow:0 2px 4px rgba(var(--ce-shadow),.05),0 26px 44px -30px rgba(var(--ce-shadow),.5);
}
.ce-bar > *{border-left:1px solid var(--ce-line-2)}
.ce-bar > *:first-child{border-left:0}

.ce-search{flex:1 1 260px;min-width:0;position:relative;display:flex;align-items:center}
.ce-search svg{
  position:absolute;left:17px;width:16px;height:16px;color:var(--faint);
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;pointer-events:none;
}
.ce-search input{
  width:100%;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);
  padding:17px 14px 17px 45px;border-radius:var(--ce-radius) 0 0 var(--ce-radius);
}
.ce-search input::placeholder{color:var(--faint)}
.ce-search input:focus{outline:0}

.ce-submit{padding:8px;display:flex}
.ce-submit button{
  align-self:stretch;font:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;background:#6d28d9;color:#fff;border:0;border-radius:10px;padding:0 24px;
  white-space:nowrap;transition:background .14s ease,transform .08s ease;
}
.ce-submit button:hover{background:#5b21b6}
.ce-submit button:active{transform:translateY(1px)}

/* ---------------- dropdown ---------------- */
.ce-dd{position:relative;flex:0 1 190px;min-width:150px;display:flex}
.ce-dd-btn{
  flex:1 1 auto;min-width:0;text-align:left;background:none;border:0;cursor:pointer;
  padding:10px 32px 11px 16px;font:inherit;position:relative;color:var(--ink);
  transition:background .14s ease;
}
.ce-dd-btn:hover{background:var(--paper)}
.ce-dd-btn .l{
  display:block;font-family:var(--f-data);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px;
}
.ce-dd-btn .v{
  display:block;font-size:14.5px;font-weight:500;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ce-dd-btn::after{
  content:"";position:absolute;right:15px;top:calc(50% - 2px);
  border:4px solid transparent;border-top-color:var(--muted);
}
.ce-dd[aria-expanded="true"] .ce-dd-btn{background:var(--paper)}
.ce-dd[aria-expanded="true"] .ce-dd-btn::after{transform:rotate(180deg);transform-origin:50% 25%}

.ce-dd-list{
  position:absolute;top:calc(100% + 7px);left:0;min-width:100%;width:max-content;max-width:330px;
  max-height:340px;overflow:auto;z-index:40;
  background:var(--card);border:1px solid var(--ce-line);border-radius:12px;
  box-shadow:0 2px 4px rgba(var(--ce-shadow),.05),0 24px 40px -22px rgba(var(--ce-shadow),.45);
  padding:6px;margin:0;list-style:none;display:none;
}
.ce-dd[aria-expanded="true"] .ce-dd-list{display:block}
.ce-dd-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;font:inherit;font-size:14px;color:var(--ink-2);
  padding:8px 10px;border-radius:8px;
}
.ce-dd-opt:hover,.ce-dd-opt.is-cursor{background:#f3edff;color:#5b21b6}
.ce-dd-opt[aria-selected="true"]{color:var(--ink);font-weight:600}
.ce-dd-opt[aria-selected="true"]::after{content:"✓";margin-left:auto;color:#6d28d9}
.ce-dd-opt .n{
  margin-left:auto;font-family:var(--f-data);font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.ce-dd-opt[aria-selected="true"] .n{margin-left:0}

.ce-dd--boxed{flex:0 0 auto;background:var(--card);border:1px solid var(--ce-line);border-radius:10px}
.ce-dd--boxed .ce-dd-btn{padding:7px 30px 7px 13px;border-radius:10px}
.ce-dd--boxed .ce-dd-btn .l{font-size:9px;letter-spacing:.14em;margin-bottom:1px}
.ce-dd--boxed .ce-dd-btn .v{font-size:13px;font-weight:600}
.ce-dd--boxed .ce-dd-btn::after{right:12px}
.ce-dd--boxed .ce-dd-list{left:auto;right:0}

/* ---------------- entry-stage and stream rails ----------------
   Real links, not buttons. These are server filters, so a chip is a URL - it
   survives with no JavaScript, can be bookmarked, and a crawler can follow it
   into every stage of the catalogue. */
.ce-rails{display:grid;gap:12px;margin:24px 0 0}
.ce-rail{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ce-rail > b{
  font-family:var(--f-data);font-size:9.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);min-width:74px;
}
.ce-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--ce-line);border-radius:20px;padding:6px 13px;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.ce-chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;color:var(--faint)}
.ce-chip:hover{border-color:#6d28d9;color:#5b21b6}
.ce-chip:hover svg{color:#6d28d9}
.ce-chip[aria-current]{background:#2a1a4d;border-color:#2a1a4d;color:#fff}
.ce-chip[aria-current] svg{color:#c4a6ff}

/* ---------------- results header ---------------- */
.ce-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:30px 0 0}
.ce-kicker{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  font-family:var(--f-data);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.ce-kicker::before{content:"";width:16px;height:1px;background:var(--ce-line);flex:0 0 auto}
.ce-head h2{
  margin:4px 0 0;font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
}
.ce-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;flex-wrap:wrap}
.ce-views{display:flex;background:var(--card);border:1px solid var(--ce-line);border-radius:10px;overflow:hidden;margin-left:2px}
.ce-views button{
  display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--f-data);font-size:11px;letter-spacing:.04em;color:var(--muted);
  padding:9px 13px;transition:background .14s ease,color .14s ease;
}
.ce-views button + button{border-left:1px solid var(--ce-line-2)}
.ce-views button svg{width:13px;height:13px;fill:currentColor}
.ce-views button:hover{color:var(--ink)}
.ce-views button[aria-pressed="true"]{background:var(--ink);color:#fff}

.ce-active-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.ce-active-row:empty{display:none}
.ce-active{
  display:inline-flex;align-items:center;gap:8px;
  background:#f3edff;color:#5b21b6;border:1px solid rgba(109,40,217,.2);
  border-radius:20px;padding:5px 6px 5px 12px;font-size:12.5px;
}
.ce-active b{font-weight:600}
.ce-active a{
  display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:rgba(109,40,217,.12);color:inherit;font-size:12px;line-height:1;
}
.ce-active a:hover{background:#6d28d9;color:#fff}
.ce-active--clear{background:none;color:var(--muted);border-color:var(--ce-line)}
.ce-active--clear:hover{color:var(--ink);border-color:var(--muted)}

/* ---------------- the list ---------------- */
.ce-list{margin:20px 0 0}
.ce-thead{
  display:none;gap:18px;align-items:end;padding:0 18px 10px;
  font-family:var(--f-data);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ce-line);
}
.ce .ce-list[hidden]{display:none}

.ce-item{
  position:relative;display:grid;gap:14px;overflow:hidden;
  background:var(--card);border:1px solid var(--ce-line);
}
.ce-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--d,var(--ce-line));
}
.ce-item.is-out{display:none}
.ce-c{min-width:0}
.ce-k{
  display:none;font-family:var(--f-data);font-size:9px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;
}

.ce-title{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ce-name h3{margin:0;font-family:var(--f-display);font-size:16.5px;font-weight:700;letter-spacing:-.022em;line-height:1.3}
.ce-name h3 a{color:var(--ink)}
.ce-name h3 a:hover{color:#5b21b6}
.ce-code{
  font-family:var(--f-data);font-size:10.5px;font-weight:600;letter-spacing:.07em;
  color:var(--d,var(--ink-2));background:rgba(var(--dr,120,113,108),.09);
  border:1px solid rgba(var(--dr,120,113,108),.24);border-radius:6px;padding:2px 7px;white-space:nowrap;
}
.ce-sum{
  margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* One hue per kind of information, as on the sibling directories:
     level     violet, this page's own colour
     duration  amber - it is a cost, in time
     entry     blue  - where you start from
     outcomes  green - what it leads to */
.ce-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;
  border-radius:7px;padding:3px 10px;white-space:nowrap;
}
.ce-pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ce-pill--level{color:#5b21b6;background:#f3edff;border:1px solid rgba(109,40,217,.18)}
.ce-pill--time{color:#8a5a12;background:#fdf6e9;border:1px solid rgba(180,83,9,.18)}
.ce-pill--entry{color:var(--blue);background:var(--blue-soft);border:1px solid rgba(27,63,196,.16)}

.ce-subjects{font-size:12.5px;line-height:1.5;color:var(--muted)}
.ce-subjects b{color:var(--ink-2);font-weight:600}

/* The two outcome counts. These are what a reader is comparing between courses,
   so they are set as figures rather than folded into a sentence. */
.ce-out{display:flex;gap:8px;flex-wrap:wrap}
.ce-stat{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:#0b6b4f;background:#eff8f3;
  border:1px solid rgba(14,138,95,.2);border-radius:7px;padding:3px 10px;
}
.ce-stat b{font-family:var(--f-data);font-weight:600;font-variant-numeric:tabular-nums}
.ce-stat svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ce-stat.is-zero{color:var(--muted);background:var(--paper);border-color:var(--ce-line)}

.ce-go-link{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--f-data);font-size:11px;letter-spacing:.04em;color:#6d28d9;
}
.ce-go-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.ce-item:hover .ce-go-link svg{transform:translateX(3px)}

/* ---------- card mode ---------- */
.ce.is-cards .ce-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ce.is-cards .ce-item{
  grid-template-columns:1fr;align-content:start;gap:0;
  border-radius:var(--ce-radius);padding:20px 20px 20px 24px;
  box-shadow:0 1px 1px rgba(var(--ce-shadow),.03);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.ce.is-cards .ce-item:hover{
  transform:translateY(-3px);border-color:var(--d,#d5daea);
  box-shadow:0 2px 4px rgba(var(--ce-shadow),.04),0 20px 34px -20px rgba(var(--ce-shadow),.4);
}
.ce.is-cards .ce-item::after{
  content:"";position:absolute;left:0;right:0;top:0;height:78px;pointer-events:none;
  background:linear-gradient(var(--d,transparent),transparent);opacity:.055;
}
.ce.is-cards .ce-k{display:block}
.ce.is-cards .ce-item > .ce-c + .ce-c{padding-top:14px;border-top:1px solid var(--ce-line-2)}
.ce.is-cards .ce-c--go{margin-top:auto;padding-top:14px;border-top:1px solid var(--ce-line-2)}
.ce.is-cards .ce-c--none{display:none}

/* ---------- table mode ---------- */
.ce.is-table .ce-thead{display:grid}
.ce.is-table .ce-thead,
.ce.is-table .ce-item{grid-template-columns:minmax(0,2.3fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr) auto}
.ce.is-table .ce-item{
  align-items:center;padding:15px 18px 15px 22px;border-radius:0;
  border-left:0;border-right:0;border-top:0;transition:background .14s ease;
}
.ce.is-table .ce-item::before{width:3px}
.ce.is-table .ce-item:hover{background:var(--paper)}
.ce.is-table .ce-name h3{font-size:15px}
.ce.is-table .ce-sum{-webkit-line-clamp:1;font-size:12.5px;margin-top:3px}
.ce.is-table .ce-subjects{display:none}

.ce-empty{
  margin:22px 0 0;padding:44px 24px;text-align:center;
  background:var(--card);border:1px dashed var(--ce-line);border-radius:var(--ce-radius);
}
.ce-empty h3{margin:0;font-family:var(--f-display);font-size:19px;font-weight:700;letter-spacing:-.02em}
.ce-empty p{margin:8px 0 16px;color:var(--ink-2);font-size:14.5px}

.ce-note{
  margin:28px 0 0;padding-top:16px;border-top:1px solid var(--ce-line);
  font-size:12.5px;line-height:1.6;color:var(--muted);
}
.ce-note b{color:var(--ink-2);font-weight:600}

@media (max-width:1080px){
  .ce.is-cards .ce-list{grid-template-columns:repeat(2,1fr)}
  .ce.is-table .ce-thead{display:none}
  .ce.is-table .ce-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .ce.is-table .ce-item{
    grid-template-columns:1fr;gap:0;border:1px solid var(--ce-line);
    border-radius:var(--ce-radius);padding:20px 20px 20px 24px;
  }
  .ce.is-table .ce-item::before{width:4px}
  .ce.is-table .ce-item:hover{background:var(--card);border-color:var(--d,#d5daea)}
  .ce.is-table .ce-k{display:block}
  .ce.is-table .ce-item > .ce-c + .ce-c{padding-top:14px;border-top:1px solid var(--ce-line-2)}
  .ce.is-table .ce-c--none{display:none}
  .ce.is-table .ce-sum{-webkit-line-clamp:2}
  .ce.is-table .ce-subjects{display:block}
  .ce.is-table .ce-name h3{font-size:16.5px}
}
@media (max-width:960px){
  .ce-hero-in{grid-template-columns:1fr;gap:32px;align-items:start}
  .ce-hero{padding:44px 0 76px}
}
@media (max-width:720px){
  .ce.is-cards .ce-list,.ce.is-table .ce-list{grid-template-columns:1fr}
  .ce-hero{padding:34px 0 70px}
  .ce-figs > div{padding-right:18px;margin-right:18px}
  .ce-figs dd{font-size:27px}
  .ce-bar{flex-direction:column}
  .ce-bar > *{border-left:0;border-top:1px solid var(--ce-line-2)}
  .ce-bar > *:first-child{border-top:0}
  .ce-search input{border-radius:var(--ce-radius) var(--ce-radius) 0 0}
  .ce-dd{flex:1 1 auto}
  .ce-submit button{width:100%;padding:13px 24px}
  .ce-rail > b{min-width:0;width:100%}
  .ce-head{margin-top:24px}
  .ce-tools{margin-left:0;width:100%;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .ce *{transition:none!important}
  .ce.is-cards .ce-item:hover{transform:none}
}