/* THE SHEET'S CONTROLS (PRD-232 S2, D6, D8, D11): Ui::ButtonComponent,
   Ui::ButtonWithMenuComponent, Ui::MenuComponent, Ui::InputComponent,
   Ui::FieldComponent, Ui::TagComponent and Ui::ProgressButtonComponent, drawn from the Figma component
   sheet (file hP9WwD5Tpup3oa4fGn2EcI, frame 114:10). Colours, control
   heights and the radius are variables (tokens-v3.css, tokens-v2.css, the
   os.css additions); the few raw px are the sheet's own geometry, which it
   draws with no variable (the 128/104 minimum widths, the 22px tag). The
   sheet's 13px secondary text (Small button, menu line, field error) reads
   the sheet variable size/sm-minus (--font-size-sm-minus, tokens-v3.css).

   THE FOCUS RING (D11) is one rule for every control here: 2px of the
   background colour, then 2px of --color-focus, as a box-shadow so it
   follows the radius. */

/* ---- Button (node 114:118) ---- */
.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:var(--size-control);min-width:128px;padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius-ui);background:var(--color-primary);color:var(--color-on-primary);font:var(--fw-semibold) var(--font-size-sm)/20px var(--font-sans);text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer}
.ui-button:hover:not(:disabled){background:var(--color-primary-dark);color:var(--color-on-primary);text-decoration:none}
.ui-button-plain{border-color:var(--color-control-border);background:var(--color-bg);color:var(--color-text)}
.ui-button-plain:hover:not(:disabled){background:var(--color-surface-grey);color:var(--color-text)}
.ui-button-kudos{border-color:var(--status-warning-fg);background:var(--color-warning-bg);color:var(--status-warning-fg)}
.ui-button-kudos:hover:not(:disabled){background:var(--color-warning-bg);color:var(--status-warning-fg)}
.ui-button-danger{border-color:var(--status-danger-fg);background:var(--color-danger-bg);color:var(--status-danger-fg)}
.ui-button-danger:hover:not(:disabled){border-color:var(--color-danger);background:var(--color-danger-bg);color:var(--status-danger-fg)}
.ui-button-small{height:var(--size-control-small);min-width:104px;padding:0 var(--space-3);font-size:var(--font-size-sm-minus);line-height:18px}
.ui-button:disabled{opacity:.45;cursor:default}
.ui-button .ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-button-small .ic{width:14px;height:14px}
.ui-button-form{display:contents}
summary.ui-button{list-style:none;user-select:none}
summary.ui-button::-webkit-details-marker{display:none}

.ui-button:focus-visible,.ui-button-menu-main:focus-visible,.ui-button-menu-more>summary:focus-visible,
.ui-menu-item:focus-visible,.ui-input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}

/* ---- Progress button (PRD-225 S10, design record 0668dc70) ----
   Ui::ProgressButtonComponent: a running job in the Regular Main button's
   place, size and outline. The green fill grows from the left to the percent
   the component writes as --ui-progress; the label's dark green reads on the
   fill and on the white alike, so it is drawn once. Stale is grey, and the
   Tooltip's lines say why. The Tooltip hangs below, from the bar's right edge,
   because the bar sits at the right of the page top. */
.ui-progress-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--size-control);min-width:128px;padding:0 var(--space-4);overflow:hidden;border:1px solid var(--color-primary);border-radius:var(--radius-ui);background:var(--color-bg);color:var(--color-on-primary);font:var(--fw-semibold) var(--font-size-sm)/20px var(--font-sans);white-space:nowrap;cursor:default}
.ui-progress-button-fill{position:absolute;top:0;bottom:0;left:0;width:var(--ui-progress);background:var(--color-primary)}
.ui-progress-button-label{position:relative}
.ui-progress-button-stale{border-color:var(--color-control-border);color:var(--color-muted)}
.ui-progress-button-stale .ui-progress-button-fill{background:var(--color-border)}
.ui-progress-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ui-tooltip-anchor:has(>.ui-progress-button)>.ui-tooltip{left:auto;right:0;transform:none}
.ui-progress-button-line{display:block}

