/* Course outcomes share one quiet, legible treatment across the atlas. */
.preview-benefits {
  display:block;
  padding:16px 17px;
  margin:22px 0;
  border-left:3px solid var(--action);
  background:var(--tint);
  border-radius:0 4px 4px 0;
}
.preview-benefits > span {display:block;color:var(--action);font:600 10px/1.5 var(--sans);letter-spacing:1.1px}
.preview-benefits ul,.island-detail-grid .preview-benefits ul {list-style:none;padding:0;margin:12px 0 0;color:var(--ink);font-size:13px;line-height:1.6}
.preview-benefits li,.island-detail-grid .preview-benefits li {position:relative;padding-left:21px;margin:10px 0;font-weight:500}
.preview-benefits li:first-child{margin-top:0}.preview-benefits li:last-child{margin-bottom:0}
.preview-benefits li:before {content:'↗';position:absolute;left:0;top:0;color:var(--action)}
html {scrollbar-gutter:stable}
html.course-open,body.course-open {overflow:hidden;overscroll-behavior:none}
body.course-open:before {content:'';position:fixed;inset:98px 0 0;background:var(--paper);z-index:10}
.course-open .atlas-explorer {
  position:fixed;z-index:11;top:110px;bottom:18px;left:50%;transform:translateX(-50%);
  width:min(1500px,calc(100% - 80px));margin:0;background:var(--paper);
}
.course-open .explorer-sidebar {position:relative;top:0;max-height:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;padding-top:4px}
.course-open .explorer-canvas {height:100%;min-height:0}
.course-open .map-content {height:100%!important;min-height:0!important}
.course-open .living-atlas.is-focused {position:relative;top:0;height:100%!important;max-height:none;min-height:0;touch-action:pan-y}
.course-open .scene-bottom {pointer-events:none}
@media(max-width:760px){
  #course-preview {display:none!important}
  .explorer-sidebar #theme-picker {margin-bottom:0}
  .mobile-course-peek {
    position:sticky;top:max(82px,calc(100svh - var(--peek-height,380px) - 12px - env(safe-area-inset-bottom)));
    left:auto;right:auto;bottom:auto;display:flex;flex-direction:column;align-items:stretch;
    max-height:min(450px,56svh);margin:0 10px;padding:14px;gap:12px;
    background:#fff8ecfa;border:1px solid #bca787;border-radius:6px;box-shadow:0 5px 24px #4031222b;
  }
  .peek-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-shrink:0}
  .peek-heading>div {min-width:0}
  .mobile-course-peek .peek-heading small {font:500 9px/1.4 var(--sans);letter-spacing:1.3px;color:var(--action)}
  .mobile-course-peek h3 {font:500 25px/1.06 var(--serif);margin:5px 0 0;text-wrap:pretty}
  .mobile-course-peek button.peek-toggle {width:44px;height:44px;min-width:44px;padding:0;min-height:44px;margin:-6px -6px 0 0;background:transparent;color:var(--ink);font-size:25px;border:1px solid var(--line);border-radius:4px}
  .peek-description {min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:3px}
  .peek-description>p {font-size:12px;line-height:1.6;margin:0 0 14px;color:var(--muted)}
  .peek-description .preview-benefits {display:block;padding:12px;margin:0;border-left-width:3px}
  .peek-description .preview-benefits>span {font-size:8px;letter-spacing:1px}
  .peek-description .preview-benefits ul {font-size:12px;line-height:1.5;margin-top:10px}
  .peek-description .preview-benefits li {margin:9px 0;padding-left:20px}
  .mobile-course-peek button.peek-open {display:flex;align-items:center;justify-content:space-between;flex-shrink:0;width:100%;min-height:46px;padding:12px 15px;font:500 12px/1.3 var(--sans);background:var(--ink);color:var(--surface)}
  .mobile-course-peek button:disabled {opacity:.55;cursor:default}
  .is-focused .mobile-course-peek {display:none}
  body.course-open:before {inset:76px 0 0}
  .course-open .atlas-explorer {top:80px;bottom:12px;width:calc(100% - 24px);display:block}
  .course-open .explorer-sidebar {display:none}
  .course-open .scene-top {align-items:flex-start}
  .course-open .course-map-heading {max-width:calc(100% - 90px)}
}
@media(max-height:520px) and (max-width:760px){
  .mobile-course-peek {max-height:58svh;padding:10px;gap:7px}
  .mobile-course-peek h3 {font-size:21px}
  .mobile-course-peek button.peek-open {min-height:40px;padding:9px 12px}
}
.is-focused .archipelago-title{opacity:0}
@media(max-width:760px){
  .mobile-course-peek.peek-arriving{animation:peek-glow 1.25s ease-out both}
  .peek-arriving .peek-heading,.peek-arriving .peek-description{animation:peek-reveal .45s ease-out both}
}
@keyframes peek-glow{0%{box-shadow:0 5px 24px #4031222b;border-color:#bca787}35%{box-shadow:0 0 0 3px #c76f5130,0 0 25px #c76f5145;border-color:#a65b3d}100%{box-shadow:0 5px 24px #4031222b;border-color:#bca787}}
@keyframes peek-reveal{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.mobile-course-peek,.peek-heading,.peek-description{animation:none!important}}
.reduce-motion .mobile-course-peek,.reduce-motion .peek-heading,.reduce-motion .peek-description{animation:none!important}
/* Keep the same map width during the camera transition. */
.course-open .atlas-explorer{width:inherit}
.course-open .header{position:fixed;inset:0 0 auto;width:100%}
/* A changing sticky card must not move the document's scroll anchor. */
html{overflow-anchor:none}
@media(max-height:648px){
  .course-open .map-content{overflow-y:auto;overscroll-behavior:contain}
  .course-open .living-atlas.is-focused{height:520px!important}
  .course-open .scene-top{position:sticky;top:10px;margin:10px;left:auto;right:auto}
}
html.dialog-open{overflow:hidden;overscroll-behavior:none}
.pay-option strong{white-space:nowrap}
@media(max-width:480px){
  #pay-dialog .pay-options{grid-template-columns:minmax(0,1fr)}
  #pay-dialog .pay-heading{padding-top:26px}
  #pay-dialog .pay-option{padding:16px;gap:7px}
  #pay-dialog .pay-option strong{font-size:34px;line-height:1.1}
  #pay-dialog .pay-option small{font-size:11px;line-height:1.5}
}