/* White Space Studio shared dropdown (shared/choice/choice.css), 2026-09-27.
   The Studio standard = Frame's Calendar panel exactly as it draws.
   Do not edit per tool. Link it LAST in <head>, after the tool's own styles.
   Sizes are fixed. Colours come from the receiving tool: each tool maps its own
   tokens to the five --choice-* variables once, on :root. Fallbacks are Frame's. */

.fx-choice{position:relative}

/* Field label: 13px caps, 6px above the box, 16px below the field before it. */
label.fx-choice-label,.fx-choice-label{display:block;margin:16px 0 6px;font:400 13px/1.5 'Fragment Mono',ui-monospace,monospace;font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--choice-ink,#3d3d39)}

/* Box: 41px tall = 1 + 9 + 21 (14px text) + 9 + 1. Full width of its column. */
.fx-choice-button{position:relative;display:block;box-sizing:border-box;width:100%;min-height:41px;margin:0;padding:9px 28px 9px 10px;border:1px solid var(--choice-line,rgba(96,88,80,.24));border-radius:0;background:var(--choice-paper,#eceae6);color:var(--choice-ink,#3d3d39);text-align:left;font:400 14px/21px 'Fragment Mono',ui-monospace,monospace;font-style:normal;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;box-shadow:none}
.fx-choice-button::after{content:'⌄';position:absolute;right:10px;top:50%;transform:translateY(-50%);font:400 13px/1 'Fragment Mono',ui-monospace,monospace;color:var(--choice-muted,#77746d)}
.fx-choice-button[aria-expanded=true]{border-color:var(--choice-accent,#55544c)}
.fx-choice-button:focus-visible{outline:2px solid var(--choice-accent,#55544c);outline-offset:3px}
.fx-choice-button:disabled{opacity:.45;cursor:default}

/* One choice: the value as a plain line, no box, no caret. */
.fx-choice.is-single .fx-choice-button{opacity:1;border-color:transparent;background:transparent;padding-left:0;cursor:default}
.fx-choice.is-single .fx-choice-button::after{display:none}

/* Menu: 3px under the box, same width, 7 rows with the 8th peeking (268px). */
.fx-choice-list{position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:60;box-sizing:border-box;max-height:268px;overflow-y:auto;margin:0;padding:4px;background:var(--choice-paper,#eceae6);border:1px solid var(--choice-line,rgba(96,88,80,.24));border-radius:0;box-shadow:0 10px 24px -18px rgba(96,88,80,.7)}
.fx-choice.opens-up .fx-choice-list{top:auto;bottom:calc(100% + 3px)}

/* Rows: 35px = 7 + 21 (14px text) + 7. */
.fx-choice-option{position:relative;box-sizing:border-box;min-height:35px;padding:7px 28px 7px 8px;font:400 14px/21px 'Fragment Mono',ui-monospace,monospace;font-style:normal;letter-spacing:0;text-transform:none;color:var(--choice-ink,#3d3d39);cursor:pointer}
.fx-choice-option[aria-selected=true]{background:color-mix(in srgb,var(--choice-accent,#55544c) 10%,transparent)}
.fx-choice-option[aria-selected=true]::after{content:"";position:absolute;right:10px;top:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:currentColor}
.fx-choice-option.is-active{background:color-mix(in srgb,var(--choice-accent,#55544c) 10%,transparent);color:var(--choice-ink,#3d3d39);box-shadow:inset 0 0 0 1px var(--choice-line,rgba(96,88,80,.24))}

/* iPad and touch: 44px targets. */
@media (any-pointer:coarse){.fx-choice-button,.fx-choice-option{min-height:44px}}