/* ---- Button with menu (node 121:798) and Menu (node 121:805) ---- */
.ui-button-menu{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--size-control);min-width:168px;border-radius:var(--radius-ui);background:var(--color-primary);color:var(--color-on-primary);position:relative}
.ui-button-menu-main{flex:1 0 auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:100%;min-width:127px;padding:0 var(--space-3);border:0;border-radius:var(--radius-ui) 0 0 var(--radius-ui);background:transparent;color:inherit;font:var(--fw-semibold) var(--font-size-sm)/20px var(--font-sans);white-space:nowrap;text-decoration:none;cursor:pointer}
.ui-button-menu .ui-button-form{display:contents}
.ui-button-menu-rule{flex:none;width:1px;height:24px;background:color-mix(in srgb,var(--color-on-primary) 20%,transparent)}
.ui-button-menu-more{flex:none;height:100%}
.ui-button-menu-more>summary{display:flex;align-items:center;justify-content:center;width:40px;height:100%;border-radius:0 var(--radius-ui) var(--radius-ui) 0;list-style:none;cursor:pointer;user-select:none}
.ui-button-menu-more>summary::-webkit-details-marker{display:none}
.ui-button-menu-more>summary .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-button-menu-main:hover,.ui-button-menu-more>summary:hover,.ui-button-menu-more[open]>summary{background:var(--color-primary-dark);color:var(--color-on-primary);text-decoration:none}
/* The Small Plain form, for a box header: 32px, white, the control border. */
.ui-button-menu-small{height:var(--size-control-small);min-width:136px}
.ui-button-menu-small .ui-button-menu-main{min-width:103px;font-size:var(--font-size-sm-minus);line-height:18px}
.ui-button-menu-small .ui-button-menu-more>summary{width:32px}
.ui-button-menu-small .ui-button-menu-rule{height:18px}
/* Disabled main part (PRD-267 S2, Figma 565-28457): grey, no press; the arrow still opens the menu. */
.ui-button-menu-disabled{background:var(--color-border);color:var(--color-muted)}
.ui-button-menu-disabled .ui-button-menu-main{cursor:default}
.ui-button-menu-disabled .ui-button-menu-main:hover{background:transparent;color:inherit}
.ui-button-menu-disabled .ui-button-menu-rule{background:color-mix(in srgb,var(--color-muted) 30%,transparent)}
.ui-button-menu-disabled .ui-button-menu-more>summary:hover,.ui-button-menu-disabled .ui-button-menu-more[open]>summary{background:var(--color-surface-grey);color:var(--color-text)}
.ui-button-menu-plain{border:1px solid var(--color-control-border);background:var(--color-bg);color:var(--color-text)}
.ui-button-menu-plain .ui-button-menu-rule{background:var(--color-border)}
.ui-button-menu-plain .ui-button-menu-main:hover,.ui-button-menu-plain .ui-button-menu-more>summary:hover,
.ui-button-menu-plain .ui-button-menu-more[open]>summary{background:var(--color-surface-grey);color:var(--color-text)}

.ui-menu{display:flex;flex-direction:column;box-sizing:border-box;width:300px;max-width:calc(100vw - 2 * var(--space-4));padding:6px 0;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);box-shadow:var(--shadow-md);text-align:left}
.ui-button-menu-more>.ui-menu{position:absolute;z-index:30;top:calc(100% + 6px);right:0}
.ui-button-menu-more>.ui-menu.above{top:auto;bottom:calc(100% + 6px)}
/* The menu hangs from the whole control, not the arrow: its right edge under
   the control's right edge, where the page top puts the decision (D7). When
   that would push it off the left of the screen (a phone, or a control at the
   left), popover_controller#place adds `.start` and it hangs from the left
   edge instead. */
.ui-button-menu-more>.ui-menu.start{right:auto;left:0}
.ui-menu-form{display:contents}
/* A choice a find box has cut from the list (popover_controller#find):
   `display:contents` would otherwise beat the `hidden` attribute. */
