/* Academy "gallery" skin, after the Apple reference in /DESIGN.md: quiet
   system type with tight headline tracking, 17px body copy, parchment ground
   with white lesson tiles, pill actions, hairlines instead of shadows, and a
   single interactive colour -- the HSE Hub green, not Apple blue. Loaded last
   on courses/*.html only, and scoped to <main> so the site header/footer are
   untouched until the rest of the site follows. */

main{
  --ap-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --font-head:var(--ap-font);
  --font-body:var(--ap-font);
  --ap-ground:#f5f6f5;
  --ap-surface:#ffffff;
  --ap-inset:#f5f6f5;
  --ap-ink:#1d1f1e;
  --ap-muted:#5c6361;
  --ap-subtle:#7a817f;
  --ap-hairline:rgba(0,0,0,.08);
  --ap-hairline-strong:rgba(0,0,0,.16);
  --ap-action:#0f5a45;
  --ap-action-hover:#0a3b30;
  --ap-action-soft:#e6f3ee;
  --ap-on-action:#ffffff;
  --ap-tile:#1d1f1e;
  --ap-on-tile:#f5f6f5;
  --ap-on-tile-muted:#b9c1be;
  --ap-tile-action:#3ec090;
  --ap-caution:#a52b32;
  --ap-caution-soft:#fbeeee;
  --ap-caution-ink:#7d1b22;
  font-family:var(--ap-font);
  background:var(--ap-ground);
  color:var(--ap-ink);
}
:root[data-theme="dark"] main{
  --ap-ground:#000000;
  --ap-surface:#1c1f1e;
  --ap-inset:#262a28;
  --ap-ink:#f5f6f5;
  --ap-muted:#b1b9b6;
  --ap-subtle:#8e9794;
  --ap-hairline:rgba(255,255,255,.1);
  --ap-hairline-strong:rgba(255,255,255,.2);
  --ap-action:#3ec090;
  --ap-action-hover:#62d3a8;
  --ap-action-soft:#12352a;
  --ap-on-action:#04140f;
  --ap-tile:#161918;
  --ap-caution:#f08a90;
  --ap-caution-soft:#2a1416;
  --ap-caution-ink:#f8b4b8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) main{
    --ap-ground:#000000;
    --ap-surface:#1c1f1e;
    --ap-inset:#262a28;
    --ap-ink:#f5f6f5;
    --ap-muted:#b1b9b6;
    --ap-subtle:#8e9794;
    --ap-hairline:rgba(255,255,255,.1);
    --ap-hairline-strong:rgba(255,255,255,.2);
    --ap-action:#3ec090;
    --ap-action-hover:#62d3a8;
    --ap-action-soft:#12352a;
    --ap-on-action:#04140f;
    --ap-tile:#161918;
    --ap-caution:#f08a90;
    --ap-caution-soft:#2a1416;
    --ap-caution-ink:#f8b4b8;
  }
}

/* ---- Type: 600 headlines with tight tracking, 17px body ---- */
main h1,main h2,main h3,main h4{font-family:var(--ap-font);font-weight:600;color:inherit}
main h1{font-size:clamp(2.125rem,5vw,3.5rem);line-height:1.07;letter-spacing:-.015em}
main h2{font-size:clamp(1.625rem,3vw,2.125rem);line-height:1.15;letter-spacing:-.012em}
main h3{font-size:1.3125rem;line-height:1.2;letter-spacing:-.005em}
main p,main li{font-size:1.0625rem;line-height:1.5;letter-spacing:-.011em}
main .lede{font-size:clamp(1.1875rem,2vw,1.5rem);line-height:1.35;font-weight:400;color:var(--ap-muted);letter-spacing:0}
main .text-subtle{color:var(--ap-subtle)}
main .text-muted{color:var(--ap-muted)}
main :lang(ar),main :lang(ar) *{letter-spacing:0 !important}
main .breadcrumbs{color:var(--ap-subtle);font-size:.875rem}
main .breadcrumbs a:hover{color:var(--ap-action)}

