/* partials/_course_panel_styles.html -- moved here from that partial's inline <style>
   (2026-09-22). The partial links this file where the block was, so every
   page that includes the partial gets the CSS without knowing about it. */
  /* ---- course summary panel (owner 2026-09-13) ----
     Shared by /sim-racing-courses/ and the homepage course cinematic. The colour tokens
     and the font are scoped onto the dialog itself: the homepage has no .crs-page body
     class to inherit them from, and the site-wide h1-h4 rule would otherwise set the
     panel headings in Orbitron. Same values as .crs-page, so the courses page is
     unchanged. */
  .acp-dlg{--crs-text:#F4F8FD;--crs-bd:rgba(120,148,210,.20);--crs-bd-hi:rgba(120,148,210,.34);--crs-line:rgba(120,148,210,.10);
    --crs-blue:#5BC3F9;--crs-red:#E32636;--crs-muted:#A6B6CC;--crs-dim:#74869E}
  .acp-dlg,.acp-dlg h3,.acp-dlg h4,.acp-dlg button{font-family:'Inter',system-ui,-apple-system,sans-serif}
  .acp-dlg{padding:0;border:0;background:transparent;color:var(--crs-text);width:min(760px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;overflow:visible}
  .acp-dlg::backdrop{background:rgba(2,5,12,.74);backdrop-filter:blur(3px)}
  .acp-dlg-card{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border:1px solid var(--crs-bd-hi);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#0c1626,#070c16);box-shadow:0 40px 90px rgba(0,0,0,.6)}
  .acp-dlg-close{position:absolute;top:10px;right:10px;z-index:3;margin:0}
  .acp-dlg-close button{width:38px;height:38px;border-radius:50%;border:1px solid var(--crs-bd-hi);background:rgba(4,7,13,.72);color:#fff;font-size:24px;line-height:1;cursor:pointer}
  .acp-dlg-close button:hover{border-color:var(--crs-blue)}
  .acp-dlg-hero{position:relative;flex:0 0 auto;height:clamp(120px,22vw,170px);overflow:hidden;background:#070c16}
  .acp-dlg-hero img{width:100%;height:100%;object-fit:cover;opacity:.55}
  .acp-dlg-hero-t{position:absolute;left:0;right:0;bottom:0;padding:16px 22px;background:linear-gradient(180deg,transparent,rgba(5,8,16,.94))}
  .acp-dlg-kick{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--crs-blue);margin-bottom:5px}
  .acp-dlg-hero h3{margin:0;font-size:clamp(19px,2.6vw,25px);font-weight:800;line-height:1.15;color:#fff;letter-spacing:-.01em;padding-right:44px}
  .acp-dlg-meta{margin:6px 0 0;font-size:13px;color:var(--crs-muted)}
  .acp-dlg-body{overflow-y:auto;overscroll-behavior:contain;padding:4px 22px 6px}
  .acp-dlg-sec{padding:16px 0;border-top:1px solid var(--crs-line)}
  .acp-dlg-sec:first-child{border-top:0}
  .acp-dlg-sec h4{margin:0 0 9px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--crs-dim)}
  .acp-dlg-sec p{margin:0;font-size:15px;line-height:1.55;color:var(--crs-text)}
  .acp-dlg-mods{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 20px;counter-reset:acpm}
  .acp-dlg-mods li{counter-increment:acpm;position:relative;padding-left:27px;font-size:14px;line-height:1.4;color:var(--crs-muted)}
  .acp-dlg-mods li::before{content:counter(acpm,decimal-leading-zero);position:absolute;left:0;top:1px;font-size:11px;font-weight:800;color:var(--crs-blue)}
  .acp-dlg-more{margin-top:8px!important;font-size:13px!important;color:var(--crs-dim)!important}
  .acp-dlg-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--crs-bd);background:#000}
  .acp-dlg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .acp-dlg-play{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#070c16;cursor:pointer;color:#fff;text-align:left}
  .acp-dlg-play img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .2s}
  .acp-dlg-play:hover img,.acp-dlg-play:focus-visible img{opacity:.62}
  /* The focus ring is an overlay: an outline is clipped outside the box and hidden
     inside it by the absolutely positioned caption and player. */
  .acp-dlg-play:focus-visible,.acp-dlg-video:focus-visible{outline:none}
  .acp-dlg-play:focus-visible::after,.acp-dlg-video:focus-visible::after{content:"";position:absolute;inset:0;z-index:2;border:2px solid #fff;border-radius:11px;pointer-events:none}
  .acp-dlg-body:focus-visible{outline:2px solid var(--crs-blue);outline-offset:-2px}
  body:has(dialog.acp-dlg[open]){overflow:hidden}
  @media (max-height:500px){ .acp-dlg-hero{height:88px} }
  .acp-dlg-play-i{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--crs-red);box-shadow:0 10px 30px rgba(227,38,54,.45)}
  .acp-dlg-play-i svg{width:24px;height:24px;fill:#fff;margin-left:3px}
  .acp-dlg-play-t{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.86));display:flex;flex-direction:column;gap:3px}
  .acp-dlg-play-t b{font-size:15px;line-height:1.3}
  .acp-dlg-play-t em{font-style:normal;font-size:12.5px;color:var(--crs-muted)}
  .acp-dlg-drill b{color:#fff}
  .acp-dlg-drill span{margin-left:6px;font-size:13px;color:var(--crs-dim)}
  .acp-dlg-note{margin-top:6px!important;font-size:13.5px!important;color:var(--crs-muted)!important}
  .acp-dlg-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 22px;border-top:1px solid var(--crs-bd);background:rgba(4,7,13,.62)}
  .acp-dlg-cta{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:10px;background:var(--crs-red);color:#fff!important;font-weight:800;font-size:14px;letter-spacing:.02em;text-decoration:none}
  .acp-dlg-cta:hover{filter:brightness(1.08)}
  .acp-dlg-foot > span{font-size:13px;color:var(--crs-muted)}
  @media (max-width:560px){ .acp-dlg-mods{grid-template-columns:minmax(0,1fr)} .acp-dlg-body,.acp-dlg-foot{padding-left:16px;padding-right:16px} .acp-dlg-cta{width:100%} }