.ui-menu-form[hidden]{display:none}
.ui-menu-item{display:flex;flex-direction:column;gap:2px;width:100%;box-sizing:border-box;padding:10px var(--space-4);border:0;background:transparent;font-family:var(--font-sans);text-align:left;text-decoration:none;cursor:pointer}
.ui-menu-item:hover,.ui-menu-item:focus-visible{background:var(--color-surface);text-decoration:none}
.ui-menu-item[aria-current="true"] .ui-menu-name{font-weight:var(--fw-semibold)}
.ui-menu-name{font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:20px;color:var(--color-text)}
.ui-menu-detail{font-size:var(--font-size-sm-minus);font-weight:var(--fw-regular);line-height:18px;color:var(--color-muted)}
.ui-menu-item-danger .ui-menu-name{color:var(--status-danger-fg)}
.ui-menu-item-disabled{cursor:default}
.ui-menu-item-disabled:hover{background:transparent}
.ui-menu-item-disabled .ui-menu-name{color:var(--color-muted)}
.ui-menu-rule{width:100%;height:1px;margin:0;border:0;background:var(--color-border-subtle)}

/* ---- Input (node 142:2081) and Field (node 116:206) ---- */
.ui-input{box-sizing:border-box;width:280px;max-width:100%;height:var(--size-control-small);padding:0 var(--space-3);border:1px solid var(--color-control-border);border-radius:var(--radius-ui);background:var(--color-bg);color:var(--color-text);font:var(--fw-regular) var(--font-size-sm)/20px var(--font-sans)}
.ui-input::placeholder{color:var(--color-faint)}
.ui-input:focus-visible{border:1.5px solid var(--color-focus)}
.ui-input[aria-invalid="true"]{border:1.5px solid var(--color-danger)}
.ui-input:disabled{background:var(--color-surface);color:var(--color-faint);cursor:default}
.ui-input-regular{width:100%;height:var(--size-control);padding:0 14px}
.ui-select{position:relative;display:inline-flex;align-items:center;width:280px;max-width:100%}
.ui-select .ui-input{width:100%;padding-right:34px;appearance:none;cursor:pointer}
.ui-select .ic{position:absolute;right:10px;width:16px;height:16px;pointer-events:none;stroke:var(--color-muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ui-field{display:flex;flex-direction:column;gap:6px;max-width:360px}
.ui-field .ui-select{width:100%}
.ui-field-label{font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:20px;color:var(--color-text)}
.ui-field-error{margin:0;font-size:var(--font-size-sm-minus);line-height:18px;color:var(--status-danger-fg)}

/* ---- Switch (node 152:2537), PRD-234 D5 ----
   On or off for one row: a 36x20 track with a 16px knob, and the word "On"
   or "Off" beside it so colour is never alone. On is the success green, Off
   the control-border grey. The whole thing is one button (it saves on press),
   with the shared focus ring on the track. */
.ui-switch-form{display:inline-flex}
.ui-switch{display:inline-flex;align-items:center;gap:var(--space-2);padding:0;border:0;background:none;font:inherit;color:var(--color-muted);cursor:pointer}
.ui-switch:disabled{opacity:.45;cursor:default}
.ui-switch-track{position:relative;flex:none;width:36px;height:20px;border-radius:var(--radius-full);background:var(--color-control-border)}
.ui-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background:var(--color-bg)}
.ui-switch-on .ui-switch-track{background:var(--status-success-fg)}
.ui-switch-on .ui-switch-track::after{left:18px}
.ui-switch-word{font-size:var(--font-size-xs);line-height:16px;color:var(--color-muted)}
.ui-switch:focus-visible{outline:none}
.ui-switch:focus-visible .ui-switch-track{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}

/* ---- Checkbox (node 160:3046), PRD-234 D8 and D9 ----
   A native checkbox drawn 18px: a white box with the 1.5px control border,
   and when ticked the primary-fg fill with a white tick. The tick is a mask
   over the box's own colour, so no colour is written in the image. */
.ui-checkbox{appearance:none;flex:none;box-sizing:border-box;width:18px;height:18px;margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-xs);background:var(--color-bg);cursor:pointer;vertical-align:middle;position:relative}
.ui-checkbox:checked{border-color:var(--status-primary-fg);background:var(--status-primary-fg)}
.ui-checkbox:checked::before{content:"";position:absolute;inset:1.5px;background:var(--color-bg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2L4.8 8.5L9.5 3.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2L4.8 8.5L9.5 3.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.ui-checkbox:disabled{opacity:.45;cursor:default}
.ui-checkbox:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}

/* ---- Radio (PRD-257 S2; popup 539:26427, notes 541:27884) ----
   The Checkbox's look made round, as the signed drawing has it: an 18px
   base-fill circle with the 1.5px control border; chosen, a primary-fg ring
   and an 8px primary-fg dot in its centre. */
.ui-radio{appearance:none;flex:none;box-sizing:border-box;width:18px;height:18px;margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-full);background:var(--color-bg);cursor:pointer;vertical-align:middle;position:relative}
.ui-radio:checked{border-color:var(--status-primary-fg)}
.ui-radio:checked::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:var(--radius-full);background:var(--status-primary-fg);transform:translate(-50%,-50%)}
.ui-radio:disabled{opacity:.45;cursor:default}
.ui-radio:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}

