/* ==========================================================================
   Parameters (prototype): a designer's edit mode for refining the page live.
   Tile button → edit mode → hover text → click → radial menu → mini tool.
   ========================================================================== */

/* Edit mode */
/* The page cursor is drawn by .tune-tip (ring + style name), so the two never drift apart; the UI keeps a normal cursor */
.tune-on, .tune-on * { cursor: none !important; }
.tune-on .tune-ui, .tune-on .tune-ui * { cursor: default !important; }
.tune-on .tune-ui button, .tune-on .tune-ui input, .tune-on .tune-ui select, .tune-on .tune-ui [data-seg] { cursor: pointer !important; }

/* Sits up in the nav, like the pen bar (html[data-bars="bottom"] puts both back at the bottom) */
.tune-bar { position: fixed; top: 13px; left: 50%; translate: -50% calc(-100% - 40px); z-index: 131; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px);
  padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(22,21,20,.92); color: var(--paper); font: 500 13px/1 var(--sans);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 40px -16px rgba(0,0,0,.5); transition: translate .5s var(--ease); }
.tune-on .tune-bar { translate: -50% 0; }
.tune-bar b { font-weight: 600; white-space: nowrap; }
.tune-bar span { color: rgba(243,240,234,.7); white-space: nowrap; }
.tune-bar button { white-space: nowrap; flex: none; font: 500 12px/1 var(--sans); color: var(--paper); background: rgba(243,240,234,.12); border: 0; border-radius: 999px; padding: 8px 12px; }
.tune-bar button:hover { background: rgba(243,240,234,.22); }
.tune-bar button:disabled { opacity: .4; }

/* Hover + selection outlines */
.tune-hover, .tune-sel { position: fixed; z-index: 125; pointer-events: none; border-radius: 6px; opacity: 0;
  transition: opacity .15s, left .12s var(--ease), top .12s var(--ease), width .12s var(--ease), height .12s var(--ease); }
.tune-hover { box-shadow: 0 0 0 1.5px var(--blue-ink); background: rgba(156,198,236,.12); }
.tune-sel { box-shadow: 0 0 0 2px var(--blue-ink), 0 0 0 6px rgba(156,198,236,.35); }
.tune-hover.on, .tune-sel.on { opacity: 1; }
.tune-hover b { position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 6px; white-space: nowrap; font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--paper); background: var(--blue-ink); padding: 5px 7px; border-radius: 5px; }
.tune-hover.label-below b { bottom: auto; top: 100%; margin: 6px 0 0; }

/* The cursor ring, with the style under it named quietly beside it */
.tune-tip { position: fixed; left: 0; top: 0; z-index: 136; pointer-events: none; opacity: 0; will-change: translate; }
.tune-tip.on { opacity: 1; }
.tune-tip i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink);
  background: radial-gradient(circle, var(--blue-ink) 0 1.8px, transparent 2.3px); }
.tune-tip b { position: absolute; left: 16px; top: 14px; font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink-soft); background: rgba(243,240,234,.75);
  padding: 4px 6px; border-radius: 5px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; opacity: .9; transition: opacity .2s; }
.tune-tip.quiet b { opacity: 0; }

/* Radial menu */
/* Only scale animates on the ring itself: opacity or filter on an ancestor would delay the blur until it finishes,
   so the fade happens on the pieces inside instead */
.tune-ring { position: fixed; z-index: 132; width: 200px; height: 200px; margin: -100px 0 0 -100px; pointer-events: none; scale: .6;
  transition: scale .45s var(--ease); }
