/* Belmar — the level guide's scale panel, bands and note. Used by /levels and by the
   "What's my level?" modal on /request (the markup is stamped from levels.html by
   tools/build-pages.py). */
/* the scale — the home page's court panel, repurposed */
.scale-shell{background:var(--marine-600);border:2px solid var(--marine-700);border-radius:36px;box-shadow:var(--shadow-court);padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,36px);color:var(--cream-50);margin:0 0 56px}
.scale-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}
.scale-head .label{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;font-family:var(--font-sans)}
.scale-head .label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--lime-500);flex:none}
.scale-head .where{font-weight:600;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.72;font-family:var(--font-sans);white-space:nowrap}
.track{position:relative;display:flex;height:14px;border-radius:7px;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--cream-50) 85%,transparent)}
.track .seg-beg{flex:2.5;background:color-mix(in srgb,var(--cream-50) 22%,transparent)}
.track .seg-int{flex:2.0;background:color-mix(in srgb,var(--cream-50) 42%,transparent)}
.track .seg-adv{flex:2.5;background:color-mix(in srgb,var(--cream-50) 68%,transparent)}
.track-wrap{position:relative;margin:0 6px;padding-top:46px}
/* the slider (item 13): a native range over the track; lime ball thumb (lime is the ball) */
/* 9/24: scoped to the <input> — a bare .range also matched the band cards' "0 – 2.4" labels, which went
   absolute and piled up top-left of /levels over the banner */