/* ---- Tag (node 115:1149) ---- */
.ui-tag{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:22px;padding:0 var(--space-2);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--fw-regular);line-height:16px;white-space:nowrap}
.ui-tag-neutral{background:var(--color-surface-grey);color:var(--color-muted)}
.ui-tag-good{background:var(--color-success-bg);color:var(--status-success-fg)}
.ui-tag-warning{background:var(--color-warning-bg);color:var(--status-warning-fg)}
.ui-tag-bad{background:var(--color-danger-bg);color:var(--status-danger-fg)}
.ui-tag-info{background:var(--color-info-bg);color:var(--status-info-fg)}

/* ---- Editor toolbar (PRD-238 D5, node 243:7287) ----
   A 36px strip on the surface colour with a hairline under it; eight plain
   28px tools, 8px in from the left, 4px apart. B is Bold, U is underlined,
   the words are Regular. Only the controller's `enhanced` wrapper shows it,
   so with JavaScript off there is no strip (Ui::EditorToolbarComponent). */
.ui-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);box-sizing:border-box;min-height:36px;padding:calc(var(--space-1) - 0.5px) var(--space-2);border-bottom:1px solid var(--color-border-subtle);background:var(--color-surface)}
.ui-editor-toolbar .ui-tooltip-anchor{display:inline-flex}
.ui-editor-tool{display:inline-flex;align-items:center;box-sizing:border-box;height:28px;padding:0 var(--space-2);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font:var(--fw-regular) var(--font-size-sm)/20px var(--font-sans);white-space:nowrap;cursor:pointer}
.ui-editor-tool:hover{background:var(--color-surface-grey)}
.ui-editor-tool:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-focus)}
.ui-editor-tool-bold{font-weight:var(--fw-bold)}
.ui-editor-tool-underline{text-decoration:underline}
/* Style=Icons (set 626:768, node 626:713; the comment box, PRD-270): the
   same strip, the tools 28x28 squares with no gap, each a 16px glyph in the
   middle. The letters are Rubik 13px on a 16px line, B and H SemiBold, I
   italic, U underlined; the line glyphs are 1.2 strokes and fills in the
   tool's own colour. Eight tools are 224px, so the row fits a 243px drawer
   (8px each side); a narrower box still wraps rather than clip a tool. */
