/* =====================================================================
   Chart Your Course: the EMBLEM brand assessment
   Rebuilt on the index system: Archivo display, Sora body, --lime accent,
   lamp sections, the 3D island hero and the underwater descent.
   All color comes from the palette vars, so every Colors swatch applies.
   ===================================================================== */
#course{scroll-margin-top:24px}
.cy-grid{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}

/* ---------- left rail: lighthouse that fills as you go ---------- */
.cy-rail{position:sticky;top:32px;padding:26px 24px 22px;--lit:0;overflow:hidden}
.cy-rail .k{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}
.cy-tower{display:block;width:100%;max-width:220px;height:auto;margin:6px auto 0;overflow:visible}
.cy-tower .outline{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.cy-tower .rock{fill:rgba(255,255,255,.04);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.cy-tower .slit{fill:#000}
.cy-tower .lamp-core{fill:var(--lime);opacity:calc(.25 + var(--lit) * .75)}
.cy-tower .halo{fill:var(--lime);opacity:calc(var(--lit) * .4);filter:blur(6px)}
.cy-tower .beam{transform-origin:110px 98px;animation:cySweep 8s ease-in-out infinite alternate;opacity:calc(.12 + var(--lit) * .75);transition:opacity .8s}
@keyframes cySweep{from{transform:rotate(-9deg)}to{transform:rotate(7deg)}}
#fill{transition:y .9s cubic-bezier(.3,.7,.2,1)}
.cy-pct{margin:10px 0 0;text-align:center}
.cy-pct b{display:block;font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:40px;line-height:1;color:var(--lime)}
.cy-pct span{display:block;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cy-chart{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);counter-reset:s}
.cy-chart li{counter-increment:s}
.cy-chart button{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:6px;
  padding:8px 6px;font:400 14.5px "Sora",system-ui,sans-serif;color:var(--muted);min-height:36px}
.cy-chart button::before{content:"0" counter(s);font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:900;font-size:12px;opacity:.75}
.cy-chart button::after{content:"";width:8px;height:8px;transform:rotate(45deg);box-shadow:inset 0 0 0 1.5px var(--graphite-2)}
.cy-chart button.done{color:var(--ink)}
.cy-chart button.done::after{background:color-mix(in oklab,var(--lime) 55%,var(--graphite-2));box-shadow:none}
.cy-chart button[aria-current="step"]{color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--lime);background:color-mix(in oklab,var(--lime) 7%,transparent)}
.cy-chart button[aria-current="step"]::after{background:var(--lime);box-shadow:0 0 0 4px color-mix(in oklab,var(--lime) 22%,transparent),0 0 14px var(--lime)}
.cy-chart button:disabled{cursor:default;opacity:.5}
.cy-chart button:not(:disabled):hover{color:var(--ink)}

/* mobile progress strip */
.cy-mini{display:none}

/* ---------- Wick, the keeper's guide ---------- */
.cy-wick{display:flex;align-items:flex-end;gap:14px;margin-bottom:36px}
.cy-wick svg{width:84px;height:84px;flex:none;animation:cyBob 3.6s ease-in-out infinite}
@keyframes cyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cy-bubble{position:relative;margin:0;padding:14px 18px;max-width:46ch;font-size:15.5px;line-height:1.55;color:#D4D4D4;
  background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--lime);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cy-bubble small{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:4px}

/* ---------- stages ---------- */
#course-form{display:block}
.cy-saved{margin:0 0 24px;font-size:14px;color:var(--muted)}
.stage h2{outline:none;font-size:clamp(40px,5.2vw,72px);line-height:.95;margin:0 0 14px}
.cy-intro h2{font-size:clamp(44px,6.4vw,92px);line-height:.92;margin:0 0 22px}
.cy-intro h2 .outline{display:block}
.cy-lede{margin:0 0 40px;max-width:34em;font-size:19px;line-height:1.6;color:var(--muted)}
.cy-intro p{max-width:36em;font-size:18px;line-height:1.72;color:#D4D4D4;margin:0 0 18px}
.cy-intro .cy-facts{font-size:15px;color:var(--muted)}
.stage.enter{animation:cyRise .5s cubic-bezier(.2,.7,.2,1)}
@keyframes cyRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.q{border:0;margin:0 0 38px;padding:0;min-width:0}
.q > legend,.q > label{display:block;padding:0;margin-bottom:14px;font-size:16px;font-weight:600;color:var(--ink)}
.hint{display:block;margin-top:4px;font-size:14px;font-weight:300;color:var(--muted)}
.opt-note{font-size:14px;font-weight:300;color:var(--muted)}
.cy-field{display:flex;flex-direction:column;margin:0 0 30px}
.cy-field > label{display:block;padding:0;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--ink)}
.cy-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.cy-words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cy-words .cy-field{margin:0}
#course-form select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 54%,calc(100% - 14px) 54%;background-size:6px 6px;background-repeat:no-repeat}
#course-form select option{background:#090909;color:var(--ink)}
#course-form textarea{min-height:140px}
#course-form [aria-invalid="true"]{border-color:#FF8F8F}
.q[data-invalid] > legend{color:#FF9B9B}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the first choice: two large hulls (built on .choice) */
.cy-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cy-kinds .choice span{padding:22px 22px 24px}
.cy-kinds .choice svg{display:block;width:40px;height:40px;stroke:var(--ink);fill:none;stroke-width:1.6;margin-bottom:16px;transition:stroke .2s ease}
.cy-kinds .choice span b{font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:800;font-size:22px;margin-bottom:6px}
.cy-kinds .choice span i{font-size:14px}
.cy-kinds .choice input:checked + span svg{stroke:var(--lime);filter:drop-shadow(0 0 8px color-mix(in oklab,var(--lime) 60%,transparent))}

/* single-choice pills: round marker on the shared .tagc chip */
.tagc.r span::before{border-radius:50%;transform:none;width:10px;height:10px}
.tagc.r input:checked + span::before{box-shadow:0 0 10px var(--lime)}
.cy-q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.cy-q-grid.wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cy-q-grid .tagc span{width:100%;min-height:48px}

/* tide slider */
.cy-tide output{display:block;margin-bottom:14px;font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:800;font-size:30px;color:var(--lime)}
.cy-tide output span{font-family:"Sora",sans-serif;font-weight:300;font-size:16px;color:var(--muted);margin-left:10px}
#course-form input[type=range]{width:100%;appearance:none;-webkit-appearance:none;background:transparent;border:0;padding:0;min-height:0;height:34px;cursor:pointer;box-shadow:none}
#course-form input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--lime-deep),var(--lime) var(--fillpct,33%),var(--graphite-2) var(--fillpct,33%))}
#course-form input[type=range]::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--lime-deep),var(--lime) var(--fillpct,33%),var(--graphite-2) var(--fillpct,33%))}
#course-form input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#000;border:3px solid var(--lime);margin-top:-9px;box-shadow:0 0 16px color-mix(in oklab,var(--lime) 55%,transparent)}
#course-form input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#000;border:3px solid var(--lime)}
#course-form input[type=range]:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.cy-tide-scale,.cy-spec-row .ends{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* reach: your signal today vs. your goal */
.cy-reach{position:relative;height:84px;margin:0 0 40px;overflow:hidden;background:rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px var(--line)}
.cy-reach .track{position:absolute;left:8%;right:8%;top:50%;height:1px;background:var(--graphite-2)}
.cy-reach .tick{position:absolute;top:50%;width:1px;height:12px;margin-top:-6px;background:var(--muted);opacity:.5}
.cy-reach .ray{position:absolute;top:50%;height:6px;margin-top:-3px;background:linear-gradient(90deg,var(--lime-deep),var(--lime));transition:left .5s,width .5s;box-shadow:0 0 18px var(--lime)}
.cy-reach .pin{position:absolute;transform:translate(-50%,-50%);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;transition:left .5s;white-space:nowrap}
.cy-reach .pin.now{top:24%;background:#000;color:var(--ink);box-shadow:inset 0 0 0 1px var(--muted)}
.cy-reach .pin.goal{top:76%;background:var(--lime);color:#111}
.cy-reach .empty{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:var(--muted)}

/* channels */
.cy-handles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin-top:22px}
.cy-handles .cy-field{margin-bottom:18px}
.cy-handles label{font-size:13px;font-weight:600;color:var(--muted)}

/* nav row (shares .nav-row from the inner-page system) */
#course-form .nav-row{flex-wrap:wrap;margin-top:12px}
.nav-row .spacer{flex:1}
.cy-link{appearance:none;background:none;border:0;cursor:pointer;color:var(--muted);font:400 15px "Sora",system-ui,sans-serif;padding:10px 4px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.cy-link:hover{color:var(--ink)}
#next.final{box-shadow:0 0 30px color-mix(in oklab,var(--lime) 45%,transparent)}
#next:disabled{opacity:.6;cursor:progress}
#err{flex-basis:100%}

/* done */
.cy-done h2{outline:none;font-size:clamp(46px,7vw,96px);line-height:.92;margin:0 0 20px}
.cy-done h2 .name{display:block;color:var(--lime);text-shadow:0 0 30px color-mix(in oklab,var(--lime) 40%,transparent)}
.cy-done p{max-width:34em;font-size:18px;line-height:1.7;color:#D4D4D4}
.cy-done .hero-ctas{margin-top:30px;justify-content:flex-start}
.cy-rail.lit .beam{opacity:1}
.cy-rail.lit .halo{opacity:.65}

/* motion off: follows the dock's Pause motion */
html.motion-paused .cy-tower .beam,html.motion-paused .cy-wick svg{animation-play-state:paused}
html.motion-paused .stage.enter{animation:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  #deck{scroll-margin-top:72px}
  .cy-grid{grid-template-columns:minmax(0,1fr)}
  .cy-rail{display:none}
  .cy-mini{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;margin:0 calc(-1 * clamp(22px,5vw,64px)) 28px;
    padding:12px clamp(22px,5vw,64px);padding-top:calc(12px + env(safe-area-inset-top,0px));
    background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .cy-mini svg{width:22px;height:36px;flex:none;overflow:visible;color:var(--ink)}
  .cy-mini .bar{flex:1;height:3px;background:var(--graphite-2);overflow:hidden}
  .cy-mini .bar i{display:block;height:100%;width:calc(var(--lit,0) * 100%);background:var(--lime);box-shadow:0 0 10px var(--lime);transition:width .6s}
  .cy-mini .where{font-size:13px;font-weight:600;white-space:nowrap}
}
@media (max-width:600px){
  .cy-kinds,.cy-two,.cy-handles,.cy-words{grid-template-columns:minmax(0,1fr)}
  #course-form .nav-row .btn{flex:1}
  .cy-wick svg{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  .stage.enter{animation:none}
  #fill,.cy-reach .ray,.cy-reach .pin{transition:none}
  .cy-tower .beam,.cy-wick svg{animation:none}
}

/* ---------- shared by the athlete and new-presence assessments ---------- */
/* answer-revealed block, e.g. a parent or guardian's details for under-18s */
.cy-cond{margin:-14px 0 38px;padding:22px 22px 2px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px var(--line),inset 3px 0 0 var(--lime)}
.cy-cond .note{margin:0 0 20px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.cy-cond .cy-field{margin-bottom:20px}
/* personality spectrums */
.cy-specs{display:grid;gap:30px;margin:0 0 42px}
.cy-spec-row > label{display:block;margin-bottom:6px;font-size:15px;font-weight:600;color:var(--ink)}
.cy-spec-row output{display:block;margin-bottom:2px;font-family:"Archivo",sans-serif;font-stretch:118%;font-weight:800;font-size:21px;color:var(--lime)}
.cy-spec-row .ends{gap:12px;margin-top:4px}
/* spam trap: off-screen, so people never see it but naive bots fill it in */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}