/* ---- Course hero: one near-black tile, sentence-case headline ---- */
main .law-course-hero,main .ishikawa-hero{background:var(--ap-tile);color:var(--ap-on-tile);border-bottom:0;padding:clamp(3.5rem,8vw,5rem) 0}
main .law-course-hero h1,main .ishikawa-hero h1{font-family:var(--ap-font);font-size:clamp(2.5rem,5.5vw,3.5rem);line-height:1.07;letter-spacing:-.015em;text-transform:none;font-weight:600;color:var(--ap-on-tile)}
main .law-course-hero p:not(.eyebrow),main .ishikawa-hero p{color:var(--ap-on-tile-muted);font-size:clamp(1.1875rem,2vw,1.3125rem);line-height:1.45}
main .law-course-hero img{border:0;border-radius:18px;box-shadow:rgba(0,0,0,.22) 3px 5px 30px 0}
main .law-course-hero .badge,main .ishikawa-hero .badge,main .ishikawa-hero .eyebrow{background:rgba(255,255,255,.12);color:var(--ap-on-tile);text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:600;border-radius:999px;padding:.35rem .8rem}

/* ---- Badges and kickers: small, sentence case, no shouting ---- */
main .badge{border-radius:999px;text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:600;padding:.35rem .8rem;background:var(--ap-action-soft);color:var(--ap-action)}
main .module-kicker{color:var(--ap-action);font-size:.875rem;font-weight:600;text-transform:none;letter-spacing:-.01em;margin-bottom:.5rem}

/* ---- Language bar: frosted strip with a segmented pill control ---- */
main .language-bar,main .course-language-bar{background:color-mix(in srgb,var(--ap-ground) 80%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--ap-hairline);color:var(--ap-ink)}
main .language-bar .container{min-height:56px}
main .language-bar strong{font-size:1.0625rem;font-weight:600}
main .language-switcher,main .course-language-switcher{display:flex;gap:2px;padding:3px;border:0;border-radius:999px;background:var(--ap-hairline)}
main .language-switcher button,main .course-language-switcher button{border:0;border-radius:999px;background:transparent;color:var(--ap-ink);padding:.45rem 1rem;font:400 .875rem/1.2 var(--ap-font)}
main .language-switcher button:hover,main .course-language-switcher button:hover{background:var(--ap-surface);color:var(--ap-ink)}
main .language-switcher button.is-active,main .course-language-switcher button.is-active{background:var(--ap-action);color:var(--ap-on-action)}

/* ---- Lesson tiles: white on parchment, 18px corners, hairline, no shadow ---- */
main .card{background:var(--ap-surface);border:1px solid var(--ap-hairline);border-radius:18px;box-shadow:none}
main .card-hover:hover{transform:none;box-shadow:none;border-color:var(--ap-hairline-strong)}
main section[data-lesson] h2{margin-bottom:.75rem}
main section[data-lesson]>p,main section[data-lesson]>ul,main section[data-lesson]>ol{max-width:68ch}

/* ---- Lesson menu ---- */
main .lesson-nav{gap:2px}
main .lesson-nav-item{border:0;border-radius:11px;padding:.65rem .75rem;color:var(--ap-muted)}
main .lesson-nav-item span.label{font-size:.9375rem;letter-spacing:-.01em}
main .lesson-nav-item:hover{background:var(--ap-inset)}
main .lesson-nav-item .num{border-color:var(--ap-hairline-strong);font-family:var(--ap-font);font-weight:600}
main .lesson-nav-item.is-active{background:var(--ap-action-soft);color:var(--ap-ink);font-weight:600}
main .lesson-nav-item.is-active .num{background:var(--ap-action);border-color:var(--ap-action);color:var(--ap-on-action)}
main .lesson-nav-item.is-done .num{background:transparent;border-color:var(--ap-action);color:var(--ap-action)}
main .lesson-nav-item.is-done.is-active .num{background:var(--ap-action);color:var(--ap-on-action)}
main .progress-track,main .quiz-progress-track{height:4px;background:var(--ap-hairline)}
main .progress-fill,main .quiz-progress-fill{background:var(--ap-action)}

