/* Shared study controls. Only descendants lose their old independent positions. */
:root{--foil-opacity:.28}
.study-controls{position:fixed;top:43px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:flex-start;gap:8px;width:max-content;max-width:calc(100vw - 48px);color:var(--wine);font:500 11px/1.5 Manrope,sans-serif;letter-spacing:0}
.study-controls>.palette-lab,.study-controls>.type-lab,.study-controls>.foil-lab{position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;flex:none;z-index:1}
.study-controls>details[open]{z-index:3}
.study-controls>.palette-lab summary{width:222px;min-width:222px}
.study-controls>.type-lab summary{width:174px;min-width:174px}
.foil-lab summary{display:flex;align-items:center;gap:10px;width:140px;min-height:44px;padding:12px 16px;border:1px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:0 5px 18px var(--palette-shadow);list-style:none;font-weight:700;cursor:pointer}
.foil-lab summary::-webkit-details-marker{display:none}
#foil-current{margin-left:auto;font-variant-numeric:tabular-nums}
.foil-chevron{font-size:16px;font-weight:500;transition:transform 200ms var(--ease)}
.foil-lab[open] .foil-chevron{transform:rotate(180deg)}
.foil-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:280px;max-height:calc(100svh - 120px);overflow:auto;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 15px 40px var(--palette-shadow)}
.foil-value-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.foil-value-row label{font:400 10px/1.5 var(--font-mono,'IBM Plex Mono',monospace);text-transform:uppercase;letter-spacing:.04em}
.foil-value-row output{font:600 16px/1.5 Manrope,sans-serif;font-variant-numeric:tabular-nums}
#foil-opacity{display:block;width:100%;min-height:44px;margin:0;accent-color:var(--violet);cursor:pointer}
.foil-scale{display:flex;justify-content:space-between;gap:12px;font-size:10px}
#foil-description{margin:14px 0 18px;font-size:11px;line-height:1.6}
.foil-actions{border-top:1px solid var(--line);padding-top:10px}
.foil-actions button{min-height:36px;padding:4px 0;border:0;background:transparent;color:var(--wine);font:600 11px Manrope,sans-serif;cursor:pointer}
.foil-actions button:hover{color:var(--violet)}
.foil-lab summary:focus-visible,#foil-opacity:focus-visible,.foil-actions button:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
@media(max-width:1150px) and (min-width:701px){
  .study-controls>.palette-lab summary{width:112px;min-width:112px}
  .study-controls>.type-lab summary{width:160px;min-width:160px}
  .foil-lab summary{width:128px;padding-inline:12px}
}
@media(max-width:700px){
  .study-controls{top:auto;left:auto;right:28px;bottom:26px;transform:none;flex-direction:column-reverse;gap:10px;max-width:70px}
  .study-controls>.palette-lab summary,.study-controls>.type-lab summary,.foil-lab summary{width:70px;min-width:0;min-height:50px;padding:10px 12px;justify-content:center;gap:0;border-color:var(--wine)}
  #foil-current,.foil-chevron{display:none}
  .study-controls .palette-panel,.study-controls .type-panel,.foil-panel{top:auto;bottom:calc(100% + 10px);left:auto;right:0;transform:none;width:min(280px,calc(100vw - 55px))}
  .study-controls .palette-panel{max-height:calc(100svh - 105px)}
  .study-controls .type-panel{max-height:calc(100svh - 165px)}
  .foil-panel{max-height:calc(100svh - 225px)}
  .foil-actions button{min-height:44px}
}
@supports not (accent-color:auto){
  #foil-opacity{-webkit-appearance:none;appearance:none;background:transparent}
  #foil-opacity::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,var(--violet) var(--range-progress,28%),var(--line) var(--range-progress,28%))}
  #foil-opacity::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border:2px solid var(--paper);border-radius:50%;background:var(--violet)}
  #foil-opacity::-moz-range-track{height:6px;border-radius:6px;background:var(--line)}
  #foil-opacity::-moz-range-progress{height:6px;border-radius:6px;background:var(--violet)}
  #foil-opacity::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--paper);border-radius:50%;background:var(--violet)}
}
@media(prefers-reduced-motion:reduce){.foil-chevron{transition:none}}