.ui-editor-toolbar--icons{gap:0}
.ui-editor-toolbar--icons .ui-editor-tool{justify-content:center;width:28px;padding:0;font-size:var(--font-size-sm-minus);line-height:16px}
.ui-editor-toolbar--icons .ui-editor-tool-bold,.ui-editor-toolbar--icons .ui-editor-tool-heading{font-weight:var(--fw-semibold)}
.ui-editor-toolbar--icons .ui-editor-tool-italic{font-style:italic}
.ui-editor-toolbar--icons .ui-editor-tool-underline{text-decoration-thickness:from-font;text-underline-position:from-font}
.ui-editor-glyph{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ui-editor-glyph .fill{fill:currentColor;stroke:none}

/* ---- Page top (node 114:132) ----
   The title and at most one decision on one row (D7). The title is 32px
   SemiBold on a 40px line, the height of the Regular button beside it, so the
   two share a centre line. The size is the sheet's size/page-title (32px,
   tokens-v3.css).
   Below 720px the top bar hides its breadcrumb (PRD-196 D12), so the one back
   link shows there and nowhere else (PRD-196 D20). */
.ui-page-top{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.ui-page-top-row{display:flex;align-items:center;gap:var(--space-4);min-width:0}
.ui-page-top-row>h1{flex:1 1 auto;min-width:0;margin:0;font-size:var(--font-size-page-title);font-weight:var(--fw-semibold);line-height:40px;letter-spacing:-0.48px;color:var(--color-text);overflow-wrap:anywhere}
.ui-page-top-decision,.ui-page-top-filter,.ui-page-top-help{flex:none;display:flex;align-items:center}
/* PRD-302 D9: who can press, in the decision's place, when the reader cannot. */
.ui-page-top-decision:has(>.ui-page-top-who){flex:0 1 320px}
.ui-page-top-who{margin:0;font-size:var(--font-size-sm-minus);line-height:18px;color:var(--color-muted);text-align:right;text-wrap:balance}
.ui-page-top-back{align-self:flex-start;font-size:var(--font-size-sm);line-height:20px;color:var(--color-muted);text-decoration:none}
.ui-page-top-back::before{content:"\2190";margin-right:6px}
.ui-page-top-back:hover{color:var(--color-text);text-decoration:none}
.ui-page-top-back:focus-visible{outline:none;border-radius:var(--radius-xs);box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
@media (min-width:720px){.ui-page-top-back{display:none}}
@media (max-width:719.98px){.ui-page-top-row{flex-wrap:wrap;row-gap:var(--space-3)}}

/* ---- Tabs (node 114:148) and Tab (node 114:147) ----
   The inner nav under Page top: one white box with the hairline border, the
   tabs 40px tall and of equal width. Each tab is a link; the current one has
   aria-current="page" and is marked by more than colour - SemiBold, the
   primary-fg text AND a 2px primary underline. The others are Medium, muted.
   Focus draws a 2px inset ring. A stage behind you (`.done`, the release
   notes' waterfall) keeps its tick. On a phone each tab keeps its whole
   label with 8px of side padding, so four short tabs fit a 320px screen;
   when the labels still do not fit, the strip scrolls sideways rather than
   cutting a label short, with no drawn scrollbar (the sheet's "Tabs (scroll
   sideways)", 128:984, draws none; the Stage bar hides its own the same way).
   A swipe, a trackpad and Tab focus still scroll it: a focused link is
   scrolled into view. From 720px up the tabs take
   equal widths (the sheet's layout) while the row has room, and never go
   below their whole label: a row too narrow for every label scrolls
   sideways, as on a phone (the sheet's "Tabs (scroll sideways)", 128:984),
   and never cuts a label to an ellipsis ("Playbo..." at 768px, PRD-234). */
.ui-tabs{position:relative;display:flex;box-sizing:border-box;min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);overflow-x:auto;scrollbar-width:none}
.ui-tabs::-webkit-scrollbar{display:none}
.ui-tabs>a,.ui-tabs>span{position:relative;flex:1 0 auto;display:block;box-sizing:border-box;height:var(--size-control);padding:0 var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:40px;text-align:center;color:var(--color-muted);white-space:nowrap;text-decoration:none}
.ui-tabs>a[href]:hover{color:var(--color-text);text-decoration:none}
.ui-tabs>a[aria-current="page"]{font-weight:var(--fw-semibold);color:var(--status-primary-fg)}
.ui-tabs>a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-primary)}
.ui-tabs>a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus)}
.ui-tabs>a[aria-disabled="true"]{color:var(--color-faint);cursor:default}
.ui-tabs>a.done{color:var(--color-faint)}
.ui-tabs>a.done::before{content:"\2713";margin-right:6px;color:var(--status-success-fg)}
@media (min-width:720px){.ui-tabs>a,.ui-tabs>span{flex:1 0 0;min-width:max-content;padding:0 var(--space-4)}}