.tune-ring.on { pointer-events: auto; scale: 1; }
:is(.tune-ring, .ts-ring) > * { transition: opacity .25s var(--ease); }
.tune-ring:not(.on) > * { opacity: 0; }
.ring-blur { position: absolute; inset: 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
:is(.tune-ring, .ts-ring) svg { position: relative; }
.tune-ring svg { width: 100%; height: 100%; overflow: visible; }
.tune-ring [data-seg] > path { fill: rgba(250,248,244,.8); stroke: rgba(22,21,20,.07); transition: fill .2s; }
.tune-ring [data-seg]:hover > path, .tune-ring [data-seg].hot > path { fill: var(--ink); }
.tune-ring [data-seg] text { font: 500 12px/1 var(--sans); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; transition: fill .2s; }
.tune-ring [data-seg] .ico { color: var(--ink); transition: color .2s; }
.tune-ring [data-seg]:hover .ico, .tune-ring [data-seg].hot .ico { color: var(--paper); }
.tune-ring [data-seg]:hover text, .tune-ring [data-seg].hot text { fill: var(--paper); }
.tune-ring .hub { fill: var(--ink); }
.tune-ring .hub-t { font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; fill: var(--paper); text-anchor: middle; dominant-baseline: middle; }

/* Mini tool panels */
.tune-panel { position: fixed; z-index: 133; width: 290px; display: grid; gap: 14px; padding: 16px 16px 14px; border-radius: 18px; corner-shape: var(--corner);
  background: rgba(250,248,244,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(22,21,20,.08), 0 24px 60px -24px rgba(40,35,30,.4); font: 400 13px/1.4 var(--sans); color: var(--ink);
  opacity: 0; translate: 0 8px; filter: blur(4px); pointer-events: none; transition: opacity .3s var(--ease), translate .4s var(--ease), filter .3s var(--ease); }
.tune-panel.on { opacity: 1; translate: 0 0; filter: none; pointer-events: auto; }
.tp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-top b { font: 400 22px/1 var(--serif); }
.tp-top small { font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink-faint); }
.tp-x { all: unset; font-size: 18px; line-height: 1; color: var(--ink-faint); padding: 2px 4px; }
.tp-x:hover { color: var(--ink); }
.tp-row { display: grid; gap: 6px; }
.tp-row > span { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 12px; }
.tp-row output { font: 500 11.5px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink); }
.tune-panel input[type=range] { width: 100%; accent-color: var(--ink); }
.tune-panel select { font: 500 13px/1 var(--sans); padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(22,21,20,.15); background: #fff; color: var(--ink); }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chips[data-feel] { flex-wrap: nowrap; }   /* the four spring feels always share one row */
.tp-chips[data-feel] button { flex: 1 1 0; text-align: center; padding-inline: 4px; }
.tp-chips button { font: 500 12px/1 var(--sans); padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(22,21,20,.15); background: transparent; color: var(--ink-soft); }
.tp-chips button:hover { color: var(--ink); border-color: rgba(22,21,20,.4); }
.tp-chips button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tp-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tp-swatches button { aspect-ratio: 1; border-radius: 8px; corner-shape: var(--corner); border: 0; box-shadow: inset 0 0 0 1px rgba(22,21,20,.15); }
.tp-swatches button.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
/* Custom colour picker: saturation/brightness field, hue rail, preview and hex */
.tp-picker { display: grid; gap: 10px; --x: 0; --y: 0; --hx: 0; --hue: red; --pick: #000; }
.pk-area { position: relative; height: 120px; border-radius: 12px; corner-shape: var(--corner); cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue)); box-shadow: inset 0 0 0 1px rgba(22,21,20,.1); }
.pk-hue { position: relative; height: 14px; border-radius: 999px; cursor: ew-resize; touch-action: none; box-shadow: inset 0 0 0 1px rgba(22,21,20,.1);
  background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); }
.pk-dot, .pk-knob { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0,0,0,.35); transition: scale .35s cubic-bezier(.3,1.6,.4,1); }
.pk-dot { left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); background: var(--pick); }
.pk-knob { left: calc(var(--hx) * 100%); top: 50%; background: var(--hue); }
.pk-area.grab .pk-dot, .pk-hue.grab .pk-knob { scale: 1.35; }
.pk-row { display: flex; align-items: center; gap: 8px; }
.pk-prev { width: 28px; height: 28px; border-radius: 50%; background: var(--pick); box-shadow: inset 0 0 0 1px rgba(22,21,20,.15); flex: none; }
.pk-hex { flex: 1; min-width: 0; font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink); text-transform: uppercase;
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(22,21,20,.12); background: rgba(255,255,255,.6); outline: none; transition: border-color .2s; }
.pk-hex:focus { border-color: var(--blue-ink); }
.tp-foot { display: flex; gap: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.tp-foot button { flex: 1; font: 500 12px/1 var(--sans); padding: 9px 10px; border-radius: 10px; border: 0; background: rgba(22,21,20,.06); color: var(--ink); }
.tp-foot button.primary { background: var(--ink); color: var(--paper); }
.tp-foot button:hover { filter: brightness(.95); }
.tp-code { font: 11.5px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: var(--ink-soft); background: rgba(22,21,20,.04); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; max-height: 7.5em; overflow: auto; }

/* An element that's been tuned keeps a faint mark while editing */
.tune-on .tuned { outline: 1px dashed rgba(45,106,168,.45); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tune-ring, .tune-ring > *, .tune-panel { transition: opacity .01ms, scale .01ms; }
}

/* Tile illustration (Tools for the craft): a live, static example. The wheel is open on the name;
   its segments work on the name right here. "Edit this page's parameters" closes it until editing ends. */
.tune-stage { padding: 0; }
.ts-scene { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; }
/* Set exactly as the site's H3 (the work titles) */
.ts-word { position: absolute; left: 9%; top: 15%; font-family: var(--serif); font-size: clamp(32px, 3vw, 44px); line-height: .92; letter-spacing: -.01em; padding: 8px 10px; white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--blue-ink); border-radius: 6px; background: rgba(156,198,236,.12); transition: color .4s var(--ease); }
.ts-word > span { display: inline-block; }
.ts-tag { position: absolute; left: -1.5px; bottom: 100%; margin-bottom: 6px; white-space: nowrap;
  font: 500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0; color: var(--paper); background: var(--blue-ink); padding: 4px 6px; border-radius: 5px; }