/* ---- Actions: pills, one colour, press-to-shrink ---- */
main .btn{font-family:var(--ap-font);font-weight:400;font-size:1.0625rem;letter-spacing:-.01em;border-radius:999px;padding:.6875rem 1.375rem;border-width:1px;box-shadow:none}
main .btn:hover{transform:none;box-shadow:none}
main .btn:active{transform:scale(.95)}
main .btn-primary{background:var(--ap-action);color:var(--ap-on-action)}
main .btn-primary:hover{background:var(--ap-action-hover)}
main .btn-ghost{background:transparent;border-color:var(--ap-action);color:var(--ap-action)}
main .btn-ghost:hover{background:var(--ap-action-soft);border-color:var(--ap-action);color:var(--ap-action)}
main .btn-accent{background:var(--ap-action);color:var(--ap-on-action)}
main .btn-sm{font-size:.875rem;padding:.5rem 1rem}
main .btn:focus-visible{outline:2px solid var(--ap-action);outline-offset:3px}
@media (prefers-reduced-motion:reduce){main .btn:active{transform:none}}

/* ---- Callouts: filled panels instead of a coloured rail ---- */
main .legal-boundary{border:0;border-radius:18px;background:var(--ap-surface);padding:1.25rem 1.5rem}
main .card .legal-boundary{background:var(--ap-inset)}
main .legal-boundary strong{color:var(--ap-ink);text-transform:none;letter-spacing:-.01em;font-size:1.0625rem;font-weight:600}
main .legal-boundary p{color:var(--ap-muted);margin-top:.35rem}
main .legal-boundary.caution,main .card .legal-boundary.caution{background:var(--ap-caution-soft)}
main .legal-boundary.caution strong{color:var(--ap-caution-ink)}

/* ---- Quiz ---- */
main .quiz-shell{border:1px solid var(--ap-hairline);border-radius:18px;box-shadow:none;background:var(--ap-surface)}
main .quiz-option{border:1px solid var(--ap-hairline-strong);border-radius:12px;font-size:1rem;color:var(--ap-ink);background:var(--ap-surface)}
main .quiz-option:hover{border-color:var(--ap-action);background:var(--ap-surface)}
main .quiz-option .letter{border-width:1px;font-family:var(--ap-font);font-weight:600}
main .quiz-option.is-selected{border:2px solid var(--ap-action);background:var(--ap-action-soft)}
main .quiz-option.is-selected .letter,main .quiz-option.is-correct .letter{background:var(--ap-action);border-color:var(--ap-action);color:var(--ap-on-action)}
main .quiz-option.is-correct{border:2px solid var(--ap-action);background:var(--ap-action-soft)}