/* ---- Selection overlay (PRD-240 D7, S4; node 274:8664, its open menu
   274:8686) ---- Ui::SelectionOverlayComponent. The dark blue bar at the
   bottom centre while rows are selected; its ground is the sheet's one new
   colour, --overlay-selection (tokens-v3.css). The pills' white washes are
   the overlay white (--overlay-fg) mixed with transparency at the sheet's own
   8%/30% (18%/50% for an open pill); no hex. The bar sits
   --selection-offset above the window's foot, so a page with a bar of its
   own there (the planning sticky bar) sets that variable and nothing else.
   The menus are the sheet's Menu, opening ABOVE their pill. */
.ui-selection{position:fixed;z-index:45;left:calc(50% + var(--sidebar-width, 0px) / 2);bottom:calc(var(--selection-offset, 0px) + var(--space-5) + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);display:flex;align-items:center;gap:var(--space-2);box-sizing:border-box;width:max-content;max-width:calc(100vw - var(--sidebar-width, 0px) - 2 * var(--space-4));padding:var(--space-2) var(--space-3) var(--space-2) 20px;border-radius:var(--radius);background:var(--overlay-selection);box-shadow:0 8px 24px var(--overlay-shadow);color:var(--overlay-fg)}
.ui-selection[hidden]{display:none}
.ui-selection-count{margin-right:var(--space-2);font:var(--fw-medium) var(--font-size-sm)/20px var(--font-sans);white-space:nowrap}
.ui-selection-form{display:none}
.ui-selection-menu{position:relative}
.ui-selection-menu:not([open])>.ui-menu,.ui-selection-cycle:not([open])>.ui-selection-weeks{display:none}
.ui-selection-pill{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:var(--size-control-small);padding:0 var(--space-3);border:1px solid color-mix(in srgb, var(--overlay-fg) 30%, transparent);border-radius:var(--radius-ui);background:color-mix(in srgb, var(--overlay-fg) 8%, transparent);color:var(--overlay-fg);font:var(--fw-regular) var(--font-size-sm-minus)/20px var(--font-sans);white-space:nowrap;list-style:none;cursor:pointer}
.ui-selection-pill::-webkit-details-marker{display:none}
.ui-selection-menu[open]>.ui-selection-pill,.ui-selection-pill:hover{border-color:color-mix(in srgb, var(--overlay-fg) 50%, transparent);background:color-mix(in srgb, var(--overlay-fg) 18%, transparent)}
.ui-selection-pill:focus-visible,.ui-selection-input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--overlay-selection),0 0 0 4px var(--overlay-fg)}
.ui-selection-caret{display:inline-flex;color:var(--overlay-fg-soft)}
.ui-selection-caret svg,.ui-selection-next svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ui-selection-main,.ui-selection-main:hover{border-color:var(--overlay-fg);background:var(--overlay-fg);color:var(--overlay-selection)}
.ui-selection-danger{color:color-mix(in srgb, var(--color-danger) 55%, var(--overlay-fg))}
.ui-selection-hours{cursor:default}
.ui-selection-input{box-sizing:border-box;width:48px;height:24px;padding:0 var(--space-2);border:1px solid color-mix(in srgb, var(--overlay-fg) 30%, transparent);border-radius:var(--radius-sm);background:var(--overlay-control);color:var(--overlay-fg);font:var(--fw-regular) var(--font-size-sm-minus)/20px var(--font-sans)}
.ui-selection-menu>.ui-menu{position:absolute;z-index:46;bottom:calc(100% + 6px);left:0;width:280px;max-height:min(480px, 70vh);overflow-y:auto;color:var(--color-text)}
.ui-selection-heading{display:flex;align-items:center;height:28px;padding:0 var(--space-3) 0 14px;font:var(--fw-medium) var(--font-size-xs)/20px var(--font-sans);color:var(--color-muted)}
.ui-selection-choice{display:flex;align-items:center;gap:var(--space-2);box-sizing:border-box;width:100%;min-height:36px;padding:0 var(--space-3) 0 14px;border:0;background:transparent;font:var(--fw-regular) var(--font-size-sm)/20px var(--font-sans);color:var(--color-text);text-align:left;list-style:none;cursor:pointer}
.ui-selection-choice::-webkit-details-marker{display:none}
.ui-selection-choice:hover,.ui-selection-choice:focus-visible{background:var(--color-surface);outline:none}
.ui-selection-choice:focus-visible{box-shadow:inset 0 0 0 2px var(--color-focus)}
.ui-selection-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-selection-meta{flex:none;font-size:var(--font-size-sm-minus);color:var(--color-muted)}
.ui-selection-next{display:inline-flex;color:var(--color-muted);transform:rotate(-90deg)}
.ui-selection-cycle[open]>.ui-selection-choice .ui-selection-next{transform:none}
.ui-selection-weeks{padding-left:var(--space-3);border-left:2px solid var(--color-border-subtle);margin-left:14px}
/* On a phone the bar wraps, so a menu hung off its pill would run past the
   screen's right edge for every pill but the first (PRD-240 S4 PR B, seen at
   400px). The menu hangs off the BAR instead, full width above it. */
