/* deploy/_shared/jelly-chrome/jelly-chrome.css
 * Tokens only: --ground, --ink, --accent, --border, --radius. No colour of
 * its own and no fallbacks; the page that mounts the family sets the theme.
 * Surfaces are transparent: the gel is drawn by the shared WebGL field
 * (jelly-surface.mjs) under these elements.
 *
 * Size: every length is a multiple of --jc-u = 1px * --jc-scale (default 1),
 * so one variable scales the whole family. The field reads the resolved
 * --jc-u (registered below as a <length>) to scale the gel's depth, bevel,
 * shadow and physics with it. */

@property --jc-u {
  syntax: '<length>';
  inherits: true;
  initial-value: 1px;
}

.jc-root {
  --jc-u: calc(1px * var(--jc-scale, 1));
  /* --jc-font / --jc-font-features / --jc-font-mono: bring your own type;
     unset = inherit from the page. UI text is solid: weight 500 (labels and
     buttons 500-600), near-full ink, a hair of negative tracking; never a
     thin grey. */
  /* r5 (astigmatism): every word is solid bright ink, hints and placeholders
     included (0.92+); nothing is told apart by fading it. No painted shadows
     or halos under text or glyphs: legibility comes from the gel itself
     (veil / tint in the field), never from a drawn shadow. */
  --jc-soft: color-mix(in srgb, var(--ink) 96%, transparent);
  --jc-faint: color-mix(in srgb, var(--ink) 92%, transparent);
  --jc-hint: color-mix(in srgb, var(--ink) 92%, transparent);
  color: var(--ink);
  font: inherit;
  font-family: var(--jc-font, inherit);
  font-feature-settings: var(--jc-font-features, normal);
  font-weight: 500;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
:where(.jc-root) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
/* Keyboard focus: the field draws a soft jelly ring in the gel around the
   control (jelly-surface focus ring, measured >= 3:1). No browser outline. */
.jc-root :focus-visible { outline: none; }
/* No WebGL2 (plain glass): a soft ring in the accent, still >= 3:1. */
html.jc-fallback .jc-root :focus-visible { outline: calc(2 * var(--jc-u)) solid color-mix(in srgb, var(--accent) 60%, var(--ink)); outline-offset: calc(3 * var(--jc-u)); }
.jc-root svg { width: calc(var(--jc-icon, 20) * var(--jc-u)); height: calc(var(--jc-icon, 20) * var(--jc-u)); flex: none; }
.jc-surface { background: transparent; }

/* Plain glass, the last resort when WebGL2 is missing. */
html.jc-fallback .jc-surface {
  background: color-mix(in srgb, var(--ground) 52%, transparent);
  -webkit-backdrop-filter: blur(calc(18 * var(--jc-u))) saturate(1.6);
  backdrop-filter: blur(calc(18 * var(--jc-u))) saturate(1.6);
  box-shadow: inset 0 0 0 var(--jc-u) var(--border);
}

/* ---------- dock ---------- */
.jc-dock { --jc-item: calc(46 * var(--jc-u)); position: fixed; left: 50%; bottom: calc(26 * var(--jc-u)); transform: translateX(-50%); z-index: 50; }
.jc-dock__body {
  display: flex; align-items: flex-end; gap: calc(6 * var(--jc-u));
  padding: calc(9 * var(--jc-u)) calc(16 * var(--jc-u)); border-radius: calc(999 * var(--jc-u));
}
.jc-dock__probe { position: absolute; width: var(--jc-item); height: 0; visibility: hidden; pointer-events: none; }
.jc-dock__item { position: relative; width: var(--jc-item); height: var(--jc-item); border-radius: 50%; display: grid; place-items: center; color: var(--jc-soft); transition: color 160ms ease; }
.jc-dock__item:hover, .jc-dock__item[data-hot="true"] { color: var(--ink); }
/* Current / open: the glyph takes a touch of the accent (kept bright, >= 3:1 on the lit gel); the gel under it is lit by the field. */
.jc-dock__item[aria-current] { color: color-mix(in srgb, var(--accent) 30%, var(--ink)); }
.jc-root .jc-dock__item svg { width: 60%; height: 60%; min-width: calc(26 * var(--jc-u)); min-height: calc(26 * var(--jc-u)); }
/* Detached: no pill, each item is its own droplet, so they need air between them. */
.jc-dock[data-variant="detached"] .jc-dock__body { gap: calc(16 * var(--jc-u)); padding: calc(9 * var(--jc-u)) calc(10 * var(--jc-u)); }
/* Collapsed: the dock is one bubble (the field draws it); this is its button. */
.jc-dock__bubble {
  position: absolute; left: 50%; top: 50%; width: calc(var(--jc-item) + 18 * var(--jc-u)); height: calc(var(--jc-item) + 18 * var(--jc-u));
  transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: var(--ink);
}
.jc-dock__bubble[hidden] { display: none; }
.jc-dock__bubble[data-current] { color: color-mix(in srgb, var(--accent) 30%, var(--ink)); }
.jc-root .jc-dock__bubble svg { width: 52%; height: 52%; }
.jc-dock[data-collapsed="true"] .jc-dock__body { pointer-events: none; }
/* Grab / stretch: the gel areas take touch drags themselves (no pan); the
   textarea keeps its own scrolling, the palette list keeps native scroll. */
.jc-dock__body, .jc-dock__bubble, .jc-prompt__body { touch-action: none; }
.jc-prompt__input { touch-action: pan-y; }
.jc-dock__item[hidden], .jc-dock[hidden], .jc-dock__sat[hidden] { display: none; }
.jc-dock__item { -webkit-touch-callout: none; user-select: none; }
.jc-root .jc-dock__item[data-lift="true"] svg { transform: scale(1.14); transition: transform 260ms cubic-bezier(0.3, 1.8, 0.5, 1); }
/* A satellite: an item pinched off the dock into its own small orb (drawn by the field). */
.jc-dock__sat {
  --jc-item: calc(46 * var(--jc-u));
  position: fixed; left: 0; top: 0; z-index: 2; width: calc(var(--jc-item) * 0.92); height: calc(var(--jc-item) * 0.92);
  border-radius: 50%; display: grid; place-items: center; color: var(--ink); touch-action: none;
  /* no UA button paint: while a merging orb hands its body to the dock bud its own surface is gone */
  background: transparent; border: 0; padding: 0;
  -webkit-touch-callout: none; user-select: none;
}
.jc-root.jc-dock__sat svg { width: 60%; height: 60%; }
.jc-dock__dot {
  position: absolute; bottom: calc(-6 * var(--jc-u)); left: 50%; width: calc(4 * var(--jc-u)); height: calc(4 * var(--jc-u));
  margin-left: calc(-2 * var(--jc-u)); border-radius: 50%; background: var(--ink); opacity: 0.92;
}

/* ---------- palette ---------- */
.jc-palette {
  --jc-palette-bar-height: calc(60 * var(--jc-u));
  position: fixed; left: 50%; top: 14vh; width: min(calc(700 * var(--jc-u)), calc(100vw - 2 * var(--jc-palette-pad, calc(0 * var(--jc-u))) - 32 * var(--jc-u))); z-index: 60;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(14 * var(--jc-u)); transform: translateX(-50%);
  transition: opacity 180ms ease;
}
.jc-palette[data-open="false"] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 220ms; }
.jc-palette__bar { min-width: 0; display: flex; align-items: center; gap: calc(10 * var(--jc-u)); }
.jc-palette__pill {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(14 * var(--jc-u)); height: calc(60 * var(--jc-u));
  padding: 0 calc(24 * var(--jc-u)); border-radius: calc(999 * var(--jc-u)); cursor: text; color: var(--jc-soft);
}
.jc-palette__input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: calc(21 * var(--jc-u)); font-weight: 500; letter-spacing: -0.01em; caret-color: var(--accent); }
.jc-palette__input::placeholder { color: var(--jc-hint); }
.jc-palette__input:focus-visible { outline: 0; }
.jc-palette__kbd { font: inherit; font-weight: 500; font-size: calc(11 * var(--jc-u)); color: var(--jc-faint); letter-spacing: 0.02em; }
.jc-palette__orb { width: calc(60 * var(--jc-u)); height: calc(60 * var(--jc-u)); flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--jc-soft); }
.jc-palette__orb:hover { color: var(--ink); }
.jc-palette__panel {
  position: relative; border-radius: calc(var(--radius) * 1.6 * var(--jc-scale, 1)); padding: calc(10 * var(--jc-u));
  /* --jc-palette-clear: room a page keeps free under the palette (e.g. for a prompt box). */
  max-height: min(calc(86vh - var(--jc-palette-bar-height, calc(60 * var(--jc-u))) - 14 * var(--jc-u) - var(--jc-palette-pad, calc(0 * var(--jc-u))) - 16 * var(--jc-u) - var(--jc-palette-clear, 0vh)), calc(540 * var(--jc-u))); overflow: auto; scrollbar-width: none;
  transition: opacity 200ms ease 70ms;
}
.jc-palette[data-open="false"] .jc-palette__panel { opacity: 0; transition: none; }
/* The list scrolls inside the slab. Where more rows run past an edge they sink
   into the gel's thick rim (a feathered fade that ends inside the bevel), so a
   row is never cut by a hard line or left hanging past the gel over the page.
   The active row is kept clear of the fade (scroll-padding). */