input.range{position:absolute;left:0;right:0;top:31px;margin:0;width:100%;height:44px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;touch-action:pan-y;z-index:3}
input.range:focus{outline:none}
input.range::-webkit-slider-runnable-track{height:44px;background:transparent}
input.range::-moz-range-track{height:44px;background:transparent}
input.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:9px;border-radius:50%;background:var(--lime-500);border:2.5px solid var(--marine-700);box-shadow:0 3px 8px rgba(0,0,0,.35);cursor:grab}
input.range::-moz-range-thumb{width:21px;height:21px;border-radius:50%;background:var(--lime-500);border:2.5px solid var(--marine-700);box-shadow:0 3px 8px rgba(0,0,0,.35);cursor:grab}
input.range:active::-webkit-slider-thumb{cursor:grabbing}
input.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(175,212,32,.35),0 3px 8px rgba(0,0,0,.35)}
input.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(175,212,32,.35),0 3px 8px rgba(0,0,0,.35)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scale-shell .bubble{position:absolute;top:0;left:28.57%;transform:translateX(-50%);display:inline-flex;align-items:baseline;gap:8px;width:max-content;max-width:min(96%,560px);padding:6px 12px 7px;border-radius:12px;background:var(--cream-50);color:var(--ink-900);font-family:var(--font-sans);font-size:13px;line-height:1.35;white-space:normal;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.scale-shell .bubble .bv{font-family:var(--font-display);font-optical-sizing:none;font-variation-settings:"opsz" 10,"wght" 600;font-size:17px;color:var(--marine-600);flex:none}
.scale-shell .bubble .bd{font-weight:400;color:var(--text-body)}
/* near the ends the bubble anchors to the panel edge instead of centring on the handle, so it never shrinks against the edge */
.scale-shell .bubble.at-left{left:0!important;transform:none}
.scale-shell .bubble.at-right{left:auto!important;right:0;transform:none}
.scale-shell .bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--cream-50);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.scale-shell .bubble.at-left::after{left:12%}.bubble.at-right::after{left:88%}
/* the matching band card + row below light up; the track segments and legend stay static (Kat, 9/15) */
.band.is-on{border-color:var(--marine-400);box-shadow:0 0 0 2px color-mix(in srgb,var(--marine-400) 45%,transparent),var(--shadow-sm)}
.steps li.is-on{background:color-mix(in srgb,var(--lime-200) 55%,transparent);margin:0 -14px;padding-left:14px;padding-right:14px;border-radius:10px}
.steps li.is-on + li{border-top-color:transparent}
.tick{position:absolute;top:41px;left:28.57%;width:2px;height:24px;background:var(--cream-50);transform:translateX(-50%);border-radius:1px}
.ticks{position:relative;z-index:0;display:flex;justify-content:space-between;font-size:.74rem;font-weight:600;color:color-mix(in srgb,var(--cream-50) 85%,transparent);margin:10px 0 0;font-family:var(--font-sans)}
.ticks span{width:1em;text-align:center;margin:0 -.5em}
.tick-label{position:absolute;left:28.57%;top:90px;transform:translateX(-50%);white-space:nowrap;font-family:var(--font-sans);font-weight:600;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--cream-50) 75%,transparent)}
.legend{display:flex;justify-content:space-between;margin-top:52px;font-weight:600;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--cream-50) 75%,transparent);font-family:var(--font-sans)}
.floor{margin:22px 0 0;font-size:15px;line-height:1.6;color:rgba(247,238,224,.85);font-weight:300}
.floor strong{font-weight:600;color:rgb(247,238,224)}
/* the bands */
.bands{display:flex;flex-direction:column;gap:18px}
.band{display:grid;grid-template-columns:220px 1fr;background:var(--surface-card);border:1px solid var(--border-hair);border-radius:20px;box-shadow:var(--shadow-sm);padding:28px 32px}
.band .cat{display:flex;flex-direction:column;justify-content:center;gap:6px;padding-right:28px}
.band .cat h2{font-size:26px;line-height:1.1;margin:0}
.band .cat .range{font-family:var(--font-sans);font-weight:600;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.steps{list-style:none;margin:0;padding:0 0 0 28px;border-left:1px solid var(--border-hair);display:flex;flex-direction:column;justify-content:center}
.steps li{display:flex;align-items:baseline;gap:18px;padding:10px 0;font-size:16px;line-height:1.55;color:var(--text-body)}
.steps li + li{border-top:1px solid color-mix(in srgb,var(--border-hair) 55%,transparent)}
.steps .n{flex:0 0 84px;font-size:21px;font-weight:600;color:var(--marine-600);white-space:nowrap;font-variation-settings:"opsz" 10,"wght" 600}
.steps .min{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;background:var(--lime-200);color:var(--ink-900);font-family:var(--font-sans);font-weight:700;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;vertical-align:middle}
/* the note */
.note{margin:56px 0 0;font-size:17px;line-height:1.7;font-weight:300;max-width:620px;text-wrap:pretty}
.note strong{font-weight:600;color:var(--text-strong)}
.note .line{font-family:var(--font-display);font-optical-sizing:none;font-variation-settings:var(--fvs-display-fine);font-style:italic;font-size:24px;line-height:1.35;color:var(--text-strong);margin:26px 0 0}
.attrib{font-size:13.5px;color:var(--text-muted);margin:18px 0 0}
@media (max-width:1000px){
  .band{grid-template-columns:180px 1fr;padding:24px 26px}
}
@media (max-width:720px){
  .scale-shell{border-radius:24px;padding:20px 18px 22px;margin-bottom:44px}
  .bubble{white-space:normal;flex-direction:column;align-items:flex-start;gap:2px;max-width:min(80vw,300px);padding:6px 10px 7px}
  .bubble .bd{font-size:12.5px;line-height:1.35}
  .track-wrap{padding-top:92px}
  input.range{top:77px}
  .tick{top:87px}
  .tick-label{top:136px}
  .scale-head{margin-bottom:22px}
  .scale-head .where{display:none}
  .band{grid-template-columns:1fr;padding:20px 18px 8px;border-radius:16px}
  .band .cat{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:0 0 12px}
  .band .cat h2{font-size:22px}
  .steps{border-left:none;border-top:1px solid var(--border-hair);padding:6px 0 0}
  .steps li{gap:14px;padding:12px 0}
  .steps .n{flex-basis:64px;font-size:19px}
  .steps .min{display:block;margin:4px 0 0;width:fit-content}
  .note{margin-top:44px}
  .note .line{font-size:22px}
}