/* The hidden attribute always wins over a component's display rule. */
[data-workspace] [hidden], .ws-lightbox [hidden] { display: none !important; }
.ws :where(h1, h2, h3, h4), .ws-dialog :where(h1, h2, h3, h4), .ws-sheet :where(h1, h2, h3, h4) { font-family: var(--font-heading); }
.workspace-page .global-shell__footer { display: none; }
.workspace-page { overflow: hidden; }
/* The Workspace is the screen, never a scrolled page (the keyboard used to
   scroll the document and leave it cut off). While a field is focused,
   workspace.js sizes it to the visible area above the on-screen keyboard
   (--ws-vh); with nothing focused those are cleared, so it is
   always exactly the full screen again once the keyboard is gone. */
html:has(> body.workspace-page), body.workspace-page { height: 100%; overflow: hidden; overscroll-behavior: none; }
.ws { --drawer-top: 0px; --nav-w: var(--layout-nav); --rail-w: var(--layout-rail); --ctx-w: var(--layout-inspector); display: grid; grid-template-columns: auto minmax(0, 1fr); height: calc(var(--geometry-height-100dvh-9e432e5) - var(--header-h)); background: var(--paper); color: var(--ink); }
.workspace-page .ws { position: fixed; left: 0; right: 0; top: 0; height: var(--ws-vh, 100%); }
.ws.has-context { grid-template-columns: auto minmax(0, 1fr) var(--ctx-w); }
.ws-visually-hidden { position: absolute; width: var(--geometry-border-1px-93e2062); height: var(--geometry-border-1px-93e2062); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-muted { color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); margin: 0; }
.ws-button, .ws-toggle, .ws-agent-pick { font: inherit; font-size: var(--type-control); font-weight: var(--type-weight-control); line-height: var(--control-line); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--r-md); padding: var(--control-py) var(--control-px); cursor: pointer; }
/* A button's icon and words are centered on each other and in the button, everywhere (CLAUDE.md, Interface rules). */
.ws-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--control-gap); }
.ws-button > svg, .ws-button > [data-icon] > svg { flex: none; display: block; }
.ws-button:hover, .ws-toggle:hover, .ws-agent-pick:hover { border-color: var(--line-strong); background: var(--panel-strong); }
.ws-button--primary { background: var(--button-fill); color: var(--button-text); border-color: var(--button-fill); }
.ws-button--primary:hover { background: var(--button-hover); border-color: var(--button-hover); }
.ws-button:disabled, .ws-button:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--panel); border-color: var(--line); }
.ws-button--primary:disabled, .ws-button--primary:disabled:hover { background: var(--button-fill); border-color: var(--button-fill); }
.ws-icon { font: inherit; font-size: var(--typography-font-size-1-1rem-14af91b); line-height: var(--typography-line-height-1-6b86b27); background: none; border: var(--geometry-border-1px-93e2062) solid transparent; color: var(--muted); border-radius: var(--icon-radius); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-margin-5rem-ef026cb); cursor: pointer; }
.ws-icon:hover { color: var(--ink); border-color: var(--line); }
:where(.ws button, .ws input, .ws textarea, .ws a):focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-2px-7476140); }

/* navigation */
.ws-nav { border-right: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel); display: flex; min-height: 0; }
.ws-side { width: var(--nav-w); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); }
.ws-nav__top { display: flex; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-padding-9rem-2ad2e76); align-items: center; }
.ws-nav__top .ws-button { flex: 1; }
.ws-nav [data-action="close-nav"] { display: none; }
.ws-search { padding: 0 var(--spacing-padding-9rem-2ad2e76) var(--spacing-padding-6rem-d0bc70f); }
.ws-search input { width: 100%; font: inherit; font-size: var(--typography-font-size-85rem-2e72ebc); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); }
.ws-tree { overflow-y: auto; padding: 0 var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-1rem-b8be0c7); flex: 1; }
.ws-tree h2 { font-size: var(--typography-font-size-68rem-41c61ff); letter-spacing: var(--typography-letter-spacing-12em-a98947c); text-transform: uppercase; color: var(--dim); margin: var(--spacing-padding-1rem-b8be0c7) var(--spacing-margin-5rem-ef026cb) var(--spacing-gap-35rem-1304a2b); display: flex; justify-content: space-between; align-items: center; }
.ws-tree h2 button { font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-tree ul { list-style: none; margin: 0; padding: 0; }
.ws-tree li > button, .ws-tree summary { width: 100%; text-align: left; font: inherit; font-size: var(--typography-font-size-86rem-d03e951); background: none; border: 0; color: var(--ink); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-margin-5rem-ef026cb); border-radius: var(--icon-radius); cursor: pointer; display: flex; gap: var(--spacing-gap-45rem-ef5b39f); align-items: center; overflow: hidden; }
.ws-tree li > button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tree li > button:hover, .ws-tree summary:hover { background: var(--panel-strong); }
.ws-tree li > button[aria-current="page"] { background: var(--accent-surface); box-shadow: inset 2px 0 0 var(--accent); }
.ws-tree details ul { padding-left: var(--spacing-gap-8rem-818b9f7); border-left: var(--geometry-border-1px-93e2062) solid var(--line); margin-left: var(--spacing-padding-75rem-4cf1798); }
.ws-tree .ws-dot { width: var(--geometry-width-5rem-ef026cb); height: var(--geometry-width-5rem-ef026cb); border-radius: 50%; flex: none; background: var(--agent, var(--dim)); }

/* main column */
.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* The bar: navigation and where you are on the left; this chat's tools, then the mode switch and New chat on the right.
   One row, 60px (56px on phones), 40px buttons. */
.ws-bar { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-min-height-60px-229a5dc); box-sizing: border-box; padding: var(--spacing-padding-625rem-f9d8138) var(--spacing-padding-1rem-b8be0c7); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-bar__title { flex: 1; min-width: 0; }
.ws-bar h1 { font-size: var(--typography-font-size-1-05rem-8c6e288); font-weight: var(--typography-font-weight-620-524148f); letter-spacing: var(--typography-letter-spacing-01em-a3043ca); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-bar__actions { display: flex; align-items: center; flex: none; }
.ws-bar__tools { display: flex; align-items: center; gap: var(--spacing-gap-125rem-4727209); }
.ws-bar__primary { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin-left: var(--spacing-padding-75rem-4cf1798); }
.ws-bar .ws-iconbtn { width: var(--geometry-min-height-40px-1db6432); height: var(--geometry-min-height-40px-1db6432); border-radius:var(--r-sm); }
.ws-bar__nav { position: relative; }
.ws-only-narrow { display: none; }
.ws-messages { --page-x: clamp(1rem, 4vw, 3rem); --page-top: 1.25rem; flex: 1; overflow-y: auto; padding: var(--page-top) var(--page-x); display: flex; flex-direction: column; gap: var(--spacing-padding-1-25rem-c10b7e1); }
.ws-empty { margin: auto; max-width: var(--geometry-max-width-34rem-a36407e); text-align: center; }
.ws-empty h2 { font-size: var(--typography-font-size-1-55rem-43fa26c); font-weight: var(--typography-font-weight-620-524148f); letter-spacing: var(--typography-letter-spacing-02em-a1bf9ed); margin: 0 0 var(--spacing-margin-5rem-ef026cb); }

.ws-msg { max-width: var(--geometry-max-width-52rem-94b2e70); width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-padding-75rem-4cf1798); }
.ws-msg__avatar { width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); border-radius: 50%; background: var(--panel-strong); display: grid; place-items: center; font-size: var(--typography-font-size-8rem-818b9f7); font-weight: var(--typography-font-weight-800-1a1cf79); color: var(--muted); }
.ws-msg__head { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: baseline; flex-wrap: wrap; }
.ws-msg__name { font-weight: var(--typography-font-weight-800-1a1cf79); font-size: var(--typography-font-size-9rem-2ad2e76); color: var(--agent, var(--ink)); }
/* An agent's color is bright; on Light its name takes it mixed with the ink, so it still reads (4.5:1 or more). */
:root[data-theme="light"] .ws-msg__name { color: color-mix(in srgb, var(--agent, var(--ink)) 55%, var(--ink)); }
.ws-msg__meta { font-size: var(--typography-font-size-75rem-4cf1798); color: var(--dim); font-variant-numeric: tabular-nums; }
.ws-msg__body { line-height: var(--typography-line-height-1-6-ec6c168); overflow-wrap: anywhere; }
.ws-msg__body p { margin: var(--spacing-margin-4rem-7fdc8b1) 0; }
.ws-msg__body pre { background: var(--code-bg); color: var(--code-ink); border: var(--geometry-border-1px-93e2062) solid var(--code-line); border-radius: var(--r-lg); padding: var(--spacing-padding-75rem-4cf1798); overflow-x: auto; font-size: var(--typography-font-size-84rem-a4deb85); line-height: var(--typography-line-height-1-6-ec6c168); }
.ws-msg__body code { font-family: var(--font-mono); font-size: var(--typography-font-size-86em-a9b6ae3); background: color-mix(in srgb, var(--ink) 8%, transparent); padding: var(--spacing-padding-08rem-d010079) var(--spacing-gap-35rem-1304a2b); border-radius: var(--r-xs); }
/* Code in a line (`/bin/sh`, `sudo apt install neofetch`) in Dyadic's violet, on a tint of it (the owner, 2026-10-21: not
   teal, which is what an answer just unfolded). */
.ws-msg__body :not(pre) > code { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Math (workspace.js takeMath, KaTeX): a short one in its line, a full equation on its own, scrolling sideways on a
   narrow screen rather than past it; its source shows until KaTeX has loaded. */
.ws-math { font-size: var(--typography-font-size-1-05em-34d0042); }
.ws-math.is-waiting { font-family: var(--font-mono); font-size: var(--typography-font-size-86em-a9b6ae3); color: var(--muted); }
.ws-math--display { display: block; max-width: 100%; margin: var(--spacing-gap-7rem-7eff2a1) 0; overflow-x: auto; overflow-y: hidden; padding: var(--spacing-gap-15rem-e51094a) 0; text-align: center; }
.ws-math--display > .katex-display { margin: 0; }
.ws-math .katex { color: inherit; }
/* The typing cursor in Dyadic's violet, everywhere you type (the owner, 2026-10-21). */
.ws :is(input, textarea, [contenteditable="true"]), .ws-dialog :is(input, textarea) { caret-color: var(--violet); }
.ws-msg__body pre code { background: none; padding: 0; }
.ws-msg__body a { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--geometry-text-underline-offset-18em-bbf4c12); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.ws-msg__body a:hover { text-decoration-color: currentColor; }
/* A link that leaves Dyadic says so: a small arrow after its words in their color, drawn (a font may have no arrow), not
   underlined. Dyadic's own links (a Hub reference, a chip) have none. */
.ws-msg__body a[target="_blank"]:not(.ws-hubref):not(.ws-cite)::after { content: ""; display: inline-block; width: var(--geometry-width-6em-ab5dc36); height: var(--geometry-width-6em-ab5dc36);
  margin-left: var(--spacing-margin-left-14em-b471264); background: currentColor; opacity: .75; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws-msg__body a.ws-hubref { color: var(--amber); }  /* a "#" Hub reference keeps the color it had in the composer */
.ws-msg__body ul, .ws-msg__body ol { padding-left: var(--spacing-padding-1-3rem-4f4935e); margin: var(--spacing-margin-4rem-7fdc8b1) 0; }
/* A numbered list that starts further on ("42.") has wider numbers: room for them inside the text's edge. */
.ws-msg__body ol[start] { padding-left: var(--spacing-padding-left-2-3rem-4a13ff0); }
.ws-msg__body h1, .ws-msg__body h2, .ws-msg__body h3, .ws-msg__body h4, .ws-msg__body h5, .ws-msg__body h6 { line-height: var(--typography-line-height-1-3-9c193c6); margin: var(--spacing-padding-1rem-b8be0c7) 0 var(--spacing-margin-4rem-7fdc8b1); }
.ws-msg__body h1 { font-size: var(--typography-font-size-1-35rem-0c0025b); } .ws-msg__body h2 { font-size: var(--typography-font-size-1-2rem-a7b00d3); } .ws-msg__body h3 { font-size: var(--typography-font-size-1-05rem-8c6e288); } .ws-msg__body h4, .ws-msg__body h5, .ws-msg__body h6 { font-size: var(--typography-font-size-95rem-adb8a86); }
.ws-msg__body > :first-child { margin-top: 0; } .ws-msg__body > :last-child { margin-bottom: 0; }
.ws-msg__body li { margin: var(--spacing-gap-15rem-e51094a) 0; } .ws-msg__body li > ul, .ws-msg__body li > ol { margin: var(--spacing-gap-15rem-e51094a) 0; }
.ws-msg__body li:has(> input[type="checkbox"]) { list-style: none; margin-left: var(--spacing-margin-left-1-2rem-897e749); }
.ws-msg__body input[type="checkbox"] { margin: 0 var(--spacing-margin-4rem-7fdc8b1) 0 0; vertical-align: -.1em; }
.ws-msg__body blockquote { margin: var(--spacing-padding-6rem-d0bc70f) 0; padding: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-9rem-2ad2e76); border-left: var(--geometry-height-3px-ac33ff9) solid var(--agent, var(--accent)); color: var(--muted); }
.ws-msg__body hr { border: 0; border-top: var(--geometry-border-1px-93e2062) solid var(--line); margin: var(--spacing-padding-1rem-b8be0c7) 0; }
.ws-msg__body del { opacity: .7; }
/* A table is a soft card: one rounded edge, rows divided, no grid. */
.ws-table { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin: var(--spacing-gap-8rem-818b9f7) 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); }
.ws-msg__body table { border-collapse: separate; border-spacing: 0; font-size: var(--typography-font-size-88rem-39c360b); min-width: 100%; }
.ws-msg__body th, .ws-msg__body td { border: 0; border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-85rem-2e72ebc); text-align: left; vertical-align: top; }
.ws-msg__body thead th { color: var(--ink); font-size: var(--typography-font-size-82rem-8da80e1); font-weight: var(--typography-font-weight-700-99ee502); background: var(--panel-strong); border-bottom-color: var(--line); }
.ws-msg__body tbody tr:last-child > * { border-bottom: 0; }
.ws-msg__body tbody th { font-weight: var(--type-weight-control); }
.ws-plain { white-space: pre-wrap; }
.ws-code { margin: var(--spacing-gap-7rem-7eff2a1) 0; border: var(--geometry-border-1px-93e2062) solid var(--code-line); border-radius: var(--r-lg); overflow: hidden; background: var(--code-bg); }
.ws-code__head { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-4rem-7fdc8b1) var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-85rem-2e72ebc); font-size: var(--typography-font-size-74rem-bc7c01a); font-family: var(--font-mono); color: var(--code-dim); background: var(--code-head); border-bottom: var(--geometry-border-1px-93e2062) solid var(--code-line); text-transform: lowercase; }
.ws-code__copy { font: inherit; font-family: var(--font-ui); color: inherit; background: none; border: 0; border-radius: var(--r-sm); padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-5rem-ef026cb); cursor: pointer; text-transform: none; }
.ws-code__copy:hover, .ws-code__copy:focus-visible { color: var(--code-ink); background: color-mix(in srgb, var(--code-ink) 9%, transparent); }
.ws-msg__body .ws-code pre { margin: 0; border: 0; border-radius: 0; background: var(--code-bg); padding: var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-95rem-adb8a86); }
.ws-msg__body .ws-code pre code.hljs { padding: 0; background: none; }
/* Syntax colors (highlight.js classes), from the theme's --syn-* tokens: Dyadic's own palette in Light, Dark and OLED. */
.hljs { color: var(--code-ink); background: none; }
.hljs-keyword, .hljs-doctag, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-variable.language_, .hljs-selector-tag { color: var(--syn-keyword); }
.hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-title.class_.inherited__, .hljs-section { color: var(--syn-function); }
.hljs-string, .hljs-meta .hljs-string, .hljs-char.escape_ { color: var(--syn-string); }
.hljs-number, .hljs-literal, .hljs-bullet, .hljs-symbol { color: var(--syn-number); }
.hljs-type, .hljs-built_in, .hljs-class .hljs-title { color: var(--syn-type); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-variable, .hljs-params { color: var(--syn-attr); }
.hljs-name, .hljs-tag, .hljs-selector-pseudo { color: var(--syn-tag); }
.hljs-regexp, .hljs-link { color: var(--syn-regexp); }
.hljs-comment, .hljs-quote, .hljs-meta, .hljs-code, .hljs-formula { color: var(--syn-comment); font-style: italic; }
.hljs-meta { font-style: normal; }
.hljs-operator, .hljs-punctuation, .hljs-subst { color: var(--code-ink); }
.hljs-addition { color: var(--diff-add); background: var(--diff-add-bg); }
.hljs-deletion { color: var(--diff-del); background: var(--diff-del-bg); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: var(--typography-font-weight-700-99ee502); }
.ws-msg__body img { max-width: min(100%, var(--geometry-max-height-32rem-34ca678)); border-radius: var(--icon-radius); border: var(--geometry-border-1px-93e2062) solid var(--line); display: block; margin: var(--spacing-margin-5rem-ef026cb) 0; }
/* Your message on the right, in a bubble tinted with Dyadic's violet (the owner, 2026-10-21). */
.ws-msg.ws-msg--user > div:not(.ws-msg__avatar) { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.ws-msg--user .ws-msg__head { justify-content: flex-end; }
.ws-msg--user .ws-msg__body { width: fit-content; max-width: min(85%, var(--geometry-max-width-40rem-b4490db)); background: color-mix(in srgb, var(--violet) 13%, var(--panel)); border-radius: var(--geometry-width-18px-ab98c04) var(--geometry-width-18px-ab98c04) var(--geometry-border-radius-6px-7adef6a) var(--geometry-width-18px-ab98c04); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-95rem-adb8a86); }
/* Speak Message's player (workspace.js speakMessage): a slim bar above the message box in the theme's quiet colors,
   its sound's shape between play and close. */
.ws-speech { --speech-played: var(--ink); --speech-rest: color-mix(in srgb, var(--muted) 55%, transparent); display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7);
  max-width: var(--geometry-max-width-52rem-94b2e70); margin: 0 auto var(--spacing-gap-45rem-ef5b39f); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-4rem-7fdc8b1) var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-3rem-fb2375d); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-width-16px-6793164);
  background: color-mix(in srgb, var(--panel) 80%, var(--paper)); animation: ws-chips-in var(--dur-page-out) var(--motion-transition-ease-914ff41) both; }
.ws-speech__toggle { flex: none; background: var(--ink); color: var(--paper); border-radius: 50%; }
.ws-speech__toggle:hover, .ws-speech__toggle:focus-visible { background: var(--ink); color: var(--paper); opacity: .88; }
.ws-speech__time { flex: none; font-variant-numeric: tabular-nums; font-size: var(--typography-font-size-86rem-d03e951); color: var(--muted); }
.ws-speech__track { position: relative; flex: 1; min-width: 0; height: var(--geometry-width-2rem-bca5ebd); display: grid; grid-template-rows: 2rem; align-items: center; }
.ws-speech__wave { grid-area: 1 / 1; width: 100%; height: var(--geometry-width-2rem-bca5ebd); display: block; cursor: pointer; touch-action: none; border-radius:var(--r-xs); }
.ws-speech__wave:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-speech__wait { grid-area: 1 / 1; font-size: var(--typography-font-size-84rem-a4deb85); color: var(--muted); }
.ws-speech:not(.is-loading) .ws-speech__wait { display: none; }
.ws-speech.is-loading .ws-speech__wave { opacity: .45; }
.ws-speech__close { flex: none; }
/* An answer settled: its chips and its sources in its lines out of the way until a tap shows them (workspace.js
   settleChips), fading as they go. */
.ws-msg--agent.is-settling :is(.ws-msg__foot, .ws-cite) { opacity: 0; transition: opacity var(--motion-transition-350ms-cbe7c0b) var(--motion-transition-ease-914ff41); }
.ws-msg--agent.is-settled :is(.ws-msg__foot, .ws-cite) { display: none; }
.ws-msg--agent.is-revealed :is(.ws-msg__foot, .ws-cite) { animation: ws-chips-in var(--public-dur-hover) var(--motion-transition-ease-914ff41) both; }
@keyframes ws-chips-in { from { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .ws-msg--agent.is-settling :is(.ws-msg__foot, .ws-cite) { transition: none; } .ws-msg--agent.is-revealed :is(.ws-msg__foot, .ws-cite) { animation: none; } }
.ws-msg__foot { display: flex; gap: var(--spacing-gap-35rem-1304a2b); align-items: center; margin-top: var(--spacing-gap-35rem-1304a2b); flex-wrap: wrap; }
.ws-chip { font-size: var(--typography-font-size-72rem-2a7309a); color: var(--muted); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-margin-5rem-ef026cb); }
.ws-msg__actions { opacity: 0; transition: opacity var(--dur-micro) var(--motion-transition-ease-914ff41); }
.ws-msg:hover .ws-msg__actions, .ws-msg:focus-within .ws-msg__actions { opacity: 1; }
.ws-msg--pending .ws-msg__body { color: var(--muted); }
.ws-error { color: var(--red); }

/* composer */
.ws-composer { border-top: var(--geometry-border-1px-93e2062) solid var(--line); padding: var(--spacing-padding-75rem-4cf1798) clamp(var(--spacing-padding-1rem-b8be0c7), var(--spacing-padding-4vw-3bfef1b), var(--spacing-padding-3rem-550d167)) calc(var(--spacing-padding-75rem-4cf1798) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); }
.ws-composer > * { max-width: var(--geometry-max-width-52rem-94b2e70); margin-left: auto; margin-right: auto; }
/* Status lives in the chat (beside the thinking dots, under a live answer);
   the composer's copy is for screen readers only and takes no space. */
.ws-composer__status { position: absolute; width: var(--geometry-border-1px-93e2062); height: var(--geometry-border-1px-93e2062); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Working indicator: the agent's mark turns and breathes in its avatar's place,
   then a shimmering status word and three dots. */
.ws-thinking__main { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); align-content: center; min-height: var(--geometry-min-height-2-4rem-84ca4d0); }
.ws-thinking__row, .ws-msg__status { display: flex; align-items: center; gap: var(--spacing-padding-1rem-4e95f32); font-size: var(--typography-font-size-92rem-c7cd355); }
.ws-msg__status { margin: var(--spacing-margin-5rem-ef026cb) 0 0; gap: var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-msg__status[hidden] { display: none; }
.ws-thinking__mark { animation: ws-mark-spin var(--motion-animation-2600ms-f1f36cb) var(--motion-animation-linear-7f2fe58) infinite, ws-mark-breathe var(--motion-animation-1300ms-005f704) var(--motion-animation-ease-in-out-16c2539) infinite alternate; }
.ws-msg__status .ws-thinking__mark { width: var(--geometry-width-1-1rem-14af91b); height: var(--geometry-width-1-1rem-14af91b); border-radius: 50%; }
/* Its light runs on without a seam (the owner, 2026-10-22: "it randomly stops in the middle of the words and restarts"):
   the gradient is a period twice the words' width, repeating, moved by exactly one period a loop (ws-label-shine), and
   every new set of words joins the same cycle where it is (workspace.js shineAt) instead of starting it again. */
.ws-thinking__label { font-weight: var(--type-weight-control); background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 35%, var(--ink) 50%, var(--muted) 65%, var(--muted) 100%);
  background-size: 200% 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ws-label-shine var(--motion-animation-2400ms-131909a) var(--motion-animation-linear-7f2fe58) var(--shine-at, 0s) infinite; }
.ws-thinking__dots { display: inline-flex; gap: var(--spacing-gap-18rem-4293127); margin-left: var(--spacing-margin-2rem-4cd30ed); align-items: flex-end; height: var(--geometry-height-1em-284478b); }
.ws-thinking__dots i { width: var(--geometry-width-26rem-dde5cf4); height: var(--geometry-width-26rem-dde5cf4); border-radius: 50%; background: var(--muted); animation: ws-dot-fade var(--motion-animation-1200ms-f8ce733) var(--motion-animation-ease-in-out-16c2539) infinite; }
.ws-thinking__dots i:nth-child(2) { animation-delay: var(--motion-animation-delay-200ms-04c0990); }
.ws-thinking__dots i:nth-child(3) { animation-delay: var(--motion-animation-delay-400ms-d8e24dc); }
/* The working line (workspace.js workRow, dyad.js): the instrument, what it's doing (its words slide up as they
   change, a light passing through them in the Dyadic gradient), then how long in grey and its steps in cyan; what
   waits for you in amber. Done, it says how long it took, and goes. */
.ws-dyad, .ws-dyad-host { display: block; flex: none; }
.ws-dyad-host { display: inline-grid; place-items: center; }
.ws-thinking .ws-dyad-avatar { width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); border: 0; background: none; }
.ws-work { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-gap-15rem-e51094a) var(--spacing-gap-55rem-f5020a7); min-height: var(--geometry-width-1-6rem-9ef54f1); min-width: 0; font-size: var(--typography-font-size-92rem-c7cd355); }
.ws-msg__status .ws-work { font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-work__words { display: inline-grid; align-items: center; min-width: 0; overflow: hidden; height: var(--geometry-height-1-5em-4cda554); }
.ws-work__words > span { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-work .ws-thinking__label { background-image: linear-gradient(90deg, var(--muted) 0%, var(--muted) 32%, var(--cyan) 44%, var(--ink) 50%, var(--violet) 56%, var(--muted) 68%, var(--muted) 100%); }
.ws-work__words > .is-in { animation: ws-work-in var(--dur-row) var(--motion-transition-cubic-bezier-2-8-2-1-9312e32) both, ws-label-shine var(--motion-animation-2400ms-131909a) var(--motion-animation-linear-7f2fe58) var(--shine-at, 0s) infinite; }
.ws-work__words > .is-out { animation: ws-work-out var(--motion-animation-380ms-6eb619a) var(--motion-animation-ease-in-326f09b) both; }
.ws-work__meta { display: inline-flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); min-width: 0; font-size: var(--typography-font-size-86em-a9b6ae3); }
.ws-work__meta > :not([hidden]) + :not([hidden])::before { content: "·"; margin-right: var(--spacing-gap-55rem-f5020a7); color: var(--dim); }
.ws-work__time { color: var(--dim); font-variant-numeric: tabular-nums; }
.ws-work__steps { display: inline-flex; align-items: center; min-height: var(--geometry-min-height-1-75rem-672ca1c); padding: 0 var(--spacing-gap-15rem-e51094a); margin: 0 var(--spacing-margin-15rem-c6524f4); border: 0; border-radius:var(--r-xs); background: none;
  font: inherit; color: var(--cyan); cursor: pointer; }
.ws-work__steps[hidden] { display: none; }
.ws-work__steps:hover, .ws-work__steps:focus-visible { text-decoration: underline; text-underline-offset: var(--geometry-text-underline-offset-2em-5bb2e20); }
.ws-work.is-waiting .ws-thinking__label { background-image: linear-gradient(90deg, var(--amber) 0%, var(--amber) 38%, var(--ink) 50%, var(--amber) 62%, var(--amber) 100%); }
.ws-act__now .ws-work { flex: 1; flex-wrap: nowrap; font-size: var(--typography-font-size-86rem-d03e951); }
.ws-act__now .ws-work__meta { flex: none; }
.ws-act__stop { flex: none; color: var(--muted); }
.ws-act__stop:hover, .ws-act__stop:focus-visible { color: var(--danger); }
.ws-work--done { margin: var(--spacing-gap-55rem-f5020a7) 0 0; color: var(--dim); font-size: var(--typography-font-size-82rem-8da80e1); animation: ws-work-resolve var(--motion-animation-7000ms-b494f1f) var(--motion-transition-ease-914ff41) forwards; }
.ws-work__said { color: var(--muted); }
.ws-work__one { width: var(--geometry-width-5rem-ef026cb); height: var(--geometry-width-5rem-ef026cb); border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 0 var(--amber);
  animation: ws-work-one var(--motion-animation-1100ms-04e2190) var(--motion-animation-ease-out-791c2d0) 1; }
@keyframes ws-work-in { from { opacity: 0; transform: translateY(85%); filter: blur(3px); } }
@keyframes ws-work-out { to { opacity: 0; transform: translateY(-85%); filter: blur(3px); } }
@keyframes ws-work-resolve { 0% { opacity: 0; transform: translateY(3px); } 7% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ws-work-one { 0% { transform: scale(2.4); box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 70%, transparent); } 60% { box-shadow: 0 0 0 .55rem transparent; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ws-work__words > .is-in, .ws-work__words > .is-out, .ws-work--done, .ws-work__one { animation: none; }
  .ws-work .ws-thinking__label { background: none; color: var(--muted); }
  .ws-work.is-waiting .ws-thinking__label { color: var(--amber); }
}
/* Moving between Dyadic and the Hub (workspace.js crossTo, arriveCrossing; crossing.js): the working line's instrument
   and words over the whole screen, the page rolling away under them, and on the other host the next one rolling in. */
html.dy-crossing body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--paper); }
.ws-crossing { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; background: var(--paper);
  animation: ws-cross-veil var(--dur-page-out) var(--motion-animation-ease-out-791c2d0) both; }
.ws-crossing .ws-work { flex-direction: column; gap: var(--spacing-padding-75rem-4cf1798); font-size: var(--typography-font-size-1rem-b8be0c7); }
.ws-crossing .ws-work__words { height: var(--geometry-height-1-6em-2661e97); }
.ws-crossing.is-arriving { animation: none; }
.ws-crossing.is-leaving { animation: ws-cross-veil var(--motion-animation-380ms-6eb619a) var(--motion-animation-ease-in-326f09b) reverse both; }
.ws.is-crossing-out > * { animation: ws-cross-out var(--dur-drawer) var(--motion-animation-ease-in-326f09b) both; }
.ws.is-crossing-done > * { animation: ws-cross-in var(--dur-page-in) var(--motion-transition-cubic-bezier-2-8-2-1-9312e32) both; }
@keyframes ws-cross-veil { from { opacity: 0; } }
@keyframes ws-cross-out { to { opacity: 0; transform: translateY(-1.5rem); filter: blur(6px); } }
@keyframes ws-cross-in { from { opacity: 0; transform: translateY(1.5rem); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { .ws-crossing, .ws.is-crossing-out > *, .ws.is-crossing-done > * { animation: none; } }
@keyframes ws-mark-spin { to { rotate: 360deg; } }
@keyframes ws-mark-breathe { from { scale: .92; filter: brightness(.95); } to { scale: 1.06; filter: brightness(1.2); } }
@keyframes ws-label-shine { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes ws-dot-fade { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ws-thinking__mark, .ws-thinking__dots i { animation: none; }
  .ws-thinking__label { animation: none; color: var(--muted); background: none; }
}
.ws-inputbox { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-margin-3rem-fb2375d); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: var(--geometry-width-20px-9bf0c8e);
  background: color-mix(in srgb, var(--panel) 60%, var(--paper)); transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), box-shadow var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-inputbox:focus-within { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-inputbox__main { flex: 1; min-width: 0; display: grid; }
.ws-composer textarea { display: block; width: 100%; resize: none; max-height: var(--geometry-max-height-60vh-e3566e6); overflow-y: auto; font: inherit; line-height: var(--type-line-body); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-25rem-1677828); background: transparent; color: var(--ink); border: 0; border-radius: 0; }
.ws-composer textarea:focus, .ws-composer textarea:focus-visible { outline: none; }
/* The colored copy under the message box (workspace.js inkComposer): the textarea's own box, padding, font and wrapping,
   scrolled with it; the textarea's text clear over it, its cursor violet, its hint as ever. No scrollbar takes width
   from one and not the other. */
.ws-inkwrap { position: relative; min-width: 0; }
.ws-ink { position: absolute; inset: 0; box-sizing: border-box; overflow: hidden; pointer-events: none; font: inherit; line-height: var(--type-line-body);
  padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-25rem-1677828); white-space: pre-wrap; overflow-wrap: break-word; color: var(--ink); }
.ws-composer textarea.is-inked { position: relative; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--violet);
  scrollbar-width: none; }
.ws-composer textarea.is-inked::-webkit-scrollbar { display: none; }
.ws-composer textarea.is-inked::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.ws-composer textarea.is-inked::selection { color: transparent; background: color-mix(in srgb, var(--violet) 32%, transparent); }
.ws-ink__code, .ws-ink__link { color: var(--violet); }
.ws-ink__mention { color: var(--cyan); }
.ws-ink__link { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--violet) 55%, transparent); text-underline-offset: var(--geometry-text-underline-offset-18em-bbf4c12); }
.ws-ink__ref, .ws-ink__math { color: var(--amber); }
.ws-ink__command { color: var(--coral); }
.ws-inputbox:not(:focus-within) textarea::placeholder { opacity: .75; }
/* A hint wider than the box (a long agent name on a narrow phone) stays on one line instead of showing half a second line. */
.ws-composer textarea::placeholder { white-space: nowrap; overflow: hidden; }
.ws-inputbox .ws-plus, .ws-inputbox .ws-send { flex: none; margin-bottom: var(--spacing-padding-05rem-98939d1); }
/* Claude's layout: the message on top, the full width of the box; below it, + and the model pill on the left, send on the right. */
.ws-inputbox__main { order: 1; flex: 0 0 100%; padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-45rem-ef5b39f) 0; }
.ws-inputbox .ws-plus { order: 2; }
.ws-inputbox .ws-agent-pick { order: 3; }
.ws-inputbox .ws-send { order: 4; margin-left: auto; }
/* Active modes sit on their own line at the top of the box, above a thin rule. */
.ws-modechips { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-padding-25rem-1677828) var(--spacing-gap-35rem-1304a2b) var(--spacing-margin-5rem-ef026cb); margin-bottom: var(--spacing-margin-2rem-4cd30ed); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-modechips:not(:has(.ws-modechip[aria-pressed="true"])) { display: none; }
.ws-modechip { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); font: 700 var(--typography-font-size-74rem-bc7c01a)/1 var(--font-ui); padding: var(--spacing-padding-32rem-ecbb419) var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-32rem-ecbb419) var(--spacing-gap-55rem-f5020a7); border-radius: var(--geometry-border-radius-999px-088f244);
  border: var(--geometry-border-1px-93e2062) solid var(--accent); background: var(--accent-surface); color: var(--ink); cursor: pointer; }
.ws-modechip[aria-pressed="false"] { display: none; }
.ws-activity__auto { color: var(--accent); }
.ws-modechip svg { width: var(--geometry-width-13px-145f2f5); height: var(--geometry-width-13px-145f2f5); }
.ws-modechip svg:last-child { opacity: .7; }
.ws-modechip:hover svg:last-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ws-inputbox { transition: none; } }
.ws-composer__spacer { flex: 1; }
.ws-agent-pick { display: inline-flex; gap: var(--spacing-margin-4rem-7fdc8b1); align-items: center; min-width: 0; max-width: calc(100% - var(--geometry-max-width-6-5rem-6c3b091)); height: var(--geometry-width-38px-6018510); padding: 0 var(--spacing-gap-8rem-818b9f7) 0 var(--spacing-gap-45rem-ef5b39f);
  border: 0; border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--ink) 7%, transparent); font-weight: var(--type-weight-control); white-space: nowrap; }
.ws-agent-pick:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); border: 0; }
.ws-agent-pick img, .ws-agent-pick .ws-agentmark { width: var(--geometry-border-radius-22px-5d6c439); height: var(--geometry-border-radius-22px-5d6c439); flex: none; border-radius: 50%; }
.ws-agent-pick__model { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-agent-pick__effort { color: var(--muted); font-weight: var(--typography-font-weight-500-0604cd3); }
.ws-pickgroup { display: flex; flex-direction: column; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); background: var(--panel-strong); overflow: hidden; margin: 0 0 var(--spacing-padding-75rem-4cf1798); }
.ws-pickopt { display: flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); width: 100%; min-height: var(--geometry-min-height-3-5rem-4c81e32); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-padding-1rem-b8be0c7); text-align: left; font: inherit; color: var(--ink);
  background: none; border: 0; border-top: var(--geometry-border-1px-93e2062) solid var(--line); cursor: pointer; }
.ws-pickopt:first-child { border-top: 0; }
.ws-pickopt:hover { background: var(--panel); }
.ws-pickopt__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-gap-15rem-e51094a); }
.ws-pickopt__text strong { font-size: var(--typography-font-size-1rem-b8be0c7); font-weight: var(--typography-font-weight-550-f89f8d0); }
.ws-pickopt__text small { color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); }
.ws-pickopt > svg:last-child { flex: none; color: var(--accent); }
.ws-pickopt--link > svg { color: var(--muted); }
.ws-pickopt__space { width: var(--geometry-width-20px-9bf0c8e); flex: none; }
.ws-pickopt .ws-agentmark, .ws-pickopt img { width: var(--geometry-height-28px-c80bfee); height: var(--geometry-height-28px-c80bfee); flex: none; border-radius: 50%; }
.ws-pickgroup--effort { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-padding-75rem-4cf1798); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-1rem-b8be0c7); flex-wrap: wrap; }
.ws-pickgroup--effort strong { font-weight: var(--typography-font-weight-550-f89f8d0); }
.ws-picklabel { margin: var(--spacing-padding-25rem-1677828) 0 var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-25rem-1677828); }
@media (max-width: 600px) { .ws-agent-pick__model { max-width: var(--geometry-max-width-8-5rem-6cb06ca); } }
.ws-toggle[aria-pressed="true"] { background: var(--accent-surface); border-color: var(--accent); color: var(--accent-muted); }
.ws-cancel { font-size: var(--typography-font-size-1rem-b8be0c7); background: none; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-55rem-f5020a7); cursor: pointer; }

/* context */
.ws-context { border-left: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel); padding: var(--spacing-padding-9rem-2ad2e76); overflow-y: auto; }
.ws-context header { display: flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); }
.ws-context h2 { margin: 0 auto 0 0; font-size: var(--typography-font-size-1rem-b8be0c7); font-weight: var(--typography-font-weight-800-1a1cf79); }
.ws-stack { list-style: none; padding: 0; margin: var(--spacing-padding-9rem-2ad2e76) 0 0; display: flex; flex-direction: column; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-stack li { border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-6rem-d0bc70f); background: var(--paper); }
.ws-stack li strong { display: block; font-size: var(--typography-font-size-85rem-2e72ebc); }
.ws-stack li small { color: var(--dim); font-size: var(--typography-font-size-72rem-2a7309a); }
.ws-stack li p { font-size: var(--typography-font-size-8rem-818b9f7); color: var(--muted); margin: var(--spacing-margin-3rem-fb2375d) 0 0; max-height: var(--geometry-min-height-4-5rem-41dca9e); overflow: hidden; }
.ws-stack__row { display: flex; justify-content: space-between; gap: var(--spacing-margin-4rem-7fdc8b1); align-items: start; }

/* menus */
.ws-menu { position: fixed; z-index: 60; min-width: var(--geometry-width-13rem-e38b03b); background: var(--panel-strong); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--spacing-margin-3rem-fb2375d); }
.ws-menu button { display: flex; width: 100%; gap: var(--spacing-gap-55rem-f5020a7); align-items: center; text-align: left; font: inherit; font-size: var(--typography-font-size-86rem-d03e951); background: none; border: 0; color: var(--ink); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f); border-radius: var(--r-sm); cursor: pointer; }
.ws-menu button:hover, .ws-menu button:focus-visible { background: color-mix(in srgb, var(--ink) 8%, transparent); outline: none; }
.ws-menu hr { border: 0; border-top: var(--geometry-border-1px-93e2062) solid var(--line-soft); margin: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-35rem-1304a2b); }
.ws-menu img { width: var(--geometry-width-20px-9bf0c8e); height: var(--geometry-width-20px-9bf0c8e); border-radius: 50%; }
/* Line icons take the same 20px slot as agent pictures, so every label starts in one column. */
.ws-menu button > svg:first-child { box-sizing: content-box; padding: 0 var(--spacing-padding-1-5px-67792bd); }
.ws-menu__slot { flex: none; width: var(--geometry-width-20px-9bf0c8e); height: var(--geometry-width-20px-9bf0c8e); }
.ws-menu .danger { color: var(--red); }
.ws-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
.ws-toast { position: fixed; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); max-width: calc(var(--geometry-max-width-100vw-26ee43a) - var(--geometry-width-2rem-bca5ebd)); background: var(--panel-strong); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-1rem-b8be0c7); border-radius: var(--r-lg); box-shadow: var(--shadow-2); z-index: 70; font-size: var(--typography-font-size-86rem-d03e951); line-height: var(--typography-line-height-1-4-1a948f1); }

.ws-plus { display: inline-grid; place-items: center; width: var(--geometry-width-38px-6018510); height: var(--geometry-width-38px-6018510); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.ws-plus:hover, .ws-plus[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.ws-attachments { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-4rem-7fdc8b1); margin-bottom: var(--spacing-gap-45rem-ef5b39f); }
.ws-attachment { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); font-size: var(--typography-font-size-78rem-6850684); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel); border-radius: var(--icon-radius); padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-25rem-1677828) var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-5rem-ef026cb); max-width: var(--geometry-max-height-16rem-868f8b1); }
.ws-attachment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-attachment img { width: var(--geometry-height-28px-c80bfee); height: var(--geometry-height-28px-c80bfee); object-fit: cover; border-radius:var(--r-sm); }
.ws-attachment[data-state="uploading"] { opacity: .6; }
.ws-image-options { display: flex; flex-wrap: wrap; gap: var(--spacing-padding-6rem-d0bc70f); align-items: center; margin-bottom: var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-8rem-818b9f7); color: var(--muted); background: var(--accent-surface); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); }
.ws-image-options select { font: inherit; font-size: var(--typography-font-size-8rem-818b9f7); background: var(--panel); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-3rem-fb2375d); max-width: var(--geometry-max-height-16rem-868f8b1); }
.ws-msg__files { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-4rem-7fdc8b1); margin-top: var(--spacing-margin-4rem-7fdc8b1); }
.ws-msg__files img { width: var(--geometry-width-7rem-c899fa2); height: var(--geometry-width-7rem-c899fa2); object-fit: cover; border-radius: var(--icon-radius); border: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-msg__files a { font-size: var(--typography-font-size-78rem-6850684); color: var(--cyan); }
.ws-origin { opacity: .62; }
.ws-origin-note { max-width: var(--geometry-max-width-52rem-94b2e70); width: 100%; margin: 0 auto; font-size: var(--typography-font-size-78rem-6850684); color: var(--dim); border-top: var(--geometry-border-1px-93e2062) dashed var(--line); padding-top: var(--spacing-margin-5rem-ef026cb); }
.ws.drop-target .ws-main { outline: var(--geometry-outline-2px-7476140) dashed var(--accent); outline-offset: var(--geometry-outline-offset-6px-fef3742); }

.ws-nav__foot { border-top: var(--geometry-border-1px-93e2062) solid var(--line); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-9rem-2ad2e76) calc(var(--spacing-padding-6rem-d0bc70f) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); display: flex; flex-direction: column; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-nav__links { display: flex; gap: var(--spacing-gap-8rem-818b9f7); flex-wrap: wrap; }
.ws-link { font: inherit; font-size: var(--typography-font-size-82rem-8da80e1); color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.ws-link:hover { color: var(--ink); text-decoration: underline; }
.ws-usage { font-size: var(--typography-font-size-75rem-4cf1798); color: var(--dim); text-decoration: none; }
.ws-results { list-style: none; margin: 0; padding: 0 var(--spacing-margin-2rem-4cd30ed); }
.ws-results li { border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-results button.ws-result { width: 100%; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; padding: var(--spacing-margin-5rem-ef026cb); cursor: pointer; display: block; }
.ws-results button.ws-result:hover { background: var(--panel-strong); }
.ws-results small { display: block; color: var(--dim); font-size: var(--typography-font-size-72rem-2a7309a); text-transform: uppercase; letter-spacing: var(--typography-letter-spacing-08em-0018d62); }
.ws-results span { display: block; font-size: var(--typography-font-size-84rem-a4deb85); overflow: hidden; text-overflow: ellipsis; }
.ws-result-row { display: flex; align-items: start; }
.ws-result-row .ws-icon { margin-top: var(--spacing-margin-3rem-fb2375d); }
.ws-project { width: 100%; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-padding-1-2rem-a7b00d3); }
.ws-project section { border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); padding: var(--spacing-padding-9rem-2ad2e76) var(--spacing-padding-1rem-b8be0c7); background: var(--panel); }
.ws-project h2:not(:where(.ws-msg__body *)) { font-size: var(--typography-font-size-72rem-2a7309a); letter-spacing: var(--typography-letter-spacing-12em-a98947c); text-transform: uppercase; color: var(--dim); margin: 0 0 var(--spacing-padding-6rem-d0bc70f); display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-project textarea, .ws-dialog textarea, .ws-dialog input[type="text"], .ws-dialog input[type="url"], .ws-project input { width: 100%; font: inherit; font-size: var(--typography-font-size-9rem-2ad2e76); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-65rem-bcca6ce); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); }
.ws-pulse h3 { font-size: var(--typography-font-size-8rem-818b9f7); color: var(--accent-muted); margin: var(--spacing-gap-7rem-7eff2a1) 0 var(--spacing-padding-25rem-1677828); }
.ws-pulse ul { margin: 0; padding-left: var(--spacing-padding-left-1-1rem-14af91b); }
.ws-pulse li { margin: var(--spacing-margin-2rem-4cd30ed) 0; font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-pulse a { font-size: var(--typography-font-size-72rem-2a7309a); color: var(--cyan); margin-left: var(--spacing-gap-35rem-1304a2b); cursor: pointer; }
.ws-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-list li { display: flex; justify-content: space-between; gap: var(--spacing-padding-6rem-d0bc70f); align-items: center; font-size: var(--typography-font-size-88rem-39c360b); }
.ws-list button.ws-linkish { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-padding-1rem-4e95f32) var(--spacing-gap-55rem-f5020a7); background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; text-align: left; padding: 0; }
.ws-row { display: flex; gap: var(--spacing-margin-5rem-ef026cb); flex-wrap: wrap; align-items: center; margin-top: var(--spacing-padding-6rem-d0bc70f); }
.ws-dialog { width: min(var(--geometry-max-width-40rem-b4490db), var(--geometry-width-94vw-9117197)); max-height: var(--geometry-max-height-86vh-2a0250a); background: var(--panel); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-xl); padding: var(--spacing-padding-1rem-b8be0c7) var(--spacing-padding-left-1-1rem-14af91b) var(--spacing-padding-left-1-1rem-14af91b); box-shadow: var(--shadow-3); }
.ws-dialog::backdrop { background: var(--overlay); }
.ws-dialog:focus, dialog:focus { outline: none; }
@media (max-width: 600px) {
  .ws-dialog:not(.ws-dialog--confirm) { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(var(--geometry-height-100dvh-9e432e5) - max(var(--geometry-width-1-5rem-b81aec4), env(safe-area-inset-top, var(--geometry-max-height-0px-33a3c91)) + var(--geometry-max-height-75rem-4cf1798))); border-width: var(--geometry-border-1px-93e2062) 0 0;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: var(--spacing-padding-1rem-b8be0c7) var(--spacing-padding-1rem-b8be0c7) calc(var(--spacing-padding-1rem-b8be0c7) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); }
  .ws-dialog:not(.ws-dialog--confirm)[open] { animation: ws-sheet-rise var(--dur-drawer) var(--ease-out); }
  /* A grab handle: the sheet closes with a swipe down from anywhere on it (workspace.js). */
  .ws-dialog:not(.ws-dialog--confirm)::before { content: ""; display: block; width: var(--geometry-width-36px-a0a3565); height: var(--geometry-text-underline-offset-4px-3566015); margin: var(--spacing-margin-35rem-94ce370) auto var(--spacing-padding-65rem-bcca6ce);
    border-radius: var(--geometry-border-radius-999px-088f244); background: var(--line-strong, var(--line)); }
  /* Swiped up, a sheet fills the screen, however little it holds (workspace.js). */
  .ws-dialog[data-full]:not(.ws-dialog--confirm) { height: var(--geometry-height-100dvh-9e432e5); max-height: var(--geometry-height-100dvh-9e432e5); border-radius: 0; border-top-color: transparent;
    padding-top: calc(var(--spacing-padding-1rem-b8be0c7) + env(safe-area-inset-top, var(--spacing-padding-top-0px-33a3c91))); }
}
/* While its top edge stretches (elastic.js), a dialog shows past its box. */
.ws-dialog.is-elastic, .ws-sheet.is-elastic { overflow: visible; }
@keyframes ws-sheet-rise { from { transform: translateY(100%); } to { transform: none; } }
.ws-dialog__head { display: flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); margin-bottom: var(--spacing-padding-6rem-d0bc70f); }
.ws-dialog__head > h2 { flex: 1; min-width: 0; white-space:normal; overflow-wrap:anywhere; }
/* Back: one small arrow before a title, in the header it belongs to, the same in a dialog and on a page. */
.ws-dialog__back, .ws-pageback { flex: none; margin-left: var(--spacing-margin-left-5rem-64b3937); }
.ws-titlerow { display: flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); min-width: 0; }
.ws-titlerow > h2 { margin: 0; min-width: 0; }
.ws-dialog h2 { font-size: var(--typography-font-size-1-05rem-8c6e288); margin: 0; }
.ws-dialog h3 { font-size: var(--typography-font-size-86rem-d03e951); font-weight: var(--type-weight-control); color: var(--dim); margin: var(--spacing-padding-1rem-b8be0c7) 0 var(--spacing-margin-4rem-7fdc8b1); }
.ws-check { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: start; font-size: var(--typography-font-size-88rem-39c360b); margin: var(--spacing-padding-25rem-1677828) 0; }
.ws-fact { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: start; border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); padding: var(--spacing-margin-4rem-7fdc8b1) 0; font-size: var(--typography-font-size-88rem-39c360b); }
.ws-fact p { margin: 0; flex: 1; }
.ws-fact small { display: block; color: var(--dim); font-size: var(--typography-font-size-72rem-2a7309a); }

/* "/" command palette */
/* Never squeezed by a long conversation above it (the column shrank it, and the Plan Dock's lines with it: their letters
   were cut at the top and bottom, 2026-10-15): the messages give way instead. */
.ws-composer { position: relative; flex: none; }
.ws-palette { list-style: none; margin: 0 auto var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-margin-3rem-fb2375d); max-height: var(--geometry-max-height-16rem-868f8b1); overflow-y: auto; background: var(--panel-strong); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); box-shadow: var(--shadow); }
.ws-palette li { display: flex; gap: var(--spacing-padding-6rem-d0bc70f); align-items: baseline; padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); border-radius: var(--icon-radius); cursor: pointer; font-size: var(--typography-font-size-88rem-39c360b); }
.ws-palette li[aria-selected="true"], .ws-palette li:hover { background: var(--accent-surface); }
.ws-palette code { color: var(--accent); font-family: inherit; font-weight: var(--type-weight-control); white-space: nowrap; }
.ws-palette span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* live answers, regenerating, approvals, archived containers */
/* The typing cursor sits at the end of the words being written (alone only while nothing is). */
.ws-live .ws-msg__body:empty::after, .ws-live .ws-msg__body > :is(p, h1, h2, h3, h4):last-child::after,
.ws-live .ws-msg__body > :is(ul, ol):last-child > li:last-child::after { content: ""; display: inline-block; width: var(--geometry-width-32em-b9c7ed5); height: var(--geometry-height-1-05em-34d0042); margin-left: var(--spacing-margin-left-12em-a98947c);
  vertical-align: -.16em; border-radius: var(--geometry-outline-2px-7476140); background: linear-gradient(180deg, var(--violet), var(--cyan)); animation: ws-blink var(--motion-animation-1100ms-04e2190) var(--motion-animation-ease-in-out-16c2539) infinite; }
/* Dyadic's own: a slim bar in its violet into cyan, breathing rather than snapping on and off (the owner, 2026-10-21);
   held still while words appear (workspace.js typeAnswer is-typing), as a cursor is as you type. */
.ws-live.is-typing .ws-msg__body > :is(p, h1, h2, h3, h4):last-child::after,
.ws-live.is-typing .ws-msg__body > :is(ul, ol):last-child > li:last-child::after { animation: none; opacity: 1; }
@keyframes ws-blink { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .ws-live .ws-msg__body::after, .ws-live .ws-msg__body > *::after, .ws-live .ws-msg__body li::after { animation: none; } }
.ws-replacing { opacity: .45; }
/* A call the answer paused on: what would run, and Approve or Deny. */
.ws-approval { box-sizing: border-box; width: 100%; max-width: var(--geometry-max-width-52rem-94b2e70); margin: 0 auto; padding: var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-1rem-b8be0c7); display: grid; gap: var(--spacing-padding-65rem-bcca6ce); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius:var(--r-sm); background: var(--panel); }
.ws-approval__head { display: flex; gap: var(--spacing-gap-7rem-7eff2a1); align-items: flex-start; }
.ws-approval__icon { display: grid; place-items: center; flex: none; width: var(--geometry-width-2-2rem-ac5d0c3); height: var(--geometry-width-2-2rem-ac5d0c3); border-radius:var(--r-sm); background: var(--accent-surface); color: var(--accent); }
.ws-approval__text { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); min-width: 0; padding-top: var(--spacing-padding-1rem-4e95f32); }
.ws-approval__text strong { font-size: var(--typography-font-size-93rem-8dde02a); overflow-wrap: anywhere; }
.ws-approval__text small { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-approval__args { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--typography-font-size-78rem-6850684); max-height: var(--geometry-min-width-12rem-2f2f4a6); overflow-y: auto; background: var(--paper); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-65rem-bcca6ce); border-radius: var(--icon-radius); border: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-approval__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-approval__actions .ws-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); min-width: var(--geometry-min-width-7-5rem-5feabe0); }
/* A card's two choices read as a matched pair: the same width, and the plain one's edge as clear as the filled one's. */
:is(.ws-approval__actions, .ws-stdin__form) .ws-button:not(.ws-button--primary) { border-color: color-mix(in srgb, var(--muted) 55%, var(--line)); }
.ws-approval__status { margin: 0; font-size: var(--typography-font-size-84rem-a4deb85); color: var(--muted); }
.ws-approval[data-state="approved"] .ws-approval__status { color: var(--ok); }
.ws-approval-fold, .ws-approval-group { box-sizing:border-box; width:100%; max-width:var(--geometry-max-width-52rem-94b2e70); margin:var(--spacing-margin-4rem-7fdc8b1) auto; border:var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background:var(--panel); }
.ws-approval-fold > summary, .ws-approval-group > summary { padding:var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-75rem-4cf1798); cursor:pointer; font-size:var(--typography-font-size-82rem-8da80e1); }
.ws-approval-fold > summary { display:flex; gap:var(--spacing-padding-6rem-d0bc70f); align-items:center; }
.ws-approval-fold > summary::before { content:"›"; color:var(--muted); flex:none; }
.ws-approval-fold[open] > summary::before { transform:rotate(90deg); }
.ws-approval-fold > summary span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-approval-fold > summary small { margin-left:auto; flex:none; color:var(--muted); white-space:nowrap; }
.ws-approval-fold > .ws-approval { border:0; }
.ws-approval-group > .ws-approval-fold { width:calc(100% - var(--geometry-width-1rem-b8be0c7)); }
.ws-approval__payload { min-width:0; font-size:var(--typography-font-size-8rem-818b9f7); }
.ws-approval__payload > summary { cursor:pointer; color:var(--muted); padding:var(--spacing-padding-25rem-1677828) 0; }
.ws-approval__payload .ws-approval__args { margin-top:var(--spacing-gap-35rem-1304a2b); }
.ws-approval__action { font-weight:var(--type-weight-control); }
.ws-approval-taint { max-width:var(--geometry-max-width-52rem-94b2e70); margin:var(--spacing-margin-5rem-ef026cb) auto; color:var(--muted); font-size:var(--typography-font-size-8rem-818b9f7); overflow-wrap:anywhere; }
/* A program waiting for input (the approval card's frame): its output, then one row with the field, Send and Stop. */
.ws-stdin__out { font-family: var(--font-mono); }
.ws-stdin__err { color: var(--danger); }
.ws-stdin__typed { color: var(--accent); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-stdin__form { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: stretch; min-width: 0; }
.ws-stdin__form .ws-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); flex: none; min-width: var(--geometry-min-width-5-6rem-f039975); }
.ws-stdin__field { flex: 1 1 auto; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: var(--typography-font-size-9rem-2ad2e76); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-65rem-bcca6ce); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); }
.ws-stdin__field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-stdin__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-stdin__foot .ws-approval__status { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ws-stdin__foot .ws-button { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); flex: none; }
.ws-stdin__note { color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); min-width: 0; }
@media (max-width: 480px) { .ws-stdin__form .ws-button { padding-inline: var(--spacing-padding-6rem-d0bc70f); } }
.ws-archived-row { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-86rem-d03e951); min-width: 0; }
.ws-archived-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* image gallery */
.ws-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: var(--spacing-margin-5rem-ef026cb); }
.ws-gallery button { padding: 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); background: var(--paper); cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.ws-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-dialog:has(.ws-gallery) { width: min(var(--geometry-max-width-60rem-7befac8), var(--geometry-width-94vw-9117197)); }
.ws-msg__body .ws-zoomable { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; max-width: 100%; }
.ws-msg__body .ws-zoomable img { display: block; }

/* image viewer: pan, zoom, save, share */
.ws-lightbox { width: var(--geometry-max-width-100vw-26ee43a); height: var(--geometry-height-100dvh-9e432e5); max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-background-020611-2eda997); color: var(--color-color-eef2fb-e11b6df); }
.ws-lightbox::backdrop { background: var(--color-background-020611-2eda997); }
/* Top bar, image, bottom bar stacked: nothing overlaps, so the bars' buttons
   always get the tap (the stage used to sit over most of the top bar). */
.ws-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
/* The one column is the screen's width: a long prompt in the caption or a
   large image used to widen it past the screen and push everything off. */
.ws-lightbox[open] > * { min-width: 0; }
.ws-lightbox__stage { position: relative; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; display: grid; place-items: center; }
.ws-lightbox__stage.dragging { cursor: grabbing; }
.ws-lightbox__stage img { max-width: 100%; max-height: 100%; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; will-change: transform; }
.ws-lightbox__bar { position: relative; z-index: 2; display: flex; gap: var(--spacing-margin-4rem-7fdc8b1); align-items: center; flex-wrap: wrap; padding: var(--spacing-padding-6rem-d0bc70f) max(var(--spacing-padding-1rem-b8be0c7), env(safe-area-inset-right, var(--spacing-padding-top-0px-33a3c91))) var(--spacing-padding-6rem-d0bc70f) max(var(--spacing-padding-1rem-b8be0c7), env(safe-area-inset-left, var(--spacing-padding-top-0px-33a3c91))); }
.ws-lightbox__bar--top { padding-top: max(var(--spacing-padding-6rem-d0bc70f), env(safe-area-inset-top, var(--spacing-padding-top-0px-33a3c91))); }
.ws-lightbox__bar--bottom { padding-bottom: max(var(--spacing-padding-6rem-d0bc70f), env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); justify-content: center; }
.ws-lightbox__bar p { flex: 1; min-width: 0; margin: 0; font-size: var(--typography-font-size-85rem-2e72ebc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Viewer controls are plain icons on the dark ground: no boxes, a soft circle on hover. */
.ws-lightbox button { font: inherit; font-size: var(--typography-font-size-82rem-8da80e1); color: inherit; background: none; border: 0; border-radius: var(--geometry-border-radius-999px-088f244); cursor: pointer; }
.ws-lightbox button:hover, .ws-lightbox button:focus-visible { background: var(--color-background-ffffff1f-86d7d2f); }
.ws-import-prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--typography-font-size-78rem-6850684); background: var(--paper); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); padding: var(--spacing-padding-6rem-d0bc70f); max-height: var(--geometry-min-width-12rem-2f2f4a6); overflow-y: auto; }
.ws-setting { align-items: flex-start; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-gap-45rem-ef5b39f) 0; }
.ws-setting span { display: grid; gap: var(--spacing-gap-15rem-e51094a); }
.ws-setting small { font-size: var(--typography-font-size-78rem-6850684); }

/* long-press menus replace the browser's on touch */
.ws-nav button, .ws-nav summary, .ws-menu, .ws-msg, .ws-saved, .ws-gallery { -webkit-touch-callout: none; }
.ws-nav button, .ws-nav summary, .ws-menu { -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) { .ws-msg { -webkit-user-select: none; user-select: none; } }
/* The app's own chrome isn't text to select: a long press on the sidebar, a heading, a tab, a button or a row never starts
   a selection or its callout (the owner found the sidebar's headings selectable, 2026-10-14). What you read and write
   stays selectable: inputs, the editor, code, a message's text on a computer, a plan step's detail, the Black Box's ids. */
.ws-rail, .ws-side, .ws-bar, .ws-context__top, .ws-panel__label, .ws-menu, .ws-sheet__head, .ws-dialog__head, .ws-modechips, .ws-msg__head,
.ws-msg__foot, .ws-setlabel, .ws-sheet__label, .ws-plan__head, .ws-step__head, .ws-addtiles, .ws-addrows, .ws-choices, .ws-pickgroup, .ws-panel-empty,
.bb-tabs, .ws-tiles, .bb-run__head, .bb-steps, button, [role="tab"], [role="menuitem"], [role="radio"], [role="switch"], label, summary {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"], .ws-editor, pre, code, .ws-step__body, .bb-mono, .bb-event__detail {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* A menu shows every item: as tall as the screen allows; taller than that, its rows tighten (placeMenu) before it
   would ever scroll (only a tiny window still scrolls one). */
.ws-menu { max-height: calc(100dvh - var(--layout-menu-gutter)); overflow-y: auto; }
/* Over a dialog the menu is a popover in the top layer (hostMenu): placed where it's put, not centered. */
.ws-menu[popover] { inset: auto; margin: 0; color: var(--ink); }
.ws-menu--dense button { padding-top: var(--spacing-margin-3rem-fb2375d); padding-bottom: var(--spacing-margin-3rem-fb2375d); }
.ws-menu--dense hr { margin: var(--spacing-gap-15rem-e51094a) 0; }
.ws-pin { margin-left: auto; font-size: var(--typography-font-size-7rem-7eff2a1); }
.ws-drop { outline: var(--geometry-outline-2px-7476140) dashed var(--accent); outline-offset: var(--geometry-outline-offset-2px-91cb4fd); background: var(--accent-surface); }
[draggable="true"] { cursor: grab; }

/* Saved and readable links */
.ws-saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-saved { display: flex; gap: var(--spacing-padding-6rem-d0bc70f); align-items: flex-start; padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); background: var(--panel); min-width: 0; }
.ws-saved--missing { opacity: .55; }
.ws-saved__thumb { flex: 0 0 4.5rem; height: var(--geometry-min-height-4-5rem-41dca9e); padding: 0; border: 0; border-radius: var(--icon-radius); overflow: hidden; cursor: zoom-in; background: var(--paper); }
.ws-saved__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-saved__body { flex: 1; min-width: 0; display: grid; gap: var(--spacing-margin-2rem-4cd30ed); text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ws-saved__body span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: var(--typography-font-size-88rem-39c360b); }
.ws-saved__body strong { overflow-wrap: anywhere; }
.ws-linkrow .ws-linkish { display: grid; gap: var(--spacing-gap-15rem-e51094a); text-align: left; min-width: 0; }
.ws-linkrow small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* send: a round arrow in the accent color */
.ws-send { display: inline-grid; place-items: center; width: var(--geometry-width-38px-6018510); height: var(--geometry-width-38px-6018510); border-radius: 50%; border: 0; background: var(--button-fill); color: var(--button-text); cursor: pointer; transition: transform var(--dur-micro) var(--motion-transition-ease-914ff41), opacity var(--dur-micro) var(--motion-transition-ease-914ff41); }
.ws-send:hover:not(:disabled) { transform: translateY(-1px); }
.ws-send:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--ink); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-send:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .ws-send { transition: none; } }
.ws-send.is-stop { background: var(--danger); color: var(--color-background-fff-e08de71); }
.ws-queue { display: grid; gap: var(--spacing-margin-3rem-fb2375d); margin-bottom: var(--spacing-gap-45rem-ef5b39f); }
.ws-queued { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: center; padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-55rem-f5020a7); border: var(--geometry-border-1px-93e2062) dashed var(--line); border-radius: var(--icon-radius); font-size: var(--typography-font-size-84rem-a4deb85); min-width: 0; }
.ws-queued > span:first-child { white-space: nowrap; font-size: var(--typography-font-size-75rem-4cf1798); }
.ws-queued__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: start; cursor: text; }
.ws-queued__edit { flex: 1; min-width: 0; min-height: var(--geometry-width-1-6rem-9ef54f1); max-height: var(--geometry-min-height-10rem-04d0579); padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-4rem-7fdc8b1); border: var(--geometry-border-1px-93e2062) solid var(--accent); border-radius:var(--r-xs);
  background: var(--paper); color: var(--ink); font: inherit; resize: none; outline: none; }
.ws-aspect { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); flex-wrap: wrap; }
.ws-aspect__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-aspect__chip { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); font: inherit; font-size: var(--typography-font-size-76rem-a2a5d3f); color: var(--ink); background: var(--panel); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-45rem-ef5b39f); cursor: pointer; min-height: var(--geometry-min-height-1-9rem-27b2c42); }
.ws-aspect__chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); }
.ws-aspect__box { display: inline-block; border: var(--geometry-border-1-5px-67792bd) solid currentColor; border-radius:var(--r-sm); opacity: .85; }
.ws-aspect__chip[aria-checked="true"] .ws-aspect__box { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-quality { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-35rem-1304a2b); width: 100%; }
.ws-quality__chip { display: grid; gap: var(--spacing-padding-05rem-98939d1); text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-55rem-f5020a7); cursor: pointer; min-width: 0; flex: 1 1 8.5rem; max-width: var(--geometry-min-width-14rem-0eb654d); }
.ws-quality__chip[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); }
.ws-quality__top { display: flex; align-items: baseline; gap: var(--spacing-margin-4rem-7fdc8b1); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-quality__cost { margin-left: auto; font-size: var(--typography-font-size-7rem-7eff2a1); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-quality__model { font-size: var(--typography-font-size-7rem-7eff2a1); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  .ws-composer__spacer { min-width: 0; }
  .ws-send { flex: 0 0 auto; }
}
.ws-details p { margin: var(--spacing-padding-25rem-1677828) 0; } .ws-details small { color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); }
.ws-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-9rem-2ad2e76); margin: var(--spacing-gap-8rem-818b9f7) 0 0; font-size: var(--typography-font-size-88rem-39c360b); }
.ws-facts dt { color: var(--muted); } .ws-facts dd { margin: 0; overflow-wrap: anywhere; }

/* The Workspace is full-screen: the site header is hidden; the sidebar's
   back link returns to the site's home. */
.workspace-page { --header-h: 0px; }
.workspace-page .global-shell__header { display: none !important; }

/* icon-first controls */
.ws-iconbtn { display: inline-grid; place-items: center; width: var(--geometry-width-36px-a0a3565); height: var(--geometry-width-36px-a0a3565); padding: 0; border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid transparent; background: none; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.ws-iconbtn:hover, .ws-iconbtn:focus-visible, .ws-iconbtn[aria-expanded="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ws-iconbtn:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-border-1px-93e2062); }
.ws-iconbtn:disabled { opacity: .45; cursor: default; background: none; }
.ws-toggle--icon { display: inline-grid; place-items: center; width: var(--geometry-width-2-3rem-4a13ff0); height: var(--geometry-width-2-3rem-4a13ff0); padding: 0; }
.ws-toggle--icon[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-surface); }

/* sidebar */
.ws-nav__head { display: flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); padding: var(--spacing-gap-8rem-818b9f7) var(--spacing-gap-7rem-7eff2a1) var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-9rem-2ad2e76); }
.ws-nav__brand { display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); margin-right: auto; color: var(--ink); text-decoration: none; font-weight: var(--typography-font-weight-700-99ee502); font-size: var(--typography-font-size-1-02rem-f6100ff); min-width: 0; }
.ws-nav__brand img { width: var(--geometry-border-radius-22px-5d6c439); height: var(--geometry-border-radius-22px-5d6c439); }
.ws-nav .ws-search { padding: 0 var(--spacing-gap-8rem-818b9f7) var(--spacing-margin-5rem-ef026cb); }
.ws-nav__primary { display: grid; padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-gap-45rem-ef5b39f) var(--spacing-margin-4rem-7fdc8b1); }
.ws-nav__item { display: flex; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); width: 100%; padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-margin-5rem-ef026cb); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-92rem-c7cd355); cursor: pointer; text-align: left; }
.ws-nav__item svg { color: var(--muted); }
.ws-nav__item:hover, .ws-nav__item:focus-visible, .ws-nav__item[aria-current="page"] { background: var(--accent-surface); }
.ws-nav__foot { border-top: var(--geometry-border-1px-93e2062) solid var(--line); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-7rem-7eff2a1) calc(var(--spacing-padding-6rem-d0bc70f) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-nav__back { display: inline-flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); text-decoration: none; padding: var(--spacing-padding-25rem-1677828) var(--spacing-margin-2rem-4cd30ed); width: max-content; }
.ws-nav__back svg { width: var(--geometry-width-15px-7f10880); height: var(--geometry-width-15px-7f10880); }
.ws-nav__back:hover, .ws-nav__back:focus-visible { color: var(--ink); }
.ws-nav__bottom { display: flex; align-items: center; justify-content: space-between; }
.ws-new { display: inline-grid; place-items: center; width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); border-radius: 50%; border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--paper); color: var(--accent); cursor: pointer; }
.ws-new:hover, .ws-new:focus-visible { border-color: var(--accent); background: var(--accent-surface); }
.ws-me { padding: 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: 50%; background: none; cursor: pointer; width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); overflow: hidden; display: grid; place-items: center; }
.ws-me:hover, .ws-me:focus-visible { border-color: var(--accent); }
.ws-me .ws-msg__avatar { width: 100%; height: 100%; margin: 0; border-radius: 50%; }

/* settings */
.ws-profile { display: flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); padding: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-gap-8rem-818b9f7); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); margin-bottom: var(--spacing-margin-4rem-7fdc8b1); }
.ws-profile .ws-msg__avatar { width: var(--geometry-width-2-8rem-a6a423c); height: var(--geometry-width-2-8rem-a6a423c); border-radius: 50%; margin: 0; }
.ws-profile div { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-setting-row { display: flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); width: 100%; padding: var(--spacing-padding-65rem-bcca6ce) var(--spacing-margin-3rem-fb2375d); border: 0; border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.ws-setting-row > span { flex: 1; display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-setting-row small { font-size: var(--typography-font-size-78rem-6850684); }
.ws-setting-row > svg { color: var(--muted); flex: 0 0 auto; }
.ws-setting-row:hover, .ws-setting-row:focus-visible { background: var(--accent-surface); }
/* A choice among rows (the Haptics Lab): the chosen one in the accent color. */
.ws-setting-row[role="radio"][aria-checked="true"] > svg { color: var(--accent); }
.ws-setting-row[role="radio"][aria-checked="true"] strong { color: var(--accent); }

/* image viewer: icon buttons */
.ws-lightbox button { display: inline-grid; place-items: center; width: var(--geometry-min-height-2-75rem-3cc807c); min-width: 0; height: var(--geometry-min-height-2-75rem-3cc807c); padding: 0; flex: none; }
/* No tap flash on touch; the drawer opens instantly. */
.workspace-page, .workspace-page * { -webkit-tap-highlight-color: transparent; }
.ws-scrim { animation: none; transition: none; }


/* ---- sidebar rows (one shape for every kind) ---- */
.ws-tree .ws-tree__head { font-size: var(--typography-font-size-68rem-41c61ff); letter-spacing: var(--typography-letter-spacing-12em-a98947c); text-transform: uppercase; color: var(--dim); margin: var(--spacing-padding-1rem-b8be0c7) var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-5rem-ef026cb); display: flex; justify-content: space-between; align-items: center; min-height: var(--geometry-width-1-6rem-9ef54f1); }
.ws-tree .ws-tree__head .ws-iconbtn { width: var(--geometry-width-1-7rem-82991a7); height: var(--geometry-width-1-7rem-82991a7); }
.ws-tree__toggle { width: calc(100% - var(--geometry-width-7rem-7eff2a1)); background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.ws-tree__toggle svg { transition: transform var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-tree__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.ws-tree__list { list-style: none; margin: 0; padding: 0; }
.ws-tree__empty { padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-tree .ws-row { display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); width: 100%; min-height: var(--geometry-width-2-2rem-ac5d0c3); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-margin-5rem-ef026cb); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-88rem-39c360b); text-align: left; cursor: pointer; min-width: 0; box-shadow: none; }
.ws-tree .ws-row:hover, .ws-tree .ws-row:focus-visible { background: var(--panel-strong); }
.ws-tree .ws-row[aria-current="page"] { background: var(--accent-surface); }
.ws-row__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-row--add { color: var(--muted) !important; font-size: var(--typography-font-size-82rem-8da80e1) !important; }
.ws-row--add svg { color: var(--muted); }
.ws-row--static { cursor: default; }
.ws-cicon { flex: 0 0 auto; }
.ws-pin { flex: 0 0 auto; color: var(--accent); opacity: .75; }
.ws-chev { display: inline-grid; place-items: center; width: var(--geometry-width-9rem-2ad2e76); color: var(--dim); flex: 0 0 auto; }
.ws-chev svg { transition: transform var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-row[aria-expanded="true"] .ws-chev svg { transform: rotate(90deg); }
.ws-folder__head { display: flex; align-items: center; }
.ws-folder__head .ws-row { flex: 1; }
.ws-folder__more { width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); opacity: .7; }
.ws-folder__more:hover, .ws-folder__more:focus-visible { opacity: 1; }
.ws-folder__body { margin-left: var(--spacing-padding-1-15rem-3b14c93) !important; padding-left: var(--spacing-margin-4rem-7fdc8b1) !important; border-left: var(--geometry-border-1px-93e2062) solid var(--line); }
@media (prefers-reduced-motion: reduce) { .ws-chev svg, .ws-tree__toggle svg { transition: none; } }

/* bottom of the sidebar: leaving the Workspace is a small, separate link */
.ws-nav__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-padding-1rem-b8be0c7); }
.ws-nav__foot { border-top: var(--geometry-border-1px-93e2062) solid var(--line); }

/* menus with icons */
.ws-menu button svg { color: var(--muted); flex: 0 0 auto; }
.ws-menu .danger svg { color: var(--red); }
/* A group's title inside a menu, and the tick on the chosen one of a set. */
.ws-menu__head { margin: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-7rem-7eff2a1) var(--spacing-margin-2rem-4cd30ed); font-size: var(--typography-font-size-68rem-41c61ff); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); }
.ws-menu__tick { display: grid; place-items: center; margin-left: auto; color: var(--accent); }
.ws-menu__tick svg { display: block; }
/* "Regenerate ›" and its chooser: a model and an agent, each a filled box when chosen, then Confirm. */
.ws-menu .ws-menu__more { margin-left: auto; display: inline-flex; }
.ws-menu .ws-regen__head { margin: var(--spacing-gap-35rem-1304a2b) var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-15rem-e51094a); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--type-weight-control); letter-spacing: var(--typography-letter-spacing-06em-9679667); text-transform: uppercase; color: var(--muted); }
.ws-menu .ws-regen__choice > span:nth-last-child(2) { flex: 1 1 auto; }
.ws-menu .ws-regen__box { flex: 0 0 auto; display: inline-grid; place-items: center; width: var(--geometry-width-18px-ab98c04); height: var(--geometry-width-18px-ab98c04); box-sizing: border-box;
  border: var(--geometry-border-1-5px-67792bd) solid var(--line); border-radius:var(--r-xs); margin-left: auto; }
.ws-menu .ws-regen__box.is-on { background: var(--accent); border-color: var(--accent); }
.ws-menu button .ws-regen__box.is-on svg { color: var(--accent-ink); }
.ws-menu .ws-regen__confirm { justify-content: center; font-weight: var(--type-weight-control); background: var(--accent); color: var(--accent-ink); margin-top: var(--spacing-padding-1rem-4e95f32); }
.ws-menu .ws-regen__confirm:hover, .ws-menu .ws-regen__confirm:focus-visible { background: var(--accent-hover); }
.ws-menu button.ws-regen__confirm svg { color: inherit; }

/* edit library / project */
.ws-edit__name { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: center; }
.ws-edit__name input { flex: 1; font: inherit; padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-7rem-7eff2a1); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); min-width: 0; }
.ws-edit__icon { display: grid; place-items: center; width: var(--geometry-width-2-8rem-a6a423c); height: var(--geometry-width-2-8rem-a6a423c); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--paper); cursor: pointer; flex: 0 0 auto; }
.ws-edit__icon[aria-expanded="true"], .ws-edit__icon:hover { border-color: var(--accent); }
.ws-picker { margin-top: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel-strong); }
.ws-picker__colors { display: flex; gap: var(--spacing-margin-5rem-ef026cb); overflow-x: auto; padding-bottom: var(--spacing-padding-6rem-d0bc70f); }
.ws-swatch { flex: 0 0 auto; width: var(--geometry-width-2-1rem-f351383); height: var(--geometry-width-2-1rem-f351383); border-radius: 50%; border: var(--geometry-outline-2px-7476140) solid transparent; background: var(--swatch); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; }
.ws-swatch[aria-checked="true"] { border-color: var(--ink); }
.ws-picker__icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(2.5rem, 100%), 1fr)); gap: var(--spacing-margin-2rem-4cd30ed); }
.ws-picker__icon { display: grid; place-items: center; height: var(--geometry-height-2-5rem-fb391dd); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid transparent; background: none; color: var(--ink); cursor: pointer; }
.ws-picker__icon:hover { background: var(--accent-surface); }
.ws-picker__icon[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); color: var(--accent); }
.ws-modes { display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-mode { display: grid; gap: var(--spacing-padding-25rem-1677828); text-align: left; font: inherit; color: var(--ink); background: none; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-9rem-2ad2e76); cursor: pointer; }
.ws-mode span { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-mode[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); }
/* A choice with a tick (Tool Access): its words on the left, the tick centered on the right. */
.ws-mode--check { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--spacing-padding-75rem-4cf1798); }
.ws-mode > .ws-mode__text { display: grid; gap: var(--spacing-padding-25rem-1677828); color: var(--ink); font-size: inherit; }
.ws-mode__text span { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-mode > .ws-mode__tick { display: grid; place-items: center; width: var(--geometry-border-radius-22px-5d6c439); height: var(--geometry-border-radius-22px-5d6c439); color: var(--accent); }
.ws-mode__tick svg { display: block; }
.ws-modes + .ws-setnote { margin-top: var(--spacing-padding-6rem-d0bc70f); }
.ws-row-actions { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: var(--spacing-gap-8rem-818b9f7); }
.ws-row-actions input { flex: 1; min-width: var(--geometry-min-height-10rem-04d0579); font: inherit; padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-row-actions .ws-button, .ws-info__actions .ws-button { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-scoped-memory .ws-fact { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: center; justify-content: space-between; border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); padding: var(--spacing-margin-3rem-fb2375d) 0; }
.ws-scoped-memory .ws-fact p { margin: 0; font-size: var(--typography-font-size-88rem-39c360b); }

/* settings sub-pages, account, plugins */
.ws-back { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); color: var(--muted); background: none; border: 0; padding: var(--spacing-margin-2rem-4cd30ed) 0; margin-bottom: var(--spacing-margin-5rem-ef026cb); cursor: pointer; }
.ws-back:hover, .ws-back:focus-visible { color: var(--ink); }
.ws-setting-row--danger, .ws-setting-row--danger svg { color: var(--red) !important; }
.ws-plugins { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-plugin { display: flex; align-items: center; gap: var(--spacing-padding-9rem-2ad2e76); padding: var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); }
.ws-plugin__icon { display: grid; place-items: center; width: var(--geometry-min-height-2-6rem-ee2b419); height: var(--geometry-min-height-2-6rem-ee2b419); border-radius:var(--r-sm); background: var(--accent-surface); color: var(--accent); flex: 0 0 auto; }
.ws-plugin > div { flex: 1; display: grid; gap: var(--spacing-margin-2rem-4cd30ed); min-width: 0; }
.ws-plugin code { font-size: var(--typography-font-size-74rem-bc7c01a); color: var(--accent); }
/* Switches: the knob's size and travel come from the track's, so it sits centered at both ends. */
.ws-switch input, .ws-setting input[role="switch"] { --w: 2.5rem; --h: 1.5rem; --gap: .1875rem; box-sizing: border-box; appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: var(--w); min-width: var(--w); height: var(--h); margin: 0; padding: 0; border: 0; border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--ink) 20%, transparent); position: relative; vertical-align: middle; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.ws-switch input::after, .ws-setting input[role="switch"]::after { content: ""; position: absolute; top: 50%; left: var(--gap); width: calc(var(--h) - 2 * var(--gap)); height: calc(var(--h) - 2 * var(--gap)); border-radius: 50%; background: var(--knob); box-shadow: var(--knob-shadow); transform: translateY(-50%); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--motion-transition-ease-914ff41); }
.ws-switch input:checked, .ws-setting input[role="switch"]:checked { background: var(--accent); }
.ws-switch input:checked::after, .ws-setting input[role="switch"]:checked::after { transform: translate(calc(var(--w) - var(--h)), -50%); background: var(--knob); }
.ws-switch input:focus-visible, .ws-setting input[role="switch"]:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-file { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); }
/* A file in a message: what it is, its size, a warning when it needs one, and a download. */
.ws-filecard { display: inline-flex; align-items: center; gap: var(--spacing-padding-65rem-bcca6ce); max-width: min(100%, var(--geometry-max-width-26rem-36abcba)); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--line);
  border-radius:var(--r-sm); background: var(--panel); color: var(--ink); text-decoration: none; }
.ws-filecard:hover, .ws-filecard:focus-visible { background: var(--panel-strong); }
.ws-filecard__icon { flex: none; display: grid; place-items: center; width: var(--geometry-width-2-2rem-ac5d0c3); height: var(--geometry-width-2-2rem-ac5d0c3); border-radius: var(--icon-radius); background: var(--paper); color: var(--accent); }
.ws-filecard__main { flex: 1; min-width: 0; display: grid; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-filecard__main strong { font-size: var(--typography-font-size-88rem-39c360b); font-weight: var(--type-weight-control); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-filecard__main small { color: var(--dim); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-filecard > svg:last-child { flex: none; color: var(--muted); }
.ws-filecard__warn { flex: none; display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); padding: var(--spacing-gap-15rem-e51094a) var(--spacing-gap-45rem-ef5b39f); border-radius: var(--geometry-border-radius-999px-088f244); font-size: var(--typography-font-size-72rem-2a7309a);
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ws-filecard.is-warned .ws-filecard__icon { color: var(--warn); }
.ws-yourfiles__list { display: grid; gap: var(--spacing-margin-5rem-ef026cb); margin-bottom: var(--spacing-padding-1-2rem-a7b00d3); }
.ws-yourfiles__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--spacing-margin-5rem-ef026cb); }
.ws-yourfiles__row .ws-filecard { grid-row: 1; max-width: none; }
.ws-yourfiles__row small { grid-row: 2; grid-column: 1; padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-2rem-4cd30ed) 0; }
.ws-yourfiles__row .ws-iconbtn { grid-row: 1; grid-column: 2; }
.ws-attachment.is-warned { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
/* confirmations, archived and trash */
.ws-confirm__text { margin: 0 0 var(--spacing-margin-4rem-7fdc8b1); line-height: var(--type-line-body); }
.ws-button--danger { background: var(--red); border-color: var(--red); color: var(--color-background-fff-e08de71); }
.ws-button--danger:hover, .ws-button--danger:focus-visible { filter: brightness(1.08); }
/* A fold's row keeps the heading's spacing itself, so its name, ⋯ and chevron all center on one middle. */
.ws-tree__fold { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-2rem-4cd30ed); margin: var(--spacing-padding-1rem-b8be0c7) var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-width-1-6rem-9ef54f1); }
.ws-tree .ws-tree__fold > .ws-tree__head { margin: 0; }
.ws-tree__fold .ws-tree__toggle { flex: 1; min-width: 0; }
.ws-tree__chev { flex: none; display: grid; place-items: center; width: var(--geometry-width-1-7rem-82991a7); height: var(--geometry-width-1-6rem-9ef54f1); color: var(--dim); }
.ws-tree__chev svg { display: block; transition: transform var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-tree__toggle[aria-expanded="true"] .ws-tree__chev svg, .ws-tree__chevbtn[aria-expanded="true"] .ws-tree__chev svg { transform: rotate(90deg); }
.ws-tree__chevbtn { flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
.ws-row__detail { flex: 0 0 auto; font-size: var(--typography-font-size-72rem-2a7309a); }
.ws-iconbtn svg, .ws-row svg { display: block; }
.ws-folder__head { align-items: center; }
.ws-folder__more { align-self: center; }
/* unsaved-changes bar and save confirmation */
.ws-savebar { position: sticky; bottom: -1px; display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin: var(--spacing-padding-1rem-b8be0c7) var(--spacing-margin-2rem-1d814c7) var(--spacing-margin-2rem-1d814c7); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--accent); border-radius:var(--r-sm); background: var(--panel-strong); box-shadow: 0 -8px 24px var(--shadow-color); }
.ws-savebar > span { flex: 1; font-size: var(--typography-font-size-88rem-39c360b); }
.ws-savebar .ws-button { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-saved-notice { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--spacing-gap-45rem-ef5b39f); margin-bottom: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-8rem-818b9f7); border-radius:var(--r-sm); background: color-mix(in srgb, var(--ok) 18%, var(--panel)); color: var(--ok); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--ok) 50%, transparent); font-weight: var(--type-weight-control); }
.ws-fact--new p { color: var(--accent); }
.ws-dialog--confirm { width: min(var(--geometry-max-width-26rem-36abcba), var(--geometry-width-92vw-0ac7100)); }
/* Installed app on iPhone/iPad: the status bar overlays the page, so the
   Workspace keeps clear of it (and of notches and the home bar). */
.ws { box-sizing: border-box; padding-top: env(safe-area-inset-top, var(--spacing-padding-top-0px-33a3c91)); padding-left: env(safe-area-inset-left, var(--spacing-padding-top-0px-33a3c91)); padding-right: env(safe-area-inset-right, var(--spacing-padding-top-0px-33a3c91)); height: var(--geometry-height-100dvh-9e432e5); }


/* side panel: files and images */
.ws-scope-note { display: flex; gap: var(--spacing-margin-4rem-7fdc8b1); align-items: center; margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-gap-8rem-818b9f7); }
.ws-lastrun { margin-bottom: var(--spacing-padding-6rem-d0bc70f); }
.ws-lastrun h3, .ws-context h3 { font-size: var(--typography-font-size-7rem-7eff2a1); letter-spacing: var(--typography-letter-spacing-1em-7fa2b88); text-transform: uppercase; color: var(--dim); margin: var(--spacing-gap-8rem-818b9f7) 0 var(--spacing-margin-3rem-fb2375d); }
.ws-changes { list-style: none; margin: var(--spacing-margin-3rem-fb2375d) 0 0; padding: 0; }
.ws-change { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); width: 100%; min-width: 0; padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-35rem-1304a2b); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); text-align: left; cursor: pointer; }
.ws-change:hover, .ws-change:focus-visible { background: var(--panel-strong); }
.ws-change__path { font-family: var(--font-mono); font-size: var(--typography-font-size-8rem-818b9f7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-badge { display: inline-grid; place-items: center; width: var(--geometry-width-1-15rem-3b14c93); height: var(--geometry-width-1-15rem-3b14c93); border-radius:var(--r-sm); font-size: var(--typography-font-size-66rem-358ab2c); font-weight: var(--typography-font-weight-800-1a1cf79); flex: 0 0 auto; font-family: var(--font-mono); }
.ws-badge--added { background: var(--diff-add-bg); color: var(--diff-add); }
.ws-badge--modified { background: color-mix(in srgb, var(--diff-mod) 16%, transparent); color: var(--diff-mod); }
.ws-badge--deleted { background: var(--diff-del-bg); color: var(--diff-del); }
.ws-filetree { list-style: none; margin: 0; padding: 0; }
.ws-filetree .ws-filetree { margin-left: var(--spacing-padding-75rem-4cf1798); padding-left: var(--spacing-gap-45rem-ef5b39f); border-left: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-filetree summary { display: flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-padding-28rem-a506b0a) var(--spacing-gap-35rem-1304a2b); border-radius:var(--r-sm); cursor: pointer; font-size: var(--typography-font-size-85rem-2e72ebc); list-style: none; color: var(--ink); }
.ws-filetree summary::-webkit-details-marker { display: none; }
.ws-filetree summary:hover { background: var(--panel-strong); }
.ws-filetree summary svg { color: var(--muted); flex: 0 0 auto; }
.ws-filerow { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); width: 100%; min-width: 0; padding: var(--spacing-padding-28rem-a506b0a) var(--spacing-gap-35rem-1304a2b); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-85rem-2e72ebc); text-align: left; cursor: pointer; }
.ws-filerow:hover, .ws-filerow:focus-visible { background: var(--panel-strong); }
.ws-filerow svg { color: var(--muted); flex: 0 0 auto; }
.ws-filerow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-filerow--deleted .ws-filerow__name { text-decoration: line-through; color: var(--muted); }
.ws-gallery--panel { grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr)); }
.ws-chip--files { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); cursor: pointer; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: none; font: inherit; font-size: var(--typography-font-size-72rem-2a7309a); }

/* diffs */
.ws-diff { border: var(--geometry-border-1px-93e2062) solid var(--code-line); border-radius:var(--r-sm); overflow-x: auto; background: var(--code-bg); font-family: var(--font-mono); font-size: var(--typography-font-size-76rem-a2a5d3f); line-height: var(--typography-line-height-1-55-9e0b4cf); }
.ws-diff__stat { display: flex; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-7rem-7eff2a1); border-bottom: var(--geometry-border-1px-93e2062) solid var(--code-line); background: var(--code-head); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-diff__plus { color: var(--diff-add); } .ws-diff__minus { color: var(--diff-del); }
.ws-diff__hunk { padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-7rem-7eff2a1); color: var(--info); background: color-mix(in srgb, var(--info) 9%, var(--code-bg)); }
.ws-diff__line { display: grid; grid-template-columns: 2.6rem 2.6rem 1.1rem minmax(max-content, 1fr); white-space: pre; color: var(--code-ink); }
/* Wrap Long Lines (Settings > Appearance, on this device): code, files and changes wrap at the screen's edge instead of
   scrolling sideways. */
:root[data-wrap="on"] :is(.ws-msg__body pre, .ws-msg__body pre code, .ws-codeblock pre) { white-space: pre-wrap; overflow-wrap: anywhere; }
:root[data-wrap="on"] .ws-diff__line { grid-template-columns: 2.6rem 2.6rem 1.1rem minmax(0, 1fr); white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-diff__num { text-align: right; padding-right: var(--spacing-margin-5rem-ef026cb); color: var(--code-dim); user-select: none; }
.ws-diff__sign { user-select: none; text-align: center; }
.ws-diff__line--add { background: var(--diff-add-bg); } .ws-diff__line--add .ws-diff__sign, .ws-diff__line--add .ws-diff__text { color: var(--diff-add); }
.ws-diff__line--del { background: var(--diff-del-bg); } .ws-diff__line--del .ws-diff__sign, .ws-diff__line--del .ws-diff__text { color: var(--diff-del); }
.ws-run { margin: 0 0 var(--spacing-padding-1rem-b8be0c7); }
.ws-run__head { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); flex-wrap: wrap; margin-bottom: var(--spacing-margin-4rem-7fdc8b1); }
.ws-tabs { display: flex; gap: var(--spacing-margin-3rem-fb2375d); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); margin-bottom: var(--spacing-gap-7rem-7eff2a1); }
.ws-tabs button { font: inherit; font-size: var(--typography-font-size-85rem-2e72ebc); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-7rem-7eff2a1); background: none; border: 0; border-bottom: var(--geometry-outline-2px-7476140) solid transparent; color: var(--muted); cursor: pointer; }
.ws-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ws-tabs .ws-tabs__action { margin-left: auto; align-self: center; width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); }
.ws-dialog:has(.ws-diff) { width: min(var(--geometry-width-56rem-41d0f34), var(--geometry-width-96vw-3f610e9)); }

/* Files and Images pages */
.ws-page-tools { display: flex; justify-content: flex-end; margin-bottom: var(--spacing-gap-8rem-818b9f7); }
.ws-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; gap: var(--spacing-gap-125rem-4727209); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-md); padding: var(--spacing-padding-1875rem-54dc10b); background: var(--sunken); }
.ws-segmented button { flex: none; white-space: nowrap; font: inherit; font-size: var(--typography-font-size-82rem-8da80e1); font-weight: var(--typography-font-weight-550-f89f8d0); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-8rem-818b9f7); border: 0; border-radius: var(--geometry-width-7px-a15202e); background: none; color: var(--muted); cursor: pointer; }
.ws-segmented button:hover { color: var(--ink); }
.ws-segmented button[aria-checked="true"], .ws-segmented button[aria-selected="true"] { background: var(--panel-strong); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-soft); }
/* A page's own sections (the Store's Plugins, Skills and Agents): across the whole page, each an equal share. */
.ws-segmented--fill { display: flex; width: 100%; }
.ws-segmented--fill button { flex: 1 1 0; min-width: max-content; padding-inline: var(--spacing-padding-6rem-d0bc70f); }
.ws-page-tools:has(> .ws-segmented--fill) { width: 100%; }
.ws-group { margin-bottom: var(--spacing-padding-1-4rem-2569574); }
.ws-group__head { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-1rem-b8be0c7); margin: 0 0 var(--spacing-margin-5rem-ef026cb); }
.ws-group__head small { margin-left: auto; font-weight: var(--typography-font-weight-400-26d2286); }
.ws-project .ws-group__head { text-transform: none; letter-spacing: 0; font-size: var(--typography-font-size-98rem-ba83cc0); color: var(--ink); }
.ws-project .ws-group__head small { font-size: var(--typography-font-size-78rem-6850684); letter-spacing: 0; }
.ws-run__open { margin-left: auto; width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); }
.ws-storage { margin: var(--spacing-padding-9rem-2ad2e76) 0; padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-85rem-2e72ebc); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-storage__row { display: flex; justify-content: space-between; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-storage__bar { height: var(--geometry-width-45rem-ef5b39f); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--line); overflow: hidden; }
.ws-storage__bar span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ws-storage__bar span.is-full { background: var(--red); }
.ws-audio { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-6rem-d0bc70f); margin: var(--spacing-margin-5rem-ef026cb) 0; padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); max-width: var(--geometry-width-30rem-0220cc6); }
.ws-audio__icon { display: grid; place-items: center; width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); border-radius: 50%; background: var(--panel-strong); color: var(--accent); }
.ws-audio audio { width: 100%; min-width: 0; height: var(--geometry-height-2-25rem-e1d2841); color-scheme: dark; }
.ws-audio__text { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); line-height: var(--typography-line-height-1-45-6918de1); overflow-wrap: anywhere; }
.ws-expired { display: inline-flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-padding-9rem-2ad2e76); border: var(--geometry-border-1px-93e2062) dashed var(--line); border-radius:var(--r-sm); color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); margin: var(--spacing-margin-4rem-7fdc8b1) 0; }

/* viewer: one row each. Top: close, position (and the prompt on wide screens), fit when zoomed, info, options.
   Bottom: the image's actions, evenly spaced. Previous and next float at the image's edges. */
.ws-lightbox__bar { flex-wrap: nowrap; }
.ws-lightbox__bar--top { gap: var(--spacing-padding-25rem-1677828); }
.ws-lightbox__bar--bottom { gap: clamp(var(--spacing-padding-25rem-1677828), var(--spacing-padding-top-5vw-897330e), var(--spacing-gap-1-75rem-672ca1c)); }
.ws-lightbox__count { color: var(--code-ink); font-size: var(--typography-font-size-82rem-8da80e1); white-space: nowrap; font-variant-numeric: tabular-nums; padding-inline: var(--spacing-gap-35rem-1304a2b); }
.ws-lightbox__navs { display: contents; }
.ws-lightbox__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); background: var(--color-background-0b101b99-f61e592) !important; backdrop-filter: blur(6px); }
.ws-lightbox__nav:hover, .ws-lightbox__nav:focus-visible { background: var(--color-background-0b101bd9-1ba0441) !important; }
.ws-lightbox__nav--prev { left: max(.6rem, env(safe-area-inset-left, 0px)); }
.ws-lightbox__nav--next { right: max(.6rem, env(safe-area-inset-right, 0px)); }
/* Touch screens swipe between images instead. */
@media (hover: none) and (pointer: coarse) { .ws-lightbox__nav { display: none !important; } }
@media (max-width: 700px) {
  .ws-lightbox__bar--top p { display: none; }
  .ws-lightbox__count { margin-right: auto; }
}
.ws-lightbox .ws-menu { z-index: 5; }

/* tables: words stay whole and a short table fits the screen; a wide one scrolls
   rather than crushing a column below 4rem */
.ws-msg__body th, .ws-msg__body td { overflow-wrap: break-word; word-break: normal; hyphens: manual; min-width: var(--geometry-min-width-4rem-a517504); }
.ws-msg__body .ws-table table { width: max-content; max-width: none; }
@media (max-width: 600px) { .ws-msg__body th, .ws-msg__body td { padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-6rem-d0bc70f); } }
.ws-msg__body .ws-table td, .ws-msg__body .ws-table th { max-width: var(--geometry-max-height-28rem-151008a); }
@media (max-width: 600px) { .ws-msg__body .ws-table :is(th, td):first-child { max-width: var(--geometry-max-height-16rem-868f8b1); } }
.ws-lightbox .ws-menu { width: auto; min-width: var(--geometry-width-13rem-e38b03b); max-width: min(var(--geometry-max-height-22rem-6313c12), var(--geometry-width-92vw-0ac7100)); color: var(--ink); }
.ws-lightbox .ws-menu button { display: flex; height: auto; min-width: 0; width: 100%; padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f); border: 0; border-radius: var(--icon-radius); background: none; justify-content: flex-start; font-size: var(--typography-font-size-86rem-d03e951); color: var(--ink); }
.ws-lightbox .ws-menu button:hover, .ws-lightbox .ws-menu button:focus-visible { background: var(--accent-surface); }
.ws-lightbox .ws-menu .danger { color: var(--red); }

/* search screen: tabs, results, search box at the bottom */
.ws-searchui { width: min(var(--geometry-max-width-46rem-a77c1a9), var(--geometry-max-width-100vw-26ee43a)); height: min(var(--geometry-max-width-44rem-6ddb6ba), var(--geometry-height-100dvh-9e432e5)); max-width: var(--geometry-max-width-100vw-26ee43a); max-height: var(--geometry-height-100dvh-9e432e5); margin: auto; padding: 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-md); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
.ws-searchui:not([open]) { display: none; }
.ws-searchui::backdrop { background: var(--color-background-020611cc-f2acd93); }
.ws-searchui [hidden] { display: none !important; }
/* Search, from the top: the search box; All / Iris Chat / Iris Code and Filters; the filters panel (open beneath them);
   the categories, underlined when chosen; the filters that are on, as chips; then the results, scrolling on their own. */
.ws-searchui__head { position: relative; display: grid; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-gap-8rem-818b9f7) 0; border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-searchui:focus, .ws-searchui__tabs:focus { outline: none; }
.ws-searchui__find { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-searchui__field { flex: 1; display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); height: var(--geometry-height-2-65rem-2c2a86d); padding: 0 var(--spacing-padding-85rem-2e72ebc); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line);
  background: var(--panel); color: var(--muted); min-width: 0; transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), box-shadow var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-searchui__field:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ws-searchui__field input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-98rem-ba83cc0); outline: none; }
.ws-searchui__field input::placeholder { color: var(--dim, var(--muted)); }
.ws-searchui__field input::-webkit-search-cancel-button { display: none; }
.ws-searchui__clear { display: grid; place-items: center; width: var(--geometry-width-1-35rem-0c0025b); height: var(--geometry-width-1-35rem-0c0025b); border-radius: 50%; border: 0; background: color-mix(in srgb, var(--muted) 70%, transparent);
  color: var(--paper); cursor: pointer; flex: 0 0 auto; }
.ws-searchui__close { width: var(--geometry-height-2-65rem-2c2a86d); height: var(--geometry-height-2-65rem-2c2a86d); flex: 0 0 auto; border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line) !important; }
/* Where to search, and Filters: one compact row. */
.ws-searchui__moderow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-searchui__mode { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: center; min-width: 0; padding: var(--spacing-gap-18rem-4293127); border-radius:var(--r-sm); }
.ws-searchui__mode button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); height: var(--geometry-min-height-2-75rem-3cc807c); padding: 0 var(--spacing-margin-3rem-fb2375d); border-radius:var(--r-sm); font-size: var(--typography-font-size-82rem-8da80e1); font-weight: var(--type-weight-control); white-space: nowrap; }
.ws-searchui__mode button svg { opacity: .85; }
.ws-searchui__filtersbtn { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); height: var(--geometry-height-2-35rem-e6963f3); padding: 0 var(--spacing-padding-75rem-4cf1798); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm);
  background: none; color: var(--muted); font: inherit; font-size: var(--typography-font-size-82rem-8da80e1); font-weight: var(--type-weight-control); cursor: pointer; white-space: nowrap; transition: color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), background var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-searchui__filtersbtn:hover { color: var(--ink); border-color: var(--muted); }
.ws-searchui__filtersbtn[aria-expanded="true"] { color: var(--ink); background: var(--panel); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ws-searchui__filtersbtn.is-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ws-searchui__count { display: grid; place-items: center; min-width: var(--geometry-width-1-15rem-3b14c93); height: var(--geometry-width-1-15rem-3b14c93); padding: 0 var(--spacing-margin-3rem-fb2375d); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--accent); color: var(--accent-ink);
  font-size: var(--typography-font-size-68rem-41c61ff); font-weight: var(--typography-font-weight-800-1a1cf79); }
/* The filters panel: it opens beneath the controls (no overlay); the category's filters as names, the chosen one's
   choices under them, sliding in as you move between them. */
.ws-searchui__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e), opacity var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-searchui__panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.ws-searchui__panelbody { min-height: 0; overflow: hidden; display: grid; gap: var(--spacing-gap-55rem-f5020a7); }
.ws-searchui__panel.is-open .ws-searchui__panelbody { padding: var(--spacing-padding-65rem-bcca6ce); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); }
.ws-searchui__pnames { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-3rem-fb2375d); padding-bottom: var(--spacing-gap-55rem-f5020a7); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-searchui__pnames button { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); height: var(--geometry-width-2rem-bca5ebd); padding: 0 var(--spacing-padding-6rem-d0bc70f); border: 0; border-radius:var(--r-sm); background: none;
  color: var(--muted); font: inherit; font-size: var(--typography-font-size-8rem-818b9f7); font-weight: var(--type-weight-control); cursor: pointer; transition: color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), background var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-searchui__pnames button:hover { color: var(--ink); }
.ws-searchui__pnames button[aria-selected="true"] { color: var(--ink); background: var(--panel-strong); }
.ws-searchui__pnames button.is-set::after { content: ""; position: absolute; top: .35rem; right: .3rem; width: var(--geometry-width-38rem-2277968); height: var(--geometry-width-38rem-2277968); border-radius: 50%; background: var(--accent); }
.ws-searchui__poptions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-searchui__poptions.is-moving { animation: ws-filter-step var(--dur-page-out) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e) both; }
@keyframes ws-filter-step { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.ws-searchui__pill { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); max-width: 100%; height: var(--geometry-height-2-15rem-e2c77f9); padding: 0 var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244);
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--typography-font-size-82rem-8da80e1); cursor: pointer; transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), background var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-searchui__pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-searchui__pill svg { flex: 0 0 auto; color: var(--muted); }
.ws-searchui__pill:hover { border-color: var(--muted); }
.ws-searchui__pill[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); background: color-mix(in srgb, var(--accent) 16%, var(--paper)); color: var(--ink); font-weight: var(--type-weight-control); }
.ws-searchui__pill[aria-pressed="true"] svg { color: var(--accent); }
.ws-searchui__pill.is-back { border-style: dashed; color: var(--muted); }
.ws-searchui__pnone { margin: 0; color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-searchui__date { display: inline-flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-searchui__date input { height: var(--geometry-height-2-15rem-e2c77f9); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--typography-font-size-82rem-8da80e1); padding: 0 var(--spacing-gap-7rem-7eff2a1); color-scheme: dark; }
/* The categories: their names in one row, the chosen one in the accent with a line under it (a narrow screen scrolls the
   row a little rather than cutting a name short). */
.ws-searchui__tabs { display: flex; gap: var(--spacing-gap-15rem-e51094a); margin: 0 var(--spacing-margin-8rem-7d6b22c); padding: 0 var(--spacing-gap-55rem-f5020a7); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ws-searchui__tabs::-webkit-scrollbar { display: none; }
.ws-searchui__tabs button { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-padding-32rem-ecbb419); height: var(--geometry-min-height-2-4rem-84ca4d0); padding: 0 var(--spacing-margin-5rem-ef026cb);
  border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); font-weight: var(--type-weight-control); white-space: nowrap; cursor: pointer; transition: color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-searchui__tabs button svg { flex: 0 0 auto; opacity: .8; }
.ws-searchui__tabs button[aria-selected="true"] svg { opacity: 1; }
.ws-searchui__tabs button:hover { color: var(--ink); }
.ws-searchui__tabs button[aria-selected="true"] { color: var(--accent); }
/* A phone: the categories as icons, the chosen one with its name, so all seven fit on one row. */
@media (max-width: 560px) { .ws-searchui__tabs button:not([aria-selected="true"]) > span { display: none; } .ws-searchui__tabs button { padding: 0 var(--spacing-padding-6rem-d0bc70f); } }
.ws-searchui__tabs button::after { content: ""; position: absolute; left: .45rem; right: .45rem; bottom: 0; height: var(--geometry-outline-2px-7476140); border-radius: var(--geometry-outline-2px-7476140) var(--geometry-outline-2px-7476140) 0 0; background: var(--accent);
  transform: scaleX(0); transition: transform var(--dur-page-out) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-searchui__tabs button[aria-selected="true"]::after { transform: none; }
/* The filters that are on: one chip each (its value; tap to change it, x to take it off). */
.ws-searchui__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-margin-5rem-ef026cb) 0 var(--spacing-gap-55rem-f5020a7); margin-top: var(--spacing-margin-top-6rem-990e5bc); border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-searchui__chip { display: inline-flex; align-items: stretch; max-width: 100%; min-width: 0; height: var(--geometry-height-1-95rem-cf4c37b); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ws-searchui__chipbody { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); min-width: 0; padding: 0 var(--spacing-gap-15rem-e51094a) 0 var(--spacing-padding-6rem-d0bc70f); border: 0; background: none; color: var(--ink);
  font: inherit; font-size: var(--typography-font-size-78rem-6850684); font-weight: var(--type-weight-control); cursor: pointer; }
.ws-searchui__chipbody svg { flex: 0 0 auto; color: var(--accent); }
.ws-searchui__chipbody span { max-width: var(--geometry-max-width-11rem-11cad0d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .ws-searchui__chipbody span { max-width: var(--geometry-min-width-7-5rem-5feabe0); } }
.ws-searchui__chipx { display: grid; place-items: center; width: var(--geometry-min-height-1-9rem-27b2c42); padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 0 var(--geometry-border-radius-999px-088f244) var(--geometry-border-radius-999px-088f244) 0; }
.ws-searchui__chipx:hover, .ws-searchui__chipx:focus-visible { color: var(--ink); }
.ws-searchui__clearall { height: var(--geometry-height-1-95rem-cf4c37b); padding: 0 var(--spacing-gap-35rem-1304a2b); border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--typography-font-size-78rem-6850684); font-weight: var(--typography-font-weight-700-99ee502); cursor: pointer; white-space: nowrap; }
.ws-searchui__tick { width: var(--geometry-width-17px-9bb5d32); flex: 0 0 17px; }
.ws-searchui__loading { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ws-searchui__panel, .ws-searchui__tabs button::after { transition: none; } .ws-searchui__poptions.is-moving { animation: none; } }
/* The results: compact rows (still a comfortable tap), readable titles, quiet details, scrolling on their own. */
.ws-searchui__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-45rem-ef5b39f) calc(var(--spacing-padding-6rem-d0bc70f) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); }
.ws-searchui__label { font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim, var(--muted)); margin: var(--spacing-padding-6rem-d0bc70f) var(--spacing-margin-5rem-ef026cb) var(--spacing-gap-35rem-1304a2b); }
.ws-searchui__row { display: flex; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); width: 100%; min-height: var(--geometry-width-3rem-550d167); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-margin-5rem-ef026cb); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: background var(--dur-micro) var(--motion-transition-ease-914ff41); }
.ws-searchui__row:hover, .ws-searchui__row[aria-selected="true"] { background: var(--panel); }
.ws-searchui__icon { flex: 0 0 auto; display: grid; place-items: center; width: var(--geometry-width-2-1rem-f351383); height: var(--geometry-width-2-1rem-f351383); border-radius: var(--icon-radius); background: var(--panel); color: var(--muted); overflow: hidden; }
.ws-searchui__row:hover .ws-searchui__icon, .ws-searchui__row[aria-selected="true"] .ws-searchui__icon { background: var(--panel-strong); }
.ws-searchui__icon svg { width: var(--geometry-width-17px-9bb5d32); height: var(--geometry-width-17px-9bb5d32); }
.ws-searchui__icon--image img { width: 100%; height: 100%; object-fit: cover; }
.ws-searchui__text { flex: 1; min-width: 0; display: grid; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-searchui__title { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); min-width: 0; font-size: var(--typography-font-size-9rem-2ad2e76); font-weight: var(--typography-font-weight-500-0604cd3); }
.ws-searchui__title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-searchui__title .ws-modetag { flex: 0 0 auto; margin-left: 0; }
.ws-searchui__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--typography-font-size-76rem-a2a5d3f); color: var(--muted); }
.ws-searchui__title strong, .ws-searchui__sub strong { color: var(--ink); font-weight: var(--typography-font-weight-750-64d095f); }
.ws-searchui__empty { padding: var(--spacing-padding-1rem-b8be0c7) var(--spacing-padding-6rem-d0bc70f); }
/* Full screen on phones: it starts below the status bar, the edges clear rounded corners and cut-outs, and the page's
   height follows the keyboard (interactive-widget=resizes-content), so the search box stays in view. */
@media (max-width: 780px) {
  .ws-searchui { width: var(--geometry-max-width-100vw-26ee43a); height: var(--geometry-height-100dvh-9e432e5); border-radius: 0; border: 0; }
  .ws-searchui__head { padding: calc(var(--spacing-padding-6rem-d0bc70f) + env(safe-area-inset-top, var(--spacing-padding-top-0px-33a3c91))) max(var(--spacing-padding-75rem-4cf1798), env(safe-area-inset-right, var(--spacing-padding-top-0px-33a3c91))) 0 max(var(--spacing-padding-75rem-4cf1798), env(safe-area-inset-left, var(--spacing-padding-top-0px-33a3c91))); }
  .ws-searchui__tabs { margin: 0 calc(-1 * max(var(--spacing-padding-75rem-4cf1798), env(safe-area-inset-right, var(--spacing-padding-top-0px-33a3c91)))) 0 calc(-1 * max(var(--spacing-padding-75rem-4cf1798), env(safe-area-inset-left, var(--spacing-padding-top-0px-33a3c91)))); }
}
@media (max-width: 480px) {
  .ws-searchui__tabs { gap: var(--spacing-padding-1rem-4e95f32); padding: 0 var(--spacing-margin-4rem-7fdc8b1); scroll-padding: 0 .4rem; }
  .ws-searchui__tabs button { font-size: var(--typography-font-size-82rem-8da80e1); padding: 0 var(--spacing-gap-45rem-ef5b39f); }
}
.ws-imgactions { display: inline-flex; gap: var(--spacing-margin-3rem-fb2375d); flex-wrap: wrap; }
.ws-chip--action { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); cursor: pointer; background: none; font: inherit; font-size: var(--typography-font-size-72rem-2a7309a); color: var(--ink); }
.ws-chip--action:hover, .ws-chip--action:focus-visible { border-color: var(--accent); color: var(--accent); }
.ws-page-tools { gap: var(--spacing-padding-6rem-d0bc70f); flex-wrap: wrap; align-items: center; }
.ws-page-search { flex: 1; min-width: var(--geometry-min-width-12rem-2f2f4a6); display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-75rem-4cf1798); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel); color: var(--muted); }
.ws-page-search:focus-within { border-color: var(--accent); }
.ws-page-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; outline: none; }

/* ---- saved images ---- */
.ws-tile { position: relative; }
.ws-tile > button:first-child { width: 100%; }
/* Controls and labels over a picture: dark in every theme, whatever the picture. */
:root { --on-image: var(--color-background-0b101bcc-6842f2d); --on-image-ink: var(--color-color-eef2fb-e11b6df); }
.ws-savebtn { position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center; width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); border-radius: 50%; border: 0; background: var(--on-image); color: var(--on-image-ink); cursor: pointer; opacity: 0; transition: opacity var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), transform var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), background var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); backdrop-filter: blur(4px); }
.ws-tile:hover .ws-savebtn, .ws-savebtn:focus-visible, .ws-savebtn[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .ws-savebtn { opacity: 1; } }
.ws-savebtn[aria-pressed="true"] { color: var(--accent); }
.ws-savebtn[aria-pressed="true"] svg { fill: currentColor; }
.ws-tile--chat { display: inline-block; max-width: min(100%, var(--geometry-max-height-32rem-34ca678)); }
.ws-tile--chat .ws-savebtn { top: .9rem; right: .5rem; }
.ws-lightbox__save { display: inline-flex; }
.ws-lightbox__save .ws-savebtn svg { width: var(--geometry-width-20px-9bf0c8e); height: var(--geometry-width-20px-9bf0c8e); }
.ws-lightbox__save .ws-savebtn { position: static; opacity: 1; width: var(--geometry-min-height-2-75rem-3cc807c); height: var(--geometry-min-height-2-75rem-3cc807c); border-radius: var(--geometry-border-radius-999px-088f244); background: none; backdrop-filter: none; }

/* ---- motion: quick, calm, never in the way ---- */
@keyframes ws-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ws-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ws-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-slide-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes ws-slide-right { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes ws-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes ws-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes ws-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes ws-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ws-toast-out { to { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes ws-sheet-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ws-enter { animation: ws-rise var(--dur-drawer) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e) both; }
.ws-dots { display: inline-flex; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-margin-2rem-4cd30ed); }
.ws-dots i { width: var(--geometry-width-5rem-ef026cb); height: var(--geometry-width-5rem-ef026cb); border-radius: 50%; background: var(--agent, var(--accent)); animation: ws-bounce var(--motion-animation-1200ms-f8ce733) var(--motion-animation-ease-in-out-16c2539) infinite; }
.ws-dots i:nth-child(2) { animation-delay: var(--motion-animation-delay-150ms-a29b8de); } .ws-dots i:nth-child(3) { animation-delay: var(--motion-animation-delay-300ms-13a634f); }
.ws-imgwait { width: min(100%, var(--geometry-max-height-22rem-6313c12)); display: grid; place-items: center; align-content: center; gap: var(--spacing-margin-5rem-ef026cb); margin-top: var(--spacing-margin-3rem-fb2375d); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line); color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc);
  background: linear-gradient(100deg, var(--panel) 30%, color-mix(in srgb, var(--agent, var(--accent)) 16%, var(--panel)) 50%, var(--panel) 70%); background-size: 200% 100%; animation: ws-shimmer var(--motion-animation-1600ms-aa635fb) var(--motion-animation-linear-7f2fe58) infinite; }
.ws-fadeimg { opacity: 0; transition: opacity var(--motion-transition-350ms-cbe7c0b) var(--motion-transition-ease-914ff41); }
.ws-fadeimg.is-loaded { opacity: 1; }

/* dialogs, menus, search, viewer */
.ws-dialog[open] { animation: ws-pop-in var(--dur-page-out) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-dialog[open]::backdrop, .ws-searchui[open]::backdrop, .ws-lightbox[open]::backdrop { animation: ws-fade var(--dur-page-out) var(--motion-transition-ease-914ff41); }
.ws-menu:not([hidden]) { animation: ws-pop-in var(--motion-transition-140ms-9202e73) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); transform-origin: top; }
.ws-searchui[open] { animation: ws-sheet-up var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-lightbox[open] { animation: ws-fade var(--dur-page-out) var(--motion-transition-ease-914ff41); }
.ws-lightbox__stage img.ws-slide { animation: ws-pop-in var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-searchui__row, .ws-saved, .ws-plugin, .ws-group { animation: ws-rise var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e) both; }

[data-view]:not([hidden]) { animation: ws-fade var(--dur-control) var(--motion-transition-ease-914ff41); }

/* presses, toggles, saves */
.ws-iconbtn, .ws-button, .ws-toggle, .ws-chip--action, .ws-chip--files, .ws-send, .ws-agent-pick, .ws-row, .ws-nav__item, .ws-quality__chip, .ws-aspect__chip, .ws-mode, .ws-swatch, .ws-picker__icon, .ws-segmented button, .ws-searchui__tabs button, .ws-savebtn {
  transition: transform var(--dur-micro) var(--motion-transition-ease-914ff41), background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), opacity var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-iconbtn:active, .ws-button:active, .ws-toggle:active, .ws-chip--action:active, .ws-send:active, .ws-agent-pick:active, .ws-quality__chip:active, .ws-aspect__chip:active,
.ws-mode:active, .ws-swatch:active, .ws-picker__icon:active, .ws-segmented button:active, .ws-searchui__tabs button:active, .ws-savebtn:active { transform: scale(.94); }
.ws-row:active, .ws-nav__item:active { transform: scale(.985); }
.ws-pop { animation: ws-pop var(--motion-animation-320ms-d44f71b) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-send:not(:disabled) { box-shadow: 0 0 0 0 color-mix(in srgb, var(--button-fill) 40%, transparent); }
.ws-savebar:not([hidden]) { animation: ws-sheet-up var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-saved-notice:not([hidden]) { animation: ws-pop-in var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-toast { animation: ws-toast-in var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-toast.is-leaving { animation: ws-toast-out var(--dur-major) var(--motion-transition-ease-914ff41) forwards; }
.ws-picker:not([hidden]) { animation: ws-rise var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-filetree details > ul, .ws-folder__body { animation: ws-fade var(--dur-control) var(--motion-transition-ease-914ff41); }

@media (prefers-reduced-motion: reduce) {
  .workspace-page *, .workspace-page *::before, .workspace-page *::after, .ws-lightbox *, .ws-searchui *, .ws-searchui, .ws-lightbox, .ws-toast {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ws-dots i { opacity: 1; }
}

/* temporary chats: amber, dashed, labeled */
.ws { --temp: var(--warn); }
.ws-tempbadge { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); margin-left: var(--spacing-gap-55rem-f5020a7); padding: var(--spacing-padding-12rem-ac4570c) var(--spacing-margin-5rem-ef026cb); border-radius: var(--geometry-border-radius-999px-088f244); border: var(--geometry-border-1px-93e2062) dashed var(--temp); color: var(--temp); font: 700 var(--typography-font-size-7rem-7eff2a1)/1.4 var(--font-ui); vertical-align: middle; letter-spacing: var(--typography-letter-spacing-02em-3e41986); }
.ws.is-temporary .ws-bar { border-bottom: var(--geometry-border-1px-93e2062) dashed color-mix(in srgb, var(--temp) 60%, transparent); background: color-mix(in srgb, var(--temp) 5%, transparent); }
.ws.is-temporary .ws-inputbox { border-style: dashed; border-color: color-mix(in srgb, var(--temp) 55%, var(--line)); }
.ws.is-temporary .ws-inputbox:focus-within { border-color: var(--temp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--temp) 16%, transparent); }
.ws-tempnote { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin: 0 auto var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-78rem-6850684); color: var(--temp); }
.ws-tempnote__dot { width: var(--geometry-width-45rem-ef5b39f); height: var(--geometry-width-45rem-ef5b39f); border-radius: 50%; background: var(--temp); flex: 0 0 auto; }
.ws.is-temporary .ws-empty h2 { color: var(--temp); }

/* scroll to the latest message */
.ws-main { position: relative; }
.ws-tobottom { position: absolute; left: 50%; translate: -50% 0; z-index: 5; display: grid; place-items: center; width: var(--geometry-width-38px-6018510); height: var(--geometry-width-38px-6018510); border-radius: 50%; border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel-strong); color: var(--ink); box-shadow: 0 6px 18px var(--shadow-color); cursor: pointer; animation: ws-pop-in var(--dur-control) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-tobottom:hover, .ws-tobottom:focus-visible { border-color: var(--accent); color: var(--accent); }
.ws-tobottom:active { transform: scale(.94); }
/* Unfold (workspace.js unfoldPhrase): one system, tinted text with a thin underline and a glow, never a highlighter
   (the owner, 2026-10-16). What can be opened is lavender with a faint 1.5px line set below the letters. Pressed, it
   brightens at once (120ms) and one soft light closes in on it from both ends over the hold (a single layer that follows
   each line the phrase wraps onto: two meeting in the middle drew seams); at the end it pulses once, and breathes while
   the answer grows. One opened turns teal, no line or glow. A faint pill (inside the words' own box, so nothing moves)
   shows only on hover where there's a pointer, never on a long phrase, which keeps to its tint. What an expansion adds
   is teal and underlined as it types in and a while after, then slowly reads as the rest of the answer. */
@property --unfold-in { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.ws-unfold { --tint: color-mix(in srgb, var(--accent) 70%, var(--indigo, var(--accent))); --pill: transparent; --unfold-in: 0%;
  --glow: color-mix(in srgb, var(--tint) 24%, transparent); border-radius: var(--geometry-border-radius-45em-951f9cf); cursor: pointer; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; color: color-mix(in srgb, var(--tint) 75%, var(--ink));
  /* A taller target for a fingertip (padding, which moves nothing: inline); fills drawn only round the words. */
  padding: var(--spacing-padding-4em-d7a72bd) var(--spacing-margin-left-12em-a98947c); margin: 0 var(--spacing-margin-12em-194e130); background-clip: content-box; background-color: var(--pill);
  background-image: linear-gradient(to right, var(--glow) var(--unfold-in), transparent var(--unfold-in),
    transparent calc(100% - var(--unfold-in)), var(--glow) calc(100% - var(--unfold-in)));
  background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: var(--geometry-text-underline-offset-26em-805b631); text-decoration-skip-ink: auto;
  text-decoration-color: color-mix(in srgb, var(--tint) 34%, transparent); text-shadow: 0 0 .7em color-mix(in srgb, var(--tint) 22%, transparent);
  transition: color var(--dur-major) var(--motion-transition-ease-914ff41), text-shadow var(--dur-major) var(--motion-transition-ease-914ff41), background-color var(--dur-major) var(--motion-transition-ease-914ff41), --unfold-in var(--dur-control) var(--motion-animation-ease-out-791c2d0), text-decoration-color var(--dur-major) var(--motion-transition-ease-914ff41); }
/* Opened: its own color (teal, where what can open is lavender), no line or glow; held, the light that closes in is teal. */
.ws-unfold[aria-expanded="true"] { --tint: var(--cyan); color: color-mix(in srgb, var(--cyan) 75%, var(--ink)); text-decoration-color: transparent; text-shadow: none; }
@media (hover: hover) {
  .ws-unfold:hover { --pill: color-mix(in srgb, var(--tint) 6%, transparent); text-shadow: 0 0 .8em color-mix(in srgb, var(--tint) 45%, transparent); }
}
.ws-unfold:focus-visible { --pill: color-mix(in srgb, var(--tint) 6%, transparent); outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-height-3px-ac33ff9); }
/* The hold: the color answers at once, the light closes in from both ends over the hold, and lets go quickly. */
.ws-unfold.is-pressing { -webkit-user-select: none; user-select: none; --pill: transparent; --unfold-in: 51%;
  color: color-mix(in srgb, var(--tint) 30%, var(--ink)); text-decoration-color: transparent;
  text-shadow: 0 0 1em color-mix(in srgb, var(--tint) 75%, transparent);
  transition: color var(--dur-micro) var(--motion-animation-ease-out-791c2d0), text-shadow var(--dur-page-out) var(--motion-animation-ease-out-791c2d0), text-decoration-color var(--dur-micro) var(--motion-animation-ease-out-791c2d0), --unfold-in var(--motion-transition-650ms-734b8ac) var(--motion-transition-cubic-bezier-45-0-55-1-2c26175); }
.ws-unfold.is-held, .ws-unfold.is-asking { -webkit-user-select: none; user-select: none; --pill: transparent; --unfold-in: 51%;
  color: color-mix(in srgb, var(--tint) 25%, var(--ink)); text-decoration-color: transparent;
  text-shadow: 0 0 .45em color-mix(in srgb, var(--tint) 70%, transparent), 0 0 1.3em color-mix(in srgb, var(--tint) 60%, transparent); }
.ws-unfold.is-held { animation: ws-unfold-pulse var(--motion-animation-550ms-a45f587) var(--motion-animation-ease-out-791c2d0); }
@keyframes ws-unfold-pulse { 0% { --glow: color-mix(in srgb, var(--tint) 60%, transparent);
  text-shadow: 0 0 .3em var(--accent), 0 0 1.6em var(--accent), 0 0 2.6em color-mix(in srgb, var(--tint) 70%, transparent); } }
.ws-unfold.is-asking { animation: ws-unfold-lit var(--motion-animation-1100ms-04e2190) var(--motion-animation-ease-in-out-16c2539) infinite alternate; }
@keyframes ws-unfold-lit { to { text-shadow: 0 0 .4em color-mix(in srgb, var(--tint) 40%, transparent), 0 0 .9em color-mix(in srgb, var(--tint) 30%, transparent); } }
.ws-unfold.is-long { --pill: transparent !important; background-image: none; }  /* a long phrase keeps to its tint and glow */
/* While the answer grows: a soft light passes through the held phrase's passage. */
.ws-msg__body .is-enhancing { position: relative; }
.ws-msg__body .is-enhancing::after { content: ""; position: absolute; inset: -.15em -.35em; border-radius: var(--geometry-width-6em-ab5dc36); pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--accent) 10%, transparent) 50%, transparent 65%) no-repeat;
  background-size: 260% 100%; animation: ws-unfold-sweep var(--motion-animation-1600ms-aa635fb) var(--motion-animation-ease-in-out-16c2539) infinite; }
@keyframes ws-unfold-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
/* What an expansion added: teal and underlined as it's written and a while after (the owner, 2026-10-17: "for longer
   paragraphs I genuinely can't tell what is new and what isn't ... Underline the new text as it's written, make the
   text the color - then it all slowly fades into being white"), for as long as it takes to read (workspace.js
   unfoldReadMs), then the answer's own color, which it stays. Only that fade is eased: a change of theme isn't. */
.ws-unfold__new, .ws-unfold__para { transition: opacity var(--dur-control) var(--motion-transition-ease-914ff41), filter var(--dur-control) var(--motion-transition-ease-914ff41); }
/* An answer's question (workspace.js answerToken "ask"): a card of choices, each sent as the person's answer. */
.ws-ask { display: grid; gap: var(--spacing-padding-10px-38cb6b4); margin: var(--spacing-padding-6rem-d0bc70f) 0; padding: var(--spacing-gap-14px-09f9739); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--violet) 40%, var(--line));
  border-radius: var(--r-lg); background: color-mix(in srgb, var(--violet) 7%, var(--panel)); }
.ws-ask__head { display: flex; align-items: center; gap: var(--spacing-padding-8px-eb4ebe4); }
.ws-ask__head svg { display: block; flex: none; color: var(--violet); }
.ws-ask__choices { display: flex; flex-wrap: wrap; gap: var(--spacing-padding-8px-eb4ebe4); }
.ws-ask__choice, .ws-ask__other { max-width: 100%; }
.ws-ask__choice > span { overflow-wrap: anywhere; white-space: normal; text-align: start; }
.ws-ask.is-answered { opacity: .7; }
.ws-ask__choice.is-chosen { border-color: var(--violet); color: var(--violet); }
/* A page's or repository's tags (hub.js tagChips): small and quiet, under its card's title. */
.ws-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-4px-3566015); margin-top: var(--spacing-gap-4px-3566015); }
.ws-tag { display: inline-flex; align-items: center; min-height: var(--geometry-width-20px-9bf0c8e); padding: 0 var(--spacing-padding-7px-a15202e); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel-strong);
  color: var(--muted); font-size: var(--typography-font-size-74rem-bc7c01a); font-weight: var(--type-weight-control); }
/* A well-known person's panel (workspace.js personPanels): their picture, then who they are and the record's facts. */
.ws-person { display: flex; align-items: flex-start; gap: var(--spacing-gap-14px-09f9739); margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-padding-9rem-2ad2e76); padding: var(--spacing-gap-14px-09f9739); border: var(--geometry-border-1px-93e2062) solid var(--line-soft);
  border-radius: var(--r-lg); background: var(--panel); }
.ws-person:not(.is-filled) { display: block; }
.ws-person__photo { display: block; flex: none; width: var(--geometry-width-96px-96ecb2f); height: var(--geometry-height-120px-9a631b0); object-fit: cover; border-radius:var(--r-sm); background: var(--panel-strong); }
.ws-person__main { display: grid; gap: var(--spacing-gap-4px-3566015); min-width: 0; }
.ws-person__name { font-size: var(--typography-font-size-1-1rem-14af91b); }
.ws-person__about { color: var(--muted); font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-person__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-gap-3px-ac33ff9) var(--spacing-padding-12px-7769e81); margin: var(--spacing-padding-6px-7adef6a) 0 0; font-size: var(--typography-font-size-88rem-39c360b); }
.ws-person__facts dt { color: var(--muted); font-weight: var(--type-weight-control); }
.ws-person__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ws-person__source { justify-self: start; margin-top: var(--spacing-gap-4px-3566015); color: var(--cyan); font-size: var(--typography-font-size-84rem-a4deb85); }
@media (max-width: 420px) { .ws-person__photo { width: var(--geometry-width-76px-f4c7d87); height: var(--geometry-width-96px-96ecb2f); } }
.ws-reference, .ws-person.ws-reference { display: block; overflow: hidden; margin: var(--spacing-margin-4rem-7fdc8b1) 0 var(--spacing-padding-1rem-b8be0c7); padding: 0;
  border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-width-18px-ab98c04); background: var(--panel); }
.ws-reference__header { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--spacing-padding-1rem-b8be0c7); padding: var(--spacing-padding-left-1-1rem-14af91b);
  background: linear-gradient(125deg, color-mix(in srgb, var(--violet) 9%, transparent), transparent 70%); }
.ws-reference__portrait { position: relative; display: grid; place-items: center; align-self: start; width: var(--geometry-width-112px-e740473); height: var(--geometry-height-144px-5c7c3ee);
  overflow: hidden; border-radius:var(--r-sm); color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, var(--panel-strong)); }
.ws-reference__portrait > svg { position: absolute; }
.ws-msg__body .ws-reference__portrait > .ws-person__photo { position: relative; width: 100%; height: 100%; margin: 0; border: 0; object-fit: cover; }
.ws-reference .ws-person__name { font-size: clamp(var(--typography-font-size-1-15rem-3b14c93), var(--typography-font-size-2-5vw-32e8868), var(--typography-font-size-1-55rem-43fa26c)); line-height: var(--typography-line-height-1-2-77ac319); letter-spacing: var(--typography-letter-spacing-025em-7ee6350); }
.ws-reference .ws-person__facts { gap: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-8rem-818b9f7); margin-top: var(--spacing-padding-6rem-d0bc70f); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-reference .ws-person__facts dd { line-height: var(--typography-line-height-1-45-6918de1); }
.ws-msg__body .ws-reference__overview { padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-padding-left-1-1rem-14af91b) var(--spacing-padding-9rem-2ad2e76); margin: 0; font-size: var(--typography-font-size-94rem-b37683d); }
.ws-reference__sectionhead { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-padding-25rem-1677828) var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-25rem-1677828) var(--spacing-padding-left-1-1rem-14af91b);
  border-top: var(--geometry-border-1px-93e2062) solid var(--line); color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); text-transform: uppercase; letter-spacing: var(--typography-letter-spacing-08em-0018d62); }
.ws-reference__sectionhead > span { display: flex; }
.ws-reference__sectionhead .ws-iconbtn { width: var(--geometry-min-height-32px-9d9bfb3); height: var(--geometry-min-height-32px-9d9bfb3); }
.ws-reference__section { border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-reference__section > summary { display: flex; align-items: center; gap: var(--spacing-padding-65rem-bcca6ce); cursor: pointer; padding: var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-left-1-1rem-14af91b);
  font-weight: var(--typography-font-weight-650-2099a9b); font-size: var(--typography-font-size-92rem-c7cd355); list-style: none; }
.ws-reference__section > summary::-webkit-details-marker { display: none; }
.ws-reference__section > summary::before { display: none; }
.ws-reference__section > summary > svg { flex: none; color: var(--dim); transition: transform var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-reference__section[open] > summary > svg { transform: rotate(90deg); }
.ws-reference__index { flex: none; font: var(--typography-font-size-68rem-41c61ff) var(--font-mono); color: var(--dim); letter-spacing: var(--typography-letter-spacing-04em-5c4d123); }
.ws-reference__section[open] > summary { background: color-mix(in srgb, var(--cyan) 5%, transparent); }
.ws-reference__section[open] > summary > .ws-reference__index { color: var(--cyan); }
.ws-reference__section[open] > .ws-reference__content { border-left: var(--geometry-outline-2px-7476140) solid color-mix(in srgb, var(--cyan) 24%, transparent); margin-left: var(--spacing-padding-9rem-2ad2e76); }
.ws-reference__section > summary:hover { background: var(--panel-strong); }
.ws-reference__section > summary:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--violet); outline-offset: var(--geometry-outline-offset-3px-140f47c); }
.ws-reference__content { padding: 0 var(--spacing-padding-left-1-1rem-14af91b) var(--spacing-padding-85rem-2e72ebc); font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-reference__content > p { white-space: pre-line; }
.ws-reference__content > .ws-reference__section { margin: var(--spacing-margin-5rem-ef026cb) 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); overflow: hidden; }
.ws-reference__content .ws-reference__section > summary { font-size: var(--typography-font-size-86rem-d03e951); padding: var(--spacing-padding-65rem-bcca6ce) var(--spacing-gap-8rem-818b9f7); }
.ws-reference__content .ws-reference__content { padding: 0 var(--spacing-gap-8rem-818b9f7) var(--spacing-gap-7rem-7eff2a1); }
.ws-reference__read { display: inline-block; margin-top: var(--spacing-margin-4rem-7fdc8b1); font-size: var(--typography-font-size-75rem-4cf1798); }
.ws-reference__metrics { padding: 0 var(--spacing-padding-left-1-1rem-14af91b); border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-reference__sources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-padding-85rem-2e72ebc); padding: var(--spacing-padding-65rem-bcca6ce) var(--spacing-padding-left-1-1rem-14af91b); border-top: var(--geometry-border-1px-93e2062) solid var(--line); font-size: var(--typography-font-size-75rem-4cf1798); }
.ws-reference__sources .ws-person__source { margin: 0; font-size: inherit; }
.ws-reference__credit { display: block; padding: 0 var(--spacing-padding-left-1-1rem-14af91b) var(--spacing-padding-65rem-bcca6ce); font-size: var(--typography-font-size-67rem-2766cb2); color: var(--dim); }
@media (max-width: 420px) {
  .ws-reference__header { grid-template-columns: 76px minmax(0, 1fr); gap: var(--spacing-gap-8rem-818b9f7); padding: var(--spacing-padding-9rem-2ad2e76); }
  .ws-reference__portrait { width: var(--geometry-width-76px-f4c7d87); height: var(--geometry-height-102px-cb97a7b); }
  .ws-reference .ws-person__facts { grid-template-columns: 1fr; gap: var(--spacing-padding-05rem-98939d1); }
  .ws-reference .ws-person__facts dd { margin-bottom: var(--spacing-gap-35rem-1304a2b); }
}
/* Unfold's ghost writer, the scribe (workspace.js unfoldGhost; .ws-ghost is a dragged row's): the working dyad flying to a held phrase and riding its words. */
.ws-scribe { position: fixed; inset: 0; z-index: 70; pointer-events: none; transition: opacity var(--motion-transition-450ms-5df2141) var(--motion-transition-ease-914ff41); }
.ws-scribe.is-leaving { opacity: 0; }
.ws-scribe.is-materializing .ws-scribe__mark { animation: ws-scribe-materialize var(--motion-animation-400ms-d8e24dc) var(--motion-animation-ease-out-791c2d0) both; }
.ws-scribe.is-materializing .ws-scribe__mark::before { animation: ws-scribe-gather var(--motion-animation-400ms-d8e24dc) var(--motion-animation-ease-out-791c2d0) both; }
@keyframes ws-scribe-materialize { from { opacity: 0; filter: blur(7px); } to { opacity: 1; filter: blur(0); } }
@keyframes ws-scribe-gather { from { transform: scale(2); box-shadow: 0 0 16px 3px color-mix(in srgb, var(--cyan) 30%, transparent); }
  to { transform: scale(1); box-shadow: 0 0 2px 0 transparent; } }
.ws-scribe__trace { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-scribe__mark { position: absolute; left: 0; top: 0; width: var(--geometry-width-30px-95a8d35); height: var(--geometry-width-30px-95a8d35); will-change: transform;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--violet) 85%, transparent)) drop-shadow(0 0 1px color-mix(in srgb, var(--cyan) 80%, transparent)); }
.ws-scribe__mark::before { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 18%, transparent), transparent 65%); }
.ws-scribe__mark .ws-dyad { display: block; }
.ws-unfold__new.is-fresh, .ws-unfold__para.is-fresh, .ws-unfold__new.is-settling, .ws-unfold__para.is-settling {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: var(--geometry-text-underline-offset-26em-805b631); text-decoration-skip-ink: auto; }
.ws-unfold__new.is-fresh, .ws-unfold__para.is-fresh { color: color-mix(in srgb, var(--cyan) 80%, var(--ink));
  text-decoration-color: color-mix(in srgb, var(--cyan) 60%, transparent); }
.ws-unfold__new.is-settling, .ws-unfold__para.is-settling { text-decoration-color: transparent;
  transition: color var(--motion-transition-6000ms-d559c5e) var(--motion-transition-ease-914ff41), text-decoration-color var(--motion-transition-6000ms-d559c5e) var(--motion-transition-ease-914ff41); }
li > .ws-unfold__para, dd > .ws-unfold__para, dt > .ws-unfold__para { margin: var(--spacing-margin-35em-01bb958) 0 0; }
.ws-unfold__rewrite.is-arriving { animation: ws-unfold-arrive var(--dur-major) var(--motion-animation-ease-out-791c2d0); }
@keyframes ws-unfold-arrive { from { opacity: .2; filter: blur(2px); } }
.ws-unfold__new.is-leaving, .ws-unfold__para.is-leaving, .ws-unfold__rewrite.is-leaving { opacity: 0; filter: blur(2px); }
@media (prefers-reduced-motion: reduce) {
  .ws-unfold, .ws-unfold.is-pressing, .ws-unfold__new, .ws-unfold__para { transition: none; }
  .ws-unfold.is-held, .ws-unfold.is-asking, .ws-unfold__rewrite.is-arriving { animation: none; }
  .ws-msg__body .is-enhancing::after { animation: none; background: color-mix(in srgb, var(--accent) 5%, transparent); }
}
/* Android's tiled long screenshots must capture each header once, in its place in the content. */
.dyadic-capture .ws-tobottom { visibility: hidden; }
.dyadic-capture :is(.ws-hub__nav, .ws-context__top) { position: static; }

/* generated images in chat: a compact preview of the full-resolution file;
   tap for the full-size viewer */
.ws-msg__body .ws-zoomable { display: inline-block; border-radius:var(--r-sm); overflow: hidden; line-height: 0; }
.ws-msg__body .ws-zoomable img { width: auto; height: auto; max-width: min(100%, var(--geometry-max-width-18rem-6796582)); max-height: var(--geometry-max-width-18rem-6796582); object-fit: contain; margin: 0; border-radius:var(--r-sm); }
.ws-msg__body .ws-zoomable:hover img, .ws-msg__body .ws-zoomable:focus-visible img { filter: brightness(1.06); }
.ws-tile--chat { display: inline-block; max-width: min(100%, var(--geometry-max-width-18rem-6796582)); margin: var(--spacing-margin-4rem-7fdc8b1) 0; }
.ws-tile--chat .ws-savebtn { top: .45rem; right: .45rem; }
@media (max-width: 520px) { .ws-msg__body .ws-zoomable img { max-width: min(100%, var(--geometry-min-width-14rem-0eb654d)); max-height: var(--geometry-min-width-14rem-0eb654d); } .ws-tile--chat { max-width: min(100%, var(--geometry-min-width-14rem-0eb654d)); } }

/* image selection */
.ws-selectbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); flex-wrap: wrap; margin-bottom: var(--spacing-gap-8rem-818b9f7); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--accent); border-radius:var(--r-sm); background: var(--panel-strong); animation: ws-rise var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-selectbar > span { flex: 1; font-weight: var(--typography-font-weight-700-99ee502); }
.ws-selectbar .ws-button { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-gallery.is-selecting button { cursor: pointer; }
.ws-tile__check { position: absolute; top: .4rem; left: .4rem; display: grid; place-items: center; width: var(--geometry-min-height-1-4rem-2569574); height: var(--geometry-min-height-1-4rem-2569574); border-radius: 50%; border: var(--geometry-outline-2px-7476140) solid var(--color-color-eef2fb-e11b6df); background: var(--color-background-0b101b99-f61e592); color: var(--accent-ink); pointer-events: none; }
.ws-tile.is-selected .ws-tile__check { background: var(--accent); border-color: var(--accent); }
.ws-tile.is-selected img { outline: var(--geometry-height-3px-ac33ff9) solid var(--accent); outline-offset: var(--geometry-outline-offset-3px-140f47c); filter: brightness(.85); }
.ws-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-surface); }

/* ==== navigation shell: rail, conversation sidebar, chat, details ==== */
/* The rail: Home, libraries, then tools and you. */
.ws-rail { width: var(--rail-w); flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); padding: var(--spacing-gap-7rem-7eff2a1) 0 calc(var(--spacing-gap-7rem-7eff2a1) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); background: var(--paper); border-right: var(--geometry-border-1px-93e2062) solid var(--line); overflow-y: auto; scrollbar-width: none; }
.ws-rail::-webkit-scrollbar { display: none; }
.ws-rail hr { width: var(--geometry-min-height-1-9rem-27b2c42); border: 0; border-top: var(--geometry-outline-2px-7476140) solid var(--line); margin: var(--spacing-padding-1rem-4e95f32) 0; }
.ws-rail__libraries, .ws-rail__tools { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-rail__tools { margin-top: auto; padding-top: var(--spacing-margin-5rem-ef026cb); }
.ws-rail__item { position: relative; display: grid; place-items: center; width: var(--geometry-min-height-46px-1968afb); height: var(--geometry-min-height-46px-1968afb); padding: 0; border-radius:var(--r-md); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer;
  transition: border-radius var(--dur-control) var(--motion-transition-ease-914ff41), background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), transform var(--dur-micro) var(--motion-transition-ease-914ff41); }
.ws-rail__item .ws-cicon { color: var(--tint, var(--muted)); }
.ws-rail__item:hover, .ws-rail__item:focus-visible { border-radius:var(--r-sm); border-color: var(--tint, var(--accent)); color: var(--ink); background: color-mix(in srgb, var(--tint, var(--accent)) 14%, var(--panel)); }
.ws-rail__item[aria-current="true"] { border-radius:var(--r-sm); border-color: var(--tint, var(--accent)); background: color-mix(in srgb, var(--tint, var(--accent)) 20%, var(--panel)); color: var(--ink); }
.ws-rail__item::before { content: ""; position: absolute; left: calc(-1 * (var(--rail-w) - 46px) / 2); top: 50%; width: var(--geometry-text-underline-offset-4px-3566015); height: 0; border-radius: 0 var(--geometry-border-radius-8px-eb4ebe4) var(--geometry-border-radius-8px-eb4ebe4) 0; background: var(--tint, var(--accent)); transform: translateY(-50%); transition: height var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-rail__item:hover::before { height: var(--geometry-width-9rem-2ad2e76); }
.ws-rail__item[aria-current="true"]::before { height: var(--geometry-width-1-8rem-1e2e541); }
.ws-rail__item:active { transform: scale(.94); }
.ws-rail__tool { border-color: transparent; background: none; width: var(--geometry-width-42px-c98b24d); height: var(--geometry-width-42px-c98b24d); }
.ws-rail__add { border-style: dashed; color: var(--accent); }
.ws-rail .ws-me { width: var(--geometry-width-42px-c98b24d); height: var(--geometry-width-42px-c98b24d); border-radius: 50%; border: var(--geometry-border-1px-93e2062) solid var(--line); overflow: hidden; }
.ws-rail .ws-me::before { display: none; }
.ws-rail .ws-me .ws-msg__avatar { width: 100%; height: 100%; border-radius: 50%; }
.ws-rail img { border-radius:var(--r-sm); }
.ws-side__title { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin: 0 auto 0 0; min-width: 0; font-size: var(--typography-font-size-1rem-b8be0c7); font-weight: var(--typography-font-weight-800-1a1cf79); }
.ws-side__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The title swaps libraries with a tap (a long press opens the library's options). */
.ws-side__title { margin-left: var(--spacing-margin-left-45rem-69b7c31); }
.ws-side__switch { display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; max-width: 100%; margin: var(--spacing-margin-35rem-94ce370) 0;
  padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-45rem-ef5b39f); border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; font-weight: var(--typography-font-weight-800-1a1cf79); cursor: pointer; }
.ws-side__switch > svg, .ws-side__switch > img, .ws-side__chev svg { display: block; flex: none; }
.ws-side__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-side__chev { display: grid; place-items: center; flex: none; color: var(--muted); }
.ws-side__switch:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-offset-2px-91cb4fd); }
@media (hover: hover) { .ws-side__switch:hover { background: var(--panel-strong); } }
.ws-row--temporary .ws-row__label { color: var(--muted); }
.ws-tree__list--temporary { border-left: var(--geometry-outline-2px-7476140) dashed color-mix(in srgb, var(--temp) 55%, transparent); margin-left: var(--spacing-gap-45rem-ef5b39f) !important; padding-left: var(--spacing-margin-2rem-4cd30ed) !important; }

/* Desktop: everything docked; the sidebar and details collapse with their buttons. */
@media (min-width: 1101px) {
  .ws.nav-collapsed .ws-side { display: none; }
  .ws:not(.nav-collapsed) .ws-bar__nav { display: none; }
  .ws-bar__details { display: none; }
  .ws:not(.nav-collapsed) .ws-side { animation: ws-slide-left var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
  .ws-context:not([hidden]) { animation: ws-slide-right var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
}
/* Tablet and phone: the sidebar and details slide over the chat. */
@media (max-width: 1100px) {
  .ws, .ws.has-context { grid-template-columns: auto minmax(0, 1fr); }
  .ws-context { position: fixed; right: 0; top: 0; bottom: 0; width: min(var(--ctx-w), var(--geometry-width-88vw-525e451)); z-index: 50; box-shadow: var(--shadow); padding-top: 0;
    padding-bottom: calc(var(--spacing-padding-9rem-2ad2e76) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); transform: translateX(102%); transition: transform var(--dur-drawer) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); will-change: transform; }
  .ws.panel-open .ws-context { transform: none; }
  /* Drawers that cover the screen start below the phone's status bar and display cutout (both sidebars read this). */
  .ws { --drawer-top: env(safe-area-inset-top, 0px); }
  /* Full View: the whole screen. */
  .ws.panel-full .ws-context { width: var(--geometry-max-width-100vw-26ee43a); box-shadow: none; }
  .ws-bar [data-action="panel"] { display: none; }
  .ws-scrim { transition: opacity var(--dur-drawer) var(--motion-transition-ease-914ff41); }
  .ws-msg__actions { opacity: 1; }
}
@media (min-width: 781px) and (max-width: 1100px) {
  .ws { --ctx-w: var(--layout-tablet-inspector); }
}
/* Phone and tablet alike: the chat fills the screen; the rail and sidebar come in together from the left. */
@media (max-width: 1100px) {
  .ws, .ws.has-context { grid-template-columns: minmax(0, 1fr); }
  .ws-nav { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; width: min(calc(var(--rail-w) + var(--nav-w)), var(--geometry-width-94vw-9117197)); padding-top: var(--drawer-top);
    transform: translateX(-102%); transition: transform var(--dur-drawer) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); will-change: transform; box-shadow: none; }
  .ws.nav-open .ws-nav { transform: none; box-shadow: var(--shadow); }
  .ws-side { flex: 1; width: auto; }
  .ws.nav-full .ws-nav { width: var(--geometry-max-width-100vw-26ee43a); }
}
@media (max-width: 780px) {
  .ws-bar { min-height: var(--geometry-width-56px-7d24764); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-625rem-f9d8138); gap: var(--spacing-gap-375rem-942bd3e); }
  .ws-bar__primary { margin-left: var(--spacing-gap-375rem-942bd3e); gap: var(--spacing-padding-25rem-1677828); }
  /* Details is in the chat's options here; a dot on the sidebar button says the rail's bell has something unread. */
  .ws-bar__details { display: none; }
  .ws-bar__nav.has-unread::after { content: ""; position: absolute; top: .5rem; right: .5rem; width: var(--geometry-width-5rem-ef026cb); height: var(--geometry-width-5rem-ef026cb); border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 2px var(--paper); }
  .ws-bar__place .ws-lineage { display: none; }
  .ws-toggle { padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); }
}
.ws.nav-dragging .ws-nav, .ws.nav-dragging .ws-side { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .ws-nav, .ws-side, .ws-context, .ws-rail__item, .ws-rail__item::before { transition: none !important; } }

/* details panel: tabs */
/* The panel's pages: each tab its icon over its name, in its own color when chosen; the header and tabs stay put while
   the page scrolls under them. */
/* The panel's header sticks at the very top of its scroll area: the panel keeps no padding above it (that padding is the
   header's own), so no strip of content ever shows above it, the phone's safe area included. */
.ws-context { padding-top: 0; }
.ws-context__top { position: sticky; top: 0; z-index: 3; margin: 0 var(--spacing-margin-9rem-c9bc77e) var(--spacing-margin-4rem-7fdc8b1); padding: calc(var(--spacing-gap-8rem-818b9f7) + var(--drawer-top)) var(--spacing-padding-9rem-2ad2e76) var(--spacing-margin-5rem-ef026cb); background: var(--panel);
  border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-panel-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-margin-2rem-4cd30ed); margin: var(--spacing-padding-65rem-bcca6ce) 0 0; padding: var(--spacing-margin-2rem-4cd30ed); border: var(--geometry-border-1px-93e2062) solid var(--line);
  border-radius:var(--r-sm); background: var(--paper); }
.ws-panel-tabs button { --tab: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-gap-15rem-e51094a); min-width: 0;
  height: var(--geometry-width-3rem-550d167); padding: var(--spacing-margin-2rem-4cd30ed); border: 0; border-radius: var(--icon-radius); background: none; color: var(--muted); font: 600 var(--typography-font-size-66rem-358ab2c)/1.1 var(--font-ui); cursor: pointer;
  transition: background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-panel-tabs button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-panel-tabs button svg { display: block; width: var(--geometry-width-17px-9bb5d32); height: var(--geometry-width-17px-9bb5d32); }
.ws-panel-tabs button[aria-selected="true"] { color: var(--tab); background: color-mix(in srgb, var(--tab) 14%, transparent); }
.ws-panel-tabs button:hover { color: var(--ink); }
.ws-panel-tabs [data-panel="activity"] { --tab: var(--cyan); }
.ws-panel-tabs [data-panel="outline"] { --tab: var(--amber); } .ws-panel-tabs [data-panel="context"] { --tab: var(--violet); }
.ws-panel-tabs [data-panel="files"] { --tab: var(--coral); }
/* A section inside a page, and a page with nothing to show: the same everywhere in the panel. */
.ws-panel__label { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); margin: var(--spacing-padding-1rem-b8be0c7) 0 var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-7rem-7eff2a1); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-08em-0018d62);
  text-transform: uppercase; color: var(--dim); }
.ws-panel__label:first-child { margin-top: var(--spacing-margin-3rem-fb2375d); }
/* Every page's own section headings read the same as these. */
#ws-context section > h3:not([class]), #ws-context .ws-sheet__label { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); margin: var(--spacing-padding-1rem-b8be0c7) 0 var(--spacing-gap-45rem-ef5b39f);
  font-size: var(--typography-font-size-7rem-7eff2a1); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); }
.ws-panel__label svg { display: block; width: var(--geometry-border-radius-14px-09f9739); height: var(--geometry-border-radius-14px-09f9739); }
.ws-panel-empty { display: grid; justify-items: center; gap: var(--spacing-gap-45rem-ef5b39f); padding: var(--spacing-padding-2rem-bca5ebd) var(--spacing-padding-75rem-4cf1798); text-align: center; }
.ws-panel-empty__icon { display: grid; place-items: center; width: var(--geometry-width-2-8rem-a6a423c); height: var(--geometry-width-2-8rem-a6a423c); border-radius: 50%; color: var(--indigo);
  background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 16%, transparent), color-mix(in srgb, var(--violet) 18%, transparent)); }
.ws-panel-empty__icon svg { display: block; }
.ws-panel-empty strong { font-size: var(--typography-font-size-95rem-adb8a86); }
.ws-panel-empty p { margin: 0; max-width: var(--geometry-max-height-22rem-6313c12); color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); }

/* The Plan Dock: on top of the composer and one piece with it (the same border, corners and fill, a rule between),
   a handle to swipe or tap, the plan's title and state, the step under way and what Iris is doing, and a bar of one
   segment per step colored by how each stands. Open, the whole plan scrolls under it. */
.ws-plandock { --plan: var(--indigo); display: grid; gap: var(--spacing-margin-3rem-fb2375d); padding: 0 var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-6rem-d0bc70f); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 75%, transparent);
  border-bottom: 0; border-radius: var(--geometry-width-20px-9bf0c8e) var(--geometry-width-20px-9bf0c8e) 0 0; background: color-mix(in srgb, var(--panel) 60%, var(--paper));
  transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-plandock[hidden] { display: none; }
.ws-composer:has(> .ws-plandock:not([hidden])) .ws-inputbox { border-top-left-radius: 0; border-top-right-radius: 0; }
.ws-composer:has(> .ws-plandock:not([hidden])) .ws-inputbox:focus-within,
.ws-composer:has(> .ws-plandock:not([hidden])) .ws-inputbox.is-planning { box-shadow: none; }
.ws-composer:has(.ws-inputbox:focus-within) > .ws-plandock { border-color: var(--accent); background: var(--panel); }
.ws-plandock__grip { display: flex; justify-content: center; }
.ws-plandock__handle { display: grid; place-items: center; width: var(--geometry-min-height-4-5rem-41dca9e); height: var(--geometry-width-1-2rem-a7b00d3); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.ws-plandock__handle::before { content: ""; display: block; width: var(--geometry-width-2-3rem-4a13ff0); height: var(--geometry-text-underline-offset-4px-3566015); border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--muted) 45%, transparent);
  transition: background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), width var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-plandock__handle:hover::before, .ws-plandock__handle:focus-visible::before { width: var(--geometry-width-2-8rem-a6a423c); background: var(--muted); }
.ws-plandock__handle:focus-visible { outline: none; }
.ws-plandock__head { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-plandock__icon { flex: none; display: grid; place-items: center; color: var(--plan); }
.ws-plandock__icon svg { display: block; }
.ws-plandock__title { flex: 1 1 auto; min-width: 0; font-size: var(--typography-font-size-92rem-c7cd355); line-height: var(--typography-line-height-1-4-1a948f1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-plandock__status { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); font-size: var(--typography-font-size-76rem-a2a5d3f); font-weight: var(--typography-font-weight-650-2099a9b);
  color: var(--plan); white-space: nowrap; }
.ws-plandock__status i { flex: none; display: block; width: var(--geometry-width-7px-a15202e); height: var(--geometry-width-7px-a15202e); border-radius: 50%; background: currentColor; }
.ws-plandock.is-live .ws-plandock__status i { animation: ws-plan-pulse var(--motion-animation-1400ms-e605013) var(--motion-animation-ease-in-out-16c2539) infinite; }
.ws-plandock__more { flex: none; width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); margin: var(--spacing-margin-3rem-5eade97) var(--spacing-margin-4rem-088589b) var(--spacing-margin-3rem-5eade97) var(--spacing-margin-1rem-4b56e50); }
.ws-plandock__now { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); min-width: 0; margin: 0; font-size: var(--typography-font-size-82rem-8da80e1); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-plandock__now > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-plandock.is-live .ws-plandock__now > span:nth-child(2) { font-weight: var(--type-weight-control); }
.ws-plandock__count { flex: none; font-size: var(--typography-font-size-76rem-a2a5d3f); font-weight: var(--typography-font-weight-650-2099a9b); color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-plandock__doing { margin: var(--spacing-margin-15rem-c6524f4) 0 0 calc(var(--spacing-padding-block-18px-ab98c04) + var(--spacing-gap-45rem-ef5b39f)); font-size: var(--typography-font-size-76rem-a2a5d3f); line-height: var(--typography-line-height-1-45-6918de1); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One segment per step: gray to come, purple under way, green done (paler when skipped), yellow interrupted or blocked,
   red failed. */
.ws-plandock__bar { display: flex; gap: var(--spacing-gap-3px-ac33ff9); height: var(--geometry-border-radius-5px-3772b3a); margin-top: var(--spacing-gap-15rem-e51094a); }
.ws-plandock__bar i { flex: 1 1 0; min-width: 0; border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--line) 85%, transparent); transition: background-color var(--dur-major) var(--motion-transition-ease-914ff41); }
.ws-plandock__bar i.is-in_progress { background: var(--violet); }
.ws-plandock.is-live .ws-plandock__bar i.is-in_progress { animation: ws-plan-segment var(--motion-animation-1400ms-e605013) var(--motion-animation-ease-in-out-16c2539) infinite; }
.ws-plandock__bar i.is-completed { background: var(--ok); }
.ws-plandock__bar i.is-skipped { background: color-mix(in srgb, var(--ok) 45%, transparent); }
.ws-plandock__bar i.is-paused, .ws-plandock__bar i.is-blocked { background: var(--warn); }
.ws-plandock__bar i.is-failed { background: var(--danger); }
@keyframes ws-plan-segment { 50% { opacity: .45; } }
.ws-plandock .ws-plan__actions { margin-top: var(--spacing-margin-2rem-4cd30ed); }
/* Open: the whole plan, under a rule, scrolling in its own space (a phone's keyboard shrinks the space it has). */
.ws-plandock__body { max-height: min(var(--geometry-max-width-26rem-36abcba), var(--geometry-max-height-50dvh-f1dd907)); margin: var(--spacing-padding-25rem-1677828) var(--spacing-margin-85rem-e69666c) 0; padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-1rem-4e95f32); overflow-y: auto; overscroll-behavior: contain;
  border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-plandock__body[hidden] { display: none; }
.ws-plandock.is-moving .ws-plandock__body { overflow: hidden; }
/* At full height: up to just under the top bar (measured as it opens: --plan-full). */
.ws-plandock.is-full .ws-plandock__body { max-height: none; height: var(--plan-full, var(--geometry-height-60dvh-1d849ca)); }
/* The conversation above gives way to it, its padding too, so the composer rises to the top bar. */
.ws-main:has(.ws-plandock.is-tall, .ws-plandock.is-full) .ws-messages { --page-top: 0; padding-bottom: 0; }
.ws-plandock__label { margin: var(--spacing-gap-7rem-7eff2a1) 0 var(--spacing-margin-3rem-fb2375d); font-size: var(--typography-font-size-7rem-7eff2a1); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); }
.ws-plandock__others { display: grid; gap: var(--spacing-padding-1rem-4e95f32); padding-bottom: var(--spacing-margin-3rem-fb2375d); }
.ws-plandock__other { --plan: var(--muted); display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-min-height-2-4rem-84ca4d0); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-35rem-1304a2b); border: 0; border-radius:var(--r-sm);
  background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); text-align: left; cursor: pointer; }
.ws-plandock__other:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ws-plandock__othericon { flex: none; display: grid; place-items: center; color: var(--plan); }
.ws-plandock__othericon svg { display: block; }
.ws-plandock__othername { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-plandock__other small { flex: none; color: var(--plan); font-weight: var(--typography-font-weight-650-2099a9b); }
/* Typing on a phone: the keyboard takes the room, so what Iris is doing steps out of the way (the step still shows). */
@media (max-width: 640px) { .ws-composer:has(textarea:focus) .ws-plandock__doing { display: none; } }
@media (prefers-reduced-motion: reduce) { .ws-plandock__bar i, .ws-plandock__status i { animation: none !important; } }
.ws-plan__dot { flex: none; display: block; width: var(--geometry-border-radius-6px-7adef6a); height: var(--geometry-border-radius-6px-7adef6a); border-radius: 50%; background: var(--step, var(--violet)); animation: ws-plan-pulse var(--motion-animation-1400ms-e605013) var(--motion-animation-ease-in-out-16c2539) infinite; }
@keyframes ws-plan-pulse { 50% { transform: scale(.55); opacity: .4; } }
/* A fold (Approach, History): a quiet line with a chevron that turns. */
.ws-fold > summary { display: flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-padding-25rem-1677828) 0; list-style: none; cursor: pointer; font-size: var(--typography-font-size-74rem-bc7c01a); font-weight: var(--type-weight-control); color: var(--muted); }
.ws-fold > summary::-webkit-details-marker { display: none; }
.ws-fold__body { margin: var(--spacing-gap-15rem-e51094a) 0 var(--spacing-margin-3rem-fb2375d); font-size: var(--typography-font-size-8rem-818b9f7); white-space: pre-wrap; }
/* A page's code that starts folded (hub.js foldedCode): its language and first line on the fold's one line. */
.ws-fold--code > summary { min-height: var(--geometry-min-height-2-6rem-ee2b419); font-size: var(--typography-font-size-85rem-2e72ebc); }
.ws-fold--code > summary > span { flex: none; }
.ws-fold--code > summary > code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--typography-font-weight-400-26d2286); }
.ws-fold--code[open] > summary > code { display: none; }
.ws-steps { list-style: none; margin: var(--spacing-gap-15rem-e51094a) 0 0; padding: 0; display: grid; }
.ws-step { --step: var(--muted); margin-left: calc(var(--depth, 0) * var(--spacing-padding-95rem-adb8a86)); }
.ws-step.is-nested { padding-left: var(--spacing-margin-3rem-fb2375d); border-left: var(--geometry-outline-2px-7476140) solid color-mix(in srgb, var(--line) 85%, transparent); }
.ws-step__row { display: flex; align-items: center; min-width: 0; border-radius:var(--r-sm); }
.ws-step.is-current > .ws-step__row { background: color-mix(in srgb, var(--step) 10%, transparent); }
.ws-step__head { flex: 1 1 auto; display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); min-width: 0; min-height: var(--geometry-height-2-5rem-fb391dd); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-35rem-1304a2b); font: inherit;
  text-align: left; color: var(--ink); background: none; border: 0; border-radius:var(--r-sm); cursor: pointer; }
.ws-step__head:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ws-step__head > .ws-step__chev { flex: none; display: block; width: var(--geometry-border-radius-14px-09f9739); height: var(--geometry-border-radius-14px-09f9739); color: var(--muted); transform-origin: 50% 50%; transform-box: fill-box; transform: rotate(-90deg); transition: transform var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-step__head[aria-expanded="true"] > .ws-step__chev { transform: none; }
.ws-step__icon { flex: none; display: grid; place-items: center; width: var(--geometry-width-18px-ab98c04); height: var(--geometry-width-18px-ab98c04); color: var(--step); }
.ws-step__icon svg { display: block; }
.ws-step__icon.is-in_progress svg { animation: ws-step-spin var(--motion-animation-1100ms-04e2190) var(--motion-animation-linear-7f2fe58) infinite; }
@keyframes ws-step-spin { to { transform: rotate(360deg); } }
.ws-step__key { flex: none; min-width: var(--geometry-min-height-1-4rem-2569574); font: 600 var(--typography-font-size-68rem-41c61ff)/1 var(--font-mono, monospace); color: var(--dim); }
.ws-step__title { flex: 1 1 auto; min-width: 0; font-size: var(--typography-font-size-84rem-a4deb85); line-height: var(--typography-line-height-1-3-9c193c6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-step.is-completed .ws-step__title, .ws-step.is-skipped .ws-step__title { color: var(--muted); }
.ws-step.is-skipped .ws-step__title { text-decoration: line-through; }
.ws-step.is-current .ws-step__title { font-weight: var(--type-weight-control); }
.ws-step__more { flex: none; width: var(--geometry-width-2-2rem-ac5d0c3); height: var(--geometry-width-2-2rem-ac5d0c3); opacity: .6; }
.ws-step__kids { flex: none; font-size: var(--typography-font-size-68rem-41c61ff); font-weight: var(--typography-font-weight-650-2099a9b); color: var(--dim); font-variant-numeric: tabular-nums; }
.ws-step.has-kids > .ws-step__row .ws-step__title { font-weight: var(--type-weight-control); }
.ws-step.has-kids > .ws-step__row .ws-step__head[aria-expanded="false"] > .ws-step__chev { transform: rotate(-90deg); }
.ws-step__live { color: var(--step); font-weight: var(--type-weight-control); }
.ws-step__verified { cursor: pointer; }
.ws-step__verified > svg { color: var(--muted); }
.ws-step__verified > strong { flex: none; color: var(--ink); font-weight: var(--type-weight-control); }
.ws-step__proof { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-step__verified.is-whole .ws-step__proof { white-space: normal; }
.ws-step__row:hover .ws-step__more, .ws-step__more:focus-visible, .ws-step__more[aria-expanded="true"] { opacity: 1; }
.ws-step__body { display: grid; gap: var(--spacing-margin-3rem-fb2375d); margin: 0 var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-35rem-1304a2b) var(--spacing-margin-2-2rem-ac5d0c3); padding: var(--spacing-padding-1rem-4e95f32) 0 var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-55rem-f5020a7); border-left: var(--geometry-outline-2px-7476140) solid color-mix(in srgb, var(--step) 35%, transparent);
  font-size: var(--typography-font-size-78rem-6850684); color: var(--ink); }
.ws-step__body p { margin: 0; }
.ws-step__line { display: flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); color: var(--muted); }
.ws-step__line svg { flex: none; display: block; display: block; }
.ws-step__tools > span { display: flex; flex-wrap: wrap; gap: var(--spacing-padding-25rem-1677828); }
.ws-step__call { padding: var(--spacing-padding-05rem-98939d1) var(--spacing-margin-4rem-7fdc8b1); border-radius: var(--geometry-border-radius-999px-088f244); font-size: var(--typography-font-size-7rem-7eff2a1); color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.ws-step__call.is-failed { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.ws-step__call.is-retried { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.ws-plan__actions { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); margin-top: var(--spacing-padding-25rem-1677828); }
.ws-plan__go { flex: 1 1 auto; min-height: var(--geometry-height-2-5rem-fb391dd); background: var(--plan); border-color: transparent; color: var(--accent-ink); }
.ws-plandock.is-draft .ws-plan__go { background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.ws-plan__side { flex: none; width: var(--geometry-height-2-5rem-fb391dd); height: var(--geometry-height-2-5rem-fb391dd); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-md); }
.ws-plan__history { list-style: none; margin: var(--spacing-padding-1rem-4e95f32) 0 var(--spacing-margin-3rem-fb2375d); padding: 0; display: grid; gap: var(--spacing-padding-25rem-1677828); font-size: var(--typography-font-size-74rem-bc7c01a); }
.ws-plan__history li { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-plan__history li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.ws-plan__history time { flex: none; color: var(--dim); font-size: var(--typography-font-size-7rem-7eff2a1); }
.ws-planedit { display: grid; gap: var(--spacing-margin-5rem-ef026cb); margin-bottom: var(--spacing-margin-5rem-ef026cb); }
.ws-planedit__row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: var(--spacing-gap-45rem-ef5b39f); align-items: start; }
.ws-planedit__fields { display: grid; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-chip--plan { color: var(--indigo); }
/* A plan's or task's name in a chip is cut to fit with an ellipsis, never wider than the page (a long name pushed the
   whole conversation sideways on a phone); its full name is the chip's title. */
:is(.ws-chip--plan, .ws-chip--task) { max-width: min(100%, var(--geometry-max-height-22rem-6313c12)); min-width: 0; }
.ws-msg__foot > :is(.ws-chip--plan, .ws-chip--task) > span, :is(.ws-chip--plan, .ws-chip--task) > span {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A conversation with an unsent draft: a small pencil beside its name, next to the running or unread dot. */
/* A conversation's new name writing itself out in the sidebar (chatLabel): a caret after the letters so far. */
.ws-row__label.is-naming::after { content: ""; display: inline-block; width: var(--geometry-outline-2px-7476140); height: var(--geometry-height-1em-284478b); margin-left: var(--spacing-gap-2px-7476140); vertical-align: -.12em;
  background: var(--accent); border-radius: var(--geometry-border-1px-93e2062); animation: ws-name-caret var(--dur-reveal) steps(1) infinite; }
@keyframes ws-name-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ws-row__label.is-naming::after { animation: none; } }
.ws-draftmark { flex: none; display: grid; place-items: center; width: var(--geometry-border-radius-22px-5d6c439); height: var(--geometry-border-radius-22px-5d6c439); margin-left: auto; color: var(--muted); }
.ws-draftmark svg { display: block; width: var(--geometry-width-16px-6793164); height: var(--geometry-width-16px-6793164); stroke-width: 1.8; }
/* Plan Mode: its chip in the composer and its row in the + sheet, in a blue to purple gradient when on. */
.ws-modechip--plan[aria-pressed="true"] { color: var(--accent-ink); border-color: transparent; background: linear-gradient(135deg, var(--indigo), var(--violet)); }
.ws-inputbox.is-planning { box-shadow: 0 0 0 1px color-mix(in srgb, var(--indigo) 55%, transparent), 0 0 0 4px color-mix(in srgb, var(--indigo) 14%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .ws-step__icon.is-in_progress svg, .ws-plan__dot { animation: none; }
  .ws-plandock__bar i, .ws-step__head > .ws-step__chev, summary::before { transition: none; }
}
.ws-bar__place { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; }
.ws-bar__place > * { flex: none; }
.ws-bar__place > .ws-bar__where, .ws-bar__place > .ws-lineage { flex: 0 1 auto; min-width: 0; }
.ws-bar__place > .ws-bar__sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-bar__where { overflow: hidden; text-overflow: ellipsis; }
.ws-lineage { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); max-width: 100%; padding: var(--spacing-padding-05rem-98939d1) var(--spacing-gap-45rem-ef5b39f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); background: none; color: var(--cyan, var(--accent)); font: inherit; font-size: var(--typography-font-size-74rem-bc7c01a); cursor: pointer; }
.ws-lineage span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lineage:hover, .ws-lineage:focus-visible { border-color: var(--accent); }

/* context stack: detach and re-attach */
.ws-stack__open { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.ws-stack__open:disabled { cursor: default; }
.ws-stack li.is-detached { opacity: .55; border-style: dashed; }
.ws-button--small { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-padding-25rem-1677828) var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-74rem-bc7c01a); white-space: nowrap; flex: 0 0 auto; }

/* connections: a small graph */
.ws-connections { display: grid; gap: var(--spacing-padding-1rem-b8be0c7); margin-top: var(--spacing-padding-6rem-d0bc70f); }
.ws-graph { display: grid; justify-items: center; gap: 0; }
.ws-graph__level { display: grid; gap: var(--spacing-gap-35rem-1304a2b); width: 100%; }
.ws-graph__edge { width: var(--geometry-outline-2px-7476140); height: var(--geometry-width-1rem-b8be0c7); background: var(--line); border-radius:var(--r-sm); }
.ws-node { display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); width: 100%; min-width: 0; padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-node:hover, .ws-node:focus-visible { border-color: var(--accent); }
.ws-node.is-current { border-color: var(--accent); background: var(--accent-surface); cursor: default; }
.ws-node__text { flex: 1; min-width: 0; display: grid; gap: var(--spacing-padding-05rem-98939d1); }
.ws-node__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--typography-font-size-86rem-d03e951); }
.ws-node__text small { color: var(--muted); font-size: var(--typography-font-size-72rem-2a7309a); }
.ws-node > svg:last-child { color: var(--dim); flex: 0 0 auto; }
.ws-graph__group h3 { margin-top: 0; }
.ws-graph__nodes { display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-row-actions--start { justify-content: flex-start; margin-top: var(--spacing-margin-3rem-fb2375d); }
.ws-row-actions--inline { display: inline-flex; margin: 0; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-row-actions--inline .ws-button { text-transform: none; letter-spacing: 0; font-size: var(--typography-font-size-78rem-6850684); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-55rem-f5020a7); }

/* "#" references in the composer */
.ws-imports { display: grid; gap: var(--spacing-gap-35rem-1304a2b); margin-bottom: var(--spacing-gap-45rem-ef5b39f); }
.ws-import { border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius:var(--r-sm); background: var(--panel); overflow: hidden; animation: ws-rise var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-import__head { display: flex; align-items: center; }
.ws-import__toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-55rem-f5020a7); border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); text-align: left; cursor: pointer; }
.ws-import__toggle > svg:last-child { color: var(--dim); transition: transform var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); flex: 0 0 auto; }
.ws-import__toggle[aria-expanded="true"] > svg:last-child { transform: rotate(90deg); }
.ws-import__title { font-weight: var(--typography-font-weight-700-99ee502); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-import__count { margin-left: auto; color: var(--muted); font-size: var(--typography-font-size-74rem-bc7c01a); white-space: nowrap; }
.ws-import__remove { width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); }
.ws-import__items { list-style: none; margin: 0; padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-45rem-ef5b39f); display: grid; gap: var(--spacing-gap-15rem-e51094a); max-height: var(--geometry-min-width-14rem-0eb654d); overflow-y: auto; border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-import__item { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-35rem-1304a2b); border-radius:var(--r-sm); cursor: pointer; font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-import__item:hover { background: var(--panel-strong); }
.ws-import__item > svg { color: var(--muted); flex: 0 0 auto; display: block; }
.ws-import__item input { margin: var(--spacing-gap-15rem-e51094a) 0 0; accent-color: var(--accent); }
.ws-import__item span { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-import__item strong { font-weight: var(--type-weight-control); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-import__item small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ws-palette li > svg, .ws-palette li > .ws-cicon { flex: 0 0 auto; align-self: center; }
/* A cited Workspace item inside an answer's text. */
.ws-refchip--cite { vertical-align: .05em; margin: 0 var(--spacing-margin-1em-7fa2b88); padding: var(--spacing-padding-05rem-98939d1) var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-8em-926d5e1); line-height: var(--type-line-body); cursor: default; }
button.ws-refchip--cite { cursor: pointer; }
/* The Workspace items an answer cites, once each, under it (decorateRefs). */
.ws-refsources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); margin-top: var(--spacing-gap-7rem-7eff2a1); }
.ws-refsources__label { color: var(--dim); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-06em-9679667); text-transform: uppercase; margin-right: var(--spacing-gap-15rem-e51094a); }
.ws-refsources .ws-refchip--cite { margin: 0; font-size: var(--typography-font-size-78rem-6850684); }
.ws-refchip--cite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-refchip { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); max-width: var(--geometry-max-height-16rem-868f8b1); padding: var(--spacing-gap-15rem-e51094a) var(--spacing-margin-5rem-ef026cb); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-refchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-refchip small { color: var(--muted); }
.ws-refchip button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.ws-refchip--button { cursor: pointer; }
.ws-refchip--button:hover, .ws-refchip--button:focus-visible { border-color: var(--accent); }
.ws-imported { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); margin: var(--spacing-padding-1rem-4e95f32) 0 var(--spacing-gap-35rem-1304a2b); }
.ws-imported__label { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); font-size: var(--typography-font-size-72rem-2a7309a); color: var(--muted); }
.ws-imported__item { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-chosen { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-35rem-1304a2b); margin-bottom: var(--spacing-margin-5rem-ef026cb); }
.ws-pick { display: grid; gap: var(--spacing-gap-15rem-e51094a); max-height: var(--geometry-max-width-18rem-6796582); overflow-y: auto; margin-top: var(--spacing-margin-5rem-ef026cb); }
.ws-pick__row { display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); width: 100%; padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-margin-5rem-ef026cb); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-88rem-39c360b); text-align: left; cursor: pointer; }
.ws-pick__row:hover, .ws-pick__row:focus-visible { background: var(--panel-strong); }
.ws-pick__row[aria-selected="true"] { background: var(--accent-surface); }
.ws-pick__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pick__check { display: grid; place-items: center; width: var(--geometry-width-1-15rem-3b14c93); height: var(--geometry-width-1-15rem-3b14c93); border-radius:var(--r-sm); border: var(--geometry-border-1-5px-67792bd) solid var(--muted); flex: 0 0 auto; color: var(--accent-ink); }
.ws-pick__row[aria-selected="true"] .ws-pick__check { background: var(--accent); border-color: var(--accent); }
.ws-pick__thumb { display: grid; place-items: center; width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); border-radius:var(--r-sm); overflow: hidden; background: var(--panel-strong); color: var(--muted); flex: 0 0 auto; }
.ws-pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-dialog input[type="search"] { width: 100%; font: inherit; font-size: var(--typography-font-size-9rem-2ad2e76); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-65rem-bcca6ce); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); }
.ws-dialog textarea + h3, .ws-dialog input + textarea { margin-top: var(--spacing-margin-5rem-ef026cb); }
/* Settings > Memory on a phone: the Add row and the summary's two buttons stay one row each. */
.ws-dialog .ws-row:has(> input[type="text"] + .ws-button) { flex-wrap: nowrap; align-items: stretch; }
.ws-dialog .ws-row:has(> input[type="text"] + .ws-button) > input { flex: 1 1 auto; width: auto; min-width: 0; }
.ws-dialog textarea[maxlength="6000"] + .ws-row-actions { flex-wrap: nowrap; }
.ws-dialog textarea[maxlength="6000"] + .ws-row-actions .ws-button { white-space: nowrap; }
@media (max-width: 520px) {
  .ws-dialog textarea[maxlength="6000"] + .ws-row-actions { gap: var(--spacing-margin-4rem-7fdc8b1); }
  .ws-dialog textarea[maxlength="6000"] + .ws-row-actions .ws-button { padding-inline: var(--spacing-padding-6rem-d0bc70f); gap: var(--spacing-margin-3rem-fb2375d); font-size: var(--typography-font-size-8rem-818b9f7); }
}
.ws-dialog > div > input + textarea { margin-top: var(--spacing-margin-5rem-ef026cb); }

/* images: tabs, albums, trash */
/* Images: one box, one row, one style: the tabs, a divider, then search, saved only and the
   options menu as icons the size of the tabs. An open search widens the box on wide screens
   and takes the tabs' place on phones. */
.ws-imgbar > .ws-page-tools { margin: 0; flex-wrap: nowrap; gap: 0; align-items: stretch; width: fit-content; max-width: 100%; height: var(--geometry-min-height-2-6rem-ee2b419);
  padding: var(--spacing-margin-2rem-4cd30ed); box-sizing: border-box; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); }
.ws-imgbar > .ws-page-tools.is-searching { width: min(100%, var(--geometry-max-width-44rem-6ddb6ba)); }
/* Albums, where the tabs were: a page of its own, a segment of the pill. Archive and Trash say where you are, with the way back. */
.ws-imgalbums { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-margin-4rem-7fdc8b1); height: 100%; padding: 0 var(--spacing-gap-7rem-7eff2a1);
  border: 0; border-radius:var(--r-xs); background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-86rem-d03e951); font-weight: var(--type-weight-control); cursor: pointer; }
.ws-imgalbums:hover, .ws-imgalbums:focus-visible { background: var(--accent-surface); }
.ws-imgalbums > svg, .ws-imgwhere svg { display: block; flex: none; }
.ws-imgwhere { flex: none; display: inline-flex; align-items: center; gap: var(--spacing-margin-2rem-4cd30ed); height: 100%; padding-right: var(--spacing-gap-55rem-f5020a7); font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-imgwhere > .ws-toolbtn { width: var(--geometry-width-2rem-bca5ebd); }
.ws-imgtools { display: flex; align-items: center; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; margin-left: var(--spacing-margin-3rem-fb2375d); padding-left: var(--spacing-margin-3rem-fb2375d); border-left: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-imgtools .ws-page-search, .ws-imgtools .ws-imgtools__close { display: none; }
.is-searching > .ws-imgtools { flex: 1; }
.is-searching .ws-imgtools .ws-page-search { display: flex; flex: 1; min-width: 0; height: 100%; padding: 0 var(--spacing-gap-45rem-ef5b39f); gap: var(--spacing-gap-45rem-ef5b39f); border: 0; border-radius: 0; background: none; box-sizing: border-box; }
.ws-imgtools .ws-page-search input { height: 100%; padding: 0; font-size: var(--typography-font-size-86rem-d03e951); }
/* The x beside the field closes and clears it; no second, built-in clear button. */
.ws-imgtools .ws-page-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.is-searching .ws-imgtools .ws-imgtools__close { display: inline-grid; }
.is-searching .ws-imgtools .ws-imgtools__open { display: none; }
.ws-toolbtn { flex: none; display: inline-grid; place-items: center; width: var(--geometry-width-2-2rem-ac5d0c3); height: 100%; border-radius:var(--r-sm); border: 0; background: none; color: var(--muted); cursor: pointer; }
.ws-toolbtn:hover, .ws-toolbtn:focus-visible { color: var(--ink); }
.ws-toolbtn[aria-pressed="true"], .ws-toolbtn[aria-expanded="true"] { color: var(--ink); background: var(--accent-surface); }
@media (max-width: 640px) {
  .ws-imgbar > .ws-page-tools.is-searching { width: 100%; }
  .is-searching > :is(.ws-imgalbums, .ws-imgwhere), .is-searching .ws-imgtools > :not(.ws-page-search):not(.ws-imgtools__close) { display: none; }
  .is-searching > .ws-imgtools { margin-left: 0; padding-left: 0; border-left: 0; }
}
.ws-page-tools--start { justify-content: flex-start; }
.ws-images .ws-page-tools { margin-bottom: var(--spacing-padding-6rem-d0bc70f); }
.ws-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: var(--spacing-gap-8rem-818b9f7); }
.ws-album { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; animation: ws-rise var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e) both; }
.ws-album__cover { display: grid; place-items: center; aspect-ratio: 1; border-radius:var(--r-sm); overflow: hidden; border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel); color: var(--muted); transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), transform var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-album:hover .ws-album__cover, .ws-album:focus-visible .ws-album__cover { border-color: var(--accent); transform: translateY(-2px); }
.ws-album__cover img { width: 100%; height: 100%; object-fit: cover; }
.ws-album__text { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-album__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-album__text small { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-album__shared { display: inline-flex; align-items: center; gap: var(--spacing-margin-2rem-4cd30ed); color: var(--accent); }
.ws-album-head { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); }
.ws-album-head .ws-back { margin-bottom: 0; }
.ws-album-head__title { font-size: var(--typography-font-size-1-3rem-4f4935e); font-weight: var(--typography-font-weight-620-524148f); letter-spacing: var(--typography-letter-spacing-015em-6d1ba80); margin: 0; text-transform: none !important; letter-spacing: 0 !important; color: var(--ink) !important; }
.ws-tile__days { position: absolute; bottom: .35rem; left: .35rem; padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-margin-4rem-7fdc8b1); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--color-background-0b101bcc-6842f2d); color: var(--color-color-eef2fb-e11b6df); font-size: var(--typography-font-size-7rem-7eff2a1); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-tile.is-dragging { opacity: .4; }
.ws-share { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); margin-top: var(--spacing-padding-6rem-d0bc70f); }
.ws-share input { width: 100%; font: inherit; font-size: var(--typography-font-size-85rem-2e72ebc); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-65rem-bcca6ce); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-dialog .ws-gallery--panel { max-height: var(--geometry-max-height-55vh-3dec42d); overflow-y: auto; }
.ws-page-tools .ws-button { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); }

/* ==== API: keys, activity, setup ==== */
.ws-apipage { gap: var(--spacing-padding-1rem-b8be0c7); }
.ws-apisummary h2 { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-padding-6rem-d0bc70f); }
/* API usage: the same cards and rows as an answer's Response info. */
.ws-apisummary { display: grid; gap: var(--spacing-padding-85rem-2e72ebc); }
.ws-apisummary .ws-info__section { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.ws-apisummary h3 { margin: 0 0 var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-68rem-41c61ff); letter-spacing: var(--typography-letter-spacing-1em-7fa2b88); text-transform: uppercase; color: var(--dim); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-apisummary .ws-info__value strong { font-weight: var(--typography-font-weight-650-2099a9b); }
/* A summary's numbers: one tile each (API Activity's totals, the Black Box's week), the same everywhere. */
.ws-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-tile { display: flex; flex-direction: column; gap: var(--spacing-gap-15rem-e51094a); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-md); background: var(--panel); min-width: 0; }
.ws-tile strong { font-size: var(--typography-font-size-1-35rem-0c0025b); font-weight: var(--typography-font-weight-650-2099a9b); letter-spacing: var(--typography-letter-spacing-02em-a1bf9ed); }
.ws-tile small { color: var(--muted); font-size: var(--typography-font-size-74rem-bc7c01a); }
.ws-tile__label { font-size: var(--typography-font-size-7rem-7eff2a1); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); }
.ws-tile--warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ws-tile--warn strong { color: var(--warn); }
.ws-tile--bad { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.ws-tile--bad strong { color: var(--danger); }
/* A tile that opens the list of what it counts. */
.ws-tile--open { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ws-tile--open:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ws-tile--open:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-outline-2px-7476140); }
/* A chart's title, the same on every page. */
.ws-info__section > .ws-charthead > h3 { margin: 0; font-size: var(--typography-font-size-68rem-41c61ff); letter-spacing: var(--typography-letter-spacing-1em-7fa2b88); text-transform: uppercase; color: var(--dim); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-usage__detail { display: block; margin-top: var(--spacing-padding-1rem-4e95f32); font-size: var(--typography-font-size-76rem-a2a5d3f); font-weight: var(--typography-font-weight-400-26d2286); color: var(--dim); }
.ws-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-1rem-b8be0c7); align-items: start; }
.ws-usage__row { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem 5.4rem; column-gap: var(--spacing-padding-75rem-4cf1798); row-gap: var(--spacing-gap-45rem-ef5b39f); align-items: baseline; padding: var(--spacing-padding-6rem-d0bc70f) 0; font-size: var(--typography-font-size-86rem-d03e951); border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-usage__row:last-child { border-bottom: 0; }
.ws-usage__head { padding: var(--spacing-padding-6rem-d0bc70f) 0 var(--spacing-margin-4rem-7fdc8b1); font-size: var(--typography-font-size-66rem-358ab2c); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); }
.ws-usage__head span { text-align: right; }
.ws-usage__head span:first-child { text-align: left; }
.ws-usage__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-usage__num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.ws-usage__bar { grid-column: 1 / -1; height: var(--geometry-height-3rem-fb2375d); border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.ws-usage__bar i { display: block; height: 100%; min-width: var(--geometry-height-3px-ac33ff9); border-radius: inherit; background: var(--accent); }
.ws-info__card.ws-days__card { padding: var(--spacing-padding-1rem-b8be0c7) var(--spacing-padding-85rem-2e72ebc) var(--spacing-gap-7rem-7eff2a1); }
.ws-days { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); gap: var(--spacing-gap-35rem-1304a2b); align-items: end; }
.ws-days--dense { gap: var(--spacing-gap-2px-7476140); }
.ws-days__col { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); min-width: 0; }
.ws-days__bar { display: flex; flex-direction: column-reverse; width: 100%; max-width: var(--geometry-width-2-2rem-ac5d0c3); height: var(--geometry-height-5rem-8a37694); border-radius:var(--r-xs); overflow: hidden; background: color-mix(in srgb, var(--line) 35%, transparent); }
.ws-days--dense .ws-days__bar { border-radius: var(--geometry-height-3px-ac33ff9); }
.ws-days__col small { max-width: 100%; overflow: hidden; font-size: var(--typography-font-size-68rem-41c61ff); color: var(--dim); white-space: nowrap; }
.ws-days__axis { display: flex; justify-content: space-between; margin-top: var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-68rem-41c61ff); color: var(--dim); }
.ws-days__bar i { display: block; flex: none; }
/* A chart's key: an (i) in its top right corner; the popover shows each color with its name and total. */
/* A chart's title and its legend button, on the line above it. */
.ws-charthead { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-height-2-25rem-e1d2841); }
.ws-info__section .ws-charthead h3 { margin: 0; }
.ws-charthead { margin-bottom: var(--spacing-gap-45rem-ef5b39f); }
.ws-days__key { flex: none; display: block; width: var(--geometry-width-7rem-7eff2a1); height: var(--geometry-width-7rem-7eff2a1); border-radius: var(--geometry-height-3px-ac33ff9); }
.ws-page-tools__note { margin-right: auto; }
/* API Tools: skills, vector stores and containers, in the Response info card style. */
.ws-hosted__intro { margin: 0; }
.ws-hosted { display: grid; gap: var(--spacing-gap-55rem-f5020a7); }
.ws-project .ws-hosted { border: 0; border-radius: 0; padding: 0; background: none; }
.ws-hosted__head { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); min-height: var(--geometry-width-2rem-bca5ebd); }
.ws-hosted__head .ws-group__head { flex: 1; min-width: 0; margin: 0; justify-content: flex-start; }
.ws-hosted__head .ws-group__head svg { color: var(--accent); flex: none; }
.ws-hosted__head .ws-group__head small { margin-left: var(--spacing-margin-2rem-4cd30ed); }
.ws-hosted__card { padding: 0 var(--spacing-padding-85rem-2e72ebc); }
/* A connection card's last buttons (Connect Google, Choose Repositories) keep clear of its edge. */
.ws-hosted__card > .ws-row-actions:last-child, .ws-hosted__card > .ws-store__alt:last-child { padding-bottom: var(--spacing-padding-9rem-2ad2e76); }
.ws-hosted__row { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto 2.2rem; align-items: center; column-gap: var(--spacing-padding-65rem-bcca6ce); padding: var(--spacing-gap-55rem-f5020a7) 0; border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-hosted__row:last-child { border-bottom: 0; }
.ws-hosted__icon { display: grid; place-items: center; width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); border-radius:var(--r-sm); background: var(--accent-surface); color: var(--accent); }
.ws-hosted__main { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; }
button.ws-hosted__main { cursor: pointer; }
button.ws-hosted__main:hover strong { color: var(--accent); }
.ws-hosted__main strong, .ws-hosted__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hosted__main strong { font-size: var(--typography-font-size-9rem-2ad2e76); font-weight: var(--typography-font-weight-650-2099a9b); }
.ws-hosted__main small { font-size: var(--typography-font-size-76rem-a2a5d3f); color: var(--dim); }
.ws-hosted__row .ws-pill { justify-self: end; }
.ws-hosted__id { display: inline-flex; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ws-hosted__id code { display: block; max-width: var(--geometry-min-width-12rem-2f2f4a6); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-hosted__empty { margin: 0; padding: var(--spacing-gap-8rem-818b9f7) 0; font-size: var(--typography-font-size-84rem-a4deb85); color: var(--muted); }
.ws-keygroup { border: 0 !important; padding: 0 !important; background: none !important; }
/* Each library's keys stand apart from the next library's heading. */
.ws-keylist { display: grid; gap: var(--spacing-gap-2-25rem-e1d2841); }
.ws-keygroup .ws-group__head { margin-bottom: var(--spacing-gap-8rem-818b9f7); }
/* A key group inside a section: a small heading over its own cards. */
.ws-keysub { display: grid; gap: var(--spacing-gap-55rem-f5020a7); margin-top: var(--spacing-padding-1-2rem-a7b00d3); }
.ws-group__head + .ws-keysub { margin-top: 0; }
.ws-keysub__head { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); margin: 0; font-size: var(--typography-font-size-74rem-bc7c01a); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--muted); }
.ws-keysub__head svg { color: var(--accent); flex: none; }
.ws-keysub__head small { font-weight: var(--type-weight-control); letter-spacing: 0; }
.ws-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--spacing-gap-7rem-7eff2a1); }
.ws-keycard { position: relative; display: grid; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-9rem-2ad2e76) var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-1-05rem-8c6e288); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); overflow: hidden; animation: ws-rise var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e) both; }
.ws-keycard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--geometry-text-underline-offset-4px-3566015); background: var(--key); }
.ws-keycard.is-paused, .ws-keycard.is-expired { opacity: .78; }
.ws-keycard.is-revoked { opacity: .55; }
.ws-keycard__head { display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); min-width: 0; }
.ws-keycard__dot { width: var(--geometry-width-7rem-7eff2a1); height: var(--geometry-width-7rem-7eff2a1); border-radius: 50%; background: var(--key); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--key) 22%, transparent); }
.ws-keycard__title { flex: 1; min-width: 0; display: grid; }
.ws-keycard__title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-keycard__title code { font-size: var(--typography-font-size-74rem-bc7c01a); color: var(--muted); }
.ws-pill { flex: 0 0 auto; font-size: var(--typography-font-size-7rem-7eff2a1); font-weight: var(--typography-font-weight-700-99ee502); padding: var(--spacing-padding-12rem-ac4570c) var(--spacing-margin-5rem-ef026cb); border-radius: var(--geometry-border-radius-999px-088f244); border: var(--geometry-border-1px-93e2062) solid currentColor; }
.ws-pill--active { color: var(--ok); }
.ws-pill--paused { color: var(--temp, var(--warn)); }
.ws-pill--expired, .ws-pill--revoked { color: var(--red); }
.ws-keycard__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-8rem-818b9f7); font-size: var(--typography-font-size-78rem-6850684); }
.ws-agentchips { display: inline-flex; }
.ws-agentchips img { width: var(--geometry-width-1-45rem-4556fac); height: var(--geometry-width-1-45rem-4556fac); border-radius: 50%; border: var(--geometry-outline-2px-7476140) solid var(--agent); background: var(--paper); margin-right: var(--spacing-margin-3rem-5eade97); }
/* Round agent avatars keep their shape: square box, never squeezed by a flex row, image cropped to fit. */
.ws-agent-pick img, .ws-menu img, .ws-agentchips img, .ws-agentpick img, .ws-log__agent img { flex: none; aspect-ratio: 1; object-fit: cover; box-sizing: border-box; }
.ws-agentchips img:last-child { margin-right: 0; }
.ws-keycard__numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-keycard__numbers span { display: grid; min-width: 0; }
.ws-keycard__numbers strong { font-variant-numeric: tabular-nums; }
.ws-keycard__numbers small { font-size: var(--typography-font-size-7rem-7eff2a1); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-meters { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); margin-top: var(--spacing-gap-55rem-f5020a7); }
.ws-meter__row { display: flex; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-76rem-a2a5d3f); margin-bottom: var(--spacing-margin-2rem-4cd30ed); }
.ws-keycard__nolimit { font-size: var(--typography-font-size-76rem-a2a5d3f); margin-top: var(--spacing-gap-45rem-ef5b39f); }
/* Iris's own key: what runs on it. */
.ws-keycard__role { display: flex; gap: var(--spacing-gap-45rem-ef5b39f); align-items: center; margin: 0; font-size: var(--typography-font-size-78rem-6850684); color: var(--muted); }
.ws-keycard__role svg { flex: none; display: block; color: var(--key); }
.ws-meters > small { font-size: var(--typography-font-size-7rem-7eff2a1); }
.ws-keycard__foot { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-apiempty { display: grid; justify-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-padding-2rem-bca5ebd) var(--spacing-padding-1rem-b8be0c7); color: var(--muted); }
.ws-apiempty h2 { color: var(--ink); text-transform: none !important; letter-spacing: 0 !important; font-size: var(--typography-font-size-1-2rem-a7b00d3) !important; }
.ws-keyform { display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-keyform h3 { margin-bottom: 0; }
.ws-keyform__basics { display: grid; gap: var(--spacing-padding-1rem-b8be0c7); margin-bottom: var(--spacing-margin-5rem-ef026cb); }
.ws-keyform__basics .ws-picker__colors { margin-top: var(--spacing-gap-15rem-e51094a); gap: var(--spacing-margin-4rem-7fdc8b1); overflow: visible; padding-bottom: 0; }
/* All colors on one row at any width: each swatch shrinks with the row and stays round. */
.ws-keyform__basics .ws-swatch { flex: 1 1 0; min-width: 0; max-width: var(--geometry-width-2-1rem-f351383); width: auto; height: auto; aspect-ratio: 1; }
.ws-grouprow { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-grouprow select, .ws-grouprow input { flex: 1; min-width: 0; }
.ws-field small { font-size: var(--typography-font-size-74rem-bc7c01a); }
.ws-agentpicks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-agentpick { display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-agentpick img { width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); border-radius: 50%; }
.ws-agentpick span { display: grid; flex: 1; min-width: 0; }
.ws-agentpick small { color: var(--muted); font-size: var(--typography-font-size-72rem-2a7309a); }
.ws-agentpick[aria-pressed="true"] { border-color: var(--agent); background: color-mix(in srgb, var(--agent) 12%, var(--paper)); }
.ws-agentpick[aria-pressed="true"] > svg { color: var(--agent); }
.ws-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: var(--spacing-margin-5rem-ef026cb); }
.ws-field { display: grid; gap: var(--spacing-padding-25rem-1677828); font-size: var(--typography-font-size-8rem-818b9f7); color: var(--muted); }
.ws-field input, .ws-field select, .ws-field textarea, .ws-filters select { width: 100%; font: inherit; font-size: var(--typography-font-size-88rem-39c360b); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-field--wide { grid-column: 1 / -1; }
.ws-keywarn { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: center; padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-75rem-4cf1798); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--temp, var(--warn)) 55%, transparent); background: color-mix(in srgb, var(--temp, var(--warn)) 10%, transparent); color: var(--ink); font-size: var(--typography-font-size-86rem-d03e951); margin: 0 0 var(--spacing-padding-6rem-d0bc70f); }
.ws-keywarn svg { color: var(--temp, var(--warn)); flex: 0 0 auto; display: block; }
.ws-copyrow { display: flex; gap: var(--spacing-margin-4rem-7fdc8b1); align-items: center; min-width: 0; }
/* A field beside its Copy button gives way first, however large the text (min-content would hold it at its size). */
.ws-copyrow > :is(input, select) { width: 0; flex: 1 1 auto; min-width: 0; }
.ws-copyrow input { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: var(--typography-font-size-82rem-8da80e1); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-65rem-bcca6ce); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-secret { border-color: var(--accent) !important; }
.ws-filters { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-45rem-ef5b39f); align-items: center; }
.ws-filters .ws-page-search { flex: 1 1 16rem; }
.ws-filters select { width: auto; flex: 0 1 auto; max-width: var(--geometry-min-width-12rem-2f2f4a6); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-margin-5rem-ef026cb); border-radius: var(--geometry-border-radius-999px-088f244); font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-logs__count { margin: 0; }
.ws-logs { display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-log { border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); overflow: hidden; animation: ws-rise var(--dur-control) var(--motion-transition-ease-914ff41) both; }
.ws-log.is-failed { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.ws-log.is-open { border-color: var(--accent); }
.ws-log__head { display: grid; grid-template-columns: 3.6rem 5.4rem minmax(6rem, 1fr) minmax(7rem, 1.3fr) minmax(5rem, .9fr) 4.6rem 4.6rem 4.8rem 1rem; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f);
  width: 100%; padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-gap-7rem-7eff2a1); border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-82rem-8da80e1); text-align: left; cursor: pointer; }
.ws-log__head:hover { background: var(--panel-strong); }
.ws-log__head > svg:last-child, .ws-call__head > svg:last-child { color: var(--muted); transform: rotate(-90deg); transition: transform var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-log__head[aria-expanded="true"] > svg:last-child, .ws-call__head[aria-expanded="true"] > svg:last-child { transform: none; }
.ws-log__head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-log__status { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); font-variant-numeric: tabular-nums; font-weight: var(--typography-font-weight-700-99ee502); }
.ws-log__status i { width: var(--geometry-height-55rem-f5020a7); height: var(--geometry-height-55rem-f5020a7); border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.ws-log__status.is-error i { background: var(--red); } .ws-log__status.is-error { color: var(--red); }
.ws-log__status.is-cancelled i { background: var(--temp, var(--warn)); }
.ws-log__time { display: grid; font-variant-numeric: tabular-nums; }
.ws-log__time small, .ws-log__num small, .ws-log__agent small { color: var(--muted); font-size: var(--typography-font-size-68rem-41c61ff); overflow: hidden; text-overflow: ellipsis; }
.ws-log__key { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-log__key i { width: var(--geometry-height-55rem-f5020a7); height: var(--geometry-height-55rem-f5020a7); border-radius: 50%; flex: 0 0 auto; }
.ws-log__key span { overflow: hidden; text-overflow: ellipsis; }
.ws-log__agent { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-log__agent img { width: var(--geometry-min-height-1-4rem-2569574); height: var(--geometry-min-height-1-4rem-2569574); border-radius: 50%; flex: 0 0 auto; }
.ws-log__agent > svg { width: var(--geometry-min-height-1-4rem-2569574); height: var(--geometry-min-height-1-4rem-2569574); flex: 0 0 auto; padding: var(--spacing-margin-2rem-4cd30ed); border-radius: 50%; background: var(--accent-surface); color: var(--accent); }
.ws-log__agent span { display: grid; min-width: 0; }
.ws-log__agent strong, .ws-log__agent small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-log__client { color: var(--muted); }
.ws-log__meta { display: none; color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); font-variant-numeric: tabular-nums; }
.ws-log__num { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.ws-log__detail { padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-9rem-2ad2e76) var(--spacing-padding-9rem-2ad2e76); border-top: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--paper); display: grid; gap: var(--spacing-padding-6rem-d0bc70f); animation: ws-fade var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-log__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-padding-1-2rem-a7b00d3); }
.ws-log__section h3 { margin: var(--spacing-gap-7rem-7eff2a1) 0 var(--spacing-gap-35rem-1304a2b); }
.ws-log__section .ws-facts { margin: 0; font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-log__error { display: flex; gap: var(--spacing-gap-45rem-ef5b39f); align-items: center; margin: var(--spacing-margin-5rem-ef026cb) 0 0; padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-7rem-7eff2a1); border-radius:var(--r-sm); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); font-size: var(--typography-font-size-85rem-2e72ebc); }
.ws-log__error svg { flex: 0 0 auto; display: block; }
.ws-json { margin: 0; max-height: var(--geometry-max-width-18rem-6796582); overflow: auto; padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-7rem-7eff2a1); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--code-bg); color: var(--code-ink); font-size: var(--typography-font-size-76rem-a2a5d3f); line-height: var(--type-line-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-transcript { display: grid; gap: var(--spacing-gap-35rem-1304a2b); max-height: var(--geometry-max-height-28rem-151008a); overflow-y: auto; }
/* Generated images in a log: small previews with the original's type, size and dimensions. */
.ws-logimages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-logimages figure { margin: 0; display: grid; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-logimages img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--paper); }
.ws-logimages figcaption { font-size: var(--typography-font-size-72rem-2a7309a); color: var(--muted); }
.ws-turn { position: relative; display: grid; gap: var(--spacing-margin-2rem-4cd30ed); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-65rem-bcca6ce); border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel); }
.ws-turn__role { display: flex; align-items: center; min-height: var(--geometry-min-height-1-4rem-2569574); padding-right: var(--spacing-padding-2rem-bca5ebd); font-size: var(--typography-font-size-66rem-358ab2c); font-weight: var(--typography-font-weight-800-1a1cf79); letter-spacing: var(--typography-letter-spacing-1em-7fa2b88); text-transform: uppercase; color: var(--dim); }
.ws-turn--system .ws-turn__role, .ws-turn--instructions .ws-turn__role { color: var(--temp, var(--warn)); } .ws-turn--assistant .ws-turn__role { color: var(--accent); } .ws-turn--tool .ws-turn__role { color: var(--info); }
.ws-turn__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--typography-font-size-84rem-a4deb85); line-height: var(--type-line-body); max-height: var(--geometry-max-height-16rem-868f8b1); overflow-y: auto; }
/* Each box in a log copies its whole content from its top-right corner, clear
   of the text (a turn's role line, a JSON box's right padding). */
.ws-copybox { position: relative; min-width: 0; }
.ws-copybox > .ws-json { padding-right: var(--spacing-padding-2-6rem-ee2b419); }
.ws-boxcopy { position: absolute; top: .3rem; right: .3rem; width: var(--geometry-min-height-1-75rem-672ca1c); height: var(--geometry-min-height-1-75rem-672ca1c); border-radius: var(--geometry-width-7px-a15202e); }
.ws-copybox > .ws-boxcopy { right: .7rem; color: var(--code-dim); }
.ws-copybox > .ws-boxcopy:hover, .ws-copybox > .ws-boxcopy:focus-visible { color: var(--code-ink); background: var(--code-line); }
/* Where the log kept only the start of a long text. */
.ws-fncalls ul { list-style: none; margin: 0 0 var(--spacing-margin-4rem-7fdc8b1); padding: 0; display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-fncalls li { display: grid; gap: var(--spacing-padding-25rem-1677828); min-width: 0; padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); background: var(--paper); }
.ws-fncalls__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-fncalls__head code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--type-weight-control); }
.ws-fncalls__args { font-size: var(--typography-font-size-76rem-a2a5d3f); color: var(--muted); overflow-wrap: anywhere; }
.ws-fncalls__error { color: var(--red); overflow-wrap: anywhere; }
.ws-log__cut { display: flex; gap: var(--spacing-margin-4rem-7fdc8b1); align-items: center; margin: 0; color: var(--amber); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-log__cut svg { flex: 0 0 auto; display: block; }
.ws-log__detail details summary { cursor: pointer; font-size: var(--typography-font-size-8rem-818b9f7); color: var(--muted); margin: var(--spacing-gap-35rem-1304a2b) 0; }
.ws-row-actions--center { justify-content: center; }
/* API, Connect: the quick start, one app's steps, the developer pages. */
.ws-connect { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-padding-1rem-b8be0c7); }
.ws-connect__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-gap-7rem-7eff2a1); padding: var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.ws-connect__card h2 { margin: 0; }
.ws-connect__card > p { margin: 0; }
.ws-connect__field { display: grid; gap: var(--spacing-margin-3rem-fb2375d); min-width: 0; }
.ws-connect__label { font-size: var(--typography-font-size-76rem-a2a5d3f); font-weight: var(--type-weight-control); color: var(--muted); }
.ws-connect__field select { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-size: var(--typography-font-size-82rem-8da80e1); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-connect__key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-8rem-818b9f7); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-connect__choices { flex-wrap: wrap; justify-self: start; max-width: 100%; }
.ws-connect__steps { margin: 0; padding-left: var(--spacing-padding-1-2rem-a7b00d3); display: grid; gap: var(--spacing-gap-35rem-1304a2b); font-size: var(--typography-font-size-86rem-d03e951); overflow-wrap: anywhere; }
.ws-connect__links { flex-wrap: wrap; }
.ws-codeblock { border: var(--geometry-border-1px-93e2062) solid var(--code-line); border-radius:var(--r-sm); overflow: hidden; background: var(--code-bg); }
.ws-codeblock__head { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-4rem-7fdc8b1) var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-8rem-818b9f7); background: var(--code-head); border-bottom: var(--geometry-border-1px-93e2062) solid var(--code-line); color: var(--code-dim); font-size: var(--typography-font-size-78rem-6850684); }
.ws-codeblock__head .ws-button { background: none; color: var(--code-ink); border-color: var(--code-line); }
.ws-codeblock pre { margin: 0; padding: var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-9rem-2ad2e76); overflow-x: auto; color: var(--code-ink); font-size: var(--typography-font-size-8rem-818b9f7); line-height: var(--typography-line-height-1-55-9e0b4cf); }
/* Narrow screens: a log row becomes a two-line card. */
@media (max-width: 900px) {
  /* Line one: status, model, credits. Line two: when, key, app, tokens and
     latency as one quiet summary (the columns don't fit a phone). */
  .ws-log__head { grid-template-columns: auto minmax(0, 1fr) auto 1rem; grid-template-areas: "status agent credits chev" "meta meta meta chev"; row-gap: var(--spacing-gap-35rem-1304a2b); column-gap: var(--spacing-gap-7rem-7eff2a1); }
  .ws-log__status { grid-area: status; } .ws-log__agent { grid-area: agent; }
  .ws-log__num:nth-of-type(7) { grid-area: credits; } .ws-log__meta { grid-area: meta; display: block; }
  .ws-log__head > svg { grid-area: chev; }
  .ws-log__time, .ws-log__key, .ws-log__client, .ws-log__num:nth-of-type(6), .ws-log__num:nth-of-type(8) { display: none; }
  .ws-keycard__numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-filters select { flex: 1 1 calc(50% - .45rem); max-width: none; }
}
.ws-log__section h3 { font-size: var(--typography-font-size-68rem-41c61ff); letter-spacing: var(--typography-letter-spacing-1em-7fa2b88); text-transform: uppercase; color: var(--dim); margin: var(--spacing-gap-8rem-818b9f7) 0 var(--spacing-margin-4rem-7fdc8b1); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-project .ws-log__section { border: 0; padding: 0; background: none; border-radius: 0; }
.ws-project .ws-log__detail details, .ws-project .ws-log__detail section { min-width: 0; }
.ws-bar__place .ws-tempbadge { margin-left: 0; }

/* On/off items in a menu: a small switch at the end. */
.ws-menu button[role="menuitemcheckbox"] > span:not(.ws-menuswitch) { flex: 1; }
.ws-menuswitch { position: relative; flex: none; width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-width-1-1rem-14af91b); border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-menuswitch::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: var(--geometry-width-8rem-818b9f7); height: var(--geometry-width-8rem-818b9f7); border-radius: 50%; background: var(--knob); box-shadow: var(--knob-shadow); transition: transform var(--dur-fast) var(--ease-out); }
.ws-menu [aria-checked="true"] .ws-menuswitch { background: var(--accent); }
.ws-menu [aria-checked="true"] .ws-menuswitch::after { transform: translateX(.8rem); }
/* Attach, Tools and Modes (the + button): a sheet that fits its content; Camera, Photos and Files as tiles with the icon
   centered over the word; then rows, an icon in a circle, a title over a line of detail, and a chevron or a switch. */
.ws-sheet.ws-sheet--fit { height: auto; max-height: min(var(--geometry-max-height-92dvh-8f24afb), var(--geometry-max-width-52rem-94b2e70)); }
.ws-sheet.ws-sheet--fit .ws-sheet__body { padding-bottom: calc(var(--spacing-padding-left-1-1rem-14af91b) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); }
.ws-addtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-padding-6rem-d0bc70f); margin: var(--spacing-padding-6rem-d0bc70f) 0 var(--spacing-padding-75rem-4cf1798); }
.ws-addtiles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-addtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-gap-45rem-ef5b39f); min-height: 68px; padding: 8px; font-size:14px; line-height:20px; gap:4px;
  font: inherit; font-size: var(--typography-font-size-95rem-adb8a86); color: var(--ink); background: var(--panel); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg, var(--geometry-width-16px-6793164)); cursor: pointer; }
.ws-addtile svg { display: block; width:24px; height:24px; color: var(--muted); }
.ws-addtile:active { transform: scale(.97); }
.ws-addrows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ws-addrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 64px; padding: 8px 3px;
  font: inherit; font-size: clamp(12px, 3.2vw, 14px); line-height: 18px; text-align: center; white-space: nowrap; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); cursor: pointer;
  transition: color var(--dur-page-out), background-color var(--dur-page-out), border-color var(--dur-page-out); }
.ws-addrow__icon { flex: none; display: grid; place-items: center; color: var(--muted); }
.ws-addrow__icon svg { display: block; }
.ws-addrow__text { min-width: 0; display: block; }
.ws-addrow__text strong { font-weight: var(--type-weight-control); }
.ws-addrow__text small { color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-addrow__end { flex: none; display: grid; place-items: center; color: var(--muted); }
.ws-addrow__end svg { display: block; }
.ws-addrow[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ws-addrow[aria-pressed="true"] .ws-addrow__icon { color: inherit; }
.ws-addrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ws-plus, .ws-agent-pick { touch-action: pan-x; }
.ws-sheet-launching[open] { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ws-addrow, .ws-sheet--fit[open], .ws-dialog[data-fit][open] { transition: none; animation: none; }
}
/* The model box's Effort and Permissions rows, and the pages they open: each choice's mark in its color, in a soft
   circle of it; the name over what it does; a tick on the current one. */
.ws-pickopt--setting { --tint: var(--accent); }
.ws-pickopt__badge { flex: none; display: grid; place-items: center; width: var(--geometry-width-2-3rem-4a13ff0); height: var(--geometry-width-2-3rem-4a13ff0); border-radius: 50%; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent); }
.ws-pickopt__badge svg { display: block; }
.ws-choices__lead { margin: 0 0 var(--spacing-gap-7rem-7eff2a1); font-size: var(--typography-font-size-88rem-39c360b); }
.ws-choices { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-choice { --tint: var(--accent); display: flex; align-items: center; gap: var(--spacing-padding-85rem-2e72ebc); width: 100%; padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-85rem-2e72ebc); font: inherit; text-align: left;
  color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); border: var(--geometry-border-1px-93e2062) solid transparent; border-radius: var(--r-lg, var(--geometry-width-16px-6793164)); cursor: pointer; }
.ws-choice[aria-checked="true"] { border-color: color-mix(in srgb, var(--tint) 55%, transparent); background: color-mix(in srgb, var(--tint) 9%, transparent); }
.ws-choice__mark { flex: none; display: grid; place-items: center; width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); border-radius: 50%; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent); }
.ws-choice__mark svg { display: block; }
.ws-choice__text { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--spacing-padding-12rem-ac4570c); }
.ws-choice__text strong { font-weight: var(--type-weight-control); }
.ws-choice__text small { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-choice__tick { flex: none; display: grid; place-items: center; width: var(--geometry-min-height-1-4rem-2569574); color: var(--tint); }
.ws-choice__tick svg { display: block; }
.ws-choice:active { transform: scale(.985); }
/* Effort's mark: four rising bars, the lit ones in its color. */
.ws-level { display: flex; align-items: flex-end; gap: var(--spacing-gap-2px-7476140); height: var(--geometry-border-radius-14px-09f9739); }
.ws-level i { display: block; width: var(--geometry-height-3px-ac33ff9); border-radius: var(--geometry-outline-2px-7476140); background: color-mix(in srgb, currentColor 28%, transparent); }
.ws-level i:nth-child(1) { height: var(--geometry-border-radius-5px-3772b3a); } .ws-level i:nth-child(2) { height: var(--geometry-border-radius-8px-eb4ebe4); } .ws-level i:nth-child(3) { height: var(--geometry-border-radius-11px-6d3b65a); } .ws-level i:nth-child(4) { height: var(--geometry-border-radius-14px-09f9739); }
.ws-level i.is-on { background: currentColor; }
@media (prefers-reduced-motion: reduce) { .ws-menuswitch, .ws-menuswitch::after { transition: none; } }
/* Rail tools: folded into one button above the avatar; open, they grow upward. */
.ws-rail__drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-drawer) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-rail__drawer[data-open="true"] { grid-template-rows: 1fr; }
.ws-rail__drawer-inner { min-height: 0; width: var(--rail-w); overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); padding: 0 var(--spacing-margin-2rem-4cd30ed); }
.ws-rail__drawer-inner > * { opacity: 0; transform: translateY(.6rem) scale(.9); transition: opacity var(--dur-control) var(--motion-transition-ease-914ff41), transform var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > * { opacity: 1; transform: none; }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(1) { transition-delay: var(--motion-transition-delay-20ms-d14fda3); }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(2) { transition-delay: var(--motion-transition-delay-50ms-adf7aad); }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(3) { transition-delay: var(--motion-transition-delay-80ms-b21be29); }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(4) { transition-delay: var(--motion-transition-delay-110ms-006aa0c); }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner > :nth-last-child(5) { transition-delay: var(--motion-animation-delay-140ms-9202e73); }
.ws-rail__drawer[data-open="false"] .ws-rail__drawer-inner > * { visibility: hidden; transition: opacity var(--dur-micro) var(--motion-transition-ease-914ff41), transform var(--dur-fast) var(--motion-transition-ease-914ff41), visibility 0s var(--dur-page-out); }
.ws-rail__drawer[data-open="true"] .ws-rail__drawer-inner { padding-bottom: var(--spacing-gap-45rem-ef5b39f); }
.ws-rail__toggle[aria-expanded="true"], .ws-rail .ws-me[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ws-rail .ws-me[aria-expanded="true"] { border-color: var(--line); box-shadow: none; }
.ws-rail__toggle.is-current:not([aria-expanded="true"]) { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ws-rail__drawer, .ws-rail__drawer-inner > * { transition: none !important; } }
/* The last row of search results: switch to the archive and Trash and back. */
.ws-searchui__more { display: flex; align-items: center; justify-content: center; gap: var(--spacing-gap-45rem-ef5b39f); width: 100%; margin-top: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-padding-6rem-d0bc70f); border: var(--geometry-border-1px-93e2062) dashed var(--line); border-radius:var(--r-sm);
  background: none; color: var(--muted); font: inherit; font-size: var(--typography-font-size-85rem-2e72ebc); cursor: pointer; }
.ws-searchui__more:hover, .ws-searchui__more:focus-visible { color: var(--ink); border-color: var(--muted); }
/* A new chat: blank. Search can be pulled down over it (initPullToSearch). */
.ws-blank { flex: 1; min-height: 100%; }
.ws-searchui.is-pulled[open] { animation: none; }
.ws-searchui.is-pulled[open]::backdrop { animation: none; }
.ws-searchui::backdrop { opacity: var(--sheet-p, 1); }
/* Only the backdrop reads --sheet-p, set every frame of a pull: its own value on the dialog's children keeps the change
   from restyling everything inside it each frame (measured: ~100 elements a frame). */
.ws-searchui > * { --sheet-p: 1; }
.ws-searchui__clear[hidden] { display: none; }

/* Sources: a chip at the end of a cited paragraph, one pill under the answer,
   and the sheet that lists them. */
.ws-siteicon { flex: none; border-radius: var(--geometry-text-underline-offset-4px-3566015); object-fit: contain; background: var(--color-background-fff-e08de71); }
.ws-siteicon--letter { display: inline-grid; place-items: center; background: var(--accent-surface); color: var(--accent); font: 800 var(--typography-font-size-62rem-936c74c)/1 var(--font-ui); border-radius: var(--geometry-text-underline-offset-4px-3566015); }
/* The chip sits inside the line (its negative margins keep the line's height)
   and stays with the sentence's last word (.ws-cite-glue). */
.ws-cite { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); max-width: var(--geometry-min-height-10rem-04d0579); margin: var(--spacing-margin-3rem-5eade97) 0 var(--spacing-margin-3rem-5eade97) var(--spacing-gap-15rem-e51094a); padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-padding-38rem-2277968) var(--spacing-padding-1rem-4e95f32) var(--spacing-padding-22rem-7986b48); border-radius: var(--geometry-border-radius-999px-088f244);
  border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel-strong); color: var(--muted); font: 600 var(--typography-font-size-66rem-358ab2c)/1.1 var(--font-ui); vertical-align: middle; cursor: pointer; }
.ws-cite-glue { white-space: nowrap; }
.ws-cite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-cite small { color: var(--dim); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-cite:hover, .ws-cite:focus-visible { color: var(--ink); border-color: var(--muted); }
.ws-sourcepill { display: inline-flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin-top: var(--spacing-gap-55rem-f5020a7); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-75rem-4cf1798) var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-4rem-7fdc8b1); border-radius: var(--geometry-border-radius-999px-088f244); border: var(--geometry-border-1px-93e2062) solid var(--line);
  background: var(--panel); color: var(--ink); font: 600 var(--typography-font-size-82rem-8da80e1)/1.4 var(--font-ui); cursor: pointer; }
.ws-sourcepill small { color: var(--dim); }
.ws-sourcepill:hover, .ws-sourcepill:focus-visible { border-color: var(--muted); }
.ws-sourcepill__icons { display: inline-flex; }
.ws-sourcepill__icons > * { border: var(--geometry-outline-2px-7476140) solid var(--panel); border-radius: 50%; box-sizing: content-box; }
.ws-sourcepill__icons > * + * { margin-left: var(--spacing-margin-left-6px-fef3742); }
.ws-sheet { position: fixed; inset: auto 0 0 0; width: min(100%, var(--geometry-max-width-44rem-6ddb6ba)); height: min(var(--geometry-max-height-92dvh-8f24afb), var(--geometry-max-width-52rem-94b2e70)); max-height: none; max-width: none; margin: 0 auto; padding: 0;
  border: var(--geometry-border-1px-93e2062) solid var(--line); border-bottom: 0; border-radius: var(--geometry-width-18px-ab98c04) var(--geometry-width-18px-ab98c04) 0 0; background: var(--panel); color: var(--ink);
  display: flex; flex-direction: column; transform: translateY(42%); transition: transform var(--motion-transition-280ms-5bd7b93) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-sheet:not([open]) { display: none; }
.ws-sheet[data-state="full"] { transform: none; }
.ws-sheet[open] { animation: ws-sheet-in var(--motion-transition-280ms-5bd7b93) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-sheet::backdrop { background: rgb(2 6 17 / .55); animation: ws-fade var(--dur-page-out) var(--motion-transition-ease-914ff41); }
@keyframes ws-sheet-in { from { translate: 0 60%; } }
.ws-sheet__grip { display: grid; place-items: center; padding: var(--spacing-gap-55rem-f5020a7) 0 var(--spacing-margin-2rem-4cd30ed); touch-action: none; }
.ws-sheet__grip span { width: var(--geometry-min-height-2-6rem-ee2b419); height: var(--geometry-height-3rem-fb2375d); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--line); }
.ws-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--spacing-padding-6rem-d0bc70f) var(--spacing-margin-4rem-7fdc8b1) var(--spacing-padding-left-1-1rem-14af91b); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); touch-action: none; }
.ws-sheet__head h2 { margin: 0; font-size: var(--typography-font-size-95rem-adb8a86); }
.ws-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-left-1-1rem-14af91b) calc(42% + var(--spacing-padding-1rem-b8be0c7) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); }
.ws-sheet[data-state="full"] .ws-sheet__body { padding-bottom: calc(var(--spacing-padding-1rem-b8be0c7) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); }
.ws-sheet__label { margin: var(--spacing-padding-1rem-b8be0c7) 0 var(--spacing-margin-3rem-fb2375d); font-size: var(--typography-font-size-7rem-7eff2a1); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); }
.ws-sheet__list { display: grid; }
.ws-sourcerow { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); padding: var(--spacing-gap-8rem-818b9f7) 0; border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); color: var(--ink); text-decoration: none; }
.ws-sourcerow:last-child { border-bottom: 0; }
.ws-sourcerow__site { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-sourcerow strong { font-size: var(--typography-font-size-95rem-adb8a86); line-height: var(--typography-line-height-1-35-98737cf); }
.ws-sourcerow small { color: var(--dim); font-size: var(--typography-font-size-78rem-6850684); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sourcerow:hover strong, .ws-sourcerow:focus-visible strong { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ws-sheet, .ws-sheet[open] { transition: none; animation: none; } }

/* Phones: the avatar sits beside the name only; the message starts on its own line below them and runs the full
   width, with room to breathe (wrapping its first lines beside the avatar crowded them against it, and a list's
   numbers hung into the avatar's space). */
@media (max-width: 700px) {
  .ws-messages { --page-x: .85rem; }
  .ws-msg { display: block; }
  .ws-msg::after { content: ""; display: block; clear: both; }
  .ws-msg > .ws-msg__avatar { float: left; margin: 0 var(--spacing-gap-7rem-7eff2a1) 0 0; }
  .ws-msg > div:not(.ws-msg__avatar) { display: block; }
  .ws-msg__head { align-items: center; align-content: center; }
  .ws-msg > div > :not(.ws-msg__head), .ws-msg__body > * { clear: left; }
  .ws-msg__head + * { margin-top: var(--spacing-margin-5rem-ef026cb); }
}
/* Drag and arrange. Individual transform properties (rotate, scale, translate)
   keep the wiggle, the lift and the slide of neighbours from overriding each
   other or a row's own transform. */
.ws-nav img { -webkit-user-drag: none; }
/* The arrange bar covers the sidebar's header instead of pushing the list
   down: nothing may move under the finger as a drag begins. (On tablets the
   sidebar is fixed, which holds the bar already; relative there undid the
   slide-over and left its buttons over the chat.) */
.ws-side { position: relative; }
.ws-arrange:not([hidden]) { position: absolute; z-index: 6; top: calc(var(--drawer-top) + .35rem); left: .5rem; right: .5rem; display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel-strong); box-shadow: var(--shadow); font-size: var(--typography-font-size-8rem-818b9f7); line-height: var(--typography-line-height-1-3-9c193c6); color: var(--muted); }
.ws-arrange span { flex: 1; min-width: 0; }
.ws-arrange .ws-button { flex: 0 0 auto; padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-padding-9rem-2ad2e76); }
/* Several chats at once: the bar takes the sidebar header's place, below a phone's or tablet's status bar (the header
   row comes back with Done), as the Images page's selection bar does; and a check on each row that can be picked. */
.ws-selecting .ws-nav__head { display: none; }
.ws-chatpicks:not([hidden]) { display: flex; align-items: center; gap: var(--spacing-margin-2rem-4cd30ed); margin: var(--spacing-gap-55rem-f5020a7) var(--spacing-margin-5rem-ef026cb) var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-margin-3rem-fb2375d); border: var(--geometry-border-1px-93e2062) solid var(--accent);
  border-radius:var(--r-sm); background: var(--panel-strong); color: var(--ink); font-size: var(--typography-font-size-8rem-818b9f7); font-weight: var(--type-weight-control); line-height: var(--typography-line-height-1-3-9c193c6); animation: ws-rise var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-chatpicks [data-select-count] { flex: 1 1 auto; min-width: var(--geometry-min-height-4-5rem-41dca9e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-chatpicks .ws-iconbtn { flex: none; }
.ws-chatpicks .ws-iconbtn:disabled { opacity: .4; cursor: default; }
.ws-row__pick { display: none; }
.ws-selecting [data-chat-row] .ws-row__pick { display: grid; margin-left: auto; color: transparent; }
.ws-row__pick svg { display: block; flex: none; }
.ws-selecting [data-chat-row][aria-pressed="true"] { background: var(--accent-surface); }
.ws-selecting [data-chat-row][aria-pressed="true"] .ws-row__pick { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ws-selecting [data-chat-row][aria-disabled="true"] { opacity: .45; cursor: default; }
.ws-selecting [data-chat-row][data-drag] { cursor: pointer; }
.ws-arranging .ws-nav [data-drag] { animation: ws-wiggle var(--dur-major) var(--motion-animation-ease-in-out-16c2539) infinite alternate; }
.ws-arranging .ws-nav .ws-row[data-drag] { animation-name: ws-wiggle-row; }
.ws-arranging .ws-nav li:nth-child(2n) > [data-drag], .ws-arranging .ws-nav li:nth-child(2n) .ws-folder__head > [data-drag], .ws-arranging .ws-rail__libraries > [data-drag]:nth-child(2n) { animation-delay: var(--motion-animation-delay-150ms-8d48da7); }
@keyframes ws-wiggle { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@keyframes ws-wiggle-row { from { rotate: -.6deg; } to { rotate: .6deg; } }
.ws-lift { scale: 1.04; transition: scale var(--dur-micro) var(--motion-transition-ease-914ff41); }
.ws-dragging { opacity: .3; }
.ws-dragging [data-drag] { animation: none !important; }
.ws-ghost, :is(.ws-tree, .ws-rail) .ws-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; scale: 1.06; opacity: .97; animation: none !important; box-shadow: 0 14px 34px rgb(0 0 0 / .5); background: var(--panel-strong); border-radius:var(--r-sm); }
.ws-is-dragging, .ws-is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) {
  .ws-arranging .ws-nav [data-drag] { animation: none; outline: 1px dashed var(--muted); outline-offset: -3px; }
}

/* A chat answering now: a softly glowing green dot. An answer you haven't
   seen yet: a blue dot. Read chats have none. */
.ws-dot { flex: 0 0 auto; width: var(--geometry-width-5rem-ef026cb); height: var(--geometry-width-5rem-ef026cb); border-radius: 50%; margin-inline: var(--spacing-gap-35rem-1304a2b) var(--spacing-padding-1rem-4e95f32); }
.ws-dot--active { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: ws-dot-glow var(--motion-animation-1600ms-aa635fb) var(--motion-animation-ease-in-out-16c2539) infinite; }
.ws-dot--unread { background: var(--info); }
@keyframes ws-dot-glow { 0%, 100% { box-shadow: 0 0 2px 1px color-mix(in srgb, var(--ok) 40%, transparent); } 50% { box-shadow: 0 0 8px 3px color-mix(in srgb, var(--ok) 65%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ws-dot--active { animation: none; box-shadow: 0 0 6px 2px color-mix(in srgb, var(--ok) 50%, transparent); } }

/* What a run searches and reads, as it happens. */
.ws-research { display: grid; gap: var(--spacing-margin-3rem-fb2375d); margin: var(--spacing-padding-1rem-4e95f32) 0 var(--spacing-margin-4rem-7fdc8b1); font-size: var(--typography-font-size-84rem-a4deb85); color: var(--muted); }
.ws-research__step { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); margin: 0; min-width: 0; }
.ws-research__step > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-research__step.is-current { color: var(--ink); }
.ws-research__step.is-current > span::after { content: ""; display: inline-block; width: var(--geometry-width-1-2em-8cf0ca3); text-align: left; animation: ws-research-dots var(--motion-animation-1200ms-f8ce733) steps(4, end) infinite; }
@keyframes ws-research-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.ws-research__step--ask .ws-research__agent { width: var(--geometry-width-18px-ab98c04); height: var(--geometry-width-18px-ab98c04); flex: none; border-radius: 50%; }
.ws-research__step--ask > .ws-research__task { flex: 1 1 auto; min-width: 0; }
.ws-research__step--ask > .ws-research__agent::after, .ws-research__step--ask > .ws-research__outcome::after { content: none; animation: none; }
.ws-research__outcome { display: inline-grid; place-items: center; flex: none; color: var(--ok); }
.ws-research__step.is-failed .ws-research__outcome { color: var(--warn); }
.ws-chip--asked { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); color: var(--ink); }
.ws-chip--asked.is-failed { color: var(--muted); }
.ws-chip--asked .ws-chip__agent { width: var(--geometry-border-radius-14px-09f9739); height: var(--geometry-border-radius-14px-09f9739); flex: none; border-radius: 50%; }
.ws-research__sources { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-35rem-1304a2b); margin-top: var(--spacing-gap-15rem-e51094a); }
.ws-research__source { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-gap-15rem-e51094a) var(--spacing-margin-5rem-ef026cb); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); color: var(--muted); text-decoration: none; font-size: var(--typography-font-size-78rem-6850684); max-width: var(--geometry-min-width-12rem-2f2f4a6); }
.ws-research__source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-research__source:hover, .ws-research__source:focus-visible { color: var(--ink); border-color: var(--accent); }
/* The browser while it works: picture, title and address, Stop; one row. */
.ws-browse { box-sizing: border-box; display: flex; align-items: center; gap: var(--spacing-padding-65rem-bcca6ce); width: 100%; max-width: var(--geometry-width-30rem-0220cc6); margin: var(--spacing-padding-1rem-4e95f32) 0 var(--spacing-gap-45rem-ef5b39f); padding: var(--spacing-gap-45rem-ef5b39f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); }
.ws-browse__shot { flex: none; width: var(--geometry-min-height-4-5rem-41dca9e); height: var(--geometry-width-2-8rem-a6a423c); padding: 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); overflow: hidden; background: var(--paper); display: grid; place-items: center; color: var(--muted); cursor: zoom-in; }
.ws-browse__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; margin: 0; border: 0; border-radius: 0; max-width: none; }
.ws-browse__shot--empty { cursor: default; }
.ws-browse__shot:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-border-1px-93e2062); }
.ws-browse__main { display: grid; gap: var(--spacing-padding-1rem-4e95f32); flex: 1; min-width: 0; }
.ws-browse__main strong, .ws-browse__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-browse__main strong { font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-browse__main small { font-size: var(--typography-font-size-75rem-4cf1798); color: var(--muted); }
.ws-browse__stop { flex: none; }
.ws-shot__stage { cursor: default; touch-action: auto; padding: 0 max(var(--spacing-margin-5rem-ef026cb), env(safe-area-inset-right, var(--spacing-padding-top-0px-33a3c91))) 0 max(var(--spacing-margin-5rem-ef026cb), env(safe-area-inset-left, var(--spacing-padding-top-0px-33a3c91))); }
.ws-shot__stage img { transform: none; border-radius:var(--r-xs); }
.ws-shot__url { justify-content: flex-start; }
.ws-shot__url p { color: var(--code-ink); font-size: var(--typography-font-size-78rem-6850684); }

/* Response info: label and value rows in cards, then the run behind the answer. */
.ws-info { display: grid; gap: var(--spacing-padding-85rem-2e72ebc); }
.ws-info__section h3 { margin: 0 0 var(--spacing-gap-45rem-ef5b39f); }
.ws-info__card { margin: 0; padding: 0 var(--spacing-padding-85rem-2e72ebc); list-style: none; background: var(--paper); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-info__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-padding-1rem-b8be0c7); padding: var(--spacing-padding-62rem-936c74c) 0; font-size: var(--typography-font-size-88rem-39c360b); border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-info__row:last-child { border-bottom: 0; }
.ws-info__label { flex: none; color: var(--muted); }
.ws-info__value { min-width: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ws-info__value code { margin-left: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-8rem-818b9f7); border-radius:var(--r-xs); background: var(--panel-strong); }
.ws-info__note { margin: var(--spacing-margin-35rem-94ce370) 0 0; font-size: var(--typography-font-size-76rem-a2a5d3f); color: var(--dim); }
.ws-info__list li { padding: var(--spacing-gap-55rem-f5020a7) 0; font-size: var(--typography-font-size-86rem-d03e951); overflow-wrap: anywhere; border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-info__list li:last-child { border-bottom: 0; }
.ws-info__list a { color: var(--accent); text-decoration: none; } .ws-info__list a:hover { text-decoration: underline; }
.ws-info__actions { display: flex; justify-content: flex-end; }
.ws-run__step { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: var(--spacing-gap-15rem-e51094a) var(--spacing-padding-6rem-d0bc70f); align-items: baseline; padding: var(--spacing-padding-6rem-d0bc70f) 0; font-size: var(--typography-font-size-86rem-d03e951); border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-run__step:last-child { border-bottom: 0; }
.ws-run__when, .ws-run__ms { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-run__name { font-weight: var(--type-weight-control); }
.ws-run__meta { grid-column: 2 / -1; color: var(--dim); font-size: var(--typography-font-size-78rem-6850684); overflow-wrap: anywhere; }
.ws-run__step.is-failed .ws-run__name, .ws-run__error { color: var(--red); }
.ws-run__io { grid-column: 2 / -1; }
.ws-run__io summary { cursor: pointer; color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); }
.ws-run__io pre { max-height: var(--geometry-max-width-18rem-6796582); overflow: auto; margin: var(--spacing-gap-35rem-1304a2b) 0 0; padding: var(--spacing-margin-5rem-ef026cb); border-radius:var(--r-sm); background: var(--panel); font-size: var(--typography-font-size-75rem-4cf1798); white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-fieldset { border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-gap-7rem-7eff2a1); margin: var(--spacing-margin-5rem-ef026cb) 0; }
.ws-fieldset legend { font-size: var(--typography-font-size-8rem-818b9f7); color: var(--muted); padding: 0 var(--spacing-margin-3rem-fb2375d); }

/* A key's library on its card. */
.ws-chip--library { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); color: var(--ink); }
/* A file row's search index state: a small muted icon before its change badge. */
.ws-filerow__index { display: inline-grid; place-items: center; width: var(--geometry-width-1-15rem-3b14c93); height: var(--geometry-width-1-15rem-3b14c93); flex: 0 0 auto; }
.ws-filerow__index:empty { display: none; }
.ws-filerow .ws-filerow__index svg { color: var(--muted); opacity: .75; }
.ws-filerow .ws-filerow__index.is-busy svg { color: var(--accent); opacity: 1; }
.ws-filerow .ws-filerow__index.is-failed svg { color: var(--red); opacity: .8; }
/* A second meter in the same box (the file search index) sits a little apart from the first's note. */
.ws-storage small + .ws-storage__row { margin-top: var(--spacing-gap-35rem-1304a2b); }

/* ==== the Store: plugins, skills and agents ==== */
/* A page like API: its tabs, the search row, then sections in the API Tools style. */
.ws-page-tools > .ws-page-search { align-self: stretch; padding-block: 0; }
.ws-page-tools > .ws-page-search input { padding: 0; }
/* A list's "‹ Store" sits on the list it leads back from, as "‹ Albums" does on an album. */
.ws-project > .ws-back { margin-bottom: 0; }
.ws-store__more { display: inline-flex; align-items: center; gap: var(--spacing-margin-2rem-4cd30ed); min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ws-group__head .ws-store__more svg { color: var(--muted); }
.ws-group__head .ws-store__more:hover svg, .ws-group__head .ws-store__more:focus-visible svg { color: var(--ink); }
.ws-store__tiles { display: flex; gap: var(--spacing-padding-12px-7769e81); min-height: var(--geometry-width-56px-7d24764); padding: var(--spacing-padding-85rem-2e72ebc) 0; overflow: hidden; }
.ws-store__tile { flex: 0 0 56px; width: var(--geometry-width-56px-7d24764); height: var(--geometry-width-56px-7d24764); padding: 0; border: 0; border-radius:var(--r-md); background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.ws-store__tile .ws-storeicon { width: var(--geometry-width-56px-7d24764); height: var(--geometry-width-56px-7d24764); border-radius:var(--r-md); }
.ws-store__tile[data-off="true"] .ws-storeicon { opacity: .45; }
.ws-store__tile--more { box-sizing: border-box; border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel); font: inherit; font-weight: var(--typography-font-weight-750-64d095f); font-size: var(--typography-font-size-95rem-adb8a86); }
.ws-storeicon { box-sizing: border-box; display: grid; place-items: center; flex: none; width: var(--geometry-min-height-2-75rem-3cc807c); height: var(--geometry-min-height-2-75rem-3cc807c); border-radius:var(--r-sm); color: var(--tint, var(--accent));
  background: color-mix(in srgb, var(--tint, var(--accent)) 15%, var(--panel)); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--tint, var(--accent)) 30%, transparent); }
.ws-storeicon svg { display: block; }
.ws-storeicon--image { overflow: hidden; background: var(--panel); border-color: var(--line); }
.ws-storeicon--image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ws-store__row { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem; align-items: center; column-gap: var(--spacing-margin-5rem-ef026cb); border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-store__row:last-child { border-bottom: 0; }
.ws-store__main { display: flex; align-items: center; gap: var(--spacing-gap-8rem-818b9f7); min-width: 0; padding: var(--spacing-padding-6rem-d0bc70f) 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-store__main:hover strong span { color: var(--accent); }
.ws-store__text { display: grid; gap: var(--spacing-padding-12rem-ac4570c); min-width: 0; }
.ws-store__text strong { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); min-width: 0; font-size: var(--typography-font-size-92rem-c7cd355); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-store__text strong span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-store__text > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-store__tag { flex: none; padding: var(--spacing-padding-05rem-98939d1) var(--spacing-margin-4rem-7fdc8b1); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); color: var(--muted); font-size: var(--typography-font-size-66rem-358ab2c); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-store__tag.is-update { border-color: var(--accent); color: var(--accent); }
/* An installed tile with an update: a small accent dot, like the row's Update tag. */
.ws-store__tile { position: relative; }
.ws-store__tile[data-update="true"]::after { content: ""; position: absolute; top: 0; right: 0; width: var(--geometry-border-radius-12px-7769e81); height: var(--geometry-border-radius-12px-7769e81); border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.ws-store__row[data-off="true"] .ws-storeicon { opacity: .5; }
.ws-store__action { justify-self: end; }
/* details sheet */
.ws-store__hero { display: flex; align-items: center; gap: var(--spacing-gap-8rem-818b9f7); margin: var(--spacing-padding-9rem-2ad2e76) 0 var(--spacing-margin-4rem-7fdc8b1); }
.ws-store__hero .ws-storeicon { width: var(--geometry-min-width-3-4rem-f3f389d); height: var(--geometry-min-width-3-4rem-f3f389d); border-radius:var(--r-md); }
.ws-store__hero > div { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-store__hero strong { font-size: var(--typography-font-size-1-05rem-8c6e288); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-store__about { margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-gap-7rem-7eff2a1); color: var(--ink); font-size: var(--typography-font-size-9rem-2ad2e76); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-store__actions { justify-content: flex-start; margin: 0 0 var(--spacing-padding-9rem-2ad2e76); }
.ws-store__actions .ws-button { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-store__actions .ws-store__danger { color: var(--red); }
.ws-store__actions .ws-store__danger:hover { border-color: var(--red); }
.ws-keyform .ws-field > .ws-segmented { justify-self: start; }
.ws-store__lines { margin: 0; padding-left: var(--spacing-padding-left-1-1rem-14af91b); display: grid; gap: var(--spacing-margin-3rem-fb2375d); color: var(--ink); font-size: var(--typography-font-size-86rem-d03e951); }
.ws-store__note { margin: var(--spacing-gap-35rem-1304a2b) 0 0; font-size: var(--typography-font-size-78rem-6850684); }
.ws-store__toolshead { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-padding-6rem-d0bc70f); margin: var(--spacing-padding-1rem-b8be0c7) 0 var(--spacing-margin-3rem-fb2375d); }
.ws-store__toolshead .ws-sheet__label, .ws-store__toolshead .ws-button { margin: 0; }
.ws-hosted__row.ws-store__tool { grid-template-columns: 1.9rem minmax(0, 1fr) auto 2.5rem; }
.ws-store__tool .ws-storeicon { width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); border-radius:var(--r-sm); }
.ws-store__tool .ws-switch { display: flex; justify-content: flex-end; }
.ws-store__toolkind { color: var(--muted); font-size: var(--typography-font-size-7rem-7eff2a1); white-space: nowrap; }
.ws-store__header { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--spacing-margin-5rem-ef026cb); }
.ws-store__header--one { grid-template-columns: minmax(0, 1fr); }
/* The connection dialog: every field (text, address, choice, secret) the same box. */
.ws-connform .ws-field input, .ws-connform .ws-field select { box-sizing: border-box; height: var(--geometry-min-height-2-6rem-ee2b419); margin: 0; padding: 0 var(--spacing-padding-65rem-bcca6ce); font: inherit; font-size: var(--typography-font-size-9rem-2ad2e76); border-radius: var(--icon-radius); }
.ws-connform .ws-field select { appearance: none; -webkit-appearance: none; padding-right: var(--spacing-margin-2-2rem-ac5d0c3); cursor: pointer; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right .65rem center; background-size: 1rem 1rem; }
/* Google Workspace: each service's name, then its level */
.ws-google__level { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(8.5rem, 12rem); align-items: center; column-gap: var(--spacing-padding-75rem-4cf1798); padding: var(--spacing-gap-55rem-f5020a7) 0; border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); }
:is(.ws-google__level, .ws-perm__row) select { box-sizing: border-box; width: 100%; height: var(--geometry-min-height-2-4rem-84ca4d0); margin: 0; padding: 0 var(--spacing-margin-2-2rem-ac5d0c3) 0 var(--spacing-padding-65rem-bcca6ce); font: inherit; font-size: var(--typography-font-size-88rem-39c360b); color: var(--ink); background-color: var(--paper); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); appearance: none; -webkit-appearance: none; cursor: pointer; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right .65rem center; background-size: 1rem 1rem; }
:is(.ws-google__level, .ws-perm__row) .ws-hosted__main small { white-space: normal; }
.ws-google__level select:disabled { opacity: .55; cursor: not-allowed; }
:is(.ws-google__level, .ws-perm__row) select:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-border-1px-93e2062); }
/* HTTP Request's connections: icon, name and address, then Edit and Remove at one size */
.ws-hosted__row.ws-store__conn { grid-template-columns: 1.9rem minmax(0, 1fr) 2.2rem 2.2rem; column-gap: var(--spacing-margin-4rem-7fdc8b1); }
/* GitHub's connection: the token and Connect in one row, as tall as each other */
.ws-store__token { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-padding-6rem-d0bc70f) 0; }
.ws-store__token:has(> .ws-iconbtn) { grid-template-columns: minmax(0, 1fr) auto 2.2rem; }
.ws-store__token input { box-sizing: border-box; width: 100%; height: var(--geometry-min-height-2-4rem-84ca4d0); margin: 0; padding: 0 var(--spacing-padding-65rem-bcca6ce); font: inherit; font-size: var(--typography-font-size-88rem-39c360b); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); }
.ws-store__token .ws-button { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); height: var(--geometry-min-height-2-4rem-84ca4d0); }
.ws-store__note a { color: var(--accent); text-decoration: none; } .ws-store__note a:hover { text-decoration: underline; }
/* The Database plugin's connection dialog: host and port, database and user, each pair on one row. */
.ws-dbform__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-margin-5rem-ef026cb); }
.ws-dbform__pair--port { grid-template-columns: minmax(0, 1fr) 5.5rem; }
.ws-agentform .ws-edit__name input { font-size: var(--typography-font-size-95rem-adb8a86); }
.ws-agentform textarea { min-height: var(--geometry-max-width-8rem-7a94d48); resize: vertical; }
.ws-store__picks h3 { margin: var(--spacing-margin-3rem-fb2375d) 0 var(--spacing-gap-35rem-1304a2b); color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); font-weight: var(--typography-font-weight-400-26d2286); text-transform: none; letter-spacing: 0; }
.ws-store__picks .ws-muted { font-size: var(--typography-font-size-8rem-818b9f7); }
/* your own agents' marks: their icon on their color */
.ws-agentmark { box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: var(--geometry-width-20px-9bf0c8e); height: var(--geometry-width-20px-9bf0c8e); border-radius: 50%; color: var(--agent); background: color-mix(in srgb, var(--agent) 20%, var(--panel)); }
.ws-agentmark svg { display: block; }
/* Iris's own agents: Iris's mark filling the box, the agent's icon centered in a small badge on its lower right corner. */
.ws-agentmark--iris { position: relative; background: none; overflow: visible; }
.ws-agentmark--iris > img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ws-agentmark__badge { position: absolute; right: -14%; bottom: -14%; width: 58%; height: 58%; box-sizing: border-box; display: grid;
  place-items: center; border-radius: 50%; color: var(--color-background-fff-e08de71); background: var(--agent); box-shadow: 0 0 0 1.5px var(--panel-strong); }
.ws-agentmark__badge svg { display: block; width: 70%; height: 70%; }
.ws-agentmark.ws-msg__avatar { width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); color: var(--agent); background: color-mix(in srgb, var(--agent) 20%, var(--panel)); }
.ws-agent-pick .ws-agentmark { width: var(--geometry-border-radius-22px-5d6c439); height: var(--geometry-border-radius-22px-5d6c439); }
.ws-msg__status .ws-agentmark { width: var(--geometry-width-1-1rem-14af91b); height: var(--geometry-width-1-1rem-14af91b); }
.ws-edit__icon .ws-agentmark { width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); }

/* Account and billing: "Use a reset" sits under the facts, in the settings-row style. */
.ws-setting-row--first { margin-top: var(--spacing-gap-7rem-7eff2a1); border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
/* Admin: the account list, then one row per change (icon, label, its
   controls at the end). Every row is the same height; every button the same
   width, so the inputs and buttons line up from row to row. */
.ws-admin__list { margin-top: var(--spacing-margin-4rem-7fdc8b1); }
.ws-admin__list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-admin__control { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); min-height: var(--geometry-min-height-3-25rem-f432a91); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-margin-3rem-fb2375d); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-admin__control > svg { color: var(--muted); flex: 0 0 auto; }
.ws-admin__control > strong { flex: 1; min-width: 0; font-size: var(--typography-font-size-9rem-2ad2e76); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-admin__controls { display: flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); flex: 0 0 auto; }
.ws-admin__controls .ws-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--geometry-width-4-25rem-4d71535); height: var(--geometry-width-2-2rem-ac5d0c3); padding: 0; font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-admin__controls input[type="number"] { box-sizing: border-box; width: var(--geometry-min-height-4-5rem-41dca9e); height: var(--geometry-width-2-2rem-ac5d0c3); margin: 0; font: inherit; font-size: var(--typography-font-size-88rem-39c360b); padding: 0 var(--spacing-margin-5rem-ef026cb); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); appearance: textfield; -moz-appearance: textfield; }
.ws-admin__controls input[type="number"]::-webkit-inner-spin-button, .ws-admin__controls input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ws-admin__controls .ws-switch { display: inline-flex; align-items: center; }

/* Scheduler: the bell in the top bar and its panel. The count sits on the
   bell's corner; the panel lists the newest notifications, one row each:
   an icon by kind, the title on one line, up to two lines of text, when. */
.ws-bell { position: relative; }
.ws-bell__count { position: absolute; top: .1rem; right: .1rem; box-sizing: border-box; min-width: var(--geometry-width-1-05rem-8c6e288); height: var(--geometry-width-1-05rem-8c6e288); padding: 0 var(--spacing-padding-25rem-1677828); display: grid; place-items: center;
  border-radius: var(--geometry-border-radius-999px-088f244); background: var(--accent); color: var(--accent-ink); font-size: var(--typography-font-size-62rem-936c74c); font-weight: var(--typography-font-weight-800-1a1cf79); line-height: var(--typography-line-height-1-6b86b27); font-variant-numeric: tabular-nums; pointer-events: none; }
.ws-menu--notes { box-sizing: border-box; width: min(var(--geometry-width-23rem-7bc0ac3), calc(var(--geometry-max-width-100vw-26ee43a) - var(--geometry-width-16px-6793164))); padding: var(--spacing-margin-3rem-fb2375d); }
.ws-notes__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-width-2-2rem-ac5d0c3); padding: 0 var(--spacing-margin-3rem-fb2375d) 0 var(--spacing-padding-6rem-d0bc70f); }
.ws-notes__head strong { font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-menu .ws-notes__all { display: inline-flex; width: auto; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-55rem-f5020a7); font-size: var(--typography-font-size-8rem-818b9f7); color: var(--muted); }
.ws-notes__list { display: grid; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-menu .ws-note { align-items: flex-start; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-6rem-d0bc70f); }
.ws-note__icon { display: grid; place-items: center; flex: none; width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); border-radius:var(--r-sm); background: var(--paper); color: var(--muted); }
.ws-menu .ws-note__icon svg { color: inherit; padding: 0; }
.ws-note.is-unread .ws-note__icon { background: var(--accent-surface); color: var(--accent); }
.ws-note__icon--failed, .ws-note.is-unread .ws-note__icon--failed { color: var(--red); }
.ws-note__icon--paused, .ws-note.is-unread .ws-note__icon--paused { color: var(--temp, var(--warn)); }
.ws-note__text { display: grid; gap: var(--spacing-padding-12rem-ac4570c); flex: 1; min-width: 0; }
.ws-note__text strong { font-size: var(--typography-font-size-86rem-d03e951); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-note__text span { font-size: var(--typography-font-size-8rem-818b9f7); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ws-note__text small { font-size: var(--typography-font-size-72rem-2a7309a); color: var(--dim, var(--muted)); }
.ws-notes__empty { margin: 0; padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-7rem-7eff2a1); font-size: var(--typography-font-size-82rem-8da80e1); color: var(--muted); }

/* The Scheduled page: one card per schedule, like an API key's. A column, so
   a card made taller by its neighbour keeps its rows and its footer at the bottom. */
.ws-schedcard { display: flex; flex-direction: column; }
.ws-schedcard > .ws-keycard__foot { margin-top: auto; }
.ws-schedcard__open { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-schedcard__open small { font-size: var(--typography-font-size-76rem-a2a5d3f); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-schedcard__open:hover strong, .ws-schedcard__open:focus-visible strong { color: var(--accent); }
.ws-pill--running { color: var(--accent); }
.ws-keycard.is-running { opacity: 1; }
.ws-schedcard__agent, .ws-schedcard__notify, .ws-schedcard__failed { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); min-width: 0; }
.ws-schedcard__agent img { width: var(--geometry-width-1-1rem-14af91b); height: var(--geometry-width-1-1rem-14af91b); border-radius: 50%; }
.ws-schedcard__agent .ws-agentmark { width: var(--geometry-width-1-1rem-14af91b); height: var(--geometry-width-1-1rem-14af91b); }
.ws-schedcard__failed { color: var(--red); }
.ws-schedcard__note { margin: 0; font-size: var(--typography-font-size-78rem-6850684); color: var(--muted); overflow-wrap: anywhere; }
.ws-schedcard__note--failed { color: var(--red); }
.ws-schednote { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin: 0 0 var(--spacing-gap-8rem-818b9f7); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--temp, var(--warn)) 45%, var(--line)); border-radius:var(--r-sm); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-schednote > svg { flex: none; color: var(--temp, var(--warn)); }
.ws-schednote > span { flex: 1; min-width: 0; }
.ws-schednote .ws-button { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); }
/* The edit dialog: the same fields as a connection's; days are seven equal buttons. */
.ws-schedform .ws-fields { grid-template-columns: minmax(0, 1fr); }
.ws-schedform .ws-field[hidden] { display: none; }
.ws-daypicks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-margin-3rem-fb2375d); }
.ws-daypicks button { box-sizing: border-box; height: var(--geometry-min-height-2-6rem-ee2b419); min-width: 0; padding: 0; font: inherit; font-size: var(--typography-font-size-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); background: var(--paper); color: var(--muted); cursor: pointer; }
.ws-daypicks button[aria-pressed="true"] { background: var(--accent-surface); border-color: var(--accent); color: var(--ink); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-schedform__preview { margin: 0; min-height: var(--geometry-min-height-1-3rem-4f4935e); font-size: var(--typography-font-size-82rem-8da80e1); color: var(--muted); overflow-wrap: anywhere; }
.ws-schedform__preview strong { color: var(--ink); }
.ws-schedform textarea { min-height: var(--geometry-width-7rem-c899fa2); resize: vertical; }
/* A new schedule's Approve card: when, the next runs, who and how you hear. */
.ws-approval__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-9rem-2ad2e76); margin: 0; font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-approval__facts dt { color: var(--muted); }
.ws-approval__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: var(--spacing-padding-1rem-4e95f32) var(--spacing-gap-8rem-818b9f7); }
.ws-chip--scheduled { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); }

/* What an answer can draw with (workspace.js answerExtras): icons, status
   badges, a row of stat cards, split bars and a headline figure. */
.ws-mdicon { flex: none; width: var(--geometry-width-1-1em-fe3d65e); height: var(--geometry-width-1-1em-fe3d65e); vertical-align: -.18em; margin-right: var(--spacing-margin-right-3em-7e47d24); color: var(--muted); }
.ws-msg__body ul.ws-iconlist { list-style: none; padding-left: 0; }
.ws-iconlist > li { position: relative; padding-left: var(--spacing-padding-left-1-85rem-fbb064f); margin: var(--spacing-gap-8rem-818b9f7) 0; }
.ws-mdicon--lead { position: absolute; left: 0; top: .2em; width: var(--geometry-width-1-25rem-c10b7e1); height: var(--geometry-width-1-25rem-c10b7e1); margin: 0; }
/* A status wraps when it's a sentence (the owner, 2026-10-19, of a warning running off the screen: "unreadable bleeding all
   over"): a pill on one line, a rounded box over several. */
.ws-status { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); max-width: 100%; margin: var(--spacing-margin-2rem-1d814c7) 0; padding: var(--spacing-padding-14rem-69d1d84) var(--spacing-gap-55rem-f5020a7); border-radius: var(--geometry-width-1rem-b8be0c7); vertical-align: middle;
  white-space: normal; overflow-wrap: anywhere;
  font: 650 var(--typography-font-size-78rem-6850684)/1.3 var(--font-ui); --tone: var(--accent); color: color-mix(in srgb, var(--tone) 78%, var(--ink)); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.ws-status--ok { --tone: var(--ok); } .ws-status--warn { --tone: var(--warn); } .ws-status--no { --tone: var(--danger); }
.ws-status svg { flex: none; }
.ws-status > span { min-width: 0; }
.ws-msg__body .ws-table .ws-status { max-width: none; white-space: nowrap; overflow-wrap: normal; }
.ws-msg__body p.ws-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr)); gap: var(--spacing-margin-5rem-ef026cb); margin: var(--spacing-gap-7rem-7eff2a1) 0; }
.ws-stat { display: grid; align-content: start; gap: var(--spacing-margin-2rem-4cd30ed); min-width: 0; padding: var(--spacing-padding-65rem-bcca6ce) var(--spacing-padding-75rem-4cf1798); border-radius:var(--r-md); background: var(--panel-strong); }
.ws-stat .ws-mdicon { margin: 0 0 var(--spacing-gap-15rem-e51094a); width: var(--geometry-width-1-15rem-3b14c93); height: var(--geometry-width-1-15rem-3b14c93); }
.ws-stat small { color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); line-height: var(--typography-line-height-1-3-9c193c6); }
.ws-stat strong { font-size: var(--typography-font-size-1-3rem-4f4935e); line-height: var(--typography-line-height-1-2-77ac319); overflow-wrap: anywhere; }
.ws-stat--range { grid-template-columns:1fr 1fr; padding:var(--spacing-padding-65rem-bcca6ce) var(--spacing-gap-45rem-ef5b39f); gap:0; }.ws-stat--range > span { display:grid; align-content:start; gap:var(--spacing-margin-2rem-4cd30ed); min-width:0; padding:0 var(--spacing-margin-3rem-fb2375d); }.ws-stat--range > span + span { border-left:var(--geometry-border-1px-93e2062) solid var(--line); }.ws-stat--range strong { font-size:var(--typography-font-size-1-02rem-f6100ff); }.ws-stats--weather .ws-stat > small { font-size:var(--typography-font-size-69rem-2ce7eb5); }.ws-stats--weather > .ws-stat > strong { font-size:var(--typography-font-size-1-1rem-14af91b); }
.ws-msg__body p.ws-stats--weather { grid-template-columns:repeat(4,minmax(0,1fr)); }@media (max-width:500px) { .ws-msg__body p.ws-stats--weather { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ws-msg__body p.ws-blocks { display: grid; gap: var(--spacing-padding-1rem-b8be0c7); margin: var(--spacing-gap-8rem-818b9f7) 0; }
.ws-split { display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-split__head, .ws-split__foot { display: flex; justify-content: space-between; gap: var(--spacing-padding-75rem-4cf1798); }
.ws-split__head strong { font-size: var(--typography-font-size-1-02rem-f6100ff); line-height: var(--typography-line-height-1-3-9c193c6); }
.ws-split__head strong:last-child { text-align: right; flex: none; }
.ws-split__foot small { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-split__track { display: block; height: var(--geometry-height-55rem-f5020a7); border-radius: var(--geometry-border-radius-999px-088f244); overflow: hidden; background: var(--coral); }
.ws-split__track > span { display: block; height: 100%; background: var(--indigo); border-radius: var(--geometry-border-radius-999px-088f244) 0 0 var(--geometry-border-radius-999px-088f244); }
.ws-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--spacing-padding-9rem-2ad2e76); row-gap: var(--spacing-gap-15rem-e51094a); }
.ws-hero .ws-mdicon { grid-row: span 2; width: var(--geometry-min-height-2-6rem-ee2b419); height: var(--geometry-min-height-2-6rem-ee2b419); margin: 0; color: var(--ink); }
.ws-hero .ws-mdicon--sun { color: var(--amber); } .ws-hero .ws-mdicon--storm, .ws-hero .ws-mdicon--alert { color: var(--warn); }
.ws-hero .ws-mdicon--rain, .ws-hero .ws-mdicon--cloud { color: var(--indigo); }
/* A day's high and low, wherever they're drawn: warm and cool. */
.ws-mdicon--thermometerHigh { color: var(--coral); } .ws-mdicon--thermometerLow { color: var(--indigo); }
.ws-hero__main { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-hero__main strong { font-size: var(--typography-font-size-2-1rem-f351383); line-height: var(--typography-line-height-1-1-b05e244); }
.ws-hero__main small { color: var(--muted); font-size: var(--typography-font-size-1rem-b8be0c7); }
.ws-hero__note { grid-column: 2; }
.ws-chart { margin: var(--spacing-padding-9rem-2ad2e76) 0; padding: var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-9rem-2ad2e76) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-width-16px-6793164); background: var(--panel); }
.ws-chart__title { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); font-weight: var(--typography-font-weight-700-99ee502); font-size: var(--typography-font-size-95rem-adb8a86); margin-bottom: var(--spacing-padding-6rem-d0bc70f); }
.ws-chart__title .ws-mdicon { margin: 0; }
.ws-chart__plot { position: relative; height: var(--geometry-height-13-5rem-20376ba); }
.ws-chart__pie { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: var(--spacing-padding-left-1-1rem-14af91b); }
.ws-chart--pie .ws-chart__plot { height: var(--geometry-height-9-5rem-267e0f3); }
.ws-chart__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-86rem-d03e951); }
.ws-chart__legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: baseline; gap: var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-45rem-ef5b39f); }
.ws-chart__legend i { width: var(--geometry-width-6rem-d0bc70f); height: var(--geometry-width-6rem-d0bc70f); border-radius: 50%; align-self: center; }
.ws-chart__legend span { color: var(--muted); line-height: var(--typography-line-height-1-3-9c193c6); overflow-wrap: anywhere; }
.ws-chart__legend small { color: var(--dim); text-align: right; }
.ws-chart__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-8rem-818b9f7); margin-top: var(--spacing-gap-55rem-f5020a7); }
.ws-chart__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-padding-1rem-4e95f32) var(--spacing-gap-7rem-7eff2a1); color: var(--dim); font-size: var(--typography-font-size-76rem-a2a5d3f); min-width: 0; padding-top: var(--spacing-margin-2rem-4cd30ed); }
.ws-chart__meta a { color: var(--muted); }
.ws-chart__data { flex: 0 0 auto; margin-left: auto; }
.ws-chart__data[open] { flex-basis: 100%; }
.ws-chart__data summary { display: flex; width: fit-content; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); margin-left: auto; padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-55rem-f5020a7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244);
  color: var(--muted); font: 600 var(--typography-font-size-74rem-bc7c01a)/1.3 var(--font-ui); cursor: pointer; list-style: none; }
.ws-chart__data summary::-webkit-details-marker { display: none; }
.ws-chart__data[open] summary { color: var(--ink); border-color: var(--muted); }
.ws-chart__data .ws-table { justify-self: stretch; margin: var(--spacing-margin-5rem-ef026cb) 0 0; font-size: var(--typography-font-size-84rem-a4deb85); background: none; }
/* A draw (random.draw): dice faces, coins, hands, straws and cards. A finished
   answer's draw lands with a little motion (.is-new); none when motion is reduced. */
.ws-draw { display: grid; justify-items: start; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-draw__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-padding-6rem-d0bc70f); perspective: var(--geometry-perspective-600px-4a89dee); }
.ws-draw:not(.ws-draw--ttt) .ws-draw__row { cursor: pointer; }
.ws-draw__caption { color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); }
/* The next move: shown under the newest answer only (renderMessages marks it). */
.ws-play { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-4rem-7fdc8b1); }
/* "Again" buttons send a message: the newest answer's only. A game's moves change their own answer, anywhere. */
.ws-msg__body .ws-play__button:not([data-game]) { display: none; }
.is-latest .ws-msg__body .ws-play__button:not([data-game]) { display: inline-flex; }
.ws-draw.is-past .ws-play { display: none; }
.ws-draw.is-past .ws-ttt__cell { pointer-events: none; }
.ws-play__button { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-padding-32rem-ecbb419) var(--spacing-gap-7rem-7eff2a1); border-radius: var(--geometry-border-radius-999px-088f244); border: var(--geometry-border-1px-93e2062) solid var(--line);
  background: var(--panel-strong); color: var(--ink); font: 600 var(--typography-font-size-8rem-818b9f7)/1.2 var(--font-ui); cursor: pointer; transition: transform var(--dur-micro), border-color var(--dur-micro); }
.ws-play__button:hover { border-color: var(--muted); transform: translateY(-1px); }
.ws-play__button:active { transform: scale(.96); }

/* Dice */
.ws-die { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: var(--geometry-min-height-2-75rem-3cc807c); height: var(--geometry-min-height-2-75rem-3cc807c); padding: var(--spacing-padding-42rem-2191e7d); box-sizing: border-box;
  border-radius: var(--geometry-width-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--panel-strong); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .22), 0 3px 6px rgb(0 0 0 / .18); }
.ws-die i { width: var(--geometry-width-46rem-ac56bdb); height: var(--geometry-width-46rem-ac56bdb); margin: auto; border-radius: 50%; }
.ws-die i.on { background: var(--ink); }
.ws-die--n { place-items: center; padding: 0; grid-template: 1fr / 1fr; font: 800 var(--typography-font-size-1-1rem-14af91b)/1 var(--font-ui); }

/* Coins: two faces; a tails coin rests turned over. */
.ws-coin { position: relative; width: var(--geometry-min-height-2-75rem-3cc807c); height: var(--geometry-min-height-2-75rem-3cc807c); }
.ws-coin__inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.ws-coin--tails .ws-coin__inner { transform: rotateY(180deg); }
.ws-coin__face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; font: 800 var(--typography-font-size-1-05rem-8c6e288)/1 var(--font-ui); }
.ws-coin__face--heads { color: var(--color-color-5a4210-c199911); background: radial-gradient(circle at 35% 30%, var(--color-background-f6d77a-04b1b83), var(--color-background-d6a536-bd7d861) 72%); box-shadow: inset 0 0 0 3px rgb(140 100 20 / .35), inset 0 0 0 5px var(--color-background-f6d77a-04b1b83); }
.ws-coin__face--tails { transform: rotateY(180deg); color: var(--color-color-353c4a-b6d0981); background: radial-gradient(circle at 35% 30%, var(--color-background-eef0f4-b3c692f), var(--color-background-a7afbd-5dfe9b4) 72%); box-shadow: inset 0 0 0 3px rgb(80 90 105 / .35), inset 0 0 0 5px var(--color-background-eef0f4-b3c692f); }

/* Rock paper scissors: a fist shakes, then the throw. */
.ws-rps { position: relative; display: grid; justify-items: center; gap: var(--spacing-margin-2rem-4cd30ed); min-width: var(--geometry-min-width-5-2rem-ad543de); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-8rem-818b9f7); border-radius:var(--r-md); border: var(--geometry-border-1px-93e2062) solid transparent; background: var(--panel-strong); }
.ws-rps svg { color: var(--ink); }
.ws-rps__fist { position: absolute; top: .6rem; opacity: 0; }
.ws-rps strong { font-size: var(--typography-font-size-92rem-c7cd355); }
.ws-rps small { color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-rps.is-win { border-color: var(--ok); box-shadow: 0 0 0 3px rgb(63 185 80 / .18); }
.ws-rps.is-lose { opacity: .75; }
.ws-rps__vs { align-self: center; color: var(--muted); font: 700 var(--typography-font-size-8rem-818b9f7)/1 var(--font-ui); }

/* Straws */
.ws-straw { display: grid; justify-items: center; gap: var(--spacing-margin-3rem-fb2375d); min-width: var(--geometry-min-height-2-75rem-3cc807c); }
.ws-straw__stick { width: var(--geometry-width-5rem-ef026cb); height: calc(var(--len, 5) * var(--geometry-height-42rem-2191e7d) + var(--geometry-width-6rem-d0bc70f)); border-radius: var(--geometry-border-radius-25rem-1677828); background: linear-gradient(90deg, var(--color-background-ecd08e-e345914), var(--color-background-c99a3e-a27f0c4)); }
.ws-straw.is-short .ws-straw__stick { background: linear-gradient(90deg, var(--color-background-f29a9a-9291e1d), var(--color-background-d05a5a-86a2240)); }
.ws-straw small { max-width: var(--geometry-height-5rem-8a37694); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); }
.ws-straw.is-short small { color: var(--ink); font-weight: var(--typography-font-weight-700-99ee502); }

/* Cards: a front and a back, so one can be dealt face down and turned. */
.ws-card { position: relative; width: var(--geometry-min-height-2-9rem-8d9ef55); height: var(--geometry-min-width-4rem-a517504); }
.ws-card__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--motion-transition-450ms-5df2141); }
.ws-card.is-down .ws-card__inner { transform: rotateY(180deg); }
.ws-draw--cards .ws-card.is-down { cursor: pointer; }
.ws-draw--cards .ws-card.is-down:hover .ws-card__inner { transform: rotateY(180deg) translateY(-4px); }
.ws-draw--cards .ws-card.is-down:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-height-3px-ac33ff9); border-radius: var(--geometry-width-45rem-ef5b39f); }
.ws-card__front, .ws-card__back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--geometry-width-45rem-ef5b39f); backface-visibility: hidden; box-shadow: 0 2px 5px rgb(0 0 0 / .25); }
.ws-card__front { border: var(--geometry-border-1px-93e2062) solid var(--color-border-d9d4c7-a9c874c); background: var(--color-background-f7f5f0-d474b84); color: var(--color-color-1d2230-5630df6); }
.ws-card--red .ws-card__front { color: var(--color-color-c8383a-6e81ed9); }
.ws-card__front b { position: absolute; top: .25rem; left: .3rem; font: 800 var(--typography-font-size-8rem-818b9f7)/1 var(--font-ui); }
.ws-card__front .ws-card__corner { top: auto; left: auto; bottom: .25rem; right: .3rem; rotate: 180deg; }
.ws-card__back { transform: rotateY(180deg); border: var(--geometry-height-3px-ac33ff9) solid var(--color-background-f7f5f0-d474b84);
  background: repeating-linear-gradient(45deg, var(--color-background-3d5a9e-3679591) 0 4px, var(--color-background-5876c0-ff0973a) 4px 8px); }

/* The wheel: segments clockwise from the top, the pointer above. */
.ws-wheel { position: relative; display: block; width: var(--geometry-height-9-5rem-267e0f3); height: var(--geometry-height-9-5rem-267e0f3); margin-top: var(--spacing-gap-55rem-f5020a7); }
.ws-wheel::before { content: ""; position: absolute; z-index: 2; top: -.55rem; left: 50%; translate: -50% 0; border: var(--geometry-width-5rem-ef026cb) solid transparent; border-top: var(--geometry-width-8rem-818b9f7) solid var(--ink); border-bottom: 0; }
.ws-wheel__disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; border: var(--geometry-height-3px-ac33ff9) solid var(--panel-strong); box-shadow: 0 3px 10px rgb(0 0 0 / .25); }
.ws-wheel__label { position: absolute; left: 50%; top: 50%; width: var(--geometry-min-height-3-5rem-4c81e32); transform-origin: 0 50%; translate: 0 -50%;
  transform: rotate(calc(var(--a) - 90deg)) translateX(.9rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-background-fff-e08de71); font: 700 var(--typography-font-size-68rem-41c61ff)/1 var(--font-ui); text-shadow: 0 1px 2px rgb(0 0 0 / .45); text-align: right; }
.ws-wheel__hub { position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--geometry-min-height-1-3rem-4f4935e); height: var(--geometry-min-height-1-3rem-4f4935e); translate: -50% -50%; border-radius: 50%; background: var(--panel-strong); border: var(--geometry-outline-2px-7476140) solid var(--line); }
.ws-draw--wheel .ws-draw__caption { color: var(--ink); font-weight: var(--typography-font-weight-700-99ee502); font-size: var(--typography-font-size-95rem-adb8a86); }

/* The Magic 8-ball: a window, a blue die floating up with the answer. */
.ws-8ball { display: grid; place-items: center; width: var(--geometry-max-width-8rem-7a94d48); height: var(--geometry-max-width-8rem-7a94d48); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--color-background-5a5f6b-030ba9d), var(--color-background-15171c-9419854) 55%, var(--color-background-050608-b8a167f)); box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
.ws-8ball__window { display: grid; place-items: center; width: var(--geometry-min-width-5-2rem-ad543de); height: var(--geometry-min-width-5-2rem-ad543de); border-radius: 50%; background: radial-gradient(circle, var(--color-background-0d1a3d-061b63e), var(--color-background-050a1c-30f522d) 70%); box-shadow: inset 0 0 0 3px var(--color-box-shadow-2a2e38-5e3b7db); }
.ws-8ball__die { display: grid; place-items: start center; width: var(--geometry-width-4-7rem-508dc1d); height: var(--geometry-min-width-4rem-a517504); padding-top: var(--spacing-margin-5rem-ef026cb); box-sizing: border-box;
  clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(var(--color-background-2f5bd6-f953c93), var(--color-background-1f3f9e-39bd1f0)); }
.ws-8ball__die span { max-width: var(--geometry-min-width-3-4rem-f3f389d); color: var(--color-color-e8eeff-12debe6); font: 700 var(--typography-font-55rem-f5020a7)/1.15 var(--font-ui); text-align: center; }
.ws-draw--8ball .ws-draw__caption { color: var(--ink); font-weight: var(--typography-font-weight-700-99ee502); }

/* Tic-tac-toe */
.ws-ttt { display: grid; grid-template: repeat(3, 3rem) / repeat(3, 3rem); gap: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-margin-3rem-fb2375d); border-radius: var(--geometry-width-8rem-818b9f7); background: var(--line); }
.ws-ttt__cell { display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--geometry-width-5rem-ef026cb); background: var(--panel-strong); color: var(--ink); cursor: pointer; transition: background var(--dur-micro), transform var(--dur-micro); }
.ws-ttt__cell:not(:disabled):hover { background: color-mix(in srgb, var(--panel-strong) 80%, var(--ink)); transform: scale(1.04); }
.ws-ttt__cell:disabled { cursor: default; }
.ws-ttt__cell.is-x { color: var(--indigo); }
.ws-ttt__cell.is-o { color: var(--coral); }
.ws-ttt__mark { stroke-width: 2.6; }
.ws-ttt__cell.is-line { background: color-mix(in srgb, var(--panel-strong) 70%, var(--ok)); }
.ws-ttt.is-over .ws-ttt__cell:not(.is-line) { opacity: .7; }

/* A game's moves, paged under its board. */
.ws-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-5rem-ef026cb); margin: var(--spacing-margin-2rem-1d814c7) 0 var(--spacing-padding-6rem-d0bc70f); }
.ws-pager__step { display: grid; place-items: center; width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); padding: 0; border-radius: 50%; border: var(--geometry-border-1px-93e2062) solid var(--line);
  background: var(--panel-strong); color: var(--ink); cursor: pointer; }
.ws-pager__step:disabled { opacity: .35; cursor: default; }
.ws-pager__label { font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-pager__line { flex-basis: 100%; color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-pager__score { flex-basis: 100%; color: var(--ink); font-size: var(--typography-font-size-8rem-818b9f7); font-weight: var(--type-weight-control); }

/* Higher or lower */
.ws-draw--hilo .ws-draw__row { align-items: center; }
.ws-hilo__guess { display: grid; justify-items: center; color: var(--muted); }
.ws-hilo__guess small { font: 700 var(--typography-font-size-72rem-2a7309a)/1 var(--font-ui); }
.ws-hilo__guess.is-ask small { font-size: var(--typography-font-size-1-3rem-4f4935e); }

@media (prefers-reduced-motion: no-preference) {
  .ws-draw.is-play :is(.ws-die, .ws-rps, .ws-straw__stick, .ws-card, .ws-8ball) { animation: var(--motion-animation-550ms-a45f587) var(--motion-animation-cubic-bezier-2-8-3-1-1-eaf80ee) calc(var(--i, 0) * var(--motion-animation-90ms-1ad97a9)) both ws-draw-land; }
  .ws-draw.is-play .ws-die { animation: var(--dur-reveal) var(--motion-animation-cubic-bezier-2-7-3-1-2e81265) calc(var(--i, 0) * var(--motion-animation-110ms-006aa0c)) both ws-die-tumble; }
  .ws-draw.is-play .ws-coin { animation: var(--motion-animation-950ms-2d6d8bf) var(--motion-animation-cubic-bezier-3-1-3-1-6bd93e1) calc(var(--i, 0) * var(--motion-animation-90ms-1ad97a9)) both ws-coin-toss; }
  .ws-draw.is-play .ws-coin__inner { animation: var(--motion-animation-950ms-2d6d8bf) var(--motion-animation-cubic-bezier-25-1-25-1-11fe4d5) calc(var(--i, 0) * var(--motion-animation-90ms-1ad97a9)) both ws-coin-spin; }
  .ws-draw.is-play .ws-coin--tails .ws-coin__inner { animation-name: ws-coin-spin-tails; }
  .ws-draw.is-play .ws-straw__stick { transform-origin: bottom; animation-name: ws-draw-grow; animation-duration: var(--dur-reveal); }
  .ws-draw.is-play .ws-straw.is-short .ws-straw__stick { animation: var(--dur-reveal) var(--motion-transition-ease-914ff41) calc(var(--i, 0) * var(--motion-animation-90ms-1ad97a9)) both ws-draw-grow, var(--motion-animation-400ms-d8e24dc) var(--motion-transition-ease-914ff41) var(--motion-animation-900ms-a42092c) 2 ws-nudge; }
  .ws-draw--cards.is-play .ws-card { animation: var(--dur-row) var(--motion-animation-cubic-bezier-2-8-3-1-1ca5728) calc(var(--i, 0) * var(--motion-transition-140ms-9202e73)) both ws-card-deal; }
  .ws-draw--cards.is-play .ws-card:not(.is-down) .ws-card__inner { animation: var(--motion-transition-450ms-5df2141) var(--motion-transition-ease-914ff41) calc(var(--i, 0) * var(--motion-transition-140ms-9202e73) + var(--motion-animation-400ms-d8e24dc)) both ws-card-turn; }
  .ws-draw.is-play .ws-rps__fist { animation: var(--motion-animation-900ms-a42092c) var(--motion-animation-ease-in-out-16c2539) calc(var(--i, 0) * 0ms) both ws-rps-shake; }
  .ws-draw.is-play .ws-rps__hand, .ws-draw.is-play .ws-rps strong { animation: var(--motion-transition-350ms-cbe7c0b) var(--motion-animation-cubic-bezier-2-8-3-1-4-6deb4c3) var(--motion-animation-900ms-a42092c) both ws-rps-show; }
  /* Who won shows only once the hands do. */
  .ws-draw.is-play .ws-rps.is-win { animation: var(--motion-animation-1000ms-c37f749) step-end both ws-rps-unwon, var(--motion-animation-550ms-a45f587) var(--motion-transition-ease-914ff41) var(--motion-animation-1250ms-a36e59e) both ws-win; }
  .ws-draw.is-play .ws-rps.is-lose { animation: var(--motion-animation-1000ms-c37f749) step-end both ws-rps-unlost; }
  .ws-draw--rps.is-play .ws-draw__caption, .ws-draw--hilo.is-play .ws-draw__caption, .ws-draw--8ball.is-play .ws-draw__caption { animation: var(--dur-major) var(--motion-transition-ease-914ff41) var(--motion-animation-1200ms-f8ce733) both ws-fade; }
  .ws-draw--wheel.is-play .ws-draw__caption { animation: var(--motion-transition-350ms-cbe7c0b) var(--motion-animation-cubic-bezier-2-8-3-1-4-6deb4c3) var(--motion-animation-3100ms-0071ba9) both ws-rps-show; }
  .ws-draw--wheel.is-play .ws-wheel__label.is-pick { animation: var(--dur-row) var(--motion-transition-ease-914ff41) var(--motion-animation-3200ms-8409e1d) 2 ws-blink-soft; }
  .ws-draw.is-play .ws-8ball { animation: var(--motion-animation-900ms-a42092c) var(--motion-transition-ease-914ff41) both ws-8ball-shake; }
  .ws-draw.is-play .ws-8ball__die { animation: var(--motion-animation-800ms-15c734b) var(--motion-transition-ease-914ff41) var(--motion-animation-850ms-fece784) both ws-8ball-rise; }
  .ws-draw--hilo.is-play .ws-card:not(.is-down):nth-child(3) .ws-card__inner { animation: var(--dur-row) var(--motion-transition-ease-914ff41) var(--dur-row) both ws-card-turn; }
  .ws-draw--ttt.is-play .ws-ttt__cell.is-last .ws-ttt__mark { stroke-dasharray: 60; animation: var(--dur-row) var(--motion-transition-ease-914ff41) var(--motion-transition-150ms-a29b8de) both ws-ttt-draw; }
  .ws-draw--ttt.is-play .ws-ttt__cell.is-line { animation: var(--dur-row) var(--motion-transition-ease-914ff41) var(--motion-transition-600ms-c2d8e9c) both ws-win; }
  .ws-draw__row:active :is(.ws-die, .ws-coin, .ws-card, .ws-8ball) { scale: .96; }
}
@keyframes ws-draw-land { from { opacity: 0; transform: translateY(-.6rem); } }
@keyframes ws-draw-grow { from { transform: scaleY(0); } }
@keyframes ws-die-tumble { 0% { opacity: 0; transform: translate(-1.6rem, -1.4rem) rotate(-300deg) scale(.6); } 60% { opacity: 1; transform: translate(.15rem, .1rem) rotate(12deg) scale(1.05); }
  80% { transform: translate(0, -.15rem) rotate(-4deg); } }
@keyframes ws-coin-toss { 0% { transform: translateY(0) scale(.9); } 45% { transform: translateY(-1.7rem) scale(1.15); } 85% { transform: translateY(.1rem) scale(1); } 92% { transform: translateY(-.25rem); } }
@keyframes ws-coin-spin { from { transform: rotateY(-1800deg); } }
@keyframes ws-coin-spin-tails { from { transform: rotateY(-1620deg); } to { transform: rotateY(180deg); } }
@keyframes ws-card-deal { from { opacity: 0; transform: translate(-3rem, -1.2rem) rotate(-18deg); } }
@keyframes ws-card-turn { from { transform: rotateY(180deg); } }
@keyframes ws-rps-shake { 0% { opacity: 1; transform: translateY(0) rotate(0); } 15%, 48%, 81% { transform: translateY(-.55rem) rotate(-14deg); } 31%, 64% { transform: translateY(.1rem) rotate(4deg); }
  97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ws-rps-show { from { opacity: 0; transform: scale(.4); } }
@keyframes ws-rps-unwon { from { border-color: transparent; box-shadow: none; } }
@keyframes ws-rps-unlost { from { opacity: 1; } }
@keyframes ws-win { 40% { transform: scale(1.08); } }
@keyframes ws-nudge { 50% { transform: translateY(.3rem); } }
@keyframes ws-blink-soft { 50% { opacity: .35; } }
@keyframes ws-8ball-shake { 0%, 100% { transform: none; } 12% { transform: translate(-.35rem, .1rem) rotate(-9deg); } 25% { transform: translate(.35rem, -.1rem) rotate(8deg); }
  38% { transform: translate(-.3rem, .05rem) rotate(-7deg); } 51% { transform: translate(.25rem, 0) rotate(6deg); } 64% { transform: translate(-.15rem, 0) rotate(-3deg); } 77% { transform: rotate(1deg); } }
@keyframes ws-8ball-rise { from { opacity: 0; transform: scale(.55) rotate(-25deg); filter: blur(2px); } }
@keyframes ws-ttt-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
/* Maps (```map, Leaflet): the Workspace's colors over OpenStreetMap's tiles, darkened in the dark theme. */
.ws-map { display: grid; gap: var(--spacing-margin-5rem-ef026cb); margin: var(--spacing-gap-8rem-818b9f7) 0; }
.ws-map__frame { position: relative; overflow: hidden; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-md); }
.ws-map__canvas { height: var(--geometry-height-20rem-33fb3b6); background: var(--panel-strong); font: inherit; }
.ws-map__hint { position: absolute; z-index: 500; left: 50%; bottom: .7rem; translate: -50% 0; padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-7rem-7eff2a1); border-radius: var(--geometry-border-radius-999px-088f244);
  background: rgb(0 0 0 / .6); color: var(--color-background-fff-e08de71); font-size: var(--typography-font-size-78rem-6850684); pointer-events: none; transition: opacity var(--dur-page-out); }
.ws-map.is-awake .ws-map__hint { opacity: 0; }
:root:not([data-theme="light"]) .ws-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.6); }
.ws-map .leaflet-container { font: inherit; background: var(--panel-strong); }
/* An answer's image rules (a border, rounded corners, a margin) would split the tiles apart. */
.ws-msg__body .ws-map .leaflet-container img { max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; display: block; }
.ws-map .leaflet-bar { border: var(--geometry-border-1px-93e2062) solid var(--line); box-shadow: none; }
.ws-map .leaflet-bar a { background: var(--panel-strong); color: var(--ink); border-color: var(--line); }
.ws-map .leaflet-bar a:hover { background: var(--panel); }
.ws-map .leaflet-popup-content-wrapper, .ws-map .leaflet-popup-tip { background: var(--panel-strong); color: var(--ink); box-shadow: 0 4px 14px rgb(0 0 0 / .3); }
.ws-map .leaflet-popup-content { margin: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-8rem-818b9f7); }
.ws-map .leaflet-control-attribution { background: color-mix(in srgb, var(--panel-strong) 80%, transparent); color: var(--muted); font-size: var(--typography-font-size-66rem-358ab2c); }
.ws-map .leaflet-control-attribution a { color: var(--muted); }
.ws-map__popup { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); }
.ws-map__popup small { color: var(--muted); }
.ws-map__drop { position: absolute; left: 1px; top: 0; display: grid; place-items: center; width: var(--geometry-width-26px-48984c3); height: var(--geometry-width-26px-48984c3); border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: var(--pin, var(--color-background-4a7bd0-c02bedc)); border: var(--geometry-outline-2px-7476140) solid var(--color-background-fff-e08de71); box-shadow: 0 2px 5px rgb(0 0 0 / .35); }
.ws-map__drop b { rotate: 45deg; color: var(--color-background-fff-e08de71); font: 800 var(--typography-font-size-72rem-2a7309a)/1 var(--font-ui); }
.ws-msg__body .ws-map__places, .ws-map__places { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-35rem-1304a2b); margin: 0; padding: 0; list-style: none; }
.ws-map__places button { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-padding-25rem-1677828) var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-25rem-1677828) var(--spacing-margin-3rem-fb2375d); border-radius: var(--geometry-border-radius-999px-088f244); border: var(--geometry-border-1px-93e2062) solid var(--line);
  background: var(--panel-strong); color: var(--ink); font: 600 var(--typography-font-size-8rem-818b9f7)/1.2 var(--font-ui); cursor: pointer; }
.ws-map__places button:hover { border-color: var(--muted); }
.ws-map__places b { display: grid; place-items: center; width: var(--geometry-width-1-2rem-a7b00d3); height: var(--geometry-width-1-2rem-a7b00d3); border-radius: 50%; color: var(--color-background-fff-e08de71); font-size: var(--typography-font-size-68rem-41c61ff); }
@media (max-width: 700px) { .ws-map__canvas { height: var(--geometry-max-height-16rem-868f8b1); } }
/* On a phone, a row of cards or a draw starts below the avatar, like a table or code. */
@media (max-width: 700px) { .ws-msg__body > p:is(.ws-blocks, .ws-stats, :has(> :is(.ws-draw, .ws-stat, .ws-hero, .ws-split):first-child)) { clear: left; } }
.ws-chart__types { display: inline-flex; gap: var(--spacing-margin-2rem-4cd30ed); margin-left: auto; }
.ws-chart__type { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-5rem-ef026cb); border-radius: var(--geometry-border-radius-999px-088f244); border: var(--geometry-border-1px-93e2062) solid transparent;
  background: none; color: var(--muted); font: 600 var(--typography-font-size-74rem-bc7c01a)/1.2 var(--font-ui); cursor: pointer; }
.ws-chart__type[aria-pressed="true"] { border-color: var(--line); background: var(--panel-strong); color: var(--ink); }
.ws-chart__type:hover { color: var(--ink); }
/* Their badges and chart-type chips: icon and text centered, text on its capitals (as every chip in the Workspace). */
:is(.ws-status, .ws-chart__type) { justify-content: center; }
:is(.ws-status, .ws-chart__type) > svg { display: block; flex: none; }
:is(.ws-status, .ws-chart__type) > span:not(:has(> *)) { display: block; }
/* In an Iris Code session a draw shows a program's real output: there's nothing to roll or play again. */
.ws.is-code .ws-play { display: none; }
/* Interactive answers (answer-ui.js, docs/answer-extras.md): a working tool in an answer, in the Workspace's own design.
   One box like a chart's; its parts stack with one gap, and a row of parts stacks on a phone. Every icon with words is
   centered on them (flex, align-items: center), and controls are a finger's size. */
.ws-ui { display: grid; gap: var(--spacing-gap-8rem-818b9f7); min-width: 0; margin: var(--spacing-padding-9rem-2ad2e76) 0; padding: var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-95rem-adb8a86) var(--spacing-padding-95rem-adb8a86); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-width-16px-6793164); background: var(--panel); }
.ws-ui__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-width-2rem-bca5ebd); }
.ws-ui__title { display: inline-flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); min-width: 0; font-weight: var(--typography-font-weight-700-99ee502); font-size: var(--typography-font-size-95rem-adb8a86); }
.ws-ui__title > svg { display: block; flex: none; margin: 0; color: var(--accent); }
.ws-ui__title > span { overflow-wrap: anywhere; }
/* The corner's actions: Show the Math, then Start Over. */
.ws-ui__actions { display: inline-flex; align-items: center; gap: var(--spacing-padding-1rem-4e95f32); flex: none; margin: var(--spacing-margin-3rem-5eade97) var(--spacing-margin-4rem-088589b) var(--spacing-margin-3rem-5eade97) 0; }
.ws-ui__mathbtn[aria-pressed="true"] { color: var(--accent); background: var(--accent-surface); }
.ws-ui__body { display: grid; gap: var(--spacing-padding-9rem-2ad2e76); min-width: 0; }
.ws-ui__body > *, .ws-ui__panel > *, .ws-ui__steppanel > *, .ws-ui__foldbody > * { min-width: 0; margin: 0; }
.ws-ui__note { margin: 0; color: var(--dim); font-size: var(--typography-font-size-78rem-6850684); }
.ws-ui__trouble { margin: 0; color: var(--warn); font-size: var(--typography-font-size-78rem-6850684); }
.ws-ui .ws-mdicon { margin: 0; vertical-align: 0; }
.ws-ui__text { margin: 0; line-height: var(--typography-line-height-1-55-9e0b4cf); overflow-wrap: anywhere; }
.ws-ui__text.is-small { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-ui__text.is-lead { font-size: var(--typography-font-size-1-04rem-df9bf6d); }
.ws-ui__heading { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); margin: var(--spacing-gap-15rem-e51094a) 0 0; font-size: var(--typography-font-size-92rem-c7cd355); }
.ws-ui__heading > svg { display: block; flex: none; }
/* Figures. */
.ws-ui__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__stat strong { font-variant-numeric: tabular-nums; }
/* Fact rows stay readable: long names get wider tiles and a sideways scroll, never broken words. */
.ws-msg__body p.ws-stats:not(.ws-stats--weather), .ws-ui__stats { display: flex; gap: var(--spacing-margin-5rem-ef026cb); max-width: 100%; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: var(--spacing-padding-25rem-1677828); }
.ws-stats:not(.ws-stats--weather) > .ws-stat, .ws-ui__stats > .ws-stat { flex: 1 0 max-content; min-width: var(--geometry-min-width-8-25rem-f5314e1); scroll-snap-align: start; }
.ws-stats:not(.ws-stats--weather) > .ws-stat strong, .ws-ui__stats > .ws-stat strong { white-space: nowrap; overflow-wrap: normal; word-break: normal; font-size: var(--typography-font-size-1-1rem-14af91b); }
.ws-ui__stat[data-tone="ok"] strong { color: var(--ok); } .ws-ui__stat[data-tone="warn"] strong { color: var(--warn); }
.ws-ui__stat[data-tone="no"] strong { color: var(--danger); } .ws-ui__stat[data-tone="info"] strong { color: var(--accent); }
.ws-ui__statnote { color: var(--dim); font-size: var(--typography-font-size-74rem-bc7c01a); line-height: var(--typography-line-height-1-3-9c193c6); }
.ws-ui__hero strong { font-variant-numeric: tabular-nums; }
/* The figure and its label share one middle with the icon: with no note under them the icon takes one row, not two (the
   empty second row and its gap pulled it below the figure's middle). */
.ws-ui__hero .ws-hero__main { align-items: center; }
/* The icon beside the figure and its label, a note under the words (spanning both rows, a long note pulled the icon
   off the figure's line). */
.ws-ui__hero > .ws-mdicon { grid-row: auto; }
.ws-ui__hero > .ws-hero__note { grid-column: 2; }
.ws-ui__callout { --tone: var(--info, var(--accent)); display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-75rem-4cf1798); border-radius:var(--r-sm);
  border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--tone) 32%, transparent); background: color-mix(in srgb, var(--tone) 9%, transparent); line-height: var(--type-line-body); }
.ws-ui__callout[data-tone="ok"] { --tone: var(--ok); } .ws-ui__callout[data-tone="warn"] { --tone: var(--warn); } .ws-ui__callout[data-tone="no"] { --tone: var(--danger); }
.ws-ui__calloutmark { display: flex; flex: none; color: var(--tone); }
.ws-ui__calloutmark > svg { display: block; }
.ws-ui__meter { display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-ui__meterhead, .ws-ui__fieldhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-padding-75rem-4cf1798); }
.ws-ui__meterlabel, .ws-ui__fieldhead label, .ws-ui__fieldlabel, .ws-ui__numberlabel { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); font-weight: var(--typography-font-weight-550-f89f8d0); }
.ws-ui__meterhead strong, .ws-ui__value { font-weight: var(--typography-font-weight-700-99ee502); font-variant-numeric: tabular-nums; }
.ws-ui__track { display: block; height: var(--geometry-height-55rem-f5020a7); overflow: hidden; border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-ui__track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-control) var(--ease-out, var(--motion-animation-ease-out-791c2d0)); }
.ws-ui__meter[data-tone="ok"] .ws-ui__track > span { background: var(--ok); } .ws-ui__meter[data-tone="warn"] .ws-ui__track > span { background: var(--warn); }
.ws-ui__meter[data-tone="no"] .ws-ui__track > span { background: var(--danger); }
.ws-ui__split .ws-split__track > span { transition: width var(--dur-control) var(--ease-out, var(--motion-animation-ease-out-791c2d0)); }
/* Inputs. */
.ws-ui__field { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); min-width: 0; }
.ws-ui__slider input[type="range"] { width: 100%; height: var(--geometry-width-2rem-bca5ebd); margin: 0; accent-color: var(--accent); background: none; cursor: pointer; touch-action: pan-y; }
.ws-ui__number { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ws-ui__stepper { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); padding: var(--spacing-gap-15rem-e51094a); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--paper); }
.ws-ui__step { width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); }
.ws-ui__numberinput { width: var(--geometry-min-height-4-5rem-41dca9e); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-margin-2rem-4cd30ed); border: 0; background: none; color: var(--ink); font: inherit; font-weight: var(--typography-font-weight-700-99ee502); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ws-ui__numberinput::-webkit-outer-spin-button, .ws-ui__numberinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ws-ui__unit { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-ui__toggle { margin: 0; }
.ws-ui__choice { display: flex; width: 100%; max-width: 100%; }
.ws-ui__choice button { flex: 1 1 0; min-width: 0; }
.ws-ui__choice button, .ws-ui__tabs button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); min-height: var(--geometry-height-2-25rem-e1d2841); }
.ws-ui__choice button > svg, .ws-ui__tabs button > svg { display: block; flex: none; margin: 0; }
.ws-ui__select, .ws-ui__textinput { width: 100%; min-height: var(--geometry-min-height-2-6rem-ee2b419); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-65rem-bcca6ce); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--typography-font-size-92rem-c7cd355); }
.ws-ui__select:focus-visible, .ws-ui__textinput:focus-visible, .ws-ui__numberinput:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus, var(--accent)); outline-offset: var(--geometry-border-1px-93e2062); }
.ws-ui__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__button { min-height: var(--geometry-height-2-5rem-fb391dd); }
.ws-ui__button > svg, .ws-ui__next > span > svg, .ws-ui__play > span > svg { display: block; flex: none; margin: 0; }
/* An answer icon on a button or a choice takes its color (a muted icon on the accent read as disabled). */
.ws-ui :is(.ws-ui__button, .ws-ui__choice button, .ws-ui__tabs button) .ws-mdicon { color: currentColor; }
.ws-ui__nexticon { display: flex; flex: none; }
/* Tables, charts and plots. */
.ws-ui__table { margin: 0; }
.ws-ui__table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ws-ui__table tr.is-lit > * { background: var(--accent-surface); }
.ws-ui__table tfoot td { font-weight: var(--typography-font-weight-700-99ee502); border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-ui__sort { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.ws-ui__sort > svg { display: block; flex: none; }
.ws-ui__chart > .ws-chart, .ws-ui .ws-map { margin: 0; }
.ws-ui__chart > .ws-chart, .ws-ui__plot { margin: 0; border: 0; padding: 0; background: none; }
/* Cards. */
.ws-ui__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--spacing-gap-55rem-f5020a7); }
.ws-ui__card { display: grid; align-content: start; gap: var(--spacing-gap-35rem-1304a2b); min-width: 0; padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-md); background: var(--panel-strong); color: var(--ink); font: inherit; text-align: left; }
button.ws-ui__card { cursor: pointer; }
button.ws-ui__card:hover { border-color: var(--line-strong, var(--muted)); }
.ws-ui__card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-surface); }
.ws-ui__card[data-tone="ok"] { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); } .ws-ui__card[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ws-ui__card[data-tone="no"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ws-ui__cardhead { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); min-width: 0; }
.ws-ui__cardhead > svg { display: block; flex: none; color: var(--accent); }
.ws-ui__cardhead > strong { min-width: 0; overflow-wrap: anywhere; }
.ws-ui__badge { margin-left: auto; padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-margin-5rem-ef026cb); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--accent-surface); color: var(--accent); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-650-2099a9b); white-space: nowrap; }
.ws-ui__cardvalue { font-size: var(--typography-font-size-1-35rem-0c0025b); font-variant-numeric: tabular-nums; }
.ws-ui__cardtext { margin: 0; color: var(--muted); font-size: var(--typography-font-size-86rem-d03e951); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-ui__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-ui__tag { padding: var(--spacing-padding-08rem-d010079) var(--spacing-gap-45rem-ef5b39f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); color: var(--muted); font-size: var(--typography-font-size-72rem-2a7309a); }
/* Layout: a row of parts side by side (stacked on a phone), tabs, steps, folds. */
.ws-ui__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-1rem-b8be0c7); align-items: start; }
.ws-ui__tabbed { display: grid; gap: var(--spacing-padding-75rem-4cf1798); }
.ws-ui__tabs { justify-self: start; max-width: 100%; overflow-x: auto; }
.ws-ui__panel { display: grid; gap: var(--spacing-gap-8rem-818b9f7); }
.ws-ui__steps { display: grid; gap: var(--spacing-gap-7rem-7eff2a1); outline: none; }
.ws-ui__stephead { display: grid; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-ui__stepcount { color: var(--dim); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-06em-9679667); text-transform: uppercase; }
.ws-ui__steptitle { font-size: var(--typography-font-size-1rem-b8be0c7); }
.ws-ui__dots { display: flex; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-ui__dots > button { flex: 1; height: var(--geometry-height-3rem-fb2375d); min-width: var(--geometry-width-6rem-d0bc70f); padding: 0; border: 0; border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); cursor: pointer; }
.ws-ui__dots > .is-done { background: color-mix(in srgb, var(--accent) 55%, var(--panel-strong)); }
.ws-ui__dots > .is-current { background: var(--accent); }
.ws-ui__steppanel { display: grid; gap: var(--spacing-gap-8rem-818b9f7); }
.ws-ui__stepnav { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__folds { display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-ui__fold { border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel-strong); }
.ws-ui__fold > summary { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); min-height: var(--geometry-min-height-2-6rem-ee2b419); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-7rem-7eff2a1); cursor: pointer; list-style: none; font-weight: var(--type-weight-control); }
.ws-ui__fold > summary::-webkit-details-marker { display: none; }
.ws-ui__foldbody { display: grid; gap: var(--spacing-gap-7rem-7eff2a1); padding: 0 var(--spacing-gap-8rem-818b9f7) var(--spacing-gap-8rem-818b9f7); }
/* Teaching: a checklist, a quiz, flashcards, a timeline. */
.ws-ui__checklist { display: grid; gap: var(--spacing-padding-25rem-1677828); }
.ws-ui__checkhead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--spacing-padding-75rem-4cf1798); margin-bottom: var(--spacing-margin-3rem-fb2375d); }
.ws-ui__checkcount { color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); font-weight: var(--typography-font-weight-650-2099a9b); }
.ws-ui__checkrow { display: flex; align-items: flex-start; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-1rem-4e95f32); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line-soft); cursor: pointer; }
.ws-ui__checkrow:last-child { border-bottom: 0; }
.ws-ui__checkrow input { flex: none; width: var(--geometry-width-1-15rem-3b14c93); height: var(--geometry-width-1-15rem-3b14c93); margin: var(--spacing-gap-15rem-e51094a) 0 0; accent-color: var(--accent); }
.ws-ui__checkrow > span { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-ui__checkrow small { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-ui__checkrow.is-done strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }
.ws-ui__quiz { display: grid; gap: var(--spacing-gap-7rem-7eff2a1); }
.ws-ui__question { margin: 0; font-size: var(--typography-font-size-1rem-b8be0c7); font-weight: var(--typography-font-weight-650-2099a9b); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-ui__options { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-ui__option { display: flex; align-items: center; gap: var(--spacing-padding-65rem-bcca6ce); width: 100%; min-height: var(--geometry-min-height-2-9rem-8d9ef55); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-75rem-4cf1798); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm);
  background: var(--panel-strong); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-ui__option:hover:not(:disabled) { border-color: var(--accent); }
.ws-ui__option:disabled { cursor: default; opacity: 1; }
.ws-ui__option > span:nth-child(2) { flex: 1; min-width: 0; }
.ws-ui__option > svg { display: block; flex: none; }
.ws-ui__letter { display: inline-grid; place-items: center; flex: none; width: var(--geometry-width-1-6rem-9ef54f1); height: var(--geometry-width-1-6rem-9ef54f1); border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-ui__option.is-right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel-strong)); }
.ws-ui__option.is-right > svg { color: var(--ok); }
.ws-ui__option.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel-strong)); }
.ws-ui__option.is-wrong > svg { color: var(--danger); }
.ws-ui__quizdone { display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-ui__score { font-size: var(--typography-font-size-1-6rem-9ef54f1); font-variant-numeric: tabular-nums; }
.ws-ui__flashcards { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-ui__flash { position: relative; display: block; width: 100%; min-height: var(--geometry-min-height-9rem-b70c018); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; perspective: var(--geometry-perspective-900px-978a9eb); }
.ws-ui__flashinner { position: relative; display: grid; min-height: var(--geometry-min-height-9rem-b70c018); transform-style: preserve-3d; transition: transform var(--motion-transition-450ms-5df2141) var(--ease-out, var(--motion-animation-ease-out-791c2d0)); }
.ws-ui__flash.is-flipped .ws-ui__flashinner { transform: rotateY(180deg); }
.ws-ui__face { grid-area: 1 / 1; display: grid; place-items: center; padding: var(--spacing-padding-1rem-b8be0c7) var(--spacing-padding-1-2rem-a7b00d3); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-width-16px-6793164); background: var(--panel-strong);
  font-size: var(--typography-font-size-1-05rem-8c6e288); line-height: var(--typography-line-height-1-45-6918de1); text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ws-ui__face--back { transform: rotateY(180deg); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ws-ui__flashnav { display: flex; align-items: center; justify-content: center; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-ui__flashnav > .ws-ui__stepcount { min-width: var(--geometry-min-height-4-5rem-41dca9e); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .ws-ui__flashinner { transition: none; transform: none !important; }
  .ws-ui__face { backface-visibility: visible; transform: none; }
  .ws-ui__flash .ws-ui__face--back, .ws-ui__flash.is-flipped .ws-ui__face--front { visibility: hidden; }
  .ws-ui__flash.is-flipped .ws-ui__face--back { visibility: visible; }
  .ws-ui__track > span, .ws-ui__split .ws-split__track > span { transition: none; }
}
.ws-ui__timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-ui__timeline > li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--spacing-gap-7rem-7eff2a1); }
.ws-ui__rail { display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.ws-ui__mark { display: grid; place-items: center; width: var(--geometry-width-1-6rem-9ef54f1); height: var(--geometry-width-1-6rem-9ef54f1); border-radius: 50%; background: var(--panel-strong); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.ws-ui__mark > svg { display: block; margin: 0; color: inherit; }
.ws-ui__mark > i { width: var(--geometry-width-45rem-ef5b39f); height: var(--geometry-width-45rem-ef5b39f); border-radius: 50%; background: var(--accent); }
.ws-ui__timeline > li[data-tone="ok"] .ws-ui__mark { box-shadow: inset 0 0 0 1.5px var(--ok); color: var(--ok); } .ws-ui__timeline > li[data-tone="ok"] .ws-ui__mark > i { background: var(--ok); }
.ws-ui__timeline > li[data-tone="warn"] .ws-ui__mark { box-shadow: inset 0 0 0 1.5px var(--warn); color: var(--warn); } .ws-ui__timeline > li[data-tone="warn"] .ws-ui__mark > i { background: var(--warn); }
.ws-ui__timeline > li[data-tone="no"] .ws-ui__mark { box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger); } .ws-ui__timeline > li[data-tone="no"] .ws-ui__mark > i { background: var(--danger); }
.ws-ui__line { width: var(--geometry-border-1-5px-67792bd); min-height: var(--geometry-width-8rem-818b9f7); background: var(--line); }
.ws-ui__timeline > li:last-child .ws-ui__line { visibility: hidden; }
.ws-ui__event { display: grid; gap: var(--spacing-padding-1rem-4e95f32); padding-bottom: var(--spacing-padding-9rem-2ad2e76); min-width: 0; }
.ws-ui__event small { color: var(--dim); font-size: var(--typography-font-size-74rem-bc7c01a); font-weight: var(--typography-font-weight-650-2099a9b); letter-spacing: var(--typography-letter-spacing-02em-3e41986); }
.ws-ui__event p { margin: var(--spacing-padding-1rem-4e95f32) 0 0; color: var(--muted); font-size: var(--typography-font-size-88rem-39c360b); line-height: var(--typography-line-height-1-45-6918de1); }
/* Diagrams: boxes and arrows the Workspace lays out; a picked box glows in the accent, its note shows below. */
.ws-ui__diagramwrap { display: grid; gap: var(--spacing-gap-55rem-f5020a7); }
.ws-ui__diagramtitle { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); font-weight: var(--type-weight-control); }
.ws-ui__diagram { display: flex; justify-content: center; min-width: 0; }
.ws-ui__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-ui, inherit); }
.ws-ui__node { cursor: pointer; outline: none; }
.ws-ui__node rect { fill: var(--panel-strong); stroke: var(--line-strong, var(--line)); stroke-width: 1.2; transition: fill var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), stroke var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-ui__node text { fill: var(--ink); font-size: var(--typography-font-size-13px-145f2f5); font-weight: var(--type-weight-control); }
.ws-ui__nodeicon { color: var(--accent); }
.ws-ui__node[data-tone="ok"] rect { stroke: var(--ok); } .ws-ui__node[data-tone="warn"] rect { stroke: var(--warn); } .ws-ui__node[data-tone="no"] rect { stroke: var(--danger); }
.ws-ui__node:hover rect, .ws-ui__node:focus-visible rect { stroke: var(--accent); }
.ws-ui__node.is-lit rect { fill: color-mix(in srgb, var(--accent) 16%, var(--panel-strong)); stroke: var(--accent); }
.ws-ui__node.is-selected rect { fill: var(--accent); stroke: var(--accent); }
.ws-ui__node.is-selected text, .ws-ui__node.is-selected .ws-ui__nodeicon { fill: var(--accent-ink); color: var(--accent-ink); }
.ws-ui__edge { fill: none; stroke: var(--muted); stroke-width: 1.4; opacity: .75; }
.ws-ui__arrowhead { fill: var(--muted); }
.ws-ui__edgegroup.is-lit .ws-ui__edge { stroke: var(--accent); opacity: 1; stroke-width: 2; }
.ws-ui__edgepill { fill: var(--panel); stroke: var(--line); }
.ws-ui__edgelabel { fill: var(--muted); font-size: var(--typography-font-size-12px-7769e81); font-weight: var(--typography-font-weight-500-0604cd3); }
.ws-ui__detail { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); min-height: var(--geometry-min-height-2-6rem-ee2b419); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-75rem-4cf1798); border-radius:var(--r-sm); background: var(--panel-strong); font-size: var(--typography-font-size-9rem-2ad2e76); line-height: var(--typography-line-height-1-45-6918de1); }
/* A player: what plays over time (a simulation's clock), with its own Play and a scrubber. */
.ws-ui__player { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-ui__player input[type="range"] { width: 100%; height: var(--geometry-width-2rem-bca5ebd); margin: 0; accent-color: var(--accent); touch-action: pan-y; }
/* Show the Math: a figure's formula with its inputs named, then with what they hold now. */
.ws-ui__math { display: none; }
.ws-ui.is-math .ws-ui__math { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; margin-top: var(--spacing-margin-3rem-fb2375d); color: var(--muted); font: 500 var(--typography-font-size-72rem-2a7309a)/1.4 var(--font-mono); text-align: left; }
.ws-ui__math code { padding: 0; background: none; color: inherit; font: inherit; overflow-wrap: anywhere; }
.ws-ui__math code:last-child:not(:first-child) { color: var(--dim); }
.ws-hero__main > .ws-ui__math { flex-basis: 100%; }
/* Solve: what an input must be for a result to reach its target, and Use This. */
.ws-ui__solve { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-9rem-2ad2e76); flex-wrap: wrap; padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-gap-8rem-818b9f7);
  border-radius:var(--r-sm); background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-ui__solvemain { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-ui__solvelabel { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); font-weight: var(--typography-font-weight-550-f89f8d0); }
.ws-ui__solveresult { font-size: var(--typography-font-size-1-35rem-0c0025b); line-height: var(--typography-line-height-1-2-77ac319); font-variant-numeric: tabular-nums; }
.ws-ui__solvenote { color: var(--dim); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-ui__use { flex: none; }
/* What Moves It: each input a little lower and higher, a bar each side of the result as it is. */
.ws-ui__drivers { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-ui__drivershead { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-8rem-818b9f7); flex-wrap: wrap; }
.ws-ui__driverstitle { font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-ui__driverkey { display: inline-flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); color: var(--muted); font-size: var(--typography-font-size-74rem-bc7c01a); }
.ws-ui__driverkey > span { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-ui__driverkey i { display: block; flex: none; width: var(--geometry-width-65rem-bcca6ce); height: var(--geometry-width-65rem-bcca6ce); border-radius: var(--geometry-height-3px-ac33ff9); }
.ws-ui__driverrows { display: grid; gap: var(--spacing-gap-15rem-e51094a); }
.ws-ui__driver { display: grid; grid-template-columns: minmax(5.5rem, 9rem) minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); width: 100%;
  min-height: var(--geometry-height-2-25rem-e1d2841); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-45rem-ef5b39f); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-ui__driver:hover { background: var(--panel-strong); }
.ws-ui__driver:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-border-1px-93e2062); }
.ws-ui__drivername { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); font-weight: var(--typography-font-weight-550-f89f8d0); text-overflow: ellipsis; white-space: nowrap; }
.ws-ui__driverbar { position: relative; display: block; height: var(--geometry-width-7rem-7eff2a1); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-ui__driverbar > i { position: absolute; top: 0; bottom: 0; border-radius: var(--geometry-border-radius-999px-088f244); transition: left var(--dur-control) var(--ease-out, var(--motion-animation-ease-out-791c2d0)), width var(--dur-control) var(--ease-out, var(--motion-animation-ease-out-791c2d0)); }
.ws-ui__driverbar > b { position: absolute; top: -.2rem; bottom: -.2rem; left: 50%; width: var(--geometry-outline-2px-7476140); margin-left: var(--spacing-margin-left-1px-e297ac1); border-radius: var(--geometry-border-1px-93e2062); background: var(--ink); opacity: .55; }
.ws-ui__drivers i.is-down { background: var(--dim); }
.ws-ui__drivers i.is-up { background: var(--accent); }
.ws-ui__driverrange { color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Scenarios: set-ups saved and compared with what's now. */
.ws-ui__scenarios { display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__scenariosbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); flex-wrap: wrap; }
.ws-ui__scenariosbar > strong { font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-ui__scenariohead { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-ui__load { display: inline-flex; align-items: center; min-height: var(--geometry-width-2rem-bca5ebd); padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-4rem-7fdc8b1); border: 0; border-radius:var(--r-sm); background: none; color: var(--accent);
  font: inherit; font-weight: var(--typography-font-weight-700-99ee502); cursor: pointer; }
.ws-ui__load:hover { background: var(--accent-surface); }
.ws-ui__unsave { width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); }
.ws-ui__scenariotable th.is-current { color: var(--accent); }
.ws-ui__scenariotable tr.is-input > * { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); }
@media (prefers-reduced-motion: reduce) { .ws-ui__driverbar > i { transition: none; } }
/* Pills: a figure's parts, a version, a form's answer. */
.ws-ui__pills { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-ui__pill { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); min-height: var(--geometry-height-2-25rem-e1d2841); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-padding-85rem-2e72ebc); border: var(--geometry-border-1px-93e2062) solid var(--line);
  border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel-strong); color: var(--muted); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); font-weight: var(--type-weight-control); cursor: pointer; }
.ws-ui__pill > svg { display: block; flex: none; }
.ws-ui__pill:hover { color: var(--ink); }
.ws-ui__pill[aria-checked="true"] { border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.ws-ui__pill:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-outline-2px-7476140); }
/* A figure: line art that comes apart, its parts picked and explained. */
.ws-ui__figure { display: grid; gap: var(--spacing-gap-7rem-7eff2a1); min-width: 0; }
/* A 3D scene (scene-view.js): the model on a stage of its own, its labels and leaders over it, controls below. */
.ws-scenehost, .ws-scene { min-width: 0; }
.ws-scenehost { color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-scene { display: grid; gap: var(--spacing-gap-7rem-7eff2a1); }
.ws-scene__stage { position: relative; height: min(var(--geometry-height-64vh-7e9ceac), var(--geometry-width-30rem-0220cc6)); min-height: var(--geometry-max-width-18rem-6796582); border-radius:var(--r-md); overflow: hidden; outline: none;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  background: radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--ink) 6%, var(--panel-strong)), var(--panel-strong));
  box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-scene__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 600px) { .ws-scene__stage { height: min(var(--geometry-height-54vh-5b621bd), var(--geometry-max-width-26rem-36abcba)); min-height: var(--geometry-max-height-16rem-868f8b1); } } /* room to scroll the chat beside it */
.ws-scene__canvas, .ws-scene__canvas > canvas, .ws-scene__still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ws-scene__still { object-fit: contain; }
.ws-scene__leaders, .ws-scene__labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ws-scene__leaders path { fill: none; stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1; }
.ws-scene__leaders path.is-on { stroke: var(--accent); stroke-width: 1.5; }
.ws-scene__label { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; min-height: var(--geometry-border-radius-22px-5d6c439); max-width: 45%;
  padding: 0 var(--spacing-margin-5rem-ef026cb); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--ink);
  font: inherit; font-size: var(--typography-font-size-74rem-bc7c01a); font-weight: var(--type-weight-control); white-space: nowrap; cursor: pointer; pointer-events: auto; }
.ws-scene__label > span { overflow: hidden; text-overflow: ellipsis; }
.ws-scene__label.is-on { border-color: var(--accent); color: var(--accent); }
.ws-scene__tools { position: absolute; top: .4rem; right: .4rem; display: flex; gap: var(--spacing-gap-15rem-e51094a); padding: var(--spacing-gap-15rem-e51094a); border-radius:var(--r-sm);
  background: color-mix(in srgb, var(--panel) 80%, transparent); }
.ws-scene__nowebgl { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--spacing-padding-1-5rem-b81aec4); text-align: center; color: var(--muted); font-size: var(--typography-font-size-86rem-d03e951); }
.ws-scene__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-scene__play { min-width: var(--geometry-min-height-4-5rem-41dca9e); }
.ws-scene__tour { display: grid; gap: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-padding-65rem-bcca6ce) var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line-soft); border-radius:var(--r-sm); background: var(--panel-strong); }
.ws-scene__tourhead { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-height-2-25rem-e1d2841); }
.ws-scene__tourtools { display: inline-flex; align-items: center; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-scene__start { justify-self: start; }
.ws-scene__tour p, .ws-scene__detail p { margin: 0; }
.ws-scene__count { color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); font-variant-numeric: tabular-nums; }
.ws-scene__detail { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); }
.ws-scene__more > summary { cursor: pointer; color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-scene__more > .ws-ui__pills, .ws-scene__more > ul { margin-top: var(--spacing-gap-45rem-ef5b39f); }
.ws-assembly, .ws-assembly__root { min-width: 0; }
.ws-assembly__root { display: grid; gap: var(--spacing-gap-8rem-818b9f7); }
.ws-assembly__viewport { position: relative; overflow: hidden; height: min(var(--geometry-max-height-60vh-e3566e6), var(--geometry-max-height-28rem-151008a)); min-height: var(--geometry-min-height-17rem-4d450b4); min-width: 0; border-radius:var(--r-md);
  background: var(--panel-strong); touch-action: pan-y; }
.ws-assembly__viewport.is-zoomed { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ws-assembly__zoom { position: absolute; top: .4rem; right: .4rem; display: flex; gap: var(--spacing-gap-15rem-e51094a); padding: var(--spacing-gap-15rem-e51094a); border-radius:var(--r-sm);
  background: color-mix(in srgb, var(--panel) 80%, transparent); }
.ws-assembly__canvas { margin-inline: auto; }
.ws-assembly__viewport:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-outline-2px-7476140); }

.ws-assembly__badge { justify-self: start; color: var(--muted); font-size: var(--typography-font-size-72rem-2a7309a); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); padding: var(--spacing-padding-12rem-ac4570c) var(--spacing-margin-5rem-ef026cb); }
.ws-assembly__canvas { display: block; width: 100%; height: 100%; min-height: 0; border-radius:var(--r-md); background: var(--panel-strong); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-assembly__geometry { fill: color-mix(in srgb, currentColor 10%, transparent); stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ws-assembly__geometry * { vector-effect: non-scaling-stroke; }
.ws-assembly__geometry[data-primitive=fan] > path { fill: color-mix(in srgb, currentColor 18%, var(--panel-strong)); stroke-width: 1; }
.ws-assembly__geometry[data-primitive=fan] > circle { fill: var(--panel-strong); }
.ws-assembly__geometry.is-shell { stroke-width: 1.7; fill: color-mix(in srgb, var(--ink) 18%, var(--panel-strong)); }
.ws-assembly__geometry.is-shell.is-exterior { fill: color-mix(in srgb, var(--ink) 26%, var(--panel-strong)); }
.ws-assembly__geometry[role=button], .ws-assembly__card { cursor: pointer; outline: none; }
.ws-assembly__geometry:focus-visible, .ws-assembly__card:focus-visible { stroke: var(--accent); stroke-width: 3; }
.ws-assembly__part.is-selected > .ws-assembly__geometry { color: var(--accent); }
.ws-assembly__part.is-selected > path { stroke: var(--accent); }
.ws-assembly__part[role=button]:focus-visible > path { stroke: var(--accent); stroke-width: 3; }
.ws-assembly__part--copper { color: var(--amber); }
.ws-assembly__part--fluid { color: var(--info); }
.ws-assembly__part--circuit { color: color-mix(in srgb, var(--ink) 65%, var(--ok)); }
.ws-assembly__part--tissue { color: var(--red); }
.ws-assembly__geometry.is-section { stroke-dasharray: 4 2; fill: color-mix(in srgb, currentColor 16%, transparent); }
.ws-assembly__section { stroke: currentColor; stroke-width: 1; opacity: .6; pointer-events: none; }
.ws-assembly__section * { vector-effect: non-scaling-stroke; }
.ws-assembly__annotations { color: var(--ink); }
.ws-assembly__annotations > g { cursor: pointer; outline: none; }
.ws-assembly__annotations > g:focus-visible text { fill: var(--accent); text-decoration: underline; }
.ws-assembly__annotations > g:hover text { fill: var(--accent); }
.ws-assembly__annotations path { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ws-assembly__annotations circle { fill: var(--accent); }
.ws-assembly__annotations text { fill: currentColor; font-family: var(--font-ui); font-weight: var(--type-weight-control); }
.ws-assembly__assumptions { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-assembly__failure { border-inline-start: var(--geometry-outline-2px-7476140) solid var(--amber); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-85rem-2e72ebc); color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); overflow-wrap: anywhere; }
.ws-assembly__failure > strong { color: var(--ink); }
.ws-assembly__failure p { margin: var(--spacing-gap-35rem-1304a2b) 0; }
.ws-assembly__failure details { margin-block-start: var(--spacing-margin-5rem-ef026cb); }
.ws-assembly__failure summary { cursor: pointer; min-height: var(--geometry-width-2rem-bca5ebd); align-content: center; }
.ws-assembly__failure li { margin-block: var(--spacing-margin-3rem-fb2375d); }
.ws-assembly__card rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.3; }
.ws-assembly__card text { fill: var(--ink); stroke: none; font-family: var(--font-ui); }
.ws-assembly__card.is-selected rect { stroke: var(--accent); }
.ws-assembly__links { pointer-events: none; stroke: var(--muted); stroke-width: 1.2; opacity: .65; }
.ws-assembly__links path { vector-effect: non-scaling-stroke; }
.ws-assembly__connection.is-fluid { stroke: var(--info); }
.ws-assembly__connection.is-thermal { stroke: var(--amber); }
.ws-assembly__canvas.is-exploded .ws-assembly__connection { stroke-dasharray: 4 4; }
.ws-assembly__ownership { stroke-dasharray: 3 4; opacity: .5; }
.ws-assembly__controls { display: grid; gap: var(--spacing-padding-65rem-bcca6ce); }
.ws-assembly__range { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); min-width: 0; }
.ws-assembly__range input { width: 100%; min-width: 0; accent-color: var(--accent); min-height: var(--geometry-height-2-5rem-fb391dd); }
.ws-assembly__operation { display: flex; gap: var(--spacing-gap-7rem-7eff2a1); align-items: center; }
.ws-assembly__operation > label { flex: 1; }
.ws-assembly__detail p { margin: var(--spacing-gap-35rem-1304a2b) 0 0; color: var(--muted); font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-assembly [hidden] { display: none !important; }
.ws-assembly__root > .ws-ui__pills { flex-wrap: nowrap; overflow-x: auto; padding: var(--spacing-margin-2rem-4cd30ed); }
.ws-assembly__root > .ws-ui__pills > button { flex: none; }
@media (max-width: 480px) { .ws-assembly__canvas { min-height: var(--geometry-max-height-16rem-868f8b1); height: var(--geometry-width-23rem-7bc0ac3); } .ws-assembly__range { grid-template-columns: 4.8rem 1fr; } }
/* A figure's parts: one contained row in the panel, in the order its steps visit them, scrolling sideways when it
   doesn't fit and keeping the picked one in view (answer-ui.js figure). */
.ws-ui__pills.ws-ui__figparts { position: relative; flex-wrap: nowrap; overflow-x: auto; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-margin-3rem-fb2375d); min-width: 0;
  border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); background: color-mix(in srgb, var(--panel-strong) 55%, transparent);
  scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.ws-ui__pills.ws-ui__figparts::-webkit-scrollbar { display: none; }
.ws-ui__figparts > .ws-ui__pill { flex: none; scroll-snap-align: center; }
.ws-ui__figparts.is-more-before { -webkit-mask-image: linear-gradient(to right, transparent, black 1.6rem); mask-image: linear-gradient(to right, transparent, black 1.6rem); }
.ws-ui__figparts.is-more-after { -webkit-mask-image: linear-gradient(to left, transparent, black 1.6rem); mask-image: linear-gradient(to left, transparent, black 1.6rem); }
.ws-ui__figparts.is-more-before.is-more-after { -webkit-mask-image: linear-gradient(to right, transparent, black 1.6rem, black calc(100% - 1.6rem), transparent);
  mask-image: linear-gradient(to right, transparent, black 1.6rem, black calc(100% - 1.6rem), transparent); }
.ws-ui__figframe { display: grid; place-items: center; padding: var(--spacing-padding-6rem-d0bc70f); border-radius:var(--r-md); background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); }
.ws-ui__figsvg { display: block; width: 100%; height: auto; max-height: var(--geometry-max-height-22rem-6313c12); color: var(--ink); overflow: visible; }
.ws-ui__figsvg.is-tall { max-height: min(var(--geometry-max-height-70vh-3bece76), var(--geometry-max-width-34rem-a36407e)); }
.ws-ui__figpart { color: color-mix(in srgb, var(--ink) 80%, var(--panel-strong)); cursor: pointer; transition: transform var(--dur-row) var(--ease-out, var(--motion-animation-ease-out-791c2d0)), opacity var(--public-dur-hover) var(--motion-transition-ease-914ff41), color var(--public-dur-hover) var(--motion-transition-ease-914ff41); }
.ws-ui__figpart.is-moving { transition: opacity var(--public-dur-hover) var(--motion-transition-ease-914ff41), color var(--public-dur-hover) var(--motion-transition-ease-914ff41); }
.ws-ui__figpart.is-dim { opacity: .2; }
.ws-ui__figpart.is-picked { color: var(--accent); }
.ws-ui__fighit, .ws-ui__fighit * { stroke: transparent; stroke-width: var(--geometry-border-radius-14px-09f9739); fill: none; pointer-events: stroke; }
.ws-ui__figarea { fill: transparent; stroke: none; pointer-events: all; }
.ws-ui__figtext { fill: currentColor; stroke: none; font-family: var(--font-ui); font-weight: var(--type-weight-control); }
.ws-ui__figcallout { pointer-events: none; color: var(--ink); }
.ws-ui__figlead { stroke: currentColor; stroke-width: 1; opacity: .8; }
.ws-ui__figdot { fill: currentColor; stroke: none; }
.ws-ui__figlabel { fill: currentColor; stroke: none; font-family: var(--font-ui); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-ui__figapart { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); }
.ws-ui__figrange { width: 100%; height: var(--geometry-width-2rem-bca5ebd); margin: 0; accent-color: var(--accent); touch-action: pan-y; }
.ws-ui__figends { display: flex; justify-content: space-between; color: var(--dim); font-size: var(--typography-font-size-74rem-bc7c01a); }
.ws-ui__figabout { display: grid; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-ui__figheading { font-size: var(--typography-font-size-1rem-b8be0c7); }
@media (prefers-reduced-motion: reduce) { .ws-ui__figpart { transition: none; } }
/* A story: scenes and choices. */
.ws-ui__story { display: grid; gap: var(--spacing-padding-65rem-bcca6ce); }
.ws-ui__storyhead { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); min-height: var(--geometry-width-2rem-bca5ebd); }
.ws-ui__storyback { margin-left: var(--spacing-margin-4rem-088589b); }
.ws-ui__trail { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-3rem-fb2375d); margin: 0; padding: 0; list-style: none; }
.ws-ui__trail li { display: inline-flex; align-items: center; padding: var(--spacing-gap-15rem-e51094a) var(--spacing-gap-55rem-f5020a7); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel-strong); color: var(--muted); font-size: var(--typography-font-size-74rem-bc7c01a); }
.ws-ui__storytitle { font-size: var(--typography-font-size-1rem-b8be0c7); }
.ws-ui__storytext { margin: 0; line-height: var(--typography-line-height-1-6-ec6c168); font-size: var(--typography-font-size-98rem-ba83cc0); overflow-wrap: anywhere; }
.ws-ui__story[data-tone="ok"] .ws-ui__storytext { color: var(--ok); } .ws-ui__story[data-tone="warn"] .ws-ui__storytext { color: var(--warn); }
.ws-ui__story[data-tone="no"] .ws-ui__storytext { color: var(--danger); }
/* Versions: drafts side by side, with what changed. */
.ws-ui__versions { display: grid; gap: var(--spacing-gap-55rem-f5020a7); }
.ws-ui__draft { padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-85rem-2e72ebc); border-radius:var(--r-sm); background: var(--panel-strong); box-shadow: inset 0 0 0 1px var(--line-soft); line-height: var(--typography-line-height-1-6-ec6c168);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-ui__draft ins { text-decoration: none; border-radius: var(--geometry-text-underline-offset-4px-3566015); background: color-mix(in srgb, var(--ok) 22%, transparent); }
.ws-ui__draft del { color: var(--dim); text-decoration-color: var(--danger); }
.ws-ui__draftnote { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-ui__draftbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-ui__changes[aria-pressed="true"] { color: var(--accent); background: var(--accent-surface); }
/* Order: things put in order, or ranked. */
.ws-ui__order { display: grid; gap: var(--spacing-gap-55rem-f5020a7); }
.ws-ui__orderlist { display: grid; gap: var(--spacing-gap-35rem-1304a2b); margin: 0; padding: 0; list-style: none; }
.ws-ui__orderrow { display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); min-height: var(--geometry-min-height-2-75rem-3cc807c); padding: var(--spacing-padding-25rem-1677828) var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-25rem-1677828) var(--spacing-gap-55rem-f5020a7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel-strong); }
.ws-ui__orderrow > svg { display: block; flex: none; }
.ws-ui__orderrow.is-right { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); } .ws-ui__orderrow.is-right > svg { color: var(--ok); }
.ws-ui__orderrow.is-wrong { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); } .ws-ui__orderrow.is-wrong > svg { color: var(--danger); }
.ws-ui__rank { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--geometry-width-1-6rem-9ef54f1); height: var(--geometry-width-1-6rem-9ef54f1); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel);
  color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); font-weight: var(--typography-font-weight-700-99ee502); font-variant-numeric: tabular-nums; }
.ws-ui__ordertext { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ws-ui__move { flex: none; }
/* Match: pairs put together. */
.ws-ui__match { display: grid; gap: var(--spacing-gap-55rem-f5020a7); }
.ws-ui__matchhead { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__matchmiss { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-ui__matchgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-ui__matchcol { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); align-content: start; }
.ws-ui__matchitem { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); min-height: var(--geometry-min-height-2-75rem-3cc807c); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-65rem-bcca6ce); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel-strong);
  color: var(--ink); font: inherit; font-size: var(--typography-font-size-9rem-2ad2e76); text-align: left; cursor: pointer; }
.ws-ui__matchitem > svg { display: block; flex: none; color: var(--ok); }
.ws-ui__matchitem > span { min-width: 0; overflow-wrap: anywhere; }
.ws-ui__matchitem[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ws-ui__matchitem.is-done { opacity: .6; cursor: default; border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.ws-ui__matchitem.is-wrong { border-color: var(--danger); animation: ws-ui-shake var(--motion-transition-350ms-cbe7c0b) var(--motion-transition-ease-914ff41); }
@keyframes ws-ui-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .ws-ui__matchitem.is-wrong { animation: none; } }
/* Form: questions back to the person. */
.ws-ui__form { display: grid; gap: var(--spacing-gap-8rem-818b9f7); }
.ws-ui__scaleends { display: flex; justify-content: space-between; color: var(--dim); font-size: var(--typography-font-size-74rem-bc7c01a); }
/* Palette: colors, how readable text is on each, and a sample. */
.ws-ui__palettewrap { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-ui__palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__swatch { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-55rem-f5020a7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-md); background: var(--panel-strong); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.ws-ui__swatchchip { display: grid; place-items: center; gap: var(--spacing-padding-1rem-4e95f32); height: var(--geometry-min-height-4-5rem-41dca9e); border-radius:var(--r-sm); box-shadow: inset 0 0 0 1px rgb(127 127 127 / .25); }
.ws-ui__swatchsample { font-size: var(--typography-font-size-1-15rem-3b14c93); font-weight: var(--typography-font-weight-700-99ee502); line-height: var(--typography-line-height-1-6b86b27); }
.ws-ui__swatchchip small { font-size: var(--typography-font-size-68rem-41c61ff); font-weight: var(--type-weight-control); opacity: .9; }
.ws-ui__swatchtext { display: grid; gap: var(--spacing-padding-05rem-98939d1); padding: 0 var(--spacing-padding-25rem-1677828); min-width: 0; }
.ws-ui__swatchtext strong { font-size: var(--typography-font-size-86rem-d03e951); overflow-wrap: anywhere; }
.ws-ui__swatchtext code { padding: 0; background: none; color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-ui__swatchtext small { color: var(--dim); font-size: var(--typography-font-size-74rem-bc7c01a); }
.ws-ui__palettesample { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-padding-75rem-4cf1798); flex-wrap: wrap; padding: var(--spacing-padding-1rem-b8be0c7) var(--spacing-padding-left-1-1rem-14af91b); border-radius:var(--r-md); }
.ws-ui__palettesample strong { font-size: var(--typography-font-size-1-1rem-14af91b); }
.ws-ui__gradientpreview { min-height: calc(var(--geometry-min-height-4-5rem-41dca9e) * 2); border-radius:var(--r-md); }
.ws-ui__palettewrap--gradient .ws-ui__swatchchip { height: calc(var(--geometry-min-height-4-5rem-41dca9e) / 2); }
.ws-ui__palettebutton { display: inline-flex; align-items: center; padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-8rem-818b9f7); border-radius: var(--geometry-border-radius-999px-088f244); font-size: var(--typography-font-size-82rem-8da80e1); font-weight: var(--typography-font-weight-700-99ee502); }
/* Editor: a list kept in place (a receipt's items, the table's people). */
.ws-ui__editor { display: grid; gap: var(--spacing-gap-55rem-f5020a7); }
.ws-ui__editorrows { display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__editrow { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-7rem-7eff2a1) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-md); background: var(--panel-strong); }
.ws-ui__edithead { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-width-2rem-bca5ebd); }
.ws-ui__editnum { color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-04em-5c4d123); text-transform: uppercase; }
.ws-ui__remove { margin-right: var(--spacing-margin-35rem-94ce370); }
.ws-ui__editfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); }
.ws-ui__editfields > .ws-ui__editmulti { grid-column: 1 / -1; }
.ws-ui__editmulti { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-35rem-1304a2b) var(--spacing-padding-9rem-2ad2e76); margin: 0; padding: 0; border: 0; min-width: 0; }
.ws-ui__editmulti legend { width: 100%; margin-bottom: var(--spacing-padding-25rem-1677828); padding: 0; }
.ws-ui__editcheck { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); min-height: var(--geometry-width-2rem-bca5ebd); cursor: pointer; }
.ws-ui__editcheck input { flex: none; width: var(--geometry-width-1-1rem-14af91b); height: var(--geometry-width-1-1rem-14af91b); margin: 0; accent-color: var(--accent); }
/* Held to act (Unfold, Reasoning): a press never selects the words or opens the phone's copy menu. */
.ws-ui__holdable { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Reasoning: a tree, the conclusion at its root. Light runs up the branches while the argument holds; a doubted step cuts
   its branch and the break climbs to what rested on it. */
.ws-ui__reasoning { --live: var(--accent); --cut: var(--warn); --fall: var(--danger); display: grid; gap: var(--spacing-gap-7rem-7eff2a1); }
.ws-ui__argsum { --tone: var(--ok); display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); color: var(--muted); font-size: var(--typography-font-size-86rem-d03e951); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-ui__argsum[data-tone="warn"] { --tone: var(--warn); color: var(--ink); }
.ws-ui__argsum > span:nth-child(2) { flex: 1 1 14rem; min-width: 0; }
.ws-ui__argsum .ws-ui__calloutmark { color: var(--tone); }
.ws-ui__argtree { display: grid; gap: var(--spacing-padding-1rem-4e95f32); margin: 0; padding: 0; list-style: none; }
.ws-ui__argtree .ws-ui__argtree { margin: var(--spacing-padding-1rem-4e95f32) 0 0 var(--spacing-padding-42rem-2191e7d); padding-left: var(--spacing-padding-1-25rem-c10b7e1); }
.ws-ui__argtree li { position: relative; }
/* A branch: the rail down from the step above, then the elbow into this step's dot. */
.ws-ui__argtree .ws-ui__argtree > li::before { content: ""; position: absolute; left: -1.25rem; top: 0; width: var(--geometry-width-1-05rem-8c6e288); height: var(--geometry-width-1-2rem-a7b00d3);
  border-left: var(--geometry-outline-2px-7476140) solid var(--branch, var(--line)); border-bottom: var(--geometry-outline-2px-7476140) solid var(--branch, var(--line)); border-bottom-left-radius: var(--geometry-border-bottom-left-radius-9px-12a8299);
  transition: border-color var(--motion-transition-350ms-cbe7c0b) var(--motion-transition-ease-914ff41); transition-delay: var(--delay, 0ms); }
.ws-ui__argtree .ws-ui__argtree > li:not(:last-child)::after { content: ""; position: absolute; left: -1.25rem; top: 0; bottom: 0; border-left: var(--geometry-outline-2px-7476140) solid var(--line); }
.ws-ui__argtree li[data-state="holds"] { --branch: color-mix(in srgb, var(--live) 55%, var(--line)); }
.ws-ui__argtree li[data-state="doubted"] { --branch: var(--cut); }
.ws-ui__argtree li[data-state="broken"] { --branch: color-mix(in srgb, var(--fall) 70%, var(--line)); }
.ws-ui__argtree li[data-state="holds"]::before { animation: ws-ui-current var(--motion-animation-2800ms-5e92a6d) var(--motion-animation-ease-in-out-16c2539) infinite; animation-delay: var(--lag, 0s); }
@keyframes ws-ui-current { 0%, 70%, 100% { filter: none; } 35% { filter: drop-shadow(0 0 3px var(--live)); border-color: var(--live); } }
/* A step: its dot on the branch, a small kind, the words, and Doubt. */
.ws-ui__claim { --k: var(--accent); position: relative; display: grid; gap: var(--spacing-gap-15rem-e51094a); padding: var(--spacing-margin-3rem-fb2375d) 0 var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-9rem-2ad2e76); transition-delay: var(--delay, 0ms); }
.ws-ui__claim::before { content: ""; position: absolute; left: -.2rem; top: .78rem; width: var(--geometry-width-62rem-936c74c); height: var(--geometry-width-62rem-936c74c); margin-top: var(--spacing-margin-top-31rem-a62e9fa); border-radius: var(--geometry-border-radius-999px-088f244);
  background: var(--live); box-shadow: 0 0 0 3px var(--panel), 0 0 8px color-mix(in srgb, var(--live) 70%, transparent);
  transition: background-color var(--motion-transition-350ms-cbe7c0b) var(--motion-transition-ease-914ff41), box-shadow var(--motion-transition-350ms-cbe7c0b) var(--motion-transition-ease-914ff41); transition-delay: var(--delay, 0ms); }
.ws-ui__argtree.is-top > li > .ws-ui__claim::before { width: var(--geometry-width-8rem-818b9f7); height: var(--geometry-width-8rem-818b9f7); margin-top: var(--spacing-margin-4rem-088589b); left: -.3rem; }
.ws-ui__claim[data-state="doubted"]::before { background: var(--panel); box-shadow: 0 0 0 3px var(--panel), inset 0 0 0 2px var(--cut); }
.ws-ui__claim[data-state="broken"]::before { background: var(--fall); box-shadow: 0 0 0 3px var(--panel); }
.ws-ui__claim[data-kind="fact"] { --k: var(--ok); } .ws-ui__claim[data-kind="assumption"] { --k: var(--warn); }
.ws-ui__claim[data-kind="judgement"] { --k: var(--violet, var(--accent)); } .ws-ui__claim[data-kind="conclusion"] { --k: var(--muted); }
.ws-ui__claimhead { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); min-height: var(--geometry-width-1-6rem-9ef54f1); }
.ws-ui__kind { color: var(--k); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-02em-3e41986); }
.ws-ui__argstatus { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); color: var(--ok); font-size: var(--typography-font-size-74rem-bc7c01a); font-weight: var(--type-weight-control); }
.ws-ui__argstatus > svg { display: block; flex: none; }
.ws-ui__claim[data-state="broken"] .ws-ui__argstatus { color: var(--fall); }
.ws-ui__doubt { flex: none; margin: var(--spacing-margin-35rem-94ce370) var(--spacing-margin-35rem-94ce370) var(--spacing-margin-35rem-94ce370) auto; color: var(--dim); }
.ws-ui__doubt[aria-pressed="true"] { color: var(--cut); background: color-mix(in srgb, var(--cut) 14%, transparent); }
.ws-ui__claimtext { margin: 0; line-height: var(--type-line-body); overflow-wrap: anywhere; border-radius:var(--r-xs); transition: color var(--dur-major) var(--motion-transition-ease-914ff41); transition-delay: var(--delay, 0ms); }
.ws-ui__argtree.is-top > li > .ws-ui__claim > .ws-ui__claimtext { font-weight: var(--typography-font-weight-650-2099a9b); font-size: var(--typography-font-size-1-02rem-f6100ff); }
.ws-ui__claimnote { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-ui__argsource { justify-self: start; color: var(--accent); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-ui__argwhy { color: var(--fall); font-size: var(--typography-font-size-78rem-6850684); line-height: var(--typography-line-height-1-4-1a948f1); }
.ws-ui__claim[data-state="doubted"] .ws-ui__argwhy { color: var(--cut); }
.ws-ui__claim[data-state="doubted"] .ws-ui__claimtext { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cut) 80%, transparent); }
.ws-ui__claim[data-state="broken"] .ws-ui__claimtext { color: var(--muted); }
.ws-ui__claim.is-breaking .ws-ui__claimtext { animation: ws-ui-break var(--motion-transition-600ms-c2d8e9c) var(--motion-transition-ease-914ff41) both; animation-delay: var(--delay, 0ms); }
.ws-ui__claim.is-mending .ws-ui__claimtext { animation: ws-ui-mend var(--motion-transition-600ms-c2d8e9c) var(--motion-transition-ease-914ff41) both; }
@keyframes ws-ui-break { 30% { color: var(--fall); text-shadow: 0 0 10px color-mix(in srgb, var(--fall) 60%, transparent); } }
@keyframes ws-ui-mend { 30% { color: var(--live); text-shadow: 0 0 10px color-mix(in srgb, var(--live) 60%, transparent); } }
/* Holding a step to doubt it: the words warm as the hold fills. */
.ws-ui__claimtext.ws-ui__holdable { cursor: pointer; background-image: linear-gradient(color-mix(in srgb, var(--cut) 26%, transparent), color-mix(in srgb, var(--cut) 26%, transparent));
  background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size var(--dur-control) var(--motion-transition-ease-914ff41), color var(--dur-major) var(--motion-transition-ease-914ff41); }
.ws-ui__claimtext.is-pressing { background-size: 100% 100%; transition: background-size var(--motion-transition-450ms-5df2141) var(--motion-animation-linear-7f2fe58); }
.ws-ui__claimtext.is-held { animation: ws-ui-held var(--dur-row) var(--motion-transition-ease-914ff41); }
@media (prefers-reduced-motion: reduce) {
  .ws-ui__argtree li[data-state="holds"]::before, .ws-ui__claim.is-breaking .ws-ui__claimtext, .ws-ui__claim.is-mending .ws-ui__claimtext { animation: none; }
  .ws-ui__claim, .ws-ui__claim::before, .ws-ui__argtree li::before, .ws-ui__claimtext { transition: none; }
}
/* Unfold: the answer's own prose, short by default, growing in place where it's held (stretchtext). */
.ws-ui.is-bare { padding: 0; border: 0; border-radius: 0; background: none; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__unfoldwrap { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-ui__unfold { min-width: 0; }
.ws-ui__unfoldp { margin: 0 0 var(--spacing-gap-8rem-818b9f7); line-height: var(--typography-line-height-1-75-f4881c7); overflow-wrap: anywhere; }
.ws-ui__unfoldp:last-child { margin-bottom: 0; }
.ws-ui__grow { display: inline; margin: 0; padding: 0 var(--spacing-padding-06em-9679667); border: 0; border-radius:var(--r-xs); color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: var(--geometry-text-underline-offset-24em-47772f2); text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background-color: transparent; background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
  background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--dur-page-out) var(--motion-transition-ease-914ff41), text-decoration-color var(--dur-page-out) var(--motion-transition-ease-914ff41), box-shadow var(--public-dur-hover) var(--motion-transition-ease-914ff41); }
.ws-ui__grow:hover { text-decoration-color: var(--accent); }
.ws-ui__grow[aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: var(--accent); }
.ws-ui__grow:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-outline-2px-7476140); }
/* The hold: a highlighter sweeps across the line and it glows, then a pulse as it opens. */
.ws-ui__grow.is-pressing { background-size: 100% 100%; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); transition: background-size var(--motion-transition-450ms-5df2141) var(--motion-transition-cubic-bezier-4-0-6-1-ac05f63), box-shadow var(--motion-transition-450ms-5df2141) var(--motion-transition-ease-914ff41); }
.ws-ui__holdable.is-held { animation: ws-ui-held var(--dur-row) var(--motion-transition-ease-914ff41); }
@keyframes ws-ui-held { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent, 0 0 0 transparent; } }
/* What it holds: tinted so it's clear what grew, a little stronger each level; it blooms in and fades out. */
.ws-ui__more { padding: var(--spacing-padding-12rem-ac4570c) var(--spacing-padding-28rem-a506b0a); border-radius:var(--r-xs); background: color-mix(in srgb, var(--accent) 13%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: opacity var(--dur-page-out) var(--motion-transition-ease-914ff41), filter var(--dur-page-out) var(--motion-transition-ease-914ff41); }
.ws-ui__more[data-depth="2"] { background: color-mix(in srgb, var(--accent) 19%, transparent); }
.ws-ui__more[data-depth="3"] { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-ui__more.is-new { animation: ws-ui-bloom var(--motion-animation-550ms-a45f587) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-ui__more.is-closing { opacity: 0; filter: blur(3px); }
@keyframes ws-ui-bloom { from { opacity: 0; filter: blur(5px); background-color: color-mix(in srgb, var(--accent) 34%, transparent); } }
.ws-ui__unfoldbar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-8rem-818b9f7); min-height: var(--geometry-width-1-5rem-b81aec4); }
.ws-ui__unfoldhint { color: var(--dim); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-ui__unfoldhint.is-nudged { animation: ws-ui-nudge var(--motion-transition-600ms-c2d8e9c) var(--motion-transition-ease-914ff41); }
@keyframes ws-ui-nudge { 30% { color: var(--accent); } }
.ws-ui__unfoldall { display: inline-flex; align-items: center; margin-left: auto; padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-1rem-4e95f32); border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--typography-font-size-76rem-a2a5d3f);
  font-weight: var(--type-weight-control); cursor: pointer; }
.ws-ui__unfoldall:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .ws-ui__grow, .ws-ui__grow.is-pressing, .ws-ui__more { transition: none; }
  .ws-ui__holdable.is-held, .ws-ui__more.is-new, .ws-ui__unfoldhint.is-nudged { animation: none; }
}
/* Building itself on screen, once, as an answer lands: parts rise in turn; a reasoning tree grows out from its root
   (each branch draws down, its step's dot pops, its words arrive); a figure draws its lines; prose arrives by paragraph. */
.ws-ui.is-growing > .ws-ui__head { animation: ws-ui-rise var(--motion-animation-400ms-d8e24dc) both; }
.ws-ui.is-growing > .ws-ui__body > * { animation: ws-ui-rise var(--dur-row) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e) both; animation-delay: calc(var(--i, 0) * var(--motion-animation-delay-90ms-1ad97a9) + var(--motion-transition-delay-80ms-b21be29)); }
@keyframes ws-ui-rise { from { opacity: 0; transform: translateY(8px); } }
.ws-ui.is-growing .ws-ui__argtree .ws-ui__argtree > li::before, .ws-ui.is-growing .ws-ui__argtree .ws-ui__argtree > li::after {
  animation: ws-ui-branch var(--motion-transition-450ms-5df2141) var(--motion-animation-ease-out-791c2d0) both; animation-delay: calc(var(--grow, 0s) + var(--motion-animation-delay-100ms-82504a0)); }
@keyframes ws-ui-branch { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ws-ui.is-growing .ws-ui__claim::before { animation: ws-ui-pop var(--motion-animation-400ms-d8e24dc) var(--motion-animation-cubic-bezier-3-1-6-5-1-b2a6852) both; animation-delay: calc(var(--grow, 0s) + var(--motion-animation-delay-400ms-d8e24dc)); }
@keyframes ws-ui-pop { from { transform: scale(0); } }
.ws-ui.is-growing .ws-ui__claim > :not(.ws-ui__claimhead), .ws-ui.is-growing .ws-ui__claimhead > * { animation: ws-ui-sprout var(--motion-transition-450ms-5df2141) var(--motion-animation-ease-out-791c2d0) both; animation-delay: calc(var(--grow, 0s) + var(--motion-animation-delay-450ms-5df2141)); }
.ws-ui.is-growing .ws-ui__argtree li { --grow-own: var(--grow); }
.ws-ui.is-growing .ws-ui__argtree li > .ws-ui__claim .ws-ui__claimhead > *, .ws-ui.is-growing .ws-ui__argtree li > .ws-ui__claim > * { animation-delay: calc(var(--grow-own, 0s) + var(--motion-animation-delay-450ms-5df2141)); }
@keyframes ws-ui-sprout { from { opacity: 0; transform: translateX(-6px); } }
.ws-ui.is-growing .ws-ui__figpart :is(path, line, polyline, polygon, circle, ellipse, rect):not(.ws-ui__figarea) {
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: ws-ui-draw var(--motion-animation-1300ms-005f704) var(--motion-animation-cubic-bezier-4-0-2-1-1cf8baf) forwards, ws-ui-fill var(--motion-animation-900ms-a42092c) var(--motion-transition-ease-914ff41) both;
  animation-delay: calc(var(--draw, 0s) + var(--motion-animation-delay-200ms-04c0990)), calc(var(--draw, 0s) + var(--motion-animation-delay-800ms-15c734b)); }
@keyframes ws-ui-fill { from { fill-opacity: 0; } }
.ws-ui.is-growing .ws-ui__figpart text { animation: ws-ui-rise var(--dur-row) both; animation-delay: calc(var(--draw, 0s) + var(--motion-animation-delay-900ms-a42092c)); }
@keyframes ws-ui-draw { to { stroke-dashoffset: 0; } }
.ws-ui.is-growing .ws-ui__unfoldp { animation: ws-ui-rise var(--motion-animation-550ms-a45f587) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e) both; animation-delay: calc(var(--p, 0) * var(--motion-animation-delay-160ms-30f551f) + var(--motion-animation-delay-60ms-f3bf8b9)); }
@media (prefers-reduced-motion: reduce) { .ws-ui.is-growing *, .ws-ui.is-growing *::before, .ws-ui.is-growing *::after { animation: none !important; } }
/* A web picture in an answer, through Dyadic. */
img.ws-webimage { display: block; max-width: 100%; max-height: var(--geometry-max-width-26rem-36abcba); height: auto; margin: var(--spacing-padding-6rem-d0bc70f) 0; border-radius:var(--r-sm); background: var(--panel-strong); }
/* A card's picture and tint. */
.ws-ui__card.has-image { padding-top: 0; overflow: hidden; }
.ws-ui__cardimage { display: block; width: calc(100% + var(--geometry-width-1-6rem-9ef54f1)); max-width: none; height: var(--geometry-max-width-8-5rem-6cb06ca); margin: 0 var(--spacing-margin-8rem-7d6b22c) var(--spacing-padding-25rem-1677828); object-fit: cover; background: var(--panel-strong); }
.ws-ui__card.is-tinted { background: color-mix(in srgb, var(--tint) 16%, var(--panel)); border-color: color-mix(in srgb, var(--tint) 35%, var(--line)); }
/* Being built (the answer still streaming), and a tool that couldn't be shown. */
.ws-ui.is-building .ws-ui__title > svg { animation: ws-ui-pulse var(--motion-animation-1400ms-e605013) var(--motion-animation-ease-in-out-16c2539) infinite; }
.ws-ui__skeleton { display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-ui__skeleton > i { display: block; height: var(--geometry-width-8rem-818b9f7); border-radius: var(--geometry-border-radius-999px-088f244); background: linear-gradient(90deg, var(--panel-strong), var(--line-soft), var(--panel-strong)); background-size: 200% 100%;
  animation: ws-ui-shimmer var(--motion-animation-1600ms-aa635fb) var(--motion-animation-linear-7f2fe58) infinite; }
.ws-ui__skeleton > i:nth-child(2) { width: 82%; } .ws-ui__skeleton > i:nth-child(3) { width: 58%; height: var(--geometry-width-2-2rem-ac5d0c3); border-radius:var(--r-sm); }
@keyframes ws-ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes ws-ui-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ws-ui__skeleton > i, .ws-ui.is-building .ws-ui__title > svg { animation: none; } }
.ws-ui.is-broken { gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-ui__brokennote { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); margin: 0; color: var(--muted); }
.ws-ui__brokennote > svg { display: block; flex: none; color: var(--warn); }
.ws-ui.is-broken summary { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); color: var(--muted); font-size: var(--typography-font-size-84rem-a4deb85); cursor: pointer; list-style: none; }
.ws-ui.is-broken summary > svg { display: block; flex: none; }
.ws-ui.is-broken pre { max-height: var(--geometry-min-width-14rem-0eb654d); overflow: auto; font-size: var(--typography-font-size-76rem-a2a5d3f); }
@media (max-width: 600px) {
  .ws-ui { padding: var(--spacing-gap-8rem-818b9f7) var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-85rem-2e72ebc); }
  .ws-ui__number { grid-template-columns: 1fr; }
  .ws-ui__stepper { justify-self: start; }
  .ws-ui__driver { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--spacing-padding-25rem-1677828); }
  .ws-ui__driverbar { grid-column: 1 / -1; grid-row: 2; }
}
/* End of what an answer can draw with. */
/* The Outline panel: the chat's questions (each jumps to its place) and its sources. */
.ws-outline { list-style: none; margin: var(--spacing-margin-3rem-fb2375d) 0 var(--spacing-padding-left-1-1rem-14af91b); padding: 0; display: grid; gap: var(--spacing-padding-1rem-4e95f32); counter-reset: ws-q; }
.ws-outline li { counter-increment: ws-q; }
.ws-outline__q { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: start; gap: var(--spacing-gap-35rem-1304a2b); width: 100%; padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-gap-55rem-f5020a7); border: 0; border-radius:var(--r-sm);
  background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-88rem-39c360b); line-height: var(--typography-line-height-1-4-1a948f1); text-align: left; cursor: pointer; }
.ws-outline__q::before { content: counter(ws-q); color: var(--dim); font-weight: var(--typography-font-weight-700-99ee502); font-size: var(--typography-font-size-8rem-818b9f7); line-height: var(--typography-line-height-1-75-f4881c7); }
.ws-outline__q span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ws-outline__q:hover, .ws-outline__q:focus-visible { background: var(--panel-strong); }
.ws-outline__sources .ws-sourcerow { padding: var(--spacing-padding-65rem-bcca6ce) 0; }

/* Under the newest answer: one row of refinements (Continue, Shorter, More
   detail, Simpler, Chart or table). A phone scrolls it sideways; it never wraps. */
.ws-refine { display: flex; flex-wrap: nowrap; gap: var(--spacing-gap-35rem-1304a2b); margin-top: var(--spacing-gap-55rem-f5020a7); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ws-refine::-webkit-scrollbar { display: none; }
/* The same size as the chips above them, text and icon centered. */
.ws-refine .ws-chip--action { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-margin-3rem-fb2375d); box-sizing: border-box;
  height: var(--geometry-min-height-1-75rem-672ca1c); padding: 0 var(--spacing-padding-65rem-bcca6ce); font-size: var(--typography-font-size-75rem-4cf1798); line-height: var(--typography-line-height-1-6b86b27); white-space: nowrap; }
.ws-refine .ws-chip--action > * { display: block; flex: none; line-height: var(--typography-line-height-1-6b86b27); }
/* Your newest question: a pencil edits it and answers again. */
.ws-msg__edit { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-margin-3rem-fb2375d); }
.ws-msg__edit:hover, .ws-msg__edit:focus-visible { color: var(--accent); }
.ws-edit { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-edit__input { display: block; width: 100%; box-sizing: border-box; min-height: var(--geometry-min-height-4-5rem-41dca9e); max-height: var(--geometry-height-20rem-33fb3b6); resize: vertical; font: inherit; line-height: var(--type-line-body);
  background: var(--panel); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--accent); border-radius: var(--icon-radius); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-8rem-818b9f7); }
.ws-edit__input:focus, .ws-edit__input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-edit__actions { display: flex; justify-content: flex-end; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-edit__actions .ws-button--small { min-height: var(--geometry-width-2rem-bca5ebd); }
@media (max-width: 700px) { .ws-refine, .ws-edit { clear: left; } }

/* The viewer's prompt sheet: under the image, folded to two lines; tap or
   pull up for the whole prompt (it rises over the image), pull down or tap to
   fold it. One row of actions. The stage keeps the folded sheet's height
   (--sheet-h, measured in workspace.js) free, so the image is never covered. */
/* A definite grid area, so the image's max-height: 100% keeps it above the folded sheet. */
.ws-lightbox__stage { padding-bottom: var(--sheet-h, var(--spacing-padding-top-0px-33a3c91)); grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.ws-psheet__editor { display: block; width: 100%; box-sizing: border-box; resize: none; margin: var(--spacing-padding-25rem-1677828) 0 0; padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-7rem-7eff2a1); border-radius:var(--r-sm);
  border: var(--geometry-border-1px-93e2062) solid var(--color-border-ffffff2e-283a2b0); background: var(--color-background-ffffff0d-7d54572); color: var(--color-color-eef2fb-e11b6df); font: inherit; font-size: var(--typography-font-size-92rem-c7cd355); line-height: var(--typography-line-height-1-45-6918de1); max-height: var(--geometry-max-height-40dvh-8aaa909); overflow-y: auto; }
.ws-psheet__editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.ws-psheet.is-editing { box-shadow: 0 -18px 50px var(--color-box-shadow-000000a6-ac868d3); }
.ws-psheet { grid-row: 2 / 3; grid-column: 1 / -1; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; width: min(100% - var(--geometry-width-1-5rem-b81aec4), var(--geometry-max-width-42rem-1c03b3d)); margin: 0 auto var(--spacing-margin-5rem-ef026cb);
  display: flex; flex-direction: column; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-75rem-4cf1798); border-radius:var(--r-lg); border: var(--geometry-border-1px-93e2062) solid var(--color-border-ffffff17-8656384);
  background: var(--color-background-0e1424f0-c2f3fee); box-shadow: 0 -10px 34px var(--color-box-shadow-00000073-7d30994); backdrop-filter: blur(16px); color: var(--color-color-eef2fb-e11b6df); transition: box-shadow var(--dur-page-out) var(--motion-transition-ease-914ff41); }
.ws-psheet__head { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); border-radius:var(--r-md); cursor: pointer; touch-action: none; outline-offset: var(--geometry-height-3px-ac33ff9); }
.ws-psheet__grip { flex: none; width: var(--geometry-height-2-25rem-e1d2841); height: var(--geometry-text-underline-offset-4px-3566015); border-radius: var(--geometry-text-underline-offset-4px-3566015); background: var(--color-background-ffffff3d-213254a); visibility: hidden; touch-action: none; }
.ws-psheet.is-clamped .ws-psheet__grip { visibility: visible; }
.ws-psheet:not(.is-clamped) .ws-psheet__head { cursor: text; }
.ws-psheet__text { margin: 0; width: 100%; font-size: var(--typography-font-size-92rem-c7cd355); line-height: var(--typography-line-height-1-45-6918de1); color: var(--color-color-e3e9f4-5b54ad2); white-space: pre-line; overflow-wrap: anywhere; user-select: text;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ws-psheet.is-open { box-shadow: 0 -18px 50px var(--color-box-shadow-000000a6-ac868d3); }
.ws-psheet.is-open .ws-psheet__head { touch-action: auto; }
.ws-psheet.is-open .ws-psheet__text { display: block; -webkit-line-clamp: unset; max-height: min(var(--geometry-max-height-44dvh-6c52233), var(--geometry-max-height-22rem-6313c12)); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.ws-psheet__actions { display: flex; justify-content: center; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-lightbox .ws-psheet__btn { flex: 1 1 0; max-width: var(--geometry-min-height-9rem-b70c018); width: auto; min-width: 0; height: var(--geometry-min-height-2-6rem-ee2b419); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-margin-4rem-7fdc8b1);
  padding: 0 var(--spacing-padding-6rem-d0bc70f); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--color-background-ffffff14-6db808b); color: var(--color-color-eef2fb-e11b6df); font-size: var(--typography-font-size-86rem-d03e951); font-weight: var(--type-weight-control); white-space: nowrap; }
.ws-lightbox .ws-psheet__btn span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .ws-psheet__actions { gap: var(--spacing-gap-35rem-1304a2b); } .ws-lightbox .ws-psheet__btn { padding: 0 var(--spacing-margin-4rem-7fdc8b1); gap: var(--spacing-margin-3rem-fb2375d); font-size: var(--typography-font-size-82rem-8da80e1); } }
.ws-lightbox .ws-psheet__btn:hover, .ws-lightbox .ws-psheet__btn:focus-visible { background: var(--color-background-ffffff26-6fec928); }
.ws-lightbox .ws-psheet__btn--primary { background: var(--color-color-eef2fb-e11b6df); color: var(--accent-ink); }
.ws-lightbox .ws-psheet__btn--primary:hover, .ws-lightbox .ws-psheet__btn--primary:focus-visible { background: var(--knob); }
@media (prefers-reduced-motion: reduce) { .ws-psheet { transition: none; } }

/* Imagine, the image studio: styles, then every image in columns (each in its
   own shape), then the prompt box fixed to the bottom of the page. */
.ws-messages:has(> .ws-studio) { padding-bottom: 0; gap: 0; }
.ws-studio { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--spacing-padding-1rem-b8be0c7); width: 100%; max-width: var(--geometry-max-width-76rem-f017994); margin: 0 auto; }
/* Twelve styles: one row, sliding sideways where they don't all fit (a phone), its edges fading. */
.ws-studio__styles { display: flex; gap: var(--spacing-margin-5rem-ef026cb); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  margin: var(--spacing-margin-4px-cb4f74e); padding: var(--spacing-gap-4px-3566015); scroll-padding-inline: 4px; --fade-start: var(--color-mask-image-000-81ef715); --fade-end: var(--color-mask-image-000-81ef715);
  mask-image: linear-gradient(to right, var(--fade-start), var(--color-mask-image-000-81ef715) 1.25rem, var(--color-mask-image-000-81ef715) calc(100% - 1.75rem), var(--fade-end)); }
.ws-studio__styles.is-more-before { --fade-start: transparent; }
.ws-studio__styles.is-more-after { --fade-end: transparent; }
.ws-studio__styles::-webkit-scrollbar { display: none; }
.ws-style { flex: 1 0 4.4rem; min-width: 0; max-width: var(--geometry-max-width-5-75rem-6cc2609); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.ws-style__tile { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: var(--geometry-width-16px-6793164); color: var(--color-background-fff-e08de71);
  background: linear-gradient(140deg, color-mix(in srgb, var(--from) 78%, var(--accent-ink)), color-mix(in srgb, var(--to) 62%, var(--accent-ink)));
  box-shadow: inset 0 0 0 1px var(--color-background-ffffff1f-86d7d2f); transition: transform var(--dur-micro) var(--motion-transition-ease-914ff41), box-shadow var(--dur-micro) var(--motion-transition-ease-914ff41); }
.ws-style__tile svg { width: 40%; height: auto; max-width: var(--geometry-width-26px-48984c3); filter: drop-shadow(0 1px 2px var(--color-filter-0005-f7a3357)); }
.ws-style__name { max-width: 100%; font-size: var(--typography-font-size-7rem-7eff2a1); font-weight: var(--type-weight-control); line-height: var(--typography-line-height-1-2-77ac319); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-style:hover .ws-style__tile { transform: translateY(-1px); }
.ws-style:focus-visible { outline: none; }
.ws-style:focus-visible .ws-style__tile { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-style[aria-checked="true"] { color: var(--ink); }
.ws-style[aria-checked="true"] .ws-style__tile { box-shadow: inset 0 0 0 1px var(--color-box-shadow-ffffff40-2c2200c), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.ws-studio__grid { display: flex; gap: var(--spacing-margin-5rem-ef026cb); align-items: flex-start; }
.ws-studio__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-studio__tile { position: relative; display: block; width: 100%; min-height: var(--geometry-width-3rem-550d167); padding: 0; border: 0; border-radius:var(--r-md); overflow: hidden; background: var(--panel); cursor: zoom-in; }
.ws-studio__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-studio__wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-padding-1rem-b8be0c7) var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-1-5rem-b81aec4); border: var(--geometry-border-1px-93e2062) solid var(--line);
  color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); text-align: center; cursor: default;
  background: linear-gradient(110deg, var(--panel) 30%, color-mix(in srgb, var(--accent) 9%, var(--panel)) 50%, var(--panel) 70%) 0 0 / 200% 100% repeat-x; animation: ws-imagine-shimmer var(--motion-animation-1800ms-6a6f4c8) var(--motion-animation-linear-7f2fe58) infinite; }
.ws-studio__wait strong { color: var(--ink); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-studio__wait small { font-size: var(--typography-font-size-74rem-bc7c01a); line-height: var(--typography-line-height-1-35-98737cf); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-studio__wait.is-failed { animation: none; background: var(--panel); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ws-studio__wait.is-failed > svg { color: var(--danger); }
.ws-studio__progress { position: absolute; left: .85rem; right: .85rem; bottom: .8rem; height: var(--geometry-text-underline-offset-4px-3566015); border-radius: var(--geometry-text-underline-offset-4px-3566015); overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.ws-studio__slow { opacity: 0; color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); animation: var(--motion-animation-400ms-d8e24dc) var(--motion-animation-ease-out-791c2d0) both ws-studio-slow; }
@keyframes ws-studio-slow { to { opacity: 1; } }
.ws-studio__progress i { display: block; height: 100%; width: 4%; border-radius: inherit; background: var(--accent); animation: ws-imagine-progress var(--motion-animation-30000ms-f2b0fa3) var(--motion-animation-cubic-bezier-12-6-3-1-2d5a446) forwards; }
.ws-studio__cancel { position: absolute; top: .4rem; right: .4rem; display: grid; place-items: center; width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--muted); cursor: pointer; }
.ws-studio__cancel:hover, .ws-studio__cancel:focus-visible { color: var(--ink); background: var(--paper); }
@keyframes ws-imagine-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes ws-imagine-progress { from { width: 4%; } to { width: 94%; } }
@media (prefers-reduced-motion: reduce) { .ws-studio__wait { animation: none; } .ws-style__tile { transition: none; } }
.ws-studio__empty { flex: 1; min-width: 0; display: grid; justify-items: center; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-padding-3rem-550d167) var(--spacing-padding-1rem-b8be0c7); color: var(--muted); text-align: center; }
.ws-studio__empty p { max-width: var(--geometry-max-height-22rem-6313c12); margin: 0; font-size: var(--typography-font-size-9rem-2ad2e76); line-height: var(--type-line-body); }
/* The prompt box: the words over one row of reference, quality, shape and Generate. */
.ws-studio__bar { position: sticky; bottom: 0; z-index: 3; margin-top: auto; padding: var(--spacing-padding-1-25rem-c10b7e1) 0 calc(var(--spacing-padding-75rem-4cf1798) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91)));
  background: linear-gradient(to top, var(--paper) 62%, color-mix(in srgb, var(--paper) 0%, transparent)); }
.ws-studio__box { max-width: var(--geometry-max-width-46rem-a77c1a9); margin: 0 auto; display: flex; flex-direction: column; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-margin-5rem-ef026cb); border-radius:var(--r-lg);
  border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 80%, transparent); background: var(--panel); box-shadow: var(--shadow); transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), box-shadow var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-studio__box:focus-within { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-studio__input { display: block; width: 100%; min-height: var(--geometry-min-height-2-4rem-84ca4d0); max-height: var(--geometry-min-height-10rem-04d0579); resize: none; overflow-y: auto; padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-margin-5rem-ef026cb); border: 0; background: transparent; color: var(--ink); font: inherit; line-height: var(--type-line-body); }
.ws-studio__input:focus, .ws-studio__input:focus-visible { outline: none; }
.ws-studio__row { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); min-width: 0; }
.ws-studio__chip { flex: none; display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); height: var(--geometry-min-height-2-4rem-84ca4d0); padding: 0 var(--spacing-padding-75rem-4cf1798); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244);
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--typography-font-size-8rem-818b9f7); white-space: nowrap; cursor: pointer; }
.ws-studio__chip:hover, .ws-studio__chip:focus-visible { border-color: var(--muted); }
.ws-studio__chip strong { font-weight: var(--type-weight-control); }
.ws-studio__chip > svg:last-child { color: var(--muted); margin-right: var(--spacing-margin-2rem-1d814c7); }
.ws-studio__chip .ws-aspect__box { border-radius: var(--geometry-height-3px-ac33ff9); }
.ws-studio__cost { color: var(--muted); font-size: var(--typography-font-size-74rem-bc7c01a); font-variant-numeric: tabular-nums; }
.ws-studio__attach { width: var(--geometry-min-height-2-4rem-84ca4d0); padding: 0; justify-content: center; color: var(--muted); }
/* Enhance: on, the idea is written out as a full prompt before it's drawn. */
.ws-studio__enhance { color: var(--muted); }
.ws-studio__enhance[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-surface); }
.ws-studio__enhance[aria-pressed="true"] > svg { color: var(--accent); }
.ws-studio__enhance:disabled { opacity: .5; cursor: default; }
.ws-studio__row.is-tight .ws-studio__enhance > span { display: none; }
.ws-studio__row.is-tight .ws-studio__enhance { width: var(--geometry-min-height-2-4rem-84ca4d0); padding: 0; justify-content: center; }
.ws-studio__attach > svg:last-child { margin: 0; }
.ws-studio__go { margin-left: auto; flex: none; }
.ws-studio__ref:empty { display: none; }
.ws-studio__thumb { position: relative; display: block; width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); flex: none; }
.ws-studio__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius:var(--r-sm); border: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-studio__thumb.is-loading img { opacity: .5; }
.ws-studio__thumb button { position: absolute; top: -.3rem; right: -.3rem; display: grid; place-items: center; width: var(--geometry-width-1-15rem-3b14c93); height: var(--geometry-width-1-15rem-3b14c93); padding: 0; border: 0; border-radius: 50%;
  background: var(--ink); color: var(--paper); cursor: pointer; }
.ws-menu button.is-current { background: var(--accent-surface); font-weight: var(--type-weight-control); }
.ws-menu .ws-aspect__box { margin-inline: var(--spacing-padding-1rem-4e95f32); border-radius: var(--geometry-height-3px-ac33ff9); }
@media (max-width: 420px) { .ws-studio__chip { padding: 0 var(--spacing-padding-6rem-d0bc70f); } .ws-studio__styles { gap: var(--spacing-gap-35rem-1304a2b); }
  /* Room for how many on a phone: the pills drop their chevrons (they still open their menus). */
  .ws-studio__chip:not(.ws-studio__attach) > svg:last-child { display: none; } }
/* A prompt's session: Back and the prompt as a chip on one row; then its
   images; then Generate more, which fills as you pull past the end. */
.ws-studio__head { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-studio__back { flex: none; display: grid; place-items: center; width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); padding: 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: 50%;
  background: var(--panel); color: var(--ink); cursor: pointer; }
.ws-studio__prompt { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-min-height-2-4rem-84ca4d0); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid var(--line);
  border-radius: var(--geometry-width-1-2rem-a7b00d3); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--typography-font-size-9rem-2ad2e76); line-height: var(--typography-line-height-1-35-98737cf); text-align: left; cursor: text; }
.ws-studio__prompt span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ws-studio__prompt img { flex: none; width: var(--geometry-width-1-6rem-9ef54f1); height: var(--geometry-width-1-6rem-9ef54f1); margin-left: var(--spacing-margin-left-55rem-c4481c0); border-radius: 50%; object-fit: cover; }
.ws-studio__back:hover, .ws-studio__back:focus-visible, .ws-studio__prompt:hover, .ws-studio__prompt:focus-visible { border-color: var(--muted); outline: none; }
.ws-studio__foot { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); padding-top: var(--spacing-padding-25rem-1677828); }
.ws-studio__more { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-45rem-ef5b39f); width: 100%; max-width: var(--geometry-max-height-22rem-6313c12); height: var(--geometry-min-height-2-75rem-3cc807c);
  padding: 0 var(--spacing-padding-1-25rem-c10b7e1); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--typography-font-size-9rem-2ad2e76); font-weight: var(--type-weight-control); cursor: pointer;
  isolation: isolate; transition: background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-studio__more > svg, .ws-studio__label { position: relative; z-index: 1; }
.ws-studio__fill { position: absolute; inset: 0 auto 0 0; z-index: 0; width: calc(var(--fill, 0) * 100%); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ws-studio__more.is-springing .ws-studio__fill { transition: width var(--motion-transition-280ms-5bd7b93) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-studio__more.is-full { border-color: var(--accent); background: var(--accent); color: var(--color-background-fff-e08de71); }
.ws-studio__more.is-full .ws-studio__fill { opacity: 0; }
.ws-studio__more:hover:not(:disabled), .ws-studio__more:focus-visible { border-color: var(--muted); outline: none; }
.ws-studio__more:disabled { opacity: .55; cursor: default; }
.ws-studio__row.is-tight [data-imagine-aspect] > span:not(.ws-aspect__box), .ws-studio__row.is-tight [data-imagine-count] > svg:first-child { display: none; }
.ws-studio__note { max-width: var(--geometry-max-width-26rem-36abcba); margin: 0; color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); line-height: var(--typography-line-height-1-4-1a948f1); text-align: center; }
@media (prefers-reduced-motion: reduce) { .ws-studio__more.is-springing .ws-studio__fill { transition: none; } }

/* What an answer did as it worked: "Worked for 13.7s", collapsed; live while it runs; the Tools sheet. */
.ws-activity { margin: var(--spacing-padding-1rem-4e95f32) 0 var(--spacing-margin-5rem-ef026cb); color: var(--muted); }
.ws-activity summary { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); max-width: 100%; cursor: pointer; list-style: none; font-size: var(--typography-font-size-86rem-d03e951); }
.ws-activity summary::-webkit-details-marker { display: none; }
.ws-activity__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-activity.is-live .ws-activity__label { color: var(--ink); }
.ws-activity__list { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); margin: var(--spacing-margin-5rem-ef026cb) 0 var(--spacing-margin-2rem-4cd30ed); padding-left: var(--spacing-gap-7rem-7eff2a1); border-left: var(--geometry-outline-2px-7476140) solid var(--line); }
.ws-sheet .ws-activity__list { padding-left: 0; border-left: 0; }
.ws-activity__note { margin: 0; color: var(--ink); font-size: var(--typography-font-size-88rem-39c360b); line-height: var(--typography-line-height-1-45-6918de1); }
/* While an answer runs, its latest note reads as message text below "Working · 3 Steps". */
.ws-activity__now { margin: var(--spacing-gap-35rem-1304a2b) 0 var(--spacing-padding-6rem-d0bc70f); color: var(--ink); line-height: var(--typography-line-height-1-6-ec6c168); overflow-wrap: anywhere; }
.ws-activity__tool { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-activity__icon { display: grid; place-items: center; margin-top: var(--spacing-padding-1rem-4e95f32); color: var(--ok); }
.ws-activity__tool.is-running .ws-activity__icon { color: var(--muted); }
.ws-activity__tool.is-failed .ws-activity__icon, .ws-activity__error { color: var(--danger); }
.ws-activity__main { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-activity__main strong { color: var(--ink); font-weight: var(--type-weight-control); }
.ws-activity__main small { overflow-wrap: anywhere; color: var(--muted); }
.ws-activity__main small.ws-activity__code { font-family: var(--font-mono); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-activity__time { color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); font-variant-numeric: tabular-nums; }
.ws-activity__facts { margin: 0 0 var(--spacing-padding-6rem-d0bc70f); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-chip--tools small { margin-left: var(--spacing-gap-15rem-e51094a); color: var(--muted); }
.ws-chip--tools.is-failed svg { color: var(--danger); }
/* Under an answer every chip is one size, its text and icon centered: Time, Tools, Sources, image actions. */
.ws-msg__foot > :is(.ws-chip, .ws-sourcepill), .ws-msg__foot .ws-imgactions > .ws-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-margin-3rem-fb2375d); box-sizing: border-box;
  height: var(--geometry-min-height-1-75rem-672ca1c); margin: 0; padding: 0 var(--spacing-padding-65rem-bcca6ce); font-size: var(--typography-font-size-75rem-4cf1798); line-height: var(--typography-line-height-1-6b86b27); }
.ws-msg__foot > .ws-sourcepill { padding-left: var(--spacing-margin-3rem-fb2375d); }
.ws-msg__foot > :is(.ws-chip, .ws-sourcepill) > *, .ws-msg__foot .ws-imgactions > .ws-chip > * { display: block; flex: none; line-height: var(--typography-line-height-1-6b86b27); }
.ws-msg__foot .ws-sourcepill__icons { display: inline-flex; }
.ws-msg__foot .ws-sourcepill__icons > * { width: var(--geometry-width-16px-6793164); height: var(--geometry-width-16px-6793164); }
.ws-activity__tool.is-skipped .ws-activity__icon { color: var(--muted); }
.ws-activity__tool.is-revised .ws-activity__icon, .ws-activity__revised { color: var(--info); }
/* Settings: a profile, then rounded groups of rows; each row opens its screen in the modal. */
.ws-setprofile { display: grid; justify-items: center; gap: var(--spacing-margin-3rem-fb2375d); margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-padding-1rem-b8be0c7); text-align: center; }
.ws-setprofile .ws-avatar, .ws-setprofile > :first-child { width: var(--geometry-min-height-4-5rem-41dca9e); height: var(--geometry-min-height-4-5rem-41dca9e); font-size: var(--typography-font-size-1-6rem-9ef54f1); }
.ws-setprofile strong { font-size: var(--typography-font-size-1-1rem-14af91b); }
.ws-setgroup { overflow: hidden; margin: 0 0 var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: var(--r-xl); background: var(--panel-strong); }
.ws-setgroup--pad { padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-1rem-b8be0c7); }
.ws-setrow { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--spacing-padding-85rem-2e72ebc); width: 100%; min-height: var(--geometry-min-height-3-25rem-f432a91); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-padding-1rem-b8be0c7);
  border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
/* Rows divide with a soft rule that starts under the label, not the icon (iOS and Android settings lists). */
.ws-setgroup > .ws-setrow + .ws-setrow::before { content: ""; position: absolute; top: 0; left: 3.05rem; right: 0; border-top: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ws-setgroup > .ws-setrow:first-child { border-top: 0; }
.ws-setrow > svg:first-child { color: var(--ink); }
/* The chevron keeps the last column whether or not a value comes before it, so every row's lines up. */
.ws-setrow > svg:last-child { grid-column: 4; color: var(--muted); }
.ws-setrow strong { font-weight: var(--typography-font-weight-500-0604cd3); }
.ws-setrow__value { overflow: hidden; max-width: var(--geometry-min-width-14rem-0eb654d); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ws-setrow--info { cursor: default; grid-template-columns: auto 1fr auto; }
.ws-setrow--danger, .ws-setrow--danger > svg:first-child { color: var(--danger); grid-template-columns: auto 1fr; }
button.ws-setrow:hover { background: color-mix(in srgb, var(--ink) 5%, var(--panel-strong)); }
button.ws-setrow:active { background: color-mix(in srgb, var(--ink) 9%, var(--panel-strong)); }
/* Patch Preview: the correction as written, and the decision it corrects. */
.ws-patchwords { margin: 0 0 var(--spacing-padding-1rem-b8be0c7); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-gap-8rem-818b9f7); border-left: var(--geometry-height-3px-ac33ff9) solid var(--accent); border-radius: var(--geometry-text-underline-offset-4px-3566015); background: var(--accent-surface);
  color: var(--ink); font-size: var(--typography-font-size-9rem-2ad2e76); line-height: var(--typography-line-height-1-45-6918de1); overflow-wrap: anywhere; }
.ws-patchhead { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin: 0 0 var(--spacing-gap-35rem-1304a2b); font-weight: var(--type-weight-control); }
.ws-patchhead > svg { display: block; flex: none; color: var(--accent); }
/* Two lines in a row (an audit entry: what, then who and when). */
.ws-setrow__lines { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-setrow__lines small { color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); overflow-wrap: anywhere; }
.ws-invite-result { display: grid; gap: var(--spacing-margin-5rem-ef026cb); margin-top: var(--spacing-padding-75rem-4cf1798); }
.ws-setnote.ws-movelist { display: grid; gap: var(--spacing-gap-35rem-1304a2b); margin: var(--spacing-padding-1rem-b8be0c7) 0 var(--spacing-padding-1rem-b8be0c7); padding-left: var(--spacing-padding-left-1-1rem-14af91b); }
.ws-movelist__final { color: var(--ink); font-weight: var(--type-weight-control); }
/* Developers' "For": whose keys and records (your Personal workspace or an organization's), under the hub's tabs. */
.ws-tenantbar { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; margin: var(--spacing-gap-45rem-ef5b39f) 0 var(--spacing-padding-1rem-4e95f32); }
.ws-tenantbar > svg { display: block; flex: none; color: var(--muted); }
.ws-tenantbar__label { font-size: var(--typography-font-size-7rem-7eff2a1); font-weight: var(--typography-font-weight-650-2099a9b); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); }
.ws-tenantbar select { flex: 0 1 auto; min-width: 0; max-width: var(--geometry-max-height-16rem-868f8b1); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-55rem-f5020a7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244);
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-setlabel { margin: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-25rem-1677828) var(--spacing-gap-45rem-ef5b39f); color: var(--dim); font-size: var(--typography-font-size-78rem-6850684); font-weight: var(--type-weight-control); letter-spacing: var(--typography-letter-spacing-02em-3e41986); text-transform: none; }
.ws-setnote { margin: var(--spacing-margin-left-5rem-64b3937) var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-1rem-b8be0c7); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-search-stats { display: grid; gap: 12px; min-width: 0; }
.ws-search-stats > .ws-segmented { justify-self: start; }
.ws-search-stats-note { margin: 0; font-size: var(--typography-font-size-8rem-818b9f7); }
/* Admin > Experiments > Evaluations: each mode's results for a task type, validated success first. */
.ws-evalgroup { display: grid; gap: var(--spacing-padding-1px-93e2062); overflow: hidden; margin: 0 0 var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid var(--line-soft); border-radius: var(--r-xl); background: var(--line-soft); }
.ws-evalrow { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-padding-9rem-2ad2e76); background: var(--panel-strong); min-width: 0; }
.ws-evalrow p { margin: 0; font-size: var(--typography-font-size-82rem-8da80e1); overflow-wrap: anywhere; }
.ws-evalrow__head { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-evalrow__head svg { display: block; flex: none; }
.ws-evalrow__head .ws-muted { margin-left: auto; font-size: var(--typography-font-size-8rem-818b9f7); white-space: nowrap; }
.ws-evalrow__lead { font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-evalrow.is-few { opacity: .62; }
.ws-setmeter { display: grid; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-padding-9rem-2ad2e76) var(--spacing-padding-1rem-b8be0c7); }
.ws-setmeter__head { display: flex; justify-content: space-between; gap: var(--spacing-gap-8rem-818b9f7); }
.ws-setmeter__track { overflow: hidden; height: var(--geometry-height-4rem-7fdc8b1); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--line); }
.ws-setmeter__track span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
/* Security and Login: the account page's cards inside the modal. */
.ws-account.dy-auth { width: auto; max-width: none; margin: 0; padding: 0; }
/* Inside Settings the account page's sections fill the sheet; an empty status line takes no room. */
.ws-account [data-status]:empty { display: none; }
.ws-account .dy-card { border-color: var(--line-soft); }
/* Settings > General > Response Experience */
.ws-setting--slider { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-gap-55rem-f5020a7) 0; }
.ws-setting--slider input[type="range"] { width: 100%; accent-color: var(--accent); }


/* GitHub's other way in: a pasted token, under the app's buttons. */
.ws-store__alt { margin-top: var(--spacing-padding-6rem-d0bc70f); } .ws-store__alt > summary { cursor: pointer; color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); margin-bottom: var(--spacing-margin-5rem-ef026cb); }

/* Your Computer: a new computer's setup steps, each command with a copy button. */
.ws-computer__setup:empty { display: none; }
.ws-computer__setup { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); margin-top: var(--spacing-gap-8rem-818b9f7); }
.ws-computer__step { display: grid; gap: var(--spacing-padding-25rem-1677828); }
.ws-computer__cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-margin-5rem-ef026cb);
  border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); background: var(--paper); }
.ws-computer__cmd code { white-space: pre-wrap; word-break: break-all; font-size: var(--typography-font-size-8rem-818b9f7); }

/* An Iris Code session's badge in the bar. */
.ws-modebadge { color: var(--accent); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 45%, transparent); margin-left: 0; margin-right: var(--spacing-gap-45rem-ef5b39f); }

/* The modes: the switch beside New chat, its modes growing out to the left as your drawer grows up from your avatar, and what
   says which mode something is. */
.ws-modeswitch { position: relative; display: inline-flex; align-items: center; }
.ws-modeswitch button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-margin-4rem-7fdc8b1); box-sizing: border-box; height: var(--geometry-width-36px-a0a3565); min-width: var(--geometry-width-36px-a0a3565); padding: 0 var(--spacing-padding-75rem-4cf1798);
  border: 0; border-radius:var(--r-sm); background: none; color: var(--muted); font: 600 var(--typography-font-size-8rem-818b9f7)/1 var(--font-ui); cursor: pointer; transition: background var(--dur-fast) var(--motion-transition-ease-914ff41), color var(--dur-fast) var(--motion-transition-ease-914ff41); }
.ws-modeswitch button > :is([data-icon], svg) { display: block; flex: none; line-height: 0; }
.ws-modeswitch button svg { display: block; width: var(--geometry-width-18px-ab98c04); height: var(--geometry-width-18px-ab98c04); }
.ws-modeswitch button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ws-modeswitch button:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-border-1px-93e2062); }
.ws-modeswitch__current, .ws-modeswitch button[aria-checked="true"] { background: var(--accent-surface); color: var(--accent); }
.ws-modeswitch__current[aria-expanded="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.ws-modeswitch__label { display: block; }
.ws-modeswitch__drawer { position: absolute; right: calc(100% + 4px); top: 50%; z-index: 40; translate: 0 -50%; pointer-events: none; visibility: hidden;
  clip-path: inset(-8px -8px -8px 100% round 12px); transition: clip-path var(--dur-drawer) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e), visibility 0s var(--motion-animation-linear-7f2fe58) var(--dur-drawer); }
.ws-modeswitch__drawer[data-open="true"] { pointer-events: auto; visibility: visible; clip-path: inset(-8px round 12px);
  transition: clip-path var(--dur-drawer) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e), visibility 0s; }
.ws-modeswitch__inner { display: flex; align-items: center; gap: var(--spacing-gap-2px-7476140); padding: var(--spacing-gap-2px-7476140); border-radius:var(--r-sm); background: var(--panel-strong);
  box-shadow: 0 6px 18px var(--shadow-color); }
.ws-modeswitch__inner > * { opacity: 0; transform: translateX(.6rem) scale(.9); transition: opacity var(--dur-control) var(--motion-transition-ease-914ff41), transform var(--dur-theme) var(--motion-transition-cubic-bezier-2-7-2-1-74f030e); }
.ws-modeswitch__drawer[data-open="true"] .ws-modeswitch__inner > * { opacity: 1; transform: none; }
.ws-modeswitch__drawer[data-open="true"] .ws-modeswitch__inner > :nth-last-child(1) { transition-delay: var(--motion-transition-delay-20ms-d14fda3); }
.ws-modeswitch__drawer[data-open="true"] .ws-modeswitch__inner > :nth-last-child(2) { transition-delay: var(--motion-transition-delay-50ms-adf7aad); }
.ws-modeswitch__drawer[data-open="true"] .ws-modeswitch__inner > :nth-last-child(3) { transition-delay: var(--motion-transition-delay-80ms-b21be29); }
.ws-modeswitch__drawer[data-open="true"] .ws-modeswitch__inner > :nth-last-child(4) { transition-delay: var(--motion-transition-delay-110ms-006aa0c); }
.ws-modeswitch__drawer[data-open="true"] .ws-modeswitch__inner > :nth-last-child(5) { transition-delay: var(--motion-animation-delay-140ms-9202e73); }
.ws-modeswitch__drawer[data-open="true"] .ws-modeswitch__inner > :nth-last-child(6) { transition-delay: var(--motion-transition-delay-170ms-91f1d87); }
/* Under desktop width each mode is its icon (the labels stay for screen readers). */
@media (max-width: 1100px) {
  .ws-modeswitch button { width: var(--geometry-width-36px-a0a3565); padding: 0; }
  .ws-modeswitch__label { position: absolute; width: var(--geometry-border-1px-93e2062); height: var(--geometry-border-1px-93e2062); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .ws-modeswitch button, .ws-modeswitch__drawer, .ws-modeswitch__inner > * { transition: none; } }
/* Something of another mode: there, a tap away, plainly not the mode you're in. */
.ws-row.is-elsewhere, li.is-elsewhere > .ws-folder > .ws-folder__head .ws-row, li.is-elsewhere > .ws-folder > .ws-row { opacity: .5; filter: grayscale(1); }
.ws-row.is-elsewhere:hover, .ws-row.is-elsewhere:focus-visible { opacity: .8; }
/* A + sheet row that isn't this mode's: in its place, greyed and off. */
.ws-addrow--off { opacity: .45; cursor: not-allowed; }
.ws-addrow--off .ws-menuswitch { visibility: hidden; }
.ws-modetag { display: inline-flex; align-items: center; margin-left: var(--spacing-gap-45rem-ef5b39f); padding: 0 var(--spacing-margin-4rem-7fdc8b1); border-radius: var(--geometry-border-radius-999px-088f244); font: 700 var(--typography-font-size-64rem-7c98769)/1.5 var(--font-ui); letter-spacing: var(--typography-letter-spacing-03em-379847b);
  vertical-align: middle; border: var(--geometry-border-1px-93e2062) solid var(--line); color: var(--muted); }
.ws-modetag--code { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ws-modetag--research, .ws-modetag--creative, .ws-modetag--work, .ws-modetag--auto { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.ws-modefact { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-modefact > span { flex: 1; display: grid; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-store__modenote { padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-margin-2rem-4cd30ed); }

/* Library Knowledge: entries by kind, Iris's suggestions first. */
.ws-tree__shared { margin-top: var(--spacing-margin-5rem-ef026cb) !important; }
.ws-count { margin-left: auto; min-width: var(--geometry-width-1-25rem-c10b7e1); padding: 0 var(--spacing-gap-35rem-1304a2b); border-radius: var(--geometry-border-radius-999px-088f244); background: var(--accent); color: var(--accent-ink); font: 700 var(--typography-font-size-68rem-41c61ff)/var(--typography-font-size-1-25rem-c10b7e1) var(--font-ui); text-align: center; }
.ws-knowledge__tools { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-5rem-ef026cb); align-items: center; }
.ws-knowledge__tools > .ws-page-search { flex: 1 1 16rem; }
.ws-knowledge__tools > select { font: inherit; font-size: var(--typography-font-size-82rem-8da80e1); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-margin-5rem-ef026cb); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); }
.ws-knowledge section { margin-top: var(--spacing-padding-left-1-1rem-14af91b); }
.ws-knowledge h2 { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-8rem-818b9f7); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); margin: 0 0 var(--spacing-margin-5rem-ef026cb); }
.ws-knowledge__suggested { padding: var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) dashed color-mix(in srgb, var(--accent) 50%, transparent); border-radius:var(--r-sm); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ws-kcard { border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); margin-bottom: var(--spacing-margin-5rem-ef026cb); overflow: hidden; }
.ws-kcard--suggested { background: var(--paper); }
.ws-kcard > .ws-row-actions { padding: 0 var(--spacing-gap-8rem-818b9f7) var(--spacing-gap-7rem-7eff2a1); }
.ws-kcard__open { display: grid; gap: var(--spacing-padding-25rem-1677828); width: 100%; padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-gap-8rem-818b9f7); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-kcard__open:hover { background: var(--panel-strong); }
.ws-kcard__kind { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); color: var(--muted); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-04em-5c4d123); text-transform: uppercase; }
.ws-kcard__title { font-size: var(--typography-font-size-95rem-adb8a86); }
.ws-kcard__body { color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-kentry__title { margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-padding-1rem-4e95f32); font-size: var(--typography-font-size-1-05rem-8c6e288); }
.ws-kentry__body { margin: var(--spacing-padding-6rem-d0bc70f) 0; }
.ws-kversion { border-top: var(--geometry-border-1px-93e2062) solid var(--line); padding: var(--spacing-gap-45rem-ef5b39f) 0; }
.ws-kversion summary { cursor: pointer; color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-ksimilar:empty { display: none; }
.ws-ksimilar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); margin: var(--spacing-margin-4rem-7fdc8b1) 0; padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f); border-radius: var(--icon-radius); background: var(--accent-surface); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-kconflict { display: grid; gap: var(--spacing-margin-5rem-ef026cb); margin: var(--spacing-margin-5rem-ef026cb) 0; padding: var(--spacing-padding-6rem-d0bc70f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-empty-state { display: grid; justify-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-padding-2-5rem-fb391dd) var(--spacing-padding-1rem-b8be0c7); text-align: center; color: var(--muted); }
.ws-empty-state h2 { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--typography-font-size-1rem-b8be0c7); }
.ws-empty-state p { max-width: var(--geometry-max-height-32rem-34ca678); }

/* Handoffs: reviewing one, and what a conversation was handed. */
.ws-hsection { margin-top: var(--spacing-gap-8rem-818b9f7); }
.ws-hsection h3 { font-size: var(--typography-font-size-82rem-8da80e1); margin: 0 0 var(--spacing-gap-35rem-1304a2b); }
.ws-hlines { list-style: none; margin: 0 0 var(--spacing-margin-3rem-fb2375d); padding: 0; display: grid; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-hlines li { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-hlines input { flex: 1; min-width: 0; font: inherit; font-size: var(--typography-font-size-86rem-d03e951); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-55rem-f5020a7); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-hlines small { white-space: nowrap; }
.ws-hrecords { padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-7rem-7eff2a1); border-radius:var(--r-sm); background: var(--paper); border: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-snapshot { max-width: var(--geometry-max-width-46rem-a77c1a9); margin: 0 auto var(--spacing-padding-1rem-b8be0c7); padding: var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius:var(--r-md); background: var(--panel); display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-snapshot.is-stale { border-color: color-mix(in srgb, var(--temp, var(--warn)) 60%, transparent); }
.ws-snapshot__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-snapshot__head small { margin-left: auto; }
.ws-snapshot__title { font-size: var(--typography-font-size-98rem-ba83cc0); }
.ws-snapshot__summary { margin: 0; color: var(--ink); font-size: var(--typography-font-size-88rem-39c360b); line-height: var(--type-line-body); }
.ws-snapshot__stale { display: flex; align-items: flex-start; gap: var(--spacing-margin-4rem-7fdc8b1); margin: 0; color: var(--temp, var(--warn)); font-size: var(--typography-font-size-84rem-a4deb85); }
/* A button that reads as a link, wherever it is (it was only styled inside lists). */
button.ws-linkish { background: none; border: 0; padding: 0; color: var(--cyan, var(--accent)); font: inherit; cursor: pointer; text-align: left; }
button.ws-linkish:hover, button.ws-linkish:focus-visible { text-decoration: underline; }
.ws-list button.ws-linkish, .ws-linkrow .ws-linkish { color: var(--ink); }
.ws-knowledge h2 { justify-content: flex-start; }
.ws-project .ws-knowledge section:not(.ws-knowledge__suggested) { border: 0; padding: 0; background: none; }

/* Shared tasks and Iris Code's activity. */
.ws-tasks { display: grid; gap: var(--spacing-padding-9rem-2ad2e76); }
.ws-project .ws-tasks section, .ws-project .ws-tasks details { border: 0; padding: 0; background: none; }
.ws-tasks h2, .ws-tasks summary { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-gap-45rem-ef5b39f); margin: 0 0 var(--spacing-gap-45rem-ef5b39f); font-size: var(--typography-font-size-76rem-a2a5d3f); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--dim); cursor: default; }
.ws-tasks summary { cursor: pointer; }
.ws-tasks__list { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-taskrow { display: grid; gap: var(--spacing-padding-25rem-1677828); width: 100%; padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-taskrow:hover { background: var(--panel-strong); }
.ws-taskrow__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-8rem-818b9f7); color: var(--muted); font-size: var(--typography-font-size-78rem-6850684); }
.ws-taskrow__proof { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); color: var(--ok); }
.ws-task__head select { font: inherit; font-size: var(--typography-font-size-86rem-d03e951); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-55rem-f5020a7); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--icon-radius); }
/* A task's progress from its records: three steps in a row, four lines in its sheet, a state per criterion. */
.ws-tasklevels { display: inline-flex; flex-wrap: wrap; gap: var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-6rem-d0bc70f); }
.ws-tasklevel { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); color: var(--dim, var(--muted)); }
.ws-tasklevel.is-on { color: var(--ok); }
.ws-tasklevel svg { display: block; flex: none; }
.ws-taskrow__fail { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); color: var(--danger); }
.ws-tasklevels-list { list-style: none; margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-margin-4rem-7fdc8b1); padding: 0; display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-tasklevel-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-gap-55rem-f5020a7); align-items: center; color: var(--muted); }
.ws-tasklevel-row svg { display: block; }
.ws-tasklevel-row.is-on { color: var(--ink); }
.ws-tasklevel-row.is-on svg { color: var(--ok); }
.ws-tasklevel-row > span { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-tasklevel-row small { overflow-wrap: anywhere; }
.ws-task__missing { font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-task__notes { margin: var(--spacing-padding-6rem-d0bc70f) 0; }
.ws-task__notes > summary { cursor: pointer; color: var(--muted); font-size: var(--typography-font-size-86rem-d03e951); padding: var(--spacing-gap-35rem-1304a2b) 0; }
.ws-task.is-busy { opacity: .7; pointer-events: none; }
.ws-criterion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--spacing-gap-55rem-f5020a7); align-items: start; margin: var(--spacing-gap-35rem-1304a2b) 0; }
.ws-criterion__state { color: var(--muted); padding-top: var(--spacing-padding-1rem-4e95f32); }
.ws-criterion__state svg { display: block; }
.ws-criterion--verified .ws-criterion__state { color: var(--ok); }
.ws-criterion--accepted .ws-criterion__state { color: var(--accent); }
.ws-criterion--failed .ws-criterion__state { color: var(--danger); }
.ws-criterion--stale .ws-criterion__state, .ws-criterion--claimed .ws-criterion__state { color: var(--temp, var(--warn)); }
.ws-criterion__text { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; }
.ws-criterion__text small { overflow-wrap: anywhere; }
.ws-criterion__accept { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); font-size: var(--typography-font-size-8rem-818b9f7); color: var(--muted); cursor: pointer; min-height: var(--geometry-width-2rem-bca5ebd); }
.ws-evidence li { display: flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-activity__session { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); padding: var(--spacing-padding-6rem-d0bc70f) 0; border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-activity__session:first-of-type { border-top: 0; }
.ws-activity .ws-store__lines li { display: flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); }

/* The Iris Code editor (web/workspace/editor.js): beside the conversation (Split), or expanded with the conversation
   beside it (Editor); on phones and narrow tablets a view of its own. Colors come from these tokens. */
.ws { --cm-bg: var(--code-bg); --cm-panel: var(--code-head); --cm-ink: var(--code-ink); --cm-dim: var(--code-dim); --cm-line: var(--code-line);
  --cm-active: color-mix(in srgb, var(--ink) 4%, transparent); --cm-caret: var(--violet); --cm-selection: var(--selection);
  --cm-bracket: color-mix(in srgb, var(--ink) 9%, transparent); --cm-match: color-mix(in srgb, var(--warn) 26%, transparent);
  --cm-keyword: var(--syn-keyword); --cm-string: var(--syn-string); --cm-number: var(--syn-number); --cm-comment: var(--syn-comment);
  --cm-function: var(--syn-function); --cm-type: var(--syn-type); --cm-property: var(--syn-attr); --cm-punct: var(--code-dim);
  --cm-changed: color-mix(in srgb, var(--diff-add) 14%, transparent); }
.ws.editor-split { grid-template-columns: auto minmax(340px, 1fr) var(--ws-editor-w, 52vw); }
.ws.editor-full { grid-template-columns: auto minmax(300px, 340px) minmax(0, 1fr); }
.ws.editor-open .ws-context { display: none; }
.ws-editor { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--cm-bg); }
.ws-editor__resizer { position: absolute; left: -4px; top: 0; bottom: 0; width: var(--geometry-border-radius-8px-eb4ebe4); cursor: col-resize; z-index: 5; }
.ws-editor__resizer:hover, .ws-editor__resizer:focus-visible { background: color-mix(in srgb, var(--accent) 35%, transparent); outline: none; }
.ws.editor-full .ws-editor__resizer { display: none; }
.ws-editor__bar { display: flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); min-height: var(--geometry-min-height-2-75rem-3cc807c); padding: 0 var(--spacing-margin-4rem-7fdc8b1); border-bottom: var(--geometry-border-1px-93e2062) solid var(--cm-line); background: var(--cm-panel); }
.ws-editor__tabs { flex: 1; display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
.ws-editor__tabs::-webkit-scrollbar { display: none; }
.ws-editor__tab { display: flex; align-items: center; flex: none; max-width: var(--geometry-min-width-14rem-0eb654d); border-right: var(--geometry-border-1px-93e2062) solid var(--cm-line); color: var(--cm-dim); }
.ws-editor__tab.is-active { background: var(--cm-bg); color: var(--cm-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.ws-editor__tab > button[role="tab"] { display: flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); min-width: 0; height: 100%; padding: 0 var(--spacing-margin-3rem-fb2375d) 0 var(--spacing-gap-7rem-7eff2a1); border: 0; background: none; color: inherit; font: inherit; font-size: var(--typography-font-size-8rem-818b9f7); cursor: pointer; }
.ws-editor__tab > button[role="tab"] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-editor__tab small { font-size: var(--typography-font-size-66rem-358ab2c); color: var(--cm-dim); }
.ws-editor__tabclose { display: grid; place-items: center; width: var(--geometry-width-1-5rem-b81aec4); height: var(--geometry-width-1-5rem-b81aec4); margin-right: var(--spacing-margin-3rem-fb2375d); border: 0; border-radius:var(--r-xs); background: none; color: inherit; cursor: pointer; }
.ws-editor__tabclose:hover { background: var(--cm-active); color: var(--cm-ink); }
.ws-editor__dirty { display: inline-block; width: var(--geometry-width-5rem-ef026cb); height: var(--geometry-width-5rem-ef026cb); border-radius: 50%; background: var(--cm-caret); flex: none; }
.ws-editor__layouts button { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-55rem-f5020a7); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-editor__body { flex: 1; display: flex; min-height: 0; position: relative; }
.ws-editor__explorer { width: var(--geometry-width-15rem-ec6f0ef); flex: none; display: flex; flex-direction: column; min-height: 0; border-right: var(--geometry-border-1px-93e2062) solid var(--cm-line); background: var(--cm-panel); }
.ws-editor__explorer-head { display: flex; align-items: center; gap: var(--spacing-padding-1rem-4e95f32); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-margin-4rem-7fdc8b1) var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-7rem-7eff2a1); }
.ws-editor__explorer-head strong { flex: 1; min-width: 0; font-size: var(--typography-font-size-74rem-bc7c01a); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; color: var(--cm-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-editor__explorer-head .ws-iconbtn { width: var(--geometry-min-height-1-75rem-672ca1c); height: var(--geometry-min-height-1-75rem-672ca1c); }
.ws-editor__search { display: flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); margin: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-5rem-ef026cb) var(--spacing-margin-4rem-7fdc8b1); padding: 0 var(--spacing-margin-5rem-ef026cb); border: var(--geometry-border-1px-93e2062) solid var(--cm-line); border-radius:var(--r-sm); background: var(--cm-bg); color: var(--cm-dim); }
.ws-editor__search input { flex: 1; min-width: 0; padding: var(--spacing-gap-35rem-1304a2b) 0; border: 0; background: none; color: var(--cm-ink); font: inherit; font-size: var(--typography-font-size-8rem-818b9f7); outline: none; }
.ws-editor__tree { flex: 1; overflow: auto; padding: 0 var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-8rem-818b9f7); }
.ws-editor__item { display: flex; align-items: center; }
.ws-editor__row { flex: 1; display: flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); min-width: 0; height: var(--geometry-min-height-1-75rem-672ca1c); padding: 0 var(--spacing-gap-35rem-1304a2b) 0 calc(var(--spacing-margin-4rem-7fdc8b1) + var(--depth, 0) * var(--spacing-padding-85rem-2e72ebc)); border: 0; border-radius:var(--r-xs);
  background: none; color: var(--cm-ink); font: inherit; font-size: var(--typography-font-size-8rem-818b9f7); text-align: left; cursor: pointer; }
.ws-editor__row:hover { background: var(--cm-active); }
.ws-editor__row.is-active, .ws-filerow[aria-current="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-editor__row svg { flex: none; color: var(--cm-dim); }
.ws-editor__row[aria-expanded="true"] .ws-chev svg { transform: rotate(90deg); }
.ws-editor__spacer { width: var(--geometry-border-radius-12px-7769e81); flex: none; }
.ws-editor__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-editor__git { font: 700 var(--typography-font-size-66rem-358ab2c)/1 var(--font-mono); padding: 0 var(--spacing-gap-15rem-e51094a); }
.ws-editor__git--mod { color: var(--cm-type); } .ws-editor__git--new { color: var(--cm-string); } .ws-editor__git--del { color: var(--cm-keyword); }
.ws-editor__more { width: var(--geometry-width-1-6rem-9ef54f1); height: var(--geometry-width-1-6rem-9ef54f1); opacity: 0; }
.ws-editor__item:hover .ws-editor__more, .ws-editor__more:focus-visible { opacity: 1; }
@media (hover: none) { .ws-editor__more { opacity: .7; } }
.ws-editor__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.ws-editor__view { flex: 1; min-height: 0; }
.ws-codefield { display: block; max-height: min(var(--geometry-max-height-60vh-e3566e6), var(--geometry-max-height-32rem-34ca678)); overflow: auto; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-editor__view .cm-editor { height: 100%; }
.ws-editor__view .cm-editor.cm-focused { outline: none; }
.ws-editor__empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--spacing-margin-5rem-ef026cb); color: var(--cm-dim); text-align: center; padding: var(--spacing-padding-1rem-b8be0c7); }
.ws-editor__notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-7rem-7eff2a1); border-bottom: var(--geometry-border-1px-93e2062) solid var(--cm-line); background: var(--accent-surface); font-size: var(--typography-font-size-82rem-8da80e1); color: var(--cm-ink); }
.ws-editor__notice[data-kind="conflict"] { background: color-mix(in srgb, var(--temp, var(--warn)) 14%, var(--cm-panel)); }
.ws-editor__notice > span { flex: 1; min-width: var(--geometry-min-width-12rem-2f2f4a6); }
.ws-editor__ask { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-3rem-fb2375d); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-margin-5rem-ef026cb); border-top: var(--geometry-border-1px-93e2062) solid var(--cm-line); background: var(--cm-panel); }
.ws-editor__ask .ws-button { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-editor__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-1rem-b8be0c7); min-height: var(--geometry-width-1-6rem-9ef54f1); padding: var(--spacing-gap-15rem-e51094a) var(--spacing-gap-7rem-7eff2a1); border-top: var(--geometry-border-1px-93e2062) solid var(--cm-line); background: var(--cm-panel);
  color: var(--cm-dim); font-size: var(--typography-font-size-72rem-2a7309a); }
.ws-editor__status > span { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); }
.ws-editor__conn { margin-left: auto; }
.ws-editor__conn .ws-dot { width: var(--geometry-width-45rem-ef5b39f); height: var(--geometry-width-45rem-ef5b39f); border-radius: 50%; background: var(--ok); display: inline-block; }
.ws-editor__conn.is-off .ws-dot { background: var(--danger); }
.ws-editor__unsaved { color: var(--cm-caret); }
.ws-editor__changes { position: absolute; inset: 0; overflow: auto; padding: var(--spacing-padding-9rem-2ad2e76) var(--spacing-padding-1rem-b8be0c7) var(--spacing-padding-2rem-bca5ebd); background: var(--cm-bg); z-index: 3; }
.ws-changes__head { display: flex; align-items: center; justify-content: space-between; }
.ws-changes__head h2 { font-size: var(--typography-font-size-95rem-adb8a86); margin: 0; }
.ws-changes__run, .ws-changes__proposed { margin-top: var(--spacing-padding-9rem-2ad2e76); padding-top: var(--spacing-gap-7rem-7eff2a1); border-top: var(--geometry-border-1px-93e2062) solid var(--cm-line); display: grid; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-changes__proposed h3 { display: flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); font-size: var(--typography-font-size-82rem-8da80e1); margin: 0; color: var(--temp, var(--warn)); }
.ws-changes__runhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-changes__verdict { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); font-size: var(--typography-font-size-78rem-6850684); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-changes__verdict--tested { color: var(--ok); } .ws-changes__verdict--failed { color: var(--danger); } .ws-changes__verdict--untested { color: var(--cm-dim); }
.ws-changes__verdict--stale, .ws-changes__verdict--unclear { color: var(--warn); }
.ws-changes__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); }
.ws-changes__path { font-family: var(--font-mono); font-size: var(--typography-font-size-8rem-818b9f7); color: var(--cm-ink); word-break: break-all; }
.ws-changes__patch { max-height: var(--geometry-max-width-18rem-6796582); overflow: auto; font-size: var(--typography-font-size-75rem-4cf1798); background: var(--cm-panel); padding: var(--spacing-margin-5rem-ef026cb); border-radius:var(--r-sm); }
.ws-editor__phonenav { display: none; }
.ws-bar__editor[aria-pressed="true"] { color: var(--accent); background: var(--accent-surface); }
.ws-coderef { font-family: var(--font-mono); }
/* Narrow screens: the editor is a view of its own, with Chat, Files, Editor and Changes at the bottom. */
@media (max-width: 1100px) {
  .ws.editor-open .ws-editor { position: fixed; inset: 0; z-index: 45; border-left: 0; padding-top: env(safe-area-inset-top, var(--spacing-padding-top-0px-33a3c91)); padding-bottom: env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91)); }
  /* The sidebar opened over the editor (a swipe works there too): its scrim over the editor, under the sidebar, so a
     tap or a drag on it closes the sidebar. */
  .ws.editor-open .ws-scrim { z-index: 46; }
  .ws.editor-split, .ws.editor-full { grid-template-columns: auto minmax(0, 1fr); }
  .ws-editor__resizer, .ws-editor__layouts { display: none; }
  .ws-editor__phonenav { display: flex; border-top: var(--geometry-border-1px-93e2062) solid var(--cm-line); background: var(--cm-panel); }
  .ws-editor__phonenav button { flex: 1; display: grid; justify-items: center; gap: var(--spacing-padding-1rem-4e95f32); padding: var(--spacing-gap-45rem-ef5b39f) 0 var(--spacing-margin-5rem-ef026cb); border: 0; background: none; color: var(--cm-dim); font: inherit; font-size: var(--typography-font-size-7rem-7eff2a1); cursor: pointer; }
  .ws-editor__phonenav button[aria-current="page"] { color: var(--accent); }
  .ws-editor__explorer { position: absolute; inset: 0; width: auto; z-index: 2; border-right: 0; }
  .ws-editor[data-phone-view="editor"] .ws-editor__explorer, .ws-editor[data-phone-view="changes"] .ws-editor__explorer { display: none; }
  .ws-editor[data-phone-view="files"] .ws-editor__explorer { display: flex !important; }
  .ws-editor__explorer-toggle { display: none; }
  .ws-editor__row { height: var(--geometry-min-height-2-4rem-84ca4d0); font-size: var(--typography-font-size-9rem-2ad2e76); }
  .ws-editor__tab > button[role="tab"] { font-size: var(--typography-font-size-85rem-2e72ebc); }
  .ws-editor__view .cm-editor { font-size: var(--typography-font-size-14px-09f9739); }
}
@media (prefers-reduced-motion: no-preference) { .ws-editor__row .ws-chev svg { transition: transform var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); } }
/* With the editor open, the conversation's bar keeps only what works there (the details panel is closed meanwhile). */
.ws.editor-open .ws-bar [data-action="panel"], .ws.editor-open .ws-bar__details { display: none; }
.ws.editor-full .ws-modeswitch__label { position: absolute; width: var(--geometry-border-1px-93e2062); height: var(--geometry-border-1px-93e2062); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-store__builtin { margin-top: var(--spacing-margin-4rem-7fdc8b1); }
.ws.editor-full .ws-modeswitch button { width: var(--geometry-width-36px-a0a3565); padding: 0; }
.ws.editor-open .ws-bar__actions { min-width: 0; }
.ws-editor__view { display: block; position: relative; }
.ws.editor-open .ws-modebadge { display: none; }
/* Chips, badges and pills, everywhere: icon and text centered on both axes by their boxes, the words keeping the font's
   full line (never trimmed: see styles.css). A leading icon's side bearing comes out of the padding on its side, so both
   sides look even. */
:is(.ws-chip, .ws-tempbadge, .ws-modechip, .ws-refchip, .ws-lineage, .ws-pill, .ws-store__tag, .ws-sourcepill, .ws-studio__chip, .ws-aspect__chip,
    .ws-cite, .ws-research__source, .ws-modetag, .ws-count, .ws-tile__days, .ws-taskrow__proof, .ws-changes__verdict, .ws-imported__label) {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; box-sizing: border-box; }
:is(.ws-chip, .ws-tempbadge, .ws-modechip, .ws-refchip, .ws-lineage, .ws-pill, .ws-store__tag, .ws-sourcepill, .ws-studio__chip, .ws-aspect__chip,
    .ws-cite, .ws-research__source, .ws-modetag, .ws-count, .ws-tile__days, .ws-taskrow__proof, .ws-changes__verdict, .ws-imported__label) > :is(svg, img) {
  display: block; flex: none; }
:is(.ws-chip, .ws-tempbadge, .ws-modechip, .ws-refchip, .ws-lineage, .ws-pill, .ws-store__tag, .ws-sourcepill, .ws-studio__chip, .ws-aspect__chip,
    .ws-cite, .ws-research__source, .ws-modetag, .ws-count, .ws-tile__days, .ws-taskrow__proof, .ws-changes__verdict, .ws-imported__label) > svg:first-child:not(:only-child) {
  margin-inline-start: var(--spacing-margin-left-1px-e297ac1); }
:is(.ws-chip, .ws-tempbadge, .ws-modechip, .ws-refchip, .ws-lineage, .ws-pill, .ws-store__tag, .ws-sourcepill, .ws-studio__chip, .ws-aspect__chip,
    .ws-cite, .ws-research__source, .ws-modetag, .ws-count, .ws-tile__days, .ws-taskrow__proof, .ws-changes__verdict, .ws-imported__label) > :is(span, small, strong, b):not(:has(> :is(img, svg, span))) {
  display: block; min-width: 0; }

/* -- the four surfaces (workspace.js surfaces; motion.js moves them) ---------------------------------------------
   On a phone or tablet the sidebar, Details, Search and Activity are positioned by script while they move (a finger
   or the spring); at rest these rules hold them, at the same two positions, so nothing jumps. */
@media (max-width: 1100px) {
  .ws-nav, .ws-side, .ws-context { transition: none; }
  .ws-scrim { transition: none; }
}
.ws.is-gesturing, .ws.is-gesturing * { user-select: none; -webkit-user-select: none; }
.ws-searchui.is-pulled { will-change: transform; }

@media (max-width: 780px) { .ws-bar__activity { display: none; } }

/* Activity: a view of Details (the right sidebar). Its lists, and commands and tool calls as a timeline. */
.ws-act__sub { margin: 0 var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-2rem-4cd30ed); color: var(--dim); font-size: var(--typography-font-size-78rem-6850684); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-view="activity"] .ws-sheet__label { margin: var(--spacing-padding-1rem-b8be0c7) var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-3rem-fb2375d); }
.ws-act__list { display: grid; gap: var(--spacing-padding-1px-93e2062); }
.ws-act__row { display: flex; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); width: 100%; min-height: var(--geometry-min-height-44px-717594b); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-margin-5rem-ef026cb); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink);
  font: inherit; text-align: left; text-decoration: none; }
button.ws-act__row, a.ws-act__row { cursor: pointer; }
button.ws-act__row:hover, a.ws-act__row:hover, .ws-act__row:focus-visible { background: var(--panel-strong); }
.ws-act__icon { flex: none; display: grid; place-items: center; width: var(--geometry-min-height-1-9rem-27b2c42); height: var(--geometry-min-height-1-9rem-27b2c42); border-radius:var(--r-sm); background: var(--paper); color: var(--muted); overflow: hidden; }
.ws-act__icon img { width: 100%; height: 100%; object-fit: cover; }
.ws-act__main { flex: 1; min-width: 0; display: grid; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-act__main strong { font-size: var(--typography-font-size-88rem-39c360b); font-weight: var(--type-weight-control); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-act__main small { color: var(--dim); font-size: var(--typography-font-size-78rem-6850684); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-act__meta { flex: none; color: var(--dim); font-size: var(--typography-font-size-75rem-4cf1798); font-variant-numeric: tabular-nums; }
.ws-act__row.is-good .ws-act__icon { color: var(--ok); }
.ws-act__row.is-bad .ws-act__icon { color: var(--danger); }
.ws-act__row.is-wait .ws-act__icon, .ws-act__row.is-live .ws-act__icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.ws-act__empty { display: grid; justify-items: center; gap: var(--spacing-padding-6rem-d0bc70f); padding: var(--spacing-padding-2-5rem-fb391dd) var(--spacing-padding-1rem-b8be0c7); color: var(--muted); text-align: center; }
.ws-act__empty p { margin: 0; max-width: var(--geometry-max-width-26rem-36abcba); font-size: var(--typography-font-size-88rem-39c360b); }
.ws-act__note { color: var(--dim); font-size: var(--typography-font-size-78rem-6850684); margin: var(--spacing-padding-1rem-b8be0c7) var(--spacing-margin-3rem-fb2375d); }
/* A timeline: an icon on a line joining the steps, "Ran" and what it was for; a step opens to what exactly ran. */
.ws-act__timeline { list-style: none; margin: 0; padding: 0; }
.ws-act__item { position: relative; }
.ws-act__item:not(:last-child)::before { content: ""; position: absolute; left: calc(.5rem + 8px); top: 2.05rem; bottom: -.35rem; width: var(--geometry-border-1px-93e2062); background: var(--line); }
.ws-act__step { display: flex; align-items: flex-start; gap: var(--spacing-padding-75rem-4cf1798); width: 100%; padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-margin-5rem-ef026cb); border: 0; border-radius:var(--r-sm); background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.ws-act__step:hover, .ws-act__step:focus-visible { background: var(--panel-strong); }
.ws-act__dot { flex: none; display: grid; place-items: center; width: var(--geometry-width-17px-9bb5d32); height: var(--geometry-min-height-1-3rem-4f4935e); color: var(--muted); }
.ws-act__words { min-width: 0; line-height: var(--typography-font-size-1-3rem-4f4935e); font-size: var(--typography-font-size-9rem-2ad2e76); overflow-wrap: anywhere; }
.ws-act__words strong { font-weight: var(--type-weight-control); margin-right: var(--spacing-gap-45rem-ef5b39f); }
.ws-act__words span { color: var(--muted); }
.ws-act__item.is-bad .ws-act__dot, .ws-act__item.is-bad .ws-act__words strong { color: var(--danger); }
.ws-act__more { display: grid; justify-items: start; gap: var(--spacing-margin-4rem-7fdc8b1); padding: 0 var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-6rem-d0bc70f) calc(var(--spacing-margin-5rem-ef026cb) + var(--spacing-padding-17px-9bb5d32) + var(--spacing-padding-75rem-4cf1798)); }
.ws-act__more code { display: block; max-width: 100%; padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-55rem-f5020a7); border-radius:var(--r-sm); background: var(--paper); font-size: var(--typography-font-size-8rem-818b9f7); white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-act__more small { color: var(--dim); font-size: var(--typography-font-size-76rem-a2a5d3f); }
/* A computer's Permissions (Store, Your Computer). */
.ws-perm__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--spacing-padding-75rem-4cf1798); padding: var(--spacing-gap-55rem-f5020a7) 0;
  border-bottom: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--line) 65%, transparent); }
.ws-perm__row select { width: var(--geometry-max-width-8-5rem-6cb06ca); }
.ws-perm__levels { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); margin: var(--spacing-margin-3rem-fb2375d) 0; }
.ws-perm__rules { display: grid; gap: var(--spacing-margin-3rem-fb2375d); margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-margin-5rem-ef026cb); }
.ws-perm__rule { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-2rem-4cd30ed) var(--spacing-margin-2rem-4cd30ed) var(--spacing-gap-55rem-f5020a7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-perm__rule code { overflow-wrap: anywhere; font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-approval__always code { font-size: var(--typography-font-size-8rem-818b9f7); max-width: var(--geometry-min-width-12rem-2f2f4a6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-spinner { width: var(--geometry-width-1-1rem-14af91b); height: var(--geometry-width-1-1rem-14af91b); border-radius: 50%; border: var(--geometry-outline-2px-7476140) solid var(--line); border-top-color: var(--accent); animation: ws-spin var(--motion-animation-800ms-15c734b) var(--motion-animation-linear-7f2fe58) infinite; }
@keyframes ws-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ws-spinner { animation: none; } }

/* A sheet's actions (a task's, an entry's): icons in one row at its top, staying there while it scrolls. */
.ws-chip--task span { max-width: var(--geometry-min-width-14rem-0eb654d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sheet-actions { position: sticky; top: -.2rem; z-index: 2; display: flex; gap: var(--spacing-margin-5rem-ef026cb); margin: 0 var(--spacing-margin-1-1rem-68934d9) var(--spacing-margin-2rem-4cd30ed); padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-left-1-1rem-14af91b);
  background: var(--panel); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-sheet-action { display: grid; place-items: center; width: var(--geometry-min-height-2-9rem-8d9ef55); height: var(--geometry-min-height-2-9rem-8d9ef55); padding: 0; border-radius:var(--r-sm); }
.ws-sheet-action[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.ws-sheet-action.ws-store__danger { margin-left: auto; }
/* Long-press or right-click a task or an entry for its menu; its options button opens the same one. */
.ws-taskrow-wrap, .ws-kcard { position: relative; }
.ws-taskrow-wrap .ws-taskrow { padding-right: var(--spacing-padding-2-6rem-ee2b419); }
.ws-taskrow__more, .ws-kcard__more { position: absolute; top: .3rem; right: .3rem; }
.ws-kcard__open .ws-kcard__kind { padding-right: var(--spacing-margin-2-2rem-ac5d0c3); }
/* Library Knowledge attachments: each file with its preview, size and state (uploading with its progress, reading,
   searchable, kept but not searchable, failed), opened, retried or removed from its row. */
.ws-attach { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-attach__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-attach__list:empty { display: none; }
.ws-attach__row { position: relative; display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); min-height: var(--geometry-min-height-3-1rem-0201e25); padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-35rem-1304a2b) var(--spacing-gap-35rem-1304a2b); border: var(--geometry-border-1px-93e2062) solid var(--line);
  border-radius:var(--r-sm); background: var(--panel); overflow: hidden; }
.ws-attach__thumb { flex: 0 0 auto; display: grid; place-items: center; width: var(--geometry-min-height-2-4rem-84ca4d0); height: var(--geometry-min-height-2-4rem-84ca4d0); padding: 0; border: 0; border-radius:var(--r-sm); background: var(--panel-strong);
  color: var(--muted); overflow: hidden; cursor: pointer; }
.ws-attach__thumb:disabled { cursor: default; }
.ws-attach__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-attach__text { flex: 1; min-width: 0; display: grid; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--typography-font-size-88rem-39c360b); color: var(--ink); }
.ws-attach__state { display: flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); min-width: 0; font-size: var(--typography-font-size-74rem-bc7c01a); color: var(--muted); }
.ws-attach__state span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-attach__state svg { flex: 0 0 auto; }
.ws-attach__row.is-ready .ws-attach__state svg { color: var(--ok); }
.ws-attach__row.is-working .ws-attach__state svg { color: var(--accent); animation: ws-spin var(--motion-animation-1200ms-f8ce733) var(--motion-animation-linear-7f2fe58) infinite; }
.ws-attach__row.is-failed { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.ws-attach__row.is-failed .ws-attach__state { color: var(--red); }
.ws-attach__row.is-gone .ws-attach__name { color: var(--muted); text-decoration: line-through; }
.ws-attach__actions { flex: 0 0 auto; display: inline-flex; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-attach__actions .ws-iconbtn { width: var(--geometry-width-2-2rem-ac5d0c3); height: var(--geometry-width-2-2rem-ac5d0c3); }
.ws-attach__bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--geometry-height-3px-ac33ff9); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ws-attach__bar span { display: block; height: 100%; background: var(--accent); transition: width var(--dur-page-out) var(--motion-transition-ease-914ff41); }
.ws-attach__add { justify-self: start; }
.ws-attach__hint { margin: var(--spacing-margin-2rem-4cd30ed) 0 0; font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-kcard__meta { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-kcard__files { display: inline-flex; align-items: center; gap: var(--spacing-margin-2rem-4cd30ed); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ws-attach__row.is-working .ws-attach__state svg { animation: none; } }
/* The offer to continue in Iris Code, under the answer that made it: where it would go and the choice; once settled, one
   quiet line. */
.ws-continue { display: grid; gap: var(--spacing-gap-55rem-f5020a7); margin: var(--spacing-gap-7rem-7eff2a1) 0 var(--spacing-margin-2rem-4cd30ed); padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-85rem-2e72ebc); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius:var(--r-sm); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); max-width: var(--geometry-max-width-40rem-b4490db); }
.ws-continue__head { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-continue__head strong { font-size: var(--typography-font-size-92rem-c7cd355); }
.ws-continue__icon { display: grid; place-items: center; flex: 0 0 auto; width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); border-radius: var(--icon-radius); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); color: var(--accent); }
.ws-continue .ws-row-actions { margin-top: var(--spacing-padding-1rem-4e95f32); justify-content: flex-start; flex-wrap: wrap; }
.ws-continue__count { color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-continue.is-paused .ws-continue__count { opacity: .5; }
.ws-continue.is-settled { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-7rem-7eff2a1); margin: var(--spacing-margin-5rem-ef026cb) 0 var(--spacing-padding-1rem-4e95f32); border-color: var(--line); background: none;
  color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); width: fit-content; max-width: 100%; }
.ws-continue.is-settled svg { color: var(--accent); flex: 0 0 auto; }
/* Your Computer: a paired computer's state at a glance, and pairing one. */
.ws-computer__dot { width: var(--geometry-width-6rem-d0bc70f); height: var(--geometry-width-6rem-d0bc70f); flex: 0 0 auto; border-radius: 50%; background: var(--muted); margin: 0 var(--spacing-margin-3rem-fb2375d); }
.ws-computer__dot.is-online { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.ws-store__conn.is-paused strong { color: var(--muted); }
.ws-computer__scope { display: grid; gap: var(--spacing-padding-1rem-4e95f32); margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-margin-4rem-7fdc8b1); }
.ws-computer__found { display: flex; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); }
.ws-computer__found > span { display: grid; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-computer__found svg { color: var(--accent); flex: 0 0 auto; }

/* Settings > Appearance: four choices, each a small preview of the Workspace in that theme (its own fixed colors, so
   every card shows its theme whatever the page is in). Two across on phones, four on wider screens. */
.ws-themecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-gap-7rem-7eff2a1); margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-gap-8rem-818b9f7); }
@media (min-width: 640px) { .ws-themecards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ws-themecard { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); align-content: start; padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); background: var(--panel);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--motion-transition-ease-914ff41), background-color var(--dur-fast) var(--motion-transition-ease-914ff41), transform var(--dur-micro) var(--motion-transition-ease-914ff41); }
.ws-themecard:hover { border-color: var(--line-strong); }
.ws-themecard:active { transform: scale(.97); }
.ws-themecard[aria-checked="true"] { border-color: var(--accent); background: var(--accent-surface); box-shadow: inset 0 0 0 1px var(--accent); }
.ws-themecard__label { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); padding: 0 var(--spacing-padding-1rem-4e95f32); }
.ws-themecard__label strong { font-size: var(--typography-font-size-88rem-39c360b); font-weight: var(--type-weight-control); }
.ws-themecard__label svg { color: var(--muted); }
.ws-themecard[aria-checked="true"] .ws-themecard__label svg { color: var(--accent); }
.ws-themecard small { padding: 0 var(--spacing-padding-1rem-4e95f32); font-size: var(--typography-font-size-74rem-bc7c01a); line-height: var(--typography-line-height-1-35-98737cf); }
.ws-themecard__preview { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); border: var(--geometry-border-1px-93e2062) solid var(--pv-line); background: var(--pv-canvas); }
.ws-themecard__preview i { position: absolute; display: block; }
.ws-themecard__side { inset: 0 auto 0 0; width: 28%; background: var(--pv-side); border-right: var(--geometry-border-1px-93e2062) solid var(--pv-line); }
.ws-themecard__bubble { top: 20%; left: 38%; width: 46%; height: 18%; border-radius:var(--r-xs); background: var(--pv-bubble); }
.ws-themecard__line { top: 48%; left: 38%; width: 52%; height: 7%; border-radius: var(--geometry-text-underline-offset-4px-3566015); background: var(--pv-ink); opacity: .35; }
.ws-themecard__dot { right: 8%; bottom: 10%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--pv-accent); }
.ws-themecard--light { --pv-canvas: var(--color-background-f5f3ee-c8c1b9f); --pv-side: var(--color-background-fdfcf9-224d064); --pv-bubble: var(--color---pv-bubble-ece9e2-d94fb8f); --pv-line: var(--color-border-right-color-dbd6cc-282e897); --pv-ink: var(--color---pv-ink-1f2433-a9dd1d8); --pv-accent: var(--color---pv-accent-6a568f-a7833a6); }
.ws-themecard--dark { --pv-canvas: var(--accent-ink); --pv-side: var(--panel); --pv-bubble: var(--panel-strong); --pv-line: var(--line); --pv-ink: var(--ink); --pv-accent: var(--paint-dyad-b8a7e9); }
.ws-themecard--oled { --pv-canvas: var(--color-mask-image-000-81ef715); --pv-side: var(--color---pv-side-0a0a0d-fd32cb6); --pv-bubble: var(--color---pv-bubble-141419-1a876a7); --pv-line: var(--color---pv-line-22232b-1400f83); --pv-ink: var(--color---pv-ink-f2efe8-b3e59da); --pv-accent: var(--paint-dyad-b8a7e9); }
.ws-themecard--system { --pv-canvas: var(--accent-ink); --pv-side: var(--color-background-fdfcf9-224d064); --pv-bubble: var(--color---pv-bubble-8a8fa0-1a89db9); --pv-line: var(--color---pv-line-5c6478-2babf51); --pv-ink: var(--color---pv-bubble-8a8fa0-1a89db9); --pv-accent: var(--paint-dyad-b8a7e9); }
.ws-themecard--system .ws-themecard__preview { background: linear-gradient(115deg, var(--color-background-f5f3ee-c8c1b9f) 50%, var(--accent-ink) 50%); }
.ws-themecard--system .ws-themecard__side { background: var(--color-background-fdfcf9-224d064); border-right-color: var(--color-border-right-color-dbd6cc-282e897); }

/* Other companies' marks (brands.js): on a neutral tile, never tinted, so a multicolor logo keeps its colors and a
   one-color one (GitHub) follows the text. A connection's tile carries its state in a small dot. */
.ws-brand { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); border-radius: var(--r-sm);
  background: var(--panel); border: var(--geometry-border-1px-93e2062) solid var(--line); color: var(--ink); }
.ws-brand svg, .ws-brandmark { display: block; flex: none; }
.ws-brand--status::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: var(--geometry-width-6rem-d0bc70f); height: var(--geometry-width-6rem-d0bc70f); border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--panel); }
.ws-brand--status.is-broken::after { background: var(--warn); }
.ws-storeicon--brand { color: var(--ink); background: var(--panel); border-color: var(--line); }
:root[data-theme="light"] .ws-storeicon--brand, :root[data-theme="light"] .ws-brand { background: var(--knob); }
/* A button that connects to another company: its mark and the words, on the ordinary surface (not the accent). */
.ws-button--brand { display: inline-flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-button--primary.ws-button--brand .ws-brandmark--github { color: var(--button-text); }
.ws-activity__brand { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); }

/* Mature images (sexual; ai/moderation.py), wherever they show (workspace.js marks them): hidden while Safemode is on
   (and until the account's choice is known), blurred until a tap with Blur NSFW on, as they are with it off.
   Pictures of their own say which, over the blur; small thumbnails are only blurred. */
:root:not([data-mature="show"]):not([data-mature="blur"]) img[data-mature-id],
:root[data-mature="blur"] img[data-mature-id]:not([data-revealed]) { filter: blur(30px) saturate(.6); clip-path: inset(0); }
:is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id]) { position: relative; }
:root:not([data-mature="show"]):not([data-mature="blur"]) :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id])::after,
:root[data-mature="blur"] :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id]:not([data-revealed]))::after {
  content: "Hidden by\A Safemode"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; max-width: calc(100% - var(--geometry-width-1rem-b8be0c7)); padding: var(--spacing-margin-4rem-7fdc8b1) var(--spacing-gap-8rem-818b9f7);
  border-radius:var(--r-md); background: var(--on-image); color: var(--on-image-ink); font-size: var(--typography-font-size-76rem-a2a5d3f); font-weight: var(--type-weight-control); line-height: var(--typography-line-height-1-3-9c193c6);
  text-align: center; white-space: pre-line; overflow: hidden; pointer-events: none; backdrop-filter: blur(4px); }
:root[data-mature="blur"] :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id]:not([data-revealed]))::after {
  content: "Sexual content\A Tap to show"; }
:root[data-mature="blur"] :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile):has(> img[data-mature-id]:not([data-revealed])) { cursor: pointer; }
@media (hover: hover) { :root[data-mature="blur"] :is(.ws-zoomable, .ws-tile > button, .ws-studio__tile, .ws-lightbox__stage):has(> img[data-mature-id]:not([data-revealed]))::after {
  content: "Sexual content\A Click to show"; } }

/* A long chat's earlier messages, a page at a time, above the first one shown. */
.ws-earlier { align-self: center; display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); margin: var(--spacing-padding-25rem-1677828) auto var(--spacing-padding-75rem-4cf1798); }

/* Admin > Models (modelsScreen): the chat models, Dyadic's model per job, OpenRouter's list. */
.ws-cpnote { margin-top: var(--spacing-margin-2rem-1d814c7); }
.ws-cpmodels { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); margin-bottom: var(--spacing-padding-6rem-d0bc70f); }
.ws-cpmodel { display: grid; gap: var(--spacing-gap-45rem-ef5b39f); padding: var(--spacing-padding-75rem-4cf1798); border: var(--geometry-border-1px-93e2062) solid var(--line-soft); border-radius: var(--r-xl); background: var(--panel-strong); }
.ws-cpmodel > .ws-button { justify-self: start; }
.ws-cpmodel__head { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-cpmodel__head code, .ws-cprow code, .ws-catalog__item code { font-size: var(--typography-font-size-78rem-6850684); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-cpmodel__head code { flex: 1; }
.ws-cpmodel__about { font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-cpmodel__about:empty { display: none; }
.ws-cpmodel__foot { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); flex-wrap: wrap; }
.ws-cpmodel__foot select, .ws-stack-model select { font: inherit; font-size: var(--typography-font-size-8rem-818b9f7); padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-gap-55rem-f5020a7); background: var(--paper); color: var(--ink); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--geometry-border-radius-999px-088f244); max-width: var(--geometry-min-width-12rem-2f2f4a6); }
.ws-cpmodel__summary { margin: 0; font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-cpmodel__tools .is-tuned { color: var(--accent); }
.ws-cpsettings { display: grid; gap: var(--spacing-gap-8rem-818b9f7); margin: var(--spacing-margin-4rem-7fdc8b1) 0 var(--spacing-gap-8rem-818b9f7); }
.ws-cpsettings--columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ws-cpsettings--columns > .ws-field { min-width:0; }
.ws-cpsettings--columns > .ws-field:has(textarea) { grid-column:1 / -1; }
@media (max-width:600px) { .ws-cpsettings--columns { grid-template-columns:minmax(0,1fr); } }
/* A setting: its field with Revert to Default beside it once it's set. */
.ws-cpfield__row { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); min-width: 0; }
.ws-cpfield__row > input, .ws-cpfield__row > select, .ws-cpfield__row > textarea { flex: 1; min-width: 0; }
/* Its place is kept while it's hidden, so every field is the same width and none moves when one is set. */
.ws-cpfield__row > .ws-iconbtn[hidden] { display: inline-grid; visibility: hidden; }
.ws-cpadvanced { margin: var(--spacing-margin-2rem-4cd30ed) 0 var(--spacing-gap-8rem-818b9f7); }
.ws-cpadvanced > summary { cursor: pointer; display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); color: var(--dim); font-size: var(--typography-font-size-78rem-6850684); font-weight: var(--type-weight-control); margin: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-25rem-1677828) var(--spacing-gap-45rem-ef5b39f); }
.ws-cpsettings textarea { font-family: var(--font-mono); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-cpsettings textarea.ws-cpfield__prose { font-family: inherit; font-size: var(--typography-font-size-88rem-39c360b); line-height: var(--typography-line-height-1-45-6918de1); resize: vertical; }
.ws-cpmodel__tools { display: flex; gap: var(--spacing-padding-1rem-4e95f32); flex: none; }
.ws-cpmodel__tools .ws-icon:disabled { opacity: .35; cursor: default; }
.ws-cpactions { margin: 0 0 var(--spacing-padding-1rem-b8be0c7); }
.ws-cpgroup { display: flex; flex-direction: column; }
.ws-cprow { display: flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-padding-1rem-b8be0c7); border-top: var(--geometry-border-1px-93e2062) solid var(--line-soft); }
.ws-cprow:first-child { border-top: 0; }
.ws-cprow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-padding-12rem-ac4570c); }
.ws-cprow__text small { font-size: var(--typography-font-size-78rem-6850684); }
.ws-cprow__text code { color: var(--ink); }
.ws-cprow__actions { display: flex; gap: var(--spacing-gap-35rem-1304a2b); flex: none; }
.ws-catalog__filters { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-5rem-ef026cb); align-items: center; margin: var(--spacing-padding-6rem-d0bc70f) 0; }
.ws-catalog__filters .ws-check { margin: 0; }
.ws-catalog__bar { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin-bottom: var(--spacing-margin-5rem-ef026cb); }
.ws-catalog__bar small { flex: 1; }
.ws-catalog { display: flex; flex-direction: column; border: var(--geometry-border-1px-93e2062) solid var(--line-soft); border-radius: var(--r-xl); background: var(--panel-strong); overflow: hidden; }
.ws-catalog > p { padding: var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-1rem-b8be0c7); }
.ws-catalog__item { display: flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); width: 100%; padding: var(--spacing-padding-65rem-bcca6ce) var(--spacing-padding-1rem-b8be0c7); border: 0; border-top: var(--geometry-border-1px-93e2062) solid var(--line-soft); background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.ws-catalog__item:first-child { border-top: 0; }
.ws-catalog__item:hover { background: var(--panel); }
.ws-catalog__item > input { flex: none; width: var(--geometry-width-1-1rem-14af91b); height: var(--geometry-width-1-1rem-14af91b); accent-color: var(--accent); }
.ws-catalog__item > svg { flex: none; color: var(--muted); }
.ws-catalog__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-padding-12rem-ac4570c); }
.ws-catalog__text small { font-size: var(--typography-font-size-78rem-6850684); }
.ws-compare { overflow-x: auto; border: var(--geometry-border-1px-93e2062) solid var(--line-soft); border-radius: var(--r-xl); background: var(--panel-strong); }
.ws-compare table { border-collapse: collapse; width: 100%; font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-compare th, .ws-compare td { padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-padding-75rem-4cf1798); text-align: left; border-top: var(--geometry-border-1px-93e2062) solid var(--line-soft); vertical-align: top; min-width: var(--geometry-max-width-8rem-7a94d48); }
.ws-compare thead th { border-top: 0; font-weight: var(--type-weight-control); }
.ws-compare tbody th { color: var(--muted); font-weight: var(--typography-font-weight-500-0604cd3); min-width: var(--geometry-min-height-9rem-b70c018); position: sticky; left: 0; background: var(--panel-strong); }
.ws-compare td.is-best { color: var(--accent); font-weight: var(--type-weight-control); }
.ws-compare__about { margin-top: var(--spacing-padding-6rem-d0bc70f); font-size: var(--typography-font-size-85rem-2e72ebc); }
.ws-compare__about summary { cursor: pointer; font-weight: var(--type-weight-control); }
.ws-compare__about p { margin: var(--spacing-margin-4rem-7fdc8b1) 0 0; }
@media (max-width: 600px) { .ws-cprow { flex-wrap: wrap; } .ws-cprow__actions { width: 100%; } }

/* A plan never grows past its dock (a long check or title pushed the card sideways): every level may shrink. */
.ws-steps, .ws-step, .ws-step__row, .ws-step__head, .ws-step__body, .ws-step__line, .ws-fold { min-width: 0; max-width: 100%; }
.ws-step__title, .ws-step__body p { overflow-wrap: anywhere; }
.ws-step__head { flex: 1 1 auto; }

/* -- the nested accordion tree (tree.js): Black Box events, API requests, an answer's tools, Activity ----------------
   Rows fold under their parent behind a chevron. A line runs down from each parent to its children, with an elbow and a
   dot at each child: solid from a top-level row, dashed below that (the owner, 2026-10-15). The elbow meets a row at
   --ft-elbow, the middle of its first line. */
.ws-ftree { --ft-indent: 1.5rem; --ft-gap: .35rem; --ft-elbow: 1.2rem; --ft-x: .8rem; --ft-line: color-mix(in srgb, var(--violet) 60%, transparent);
  --ft-dash: repeating-linear-gradient(90deg, var(--ft-line) 0 3px, transparent 3px 6px);
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ft-gap); min-width: 0; }
.ws-ftree__kids { list-style: none; margin: var(--ft-gap) 0 0; padding: 0 0 0 var(--ft-indent); display: grid; gap: var(--ft-gap); min-width: 0; }
.ws-ftree__kids[hidden] { display: none; }
.ws-ftree__node { position: relative; min-width: 0; }
/* The card is the tree's own (the row inside it brings no border of its own), with the chevron inside it at the left: a
   card's left edge depends only on how deep it is (the owner, 2026-10-15: a chevron outside the card staggered a
   parent in from its children). */
.ws-ftree__item { display: flex; align-items: flex-start; min-width: 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); overflow: hidden;
  transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-ftree__item > :last-child { flex: 1 1 auto; min-width: 0; }
.ws-ftree__item > :is(.ws-log, .bb-event, .ws-activity__tool, .ws-act__item, .ws-act__answer) { margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ws-ftree__toggle { flex: none; display: grid; place-items: center; width: calc(var(--ft-x) * 2); height: calc(var(--ft-elbow) * 2 - var(--geometry-outline-2px-7476140)); margin-right: var(--spacing-margin-35rem-94ce370); padding: 0;
  border: 0; border-radius: var(--geometry-border-radius-10px-38cb6b4) 0 0 var(--geometry-border-radius-10px-38cb6b4); background: none; color: var(--muted); cursor: pointer; }
.ws-ftree__toggle:hover { color: var(--ink); }
/* A top-level card set apart; one that failed, or is open to its details, says so with its border. */
.ws-ftree > .ws-ftree__node > .ws-ftree__item { border-color: color-mix(in srgb, var(--violet) 40%, var(--line)); background: color-mix(in srgb, var(--violet) 5%, var(--panel)); }
.ws-ftree__item:has(> :is(.is-failed, .is-bad)) { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.ws-ftree__item:has(> .ws-log.is-open) { border-color: var(--accent); }
.ws-ftree__toggle svg { display: block; transform: rotate(-90deg); transition: transform var(--dur-control) var(--motion-transition-ease-914ff41); }
.ws-ftree__node.is-open > .ws-ftree__item > .ws-ftree__toggle svg { transform: none; }
/* The line down from the parent (its chevron's middle), one stretch per child, ending at the last child's elbow. */
.ws-ftree__kids > .ws-ftree__node::before { content: ""; position: absolute; left: calc(var(--ft-x) - var(--ft-indent) - 1px); top: calc(var(--ft-gap) * -1); bottom: 0;
  border-left: var(--geometry-outline-2px-7476140) var(--ft-style, solid) var(--ft-line); }
.ws-ftree__kids > .ws-ftree__node:last-child::before { bottom: auto; height: calc(var(--ft-gap) + var(--ft-elbow)); }
/* The elbow to the child, and its dot. */
.ws-ftree__kids > .ws-ftree__node::after { content: ""; position: absolute; left: calc(var(--ft-x) - var(--ft-indent)); top: calc(var(--ft-elbow) - 4px);
  width: calc(var(--ft-indent) - var(--ft-x) + var(--geometry-border-1px-93e2062)); height: var(--geometry-border-radius-8px-eb4ebe4); pointer-events: none;
  background: radial-gradient(circle, var(--violet) 0 3px, transparent 3.5px) right center / 8px 8px no-repeat,
    linear-gradient(var(--ft-line), var(--ft-line)) left center / calc(100% - 6px) 2px no-repeat; }
/* Below the first level the lines are dashed. */
.ws-ftree__kids .ws-ftree__kids { --ft-style: dashed; }
.ws-ftree__kids .ws-ftree__kids > .ws-ftree__node::after {
  background: radial-gradient(circle, var(--violet) 0 3px, transparent 3.5px) right center / 8px 8px no-repeat, var(--ft-dash) left center / calc(100% - 6px) 2px no-repeat; }
.ws-ftree__note { padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-8rem-818b9f7); }
@media (max-width: 640px) { .ws-ftree { --ft-indent: 1.15rem; --ft-x: .7rem; } }
@media (prefers-reduced-motion: reduce) { .ws-ftree__toggle svg { transition: none; } }

/* API Activity as a tree: a request's model calls fold under it, and their tool calls under them (tree.js). A request
   stays the full card; a call is a smaller one (status, model, credits, then time, tokens and how long). */
.ws-logtree { --ft-elbow: 1.45rem; }
.ws-call { animation: none; }
.ws-call__head { width: 100%; display: grid; grid-template-columns: auto 1.6rem minmax(0, 1fr) auto 14px; grid-template-areas: "status icon what credits chev" "status icon meta credits chev";
  align-items: center; column-gap: var(--spacing-gap-55rem-f5020a7); row-gap: var(--spacing-padding-1rem-4e95f32); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-7rem-7eff2a1); border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); text-align: start; }
button.ws-call__head { cursor: pointer; }
button.ws-call__head:hover { background: var(--panel-strong); }
.ws-call__head > .ws-log__status { grid-area: status; }
.ws-call__icon { grid-area: icon; display: grid; place-items: center; width: var(--geometry-width-1-6rem-9ef54f1); height: var(--geometry-width-1-6rem-9ef54f1); border-radius: 50%; color: var(--accent); background: var(--accent-surface); }
.ws-call__icon svg { display: block; }
.ws-call__what { grid-area: what; display: grid; min-width: 0; }
.ws-call__what strong, .ws-call__what small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-call__what small { color: var(--muted); font-size: var(--typography-font-size-72rem-2a7309a); }
.ws-call__head > .ws-log__num { grid-area: credits; }
.ws-call__head > svg:last-child { grid-area: chev; display: block; }
.ws-call__meta { grid-area: meta; min-width: 0; color: var(--muted); font-size: var(--typography-font-size-74rem-bc7c01a); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-call--tool .ws-call__head { grid-template-columns: auto 1.6rem minmax(0, 1fr); grid-template-areas: "status icon what" "status icon meta"; }
.ws-call--tool .ws-call__icon { color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-call--tool.is-failed .ws-call__what small { color: var(--red); }

/* The Tools popup and Activity's tool calls as trees (tree.js): each row a small rounded card; a model call (or, in
   Activity, an answer) set apart as the row its tools fold under. */
.ws-tooltree, .ws-acttree { --ft-elbow: 1.15rem; margin: var(--spacing-margin-5rem-ef026cb) 0 var(--spacing-margin-2rem-4cd30ed); }
:is(.ws-tooltree, .ws-acttree) .ws-activity__tool { padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); }
:is(.ws-tooltree, .ws-acttree) .ws-ftree__item:has(> :is(.ws-activity__round, .ws-act__answer)) { border-color: color-mix(in srgb, var(--violet) 30%, var(--line)); }
:is(.ws-tooltree, .ws-acttree) .ws-activity__round .ws-activity__icon { color: var(--violet); }
:is(.ws-tooltree, .ws-acttree) .ws-activity__round.is-failed .ws-activity__icon { color: var(--danger); }
.ws-acttree .ws-act__answer .ws-act__dot { color: var(--violet); }
.ws-acttree .ws-act__answer.is-bad .ws-act__words span { color: var(--danger); }

/* Full View on a computer: Details takes the chat's place (the sidebar stays). Its pages keep a readable width, centered. */
@media (min-width: 1101px) {
  .ws.has-context.panel-full { grid-template-columns: auto minmax(0, 1fr); }
  .ws.panel-full .ws-main { display: none; }
}
.ws.panel-full .ws-context > section, .ws.panel-full .ws-context__top > * { max-width: var(--geometry-max-width-60rem-7befac8); margin-inline: auto; }
.ws-plan__history .ws-step__icon svg { animation: none; }
/* One call card (cards.js): a request in API Activity, a run in the Black Box and a call under either, the same size and
   layout everywhere. Status dot, icon, who made it over its kind and model, badges, when and what it used, then the way
   to its page; its icon links to the same call's other pages sit at the end. */
.ws-cards { display: grid; gap: var(--spacing-gap-35rem-1304a2b); margin: 0; padding: 0; list-style: none; }
.ws-callcard { display: flex; align-items: center; min-width: 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.ws-callcard.is-failed { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.ws-callcard__main { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "dot icon what badges meta"; align-items: center; column-gap: var(--spacing-padding-6rem-d0bc70f); min-height: var(--geometry-min-height-3-25rem-f432a91); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-gap-7rem-7eff2a1);
  border: 0; border-radius: inherit; background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-84rem-a4deb85); text-align: start; }
button.ws-callcard__main { cursor: pointer; }
button.ws-callcard__main:hover { background: var(--panel-strong); }
button.ws-callcard__main:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-offset-2px-91cb4fd); }
.ws-callcard__dot { grid-area: dot; width: var(--geometry-height-55rem-f5020a7); height: var(--geometry-height-55rem-f5020a7); border-radius: 50%; background: var(--muted); }
.ws-callcard__dot.is-ok { background: var(--ok); } .ws-callcard__dot.is-bad { background: var(--red); }
.ws-callcard__dot.is-warn { background: var(--warn); } .ws-callcard__dot.is-info { background: var(--info); }
.ws-callcard__icon { grid-area: icon; display: grid; place-items: center; width: var(--geometry-min-height-1-75rem-672ca1c); height: var(--geometry-min-height-1-75rem-672ca1c); border-radius: 50%; overflow: hidden;
  background: var(--accent-surface); color: var(--accent); }
.ws-callcard__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-callcard__icon svg, .ws-callcard__go svg { display: block; }
.ws-callcard__what { grid-area: what; display: grid; min-width: 0; }
.ws-callcard__what strong, .ws-callcard__what small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-callcard__what strong { font-weight: var(--type-weight-control); }
.ws-callcard__what small { color: var(--muted); font-size: var(--typography-font-size-74rem-bc7c01a); }
.ws-callcard__badges { grid-area: badges; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-margin-3rem-fb2375d); min-width: 0; }
button.ws-callpurpose { font-family: inherit; cursor: pointer; }
button.ws-callpurpose:hover { color: var(--ink); border-color: var(--accent); }
button.ws-callpurpose:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-menu__note { margin: var(--spacing-padding-25rem-1677828) var(--spacing-padding-65rem-bcca6ce) var(--spacing-margin-5rem-ef026cb); max-width: var(--geometry-height-20rem-33fb3b6); color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); line-height: var(--typography-line-height-1-4-1a948f1); }
.ws-callcard__meta { grid-area: meta; color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }
.ws-callcard__go { flex: none; display: grid; place-items: center; align-self: stretch; padding: 0 var(--spacing-gap-7rem-7eff2a1) 0 var(--spacing-margin-2rem-4cd30ed); color: var(--muted); cursor: pointer; }
.ws-callcard__links + .ws-callcard__go { padding-left: 0; }
.ws-callcard__links { flex: none; display: flex; align-items: center; gap: var(--spacing-padding-1rem-4e95f32); padding-right: var(--spacing-gap-35rem-1304a2b); }
.ws-callcard__links .ws-iconbtn { width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); }
.ws-ftree__item > .ws-callcard { flex: 1 1 auto; margin: 0; border: 0; border-radius: 0; background: none; }
@media (max-width: 700px) {
  .ws-callcard__main { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "dot icon what" ". . meta" ". . badges"; row-gap: var(--spacing-padding-25rem-1677828); }
  .ws-callcard__badges { justify-content: flex-start; }
  .ws-callcard__badges:empty { display: none; }
}
/* A word in a pill, the color only repeating it: every status and badge on a card, in the Black Box and API Activity. */
/* The words keep the font's own metrics (line-height: normal) in a fixed-height box, so the caps sit on its middle. */
.ws-tone { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-padding-25rem-1677828); flex: 0 0 auto; box-sizing: border-box; height: var(--geometry-width-1-25rem-c10b7e1);
  font-size: var(--typography-font-size-7rem-7eff2a1); font-weight: var(--typography-font-weight-650-2099a9b); line-height: normal; padding: 0 var(--spacing-margin-5rem-ef026cb);
  border-radius: var(--r-pill); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); white-space: nowrap; }
.ws-tone--ok { color: var(--ok); } .ws-tone--warn { color: var(--warn); } .ws-tone--bad { color: var(--danger, var(--red)); }
.ws-tone--info { color: var(--info); } .ws-tone--muted { color: var(--muted); }
/* A call's page (an API request, a Black Box run): one header card, the same on both. */
.ws-callhead { display: flex; flex-direction: column; gap: var(--spacing-gap-7rem-7eff2a1); padding: var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ws-callhead__top { display: flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); min-width: 0; }
.ws-callhead__top .ws-callcard__icon { width: var(--geometry-height-2-25rem-e1d2841); height: var(--geometry-height-2-25rem-e1d2841); flex: none; }
.ws-callhead__title { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--spacing-gap-15rem-e51094a); }
.ws-callhead .ws-callhead__title h2 { display: block; margin: 0; font-size: var(--typography-font-size-1-1rem-14af91b); letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
.ws-callhead__title small { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-callhead__actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing-padding-1rem-4e95f32); }
.ws-callhead__badges { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-3rem-fb2375d); }
.ws-callhead .ws-facts { margin: 0; font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-callhead__top > .ws-pageback { margin-right: var(--spacing-margin-left-25rem-4ed7eb9); }
/* One way to open anything that folds (the owner, 2026-10-15: "to not have 100000 different ways to open an accordion"):
   a chevron on the left, pointing right while it's closed and down when it's open, the same as the trees' (tree.js). */
summary { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; flex: none; width: var(--geometry-border-radius-14px-09f9739); height: var(--geometry-border-radius-14px-09f9739); background: currentColor; opacity: .7; transition: transform var(--dur-control) var(--motion-transition-ease-914ff41);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
details[open] > summary::before { transform: rotate(90deg); }
/* No line on a card or a tile wraps (the owner, 2026-10-15): what doesn't fit ends in "…", whole in its tooltip. */
.ws-callcard__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tile > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-sevcounts { flex-wrap: nowrap; overflow: hidden; }
@media (max-width: 700px) { .ws-callcard__meta { white-space: nowrap; text-align: start; } }
/* On a phone a card's icon links sit up beside its title, so its time, tokens and credits keep the whole line. */
@media (max-width: 700px) {
  .ws-callcard { position: relative; }
  .ws-callcard__links { position: absolute; top: .3rem; right: 2rem; padding: 0; }
  .ws-callcard:has(> .ws-callcard__links) .ws-callcard__what > strong { padding-right: var(--spacing-padding-right-4-4rem-fb218c6); }
}
/* Every page's search is the same pill: one height, the words inside it at one size. */
.ws-page-search { box-sizing: border-box; height: var(--geometry-height-2-5rem-fb391dd); padding-block: 0; }
.ws-page-search input { height: 100%; padding: 0; font-size: var(--typography-font-size-88rem-39c360b); }
/* A card with calls inside folds with a tap on it (no chevron on the left); its icon links keep clear of its chevron,
   which opens its page; the dot and the icon sit on the card's middle, as the chevron does. */
.ws-ftree__node.folds-on-row > .ws-ftree__item > .ws-callcard > .ws-callcard__main { cursor: pointer; }
div.ws-callcard__main[role="button"]:hover { background: var(--panel-strong); }
div.ws-callcard__main[role="button"]:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-offset-2px-91cb4fd); }
.ws-callcard__links { gap: var(--spacing-gap-35rem-1304a2b); padding-right: 0; }
.ws-callcard__go { min-width: var(--geometry-min-height-2-75rem-3cc807c); padding: 0 var(--spacing-padding-75rem-4cf1798) 0 var(--spacing-gap-55rem-f5020a7); }
.ws-callcard__links + .ws-callcard__go { margin-left: var(--spacing-margin-5rem-ef026cb); padding-left: var(--spacing-gap-55rem-f5020a7); border-left: var(--geometry-border-1px-93e2062) solid var(--line-soft); }
.ws-callcard__dot, .ws-callcard__icon { align-self: center; }
@media (max-width: 700px) {
  .ws-callcard__main { grid-template-areas: "dot icon what" "dot icon meta" "dot icon badges"; }
  .ws-callcard__links { right: 3.4rem; }
  .ws-callcard:has(> .ws-callcard__links) .ws-callcard__what > strong { padding-right: var(--spacing-padding-top-5rem-8a37694); }
  .ws-callcard__links + .ws-callcard__go { margin-left: 0; border-left: 0; }
}
/* A call the platform refused (a plan record out of order): amber, not red. */
.ws-log__error.is-refused { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.ws-log__error.is-revised { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); }
.ws-log__heading { margin: var(--spacing-padding-9rem-2ad2e76) 0 var(--spacing-gap-35rem-1304a2b); font-size: var(--typography-font-size-8rem-818b9f7); font-weight: var(--type-weight-control); color: var(--muted); }
.ws-log__findings { margin: 0 0 var(--spacing-gap-8rem-818b9f7); padding-left: var(--spacing-padding-1-2rem-a7b00d3); display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); font-size: var(--typography-font-size-88rem-39c360b); line-height: var(--typography-line-height-1-45-6918de1); overflow-wrap: anywhere; }
/* A card's two ways in (the owner, 2026-10-15: "blended", "distinguishable", "make it look good"):
   - its page: an accent chevron at the card's right edge, nothing behind it;
   - what's inside: a count bubble on the corner of its icon ("+3"), cut out of the card, a ring while open.
   Its icon links are quiet round icons with a soft fill. */
.ws-callcard { overflow: hidden; }
.ws-callcard__go { flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 var(--spacing-gap-8rem-818b9f7) 0 var(--spacing-margin-3rem-fb2375d); border: 0; background: none;
  color: var(--violet, var(--accent)); cursor: pointer; }
.ws-callcard__go svg { width: var(--geometry-width-18px-ab98c04); height: var(--geometry-width-18px-ab98c04); }
.ws-callcard.is-failed .ws-callcard__go { color: var(--red); }
.ws-callcard__links { gap: var(--spacing-margin-3rem-fb2375d); padding-right: var(--spacing-gap-15rem-e51094a); }
.ws-callcard__links .ws-iconbtn, .ws-callhead__actions .ws-iconbtn { width: var(--geometry-width-2rem-bca5ebd); height: var(--geometry-width-2rem-bca5ebd); border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); }
.ws-callcard__links .ws-iconbtn:hover, .ws-callhead__actions .ws-iconbtn:hover { background: color-mix(in srgb, var(--violet, var(--accent)) 18%, transparent);
  color: var(--ink); }
.ws-callhead__actions { gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-callcard__icon { position: relative; overflow: visible; }
.ws-callcard__icon > img { border-radius: 50%; }
.ws-callcard__count { position: absolute; right: -.45rem; bottom: -.35rem; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--geometry-width-1-2rem-a7b00d3); height: var(--geometry-width-1-05rem-8c6e288); padding: 0 var(--spacing-padding-28rem-a506b0a); border-radius: var(--geometry-border-radius-999px-088f244); font-size: var(--typography-font-size-6rem-d0bc70f); font-weight: var(--typography-font-weight-800-1a1cf79); letter-spacing: var(--typography-letter-spacing-01em-d57b5fa);
  color: var(--ink); background: var(--panel-strong);
  box-shadow: 0 0 0 2px var(--panel); transition: background var(--dur-page-out) var(--motion-transition-ease-914ff41), color var(--dur-page-out) var(--motion-transition-ease-914ff41); }
.ws-ftree__node.is-open > .ws-ftree__item > .ws-callcard .ws-callcard__count { background: var(--panel); color: var(--ink);
  box-shadow: 0 0 0 2px var(--panel), inset 0 0 0 1.5px var(--line); }
.ws-ftree__node.folds-on-row > .ws-ftree__item > .ws-callcard > .ws-callcard__main { cursor: pointer; }
div.ws-callcard__main[role="button"]:hover { background: var(--panel-strong); }
div.ws-callcard__main[role="button"]:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-offset-2px-91cb4fd); }
.ws-callcard__dot, .ws-callcard__icon { align-self: center; }
@media (max-width: 700px) {
  .ws-callcard__main { grid-template-areas: "dot icon what" "dot icon meta" "dot icon badges"; padding-right: var(--spacing-margin-3rem-fb2375d); column-gap: var(--spacing-gap-55rem-f5020a7); }
  .ws-callcard__go { padding: 0 var(--spacing-padding-6rem-d0bc70f) 0 var(--spacing-gap-15rem-e51094a); }
  .ws-callcard__links { right: 2.4rem; }
  .ws-callcard:has(> .ws-callcard__links) .ws-callcard__what > strong { padding-right: var(--spacing-padding-right-4-8rem-31150d1); }
}
@media (prefers-reduced-motion: reduce) { .ws-callcard__count { transition: none; } }
/* The line runs into each card's own dot (the owner, 2026-10-15: "make the dots connect to the dots on the card from the
   line"): no dot of the tree's beside the card; the branch meets the card's dot at its middle, solid or dashed like the line. */
.ws-ftree__kids > .ws-ftree__node:has(> .ws-ftree__item > .ws-callcard)::after { display: none; }
.ws-ftree__kids > .ws-ftree__node:has(> .ws-ftree__item > .ws-callcard):last-child::before { display: none; }
.ws-ftree__item:has(> .ws-callcard) { position: relative; overflow: visible; }
.ws-ftree__item > .ws-callcard { border-radius:var(--r-sm); }
.ws-ftree__kids > .ws-ftree__node > .ws-ftree__item:has(> .ws-callcard)::before { content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--ft-x) - var(--ft-indent) - 2px); top: 50%; width: calc(var(--ft-indent) - var(--ft-x) + var(--geometry-width-1-15rem-3b14c93)); height: 0;
  border-top: var(--geometry-outline-2px-7476140) var(--ft-style, solid) var(--ft-line); transform: translateY(-1px); }
.ws-ftree__kids > .ws-ftree__node:last-child > .ws-ftree__item:has(> .ws-callcard)::after { content: ""; position: absolute; pointer-events: none;
  left: calc(var(--ft-x) - var(--ft-indent) - 2px); top: calc(var(--ft-gap) * -1 - 1px); bottom: 50%; border-left: var(--geometry-outline-2px-7476140) var(--ft-style, solid) var(--ft-line); }
.ws-ftree__item > .ws-callcard .ws-callcard__dot { position: relative; z-index: 2; box-shadow: 0 0 0 2px var(--panel); }

/* The sidebar across the whole screen (a phone; renderOverview): every library a card holding its projects and chats,
   the tools as tiles, then you. It fades in over the sidebar as the sidebar widens. */
.ws-overview { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; min-height: 0; padding-top: var(--drawer-top); background: var(--paper); }
.ws-overview[hidden] { display: none; }
.ws-overview__head { display: flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-padding-75rem-4cf1798) var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-1rem-b8be0c7); }
.ws-overview__head h2 { margin: 0 auto 0 0; font-size: var(--typography-font-size-1-15rem-3b14c93); font-weight: var(--typography-font-weight-800-1a1cf79); }
.ws-overview__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--spacing-padding-6rem-d0bc70f);
  padding: var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-85rem-2e72ebc) calc(var(--spacing-padding-1-2rem-a7b00d3) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); }
.ws-overview__label { margin: var(--spacing-gap-7rem-7eff2a1) var(--spacing-margin-2rem-4cd30ed) var(--spacing-padding-05rem-98939d1); color: var(--muted); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-700-99ee502); letter-spacing: var(--typography-letter-spacing-08em-0018d62); text-transform: uppercase; }
.ws-ocard { flex: none; min-width: 0; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ws-ocard__head { display: flex; align-items: center; gap: var(--spacing-padding-65rem-bcca6ce); width: 100%; min-height: var(--geometry-min-height-3-25rem-f432a91); padding: 0 var(--spacing-padding-85rem-2e72ebc); border: 0; border-radius: inherit;
  background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ws-ocard__head:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-offset-2px-91cb4fd); }
.ws-ocard__chev { display: grid; place-items: center; flex: none; color: var(--muted); transition: transform var(--dur-theme) var(--motion-animation-cubic-bezier-2-8-3-1-1ca5728); }
.ws-ocard__chev svg { display: block; }
.ws-ocard.is-open .ws-ocard__chev { transform: rotate(90deg); }
.ws-ocard__icon { display: grid; place-items: center; flex: none; width: var(--geometry-width-2-1rem-f351383); height: var(--geometry-width-2-1rem-f351383); border-radius: 50%;
  background: color-mix(in srgb, var(--tint, var(--accent)) 16%, var(--panel)); color: var(--tint, var(--accent)); }
.ws-ocard__icon > * { display: block; }
.ws-ocard__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--typography-font-size-98rem-ba83cc0); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-ocard__note { flex: none; color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Folding open and shut smoothly: the body's one row grows from nothing to its content's height. */
.ws-ocard__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-drawer) var(--motion-animation-cubic-bezier-2-8-3-1-1ca5728); }
.ws-ocard.is-open > .ws-ocard__body { grid-template-rows: 1fr; }
.ws-ocard__inner { min-height: 0; overflow: hidden; }
.ws-ocard__content.ws-tree { display: flex; flex-direction: column; gap: var(--spacing-margin-2rem-4cd30ed); flex: none; overflow: visible; padding: var(--spacing-gap-55rem-f5020a7) var(--spacing-margin-4rem-7fdc8b1) var(--spacing-padding-6rem-d0bc70f); border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-ocard__content > .ws-tree__list { margin: 0; }
.ws-ocard__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-4rem-7fdc8b1); padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-margin-3rem-fb2375d) var(--spacing-padding-25rem-1677828); }
.ws-ocard__chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); line-height:1; }
.ws-ocard__chip > svg { display: block; flex: none; }
.ws-ocard__chip > span { display: block; line-height: 1; }
.ws-ocard--add { display: flex; align-items: center; justify-content: center; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-min-height-2-9rem-8d9ef55); border-style: dashed; background: none; font-size: var(--typography-font-size-9rem-2ad2e76);
  color: var(--muted); font: inherit; font-weight: var(--type-weight-control); cursor: pointer; }
.ws-ocard--add > svg { display: block; flex: none; }
.ws-ome { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-55rem-f5020a7) var(--spacing-gap-45rem-ef5b39f) var(--spacing-gap-45rem-ef5b39f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ws-ome__me { flex: 1 1 auto; display: flex; align-items: center; gap: var(--spacing-gap-7rem-7eff2a1); min-width: 0; padding: var(--spacing-padding-25rem-1677828); border: 0; border-radius: var(--r-md); background: none;
  color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ws-ome__avatar { display: grid; place-items: center; flex: none; width: var(--geometry-min-height-2-6rem-ee2b419); height: var(--geometry-min-height-2-6rem-ee2b419); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: 50%; overflow: hidden; }
.ws-ome__avatar > .ws-msg__avatar { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; border-radius: 50%; font-size: var(--typography-font-size-95rem-adb8a86); object-fit: cover; }
.ws-ome__who { display: grid; min-width: 0; }
.ws-ome__who strong, .ws-ome__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ome__who small { color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-ome__bell { position: relative; flex: none; }

@media (prefers-reduced-motion: reduce) { .ws-ocard__body, .ws-ocard__chev { transition: none; } }

/* A hub (Content, Work, Developers; hubFrame): one page, its sections as the Details panel's tabs (an icon over each name,
   in its own color when chosen), kept at the top as the page scrolls. */
.ws-hub { gap: 0; }
/* A repository's or page's Private | Public (hub.js visibilityPick): each icon and its words on one center line, as a
   .ws-button's are. */
.ws-visibility button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-visibility button > svg { flex: none; display: block; }
/* New Repository's import (hub.js newRepository): the private fold's fields, and the copy while it runs. */
.ws-hubimport__fields { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); margin: var(--spacing-gap-35rem-1304a2b) 0 var(--spacing-gap-15rem-e51094a); }
.ws-hubimport__status { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); margin: 0; font-size: var(--typography-font-size-85rem-2e72ebc); color: var(--muted); }
.ws-hubimport__status > .ws-spinner { flex: none; display: block; }
.ws-hubimport__status[hidden], .ws-hubimport__private[hidden], .ws-hubimport__problem[hidden] { display: none; }
.ws-hubimport__problem { margin: 0; font-size: var(--typography-font-size-85rem-2e72ebc); }
/* A Hub page read on its own (workspace.js hubFrame focus): no tabs, its way back above it. A held frame (heldFrame)
   is laid out unseen over what's there until it's drawn. */
.ws-hub__body > .ws-back { align-self: flex-start; margin: 0; }
/* A repository (hub.js repoHead, codeView_): a browser of its code first, after the owner's review (2026-10-21:
   "you've designed a pretty repository dashboard instead of an excellent repository browser ... make it Dyadic colors,
   softly"). One compact head on each of its pages, its tabs under it, then the code: the branch, the latest commit by its
   message, the files, the README. Dyadic's own tokens, buttons and type; nothing here is a system of its own. */
.ws-repotop { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-margin-5rem-ef026cb); margin: 0 0 var(--spacing-margin-4rem-088589b); }
.ws-repotop > .ws-back { margin: 0; }
.ws-repotop__tools { display: inline-flex; align-items: center; gap: var(--spacing-padding-25rem-1677828); flex: none; }
.ws-repohead { display: grid; gap: var(--spacing-padding-65rem-bcca6ce); min-width: 0; }
.ws-repohead__title { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); min-width: 0; }
.ws-repohead__name { flex: 1; min-width: 0; margin: 0; font-size: var(--typography-font-size-1-35rem-0c0025b); font-weight: var(--typography-font-weight-750-64d095f); letter-spacing: var(--typography-letter-spacing-01em-a3043ca); line-height: var(--typography-line-height-1-25-004a9e0); overflow-wrap: anywhere; }
.ws-repohead__owner { display: inline; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-weight: var(--type-weight-control); cursor: pointer; }
.ws-repohead__owner:hover, .ws-repohead__owner:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: var(--geometry-text-underline-offset-18em-bbf4c12); }
.ws-repohead__slash { margin: 0 var(--spacing-margin-right-3em-7e47d24); color: var(--dim); font-weight: var(--typography-font-weight-500-0604cd3); }
.ws-repohead__badge { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); flex: none; height: var(--geometry-min-height-1-75rem-672ca1c); padding: 0 var(--spacing-padding-65rem-bcca6ce); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--ink); font-size: var(--typography-font-size-78rem-6850684); font-weight: var(--typography-font-weight-650-2099a9b); }
.ws-repohead__badge svg { display: block; flex: none; color: var(--muted); }
.ws-repohead__about { margin: 0; max-width: var(--geometry-max-width-46rem-a77c1a9); color: var(--muted); font-size: var(--typography-font-size-95rem-adb8a86); line-height: var(--type-line-body); }
.ws-repohead__site { display: inline-flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); align-self: flex-start; max-width: 100%; min-height: var(--geometry-width-2rem-bca5ebd); color: var(--accent);
  font-size: var(--typography-font-size-95rem-adb8a86); font-weight: var(--typography-font-weight-650-2099a9b); text-decoration: none; }
.ws-repohead__site > svg { display: block; flex: none; }
.ws-repohead__site > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-repohead__site:hover > span, .ws-repohead__site:focus-visible > span { text-decoration: underline; text-underline-offset: var(--geometry-text-underline-offset-18em-bbf4c12); }
.ws-repohead__facts { display: flex; align-items: center; gap: var(--spacing-padding-25rem-1677828) var(--spacing-padding-1rem-b8be0c7); flex-wrap: wrap; min-width: 0; color: var(--ink); }
.ws-repohead__stat { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-margin-4rem-7fdc8b1); flex: none; min-height: var(--geometry-height-2-5rem-fb391dd); margin: 0 var(--spacing-margin-left-45rem-69b7c31);
  padding: 0 var(--spacing-gap-45rem-ef5b39f); border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; font-size: var(--typography-font-size-95rem-adb8a86); font-weight: var(--type-weight-control);
  font-variant-numeric: tabular-nums; }
.ws-repohead__stat > svg { display: block; flex: none; }
button.ws-repohead__stat { width: auto; height: auto; cursor: pointer; }
button.ws-repohead__stat:hover, button.ws-repohead__stat:focus-visible { background: var(--panel); }
.ws-repohead__stat.is-on { color: var(--amber); }
.ws-repohead__stat.is-on svg { fill: currentColor; }
.ws-repohead__fact { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); }
.ws-repohead__fact svg { display: block; flex: none; }
.ws-repohead__when { margin-left: auto; color: var(--dim); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-repohead__fork { display: flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); margin: var(--spacing-margin-2rem-1d814c7) 0 0; color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); overflow-wrap: anywhere; }
.ws-repohead__fork > svg { display: block; flex: none; }
.ws-repohead__fork .ws-linkish { font-weight: var(--typography-font-weight-650-2099a9b); }
/* The pages about it: one quiet fold under its files, how many and their names, the rows inside. */
.ws-repopages { border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ws-repopages > summary { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); min-width: 0; min-height: var(--geometry-width-3rem-550d167); padding: 0 var(--spacing-padding-9rem-2ad2e76); list-style: none; cursor: pointer; color: var(--ink); }
.ws-repopages > summary::-webkit-details-marker { display: none; }
.ws-repopages > summary > svg { display: block; flex: none; color: var(--muted); }
.ws-repopages__label { flex: none; font-weight: var(--typography-font-weight-700-99ee502); }
.ws-repopages__count { flex: none; color: var(--dim); font-variant-numeric: tabular-nums; }
.ws-repopages__names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--typography-font-size-88rem-39c360b); }
.ws-repopages[open] .ws-repopages__names { visibility: hidden; }
.ws-repopages > .ws-saved-list { margin: 0; padding: 0 var(--spacing-padding-6rem-d0bc70f) var(--spacing-padding-6rem-d0bc70f); }
/* Its tabs: words with how many are open, the one shown underlined in the accent. */
.ws-repotabs { display: flex; gap: var(--spacing-padding-1-4rem-2569574); margin-top: var(--spacing-padding-1rem-4e95f32); overflow-x: auto; scrollbar-width: none; border-bottom: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line)); }
.ws-repotabs::-webkit-scrollbar { display: none; }
.ws-repotabs__tab { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); flex: none; min-height: var(--geometry-min-height-2-75rem-3cc807c); padding: 0; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: var(--typography-font-size-95rem-adb8a86); font-weight: var(--type-weight-control); cursor: pointer; transition: color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-repotabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--geometry-outline-2px-7476140); border-radius: var(--geometry-outline-2px-7476140); background: transparent; transition: background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-repotabs__tab:hover, .ws-repotabs__tab:focus-visible { color: var(--ink); }
.ws-repotabs__tab[aria-current="page"] { color: var(--ink); }
.ws-repotabs__tab[aria-current="page"]::after { background: var(--accent); }
.ws-repotabs__count { color: var(--dim); font-variant-numeric: tabular-nums; }
.ws-repotabs__count:empty { display: none; }
/* Code's bar: the branch on the left, Add File on the right. */
.ws-codebar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-padding-75rem-4cf1798); min-width: 0; }
.ws-codebar__branch, .ws-codebar__add { display: inline-flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); min-width: 0; min-height: var(--geometry-min-height-2-75rem-3cc807c); margin: 0 var(--spacing-margin-left-5rem-64b3937); padding: 0 var(--spacing-margin-5rem-ef026cb);
  border: 0; border-radius: var(--r-md); background: none; color: var(--ink); font: inherit; font-size: var(--typography-font-size-95rem-adb8a86); font-weight: var(--typography-font-weight-650-2099a9b); cursor: pointer; }
.ws-codebar__branch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--typography-font-size-9rem-2ad2e76); }
.ws-codebar__branch > svg, .ws-codebar__add > svg { display: block; flex: none; }
.ws-codebar__add { flex: none; color: var(--muted); }
.ws-codebar__branch:hover, .ws-codebar__branch:focus-visible, .ws-codebar__add:hover, .ws-codebar__add:focus-visible { background: var(--panel); color: var(--ink); }
/* The latest commit: its message first, who, when and its short id after. */
.ws-lastcommit { display: flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); width: 100%; min-width: 0; padding: var(--spacing-padding-85rem-2e72ebc) var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-lastcommit[hidden] { display: none; }
.ws-lastcommit:hover, .ws-lastcommit:focus-visible { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ws-lastcommit__text { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); flex: 1; min-width: 0; }
.ws-lastcommit__text strong { font-size: var(--typography-font-size-98rem-ba83cc0); font-weight: var(--typography-font-weight-700-99ee502); line-height: var(--typography-line-height-1-35-98737cf); overflow-wrap: anywhere; }
.ws-lastcommit__text small { color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); overflow-wrap: anywhere; }
.ws-lastcommit > svg { display: block; flex: none; color: var(--dim); }
/* The files: a row each, a hairline between, the whole name always (wrapped, never cut). */
.ws-filelist { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-filelist > li + li { border-top: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line)); }
.ws-filelist__row { display: flex; align-items: center; gap: var(--spacing-padding-85rem-2e72ebc); width: 100%; min-height: var(--geometry-min-height-3-25rem-f432a91); padding: var(--spacing-gap-55rem-f5020a7) 0; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: var(--typography-font-size-98rem-ba83cc0); text-align: left; cursor: pointer; }
.ws-filelist__row > svg { display: block; flex: none; color: var(--muted); }
.ws-filelist__row > svg:first-child { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.ws-filelist__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ws-filelist__row > svg:last-child { color: var(--dim); }
.ws-filelist__row:hover .ws-filelist__name, .ws-filelist__row:focus-visible .ws-filelist__name { color: var(--accent); }
/* A page's app (hub.js appBlock): the author's own page in the sandbox's frame, and whose it is. */
.ws-pageapp { display: grid; gap: var(--spacing-gap-35rem-1304a2b); margin: var(--spacing-padding-1rem-b8be0c7) 0; }
.ws-pageapp > iframe { display: block; width: 100%; height: var(--geometry-min-height-240px-1c8c76d); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-md); background: transparent; }
.ws-pageapp__by { display: inline-flex; align-items: center; gap: var(--spacing-gap-35rem-1304a2b); color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-pageapp__by > svg { display: block; flex: none; }
.ws-pageapp__policy { margin-left: auto; color: var(--muted); }
.ws-pageapp__policy:hover, .ws-pageapp__policy:focus-visible { color: var(--ink); }
.ws-msg__body figure.ws-pageapp a.ws-pageapp__policy[target="_blank"]::after { display: none; }
/* Full screen (hub.js setFull): the app over the whole page, its caption a bar above it, whatever height it asked for. */
.ws-pageapp__full { flex: none; }
.ws-pageapp.is-full { position: fixed; inset: 0; z-index: 90; margin: 0; display: flex; flex-direction: column; gap: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--paper); }
.ws-pageapp.is-full > figcaption { order: -1; padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-padding-75rem-4cf1798); border-bottom: var(--geometry-border-1px-93e2062) solid var(--line-soft); }
.ws-pageapp.is-full > iframe { flex: 1; min-height: 0; height: auto !important; border: 0; border-radius: 0; }
html.ws-app-full, html.ws-app-full body { overflow: hidden; }
/* Paused, asleep, stopped or taken down: in the app's place, what happened and what to do. */
.ws-pageapp__rest { display: grid; justify-items: center; align-content: center; gap: var(--spacing-margin-4rem-7fdc8b1); min-height: var(--geometry-min-height-180px-a6e7588); padding: var(--spacing-padding-1-25rem-c10b7e1);
  border: var(--geometry-border-1px-93e2062) dashed var(--line); border-radius: var(--r-md); color: var(--muted); text-align: center; }
.ws-pageapp__rest > svg { display: block; flex: none; color: var(--accent); }
.ws-pageapp__rest > strong { color: var(--ink); font-size: var(--typography-font-size-1rem-b8be0c7); }
.ws-pageapp__rest > p { margin: 0; max-width: var(--geometry-max-height-28rem-151008a); }
/* A page's code: its code, Run (JavaScript) and its outputs. */
.ws-pagecode { margin: var(--spacing-padding-1rem-b8be0c7) 0; }
.ws-pagecode__bar { display: flex; align-items: center; gap: var(--spacing-padding-75rem-4cf1798); flex-wrap: wrap; margin: var(--spacing-margin-5rem-ef026cb) 0; }
.ws-pagecode__note { color: var(--muted); font-size: var(--typography-font-size-85rem-2e72ebc); }
.ws-pagecode__outputs:empty { display: none; }
/* Editing your profile (hub.js profileEdit): one centered column on every width, cards with hairline borders, fields
   stacked, Save at the foot of the screen while there's something to save. */
.ws-profileedit { display: grid; gap: var(--spacing-padding-1rem-b8be0c7); width: 100%; max-width: var(--geometry-max-width-36rem-2f48e86); margin: 0 auto; padding-bottom: var(--spacing-padding-1rem-b8be0c7); }
.ws-profileedit__head { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-profileedit__back { flex: none; margin-left: var(--spacing-margin-left-5rem-64b3937); }
.ws-profileedit__title { margin: 0; font-size: var(--typography-font-size-1-35rem-0c0025b); font-weight: var(--typography-font-weight-750-64d095f); letter-spacing: var(--typography-letter-spacing-01em-a3043ca); }
.ws-profileedit__card { display: grid; gap: var(--spacing-padding-left-1-1rem-14af91b); padding: var(--spacing-padding-1rem-b8be0c7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.ws-profileedit__card > .ws-field, .ws-profileedit__card .ws-field { font-size: var(--typography-font-size-85rem-2e72ebc); gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-profileedit__card .ws-field > span:first-child { color: var(--ink); font-weight: var(--typography-font-weight-650-2099a9b); }
.ws-profileedit .ws-field input, .ws-profileedit .ws-field textarea { font-size: var(--typography-font-size-1rem-b8be0c7); padding: var(--spacing-padding-65rem-bcca6ce) var(--spacing-padding-75rem-4cf1798); }
.ws-profileedit .ws-field textarea { resize: vertical; min-height: var(--geometry-min-height-5-5rem-59a6ecc); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-profileedit .ws-field small { font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-profileedit [aria-invalid="true"] { border-color: var(--danger); }
.ws-profileedit__error { color: var(--danger); }
.ws-profileedit__error[hidden] { display: none; }
.ws-profileedit__count { justify-self: end; }
.ws-profileedit__picture { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--spacing-padding-1rem-b8be0c7); }
.ws-profileedit__pic { display: grid; place-items: center; width: var(--geometry-width-6rem-894c01c); height: var(--geometry-width-6rem-894c01c); border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 45%, var(--panel)), color-mix(in srgb, var(--violet) 45%, var(--panel)));
  color: var(--ink); font-size: var(--typography-font-size-2-2rem-ac5d0c3); font-weight: var(--typography-font-weight-800-1a1cf79); box-shadow: 0 0 0 1px var(--line); }
.ws-profileedit__picactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-profileedit__links { display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-profileedit__links:empty { display: none; }
.ws-profileedit__link { display: flex; align-items: flex-start; gap: var(--spacing-gap-35rem-1304a2b); min-width: 0; }
.ws-profileedit__linkfield { display: grid; flex: 1; gap: var(--spacing-padding-25rem-1677828); min-width: 0; }
.ws-profileedit__link > .ws-iconbtn { flex: none; margin-top: var(--spacing-margin-2rem-4cd30ed); }
.ws-profileedit__addlink { justify-self: start; }
.ws-profileedit__addlink[hidden] { display: none; }
.ws-profileedit .ws-visibility { justify-self: start; }
.ws-profileedit__save { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-padding-75rem-4cf1798);
  padding: var(--spacing-padding-75rem-4cf1798) 0 calc(var(--spacing-padding-75rem-4cf1798) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); border-top: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--paper); }
.ws-profileedit__status { margin: 0 auto 0 0; color: var(--muted); font-size: var(--typography-font-size-88rem-39c360b); min-width: 0; }
.ws-profileedit__status.is-ok { color: var(--ok); }
.ws-profileedit__status.is-error { color: var(--danger); }
/* On a phone the photo leads: centered, its actions in one row under it. */
@media (max-width: 520px) {
  .ws-profileedit__card { padding: var(--spacing-padding-9rem-2ad2e76); }
  .ws-profileedit__picture { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ws-profileedit__picactions { justify-content: center; }
  .ws-profileedit__save > .ws-button { flex: none; }
}
/* Positioning a new photo: the picture under a round window, its preview, the zoom. */
.ws-crop__stage { display: flex; align-items: center; justify-content: center; gap: var(--spacing-padding-1rem-b8be0c7); flex-wrap: wrap; }
.ws-crop { position: relative; width: min(var(--geometry-max-width-18rem-6796582), 100%); aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); background: var(--sunken);
  touch-action: none; cursor: grab; user-select: none; }
.ws-crop:active { cursor: grabbing; }
.ws-crop:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-crop::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px var(--on-image),
  inset 0 0 0 2px color-mix(in srgb, var(--on-image-ink) 70%, transparent); pointer-events: none; }
.ws-crop__image { position: absolute; top: 0; left: 0; max-width: none; height: auto; transform-origin: 0 0; pointer-events: none; }
.ws-crop__side { display: grid; justify-items: center; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-crop__preview { display: block; width: var(--geometry-min-height-4-5rem-41dca9e); height: var(--geometry-min-height-4-5rem-41dca9e); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.ws-crop__zoom input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--accent); }
/* A profile's head: the person's picture, their name and username. */
.ws-profilehead { display: flex; align-items: center; gap: var(--spacing-padding-1rem-b8be0c7); min-width: 0; }
.ws-profilehead__avatar { display: grid; place-items: center; flex: none; width: var(--geometry-height-5rem-8a37694); height: var(--geometry-height-5rem-8a37694); border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 45%, var(--panel)), color-mix(in srgb, var(--violet) 45%, var(--panel)));
  color: var(--ink); font-size: var(--typography-font-size-1-9rem-27b2c42); font-weight: var(--typography-font-weight-800-1a1cf79); box-shadow: 0 0 0 1px var(--line); }
.ws-profilehead__who { display: grid; gap: var(--spacing-gap-15rem-e51094a); min-width: 0; }
.ws-profilehead__name { margin: 0; font-size: var(--typography-font-size-1-5rem-b81aec4); font-weight: var(--typography-font-weight-800-1a1cf79); letter-spacing: var(--typography-letter-spacing-01em-a3043ca); overflow-wrap: anywhere; }
.ws-profilehead__handle { margin: 0; color: var(--muted); font-size: var(--typography-font-size-1rem-b8be0c7); overflow-wrap: anywhere; }
.ws-profilehead__bio { color: var(--ink); line-height: var(--type-line-body); }
/* The Hub's lists (hub.js row, group): a row for each thing, as a repository's files are, a quiet heading over a group. */
.ws-listgroup { display: grid; gap: var(--spacing-gap-35rem-1304a2b); min-width: 0; }
.ws-listgroup + .ws-listgroup { margin-top: var(--spacing-padding-6rem-d0bc70f); }
.ws-listgroup__title { display: flex; align-items: baseline; gap: var(--spacing-gap-45rem-ef5b39f); margin: 0; color: var(--ink); font-size: var(--typography-font-size-1-02rem-f6100ff); font-weight: var(--typography-font-weight-750-64d095f); letter-spacing: 0;
  text-transform: none; }
.ws-listgroup__count { color: var(--dim); font-size: var(--typography-font-size-88rem-39c360b); font-weight: var(--type-weight-control); font-variant-numeric: tabular-nums; }
.ws-listgroup__empty { margin: var(--spacing-gap-15rem-e51094a) 0 0; }
.ws-listrows { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-listrows > li + li { border-top: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line)); }
.ws-listrow__body { display: flex; align-items: center; gap: var(--spacing-padding-85rem-2e72ebc); width: 100%; min-height: var(--geometry-min-height-3-25rem-f432a91); padding: var(--spacing-gap-7rem-7eff2a1) 0; border: 0; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ws-listrow__body > svg { display: block; flex: none; color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
.ws-listrow__body > svg:last-child { color: var(--dim); }
.ws-listrow__text { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); flex: 1; min-width: 0; }
.ws-listrow__text > strong { font-size: var(--typography-font-size-98rem-ba83cc0); font-weight: var(--typography-font-weight-650-2099a9b); line-height: var(--typography-line-height-1-35-98737cf); overflow-wrap: anywhere; }
.ws-listrow__owner { color: var(--muted); font-weight: var(--typography-font-weight-550-f89f8d0); }
.ws-listrow__slash { color: var(--dim); font-weight: var(--typography-font-weight-500-0604cd3); }
.ws-listrow__about { color: var(--ink); font-size: var(--typography-font-size-9rem-2ad2e76); line-height: var(--typography-line-height-1-45-6918de1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-listrow__text > small { color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); overflow-wrap: anywhere; }
.ws-listrow__body:hover .ws-listrow__text > strong, .ws-listrow__body:focus-visible .ws-listrow__text > strong { color: var(--accent); }
.ws-listrow__body:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-2px-7476140); border-radius: var(--r-sm); }
/* A page as a card: its kind's cover, a miniature of its first heading and words, then its title and who made it. */
.ws-pagecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--spacing-padding-75rem-4cf1798); margin: var(--spacing-margin-2rem-4cd30ed) 0 0; padding: 0; list-style: none; }
.ws-pagecard { --tile: var(--accent); min-width: 0; }
.ws-pagecard__body { display: grid; width: 100%; height: 100%; padding: 0; overflow: hidden; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-lg); background: var(--panel);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), transform var(--dur-micro) var(--motion-transition-ease-914ff41); }
.ws-pagecard__body:hover, .ws-pagecard__body:focus-visible { border-color: color-mix(in srgb, var(--tile) 55%, var(--line)); }
.ws-pagecard__body:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--focus); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-pagecard__body:active { transform: scale(.99); }
.ws-pagecard__cover { display: grid; align-content: start; gap: var(--spacing-gap-35rem-1304a2b); height: var(--geometry-min-width-7-5rem-5feabe0); padding: var(--spacing-gap-7rem-7eff2a1) var(--spacing-gap-8rem-818b9f7); overflow: hidden; border-bottom: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line));
  background: linear-gradient(155deg, color-mix(in srgb, var(--tile) 16%, var(--panel)) 0%, color-mix(in srgb, var(--tile) 5%, var(--panel)) 70%); }
.ws-pagecard__kind { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); justify-self: start; height: var(--geometry-width-1-45rem-4556fac); padding: 0 var(--spacing-margin-5rem-ef026cb); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tile) 18%, transparent); color: color-mix(in srgb, var(--tile) 75%, var(--ink)); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-700-99ee502); }
.ws-pagecard__kind svg { display: block; flex: none; }
.ws-pagecard__heading { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--typography-font-size-86rem-d03e951); font-weight: var(--typography-font-weight-750-64d095f); color: var(--ink); }
.ws-pagecard__excerpt { color: var(--muted); font-size: var(--typography-font-size-76rem-a2a5d3f); line-height: var(--typography-line-height-1-45-6918de1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-pagecard__text { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); min-width: 0; padding: var(--spacing-padding-65rem-bcca6ce) var(--spacing-gap-8rem-818b9f7) var(--spacing-padding-75rem-4cf1798); }
.ws-pagecard__text strong { font-size: var(--typography-font-size-95rem-adb8a86); font-weight: var(--typography-font-weight-700-99ee502); line-height: var(--typography-line-height-1-3-9c193c6); overflow-wrap: anywhere; }
.ws-pagecard__text small { color: var(--muted); font-size: var(--typography-font-size-8rem-818b9f7); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .ws-pagecard__body { transition: none; } .ws-pagecard__body:active { transform: none; } }
/* Issues and pull requests: its search, which are shown and New on one line, then the rows, each how it stands. */
.ws-threadtools { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); min-width: 0; }
.ws-threadtools > .ws-page-search { width: 100%; box-sizing: border-box; }
.ws-threadtools .ws-segmented { min-width: 0; }
.ws-threadrow--open > svg:first-child { color: var(--green); }
.ws-threadrow--merged > svg:first-child { color: var(--violet); }
.ws-threadrow--closed > svg:first-child { color: var(--dim); }
.ws-threadrow__text { display: grid; gap: var(--spacing-margin-2rem-4cd30ed); flex: 1; min-width: 0; }
.ws-threadrow__text strong { font-size: var(--typography-font-size-98rem-ba83cc0); font-weight: var(--typography-font-weight-650-2099a9b); line-height: var(--typography-line-height-1-35-98737cf); overflow-wrap: anywhere; }
.ws-threadrow__number { color: var(--dim); font-weight: var(--typography-font-weight-500-0604cd3); }
.ws-threadrow__text small { color: var(--muted); font-size: var(--typography-font-size-82rem-8da80e1); overflow-wrap: anywhere; }
.ws-threadlist__empty { margin: var(--spacing-margin-5rem-ef026cb) 0; }
/* Its README: its name as a heading, then the text, part of the page (no frame of its own). */
.ws-hub__body > .ws-readme { padding: 0; border: 0; background: none; }
.ws-readme__head { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); margin: var(--spacing-margin-4rem-7fdc8b1) 0 var(--spacing-margin-5rem-ef026cb); color: var(--ink); }
.ws-readme__head > svg { display: block; flex: none; color: var(--muted); }
.ws-readme__head > h2 { flex: 1; min-width: 0; margin: 0; color: var(--ink); font-size: var(--typography-font-size-1-05rem-8c6e288); font-weight: var(--typography-font-weight-750-64d095f); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.ws-readme__head > .ws-iconbtn { flex: none; }
@media (prefers-reduced-motion: reduce) { .ws-repotabs__tab, .ws-repotabs__tab::after, .ws-lastcommit { transition: none; } }
/* Signed out, reading a page (workspace.js startReader): the page and its bar, no sidebar or workspace to open. */
.ws--reader .ws-nav, .ws--reader .ws-bar__nav { display: none !important; }
/* On hub.dyadic.app (and a signed-out reader) there's no rail or sidebar: what's open takes the width, with the right
   sidebar docked beside it on a computer (it slides over on a tablet or phone, as everywhere). */
.ws.ws--reader, .ws.ws--reader.has-context { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1101px) { .ws.ws--reader.has-context { grid-template-columns: minmax(0, 1fr) var(--ctx-w); } }
/* Editing, there's room below the last block to scroll it up off the bottom of the screen (the owner, 2026-10-21). */
.ws-hub__body--editing { padding-bottom: var(--spacing-padding-bottom-45dvh-688d684); }
.ws-messages:has(> .ws-hub.is-held) { position: relative; }
.ws-hub.is-held { position: absolute; top: var(--page-top); left: var(--page-x); right: var(--page-x); width: auto; visibility: hidden; pointer-events: none; }
.ws-hub__nav { position: sticky; top: calc(-1 * var(--page-top)); z-index: 5; margin: calc(-1 * var(--page-top)) calc(-1 * var(--page-x)) 0; padding: var(--spacing-margin-4rem-7fdc8b1) var(--page-x);
  border-bottom: var(--geometry-border-1px-93e2062) solid var(--line); background: var(--paper); }
.ws-hubtabs { grid-template-columns: repeat(var(--hub-n, 4), minmax(0, 1fr)); gap: var(--spacing-padding-1rem-4e95f32); margin: 0; padding: 0; border: 0; background: none; }
.ws-hubtabs button { height: var(--geometry-min-height-3-25rem-f432a91); padding: var(--spacing-margin-2rem-4cd30ed) 0; font-size: var(--typography-font-size-66rem-358ab2c); letter-spacing: var(--typography-letter-spacing-01em-a3043ca); }
.ws-hubtabs [data-section="overview"], .ws-hubtabs [data-section="saved"] { --tab: var(--cyan); }
.ws-hubtabs [data-section="blackbox"], .ws-hubtabs [data-section="images"] { --tab: var(--violet); }
.ws-hubtabs [data-section="keys"], .ws-hubtabs [data-section="files"] { --tab: var(--amber); }
.ws-hubtabs [data-section="tools"], .ws-hubtabs [data-section="automations"] { --tab: var(--coral); }
.ws-hubtabs [data-section="connect"], .ws-hubtabs [data-section="tasks"] { --tab: var(--ok); }
.ws-hub__body { display: flex; flex-direction: column; gap: var(--spacing-padding-1rem-b8be0c7); min-width: 0; }
/* On a phone a repository's bands (its bar, its sections, the section's own tools) are one stack, a hairline between
   them, never a strip of the page (the owner, 2026-10-21: "the repo page looks absolutely terrible"); Files' search and
   branch share their row. */
@media (max-width: 700px) {
  .ws-hub__body > .ws-page-tools { margin-block: 0; }
  .ws-hub__body > .ws-page-tools + .ws-page-tools { margin-top: calc(var(--spacing-margin-1rem-eb40a9a) - var(--spacing-padding-1px-93e2062)); }
  .ws-hub__body > .ws-page-tools--files > .ws-page-search { flex: 1 1 10rem; }
  .ws-hub__body > .ws-page-tools--files > .ws-button { flex: 0 0 auto; }
}
@media (min-width: 781px) { .ws-hubtabs button { flex-direction: row; gap: var(--spacing-gap-45rem-ef5b39f); height: var(--geometry-min-height-2-6rem-ee2b419); font-size: var(--typography-font-size-8rem-818b9f7); } }
.ws-hubtabs [data-section="repositories"] { --tab: var(--violet); }
.ws-hubtabs [data-section="explore"] { --tab: var(--cyan); }
.ws-hubtabs [data-section="pages"] { --tab: var(--amber); }


/* Content's Images bar: the library's pill (Albums, search, ⋯) with the primary action at the right (Create Image, or New
   Album on Albums); while searching, the search takes the row. */
.ws-imgbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); min-width: 0; margin-bottom: var(--spacing-padding-6rem-d0bc70f); }
.ws-imgbar > .ws-button { flex: none; height: var(--geometry-min-height-2-6rem-ee2b419); margin-left: auto; }
.ws-imgbar > .ws-page-tools { margin: 0; }  /* the bar spaces the row (Images' tools rule above gives one a margin) */
.ws-imgbar:has(> .ws-page-tools.is-searching) > .ws-button { display: none; }
.ws-knowledgechip { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-margin-4rem-7fdc8b1); align-self: stretch; padding-inline: var(--spacing-gap-8rem-818b9f7); border-radius:var(--r-sm); font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-knowledgechip > svg { display: block; flex: none; }

/* Elastic (the owner, 2026-10-15, after suez's Elastic SVG Sidebar and Codrops' Elastic SVG Elements). The surfaces'
   leading edges are elastic.js's; these are the springs CSS carries: a press gives, then springs back past where it was
   and settles; a menu drops open and a dialog lands with a spring; a switch's knob overshoots and settles; a phone's
   sheet rises and its top stretches and settles, anchored where it sits. --ease-springy is an underdamped spring
   sampled as linear() (about a quarter past, then back), long enough to see it settle. Reduced motion turns them off
   with every other animation (above). */
:root { --ease-springy: linear(0, 0.042, 0.153, 0.309, 0.49, 0.674, 0.847, 0.997, 1.117, 1.202, 1.254, 1.274, 1.268, 1.242, 1.202, 1.153,
  1.102, 1.053, 1.01, 0.975, 0.949, 0.933, 0.925, 0.925, 0.931, 0.941, 0.954, 0.968, 0.982, 0.994, 1.005, 1.012, 1.018, 1.02, 1.021, 1.019, 1);
  --dur-spring: 560ms; }
/* An edge's outward bow (elastic.js): drawn at the surface's corner, over the page (or inside a dialog, which then
   shows past its box while it bows). */
.ws-goo { position: fixed; left: 0; top: 0; width: var(--geometry-border-1px-93e2062); height: var(--geometry-border-1px-93e2062); overflow: visible; z-index: 50; pointer-events: none; }
.ws-goo--inside { position: absolute; z-index: 3; }
.ws-searchui.is-elastic { overflow: visible; }
/* A press: in quickly, out on the spring. */
.ws-iconbtn, .ws-button, .ws-toggle, .ws-chip--action, .ws-chip--files, .ws-send, .ws-agent-pick, .ws-row, .ws-nav__item, .ws-quality__chip, .ws-aspect__chip, .ws-mode, .ws-swatch, .ws-picker__icon, .ws-segmented button, .ws-searchui__tabs button, .ws-savebtn {
  transition: transform var(--dur-spring) var(--ease-springy), background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), opacity var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
.ws-iconbtn:active, .ws-button:active, .ws-toggle:active, .ws-chip--action:active, .ws-send:active, .ws-agent-pick:active, .ws-quality__chip:active, .ws-aspect__chip:active,
.ws-mode:active, .ws-swatch:active, .ws-picker__icon:active, .ws-segmented button:active, .ws-searchui__tabs button:active, .ws-savebtn:active, .ws-row:active, .ws-nav__item:active {
  transition: transform var(--motion-animation-90ms-1ad97a9) var(--motion-animation-ease-out-791c2d0), background-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), border-color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), color var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41), opacity var(--motion-transition-150ms-a29b8de) var(--motion-transition-ease-914ff41); }
/* A menu drops open from where it's anchored and springs; a dialog lands. */
@keyframes ws-menu-drop { from { opacity: 0; transform: scale(.94, .8); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.ws-menu:not([hidden]) { animation: ws-menu-drop var(--dur-spring) var(--ease-springy); }
.ws-dialog[open] { animation: ws-pop-in var(--dur-spring) var(--ease-springy); }
.ws-toast { animation: ws-toast-in var(--dur-spring) var(--ease-springy); }
/* A switch's knob. */
.ws-switch input::after, .ws-setting input[role="switch"]::after { transition: transform var(--dur-spring) var(--ease-springy), background var(--dur-fast) var(--motion-transition-ease-914ff41); }
.ws-menuswitch::after { transition: transform var(--dur-spring) var(--ease-springy); }
/* A phone's sheet: it rises, its top stretches past and settles, held at the bottom where it sits. */
@keyframes ws-sheet-rise-elastic {
  0% { transform: translateY(100%); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  48% { transform: translateY(0) scaleY(1.03); animation-timing-function: ease-in-out; }
  68% { transform: scaleY(.99); animation-timing-function: ease-in-out; }
  84% { transform: scaleY(1.004); animation-timing-function: ease-out; }
  100% { transform: none; } }
@media (max-width: 600px) {
  .ws-dialog:not(.ws-dialog--confirm)[open] { transform-origin: 50% 100%; animation: ws-sheet-rise-elastic var(--motion-animation-520ms-90bfc46); }  /* no fill: a swipe down on it sets its own transform */
}

/* Full width on a phone (the owner, 2026-10-15: "I explicitly asked for full width"; "the edges are inconsistent";
   "still give them a buffer ... I just want the pages elements to be full width, like the boxes"). A page's boxes run
   from edge to edge: each top-level section, fold, chart, card and row, the runs in a list and the tiles, with no side
   borders or round corners. Words never do: everything written, inside a box or between them (headings, labels,
   toolbars, filters), keeps one margin from the edge, the page's. A frame inside a box (a chart's, a table's, a
   section's) is dropped: no box in a box. */
@media (max-width: 700px) {
  .ws-messages { --page-x: 1rem; }
  .ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-ftree, .ws-tiles):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) {
    width: calc(100% + 2 * var(--page-x)); max-width: none; margin-inline: calc(-1 * var(--page-x)); box-sizing: border-box;
    border-left-width: 0; border-right-width: 0; border-radius: 0; }
  /* Their words on the page's margin. */
  .ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) { padding-left: var(--page-x); padding-right: var(--page-x); }
  .ws-project .bb-fold > summary, .ws-project .bb-fold__body { padding-left: var(--page-x); padding-right: var(--page-x); }
  .ws-project .bb-fold[open] > summary { border-radius: 0; }
  /* A frame inside a box goes. */
  .ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) :is(section, .ws-table, .bb-card, .bb-whatif, .ws-log, .ws-info__card) {
    margin-inline: 0; padding-inline: 0; border: 0; border-radius: 0; background: none; }
  /* The runs in a list: each a band, a run's calls indented under it to the same right edge. */
  .ws-project .ws-ftree:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) .ws-ftree__item { border-radius: 0; border-right-width: 0; }
  .ws-project .ws-ftree:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) > .ws-ftree__node > .ws-ftree__item { border-left-width: 0; padding-left: calc(var(--page-x) - var(--spacing-gap-8rem-818b9f7)); }
  /* The tiles: two to a row, edge to edge, a line between them. */
  .ws-project .ws-tiles:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) { gap: 0; border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
  .ws-project .ws-tiles:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) > .ws-tile { border-width: 0 0 var(--geometry-border-1px-93e2062); border-radius: 0; padding-left: var(--page-x); padding-right: var(--page-x); }
  .ws-project .ws-tiles:not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *) > .ws-tile:nth-child(odd) { box-shadow: inset -1px 0 0 var(--line); }
  /* Rows of controls (a search, filters, a page's toolbar) are bands too: edge to edge, the fields side by side without
     frames of their own, a hairline between them, their words on the page's margin. */
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) {
    width: calc(100% + 2 * var(--page-x)); max-width: none; margin-inline: calc(-1 * var(--page-x)); box-sizing: border-box;
    display: flex; flex-wrap: wrap; gap: var(--spacing-padding-1px-93e2062); padding: 0; border: 0; border-block: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: 0; background: var(--line); }
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > * {
    flex: 1 1 auto; width: auto; min-width: 0; max-width: none; height: auto; min-height: var(--geometry-min-height-2-75rem-3cc807c); margin: 0; box-sizing: border-box;
    border: 0; border-radius: 0; background: var(--panel); box-shadow: none; padding-left: var(--page-x); padding-right: var(--page-x); }
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > :is(span, small, p, .ws-page-tools__note) { display: flex; align-items: center; }
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > .ws-segmented { padding: var(--spacing-padding-25rem-1677828) var(--page-x); }
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > .ws-segmented button { flex: 1; }
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > span:empty { display: none; }  /* a spacer is no cell */
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > .ws-button--primary { flex: 0 1 auto; background: var(--button-fill); color: var(--button-text); }
  /* A toolbar marked --fill (the Hub's lists and page editor): its search takes a row of its own and every other cell
     grows to fill its row, so one that wraps never leaves the band's hairline color showing beside it. */
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > .ws-page-search:where(.ws-page-tools--fill > *) { flex-basis: 100%; }
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > .ws-button--primary:where(.ws-page-tools--fill > *) { flex-grow: 1; }
  .ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar):not(.ws-project :is(section:not(.ws-tasks section, .ws-knowledge section:not(.ws-knowledge__suggested), .ws-keygroup, .ws-hosted), .bb-fold, .bb-runhead, .bb-card, .bb-whatif, .ws-connect__card, .ws-callhead, .ws-keycard, .ws-log, .ws-kcard, .ws-taskrow, .ws-plugin, .ws-saved, .ws-schednote, .ws-hosted__card) *):not(.ws-project :is(.ws-filters, .ws-page-tools:not(.ws-collection__tools), .ws-imgbar) *) > .ws-page-tools { height: var(--geometry-min-height-2-75rem-3cc807c); padding-block: 0; align-items: stretch; }
}
/* The composer on a phone, full width too (the owner, 2026-10-15: "None of the elements are full width", of the message
   box and the queue): the message box is a bar along the bottom, round only at its top corners; the Plan Dock on it and
   the messages waiting in the queue have the same edges; their words and buttons keep a margin. */
@media (max-width: 700px) {
  .ws-composer { padding: var(--spacing-margin-5rem-ef026cb) 0 0; border-top: 0; }
  .ws-composer > * { max-width: none; }
  .ws-inputbox { padding: var(--spacing-gap-35rem-1304a2b) var(--spacing-padding-6rem-d0bc70f) calc(var(--spacing-gap-35rem-1304a2b) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91))); border-width: var(--geometry-border-1px-93e2062) 0 0; border-radius: var(--geometry-width-20px-9bf0c8e) var(--geometry-width-20px-9bf0c8e) 0 0; }
  .ws-plandock { border-left-width: 0; border-right-width: 0; padding-left: var(--spacing-padding-1rem-b8be0c7); padding-right: var(--spacing-padding-1rem-b8be0c7); }
  .ws-plandock__body { margin-left: var(--spacing-margin-1rem-eb40a9a); margin-right: var(--spacing-margin-1rem-eb40a9a); padding-left: var(--spacing-padding-1rem-b8be0c7); padding-right: var(--spacing-padding-1rem-b8be0c7); }
  .ws-queue { margin-bottom: var(--spacing-margin-5rem-ef026cb); }
  .ws-queued { padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-1rem-b8be0c7); border-width: var(--geometry-border-1px-93e2062) 0; border-radius: 0; }
}
/* An answer's Copy and Speak, after its chips: quiet icons on the chips' line, gone and back with them. */
.ws-msg__foot > .ws-msg__quick { width: var(--geometry-height-2-25rem-e1d2841); height: var(--geometry-height-2-25rem-e1d2841); color: var(--muted); }
.ws-msg__foot > .ws-msg__quick:hover, .ws-msg__foot > .ws-msg__quick:focus-visible { color: var(--ink); }
/* A menu item that says what it does, under its name (the send modes). */
.ws-menu__text { display: grid; gap: var(--spacing-padding-1rem-4e95f32); min-width: 0; text-align: start; }
.ws-menu__text small { font-size: var(--typography-font-size-74rem-bc7c01a); font-weight: var(--typography-font-weight-400-26d2286); color: var(--muted); white-space: normal; line-height: var(--typography-line-height-1-3-9c193c6); }
/* The elastic edge's line, glowing so its shape reads on every theme; while an edge is elastic the surface's own shadow
   is off (cutting the surface to an inward curve flickered it). */
.ws-goo__line { fill: none; stroke: color-mix(in srgb, var(--goo-line, var(--line)) 35%, var(--accent)); stroke-width: var(--geometry-border-1-5px-67792bd); stroke-linecap: round; }
/* Its glow: a wide faint stroke under it (a blur filter was repainted every frame). */
.ws-goo__halo { fill: none; stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: var(--geometry-border-bottom-left-radius-9px-12a8299); stroke-linecap: round; }
:is(#ws-nav, #ws-side, #ws-context, .ws-searchui, .ws-plandock, .ws-dialog, .ws-sheet).is-elastic { box-shadow: none !important; }


/* The sidebar's second stage, building (workspace.js, morphBegin): the overview at its own width in the widening drawer,
   each piece revealed by its own transform or clip (morphPaint). The rail's own buttons give way to their icons in
   flight; the list beside it is covered as the page wipes in. Each card's frame is a piece of its own, under its
   contents (z-index -1 in the overview), in the card's border and color (the theme's, never copied: a theme changed
   after it was measured would show stale). Ahead of it, the overview waits drawn and hidden (is-standby). */
.ws-overview.is-standby { visibility: hidden; pointer-events: none; right: auto; }
.ws-nav.is-morphing { overflow: hidden; }
.ws-nav.is-morphing .ws-rail > *, .ws-nav.is-morphing .ws-rail__libraries > *, .ws-nav.is-morphing .ws-rail__tools > * { visibility: hidden; }
.ws-overview.is-building { right: auto; background: transparent; }
.ws-overview__cover, .ws-ocard__frame { display: none; }
.ws-overview.is-building > .ws-overview__cover { display: block; position: absolute; inset: 0; z-index: -1; background: var(--paper); }
.ws-overview.is-building .ws-overview__scroll { overflow: hidden; }
.ws-overview.is-building :is(.ws-ocard, .ws-ome) { position: relative; background: none; border-color: transparent; }
.ws-overview.is-building .ws-ocard__frame { display: block; position: absolute; inset: -1px; z-index: -1; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: inherit;
  background: var(--panel); pointer-events: none; }
.ws-overview.is-building .ws-ocard--add > .ws-ocard__frame { border-style: dashed; background: none; }
.ws-ocard__rule { position: absolute; left: 0; right: 0; border-top: var(--geometry-border-1px-93e2062) solid var(--line); }
.ws-overview.is-building .ws-ocard__content.ws-tree { border-top-color: transparent; }
.ws-overview.is-building .ws-ocard__chip { transform-origin: 30% 100%; }
/* Send modes: a message's mode on its head; a patch's report under its answer; a fork's results to bring back, its
   forks, and alternatives compared. */
.ws-chip--mode { display: inline-flex; align-items: center; gap: var(--spacing-margin-3rem-fb2375d); margin-left: var(--spacing-margin-5rem-ef026cb); padding: var(--spacing-padding-1rem-4e95f32) var(--spacing-margin-5rem-ef026cb); border-radius: var(--geometry-border-radius-999px-088f244);
  border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); font-size: var(--typography-font-size-72rem-2a7309a); font-weight: var(--typography-font-weight-650-2099a9b); vertical-align: middle; }
.ws-chip--mode > svg { display: block; flex: none; }
.ws-patch { display: grid; gap: var(--spacing-gap-35rem-1304a2b); margin: var(--spacing-padding-6rem-d0bc70f) 0 var(--spacing-margin-2rem-4cd30ed); padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-8rem-818b9f7); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); background: var(--panel); }
.ws-patch.is-partial { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ws-patch__head { display: flex; align-items: center; gap: var(--spacing-gap-45rem-ef5b39f); margin: 0; font-weight: var(--typography-font-weight-700-99ee502); font-size: var(--typography-font-size-88rem-39c360b); }
.ws-patch__head > svg { display: block; flex: none; color: var(--accent); }
.ws-patch__part > summary { display: flex; align-items: center; gap: var(--spacing-margin-4rem-7fdc8b1); cursor: pointer; font-size: var(--typography-font-size-84rem-a4deb85); }
.ws-patch__part > summary > svg { display: block; flex: none; }
.ws-patch__list { margin: var(--spacing-margin-3rem-fb2375d) 0 0; padding-left: var(--spacing-padding-1-2rem-a7b00d3); font-size: var(--typography-font-size-84rem-a4deb85); display: grid; gap: var(--spacing-margin-2rem-4cd30ed); }
.ws-forkret__part h3 { margin: var(--spacing-padding-9rem-2ad2e76) 0 var(--spacing-gap-35rem-1304a2b); }
.ws-forkret__list, .ws-forklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-forkret__item > label { display: flex; align-items: flex-start; gap: var(--spacing-gap-55rem-f5020a7); font-size: var(--typography-font-size-88rem-39c360b); }
.ws-forkret__item > label > input { flex: none; margin-top: var(--spacing-margin-2rem-4cd30ed); }
.ws-forkret__item.is-conflict { color: var(--warn); }
.ws-forkret__diff pre { max-height: var(--geometry-min-width-14rem-0eb654d); overflow: auto; font-size: var(--typography-font-size-76rem-a2a5d3f); }
.ws-forklist__item { display: flex; align-items: center; gap: var(--spacing-gap-55rem-f5020a7); padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-6rem-d0bc70f); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-forklist__open { flex: 1; min-width: 0; display: grid; gap: var(--spacing-padding-1rem-4e95f32); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ws-forkcompare { display: grid; gap: var(--spacing-padding-6rem-d0bc70f); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ws-forkcompare__one { position: relative; padding: var(--spacing-padding-6rem-d0bc70f) var(--spacing-gap-7rem-7eff2a1); border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); }
.ws-forkcompare__one > .ws-iconbtn { position: absolute; top: .35rem; right: .35rem; }
.ws-forkcompare__summary { margin-top: var(--spacing-gap-8rem-818b9f7); }

/* Patch Preview (patchImpact): a quiet preflight on a 4px rhythm. The summary card, the risks, the steps as a timeline,
   what happened outside, the folds, a sticky action bar. Colour only where something is at stake. */
.ws-pf__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-375rem-942bd3e); margin: 0 0 var(--spacing-padding-75rem-4cf1798); }
.ws-pf__moved { margin: var(--spacing-margin-375rem-5672fd9) 0 var(--spacing-padding-75rem-4cf1798); font-size: var(--typography-font-size-8rem-818b9f7); line-height: var(--typography-line-height-1-45-6918de1); color: var(--warn); }
.ws-pf__summary { display: grid; gap: var(--spacing-padding-75rem-4cf1798); padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-875rem-89c2c37); margin: 0 0 var(--spacing-padding-75rem-4cf1798); border: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line));
  border-radius: var(--r-lg, var(--geometry-border-radius-12px-7769e81)); background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.ws-pf__facts { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-75rem-4cf1798); margin: 0; font-size: var(--typography-font-size-875rem-89c2c37); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-pf__facts dt { color: var(--dim); font-size: var(--typography-font-size-75rem-4cf1798); font-weight: var(--typography-font-weight-550-f89f8d0); line-height: var(--typography-line-height-1-6-ec6c168); }
.ws-pf__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: baseline; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-pf__words { flex: 1; min-width: 0; color: var(--ink); }
.ws-pf__revise { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-padding-25rem-1677828); height: var(--geometry-width-1-5rem-b81aec4); padding: 0 var(--spacing-margin-5rem-ef026cb);
  font: inherit; font-size: var(--typography-font-size-75rem-4cf1798); font-weight: var(--type-weight-control); line-height: normal; color: var(--muted); background: none; border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius: var(--r-pill, var(--geometry-border-radius-999px-088f244)); cursor: pointer;
  transition: color var(--dur-micro), border-color var(--dur-micro), background-color var(--dur-micro); }
.ws-pf__revise svg { display: block; flex: none; }
.ws-pf__revise:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.ws-pf__revise:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ws-pf__correction { flex-wrap: wrap; }
.ws-pf__edit { flex: 1 1 100%; font: inherit; font-size: var(--typography-font-size-875rem-89c2c37); line-height: var(--typography-line-height-1-45-6918de1); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-625rem-f9d8138); color: var(--ink); background: var(--paper);
  border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); resize: vertical; }
.ws-pf__editbar { flex: 1 1 100%; display: flex; justify-content: flex-end; }
.ws-pf__outcome { display: grid; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-pf__bar { display: flex; gap: var(--spacing-gap-2px-7476140); height: var(--geometry-text-underline-offset-4px-3566015); border-radius: var(--geometry-outline-2px-7476140); overflow: hidden; }
.ws-pf__seg { display: block; flex-basis: 0; min-width: var(--geometry-border-radius-6px-7adef6a); background: var(--muted); }
.ws-pf__seg--redo { background: var(--danger, var(--red)); } .ws-pf__seg--recheck { background: var(--warn); }
.ws-pf__seg--keep { background: var(--ok); } .ws-pf__seg--idle { background: color-mix(in srgb, var(--muted) 35%, transparent); }
.ws-pf__counts { display: flex; flex-wrap: wrap; gap: var(--spacing-padding-25rem-1677828) var(--spacing-padding-875rem-89c2c37); font-size: var(--typography-font-size-8125rem-fc9df8d); color: var(--muted); }
.ws-pf__count { display: inline-flex; align-items: center; gap: var(--spacing-gap-375rem-942bd3e); white-space: nowrap; }
.ws-pf__count strong { color: var(--ink); font-weight: var(--typography-font-weight-650-2099a9b); font-variant-numeric: tabular-nums; }
.ws-pf__dot { display: block; flex: none; width: var(--geometry-border-radius-8px-eb4ebe4); height: var(--geometry-border-radius-8px-eb4ebe4); border-radius: 50%; background: var(--muted); }
.ws-pf__dot--redo { background: var(--danger, var(--red)); }
.ws-pf__dot--recheck { background: var(--warn); }
.ws-pf__dot--keep { background: var(--ok); }
.ws-pf__dot--idle { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.ws-pf__risks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-375rem-942bd3e); margin: 0 0 var(--spacing-padding-25rem-1677828); }
.ws-pf__section { margin-top: var(--spacing-padding-1rem-b8be0c7); }
.ws-pf__label { margin: 0 0 var(--spacing-gap-375rem-942bd3e); color: var(--dim); font-size: var(--typography-font-size-75rem-4cf1798); font-weight: var(--type-weight-control); letter-spacing: var(--typography-letter-spacing-02em-3e41986); }
/* The timeline: a 16px rail with the line through each dot's centre. */
.ws-pf__chain { list-style: none; margin: 0; padding: 0; position: relative; }
.ws-pf__chain::before { content: ""; position: absolute; left: 7.5px; top: 1.125rem; bottom: 1.125rem; width: var(--geometry-border-1px-93e2062); background: var(--line); }
.ws-pf__step > details > summary, .ws-pf__flat { display: grid; grid-template-columns: 16px 1.5rem minmax(0, 1fr) auto auto; align-items: center;
  column-gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-height-2-25rem-e1d2841); padding: 0 var(--spacing-gap-375rem-942bd3e) 0 0; margin: 0 var(--spacing-margin-375rem-5672fd9) 0 0; font-size: var(--typography-font-size-875rem-89c2c37); list-style: none; border-radius:var(--r-sm); }
.ws-pf__flat { grid-template-columns: 16px 1.5rem minmax(0, 1fr) auto 12px; }
.ws-pf__step > details > summary { cursor: pointer; transition: background-color var(--dur-micro); }
.ws-pf__step > details > summary:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ws-pf__step > details > summary:active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ws-pf__step > details > summary:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-border-1px-93e2062); }
.ws-pf__step > details > summary::-webkit-details-marker { display: none; }
/* The house chevron (summary::before) goes last, after the action, clear of the rail. */
.ws-pf__step > details > summary::before { order: 9; grid-column: 5; width: var(--geometry-border-radius-12px-7769e81); height: var(--geometry-border-radius-12px-7769e81); justify-self: end; }
.ws-pf__step .ws-pf__dot { justify-self: center; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--panel); }
.ws-pf__step .ws-pf__dot--idle { box-shadow: inset 0 0 0 1.5px var(--muted), 0 0 0 3px var(--panel); }
.ws-pf__step.is-decision .ws-pf__dot { outline: var(--geometry-border-1-5px-67792bd) solid var(--danger, var(--red)); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-pf__key { color: var(--dim); font-family: var(--font-mono); font-size: var(--typography-font-size-75rem-4cf1798); font-variant-numeric: tabular-nums; }
.ws-pf__facts .ws-pf__key { flex: none; }
.ws-pf__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pf__action { font-size: var(--typography-font-size-75rem-4cf1798); font-weight: var(--type-weight-control); color: var(--muted); text-align: right; }
.ws-pf__step--redo .ws-pf__action { color: var(--danger, var(--red)); }
.ws-pf__step--recheck .ws-pf__action { color: var(--warn); }
.ws-pf__step--keep .ws-pf__action { color: var(--ok); }
.ws-pf__step > details[open] > summary .ws-pf__title { white-space: normal; }
.ws-pf__detail { margin: var(--spacing-gap-125rem-4727209) 0 var(--spacing-padding-625rem-f9d8138) calc(var(--spacing-padding-16px-6793164) + var(--spacing-margin-5rem-ef026cb)); padding: var(--spacing-padding-625rem-f9d8138) var(--spacing-padding-75rem-4cf1798); display: grid; gap: var(--spacing-margin-5rem-ef026cb); font-size: var(--typography-font-size-8125rem-fc9df8d); line-height: var(--typography-line-height-1-45-6918de1);
  border: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line)); border-radius:var(--r-sm); background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.ws-pf__why { margin: 0; color: var(--ink); }
.ws-pf__grid { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--spacing-gap-375rem-942bd3e) var(--spacing-padding-625rem-f9d8138); margin: 0; }
.ws-pf__grid dt { color: var(--dim); font-size: var(--typography-font-size-75rem-4cf1798); font-weight: var(--typography-font-weight-550-f89f8d0); line-height: var(--typography-line-height-1-75-f4881c7); }
.ws-pf__grid dd { margin: 0; min-width: 0; color: var(--muted); line-height: var(--typography-line-height-1-75-f4881c7); }
.ws-pf__stack { display: grid; gap: var(--spacing-padding-25rem-1677828); }
.ws-pf__note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-gap-375rem-942bd3e); margin: 0; color: var(--ink); }
.ws-pf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-padding-25rem-1677828); font-size: var(--typography-font-size-8125rem-fc9df8d); }
.ws-pf__file, .ws-pf__run { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-gap-375rem-942bd3e) var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-pf__path { font-family: var(--font-mono); font-size: var(--typography-font-size-75rem-4cf1798); color: var(--ink); overflow-wrap: anywhere; }
.ws-pf__hash { font-family: var(--font-mono); font-size: var(--typography-font-size-6875rem-f04c3e5); color: var(--dim); }
.ws-pf__sub { color: var(--muted); font-size: var(--typography-font-size-8125rem-fc9df8d); }
.ws-pf__chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-margin-3rem-fb2375d); height: var(--geometry-height-1-375rem-35da2da); padding: 0 var(--spacing-margin-5rem-ef026cb); font: inherit; font-size: var(--typography-font-size-6875rem-f04c3e5);
  font-weight: var(--typography-font-weight-650-2099a9b); line-height: normal; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: var(--geometry-border-1px-93e2062) solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-pill, var(--geometry-border-radius-999px-088f244)); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro), border-color var(--dur-micro); }
.ws-pf__chip code { font-family: var(--font-mono); font-size: var(--typography-font-size-6875rem-f04c3e5); font-weight: var(--typography-font-weight-500-0604cd3); }
.ws-pf__chip:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ws-pf__chip:active { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ws-pf__chip[aria-expanded="true"] { border-color: var(--accent); }
.ws-pf__chip:focus-visible, .ws-pf__revise:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-outline-2px-7476140); }
.ws-pf__diff { flex: 1 1 100%; max-height: var(--geometry-width-15rem-ec6f0ef); overflow: auto; margin: var(--spacing-padding-25rem-1677828) 0 var(--spacing-gap-125rem-4727209); padding: var(--spacing-margin-5rem-ef026cb) var(--spacing-padding-625rem-f9d8138); font-family: var(--font-mono); font-size: var(--typography-font-size-6875rem-f04c3e5);
  line-height: var(--typography-line-height-1-55-9e0b4cf); color: var(--muted); background: var(--paper); border: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line)); border-radius:var(--r-sm); white-space: pre; }
.ws-pf__diff .is-add { color: var(--ok); } .ws-pf__diff .is-del { color: var(--danger, var(--red)); } .ws-pf__diff .is-hunk { color: var(--info, var(--accent)); }
/* Outside Dyadic: the pill in its own column, the words aligned beside it. */
.ws-pf__outside { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-padding-625rem-f9d8138); font-size: var(--typography-font-size-875rem-89c2c37); line-height: var(--typography-line-height-1-45-6918de1); }
.ws-pf__outside > li { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); column-gap: var(--spacing-padding-625rem-f9d8138); align-items: start; }
.ws-pf__outside > li > .ws-tone { justify-self: start; }
.ws-pf__outside p { margin: 0; }
.ws-pf__follow { display: flex; align-items: flex-start; gap: var(--spacing-margin-5rem-ef026cb); margin-top: var(--spacing-gap-375rem-942bd3e); font-size: var(--typography-font-size-8125rem-fc9df8d); color: var(--muted); cursor: pointer; }
.ws-pf__follow input { flex: none; margin: var(--spacing-padding-1875rem-54dc10b) 0 0; }
.ws-pf__follow strong { color: var(--ink); font-weight: var(--type-weight-control); }
/* The folds: one line each, quiet until opened. */
.ws-pf__folds { margin-top: var(--spacing-padding-1rem-b8be0c7); border-top: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line)); }
.ws-pf__fold { border-bottom: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line)); }
.ws-pf__fold > summary { display: flex; align-items: center; gap: var(--spacing-margin-5rem-ef026cb); min-height: var(--geometry-height-2-5rem-fb391dd); font-size: var(--typography-font-size-8125rem-fc9df8d); font-weight: var(--type-weight-control); color: var(--muted); cursor: pointer;
  list-style: none; transition: color var(--dur-micro); }
.ws-pf__fold > summary::-webkit-details-marker { display: none; }
.ws-pf__fold > summary:hover, .ws-pf__fold[open] > summary { color: var(--ink); }
.ws-pf__fold > summary:focus-visible { outline: var(--geometry-outline-2px-7476140) solid var(--accent); outline-offset: var(--geometry-outline-2px-7476140); border-radius:var(--r-xs); }
.ws-pf__fold > .ws-pf__list { margin: 0 0 var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-1-25rem-c10b7e1); }
.ws-pf__lines { color: var(--muted); line-height: var(--type-line-body); }
.ws-pf__lines > li { display: list-item; list-style: disc; margin-left: var(--spacing-padding-875rem-89c2c37); }
/* The action stays in reach while the preview scrolls. */
.ws-pf__actions { position: sticky; bottom: -1.1rem; z-index: 2; margin: var(--spacing-padding-1rem-b8be0c7) var(--spacing-margin-1-1rem-68934d9) var(--spacing-margin-1-1rem-68934d9); padding: var(--spacing-padding-75rem-4cf1798) var(--spacing-padding-left-1-1rem-14af91b) calc(var(--spacing-padding-75rem-4cf1798) + env(safe-area-inset-bottom, var(--spacing-padding-top-0px-33a3c91)));
  background: var(--panel); border-top: var(--geometry-border-1px-93e2062) solid var(--line-soft, var(--line)); }
@media (prefers-reduced-motion: reduce) { .ws-pf__chip, .ws-pf__revise, .ws-pf__fold > summary, .ws-pf__step > details > summary { transition: none; } }
/* The Patch report's files and record: a path, its state, its versions and hashes on one wrapping line. */
.ws-patch__head .ws-tone { margin-left: var(--spacing-padding-25rem-1677828); }
.ws-patch__file { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-padding-25rem-1677828) var(--spacing-margin-5rem-ef026cb); }
.ws-patch__record { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-375rem-942bd3e); list-style: none; padding-left: 0; }
.ws-patch__tests { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-gap-375rem-942bd3e); margin: var(--spacing-gap-375rem-942bd3e) 0; }
.ws-patch__node { display: flex; align-items: center; gap: var(--spacing-gap-375rem-942bd3e); font-size: var(--typography-font-size-8125rem-fc9df8d); }
.ws-patch__node code { font-family: var(--font-mono); font-size: var(--typography-font-size-75rem-4cf1798); }
.ws-patch > * { min-width: 0; }  /* a grid's items: long test names and paths wrap rather than run past the edge */
.ws-patch__tests small { overflow-wrap: anywhere; }
.ws-patch__verify:empty { display: none; }
.ws-patch__verify { display: grid; gap: var(--spacing-margin-4rem-7fdc8b1); }
.ws-patch__why { margin: 0; padding-left: var(--spacing-padding-1-2rem-a7b00d3); display: grid; gap: var(--spacing-margin-2rem-4cd30ed); font-size: var(--typography-font-size-84rem-a4deb85); overflow-wrap: anywhere; }
.ws-patch__why > li > span, .ws-patch__next { display: block; min-width: 0; }
.ws-patch__next { font-size: var(--typography-font-size-78rem-6850684); }
.ws-patch__note { margin: 0; font-size: var(--typography-font-size-82rem-8da80e1); }
.ws-patch__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-5rem-ef026cb); }
.ws-patch__attempt { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-padding-25rem-1677828) var(--spacing-margin-5rem-ef026cb); }
.ws-patch__attemptnote { flex-basis: 100%; overflow-wrap: anywhere; }
.ws-patch__tests > *, .ws-patch__file > * { min-width: 0; overflow-wrap: anywhere; }
.ws-reverify__tests { margin: 0 0 var(--spacing-padding-1rem-b8be0c7); padding: 0; list-style: none; display: grid; gap: var(--spacing-padding-6rem-d0bc70f); }
.ws-reverify__test { display: grid; gap: var(--spacing-gap-35rem-1304a2b); }
.ws-reverify__test code { font-family: var(--font-mono); font-size: var(--typography-font-size-8rem-818b9f7); overflow-wrap: anywhere; }

/* Shared native disclosures: quiet in chat; details stay inside the parent conversation. */
.ws-agent-indicator { margin: var(--spacing-padding-65rem-bcca6ce) 0; }
.ws-agent-tasks { display: grid; gap: var(--spacing-gap-7rem-7eff2a1); min-width: 0; }
.ws-agent-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--control-gap); margin-block: var(--control-py); }
.ws-agent-toolbar .ws-button { min-height: 44px; min-width: 0; text-align: center; }
.ws-agent-task__summary { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ws-agent-task__prompt { white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-agent-task, .ws-patch-preview { border: var(--geometry-border-1px-93e2062) solid var(--line); border-radius:var(--r-sm); padding: var(--spacing-gap-8rem-818b9f7); min-width: 0; }
.ws-agent-task > summary, .ws-patch-preview > summary { display: flex; align-items: center; gap: var(--spacing-padding-6rem-d0bc70f); cursor: pointer; }
.ws-agent-task > summary > span:nth-child(2) { flex: 1; min-width: 0; }
.ws-agent-task > summary > .ws-agentmark, .ws-agent-task > summary > img { width: var(--geometry-border-radius-24px-2793cbc); height: var(--geometry-border-radius-24px-2793cbc); flex: none; border-radius: 50%; }
.ws-agent-task small { display: block; overflow-wrap: anywhere; }
.ws-agent-task__activity { max-height: var(--geometry-min-width-14rem-0eb654d); overflow: auto; margin-block: var(--spacing-padding-6rem-d0bc70f); }
.ws-agent-task textarea { width: 100%; min-height: var(--geometry-min-width-4rem-a517504); box-sizing: border-box; }
.ws-patch-preview { margin-block: var(--spacing-padding-65rem-bcca6ce); }
.ws-patch-preview__file { margin-block-start: var(--spacing-padding-65rem-bcca6ce); min-width: 0; }
.ws-patch-preview__file > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-gap-7rem-7eff2a1); cursor: pointer; }
.ws-patch-preview__file > summary > span { min-width: 0; overflow-wrap: anywhere; }
.ws-patch-preview .ws-diff { overflow-x: auto; max-width: 100%; }


/* Native independent tasks and inert package review reuse the existing sheets and diffs. */
.ws-agent-evidence { display: block; max-height: var(--geometry-max-width-18rem-6796582); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--typography-font-size-8rem-818b9f7); }
.ws-agent-task .ws-row-actions { flex-wrap: wrap; }
.ws-agent-task .ws-prose, .ws-patch-preview__file { min-width: 0; max-width: 100%; }

.ws-patch-preview__file > summary > span { margin-inline-end: auto; }

/* Shared native import review; bounded lists keep collection uploads usable on phones. */
.ws-import-list { display: grid; gap: var(--spacing-gap-7rem-7eff2a1); max-height: var(--geometry-max-height-45dvh-688d684); overflow: auto; min-width: 0; }
.ws-import-option { align-items: flex-start; min-width: 0; }
.ws-import-option > span { min-width: 0; overflow-wrap: anywhere; }
.ws-import-option small { display: block; }
.ws-agent-workflow { border-inline-start: var(--geometry-outline-2px-7476140) solid var(--line); padding-inline-start: var(--spacing-gap-8rem-818b9f7); min-width: 0; }
.ws-agent-metrics { overflow: auto; max-width: 100%; }

.ws-agent-metrics table { min-width: var(--geometry-height-680px-4996eaa); border-collapse: collapse; }
.ws-agent-check { display: grid; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; margin-block: var(--spacing-padding-6rem-d0bc70f); }
.ws-agent-check > * { min-width: 0; max-width: 100%; }
.ws-agent-metrics th, .ws-agent-metrics td { padding: var(--spacing-padding-6rem-d0bc70f); text-align: start; border-block-end: var(--geometry-border-1px-93e2062) solid var(--line); vertical-align: top; }
.ws-agent-metrics th { white-space: nowrap; }
.ws-agent-tasks > .ws-row-actions { flex-wrap: wrap; }

/* Model stacks use the existing settings cards in every theme. */
.ws-stack-role { margin-block: var(--spacing-padding-65rem-bcca6ce); }
.ws-stack-role summary span { display: grid; gap: var(--spacing-padding-25rem-1677828); min-width: 0; }
.ws-stack-role summary small { overflow-wrap: anywhere; font-weight: normal; }
.ws-stack-model { display: flex; flex-wrap: wrap; gap: var(--spacing-margin-5rem-ef026cb); min-width: 0; }
.ws-stack-model input { flex: 1 1 16rem; min-width: 0; width: 100%; }
.ws-stack-model select { flex: 0 1 10rem; min-width: 0; }
.ws-stack-fallbacks { display: grid; gap: var(--spacing-padding-75rem-4cf1798); }
.ws-stack-fallback { display: grid; gap: var(--spacing-margin-5rem-ef026cb); padding-block: var(--spacing-margin-5rem-ef026cb); }

/* design-safety:start — immutable presentation floors; package values cannot hide an approval's decisions. */
.ws-approval { min-inline-size: min(18rem, 100%); }
.ws-approval__actions .ws-button { min-block-size: 32px; min-inline-size: 7.5rem; }
/* design-safety:end */

/* Store actions share the presentation system and stay above native safe areas. */
.ws-store-add { position: fixed; z-index: 24; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-2); max-width: calc(100vw - 40px); }
[data-store]:has(.ws-store-add) { padding-bottom: 100px; }
.ws-store__category { margin: 0; padding: 12px 16px; color: var(--muted); font-size: var(--typography-font-size-875rem-89c2c37); font-family: var(--font-heading); }

.ws-store-add { width: 58px; height: 58px; padding: 0; border-radius: 50%; justify-content: center; }
.ws-capability-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr)); gap: 10px; margin-block: 10px 20px; }
.ws-capability-card { display: flex; align-items: center; gap: 10px; padding: 12px; min-width: 0; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); }
.ws-capability-card > span:last-child { min-width: 0; display: grid; gap: 3px; }
.ws-capability-card strong { overflow-wrap: anywhere; font-size: var(--typography-font-size-875rem-89c2c37); }
.ws-capability-card small { color: var(--muted); }
.ws-check[data-off="true"], .ws-store__picks .ws-hosted__row[data-off="true"] { opacity: .55; }
.ws-memory-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; margin-block: 12px; }
.ws-memory-saved > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ws-memory-saved p { margin: 4px 0 0; }
.ws-store-review { padding: 16px; margin-block: 12px; }
.ws-evidence-box,.bb-evidence-box { position: relative; min-width: 0; max-width: 100%; }
.ws-evidence-box > .ws-evidence-copy,.bb-evidence-box > .ws-iconbtn { position: sticky; top: 4px; margin-left: auto; display: flex; z-index: 1; }
.ws-evidence-box pre,.bb-evidence-box pre { margin-top: 0; overflow: auto; }
.ws-agent-result { padding: 16px; margin-block: 14px; min-width: 0; }
.ws-agent-result h3 { display: flex; align-items: center; gap: 12px; }
.ws-agent-result .ws-facts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.ws-agent-result dd { overflow-wrap: anywhere; min-width: 0; }

/* Shared collection geometry: Knowledge, Tasks and Automations differ in semantics, not navigation. */
.ws-collection { width:100%; max-width:var(--layout-content-width,1200px); margin-inline:auto; }
.ws-collection__tools { display:grid; grid-template-columns:minmax(0,1fr) minmax(0, min(40vw,220px)); align-items:stretch; gap:1px; margin-block:0 24px; width:calc(100% + 2 * var(--page-x)); max-width:none; margin-inline:calc(-1 * var(--page-x)); box-sizing:border-box; border-block:1px solid var(--line); background:var(--line); }
.ws-collection__tools > * { box-sizing:border-box; min-height:48px; margin:0; padding:8px var(--page-x); background:var(--panel); border:0; }
.ws-collection__tools .ws-page-search { border:0; border-radius:0; grid-column:1; min-width:0; width:100%; display:flex; gap:8px; align-items:center; }
.ws-collection__tools input { width:100%; min-width:0; }
.ws-collection__tools select { grid-column:2; width:100%; min-width:0; min-height:48px; padding:8px 12px; font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:0; }
.ws-collection__list { display:grid; gap:12px; }
.ws-collection__tools > .bb-pick { grid-column:1 / -1; width:100%; max-width:none; min-height:48px; border-radius:0; }
.ws-collection__tools > .bb-pick .bb-pick__text { flex:1; text-align:start; }
.ws-collection:has(.ws-collection__add) { padding-bottom:100px; }
.ws-recovery-row { display:flex; align-items:center; gap:12px; }
.ws-recovery-row > strong { flex:1; min-width:0; overflow-wrap:anywhere; }
.ws-me { position:relative; }
.ws-me.has-unread::after { content:""; position:absolute; right:3px; top:3px; width:8px; height:8px; border-radius:50%; background:var(--accent); border:2px solid var(--panel); }
.ws-account-bell { position:relative; display:inline-flex; flex:none; align-items:center; justify-content:center; }
.ws-account-bell .ws-bell__count { position:absolute; right:-7px; top:-7px; }
.ws-account-bell [hidden] { display:none; }
.ws-addrow[aria-disabled="true"] { opacity:.55; border:1px dashed var(--line); cursor:not-allowed; }
.ws-addrow[aria-disabled="true"] small { color:var(--ink); font-weight:600; }


/* Collection and management option bars meet the main header on every viewport. */
.ws-messages:has(> .ws-project) { --page-top:0px; }
.ws-project > :is(.ws-page-tools,.ws-filters,.ws-imgbar):first-child { margin-top:0; }
.ws-hub__nav { padding-top:0; padding-bottom:0; }

/* Account navigation follows the compact rail upward and unfolds in the overview. */
.ws-overview__divider { flex: none; width: 100%; border: 0; border-top: 2px solid var(--line); margin: var(--spacing-margin-3rem-fb2375d) 0; }
.ws-ome.ws-ocard { display: block; padding: 0; }
.ws-ome.ws-ocard .ws-ome__me { width: 100%; padding: var(--spacing-gap-45rem-ef5b39f) var(--spacing-padding-85rem-2e72ebc); }
.ws-ome__avatar { position: relative; }
.ws-ome__avatar.has-unread::after { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
.ws-ome .ws-ocard__content > hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: var(--spacing-margin-2rem-4cd30ed) 0; }

/* The compact account actions grow upward inside the rail, centered over the avatar. */
.ws-rail__tools { width:100%; }
#ws-rail-you { width:100%; }
#ws-rail-you .ws-rail__drawer-inner { box-sizing:border-box; }
#ws-rail-you hr { margin:2px 0; border-top-width:1px; }

/* Context actions: stable quick choices, then one level of purposeful disclosure. */
.ws-menu.ws-menu--actions { width:min(360px, calc(100vw - 24px)); min-width:0; padding:8px; display:flex; flex-direction:column; overflow:hidden; }
.ws-menu.ws-menu--actions[hidden] { display:none; }
.ws-action-head { display:flex; align-items:center; gap:8px; padding:4px 4px 8px; flex:none; touch-action:none; }
.ws-action-heading { flex:1; min-width:0; display:grid; gap:3px; }
.ws-action-heading strong { font-size:14px; font-weight:var(--type-weight-control); }
.ws-action-heading small { display:block; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-menu .ws-action-head > button { display:grid; place-items:center; flex:none; width:32px; min-height:32px; padding:4px; border-radius:var(--r-sm); }
.ws-action-root, .ws-action-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.ws-action-quick { display:grid; grid-template-columns:repeat(var(--actions), minmax(0,1fr)); gap:4px; padding:4px 0 8px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.ws-menu .ws-action-quick__item { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:64px; gap:6px; padding:6px 2px; text-align:center; font-size:12px; }
.ws-action-quick__item .ws-action-words { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-menu .ws-action-group { min-height:44px; padding:9px 10px; gap:10px; font-size:14px; }
.ws-action-group > span { flex:1; min-width:0; }
.ws-action-count { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.ws-menu .ws-action-group--manage { margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 var(--r-sm) var(--r-sm); }
.ws-menu .ws-action-leaf { align-items:center; min-height:44px; padding:10px; gap:10px; font-size:14px; }
.ws-action-words { display:grid; min-width:0; gap:4px; }
.ws-action-words > small { color:var(--muted); font-size:12px; line-height:1.4; }
.ws-action-leaf.danger { margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 var(--r-sm) var(--r-sm); }
.ws-action-target:is(.ws-row, .ws-rail__item) { box-shadow:inset 0 0 0 1px var(--line); }
.ws-msg.ws-action-target .ws-msg__body { outline:1px solid var(--line); outline-offset:4px; border-radius:var(--r-sm); }
.ws-menu.ws-menu--action-sheet { width:auto; max-width:none; border-radius:var(--r-lg); padding:6px 8px; animation:ws-sheet-up var(--dur-control) ease-out; }
.ws-menu.ws-menu--action-sheet.is-elastic { overflow:visible; }
.ws-file-mention { font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.ws-file-preview { padding:12px; }
.ws-chat-preview { display:grid;gap:16px;min-width:0; }
.ws-chat-preview__message { padding:12px 0;border-bottom:1px solid var(--line);min-width:0; }
.ws-chat-preview__message[data-cited-message] { border-inline-start:2px solid var(--accent);padding-inline-start:12px; }
.ws-chat-preview__message > strong { display:block;margin-bottom:6px;font-size:12px; }
.ws-personalization { display:grid;gap:20px;min-width:0; }
.ws-personalization__row { display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,42%);align-items:center;gap:12px;padding:14px 16px;min-height:54px; }
.ws-personalization__row + .ws-personalization__row { border-top:1px solid var(--line); }
.ws-personalization__row > span { white-space:nowrap; }
.ws-personalization__row select { width:100%;min-width:0;min-height:32px;padding:4px 6px;text-align:end;font:inherit;font-size:14px;color:var(--dim);background:transparent;border:0;border-radius:6px;cursor:pointer; }
.ws-personalization__instructions { display:grid;gap:10px; }
.ws-personalization__instructions textarea { width:100%;box-sizing:border-box;resize:vertical;min-height:130px; }
:root:not([data-wrap="on"]) .ws-file-preview { white-space:nowrap; overflow-wrap:normal; overflow-x:auto; }
.ws-file-preview > pre { margin:0; overflow:auto; white-space:pre; }
.ws-action-head--minimal { position:relative; min-height:26px; padding:0; }
.ws-action-head--minimal .ws-action-heading { display:grid; place-items:center; height:26px; }
.ws-action-head--minimal > .ws-action-close { position:absolute; inset-inline-end:0; top:0; }
.ws-action-grip { display:block; width:30px; height:3px; border-radius:var(--r-sm); background:var(--line); }
.ws-menu .ws-action-quick__item { position:relative; }
.ws-action-options { position:absolute; top:5px; inset-inline-end:8px; width:6px; height:6px; border:1px solid var(--muted); border-radius:2px; opacity:.7; pointer-events:none; }
.ws-action-options::after { content:""; position:absolute; width:6px; height:6px; top:2px; left:2px; border:1px solid var(--muted); border-radius:2px; background:var(--panel-strong); }
.ws-dialog-body--selection { display:flex; flex-direction:column; gap:12px; }
.ws-message-selection-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ws-message-selection { box-sizing:border-box; width:100%; min-height:min(55dvh,480px); resize:vertical; padding:14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); font:inherit; line-height:1.65; white-space:pre-wrap; -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
@media(prefers-reduced-motion:reduce) { .ws-menu.ws-menu--actions:not([hidden]), .ws-menu--actions * { animation:none !important; transition:none !important; } }

/* Compact attachment controls keep both the icon and its word centered. */
.ws-sheet--attach .ws-sheet__head { position:absolute; top:4px; right:6px; padding:0; border:0; }
.ws-sheet--attach .ws-sheet__head .ws-iconbtn { width:32px; min-height:32px; height:32px; }
.ws-sheet--attach .ws-sheet__grip { min-height:32px; padding:8px 44px; }
.ws-sheet--attach .ws-addtiles { margin-top:0; }
.ws-context .ws-panel-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Search keeps content kinds above one full-width search/filter row. */
.ws-searchui__find .ws-searchui__field { flex:1; min-width:0; }
.ws-searchui__find .ws-searchui__filtersbtn { flex:none; height:44px; }
.ws-searchui__panel > .ws-searchui__mode { margin-bottom:10px; }
.ws-file-explorer__tools { margin-block:0; }
.ws-file-explorer__tools .ws-page-search { min-width:0; width:100%; }
.ws-file-explorer__tools .ws-page-search input { width:100%; min-width:0; }
.ws-file-explorer__tools > .ws-segmented { display:flex; align-items:center; justify-content:center; gap:2px; padding:4px; border-radius:0; }
.ws-file-explorer__tools > .ws-segmented button { padding:8px 4px; font-size:clamp(11px,3.1vw,14px); }
.ws-file-explorer__heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:36px; }
.ws-file-explorer__heading > h2 { margin:0; white-space:nowrap; }
.ws-file-explorer__selection { display:flex; flex:none; align-items:center; gap:8px; min-height:36px; white-space:nowrap; }
.ws-file-explorer__selection[hidden] { display:none; }
.ws-file-explorer__selection > .ws-iconbtn { width:28px; min-height:32px; height:32px; }
.ws-file-explorer__selection label { display:flex; align-items:center; gap:8px; }
.ws-file-explorer__selection [role=status] { font-size:12px; }
.ws-file-explorer__row { display:flex; align-items:center; gap:8px; min-height:44px; width:100%; }
.ws-file-explorer__row input, .ws-file-explorer__selection input { flex:none; width:16px; height:16px; accent-color:var(--accent); }
.ws-file-explorer__name { display:flex; align-items:center; gap:8px; flex:1; min-width:0; color:inherit; font:inherit; background:none; border:0; text-align:left; padding:6px 0; cursor:pointer; }
.ws-file-explorer__row .ws-filerow__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-file-explorer__row > small { flex:none; font-size:11px; }
.ws-file-explorer__row > .ws-iconbtn { flex:none; width:30px; min-height:32px; height:32px; }
.ws-file-explorer__scope .ws-group__head { font-size:13px; }
.ws-hub--content .ws-hub__body:has(.ws-file-explorer) { padding-top:0; }

/* Settings: one navigation shell; existing screens keep their API and control logic. */
.ws-setting > svg { display:none; }
.ws-dialog.ws-settings { width:min(1080px,96vw); height:min(800px,90dvh); max-height:90dvh; padding:0; overflow:hidden; }
.ws-settings .ws-dialog__head { height:60px; margin:0; padding:0 20px; border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent); flex:none; }
.ws-settings > [data-dialog-body] { display:grid; grid-template-columns:250px minmax(0,1fr); height:calc(100% - 60px); min-height:0; padding:0; overflow:hidden; }
.ws-settings__nav { display:flex; flex-direction:column; min-height:0; border-right:1px solid color-mix(in srgb,var(--ink) 12%,transparent); background:var(--panel); }
.ws-settings__search { display:flex; align-items:center; gap:8px; padding:12px; flex:none; }
.ws-settings__search > svg { flex:none; color:var(--muted); }
.ws-settings .ws-settings__search input { min-width:0; border:0; padding:8px 0; background:none; border-radius:0; }
.ws-settings__links { overflow:auto; overscroll-behavior:contain; padding:0 8px 16px; }
.ws-settings h3.ws-settings__group { margin:18px 12px 6px; font-size:12px; color:var(--muted); }
.ws-settings__link { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:44px; width:100%; padding:9px 12px; border:0; border-radius:var(--icon-radius); color:var(--ink); background:none; font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.ws-settings__link > svg { justify-self:center; color:var(--muted); }
.ws-settings__link > span { display:grid; gap:3px; min-width:0; }
.ws-settings__link strong { font-weight:500; }
.ws-settings__link small { color:var(--muted); font-size:11px; }
.ws-settings__value { max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-settings__link:hover, .ws-settings__link[aria-current="page"] { background:var(--accent-surface); }
.ws-settings__link[aria-current="page"] > svg { color:var(--accent); }
.ws-settings__page { overflow:auto; overscroll-behavior:contain; min-width:0; min-height:0; padding:20px 24px 24px; scroll-padding:20px; }
.ws-settings .ws-setprofile { margin:0 0 16px; padding:0; }
.ws-settings__intro { margin:0 0 20px; }
.ws-settings .ws-setgroup { margin:0 0 20px; border-color:color-mix(in srgb,var(--ink) 12%,transparent); border-radius:var(--r-md); background:var(--panel); }
.ws-settings .ws-setgroup--pad { padding:0 16px; }
.ws-settings .ws-setrow, .ws-settings .ws-setting-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:54px; padding:12px 16px; border:0; border-radius:0; }
.ws-settings .ws-setrow:has(> .ws-setrow__value) { grid-template-columns:24px minmax(0,1fr) auto auto; }
.ws-settings .ws-setrow::before { display:none; }
.ws-settings .ws-setgroup > * + * { border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
.ws-settings :is(.ws-setrow,.ws-setting-row) > svg { width:20px; height:20px; justify-self:center; }
.ws-settings .ws-setting-row > span { gap:4px; }
.ws-settings .ws-setgroup--pad > .ws-setting-row { padding-inline:0; }
.ws-settings :is(.ws-setrow,.ws-setting-row) strong { font-size:14px; font-weight:500; }
.ws-settings .ws-setrow__value { font-size:13px; max-width:180px; }
.ws-settings .ws-setting { display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 0; min-height:60px; margin:0; }
.ws-settings .ws-setting > svg { display:block; grid-column:1; grid-row:1; justify-self:center; color:var(--muted); }
.ws-settings .ws-setting > span { grid-column:2; grid-row:1; gap:5px; min-width:0; }
.ws-settings .ws-setting > input[role="switch"] { grid-column:3; grid-row:1; justify-self:end; }
.ws-settings .ws-setting strong { font-size:14px; font-weight:500; }
.ws-settings :is(.ws-setting,.ws-setting-row) small { font-size:12px; line-height:1.5; }
.ws-settings [aria-busy="true"] { opacity:.65; }
.ws-settings [data-error] { outline:1px solid var(--red); }
.ws-settings [data-setting-target] { outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--icon-radius); }
.ws-settings :is(input,select,textarea,button):focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.ws-settings .ws-field { margin:14px 0; }
.ws-settings .ws-field > :is(input,textarea,select) { width:100%; min-width:0; min-height:42px; font:inherit; font-size:14px; }
.ws-settings .ws-field > input[type="range"] { padding:0; }
.ws-settings input:is([type="checkbox"],[type="radio"],[type="range"]) { accent-color:var(--accent); }
.ws-settings .ws-setlabel { margin:20px 0 8px; }
.ws-settings .ws-setlabel:first-child { margin-top:0; }
.ws-settings .ws-setnote { line-height:1.6; font-size:13px; margin:12px 0 20px; }
.ws-settings .ws-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ws-settings .ws-mode { min-width:0; padding:12px; min-height:64px; }
.ws-settings .ws-mode__text { min-width:0; }
.ws-settings .ws-mode__text > span { font-size:12px; line-height:1.5; }
.ws-settings .ws-themecards { gap:10px; }
.ws-settings .ws-themecard { padding:10px; }
.ws-settings .ws-admin__controls { width:100%; }
.ws-settings .dy-auth.ws-account { display:block; width:100%; min-height:0; max-width:none; margin:0; padding:0; flex:none; }
.ws-settings .ws-account-edit { margin:0; }
.ws-settings .ws-account-edit > summary { cursor:pointer; list-style:none; }
.ws-settings .ws-account-edit > summary::-webkit-details-marker { display:none; }
.ws-settings .ws-account-edit > form { padding:0 16px 16px; }
.ws-settings .ws-account-edit [data-email] { margin:0; color:var(--muted); }
.ws-settings .ws-account [data-account-excluded] { display:none !important; }
.ws-settings .ws-account .dy-card { margin:0 0 20px; padding:16px; background:var(--panel); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:var(--r-md); }
.ws-settings .ws-account .dy-card h2 { margin:0 0 12px; font-size:14px; }
.ws-settings .ws-account .dy-list { margin:0; }
.ws-settings .ws-account .dy-list > li { align-items:center; gap:12px; }
.ws-settings .ws-account .dy-row { align-items:end; }
.ws-settings .ws-account .dy-row:has([data-add]) { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.ws-settings .ws-account .dy-button { min-height:42px; }
.ws-settings .ws-account [data-add] { white-space:nowrap; }
.ws-settings .ws-account [data-status]:empty { display:none; }
.ws-settings__filters { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-bottom:16px; align-items:center; }
.ws-settings__filters select { min-width:100px; width:auto; }
.ws-settings__empty { padding:16px; }
.ws-settings__tabs { display:flex; gap:4px; margin:0 0 18px; padding:4px; background:var(--paper); border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:var(--icon-radius); }
.ws-settings__tabs > button { flex:1; min-width:0; min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:var(--icon-radius); color:var(--muted); background:none; font:inherit; font-size:13px; cursor:pointer; }
.ws-settings__tabs--scroll { overflow-x:auto; scrollbar-width:thin; }
.ws-settings__tabs--scroll > button { flex:1 0 auto; min-width:max-content; padding-inline:4px; white-space:nowrap; }
.ws-settings__tabs > button[aria-selected="true"] { background:var(--accent-surface); color:var(--ink); }
.ws-settings .ws-fact { padding:12px 0; gap:8px; border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
.ws-settings .ws-fact > p { flex:1; min-width:0; margin:0; line-height:1.5; font-size:14px; }
.ws-settings .ws-fact small { display:block; margin-top:5px; }
.ws-settings__rolebar { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
@media(min-width:761px) {
  .ws-settings[data-settings-page="home"] .ws-settings__page .ws-setgroup { display:grid; grid-template-columns:1fr 1fr; }
  .ws-settings[data-settings-page="home"] .ws-settings__page .ws-setrow { padding:12px; border:0; }
}
@media(max-width:760px) {
  .ws-dialog.ws-settings { width:100%; height:calc(94dvh - env(safe-area-inset-top,0px)); max-height:calc(94dvh - env(safe-area-inset-top,0px)); margin:auto 0 0; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:0; }
  .ws-settings::before { margin:10px auto 4px !important; height:4px !important; }
  .ws-settings > [data-dialog-body] { display:block; height:calc(100% - 78px); }
  .ws-settings .ws-dialog__head { height:60px; padding:0 16px; }
  .ws-settings__nav { display:none; height:100%; border:0; }
  .ws-settings[data-settings-page="home"] .ws-settings__nav { display:flex; }
  .ws-settings[data-settings-page="home"] .ws-settings__page { display:none; }
  .ws-settings__search { padding:8px 20px; border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
  .ws-settings__links { padding:0 12px 24px; }
  .ws-settings__link { min-height:50px; font-size:14px; gap:12px; }
  .ws-settings__link small { font-size:12px; }
  .ws-settings__value { max-width:110px; }
  .ws-settings__page { height:100%; padding:16px 20px 24px; }
  .ws-settings .ws-modes { grid-template-columns:1fr; }
  .ws-settings .ws-themecards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ws-settings .ws-setrow__value { max-width:120px; }
}
@media(prefers-reduced-motion:reduce) { .ws-settings, .ws-settings * { animation:none !important; scroll-behavior:auto !important; } }

.ws-settings__stack-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ws-settings__stack-head > div:first-child { display:grid; gap:6px; }
.ws-settings .ws-cpmodel.ws-settings__stack { padding:16px; margin:0 0 12px; border-color:color-mix(in srgb,var(--ink) 12%,transparent); }
.ws-settings__stack .ws-row-actions { margin:0; flex-wrap:nowrap; }
.ws-settings__stack .ws-setnote { margin:12px 0; }
.ws-settings__memory-edit { width:100%; }
.ws-images__actions { display:flex; justify-content:flex-end; margin:-12px 0 8px; }
.ws-settings .ws-setting--slider { display:block; }
.ws-settings .ws-setting--slider > input { width:100%; }

.ws-settings .ws-themecard .ws-themecard__preview { background-color:var(--preview-canvas,var(--paper)) !important; }

.ws-call { display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 8px; border-bottom:1px solid var(--line); }
.ws-call > svg { flex:none; display:block; }
.ws-call__status { flex:1; min-width:0; font-size:13px; }
.ws-call .ws-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; }
.ws-call .is-muted { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }

/* A call shares the conversation pane, not a second app or modal card stack. */
.ws-voice-stage { position:absolute;inset:0;z-index:12;display:grid;grid-template-rows:auto minmax(160px,1fr) auto minmax(0,180px) auto auto;
  align-items:center;gap:16px;padding:20px clamp(18px,4vw,48px) max(20px,env(safe-area-inset-bottom));background:var(--paper);color:var(--ink);
  animation:ws-voice-arrive 260ms ease-out;min-height:0;overflow:hidden; }
.ws-voice-stage header { display:flex;align-items:center;gap:12px; }
.ws-voice-stage__identity { display:inline-flex;align-items:center;gap:10px;font-weight:var(--type-weight-control); }
.ws-voice-stage__identity svg { color:var(--accent);display:block; }
.ws-voice-stage__timer { margin-left:auto;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums; }
.ws-voice-stage__cost { color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap; }
.ws-voice-stage__actors { display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;width:100%;max-width:580px;justify-self:center; }
.ws-voice-stage__actor { display:grid;grid-template-rows:164px auto;align-items:center;justify-items:center;align-content:center;gap:12px;min-width:0; }
.ws-voice-stage__actor > span { font-size:14px;color:var(--muted); }
.ws-voice-stage__instrument { display:grid;place-items:center;width:min(164px,100%);aspect-ratio:1; }
.ws-voice-stage__instrument canvas { max-width:100%;height:auto!important; }
.ws-voice-stage__portrait { display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--panel);transition:box-shadow 160ms;will-change:transform; }
.ws-voice-stage__portrait.is-speaking { box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 9%,transparent); }
.ws-voice-stage__portrait .ws-msg__avatar { width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:30px; }
.ws-voice-stage__connection { display:flex;align-items:center;justify-content:center;gap:4px;color:var(--muted); }
.ws-voice-stage__connection i { width:3px;height:3px;border-radius:50%;background:currentColor; }
.ws-voice-stage__status { justify-self:center;text-align:center;font-size:14px;color:var(--muted);min-height:20px; }
.ws-voice-stage__captions { align-self:stretch;overflow:auto;min-height:0;width:min(100%,620px);justify-self:center;overscroll-behavior:contain;scrollbar-width:thin; }
.ws-voice-stage__captions p { margin:0 0 15px;display:grid;gap:5px;font-size:17px;line-height:1.5; }
.ws-voice-stage__captions small { color:var(--muted);font-size:11px; }
.ws-voice-stage__captions [data-speaker=user] { color:var(--ink); }
.ws-voice-stage__work { min-height:0;max-height:170px;overflow:auto;width:min(100%,620px);justify-self:center; }
.ws-voice-task { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:12px 0;border-top:1px solid var(--line); }
.ws-voice-task small { grid-column:1/-1;color:var(--muted); }
.ws-voice-task p { margin:0;max-height:84px;overflow:auto;font-size:14px;line-height:1.5;white-space:pre-wrap; }
.ws-voice-task .ws-button { align-self:center;min-height:40px;white-space:nowrap; }
.ws-voice-stage footer { display:flex;align-items:center;justify-content:center;gap:22px;padding-top:6px; }
.ws-voice-stage .ws-iconbtn { display:grid;place-items:center;min-width:46px;min-height:46px;border:0;border-radius:50%;background:var(--panel);color:var(--ink); }
.ws-voice-stage .ws-iconbtn svg { display:block; }
.ws-voice-stage footer .ws-voice-stage__end { width:62px;height:62px;background:var(--red);color:var(--paper); }
.ws-voice-stage .is-muted { color:var(--accent); }
.ws-voice-stage.is-compact { inset:auto 12px 140px auto;display:block;padding:0;background:var(--panel);border-radius:24px; }
.ws-voice-stage.is-compact > :not(.ws-voice-stage__return) { display:none; }
.ws-voice-stage__return { display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;background:none;color:var(--accent);border:0;font:inherit;cursor:pointer; }
.ws-voice-stage__return[hidden],.ws-voice-stage__captions[hidden] { display:none; }
[data-send] {touch-action:none;}
[data-send].is-swipe-ready {box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 12%,transparent);}
@keyframes ws-voice-arrive { from {opacity:0;transform:translateY(24px) scale(.98);} to {opacity:1;transform:none;} }
@media (max-height:600px) { .ws-voice-stage { gap:8px;grid-template-rows:auto minmax(100px,1fr) auto minmax(0,90px) auto auto;padding-block:12px; }
  .ws-voice-stage__instrument{width:105px}.ws-voice-stage__portrait{width:70px;height:70px}.ws-voice-stage__work{max-height:92px;} }
@media (max-height:600px) { .ws-voice-stage__actor { grid-template-rows:105px auto; } }
@media (prefers-reduced-motion:reduce) { .ws-voice-stage {animation:none;} .ws-voice-stage__portrait{will-change:auto;transition:none;} }

.ws-voice-actions { align-items:center; }
.ws-settings .ws-voice-actions .ws-field { margin:0; }
.ws-voice-actions .ws-button { min-height:42px; }
/* Video shares the Visualize controls and owned Workspace files. */
.ws-video-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; width:100%; }
.ws-video-controls label { display:grid; gap:.3rem; min-width:0; }
.ws-video-controls select { max-width:100%; min-width:0; width:100%; }
.ws-video-controls label:first-child, .ws-video-controls [data-video-estimate] { grid-column:1/-1; }
.ws-image-options [data-visual-kind] { padding:.5rem 1rem; }
.ws-image-options [data-visual-kind][aria-pressed=true] { background:var(--accent); color:var(--accent-ink); }
.ws-video { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:1rem 0; }
.ws-video video { display:block; width:100%; max-height:65vh; background:var(--panel); }
/* Owner-reviewed work uses the ordinary Context/dialog surfaces and theme tokens. */
.ws-currentwork { min-width:0; overflow-wrap:anywhere; }
.ws-currentwork section { margin-block:1rem; }
.ws-currentwork code { display:block; white-space:normal; overflow-wrap:anywhere; font-size:.8rem; }
.ws-currentwork textarea,.ws-currentwork select { width:100%; min-width:0; max-width:100%; }
.ws-currentwork ul { padding-inline-start:1.2rem; }
.ws-currentwork li { margin-block:.5rem; }
/* Informational answer warnings are accessible on demand, without competing with the answer. */
.ws-answer-notices { margin:.8rem 0; color:var(--muted); font-size:.85rem; }
.ws-answer-notices > summary { display:flex; align-items:center; gap:.45rem; width:fit-content; cursor:pointer; padding:.35rem .1rem; border-radius:.3rem; list-style:none; }
.ws-answer-notices > summary::-webkit-details-marker { display:none; }
.ws-answer-notices > summary::after { content:"+"; padding-inline-start:.3rem; }
.ws-answer-notices[open] > summary::after { content:"−"; }
.ws-answer-notices > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.ws-answer-notices__body { display:grid; gap:.5rem; padding:.65rem .8rem; margin-top:.25rem; border-inline-start:2px solid var(--line); }
.ws-answer-notices__body > .ws-status--warn,.ws-answer-notices__body > .ws-approval-taint { color:var(--muted); background:transparent; border:0; margin:0; padding:0; }