.jc-palette__panel { scroll-padding-block: calc(46 * var(--jc-u)); }
.jc-palette__panel[data-more="true"] { mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 50 * var(--jc-u)), transparent calc(100% - 14 * var(--jc-u))); }
.jc-palette__panel[data-scrolled="true"] { mask-image: linear-gradient(to bottom, transparent calc(8 * var(--jc-u)), var(--ink) calc(40 * var(--jc-u))); }
.jc-palette__panel[data-scrolled="true"][data-more="true"] { mask-image: linear-gradient(to bottom, transparent calc(8 * var(--jc-u)), var(--ink) calc(40 * var(--jc-u)), var(--ink) calc(100% - 50 * var(--jc-u)), transparent calc(100% - 14 * var(--jc-u))); }
.jc-palette__list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.jc-palette__group { font-size: calc(11 * var(--jc-u)); font-weight: 600; letter-spacing: 0.06em; text-transform: var(--jc-label-case, uppercase); color: var(--jc-faint); padding: calc(12 * var(--jc-u)) calc(16 * var(--jc-u)) calc(6 * var(--jc-u)); }
.jc-palette__option {
  display: flex; align-items: center; gap: calc(14 * var(--jc-u)); min-height: calc(44 * var(--jc-u)); padding: 0 calc(16 * var(--jc-u));
  border-radius: calc(999 * var(--jc-u)); cursor: pointer; color: var(--jc-soft); font-size: calc(15 * var(--jc-u));
}
.jc-palette__option > span:not(.jc-palette__hint) { min-width: 0; overflow-wrap: anywhere; }
.jc-palette__hint { flex: none; }
.jc-palette__option > * { transition: transform 160ms ease; }
/* On the lens: full ink, lifted a hair as the gel swells under it (the lens is
   the field's height field; no halo, no box). */
