/* ══════════════════════════════════════════════════════════════════════
   studio.css — the colour controls, back, and only on the trip pages.

   The original lived on the landing page and was deleted on 22 August for
   two real reasons: it painted its defaults by script after first paint, so
   the page flashed one palette and swapped to another, and it was a large
   panel nobody could use on a phone.

   Both are fixed rather than inherited. The saved palette is applied by a
   blocking script in <head>, before anything paints, so there is no swap.
   The panel is a sheet on a phone instead of a floating card, and it opens
   only when asked.

   It is on every page now, landing page included: it is a tool we hand to
   the owner, and he starts on the home page. Ten roles in three groups with
   a hairline title over each, so the list reads as three decisions rather
   than one long wall of swatches.
   ══════════════════════════════════════════════════════════════════════ */

#stOpen{
  position:fixed;left:22px;bottom:22px;z-index:2147483000;
  display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 10px;border:none;cursor:pointer;
  border-radius:99px;
  background:var(--page);
  box-shadow:0 2px 18px -6px color-mix(in srgb,var(--body) 60%,transparent),
             inset 0 0 0 1px color-mix(in srgb,var(--body) 22%,transparent);
  font-family:var(--sans),system-ui,sans-serif;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--body);
}
#stOpen .dots{display:flex;gap:3px}
#stOpen .dots i{width:9px;height:16px;border-radius:2px;display:block}

#stPanel{
  position:fixed;left:22px;bottom:22px;z-index:2147483001;
  width:340px;max-height:min(78vh,720px);overflow:auto;
  padding:20px 20px 16px;border-radius:8px;
  background:var(--page);
  box-shadow:0 18px 60px -22px color-mix(in srgb,var(--body) 75%,transparent),
             inset 0 0 0 1px color-mix(in srgb,var(--body) 22%,transparent);
  font-family:var(--sans),system-ui,sans-serif;color:var(--body);
  transform:translateY(10px) scale(.98);opacity:0;pointer-events:none;
  transform-origin:left bottom;
  transition:opacity .28s ease,transform .34s cubic-bezier(.2,.8,.3,1);
}
html.st-open #stPanel{opacity:1;transform:none;pointer-events:auto}
html.st-open #stOpen{opacity:0;pointer-events:none}

.st-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.st-head b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.st-head button{background:none;border:none;cursor:pointer;color:inherit;
  font-family:inherit;font-size:11px;opacity:.55;padding:2px 4px}
.st-head button:hover{opacity:1}

/* a group title, set like every other label on the site */
.st-rule{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 11px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.5;
}
.st-rule::after{content:'';flex:1;height:1px;
  background:color-mix(in srgb,var(--body) 22%,transparent)}

.st-note{font-size:11.5px;line-height:1.5;opacity:.6;margin:-6px 0 16px}
.st-note b{font-weight:500;opacity:1}

.st-group{margin-bottom:15px}
.st-label{display:block;font-size:11px;letter-spacing:.05em;opacity:.6;margin-bottom:7px}
.sw{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.sw button{
  aspect-ratio:1;border:none;border-radius:3px;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--body) 18%,transparent);
}
.sw button[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px var(--page), 0 0 0 2px var(--body);
}

#stPresets{display:flex;flex-wrap:wrap;gap:6px}
.preset{display:flex;cursor:pointer;border-radius:3px;overflow:hidden;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--body) 18%,transparent)}
.preset i{width:11px;height:22px;display:block}
.preset:hover{box-shadow:inset 0 0 0 1px var(--body)}

/* ── the two tabs ─────────────────────────────────────────────────────
   What it is printed IN, and what it is printed WITH. Two decisions, and
   putting fourteen sliders under ten swatch rows made one long wall out of
   both of them. */
.st-tabs{
  display:flex;gap:2px;margin:-6px 0 16px;padding:2px;border-radius:4px;
  background:color-mix(in srgb,var(--body) 8%,transparent);
}
.st-tabs button{
  flex:1;border:none;cursor:pointer;padding:7px 10px;border-radius:3px;
  background:none;color:inherit;font-family:inherit;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;
}
.st-tabs button.on{background:var(--page);opacity:1;
  box-shadow:0 1px 4px -2px color-mix(in srgb,var(--body) 50%,transparent)}

/* whole grounds, one click each — the same job the palette presets do */
.st-chips{display:flex;flex-wrap:wrap;gap:5px}
.st-chips button{
  border:none;cursor:pointer;padding:6px 11px;border-radius:99px;
  background:none;color:inherit;font-family:inherit;font-size:11px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--body) 22%,transparent);
}
.st-chips button:hover{box-shadow:inset 0 0 0 1px var(--body)}

/* the number sits on the label's line, so the slider gets the full width */
.st-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.st-label-row output{font-variant-numeric:tabular-nums;opacity:.85}

/* what the control actually does, in his language. Worth the pixels: a
   slider called "contraste del relieve" means nothing until you are told
   it is the one that makes small type readable. */
.st-hint{display:block;font-size:10.5px;line-height:1.45;opacity:.42;margin-top:6px}

.st-range{display:flex;align-items:center;gap:10px}
.st-range input{flex:1;accent-color:var(--body)}
.st-range output{font-variant-numeric:tabular-nums;font-size:11px;opacity:.6;min-width:3ch}

/* a phone gets a sheet, not a floating card — the old panel was unusable
   at this width and that is half of why it was deleted */
/* the handoff. It is the only thing in the panel that is not a colour, so
   it gets the one filled button and sits under a hairline of its own. */
.st-foot{
  position:sticky;bottom:-16px;margin:16px -20px -16px;padding:14px 20px 16px;
  background:var(--page);
  box-shadow:0 -1px 0 color-mix(in srgb,var(--body) 14%,transparent);
}
.st-copy{
  width:100%;border:none;cursor:pointer;padding:13px 16px;border-radius:3px;
  background:var(--body);color:var(--page);
  font-family:inherit;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:opacity .2s ease;
}
.st-copy:hover{opacity:.85}
.st-copy.ok{background:none;color:var(--body);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--body) 40%,transparent)}
/* only ever appears where the clipboard API is unavailable */
.st-fallback{width:100%;margin-top:8px;height:64px;font-size:11px;
  font-family:var(--mono),monospace;padding:8px;border-radius:3px;
  border:1px solid color-mix(in srgb,var(--body) 25%,transparent);
  background:none;color:var(--body);resize:none}

@media(max-width:640px){
  #stPanel{left:0;right:0;bottom:0;width:auto;border-radius:14px 14px 0 0;
    max-height:72vh;transform:translateY(100%);transform-origin:bottom}
  html.st-open #stPanel{transform:none}
  #stOpen{left:14px;bottom:14px}
  .sw{grid-template-columns:repeat(9,1fr)}
}
@media(prefers-reduced-motion:reduce){ #stPanel{transition:none} }
@media print{ #stOpen,#stPanel{display:none} }