@font-face{font-family:Tajawal;src:url('/brand/tajawal-regular.ttf');font-display:swap}
@font-face{font-family:Tajawal;src:url('/brand/tajawal-bold.ttf');font-weight:700;font-display:swap}
:root{--petrol:#075b61;--deep:#07484e;--ink:#152f38;--mute:#485e61;--mint:#cdece2;--paper:#f7f5ef;--peach:#edaa78;--line:#c7d2cf;--edge:clamp(22px,5.2vw,86px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:18px}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;color:var(--ink);background:var(--paper);font:18px/1.65 Tajawal,Arial,sans-serif}
.wrap{width:100%;max-width:1570px;margin-inline:auto;padding-inline:var(--edge)}
header{background:var(--paper);position:relative;z-index:3;border-bottom:1px solid var(--line)}
.bar,nav,.navlinks,.account,.row,.rowside,.topline,.hero-actions,.footer-inner,.footlinks{display:flex;align-items:center}
.bar,.row,.topline,.footer-inner{justify-content:space-between}
.bar{gap:clamp(32px,6vw,112px);min-height:90px}
.brand{display:inline-flex;flex-shrink:0;align-items:center}
.brand img{width:224px;height:auto;display:block}
nav{flex:1;justify-content:space-between;gap:18px}
.navlinks,.footlinks{gap:clamp(16px,2.8vw,48px)}.account,.hero-actions,.rowside{gap:14px}
nav,footer{font-size:16px;font-weight:700}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
button,.btn{border:none;font:700 16px/1.45 Tajawal,sans-serif;cursor:pointer;border-radius:3px;background:var(--petrol);color:white;padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:14px;text-decoration:none}
button:hover,.btn:hover{filter:brightness(.91);text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:wait}
.primary{background:var(--ink)}.quiet{background:var(--mint);color:var(--petrol)}.link{background:transparent;color:var(--petrol)}
.menu-toggle{display:none}.skip{position:absolute;z-index:10;right:12px;top:-80px;background:white;padding:8px}.skip:focus{top:8px}
:focus-visible{outline:3px solid #af622e;outline-offset:4px}
main{flex:1;min-width:0}main:focus{outline:none}
main:has(.prospectus){max-width:none;padding-inline:0}
main:has(.prospectus) #notice:not(:empty){margin-inline:var(--edge)}
h1,h2,h3,p{overflow-wrap:anywhere}h1,h2,h3{line-height:1.24;margin:0;color:var(--petrol)}
h1{font-size:clamp(34px,3.6vw,56px)}h2{font-size:clamp(27px,2.6vw,42px)}h3{font-size:22px}
p{margin:0}#page:not(:has(.prospectus)){padding-block:clamp(32px,4vw,65px) 75px}
#page>p{margin:12px 0}#page>section{margin-top:32px}
.cover{position:relative;isolation:isolate;background:var(--deep);color:white;overflow:hidden}
.cover-photo{position:absolute;z-index:-2;left:0;top:0;width:61%;height:100%;object-fit:cover;object-position:38% 48%}
.cover-panel{position:absolute;z-index:-1;right:0;inset-block:0;width:49%;background:var(--deep);clip-path:polygon(12% 0,100% 0,100% 100%,0 100%,0 67%,4% 67%,4% 34%,8% 34%,8% 0)}
.cover-inner{min-height:clamp(475px,38vw,635px);display:flex;align-items:center;padding-block:58px}
.cover-copy{width:43%}
.cover h1{color:white;font-size:clamp(58px,6.15vw,100px);line-height:1.09;animation:headline-in .65s ease-out both}
.cover-copy p{color:#e4efeb;font-size:clamp(18px,1.46vw,23px);line-height:1.62;max-width:35ch;margin:16px 0 26px}
.hero-actions{flex-wrap:wrap;gap:clamp(12px,1.7vw,28px)}
.accent{background:var(--peach);color:var(--ink)}.arrow{font:24px/1 Arial,sans-serif}
.cover-link,.text-action{background:transparent;padding:7px 0;min-height:40px;border-radius:0;border-bottom:1px solid currentColor}
.cover-link{color:white}.text-action{color:var(--petrol)}
.spread{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:clamp(38px,9vw,150px);padding-block:clamp(60px,6.5vw,106px)}
.spread-intro h2,.studio h2{font-size:clamp(36px,4.1vw,68px);line-height:1.15}
.spread-intro>p,.studio-copy>p{max-width:36ch;color:var(--mute);margin:15px 0;font-size:clamp(18px,1.48vw,23px)}
.tracks{border-top:2px solid var(--petrol)}
.tracks details{border-bottom:1px solid var(--line)}
.tracks summary{cursor:pointer;list-style:none;color:var(--petrol);font-size:clamp(21px,1.9vw,30px);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0}
.tracks summary::-webkit-details-marker{display:none}
.tracks summary span{position:relative;width:22px;height:22px;flex-shrink:0}
.tracks summary span:before,.tracks summary span:after{content:'';position:absolute;inset:10px 2px auto;height:2px;background:var(--petrol)}
.tracks summary span:after{transform:rotate(90deg);transition:transform .2s}
.tracks details[open] summary span:after{transform:rotate(0)}
.tracks details p{color:var(--mute);max-width:58ch;padding:0 0 22px}
.catalog-band{background:#dcece5}
.catalog-empty{border-inline-start:4px solid var(--petrol);padding-inline-start:clamp(18px,3vw,45px)}
.catalog-empty h3{font-size:clamp(24px,2.2vw,36px)}.catalog-empty p{max-width:50ch;margin:10px 0 16px}
.studio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding-block:clamp(55px,6vw,95px)}
.studio figure{margin:0}.studio img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover}
.studio-copy{min-width:0}.studio-copy>.gallery-note{font-size:16px}
footer{background:var(--deep);color:white}.footer-inner{padding-block:34px;gap:30px}
.rowside,.row,.topline,.footlinks{flex-wrap:wrap}.row,.topline{gap:18px}.row>div{min-width:0}
.topline{align-items:flex-start;margin-bottom:20px}.topline p{margin:6px 0;color:var(--mute)}
.list{border-block:1px solid var(--line)}.item{padding:21px 0;border-block-end:1px solid var(--line)}.item:last-child{border:0}.item p{margin:5px 0;white-space:pre-line}
.offerings .list{border-color:#a3c1b7}.empty{padding:24px 0;color:var(--mute)}
small,.sub,.formNote{color:var(--mute)}.chip{background:var(--mint);padding:3px 9px;font-size:15px;font-weight:700}
.panel{margin:clamp(30px,5vw,80px) auto!important;max-width:740px;background:white;border-top:6px solid var(--petrol);padding:clamp(24px,4vw,54px)}.panel p{margin:15px 0 22px}
.admin-layout{display:grid;grid-template-columns:minmax(175px,220px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-block-start:34px}
.tabs{display:grid;gap:4px;padding:10px;background:#e4eee8}.tabs button{color:var(--ink);background:transparent;justify-content:flex-start;text-align:right}.tabs [aria-pressed=true]{color:white;background:var(--petrol)}
.admin-layout>section{min-width:0}.support-reply{background:#e3eee8;padding:14px 18px;margin-block:12px}
dialog{width:min(490px,94vw);max-height:92svh;padding:clamp(22px,4vw,38px);color:var(--ink);border:0;border-radius:6px}dialog::backdrop{background:#152f38ab}dialog h2{font-size:30px;margin-bottom:18px}#close{float:left;color:var(--ink);background:var(--paper);width:36px;min-height:36px;padding:0;font-size:24px}
form,label{display:grid}form{gap:14px}label{gap:4px;font-weight:700}input,textarea,select{width:100%;background:white;color:inherit;border:1px solid #899e9e;border-radius:3px;padding:10px 12px;font:400 17px/1.4 Tajawal,sans-serif}
input[type=checkbox]{width:auto}.check{display:block}.permissions{border:1px solid var(--line);padding:10px 16px}.permissions label{padding-block:4px}
.formNote,dt{font-size:16px}dd{margin:0 0 12px;font-weight:700}.list bdi,dd{overflow-wrap:anywhere}
#message:not(:empty),#notice:not(:empty){background:#f6e2d1;color:#543622;padding:10px 16px;margin-block:12px}#notice:empty{display:none}
@keyframes headline-in{from{opacity:.3;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:980px){.bar{gap:22px}.navlinks,.account{gap:12px}.brand img{width:200px}.cover-copy{width:44%}.hero-actions{gap:10px}.cover-inner{min-height:440px}}
@media(min-width:761px) and (max-width:980px){
  .cover h1{font-size:5.6vw}.cover-copy p{font-size:18px}.bar{gap:16px}.navlinks,.account{gap:10px}.navlinks a,.account button{white-space:nowrap}nav{gap:10px}
}
@media(min-width:761px) and (max-width:860px){
  .bar{min-height:76px;flex-wrap:wrap}.menu-toggle{display:inline-flex;background:transparent;color:var(--petrol);gap:8px}
  nav{display:none;flex-basis:100%;padding-bottom:16px}nav.expanded{display:flex}
}
@media(max-width:760px){
 .bar{min-height:74px;flex-wrap:wrap;gap:0}.menu-toggle{display:inline-flex;background:transparent;color:var(--petrol);gap:8px;padding:8px}
 nav{display:none;flex-basis:100%;align-items:stretch;padding:6px 0 18px;flex-wrap:wrap}nav.expanded{display:flex}.navlinks{flex-wrap:wrap}.navlinks a{padding-block:7px}.account{flex-wrap:wrap}
 .cover{display:flex;flex-direction:column}.cover-panel{display:none}.cover-inner{min-height:0;padding-block:35px 44px;order:0}.cover-copy{width:100%}.cover-copy p{max-width:38ch;margin:12px 0 17px}
 .cover h1{font-size:clamp(42px,13vw,69px)}.cover-photo{position:static;z-index:0;order:1;width:100%;height:clamp(208px,49vw,305px);object-position:32% 45%;clip-path:polygon(0 0,73% 0,73% 6px,82% 6px,82% 12px,91% 12px,91% 18px,100% 18px,100% 100%,0 100%);margin-top:-18px}
 .spread,.studio{grid-template-columns:1fr;gap:22px;padding-block:46px}.spread-intro>p{margin:10px 0 0}.studio-copy{grid-row:1}.studio img{aspect-ratio:2/1}.footer-inner{align-items:flex-start;flex-direction:column;gap:20px}
 .admin-layout{grid-template-columns:1fr;margin-top:22px}.tabs{display:flex;flex-wrap:wrap;gap:2px}.tabs button{padding:8px 11px}.tracks summary{padding:15px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.license-page main{padding-block:clamp(36px,6vw,90px)}
.record{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(20px,6vw,80px);margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.record h2{font-size:clamp(25px,2.5vw,36px)}.record p,.record dt{color:var(--mute)}
.record dl{margin:0}.record dl>div{display:grid;grid-template-columns:minmax(140px,.75fr) 1fr;gap:16px;padding:8px 0}
.record dd{margin:0}.record bdi{font-variant-numeric:tabular-nums}
@media(max-width:760px){.record{grid-template-columns:1fr;gap:14px}.record dl>div{grid-template-columns:minmax(110px,.75fr) 1fr;gap:12px}}
.showcase-section{padding-block:clamp(40px,6vw,88px)}
.showcase-section .spread-intro p{max-width:55ch}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin-top:14px}
.media-box{margin:0;background:#e1ece7;min-height:130px;display:grid;place-items:center;overflow:hidden}
.media-box img,.media-box video{display:block;width:100%;height:auto;max-height:540px;object-fit:contain}
.video-box{background:var(--ink);color:white}
.album-back{display:inline-block;color:var(--petrol);margin-bottom:24px;font-weight:700}
.album-intro{position:static;background:transparent;border-bottom:1px solid var(--line);padding-bottom:24px}
.album-date{color:var(--mute);font-size:16px;margin-top:10px}.album-summary{max-width:65ch;margin-top:16px;white-space:pre-line}
.album-detail section{margin-top:28px}

.cover-picker{border:1px solid #b9ceca;border-radius:10px;padding:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}.cover-picker label{position:relative;margin:0;padding:6px;border:2px solid transparent;border-radius:8px;cursor:pointer;font-size:.9rem}.cover-picker label:has(:checked){border-color:#075b61;background:#e8f5ef}.cover-picker input[type=radio]{position:absolute;top:8px;right:8px;width:18px;height:18px;accent-color:#075b61}.cover-picker img,.picker-thumb{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:4px}.sample-tag{display:inline-block;border-radius:4px;padding:3px 9px;background:#e9f5ee;color:#164f51;font-weight:bold}
/* Mounted course photographs, with the selected album in front. */
.film{margin:20px auto 0;max-width:1020px}
.film-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;isolation:isolate;overflow:hidden;padding:24px 0;touch-action:pan-y pinch-zoom}
.film-frame{grid-area:1/1;position:relative;width:clamp(182px,44%,380px);padding:clamp(5px,.8vw,10px);background:white;color:var(--petrol);box-shadow:0 2px 4px #17393629,0 9px 18px #17393624;transform:translateX(calc(var(--offset,0)*1%)) scale(var(--scale,1));transition:transform .62s cubic-bezier(.22,.76,.23,1);user-select:none}
.film-frame[hidden]{display:none}.film-frame:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
.album-cover{aspect-ratio:3/2;overflow:hidden;background:var(--mint)}.album-cover img{width:100%;height:100%;display:block;object-fit:cover}
.film-frame h3{text-align:center;font-size:clamp(16px,1.65vw,23px);margin:9px 0 2px;line-height:1.3}
.film-frame>.sample-tag{position:absolute;top:14px;inset-inline-start:14px;font-size:11px;padding:1px 5px}
.album-arrow,.album-play{background:transparent;color:var(--petrol);display:grid;place-items:center;padding:0}
.album-arrow{position:absolute;z-index:6;direction:ltr;top:calc(50% - 24px);height:48px;width:36px;font:26px/1 Arial}
.album-arrow.previous{right:0}.album-arrow.next{left:0}
.album-controls{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--petrol);font-size:16px}
.album-play{width:38px;height:38px;border-radius:50%;border:1px solid #a2b9b0}
@media(max-width:620px){.film-frame{width:46%;min-width:0}.film-frame h3{font-size:15px}.film-frame>.sample-tag{font-size:9px;top:7px;inset-inline-start:7px}.album-arrow{width:24px;height:44px;font-size:19px;background:#f7f5eff0}}
@media(prefers-reduced-motion:reduce){.film-frame{transition:none}}
.course-dates{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0}.course-dates dt{color:var(--mute)}.course-dates dd{margin:2px 0;font-size:1rem}form select{width:100%;font:inherit;padding:10px;border:1px solid var(--line);background:white}
.course-fields{border:1px solid var(--line);margin:12px 0;padding:12px 16px}.course-fields legend{font-weight:bold;color:var(--petrol)}.course-fields [hidden],.offerings [hidden]{display:none!important}
.course-tags,.catalog-filters{display:flex;gap:8px;flex-wrap:wrap}.catalog-filters{margin-bottom:22px}.catalog-filters label{flex:1 1 105px;font-size:15px}.catalog-filters select{width:100%;font:inherit;color:var(--petrol);padding:7px;background:white;border:1px solid var(--line)}
.course-tags{margin-bottom:12px}.catalog-course h3 a{color:inherit}.course-byline{margin:10px 0;color:var(--petrol)}
.course-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:clamp(24px,4vw,60px);align-items:start}.course-detail article p{white-space:pre-line}.course-detail h1{font-size:clamp(30px,4.5vw,58px)}.course-detail h2{margin:28px 0 8px;font-size:24px}.course-detail aside{padding:clamp(18px,3vw,32px);background:white;border-top:4px solid var(--petrol)}.course-brand{width:180px;max-width:100%;margin-bottom:15px}.course-detail aside dl{margin:0 0 15px}.course-detail aside dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}.course-detail aside dd{margin:0;text-align:end}.course-detail aside .course-dates{display:block}.course-detail aside .course-dates dt{white-space:nowrap}
@media(max-width:760px){.course-detail{grid-template-columns:1fr}}
dialog:has(.course-fields){width:min(760px,94vw)}.course-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;min-width:0}.course-fields>label:has(textarea),.course-fields>label:has([name=title]),.course-fields>label:has([name=address]),.course-fields>[data-paid]{grid-column:1/-1}.course-fields label{min-width:0}.course-fields input,.course-fields select{min-width:0}.course-fields>[data-paid] .check{margin-block:6px}
@media(max-width:600px){.course-fields{grid-template-columns:minmax(0,1fr)}}
.program-cover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:7px;margin:0 0 16px}.trainer-profile{display:flex;align-items:flex-start;gap:15px;min-width:0}.trainer-profile img,.trainer-thumb{width:74px;height:74px;object-fit:cover;border-radius:50%;flex:none}.trainer-profile strong,.trainer-profile small{display:block}.trainer-profile small{color:#326362}.trainer-profile p{margin:5px 0!important;white-space:pre-line}.trainer-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.trainer-row>button{flex:none}.register-actions{display:grid;gap:5px}.admin-page .register-actions button{font-size:13px;white-space:nowrap}.admin-page #trainer-preview:empty,.admin-page #cover-preview:empty{display:none}.admin-page #trainer-preview{grid-column:1/-1}.admin-page #cover-preview img{max-width:240px}.admin-page #brochure-preview{display:block;width:min(100%,420px);height:auto;margin:15px auto}.brochure-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* The two pages pivot around the binding of the institute's mark. */
body:has(#page > .portal-loading) > :is(header, footer) { display: none; }
#page:has(> .portal-loading) { padding: 0; }
.portal-loading {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #075b61;
}
.portal-loading strong { font-size: 20px; color: #21494d; }
.portal-loading svg { overflow: visible; }
.loading-left, .loading-right {
  transform-origin: 115px 163px;
  animation: portal-page 1.8s ease-in-out infinite;
}
.loading-right { animation-delay: .12s; }
@keyframes portal-page {
  0%, 80%, 100% { transform: scaleX(1); }
  38% { transform: scaleX(.72); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-left, .loading-right { animation: none; }
}

.portal-loading, .inline-loading { text-align:center; }
.portal-loading .loading-label { color:#456468; font-size:16px; }
.inline-loading { display:flex; flex-flow:column; align-items:center; justify-content:center; gap:3px; width:100%; padding:12px; color:#075b61; line-height:1.4; }
.inline-loading svg { width:48px; height:44px; flex:none; }
.inline-loading strong { color:#21494d; font-size:15px; }
.inline-loading .loading-label { color:#456468; font-size:13px; font-weight:400; }
.album-cover .inline-loading, .picker-thumb .inline-loading, .cover-pending .inline-loading { height:100%; }
.cover-pending { background:#e6efea; }
.picker-thumb .inline-loading { padding:2px; gap:0; }
.picker-thumb .inline-loading svg { width:26px; height:24px; }
.picker-thumb .inline-loading :is(strong,.loading-label) { font-size:10px; }
#message:has(.inline-loading) { background:#e6efea; }

.course-preview { padding-block:clamp(30px,4vw,56px); }
.shelf-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px; }
.shelf-heading h2 { font-size:clamp(25px,3vw,40px); }
.shelf-heading a { display:inline-flex; align-items:center; gap:6px; color:var(--petrol); font-weight:700; font-size:16px; }
.course-shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),250px)); gap:22px; }
.course-tile { display:grid; gap:10px; color:var(--ink); }
.course-tile .program-cover { margin:0; border-radius:8px; }
.course-tile h3 { font-size:18px; line-height:1.45; }
.course-tile:hover h3, .course-tile:focus-visible h3 { text-decoration:underline; text-underline-offset:4px; }
.course-directory { margin-block:0!important; }
main:has(.course-directory) { max-width:none; padding-inline:0; }
#page:has(.course-directory) { padding-top:clamp(24px,3vw,48px); }
.directory-intro { padding-bottom:26px; }
.directory-intro .album-back { margin-bottom:12px; font-size:15px; }
.directory-intro p { margin-top:8px; color:var(--mute); }
.filter-band { background:var(--deep); color:white; padding-block:18px 24px; }
.filter-heading,.result-count,.directory-group>h2 { display:flex; align-items:center; gap:12px; }
.filter-heading { justify-content:space-between; margin-bottom:10px; }
.filter-heading h2 { color:white; font-size:23px; }
.filter-heading button { background:none; padding:4px 0; min-height:38px; text-decoration:underline; text-underline-offset:4px; }
.filter-heading button:disabled { cursor:default; opacity:.66; }
.course-directory .catalog-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; margin:0; }
.catalog-filters label { min-width:0; color:#d5eae4; }
.catalog-filters select { min-width:0; min-height:46px; padding-inline:12px; border:0; border-radius:5px; cursor:pointer; }
.directory-results { padding-top:26px; }
.result-count { font-size:16px; color:var(--mute); }
.result-count b { color:var(--petrol); }
.directory-group:not([hidden]) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-block:20px 30px; }
.directory-group>h2 { grid-column:1/-1; font-size:clamp(22px,2vw,30px); }
.directory-group>h2::after { content:""; flex:1; height:1px; background:var(--line); }
.directory-card { display:flex; flex-direction:column; height:100%; padding:clamp(8px,1vw,14px); gap:12px; background:white; border:1px solid var(--line); border-radius:10px; }
.directory-card .program-cover { margin:0; }
.directory-card h3 { font-size:clamp(18px,1.6vw,24px); }
.directory-meta { display:flex; flex-wrap:wrap; margin-top:10px; gap:4px 12px; color:var(--mute); font-size:15px; }
.directory-meta span+span { border-inline-start:1px solid var(--line); padding-inline-start:12px; }
.directory-action { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); font-size:16px; }
.directory-action span { color:var(--petrol); text-decoration:underline; text-underline-offset:4px; }
.directory-card:hover { text-decoration:none; border-color:var(--petrol); }
#noMatches:not([hidden]) { margin-block:18px; }
@media(max-width:950px){
  .directory-group:not([hidden]) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px){
  .course-directory .catalog-filters { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
}
@media(max-width:600px){
  .course-directory .catalog-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-filters label:last-child { grid-column:1/-1; }
  .directory-group:not([hidden]) { gap:12px 10px; }
  .directory-card { gap:8px; }
  .directory-card h3 { font-size:16px; }
  .directory-meta { margin-top:4px; font-size:14px; }
  .directory-action { font-size:14px; }
}
@media(max-width:650px){
  .course-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .course-tile h3 { font-size:15px; }
  .shelf-heading a { font-size:14px; }
  .course-tile .inline-loading { gap:0; padding:2px; }
  .course-tile .inline-loading svg { width:26px;height:24px; }
  .course-tile .inline-loading :is(strong,.loading-label) { font-size:10px; }
}

.developer-credit {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.4rem;
  margin-block:0;
  padding-block:14px 18px;
  border-top:1px solid #ffffff24;
  color:#d9e9e7;
  font-size:14px;
  line-height:1.5;
  font-weight:400;
}
.developer-credit a { color:white; font-weight:700; text-decoration:underline; text-decoration-color:#ffffff70; text-underline-offset:4px; }
.developer-credit a:is(:hover,:focus-visible) { text-decoration-color:currentColor; }
.footer-license-inner { display:flex; align-items:center; justify-content:center; gap:28px; padding:24px 0; border-top:1px solid #ffffff24; }
.footer-license img { display:block; width:220px; max-width:100%; height:auto; flex:none; }
.footer-license-copy { display:grid; gap:3px; padding-inline-start:28px; border-inline-start:1px solid #ffffff35; }
.footer-license-copy>span { font-size:14px; font-weight:400; color:#d9e9e7; }
.footer-license-copy strong { display:flex; flex-wrap:wrap; gap:8px; font-size:16px; }
.footer-license-copy bdi { letter-spacing:.04em; }
.footer-license a { display:inline-flex; align-items:center; gap:12px; color:var(--mint); font-size:14px; padding-block:10px; text-decoration:underline; text-underline-offset:5px; }
@media(max-width:700px){
  .footer-license-inner { flex-direction:column; gap:14px; text-align:center; }
  .footer-license-copy { padding:0; border:0; }
  .footer-license-copy strong { justify-content:center; }
}

.learner { margin:0 auto; max-width:1320px; }
.learner-head,.learning-heading,.learning-row,.ticket-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.learner-head { background:var(--deep); color:white; padding:clamp(22px,4vw,46px); border-radius:14px 14px 0 0; }
.learner-head h1 { color:white; font-size:clamp(30px,4vw,46px); }
.learner-head p { margin-top:6px; }
.learner-stats { display:grid; grid-template-columns:repeat(3,1fr); background:#e0eee7; padding:16px 0; }
.learner-stats>div { display:grid; padding-inline:clamp(10px,3vw,40px); line-height:1.4; color:var(--deep); }
.learner-stats>div+div { border-inline-start:1px solid #b5cfc5; }
.learner-stats b { font-size:28px; }
.learner-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start; gap:20px; margin-block:24px; }
.learner-side { display:grid; gap:20px; }
.learning-panel,.ticket-row { background:white; border:1px solid var(--line); border-radius:10px; padding:clamp(16px,2vw,28px); }
.learning-panel h2 { font-size:25px; }
.learning-heading a { color:var(--petrol); text-decoration:underline; }
.learner-empty { margin-block:14px; color:var(--mute); }
.learning-row { padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
.learning-row h3,.ticket-row h3 { font-size:20px; margin:4px 0; }
.learning-row p,.learning-state { color:var(--mute); font-size:15px; }
.ticket-row { margin-top:12px; }
.ticket-row>div { flex:1 1 220px; }
.ticket-history { display:grid; gap:10px; }
.ticket-bubble { padding:12px 16px; border-inline-start:3px solid #a8bab6; background:#f1f4f2; }
.staff-bubble { border-color:var(--petrol); background:#e4f2ed; }
.ticket-bubble p { white-space:pre-wrap; }
dialog:has(.learning-frame) { width:min(1024px,96vw); }
.learning-frame { display:block; width:100%; height:min(64svh,640px); border:0; margin:16px 0; }
@media(max-width:760px){.learner-grid { grid-template-columns:1fr; }.learner-stats span { font-size:14px; }}
.learning-row small { display:block; }
#formArea form:has(.ticket-history) [hidden] { display:none; }
.support-center .learner-head { border-radius:12px; }
.support-center h2 { font-size:clamp(22px,2.4vw,32px); }
.support-topics { margin-block:clamp(24px,4vw,44px); }
.support-topics>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.support-topics :is(button,article) { display:grid; align-content:start; justify-content:stretch; gap:5px; text-align:start; padding:18px; color:var(--deep); background:white; border:1px solid var(--line); border-radius:8px; }
.support-topics button:hover { background:#e9f4ef; border-color:var(--petrol); filter:none; }
.support-topics strong { font-size:19px; }
.support-topics small,.ticket-labels { color:var(--mute); font-weight:400; font-size:15px; }
.inbox-filters { display:flex; flex-wrap:wrap; gap:12px; margin-block:16px; }
.inbox-filters label { flex:1 1 160px; max-width:300px; }
@media(max-width:760px){.support-topics>div { grid-template-columns:repeat(2,minmax(0,1fr)); }.support-topics :is(button,article) { padding:12px; }}
.referral-card { background:white; border:1px solid var(--line); padding:18px; border-radius:8px; margin-block:12px; }
.referral-card dl { display:flex; flex-wrap:wrap; gap:20px; }
.referral-card dd { margin:0; font-weight:bold; }
.referral-card p { white-space:pre-wrap; }
.referral-card .staff-bubble { padding:12px; margin-block:10px; }
.referral-card button { margin:6px 0 0 6px; }
.referral-table { overflow:auto; }
.referral-table th,.referral-table td { text-align:start; padding:8px 12px; }
#referral-metrics { margin-block:20px; }