.jc-palette__option[aria-selected="true"] { color: var(--ink); }
.jc-palette__option[aria-selected="true"] > * { transform: translateY(calc(-1 * var(--jc-u))); }
.jc-palette__hint { margin-left: auto; font-weight: 500; font-size: calc(12 * var(--jc-u)); color: var(--jc-faint); letter-spacing: 0.01em; }
.jc-palette__empty { margin: 0; padding: calc(18 * var(--jc-u)) calc(16 * var(--jc-u)); color: var(--jc-faint); }

/* ---------- prompt ---------- */
.jc-prompt {
  position: fixed; left: 50%; bottom: calc(128 * var(--jc-u)); width: min(calc(740 * var(--jc-u)), calc(100vw - 32 * var(--jc-u)));
  z-index: 2; transform: translateX(-50%);
}
.jc-prompt__body {
  display: grid; gap: calc(8 * var(--jc-u)); padding: calc(18 * var(--jc-u)) calc(14 * var(--jc-u)) calc(12 * var(--jc-u)) calc(22 * var(--jc-u));
  border-radius: calc(var(--radius) * 1.8 * var(--jc-scale, 1));
}
.jc-prompt__input {
  display: block; width: 100%; resize: none; background: none; border: 0; outline: 0; padding: 0 calc(8 * var(--jc-u)) 0 0;
  color: var(--ink); font: inherit; font-size: calc(16 * var(--jc-u)); font-weight: 500; letter-spacing: -0.01em; line-height: 1.55; min-height: calc(25 * var(--jc-u)); caret-color: var(--accent);
}
.jc-prompt__input::placeholder { color: var(--jc-hint); }
.jc-prompt__input:focus-visible { outline: 0; }
.jc-prompt__tools { display: flex; align-items: center; gap: calc(4 * var(--jc-u)); margin-left: calc(-8 * var(--jc-u)); }
.jc-prompt__tool, .jc-prompt__toggle {
  position: relative; width: calc(38 * var(--jc-u)); height: calc(38 * var(--jc-u)); border-radius: 50%;
  display: grid; place-items: center; color: var(--jc-soft); transition: color 160ms ease;
}
.jc-prompt__toggle { color: var(--jc-faint); }
.jc-prompt__tool svg, .jc-prompt__toggle svg { transform-origin: 50% 55%; will-change: transform; }
.jc-prompt__tool:hover, .jc-prompt__toggle:hover { color: var(--ink); }
/* On: accent glyph; the gel drop under it is lit from inside by the field (no painted glow). */
.jc-prompt__toggle[aria-pressed="true"] { color: color-mix(in srgb, var(--accent) 30%, var(--ink)); }
/* Icon-only controls: the name is aria-label only (no visible label, no tooltip). */
/* The send orb is drawn by the field (orb surface); the button is its hit area. */
.jc-root .jc-prompt__send {
  margin-left: auto; width: calc(46 * var(--jc-u)); height: calc(46 * var(--jc-u)); border-radius: 50%;
  transform: scale(0.9); transition: transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.jc-prompt__send[aria-disabled="true"] { cursor: default; }
.jc-root .jc-prompt__send { position: relative; }

/* ---------- jelly-born glyphs (jelly-glyphs.mjs) ---------- */
.jc-root svg.jg { overflow: visible; }
.jc-root .jg .jg-accent { color: var(--accent); }
.jc-root .jg [data-fx="ascii"] { font-family: var(--jc-font-mono, inherit); }
/* Silver: a soft ground halo behind each glyph, feathering into the gel, so
   icons stay readable mid-crumple (follows the strokes; never a box). */
:root[data-jc-silver] .jc-root svg {
  filter: drop-shadow(0 0 calc(1.5 * var(--jc-u)) color-mix(in srgb, var(--ground) 90%, transparent)) drop-shadow(0 0 calc(5 * var(--jc-u)) color-mix(in srgb, var(--ground) 60%, transparent));
}
.jc-prompt__send[data-ready="true"] { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .jc-root, .jc-root * { transition: none !important; }
}

/* Existing field PAD bounds the entire material quad, including the gel rim. */
.jc-palette__identity { width: calc(23 * var(--jc-u)); height: calc(23 * var(--jc-u)); flex: none; object-fit: contain; }
@media (max-width: 40em) {
  .jc-palette { --jc-palette-bar-height: calc(130 * var(--jc-u)); }
  .jc-palette__bar { flex-wrap: wrap; }
  .jc-palette__pill { flex-basis: 100%; }
}
/* Identity thumbnail plate: the mounting page supplies --jc-identity-ground. */
.jc-palette__identity:not([data-function-identity]) { padding: calc(4 * var(--jc-u)); background: var(--jc-identity-ground, transparent); border-radius: calc(999 * var(--jc-u)); }

.jc-palette__panel, .jc-palette__pill, .jc-palette__identity { box-sizing: border-box; }

/* Registered dock identity images share the existing glyph footprint. */
.jc-dock__choices{display:contents}
.jc-root .jc-dock__item img,.jc-root .jc-dock__bubble img,.jc-dock__sat img{width:60%;height:60%;object-fit:contain;pointer-events:none}
.jc-root .jc-dock__item img[data-jc-portrait],.jc-root .jc-dock__bubble img[data-jc-portrait],.jc-dock__sat img[data-jc-portrait]{width:100%;height:100%;border-radius:50%;object-fit:cover}
.jc-root .jc-dock__item img[data-jc-identity-badge],.jc-root .jc-dock__bubble img[data-jc-identity-badge],.jc-dock__sat img[data-jc-identity-badge]{position:absolute;width:35%;height:35%;right:0;bottom:0}

/* Explicit registered monochrome imagery reads the material ink; portraits remain images. */
.jc-dock__ink-image{display:block;width:60%;height:60%;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;pointer-events:none}
.jc-dock__ink-image img{opacity:0}
.jc-dock__ink-image[data-jc-identity-badge]{position:absolute;width:35%;height:35%;right:0;bottom:0}