@media (max-width:719.98px){.ui-selection{left:var(--space-2);right:var(--space-2);transform:none;width:auto;max-width:none;flex-wrap:wrap;padding-left:var(--space-3)}.ui-selection-menu{position:static}.ui-selection-menu>.ui-menu{left:0;right:0;width:auto}}
/* THE SLIDER (PRD-346 S7, sheet node 1036:71579): a 200px range on a 4px
   track, filled in the primary colour up to a white 14px knob with a 2px
   primary ring, the figure in words 12px to its right. The fill is
   --ui-slider-fill, which the ui-slider controller sets; Firefox draws it
   with ::-moz-range-progress. */
.ui-slider{display:inline-flex;align-items:center;gap:var(--space-3);min-width:0}
.ui-slider-input{--ui-slider-fill:0%;-webkit-appearance:none;appearance:none;width:200px;max-width:100%;height:20px;margin:0;padding:0;background:transparent;cursor:pointer}
.ui-slider-input:focus-visible{outline:none}
.ui-slider-input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--color-primary) var(--ui-slider-fill),var(--color-border) var(--ui-slider-fill))}
.ui-slider-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:16px;height:16px;margin-top:-6px;border:2px solid var(--color-primary);border-radius:50%;background:var(--color-bg)}
.ui-slider-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ui-slider-input::-moz-range-track{height:4px;border-radius:2px;background:var(--color-border)}
.ui-slider-input::-moz-range-progress{height:4px;border-radius:2px;background:var(--color-primary)}
.ui-slider-input::-moz-range-thumb{box-sizing:border-box;width:16px;height:16px;border:2px solid var(--color-primary);border-radius:50%;background:var(--color-bg)}
.ui-slider-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ui-slider-text{font:var(--fw-regular) var(--font-size-sm)/20px var(--font-sans);color:var(--color-text);white-space:nowrap}
/* THE SEGMENTED CONTROL (PRD-344 D18, sheet group 1150:64437): a 34px box
   with the control border and radius/ui, each option 32px high with 14px
   sides in 13px medium body ink; the pressed one on the primary tint in
   semibold primary ink, which a person reads in weight as well as colour. */
.ui-segmented-control{display:inline-flex;box-sizing:border-box;border:1px solid var(--color-control-border);border-radius:var(--radius-ui);background:var(--color-bg);overflow:hidden}
.ui-segmented-control-option{height:var(--size-control-small);margin:0;padding:0 14px;border:0;background:transparent;font:var(--fw-medium) var(--font-size-sm-minus)/1 var(--font-sans);color:var(--color-body);white-space:nowrap;cursor:pointer}
.ui-segmented-control-option:hover{color:var(--color-text);background:var(--color-surface)}
.ui-segmented-control-option:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-focus)}
.ui-segmented-control-option[aria-pressed="true"]{background:var(--color-primary-bg);font-weight:var(--fw-semibold);color:var(--status-primary-fg);cursor:default}