/* Shared type, spacing and controls for the course journey and reader. */
.ui-icon{display:block;width:20px;height:20px;flex:0 0 20px;pointer-events:none}
.explorer-sidebar{container-name:course-panel;container-type:inline-size;scrollbar-gutter:stable;scrollbar-color:#b8aa96 transparent}
.theme-label,#course-preview .eyebrow,.island-detail-grid .eyebrow{font:500 10px/1.5 var(--sans);letter-spacing:1.5px}
#theme-picker{appearance:none;-webkit-appearance:none;font:13px/1.5 var(--sans);min-height:48px;margin:12px 0 24px;padding:12px 44px 12px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326251F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
#course-preview h3,.island-detail-grid h3{font:500 36px/1.1 var(--serif);letter-spacing:-.02em;margin:12px 0 20px;overflow-wrap:break-word}
.preview-intro,.island-detail-grid>div>p:not(.eyebrow){font:400 13px/1.65 var(--sans);margin:0}
.preview-benefits{margin:24px 0;padding:16px}
.preview-benefits>span{font:600 10px/1.5 var(--sans);letter-spacing:1.1px}
.preview-benefits ul,.island-detail-grid .preview-benefits ul{font:500 13px/1.6 var(--sans);margin:12px 0 0;padding:0}
.preview-benefits li,.island-detail-grid .preview-benefits li{font-size:13px;line-height:1.6;margin:12px 0;padding-left:24px}
.preview-benefits li:first-child{margin-top:0}.preview-benefits li:last-child{margin-bottom:0}
.preview-benefits li:before{top:0;line-height:1.6}
.island-progress{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;border-block:1px solid var(--line);padding:20px 0;margin:0 0 24px;font:400 12px/1.5 var(--sans)}
.island-progress .progress-wrap{display:grid;grid-template-columns:auto minmax(48px,1fr);align-items:center;gap:16px;min-width:0}
.island-progress .progress-wrap>span{white-space:nowrap}
.island-progress .progress-track{width:100%;height:3px;margin:0}
.island-progress .course-level{font:400 12px/1.5 var(--sans);color:var(--muted);margin:0}
.island-progress .course-resume{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;width:100%;min-height:44px;padding:10px 0 0;font:500 13px/1.5 var(--sans);text-align:left;text-decoration:none;color:var(--ink)}
.course-resume>span{text-decoration:underline;text-underline-offset:5px}
.course-resume .ui-icon{margin:0;width:18px;height:18px;flex-basis:18px}
.island-detail-grid .gate-note{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;gap:12px;margin:24px 0;padding:0 0 0 14px;background:none;border-left:1px solid var(--gold);font:400 12px/1.6 var(--sans)}
.gate-note>.ui-icon{width:18px;height:18px;flex-basis:18px;margin-top:1px;color:var(--action)}
.gate-note strong{display:block;font-weight:500;line-height:1.5;color:var(--ink)}
.island-detail-grid .gate-note p{font:400 12px/1.6 var(--sans);margin:8px 0 0;color:var(--muted)}
.route-program{margin:24px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.route-program summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;min-height:56px;font:500 13px/1.5 var(--sans)}
.summary-icon{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;line-height:1;transform:none;transition:transform .2s}
.summary-icon .ui-icon{width:18px;height:18px}
.route-program[open] summary .summary-icon{transform:rotate(45deg)}
.route-program .lesson-list{margin:0;padding:0 0 8px;overflow:visible;max-height:none}
.island-detail-grid .lesson-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:8px;min-height:76px;padding:16px 12px;border-bottom:1px solid var(--line);border-radius:3px;text-align:left;transition:background .15s}
.island-detail-grid .lesson-row:last-child{border-bottom:0}
.island-detail-grid .lesson-num{width:auto;min-width:0;font:500 11px/1.5 var(--sans);font-variant-numeric:tabular-nums}
.island-detail-grid .lesson-info{display:grid;gap:4px;min-width:0}
.island-detail-grid .lesson-row strong{font:500 13px/1.5 var(--sans);overflow-wrap:break-word}
.island-detail-grid .lesson-row small{font:400 11px/1.5 var(--sans)}
.island-detail-grid .status-tag{font:400 10px/1.4 var(--sans);padding:4px 6px;justify-self:end;margin:0}
.course-footnote{font:400 11px/1.6 var(--sans);margin:16px 0 0;padding:0 0 16px;color:var(--muted);opacity:1}
@container course-panel (max-width:340px){
  #course-preview h3,.island-detail-grid h3{font-size:30px}
  .island-detail-grid .lesson-row{grid-template-columns:22px minmax(0,1fr);align-items:start;column-gap:10px;padding:14px 12px}
  .island-detail-grid .lesson-num{padding-top:2px}
  .island-detail-grid .status-tag{grid-column:2;justify-self:start}
}
.close-dialog{display:grid;place-items:center;width:44px;height:44px;padding:0;line-height:1;right:12px;top:12px;color:var(--ink)}
.close-dialog .ui-icon{width:20px;height:20px}
.close-dialog:hover{background:var(--tint);border-radius:4px}
.reader-back,.reader-previous{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;font:400 13px/1.5 var(--sans);min-height:44px;padding:10px 0}
.reader-back .ui-icon,.reader-previous .ui-icon{width:18px;height:18px;flex-basis:18px}
.reader-header{gap:24px;font:400 13px/1.5 var(--sans)}
.reader-header>span{min-width:0;overflow-wrap:break-word}
.reader-header small{font:400 11px/1.5 var(--sans)}
.reader-program button{gap:12px;padding:12px;font:400 13px/1.5 var(--sans);min-height:56px}
.reader-program button>span:last-child{min-width:0;overflow-wrap:break-word}
.reader-number{font:500 11px/1.5 var(--sans);flex-basis:20px;padding-top:2px;font-variant-numeric:tabular-nums}
.reader-program small{font:400 11px/1.4 var(--sans);margin-top:4px}
.reader-intro{margin-bottom:32px}.reader-intro .eyebrow{font:500 10px/1.5 var(--sans);margin-bottom:16px}
.reader-intro h1{line-height:1.08;letter-spacing:-.02em;overflow-wrap:break-word}
.lesson-body{font:400 15px/1.8 var(--sans)}
.lesson-body p{margin:0 0 24px}
.lesson-body h2,.lesson-body h3{line-height:1.15;margin:32px 0 16px;overflow-wrap:break-word}
.lesson-body h4{margin:24px 0 12px}
.lesson-body ul,.lesson-body ol{margin:16px 0 24px;padding-left:24px}
.lesson-body li{margin:12px 0;padding-left:4px}
.lesson-body blockquote{margin:24px 0;padding:20px 24px}
.lesson-body img{margin:24px auto}
.reader-notes{margin-top:40px;padding-top:24px}
.reader-notes p{font:400 13px/1.6 var(--sans);margin:8px 0 16px}
.reader-notes small,.lesson-source,.reader-demo{font:400 11px/1.6 var(--sans)}
.reader-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:32px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.reader-footer .button{font:500 13px/1.5 var(--sans);min-height:48px;padding:14px 18px;gap:16px;white-space:normal;text-align:left}
.reader-footer .button>span{min-width:0}
.reader-footer .ui-icon{margin:0}
.point-tip{padding:8px 10px}.point-tip b{line-height:1.15}.point-tip small{line-height:1.5;margin-bottom:4px}
.course-map-heading{padding:10px 12px}.course-map-heading strong{line-height:1.12}
@media(max-width:760px){
  .mobile-course-peek{padding:14px;gap:12px}
  .peek-heading{align-items:center;gap:12px}
  .mobile-course-peek .peek-heading small{font:500 10px/1.5 var(--sans);letter-spacing:1.2px}
  .mobile-course-peek h3{font:500 25px/1.1 var(--serif);letter-spacing:-.02em;margin:4px 0 0}
  .mobile-course-peek button.peek-toggle{display:grid;place-items:center;align-self:center;width:44px;height:44px;min-width:44px;margin:0;padding:0;line-height:1}
  .peek-toggle .ui-icon{width:18px;height:18px;transition:transform .2s}
  .peek-toggle[aria-expanded=false] .ui-icon{transform:rotate(180deg)}
  .peek-description{padding-right:0}
  .peek-description>p{font:400 13px/1.6 var(--sans);margin:0 0 16px}
  .peek-description .preview-benefits{padding:12px;margin:0}
  .peek-description .preview-benefits>span{font:600 9px/1.5 var(--sans);letter-spacing:1px}
  .peek-description .preview-benefits ul{font:500 13px/1.6 var(--sans);margin-top:12px}
  .peek-description .preview-benefits li{font-size:13px;line-height:1.6;padding-left:22px;margin:12px 0}
  .peek-description .preview-benefits li:first-child{margin-top:0}.peek-description .preview-benefits li:last-child{margin-bottom:0}
  .mobile-course-peek button.peek-open{font:500 13px/1.5 var(--sans);min-height:48px;padding:12px 14px;gap:12px}
  .peek-open .ui-icon{width:18px;height:18px;flex-basis:18px}
  .reader-header{padding:12px 20px;gap:12px;min-height:68px;flex-wrap:wrap}
  .reader-header>span{font:400 12px/1.5 var(--sans);flex-basis:140px}
  .reader-sidebar{padding:20px 20px 0}
  .reader-program summary{align-items:center;font:500 13px/1.5 var(--sans);padding:12px;min-height:48px}
  .reader-program[open] summary .summary-icon{transform:rotate(180deg)}
  .reader-main{padding:28px 20px}
  .reader-intro{margin-bottom:24px}.reader-intro .eyebrow{font-size:10px;letter-spacing:1px}
  .lesson-body{font-size:14px;line-height:1.8}
  .lesson-body blockquote{padding:16px 20px}
  .reader-footer{flex-direction:column-reverse;align-items:stretch;gap:12px;padding-top:24px}
  .reader-footer .button{width:100%}
  .reader-previous{align-self:flex-start}
}
@media(prefers-reduced-motion:reduce){.summary-icon,.peek-toggle .ui-icon{transition:none}}
.reduce-motion .summary-icon,.reduce-motion .peek-toggle .ui-icon{transition:none}
.island-progress .course-resume{padding:10px 0}
.course-resume>span{margin:0}
.route-program[open] summary .summary-icon,.reader-program[open] summary .summary-icon{transform:none}
.summary-icon .ui-icon{transition:transform .2s}
.route-program[open] summary .summary-icon .ui-icon{transform:rotate(45deg)}
@media(max-width:760px){.reader-program[open] summary .summary-icon .ui-icon{transform:rotate(180deg)}}
@media(prefers-reduced-motion:reduce){.summary-icon .ui-icon{transition:none}}
.reduce-motion .summary-icon .ui-icon{transition:none}
@media(max-width:760px){
  .peek-toggle[aria-expanded=false] .ui-icon{transform:none}
  .peek-toggle[aria-expanded=true] .ui-icon{transform:rotate(180deg)}
}
@media(max-width:760px) and (max-height:520px){
  .mobile-course-peek{padding:10px;gap:8px;max-height:calc(100svh - 100px)}
  .mobile-course-peek h3{font-size:21px}
  .mobile-course-peek button.peek-open{min-height:44px;padding:10px 12px}
  .peek-description>p,.peek-description .preview-benefits ul,.peek-description .preview-benefits li{font-size:12px}
  .peek-description .preview-benefits{padding:10px}
}
#course-preview .button>span,.reader-footer .button>span{font:inherit;margin:0}
#course-preview .button:hover,.reader-footer .button:hover{transform:none}
.point-tip b{overflow-wrap:break-word}
@media(max-width:760px){.reader-notes textarea{font-size:16px}}