/* Compact previews share the full lessons' Option 1 type, colors and media. */
body[data-stage="starting-point"] main { max-width:1200px; }
body[data-stage="starting-point"] .flow-label { display:none; }
#starting-point .sp-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#starting-point .gl-page-heading { padding-top:18px; }
.sp-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:24px 0 0; list-style:none; gap:10px; }
.sp-progress button { width:100%; height:100%; min-height:76px; display:flex; gap:12px; align-items:flex-start; padding:13px; text-align:left; border:1px solid var(--gl-line); border-radius:10px; background:transparent; color:var(--gl-muted); font-size:.8125rem!important; font-weight:600; }
.sp-progress button[aria-current="step"] { background:var(--gl-wash); border-color:var(--gl-blue); color:var(--gl-ink); }
.sp-step { color:var(--gl-blue); font-variant-numeric:tabular-nums; }
.sp-progress small { display:block; font-weight:400; margin-top:4px; font-size:.75rem; }
.sp-notice { margin-top:22px; border:1px solid var(--gl-line); border-radius:11px; padding:0 18px; }
.sp-notice summary { padding:14px 0; min-height:48px; color:var(--gl-ink); font-size:.875rem!important; font-weight:600!important; }
.sp-notice summary span { color:var(--gl-muted); font-size:.75rem; font-weight:400; margin-left:12px; }
.sp-notice .gl-cues { padding:4px 0 18px; }
#starting-point .gl-teaching h3 { font-size:.875rem; font-weight:650; margin:0 0 5px; }
#starting-point .gl-teaching h3:not(:first-child) { margin-top:16px; }
.sp-preference { padding:25px 0; border-top:1px solid var(--gl-line); }
#starting-point .sp-preference h2 { font-size:1.3rem; line-height:1.35; margin:0 0 8px; letter-spacing:-.02em; }
.sp-preferences { display:flex; gap:10px; flex-wrap:wrap; border:0; padding:0; margin:18px 0 25px; }
.sp-preference-option { display:flex; align-items:center; gap:10px; padding:13px 23px; min-height:50px; border:1px solid var(--gl-line); border-radius:9px; background:var(--gl-white); cursor:pointer; font-size:.9375rem; }
.sp-preference-option input { accent-color:var(--gl-blue); width:17px; height:17px; margin:0; }
.sp-preference-option:has(input:checked) { border-color:var(--gl-blue); background:var(--gl-wash); }
.sp-preference-option:has(input:focus-visible) { outline:3px solid var(--gl-blue); outline-offset:3px; }
.sp-navigation { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
#starting-point .sp-navigation .gl-primary { margin-left:auto; }
.sp-secondary { min-height:48px; padding:11px 20px; border:1px solid var(--gl-line); border-radius:9px; background:var(--gl-white); color:var(--gl-ink); font-size:.875rem!important; font-weight:600!important; }
#starting-point button:disabled { opacity:.5; cursor:default; }
#starting-point .sp-storage-note { margin-top:17px; margin-bottom:0; }
.sp-recommendation { display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center; padding:25px; border:1px solid var(--gl-line); border-radius:16px; background:var(--gl-white); }
#starting-point .sp-recommendation h2 { font-size:1.75rem; line-height:1.2; letter-spacing:-.03em; margin:0 0 16px; }
#starting-point .sp-recommendation p { font-size:.9375rem; }
.sp-other,.sp-summary { margin-top:32px; }
#starting-point .sp-other h2,#starting-point .sp-summary h2 { font-size:1.2rem; margin:0 0 14px; }
.sp-topic-link { display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; padding:17px 0; border:0; border-bottom:1px solid var(--gl-line); background:none; color:var(--gl-ink); text-align:left; font-weight:600!important; }
.sp-topic-link small { display:block; color:var(--gl-muted); font-size:.8125rem; font-weight:400; margin-top:4px; }
.sp-summary ul { list-style:none; margin:0; padding:0; }
.sp-summary li { display:grid; grid-template-columns:minmax(0,1fr) 110px auto; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--gl-line); font-size:.875rem; }
.sp-summary li strong,.sp-summary li div span { display:block; }
.sp-summary li div span { color:var(--gl-muted); font-size:.8125rem; margin-top:3px; }
.sp-status { color:var(--gl-muted); }
.sp-empty { padding:26px; background:var(--gl-white); border:1px solid var(--gl-line); border-radius:14px; }
@media(max-width:840px) { .sp-progress { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .sp-progress { gap:8px; margin-top:18px; }
  .sp-progress button { gap:8px; padding:11px; min-height:80px; }
  .sp-preferences { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .sp-preference-option { padding:12px 8px; gap:6px; justify-content:center; font-size:.8125rem; }
  .sp-navigation { gap:10px 16px; }
  #starting-point .sp-navigation .gl-primary { width:100%; margin-left:0; }
  .sp-recommendation { grid-template-columns:1fr; padding:18px; gap:22px; }
  .sp-summary li { grid-template-columns:minmax(0,1fr) auto; gap:8px 15px; }
  .sp-summary li .sp-status { grid-column:1; grid-row:2; }
  .sp-summary li button { grid-column:2; grid-row:1/3; }
  .sp-notice summary span { display:block; margin:3px 0 0 16px; }
}