{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "picks",
  "title": "Picks",
  "description": "A list of choices that carry their own content. The one you took turns italic, and either a dot slides to it along a plucked string its initial hangs in the margin like a rubricated capital, its name lies faint behind the list, or two registration crosses mark its corners.",
  "registryDependencies": [
    "https://thedirectors.agency/ui/r/0nlytype.json"
  ],
  "files": [
    {
      "path": "registry/0nlytype/ui/picks.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useComposedRefs } from \"@/lib/0nlytype/refs\"\nimport { cn } from \"@/lib/utils\"\n\ntype Variant = \"pizzicato\" | \"rubric\" | \"watermark\" | \"register\"\ntype PicksContextValue = { name: string; value: string | undefined; select: (value: string) => void }\n\nconst PicksContext = React.createContext<PicksContextValue | null>(null)\n\ntype PicksProps = Omit<React.ComponentProps<\"fieldset\">, \"defaultValue\" | \"onChange\"> & {\n  /** How the choice is marked. pizzicato: a dot in the margin that slides to the pick and plucks a string; rubric: the chosen title's initial hangs in the margin two lines deep, in the italic and the accent; watermark: the chosen title lies huge and faint behind the list; register: two registration crosses mark the chosen pick's corners and turn as they travel. */\n  variant?: Variant\n  /** Shared by every radio, so a form submits the choice. Defaults to a generated name. */\n  name?: string\n  /** The small label over the list. Without one, give the group an aria-label. */\n  legend?: React.ReactNode\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\n/**\n * A list of choices that carry their own content. The chosen title turns italic, because it's yours now.\n * Pizzicato hangs one accent dot beside it; choosing another slides the dot along a string that rings and falls silent.\n * Rubric hangs the chosen title's initial in the margin, two lines deep, like a rubricated capital.\n * Watermark lays the chosen title behind the list, huge and faint, as a sheet shows its mark held to the light.\n * Register marks the chosen pick's two far corners with the printer's registration crosses.\n */\nfunction Picks({ variant = \"pizzicato\", name, legend, value: controlled, defaultValue, onValueChange, className, children, ref: forwardedRef, ...props }: PicksProps) {\n  const generated = React.useId()\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const value = controlled ?? uncontrolled\n  const box = React.useRef<HTMLFieldSetElement>(null)\n  const composedRef = useComposedRefs(box, forwardedRef)\n  const was = React.useRef(value)\n  const turn = React.useRef(0) // register: quarter turns the crosses have made\n  const plucked = variant === \"pizzicato\"\n  const measured = plucked || variant === \"register\"\n\n  const select = React.useCallback(\n    (next: string) => {\n      if (controlled === undefined) setUncontrolled(next)\n      onValueChange?.(next)\n    },\n    [controlled, onValueChange],\n  )\n  const ctx = React.useMemo(() => ({ name: name ?? generated, value, select }), [name, generated, value, select])\n\n  // The string runs the length of the picks; the dot hangs where the chosen pick's ring would (its ::before sets the height).\n  const place = React.useCallback(() => {\n    const el = box.current\n    const picks = el ? [...el.querySelectorAll<HTMLElement>(\":scope > label\")] : []\n    if (el && variant === \"register\") return register(el, picks, turn)\n    const string = el?.querySelector<HTMLElement>(\":scope > .ot-picks-string\")\n    if (!el || !string || !picks.length) return\n    // A fieldset starts its positioned children below the legend and offsetTop can't be trusted inside one, so measure\n    // everything from where the string's own top: 0 would be (the string has no transform, unlike the dot).\n    el.setAttribute(\"data-placed\", \"\")\n    const origin = string.getBoundingClientRect().top - (parseFloat(getComputedStyle(string).top) || 0)\n    const at = (l: HTMLElement) => l.getBoundingClientRect().top - origin\n    const first = at(picks[0])\n    const last = picks[picks.length - 1]\n    el.style.setProperty(\"--ot-picks-top\", `${first}px`)\n    el.style.setProperty(\"--ot-picks-len\", `${at(last) + last.offsetHeight - first}px`)\n    const chosen = picks.find((l) => l.querySelector(\"input:checked\"))\n    if (chosen) el.style.setProperty(\"--ot-picks-y\", `${at(chosen) + (parseFloat(getComputedStyle(chosen, \"::before\").top) || 0)}px`)\n  }, [variant])\n\n  React.useLayoutEffect(() => {\n    const el = box.current\n    const from = was.current\n    was.current = value\n    if (!el || !measured) return\n    // The dot glides only from an earlier choice; a first choice is plucked where it lands.\n    if (from !== undefined && from !== value) el.setAttribute(\"data-ready\", \"\")\n    place()\n    if (from === value || value === undefined || !plucked) return\n    // Restart the pluck: the CSS animation runs again only if the attribute comes back after a style flush.\n    el.removeAttribute(\"data-plucked\")\n    void el.offsetWidth\n    el.setAttribute(\"data-plucked\", \"\")\n  }, [value, plucked, measured, place])\n\n  // Picks re-flow on resize and when the fonts arrive; the dot and the string follow.\n  // ponytail: watches the picks present at mount; add a MutationObserver if picks come and go.\n  React.useEffect(() => {\n    const el = box.current\n    if (!el || !measured) return\n    // A re-flow moves the marks without travel.\n    const settle = () => {\n      el.setAttribute(\"data-still\", \"\")\n      place()\n      void el.offsetWidth\n      el.removeAttribute(\"data-still\")\n    }\n    const ro = new ResizeObserver(settle)\n    ro.observe(el)\n    el.querySelectorAll(\":scope > label\").forEach((l) => ro.observe(l))\n    document.fonts?.ready.then(settle)\n    return () => ro.disconnect()\n  }, [measured, place])\n\n  return (\n    <PicksContext.Provider value={ctx}>\n      <fieldset ref={composedRef} data-slot=\"picks\" data-variant={variant} className={cn(\"ot-picks\", className)} {...props}>\n        {legend ? <legend className=\"ot-label\">{legend}</legend> : null}\n        {children}\n        {plucked ? (\n          <>\n            <span data-slot=\"picks-string\" className=\"ot-picks-string\" aria-hidden=\"true\" />\n            <span data-slot=\"picks-dot\" className=\"ot-picks-dot\" aria-hidden=\"true\" />\n          </>\n        ) : null}\n        {variant === \"register\" ? (\n          <>\n            <span className=\"ot-picks-origin\" aria-hidden=\"true\" />\n            <span data-slot=\"picks-cross\" className=\"ot-picks-cross\" data-corner=\"start\" aria-hidden=\"true\" />\n            <span data-slot=\"picks-cross\" className=\"ot-picks-cross\" data-corner=\"end\" aria-hidden=\"true\" />\n          </>\n        ) : null}\n      </fieldset>\n    </PicksContext.Provider>\n  )\n}\n\n// Register: a cross stands off each of the chosen pick's two far corners (the top of its start side, the foot of its end\n// side), by --ot-picks-out. Physical px from the origin, a zero box at the fieldset's top left, so direction only\n// decides which corners. Each move turns the crosses a quarter, the way the pick went.\nfunction register(el: HTMLElement, picks: HTMLElement[], turn: React.RefObject<number>) {\n  const chosen = picks.find((l) => l.querySelector(\"input:checked\"))\n  const origin = el.querySelector(\":scope > .ot-picks-origin\")?.getBoundingClientRect()\n  if (!chosen || !origin) return\n  el.setAttribute(\"data-placed\", \"\")\n  const k = el.getBoundingClientRect().width / (el.offsetWidth || 1) || 1 // a zoomed preview\n  const r = chosen.getBoundingClientRect()\n  const out = parseFloat(getComputedStyle(el).getPropertyValue(\"--ot-picks-out\")) || 12\n  const rtl = getComputedStyle(chosen).direction === \"rtl\"\n  const [left, right] = [(r.left - origin.left) / k - out, (r.right - origin.left) / k + out]\n  const [top, foot] = [(r.top - origin.top) / k - out, (r.bottom - origin.top) / k + out]\n  const was = parseFloat(el.style.getPropertyValue(\"--ot-picks-y0\"))\n  if (el.hasAttribute(\"data-ready\") && !el.hasAttribute(\"data-still\") && Number.isFinite(was) && Math.abs(top - was) > 1) turn.current += top > was ? 90 : -90\n  const set = (p: string, v: number, u = \"px\") => el.style.setProperty(`--ot-picks-${p}`, `${v}${u}`)\n  set(\"x0\", rtl ? right : left)\n  set(\"y0\", top)\n  set(\"x1\", rtl ? left : right)\n  set(\"y1\", foot)\n  set(\"turn\", turn.current, \"deg\")\n}\n\ntype PickProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"name\" | \"checked\" | \"defaultChecked\" | \"value\" | \"children\"> & {\n  value: string\n  /** Anything: a PickTitle and a PickDescription, a swatch, a specimen. Plain text is taken as the title. */\n  children: React.ReactNode\n  /** Classes for the label, which is the root. className goes to the input. */\n  labelClassName?: string\n  /** Pins a state for documentation (\"hover\", \"focus\"); set on the root. */\n  \"data-force\"?: string\n}\n\nfunction Pick({ value, children, className, labelClassName, \"data-force\": force, onChange, ...props }: PickProps) {\n  const group = React.useContext(PicksContext)\n  if (!group) throw new Error(\"Pick must sit inside <Picks>.\")\n  return (\n    <label data-slot=\"pick\" data-force={force} className={labelClassName}>\n      <input\n        type=\"radio\"\n        name={group.name}\n        value={value}\n        checked={group.value === value}\n        className={className}\n        onChange={(e) => {\n          onChange?.(e)\n          group.select(value)\n        }}\n        {...props}\n      />\n      {typeof children === \"string\" ? <PickTitle>{children}</PickTitle> : children}\n    </label>\n  )\n}\n\ntype PickTitleProps = React.ComponentProps<\"span\"> & {\n  /** The pick's name. Plain text turns italic when chosen, and its initial is the one rubric hangs (a name without capitals gets a pilcrow instead). */\n  children: React.ReactNode\n}\n\n/** The pick's name. Set in the voice; the chosen one crosses into the italic. */\nfunction PickTitle({ className, children, ...props }: PickTitleProps) {\n  if (typeof children !== \"string\") {\n    return <span data-slot=\"pick-title\" className={cn(\"ot-pick-title\", className)} {...props}>{children}</span>\n  }\n  // The first letter (a whole grapheme) is its own span so rubric can hang it, and the rest its own so it can turn\n  // italic beside it. data-initial feeds the ghost that holds the letter's place. Readers get the name whole.\n  const first = new Intl.Segmenter().segment(children)[Symbol.iterator]().next().value?.segment ?? \"\"\n  // A script without capitals (Arabic, Hebrew, Devanagari, Han), or a name that opens on a figure or a mark, has no\n  // initial to hang, and lifting one out would break a joined word. Rubric paints the rubricator's other mark there,\n  // the pilcrow, and leaves the name whole.\n  if (first.toLocaleUpperCase() === first.toLocaleLowerCase()) {\n    return (\n      <span data-slot=\"pick-title\" data-text={children} data-caseless=\"\" className={cn(\"ot-pick-title\", className)} {...props}>\n        <span aria-hidden=\"true\" data-initial=\"\">\n          <span className=\"ot-pick-initial\" data-text={\"\\u00b6\"}>\n            <span />\n          </span>\n          <span className=\"ot-pick-rest\" data-text={children}>\n            <span>{children}</span>\n          </span>\n        </span>\n        <span className=\"ot-sr\">{children}</span>\n      </span>\n    )\n  }\n  const rest = children.slice(first.length)\n  return (\n    <span data-slot=\"pick-title\" data-text={children} className={cn(\"ot-pick-title\", className)} {...props}>\n      <span aria-hidden=\"true\" data-initial={first}>\n        <span className=\"ot-pick-initial\" data-text={first}><span>{first}</span></span>\n        <span className=\"ot-pick-rest\" data-text={rest}><span>{rest}</span></span>\n      </span>\n      <span className=\"ot-sr\">{children}</span>\n    </span>\n  )\n}\n\n/** A line under the title, in the pencil. */\nfunction PickDescription({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"pick-description\" className={cn(\"ot-pick-description\", className)} {...props} />\n}\n\nexport { Picks, Pick, PickTitle, PickDescription, type PicksProps, type PickProps, type PickTitleProps }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/0nlytype/styles/picks.css",
      "content": "@layer components {\n  /* ── ot-picks ── choices that carry their own content. The chosen title crosses into the italic, because it's yours.\n     Two ways to mark it: pizzicato hangs one accent dot in the margin, and rubric hangs the chosen initial in the margin, two lines deep. */\n  @property --ot-picks-y { syntax: \"<length>\"; inherits: true; initial-value: 0px; }\n  @property --ot-picks-d { syntax: \"<length>\"; inherits: true; initial-value: 0px; }\n  .ot-picks {\n    --ot-picks-y: 0px;   /* the dot's top; script sets it from the chosen pick */\n    --ot-picks-d: 0px;   /* how far the string is pulled toward the words; the pluck animates it */\n    --ot-picks-top: 0px; /* where the string starts (the first pick's top) */\n    --ot-picks-len: 0px; /* and how long it runs (to the last pick's foot) */\n    --dir: 1;\n    position: relative; border: 0; margin: 0; padding: 0; min-width: 0;\n    display: grid; justify-items: start; gap: var(--ot-space-5);\n  }\n  .ot-picks:is([dir=\"rtl\"], [dir=\"rtl\"] *) { --dir: -1; }\n  /* A pick written in the other direction carries its own dir; the nearest one sets which way things hang. */\n  .ot-picks [dir=\"ltr\"] { --dir: 1; }\n  .ot-picks [dir=\"rtl\"] { --dir: -1; }\n  .ot-picks > legend { padding: 0; margin-bottom: var(--ot-space-4); }\n  .ot-picks > label {\n    position: relative; display: block; max-width: 100%; cursor: pointer;\n    font-size: var(--ot-mp); line-height: var(--ot-mp-lh); letter-spacing: var(--ot-mp-tr);\n    color: var(--ot-graphite); -webkit-tap-highlight-color: transparent;\n    transition: color var(--ot-allegro);\n  }\n  .ot-picks > label > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }\n  .ot-picks > label:is(:hover, [data-force~=\"hover\"], :has(input:checked)):not(:has(input:disabled)) { color: var(--ot-ink); }\n  .ot-picks > label:is(:has(input:focus-visible), [data-force~=\"focus\"]) { outline: var(--ot-stroke) solid var(--ot-accent); outline-offset: 6px; }\n  .ot-picks > label:has(input:disabled) { color: var(--ot-pencil); opacity: 0.55; cursor: not-allowed; }\n\n  /* The title. Plain text carries an italic copy in the same grid cell, so the two cross-fade without moving anything. */\n  .ot-pick-title { display: grid; justify-items: start; align-items: baseline; }\n  .ot-pick-title > [aria-hidden],\n  .ot-pick-title[data-text]::after {\n    grid-area: 1 / 1;\n    transition: opacity var(--ot-moderato) var(--ot-breath), translate var(--ot-moderato) var(--ot-exhale);\n  }\n  .ot-pick-title[data-text]::after {\n    content: attr(data-text) / \"\";\n    font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--ot-expression-scale) * 1em); line-height: 1; letter-spacing: 0;\n    opacity: 0; translate: 0 0.12em;\n  }\n  .ot-pick-description {\n    display: block; max-width: 44ch;\n    font-size: var(--ot-p); line-height: var(--ot-p-lh); letter-spacing: var(--ot-p-tr);\n    color: var(--ot-pencil); transition: color var(--ot-allegro);\n  }\n  .ot-picks > label:has(input:checked) .ot-pick-description { color: var(--ot-graphite); }\n\n  /* pizzicato: the dot hangs in the margin. Pointing sketches a ring where it would land (and a press tightens it, a finger\n     on the string). Choosing slides the dot there along a hairline string, pulling it aside as it goes; on arrival the\n     string is let go and rings, and fades back to silence as it settles. The title turns italic as the dot lands. */\n  .ot-picks[data-variant=\"pizzicato\"] > label { margin-inline-start: var(--ot-space-5); }\n  .ot-picks[data-variant=\"pizzicato\"] > label::before {\n    content: \"\"; position: absolute; inset-inline-start: calc(-1 * var(--ot-space-5)); top: calc(0.5lh + 0.03em - var(--ot-dot) / 2);\n    width: var(--ot-dot); height: var(--ot-dot); border-radius: 50%;\n    box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-rule-strong); scale: 0; pointer-events: none;\n    transition: scale var(--ot-moderato) var(--ot-spiccato);\n  }\n  .ot-picks[data-variant=\"pizzicato\"] > label:is(:hover, [data-force~=\"hover\"]):not(:has(input:checked, input:disabled))::before { scale: 1; }\n  .ot-picks[data-variant=\"pizzicato\"] > label:active:not(:has(input:checked, input:disabled))::before { scale: 0.6; transition-duration: var(--ot-allegro); }\n  .ot-picks:is([data-variant=\"pizzicato\"], [data-variant=\"watermark\"], [data-variant=\"register\"]) > label:has(input:checked) .ot-pick-title > [aria-hidden] { opacity: 0; translate: 0 -0.12em; }\n  .ot-picks:is([data-variant=\"pizzicato\"], [data-variant=\"watermark\"], [data-variant=\"register\"]) > label:has(input:checked) .ot-pick-title::after { opacity: 1; translate: 0 0; }\n  .ot-picks[data-variant=\"pizzicato\"][data-ready] > label:has(input:checked) .ot-pick-title > [aria-hidden],\n  .ot-picks[data-variant=\"pizzicato\"][data-ready] > label:has(input:checked) .ot-pick-title::after { transition-delay: calc(var(--ot-moderato) * 0.7); }\n  .ot-picks-dot, .ot-picks-string { position: absolute; top: 0; pointer-events: none; }\n  .ot-picks-dot {\n    inset-inline-start: 0; width: var(--ot-dot); height: var(--ot-dot); border-radius: 50%; background: var(--ot-accent);\n    translate: calc(var(--ot-picks-d) * var(--dir)) var(--ot-picks-y);\n    transition: opacity var(--ot-allegro), scale var(--ot-moderato) var(--ot-spiccato);\n  }\n  .ot-picks:not(:has(input:checked)) > .ot-picks-dot { opacity: 0; scale: 0; }\n  /* Until script has measured (before hydration, or without script), the chosen pick's own ring stands in for the dot. */\n  .ot-picks:not([data-placed]) > :is(.ot-picks-dot, .ot-picks-string) { display: none; }\n  .ot-picks[data-variant=\"pizzicato\"]:not([data-placed]) > label:has(input:checked)::before { scale: 1; background: var(--ot-accent); box-shadow: none; }\n  /* The string is a hairline bent at the dot: a thin strip clipped out of a wider box, so it stays one hairline at any pull. */\n  .ot-picks-string {\n    --apex: calc(var(--ot-picks-y) + var(--ot-dot) / 2 - var(--ot-picks-top));\n    --x: calc(var(--ot-picks-d) * var(--dir));\n    top: var(--ot-picks-top); height: var(--ot-picks-len); inset-inline-start: calc(var(--ot-dot) / 2 - 1em); width: 2em;\n    background: var(--ot-rule-strong); opacity: 0;\n    clip-path: polygon(\n      calc(50% - 0.5px) 0, calc(50% - 0.5px + var(--x)) var(--apex), calc(50% - 0.5px) 100%,\n      calc(50% + 0.5px) 100%, calc(50% + 0.5px + var(--x)) var(--apex), calc(50% + 0.5px) 0\n    );\n  }\n  .ot-picks[data-ready] { transition: --ot-picks-y var(--ot-moderato) var(--ot-breath); }\n  .ot-picks[data-plucked] { animation: ot-picks-pluck calc(var(--ot-moderato) + var(--ot-andante)) linear; }\n  .ot-picks[data-plucked] > .ot-picks-string { animation: ot-picks-ring calc(var(--ot-moderato) + var(--ot-andante)) linear; }\n  /* A third of the time the pull (while the dot slides), then five half-swings, each smaller, each eased like a pendulum. */\n  @keyframes ot-picks-pluck {\n    0% { --ot-picks-d: 0px; animation-timing-function: var(--ot-breath); }\n    33% { --ot-picks-d: -0.45em; animation-timing-function: var(--ot-breath); }\n    47% { --ot-picks-d: 0.3em; animation-timing-function: var(--ot-breath); }\n    60% { --ot-picks-d: -0.18em; animation-timing-function: var(--ot-breath); }\n    73% { --ot-picks-d: 0.1em; animation-timing-function: var(--ot-breath); }\n    86% { --ot-picks-d: -0.04em; animation-timing-function: var(--ot-breath); }\n    100% { --ot-picks-d: 0px; }\n  }\n  @keyframes ot-picks-ring {\n    0% { opacity: 0; }\n    14%, 33% { opacity: 1; }\n    100% { opacity: 0; }\n  }\n\n  /* rubric: the chosen title's initial is lifted out of the word and hung in the margin as a two-line capital, in the\n     italic and the accent, the way a rubricator painted the one red letter a section began with. It hangs, so nothing\n     around it reflows: every pick keeps a margin for it, the capital grows into that margin from its place in the word,\n     and a ghost of the small letter narrows to nothing so the rest of the name closes up to the edge and turns italic.\n     Its foot sits on the first line under the title, so a pick without a description keeps that line free.\n     Pointing leans the initial italic, in place. */\n  .ot-picks[data-variant=\"rubric\"] { --ot-picks-cap: 2.3; interpolate-size: allow-keywords; }\n  .ot-picks[data-variant=\"rubric\"] > label { padding-inline-start: var(--ot-space-7); } /* inside the label, so focus and the pointer take the capital in */\n  .ot-picks[data-variant=\"rubric\"] > label:not(:has(.ot-pick-description)) { padding-block-end: calc(var(--ot-p) * var(--ot-p-lh)); }\n  .ot-picks[data-variant=\"rubric\"] .ot-pick-title { display: block; position: relative; }\n  .ot-picks[data-variant=\"rubric\"] .ot-pick-title::after { content: none; }\n  /* The ghost: the small roman letter, holding the initial's place in the word until it is chosen. */\n  .ot-picks[data-variant=\"rubric\"] .ot-pick-title > [data-initial]::before {\n    content: attr(data-initial) / \"\"; display: inline-block; width: max-content; overflow: hidden; white-space: nowrap; vertical-align: top; visibility: hidden;\n    transition: width var(--ot-andante) var(--ot-exhale);\n  }\n  .ot-picks[data-variant=\"rubric\"] > label:has(input:checked) .ot-pick-title > [data-initial]::before { width: 0; }\n  .ot-picks[data-variant=\"rubric\"] .ot-pick-initial {\n    position: absolute; top: 0; inset-inline-start: 0; display: grid; justify-items: start; align-items: baseline;\n    font-size: 1em; translate: 0 0;\n    transition: font-size var(--ot-andante) var(--ot-exhale), line-height var(--ot-andante) var(--ot-exhale), translate var(--ot-andante) var(--ot-exhale), color var(--ot-moderato);\n  }\n  .ot-picks[data-variant=\"rubric\"] :is(.ot-pick-initial, .ot-pick-rest) > span,\n  .ot-picks[data-variant=\"rubric\"] :is(.ot-pick-initial, .ot-pick-rest)::after { grid-area: 1 / 1; transition: opacity var(--ot-moderato) var(--ot-breath), translate var(--ot-moderato) var(--ot-exhale); }\n  .ot-picks[data-variant=\"rubric\"] :is(.ot-pick-initial, .ot-pick-rest)::after {\n    content: attr(data-text) / \"\";\n    font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--ot-expression-scale) * 1em); line-height: 1; letter-spacing: 0;\n    opacity: 0;\n  }\n  /* The rest of the name cross-fades into the italic in place, the way pizzicato's whole title does. */\n  .ot-picks[data-variant=\"rubric\"] .ot-pick-rest { display: inline-grid; justify-items: start; align-items: baseline; }\n  .ot-picks[data-variant=\"rubric\"] .ot-pick-rest::after { translate: 0 0.12em; }\n  .ot-picks[data-variant=\"rubric\"] > label:has(input:checked) .ot-pick-rest > span { opacity: 0; translate: 0 -0.12em; }\n  .ot-picks[data-variant=\"rubric\"] > label:has(input:checked) .ot-pick-rest::after { opacity: 1; translate: 0 0; }\n  .ot-picks[data-variant=\"rubric\"] > label:is(:hover, [data-force~=\"hover\"], :has(input:checked)):not(:has(input:disabled)) .ot-pick-initial > span { opacity: 0; }\n  .ot-picks[data-variant=\"rubric\"] > label:is(:hover, [data-force~=\"hover\"], :has(input:checked)):not(:has(input:disabled)) .ot-pick-initial::after { opacity: 1; }\n  /* Hung: its own width back into the margin, plus a gap the italic's overhang can lean into. */\n  .ot-picks[data-variant=\"rubric\"] > label:has(input:checked) .ot-pick-initial {\n    font-size: calc(var(--ot-picks-cap) * 1em); line-height: 1; color: var(--ot-accent);\n    translate: calc(-1 * var(--dir) * (100% + 0.2em)) 0.02em;\n  }\n\n  /* A name without capitals (a script without case, or one that opens on a figure) has no initial to lift, and lifting\n     one would break a joined word apart. The name stays whole and turns italic, and the rubricator's other mark, the\n     pilcrow, is painted in the margin in its place: unseen until chosen, then grown into the margin the same way. */\n  .ot-picks[data-variant=\"rubric\"] [data-caseless] .ot-pick-initial { opacity: 0; transition: opacity var(--ot-allegro), font-size var(--ot-andante) var(--ot-exhale), line-height var(--ot-andante) var(--ot-exhale), translate var(--ot-andante) var(--ot-exhale), color var(--ot-moderato); }\n  .ot-picks[data-variant=\"rubric\"] [data-caseless] .ot-pick-initial::after { scale: var(--dir) 1; }\n  .ot-picks[data-variant=\"rubric\"] > label:has(input:checked) [data-caseless] .ot-pick-initial { opacity: 1; font-size: calc(var(--ot-picks-cap) * 0.8em); }\n\n  /* A cased name on a right-to-left page (a Latin name among Arabic) begins at the end away from the page's margin, so its\n     initial has nowhere to hang: lifted, the word would read \"ressP\". The name stays whole in its own order (an isolated\n     left-to-right run), and the pilcrow hangs in the margin instead, as for a name without capitals. A pick or a title\n     given dir=\"ltr\" is a left-to-right block with its margin on the left, and hangs its capital there as usual.\n     ponytail: reads direction from the dir attribute, as the rest of the library does; a dir=\"ltr\" wrapper between the page and the picks isn't seen. */\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]) .ot-pick-title:not([data-caseless], [dir=\"ltr\"]) > [data-initial] { direction: ltr; unicode-bidi: isolate; }\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]) .ot-pick-title:not([data-caseless], [dir=\"ltr\"]) > [data-initial]::before { content: none; }\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]) .ot-pick-title:not([data-caseless], [dir=\"ltr\"]) .ot-pick-initial { position: relative; display: inline-grid; }\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]) .ot-pick-title:not([data-caseless], [dir=\"ltr\"]) .ot-pick-rest { position: relative; }\n  /* Whichever face is showing sets the word's room, so it neither gaps nor stops short of the page's edge. */\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]) .ot-pick-title:not([data-caseless], [dir=\"ltr\"]) :is(.ot-pick-initial, .ot-pick-rest)::after,\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]):has(input:checked) .ot-pick-title:not([data-caseless], [dir=\"ltr\"]) :is(.ot-pick-initial, .ot-pick-rest) > span { position: absolute; inset-inline-start: 0; bottom: 0; white-space: nowrap; }\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]):has(input:checked) .ot-pick-title:not([data-caseless], [dir=\"ltr\"]) :is(.ot-pick-initial, .ot-pick-rest)::after { position: static; }\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]):has(input:checked) .ot-pick-title:not([data-caseless], [dir=\"ltr\"]) .ot-pick-initial { font-size: 1em; line-height: inherit; color: inherit; translate: none; }\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]) .ot-pick-title:not([data-caseless], [dir=\"ltr\"])::before {\n    content: \"\\00b6\" / \"\"; position: absolute; top: 0; inset-inline-start: 0; pointer-events: none;\n    font-family: var(--ot-expression); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--ot-accent);\n    font-size: calc(var(--ot-expression-scale) * 1em); scale: -1 1; opacity: 0; translate: 0 0;\n    transition: opacity var(--ot-allegro), font-size var(--ot-andante) var(--ot-exhale), translate var(--ot-andante) var(--ot-exhale);\n  }\n  .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]):has(input:checked) .ot-pick-title:not([data-caseless], [dir=\"ltr\"])::before { opacity: 1; font-size: calc(var(--ot-picks-cap) * 0.8em * var(--ot-expression-scale)); translate: calc(100% + 0.2em) 0.02em; }\n\n  /* watermark: the chosen title lies behind the list, huge and faint in the italic, set off its foot and its end edge\n     and cropped by them, the way a sheet shows its mould's mark when held to the light (and the ghost numerals stand\n     behind \"the silence that heals\"). Choosing another lets one mark fade and the next come up out of the paper;\n     nothing travels. The title itself crosses into the italic, as pizzicato's does. */\n  .ot-picks[data-variant=\"watermark\"] { isolation: isolate; padding-block-end: var(--ot-space-6); }\n  /* Each title carries its own mark, set against the fieldset (the picks stand unpositioned for it), so one fades\n     while the next comes up. The box is shorter than the line and no wider than the list, so the list's foot and end edge crop it. */\n  .ot-picks[data-variant=\"watermark\"] > label { position: static; }\n  .ot-picks[data-variant=\"watermark\"] .ot-pick-title[data-text]::before {\n    content: attr(data-text) / \"\"; position: absolute; inset-block-end: 0; inset-inline-end: 0; z-index: -1;\n    max-inline-size: 100%; block-size: min(0.66em, 100%); overflow: hidden; pointer-events: none; user-select: none;\n    font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--ot-expression-scale) * var(--ot-fff));\n    line-height: 0.8; letter-spacing: -0.02em; white-space: nowrap; color: color-mix(in srgb, var(--ot-ink) 8%, transparent);\n    opacity: 0; translate: 0 0.06em; transition: opacity var(--ot-moderato) var(--ot-breath), translate var(--ot-moderato) var(--ot-breath);\n  }\n  .ot-picks[data-variant=\"watermark\"] > label:has(input:checked) .ot-pick-title[data-text]::before {\n    opacity: 1; translate: 0 0; transition: opacity var(--ot-andante) var(--ot-exhale) var(--ot-allegro), translate var(--ot-andante) var(--ot-exhale) var(--ot-allegro);\n  }\n\n  /* register: the printer's registration crosses, one off the top of the chosen pick's start side and one off the foot\n     of its end side, as \"the uncreative\" marks its corners with two + signs. Pointing sketches the pair in pencil at\n     that pick; choosing sends the accent pair there, each turning a quarter the way it goes (a cross turned a quarter\n     is the same cross, so it only reads as turning while it moves), the far one a beat behind. */\n  @property --ot-picks-out { syntax: \"<length>\"; inherits: true; initial-value: 0px; }\n  .ot-picks[data-variant=\"register\"] { --ot-picks-out: var(--ot-space-3); --ot-picks-cross: 0.62em; --ot-picks-ink: var(--ot-accent); }\n  .ot-picks[data-variant=\"register\"] > label { margin-inline: var(--ot-space-5); max-width: calc(100% - 2 * var(--ot-space-5)); }\n  .ot-picks[data-variant=\"register\"] > label::before,\n  .ot-picks[data-variant=\"register\"] > label::after,\n  .ot-picks-cross {\n    content: \"\"; position: absolute; width: var(--ot-picks-cross); height: var(--ot-picks-cross); pointer-events: none;\n    background:\n      linear-gradient(var(--ot-picks-ink) 0 0) center / 100% var(--ot-stroke) no-repeat,\n      linear-gradient(var(--ot-picks-ink) 0 0) center / var(--ot-stroke) 100% no-repeat;\n  }\n  .ot-picks[data-variant=\"register\"] > label::before,\n  .ot-picks[data-variant=\"register\"] > label::after {\n    --ot-picks-ink: var(--ot-rule-strong); scale: 0; transition: scale var(--ot-allegro) var(--ot-exhale);\n  }\n  .ot-picks[data-variant=\"register\"] > label::before { inset-inline-start: calc(-1 * (var(--ot-picks-out) + var(--ot-picks-cross) / 2)); top: calc(-1 * (var(--ot-picks-out) + var(--ot-picks-cross) / 2)); }\n  .ot-picks[data-variant=\"register\"] > label::after { inset-inline-end: calc(-1 * (var(--ot-picks-out) + var(--ot-picks-cross) / 2)); bottom: calc(-1 * (var(--ot-picks-out) + var(--ot-picks-cross) / 2)); }\n  .ot-picks[data-variant=\"register\"] > label:is(:hover, [data-force~=\"hover\"]):not(:has(input:checked, input:disabled))::before,\n  .ot-picks[data-variant=\"register\"] > label:is(:hover, [data-force~=\"hover\"]):not(:has(input:checked, input:disabled))::after { scale: 1; transition: scale var(--ot-moderato) var(--ot-spiccato); }\n  /* Until script has measured, the chosen pick's own pair stands in, inked. */\n  .ot-picks[data-variant=\"register\"]:not([data-placed]) > label:has(input:checked)::before,\n  .ot-picks[data-variant=\"register\"]:not([data-placed]) > label:has(input:checked)::after { --ot-picks-ink: var(--ot-accent); scale: 1; }\n  .ot-picks-origin { position: absolute; top: 0; left: 0; width: 0; height: 0; }\n  .ot-picks-cross {\n    top: 0; left: 0; rotate: var(--ot-picks-turn, 0deg);\n    translate: calc(var(--ot-picks-x0, 0px) - 50%) calc(var(--ot-picks-y0, 0px) - 50%);\n  }\n  .ot-picks-cross[data-corner=\"end\"] { translate: calc(var(--ot-picks-x1, 0px) - 50%) calc(var(--ot-picks-y1, 0px) - 50%); }\n  .ot-picks:is(:not([data-placed]), :not(:has(input:checked))) > .ot-picks-cross { opacity: 0; }\n  .ot-picks[data-variant=\"register\"][data-ready]:not([data-still]) > .ot-picks-cross { transition: translate var(--ot-moderato) var(--ot-breath), rotate var(--ot-moderato) var(--ot-breath), opacity var(--ot-allegro); }\n  .ot-picks[data-variant=\"register\"][data-ready]:not([data-still]) > .ot-picks-cross[data-corner=\"end\"] { transition-delay: calc(var(--ot-arpeggio) * 2); }\n\n  @media (forced-colors: active) {\n    .ot-picks > label:is(:has(input:focus-visible), [data-force~=\"focus\"]) { outline-color: Highlight; }\n    .ot-picks[data-variant=\"pizzicato\"] > label::before { box-shadow: none; border: var(--ot-hairline) solid CanvasText; }\n    .ot-picks-dot, .ot-picks-string { forced-color-adjust: none; }\n    .ot-picks-dot { background: Highlight; }\n    .ot-picks-string { background: CanvasText; }\n    .ot-picks[data-variant=\"rubric\"] > label:has(input:checked) .ot-pick-initial { forced-color-adjust: none; color: Highlight; }\n    .ot-picks[data-variant=\"rubric\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *):not([dir=\"ltr\"]) > label:not([dir=\"ltr\"]):has(input:checked) .ot-pick-title:not([data-caseless], [dir=\"ltr\"])::before { forced-color-adjust: none; color: Highlight; }\n    .ot-picks[data-variant=\"register\"] > label::before, .ot-picks[data-variant=\"register\"] > label::after, .ot-picks-cross { forced-color-adjust: none; }\n    .ot-picks[data-variant=\"register\"] { --ot-picks-ink: Highlight; }\n    .ot-picks[data-variant=\"watermark\"] .ot-pick-title[data-text]::before { content: none; } /* no faint ink to hold to the light */\n    .ot-picks[data-variant=\"register\"] > label::before, .ot-picks[data-variant=\"register\"] > label::after { --ot-picks-ink: CanvasText; }\n    .ot-picks[data-variant=\"register\"]:not([data-placed]) > label:has(input:checked)::before,\n    .ot-picks[data-variant=\"register\"]:not([data-placed]) > label:has(input:checked)::after { --ot-picks-ink: Highlight; }\n  }\n}\n",
      "type": "registry:file",
      "target": "styles/0nlytype/picks.css"
    }
  ],
  "css": {
    "@import \"../styles/0nlytype/picks.css\"": {}
  },
  "meta": {
    "movement": "VI",
    "underneath": "native",
    "contract": "ot-picks"
  },
  "type": "registry:ui"
}