.ts-ring { position: absolute; right: 3%; top: 30%; width: 50%; aspect-ratio: 1; transition: scale .5s var(--ease); }
.tune-stage.closed .ts-ring, .tune-stage.picked .ts-ring { scale: .6; pointer-events: none; }
.tune-stage.closed .ts-ring > *, .tune-stage.picked .ts-ring > * { opacity: 0; }
/* Chrome ignores masks inside a parent with smoothed corners and hidden overflow, so this tile lets it show */
.toolbox .b-stage.tune-stage { overflow: visible; }
.tune-stage.closed .ts-word { box-shadow: none; background: transparent; }
.tune-stage.closed .ts-tag { opacity: 0; }
.ts-tag, .ts-word { transition: opacity .3s, box-shadow .3s, background .3s, color .4s var(--ease); }
.ts-ring svg { width: 100%; height: 100%; overflow: visible; }
.ts-ring [data-seg] { cursor: pointer; }
.ts-ring [data-seg] > path { fill: rgba(250,248,244,.8); stroke: rgba(22,21,20,.07); transition: fill .2s; }
.ts-ring [data-seg] text { font: 500 12px/1 var(--sans); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; transition: fill .2s; }
.ts-ring [data-seg] .ico { color: var(--ink); transition: color .2s; }
.ts-ring [data-seg]:hover .ico, .ts-ring [data-seg].hot .ico { color: var(--paper); }
.ts-ring [data-seg]:hover > path, .ts-ring [data-seg].hot > path { fill: var(--ink); }
.ts-ring [data-seg]:hover text, .ts-ring [data-seg].hot text { fill: var(--paper); }
.ts-ring .hub { fill: var(--ink); }
.ts-ring .hub-t { font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace; fill: var(--paper); text-anchor: middle; dominant-baseline: middle; }
.ts-try { font: 500 14px/1 var(--sans); background: none; color: var(--ink); border: 0; border-bottom: 1px solid rgba(22,21,20,.25);   /* a quiet grey rule, turning blue on hover */
  padding: 0 0 3px; cursor: pointer; white-space: nowrap;
  position: absolute; left: 20px; bottom: 20px; transition: color .25s, border-color .25s, opacity .3s; }
.ts-try:hover { color: var(--blue-ink); border-color: var(--blue-ink); }   /* grey straight to blue, with the text */
/* The shortcut, as a small key in place of the arrow */
.tune-stage.closed .ts-try { opacity: .4; pointer-events: none; }
@media (max-width: 860px) { .tune-bar span { display: none; } }
@media (max-width: 560px) { .tune-bar { gap: 6px; padding: 6px 6px 6px 12px; font-size: 12px; } .tune-bar button { padding: 7px 9px; font-size: 11px; } }

