/* RP Light switcher v5 */
.rpl{all:unset;box-sizing:border-box;position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;align-self:center}
.rpl-v{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(184,147,90,.6);transition:background-color .22s ease,color .22s ease}
.rpl-m{width:56%;height:auto;fill:currentColor;transition:transform .42s cubic-bezier(.3,.7,.2,1);transform-origin:50% 50%;display:block}
.rpl:focus{outline:none}
.rpl:focus-visible .rpl-v{outline:2px solid #b8935a;outline-offset:2px}
.rpl-lb{position:absolute;right:calc(100% + 4px);top:50%;transform:translateY(-50%);padding:3px 7px;white-space:nowrap;pointer-events:none;
 font-family:JBM,ui-monospace,monospace;font-size:12px;line-height:1.2;font-variant-caps:all-small-caps;letter-spacing:.18em;opacity:0;transition:opacity .25s ease}
.rpl-lb.on{opacity:1}
.rpl.rm .rpl-v,.rpl.rm .rpl-m,.rpl.rm .rpl-lb{transition:none!important}
@media (prefers-reduced-motion:reduce){.rpl-v,.rpl-m,.rpl-lb{transition:none!important}.rpl-m{transform:none!important}}
html body .hud nav.rpl-has{gap:20px!important}
@media (max-width:760px){
 .rpl-v{width:40px;height:40px}
 .rpl{margin:0 4px} /* v6: 8px clear each side of the 44px target at 390px */
 /* the phone header row has no room for a fourth control beside the wordmark: the Follow pill steps out of the row
    while the switcher is present (Follow stays in the menu panel) */
 html body .hud nav .hud-cta{display:none!important}
}
/* theme-name popup (tap only) */
.rpt{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;align-items:center;gap:3px;
 padding:9px 22px 10px;border-radius:2px;pointer-events:none;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,8px);
 background:rgba(14,11,9,.88);color:#b8935a;box-shadow:inset 0 0 0 1px rgba(184,147,90,.5),0 10px 28px rgba(0,0,0,.35);
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .22s ease,transform .32s cubic-bezier(.3,.7,.2,1),visibility 0s}
.rpt.top{bottom:auto}
.rpt[data-tone=bright]{background:rgba(251,246,234,.92);color:#7e3a10;box-shadow:inset 0 0 0 1px rgba(126,58,16,.42),0 10px 26px rgba(90,50,10,.18)}
.rpt-k{font-family:JBM,ui-monospace,monospace;font-size:10px;line-height:1;font-variant-caps:all-small-caps;letter-spacing:.32em;opacity:.72;padding-left:.32em}
.rpt-n{font-family:SG,system-ui,sans-serif;font-size:17px;line-height:1.15;font-weight:500;letter-spacing:.06em}
.rpt.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s ease,transform .32s cubic-bezier(.3,.7,.2,1),visibility 0s}
.rpt.on.off{opacity:0;transition:opacity .45s ease,transform .45s ease,visibility 0s}
.rpt.rm,.rpt.rm.on{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.rpt,.rpt.on{transform:translate(-50%,0)!important}.rpt.on{transition:opacity .22s ease}}
@media (max-width:760px){.rpt{padding:8px 20px 9px}.rpt-n{font-size:16px}}
/* t3 QA: focus ring at 3:1 or better on the light rooms; white in Studio */
html[data-theme=sunflower] .rpl:focus-visible .rpl-v,html[data-theme=northlight] .rpl:focus-visible .rpl-v,html[data-theme=grown] .rpl:focus-visible .rpl-v{outline-color:#2a160a}
html[data-theme=gallery] .rpl:focus-visible .rpl-v{outline-color:#f2f2f2}
.rpt[data-tone=mono]{background:rgba(8,8,8,.9);color:#f2f2f2;box-shadow:inset 0 0 0 1px rgba(242,242,242,.4),0 6px 18px rgba(0,0,0,.35)}
html:is([data-theme=sunflower],[data-theme=northlight],[data-theme=grown]) .skip{color:#fff8e4!important}
html[data-theme=gallery]{--outline:#f2f2f2}
html[data-theme=gallery] .rpl-v{box-shadow:inset 0 0 0 1px rgba(242,242,242,.55)}
/* t18: the circle names itself. Lighting with RP Studio under it, set on the circle in the theme mark color; a tap shows the theme name beside it for about 1.5s */
.rpl .rpl-m{display:none}
.rpl .rpl-tx{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;white-space:nowrap;pointer-events:none;color:inherit;transition:opacity .25s ease;font-family:SG,system-ui,sans-serif;text-transform:none}
.rpl .rpl-t1{font-size:8.5px;font-weight:600;letter-spacing:.01em}
.rpl .rpl-t2{font-size:6.5px;font-weight:500;letter-spacing:0;margin-top:1px}
.rpl.say .rpl-tx{opacity:.25}
.rpl-lb{font-family:SG,system-ui,sans-serif;font-variant-caps:normal;letter-spacing:.04em;font-size:13px;border-radius:2px}
@media (max-width:760px){.rpl .rpl-t1{font-size:9.5px}.rpl .rpl-t2{font-size:7.5px}.rpl-lb{font-size:12px}}
.rpl.rm .rpl-tx{transition:none}
html body .rpl .rpl-lb,html body #hud .rpl .rpl-lb{position:absolute!important;right:calc(100% + 6px)!important;left:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;text-transform:none!important;z-index:5;display:block!important;padding:4px 8px!important;box-shadow:0 0 0 1px currentColor}
@media (max-width:760px){html body .rpl .rpl-lb,html body #hud .rpl .rpl-lb{right:50%!important;top:calc(100% + 8px)!important;transform:translateX(50%)!important}}

/* t23: the dial. Seven notches on the rim and one brighter index mark turn with each press (360/7 = 51.43deg per theme),
   accumulating so the circle never spins backward. The words stay upright (they sit outside the turning layer).
   Only a transform on an absolutely placed layer inside the fixed-size circle: no layout change, no drift. */
.rpl .rpl-v{position:relative}
.rpl .rpl-dial{position:absolute;inset:0;border-radius:50%;pointer-events:none;transform-origin:50% 50%;will-change:transform;transition:transform .45s cubic-bezier(.33,0,.2,1)}
.rpl .rpl-dial::before{content:"";position:absolute;inset:1px;border-radius:50%;opacity:.42;
 background:repeating-conic-gradient(from -3deg,currentColor 0 6deg,transparent 6deg 51.4286deg);
 -webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 2.4px),#000 calc(100% - 2px));mask:radial-gradient(circle closest-side,transparent calc(100% - 2.4px),#000 calc(100% - 2px))}
.rpl .rpl-dial::after{content:"";position:absolute;left:50%;top:1px;width:3px;height:3.5px;margin-left:-1.5px;border-radius:1.5px;background:currentColor}
.rpl .rpl-tx{position:relative;z-index:1}
.rpl.rm .rpl-dial{transition:none}
@media (prefers-reduced-motion:reduce){.rpl .rpl-dial{transition:none!important}}
/* t24: larger Lighting dial words. Desktop 12px in a 60px circle; phone keeps the 44px button row, words at the largest size that clears the ring */
.rpl{width:62px;height:56px}
.rpl-v{width:60px;height:60px;margin-block:-2px}
.rpl .rpl-t1{font-size:12px;letter-spacing:0}
.rpl .rpl-t2{font-size:9.5px;margin-top:2px}
@media (max-width:760px){.rpl{width:44px;height:44px}.rpl-v{width:42px;height:42px}.rpl .rpl-t1{font-size:10px;letter-spacing:-.02em}.rpl .rpl-t2{font-size:8px;margin-top:1px}}