/* ---- Interactive components (course-interactive.css) on the same grammar ---- */
main .tri-band{border-radius:12px;font-weight:600;letter-spacing:-.01em}
main .tri-panel,main .scenario-choice{border:0;border-radius:18px;background:var(--ap-inset)}
main .flip-card-face{border:1px solid var(--ap-hairline);border-radius:18px;background:var(--ap-surface)}
main .flip-card-back{background:var(--ap-action-soft)}
main .flip-card--stat .flip-card-back{background:var(--ap-caution-soft)}
main .flip-card--stat .flip-card-back strong{color:var(--ap-caution-ink);text-transform:none;letter-spacing:0;font-size:.875rem}
main .flip-card--stat .flip-card-front .stat-num{font-weight:600;letter-spacing:-.02em;color:var(--ap-action)}
main .flip-card--stat .flip-card-front .stat-label{text-transform:none;letter-spacing:0;font-size:.875rem}
main .flip-card-toggle:focus-visible ~ .flip-card-inner{border-radius:18px;outline-color:var(--ap-action)}
main .example-bar{border:1px solid var(--ap-hairline);border-radius:18px;background:var(--ap-surface)}
main .example-bar summary{font-weight:600}
main .example-bar strong{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
main .example-bar[open] summary{border-bottom-color:var(--ap-hairline)}
main .example-detail{background:var(--ap-inset);color:var(--ap-muted);font-size:1rem;line-height:1.5}
main .scenario-prompt strong{text-transform:none;letter-spacing:-.01em;font-size:.9375rem;color:var(--ap-action)}
main .scenario-option{border-radius:12px;border-color:var(--ap-hairline-strong);background:var(--ap-surface);font-size:1rem}
main .scenario-option:hover{border-color:var(--ap-action)}
main .warn-card,main .match-item{border-radius:12px}

/* ---- Catalogue (courses/index.html) ---- */
main .course-catalogue-hero{background:var(--ap-ground);color:var(--ap-ink);border-bottom:0;padding:clamp(3.5rem,8vw,5rem) 0 clamp(2rem,4vw,3rem)}
main .course-catalogue-hero::after{content:none}
main .catalogue-heading h1{font-family:var(--ap-font);font-size:clamp(2.5rem,6vw,3.5rem);line-height:1.07;letter-spacing:-.015em;text-transform:none;font-weight:600;color:var(--ap-ink)}
main .catalogue-heading p{border-left:0;padding-left:0;color:var(--ap-muted)}
main .course-catalogue-hero .eyebrow{background:transparent;padding:0;color:var(--ap-action);text-transform:none;letter-spacing:-.01em;font-size:.9375rem;font-weight:600}
main .course-catalogue-hero .eyebrow .dot{display:none}
main .course-catalogue{background:var(--ap-ground)}
main .catalogue-tabs{gap:.5rem}
main .catalogue-tabs .tag-pill{border:1px solid var(--ap-hairline-strong);border-radius:999px;background:var(--ap-surface);color:var(--ap-ink);padding:.6rem 1rem;font-size:.875rem;font-weight:400;text-transform:none;letter-spacing:-.01em}
main .catalogue-tabs .tag-pill:hover{border-color:var(--ap-action);color:var(--ap-ink)}
main .catalogue-tabs .tag-pill.is-active{border:2px solid var(--ap-action);padding:calc(.6rem - 1px) calc(1rem - 1px);background:var(--ap-surface);color:var(--ap-ink);font-weight:600}
main .catalogue-search input{border-radius:999px;border:1px solid var(--ap-hairline-strong);background:var(--ap-surface);padding:.75rem 3rem .75rem 1.25rem;font-size:1.0625rem}
main .catalogue-search svg{right:1.1rem}
main .academy-level{border-top:0;padding-top:clamp(2.5rem,5vw,4rem)}
main .academy-level-number{font-family:var(--ap-font);font-weight:600;font-size:1.3125rem;color:var(--ap-subtle);letter-spacing:-.01em}
main .academy-level-heading h2{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.015em}
main .academy-level-heading p{color:var(--ap-muted)}
main .learning-grid{gap:1.5rem}
main .learning-card{border:1px solid var(--ap-hairline);border-radius:18px;overflow:hidden;background:var(--ap-surface)}
main .learning-card:hover{transform:none;box-shadow:none;border-color:var(--ap-hairline-strong)}
main .learning-card-image img{filter:none}
main .learning-card:hover .learning-card-image img{filter:none}
main .learning-card-image img.poster-fit{background:var(--ap-inset)}
main .course-state{left:12px;bottom:12px;border-radius:999px;padding:.3rem .7rem;background:rgba(29,31,30,.78);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);text-transform:none;letter-spacing:0;font-size:.75rem;font-weight:600}
main .learning-type{text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:400;color:var(--ap-subtle)}
main .learning-card h2{font-size:1.3125rem;line-height:1.2;letter-spacing:-.01em;margin-top:.75rem}
main .learning-card p{font-size:1rem;color:var(--ap-muted)}
main .learning-meta{font-size:.8125rem;color:var(--ap-subtle)}
main .learning-action{color:var(--ap-action);text-transform:none;letter-spacing:-.01em;font-size:1.0625rem;font-weight:400}
main .learning-action-muted{color:var(--ap-subtle)}
main .knowledge-check details{border:1px solid var(--ap-hairline);background:var(--ap-surface)}
main .card .knowledge-check details{background:var(--ap-inset);border-color:transparent}
main .card .knowledge-check details[open]{border-color:var(--ap-action)}

/* ---- Ishikawa course boxes (ishikawa-course.css hard-codes light fills) ---- */
main .ishikawa-learning{background:var(--ap-ground);color:var(--ap-ink)}
main .concept-grid>div,main .category-grid>div{border:1px solid var(--ap-hairline);border-radius:18px;background:var(--ap-surface)}
main .safety-boundary,main .statement-grid>div{border:0;border-radius:18px;background:var(--ap-caution-soft)}
main .statement-grid .good{background:var(--ap-action-soft)}
main .translation-notice,main .evidence-example,main .scenario{border:0;border-radius:18px;background:var(--ap-inset)}
main .original-fishbone{border-radius:18px}