/* Panel extras: curve editor, corner preview, spring graph, checkboxes */
.tp-curve { background: rgba(22,21,20,.04); border-radius: 12px; corner-shape: var(--corner); padding: 6px 10px; }
.tp-curve svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: none; }
.tune-panel .g-linear { stroke: rgba(22,21,20,.14); stroke-dasharray: 4 5; }
.tune-panel .g-arm { stroke: var(--blue-ink); stroke-width: 1.4; }
.tune-panel .g-curve { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.tune-panel .g-end { fill: var(--ink); }
.tune-panel .g-handle { fill: var(--paper); stroke: var(--blue-ink); stroke-width: 2.4; cursor: grab !important; }
.tune-panel .g-handle.drag { fill: var(--blue-soft); }
.tp-corner { background: rgba(22,21,20,.04); border-radius: 12px; corner-shape: var(--corner); padding: 10px; display: grid; place-items: center; }
.tp-corner svg { width: 96px; height: 96px; }
.tp-corner path { fill: var(--ink); }
.tp-spring { background: rgba(22,21,20,.04); border-radius: 12px; corner-shape: var(--corner); padding: 10px 12px; }
.tp-spring svg { width: 100%; height: 70px; display: block; overflow: visible; }
.tp-spring line { stroke: rgba(22,21,20,.15); stroke-dasharray: 4 5; }
.tp-spring polyline { fill: none; stroke: var(--ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.tp-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.tp-check input { accent-color: var(--ink); }
.tp-note { font-size: 12px; color: var(--ink-soft); }
.tune-panel { max-height: calc(100vh - 32px); overflow: auto; }

/* Tune mode corners: one radius per group of related shapes (matches GROUPS in tune.js) */
:root[style*="--tune-r-tools"] .toolbox .b-stage { border-radius: var(--tune-r-tools); }
:root[style*="--tune-r-work"] .project .shot { border-radius: var(--tune-r-work); }
:root[style*="--tune-r-prompt"] .prompt { border-radius: var(--tune-r-prompt); }
:root[style*="--tune-r-demo"] .gd .browser { border-radius: var(--tune-r-demo); }
:root[style*="--tune-r-portrait"] .hero .card { border-radius: var(--tune-r-portrait); }
:root[style*="--tune-r-case"] .tile { border-radius: var(--tune-r-case); }

/* Drag panels by their title bar */
.tune-panel .tp-top { cursor: grab; touch-action: none; user-select: none; margin: -16px -16px 0; padding: 16px 16px 0; }
.tune-on .tune-ui .tp-top { cursor: grab !important; }
.tune-panel.dragging, .tune-panel.dragging * { cursor: grabbing !important; }
.tune-panel.dragging { transition: none; box-shadow: 0 0 0 1px rgba(22,21,20,.1), 0 34px 70px -24px rgba(40,35,30,.5); }

/* Variable axes in the Type panel */
.tp-axes { display: grid; gap: 14px; padding: 12px; border-radius: 12px; corner-shape: var(--corner); background: rgba(22,21,20,.04); }
.tp-axes .tp-note { margin: 0; }
.tune-panel select { width: 100%; }

/* "Use this font for every heading": swaps the site's serif and its axes in one go */
:root[style*="--serif-axes"] :is(h1, h2, h3, .display, .triad, .name, .serif, .ts-word):not(.gd-right *) {
  font-weight: var(--serif-wght, 400); font-variation-settings: var(--serif-axes); font-optical-sizing: none; }

/* Wheel centre: click to cycle the selection through the site's text styles */
:is(.tune-ring, .ts-ring) .hubg { pointer-events: none; }   /* a label, not a button */
:is(.tune-ring, .ts-ring) .hubg text { pointer-events: none; }

/* Example: Corners selects the tile itself */
.tune-stage { transition: box-shadow .3s var(--ease); }
.tune-stage.corner-pick .ts-word { box-shadow: none; background: transparent; }
.tune-stage.corner-pick .ts-tag { opacity: 0; }

/* The rest of a text group, while one of its members is selected */
.tune-on .tune-peer { outline: 1.5px dashed var(--blue-ink); outline-offset: 5px; border-radius: 4px; }


/* A soft grey shadow under the wheel so it reads on dark text and light paper alike.
   It sits on its own layer (not as a filter on the wheel), so it never delays the frosted blur */
:is(.tune-ring, .ts-ring)::before { content: ""; position: absolute; inset: 4%; top: 9%; bottom: -1%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(22,21,20,.22), rgba(22,21,20,.1) 70%, transparent);
  filter: blur(14px); z-index: -1; transition: opacity .25s var(--ease); }
.tune-ring:not(.on)::before, .tune-stage.closed .ts-ring::before, .tune-stage.picked .ts-ring::before { opacity: 0; }
:is(.tune-ring, .ts-ring) { isolation: isolate; }

/* Page settings panels */
.tp-light { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tp-light label { display: grid; gap: 4px; justify-items: center; font-size: 11.5px; color: var(--ink-soft); }
.tp-light input[type=color] { width: 100%; height: 34px; border: 0; padding: 0; background: none; border-radius: 8px; cursor: pointer; }
.tp-grain { height: 56px; border-radius: 12px; corner-shape: var(--corner); background: var(--paper); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.tp-grain::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-img, none); opacity: calc(var(--grain-o, .2) * 2.5); mix-blend-mode: var(--grain-blend, multiply); }

[data-bars="bottom"] .tune-bar { top: auto; bottom: 20px; translate: -50% calc(100% + 40px); }
[data-bars="bottom"].tune-on .tune-bar { translate: -50% 0; }

/* The example (prompt and generated site) always stays as designed: page-wide font, easing and corner changes stop here */
.gd-right .mock, .gd-right .prompt { --ease: cubic-bezier(.2, .7, .1, 1); --corner: superellipse(1.4); }   /* the frame around the site can still be reshaped */
/* The switcher's own look (its bar, wheel and panels, and its tile while you tune the page) never takes the page-wide smoothing */
.tune-ui:not(.tune-stage) { --corner: superellipse(1.4); }   /* (the Fine tune tile itself can still be reshaped) */

/* On touch screens the switcher lives in its tile: the page-wide mode (and its "Try on this page") is for a mouse */
@media (hover: none) { .ts-try { display: none; } }

/* On a phone the tool panels are a sheet pinned to the bottom of the screen: they never get pushed below the fold
   as they grow, and scroll inside themselves if they're taller than there's room for */
@media (max-width: 700px) {
  .tune-panel { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto !important;
    max-height: min(68vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
}