/* The Eddy design system — the components' CSS (superstring/docs/design-system-track.md).

   Link it after theme.css (which carries the tokens) and before a page's own CSS:
     <link rel="stylesheet" href="/static/theme.css"><script src="/static/theme.js"></script>
     <link rel="stylesheet" href="/static/eddy/eddy.css"><script type="module" src="/static/eddy/eddy.js"></script>

   RULES OF THIS FILE (the DS gate checks them):
   - No global rules. Every selector starts from an `eddy-` class, an `eddy-` element, or `.eddy-root` (a page wholly
     on the system opts in on <html> or <body>). Linking this file changes nothing on a page that uses none of it.
   - Tokens only: colours, sizes, radii, shadows and durations come from var(--t-…). No literal colours.
   - Single-class selectors where possible, so a page's element selectors (`button { … }`) lose to them and a page
     override has to be deliberate.
   - Logical properties (inline / block), so dir="rtl" works.
   - Motion animates only transform / opacity / clip-path / box-shadow / background-position, on the TH10 tokens. */

/* ================================================================================================ base (DS2) */
.eddy-root { font: var(--t-fw-normal) var(--t-fs-3)/var(--t-lh) var(--t-font-family); color: var(--t-text); background: var(--t-bg); -webkit-font-smoothing: antialiased; }
.eddy-root *, .eddy-root *::before, .eddy-root *::after { box-sizing: border-box; }
.eddy-root :where(button, input, select, textarea) { font: inherit; color: inherit; }
.eddy-root :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.eddy-root :focus-visible { outline: none; box-shadow: var(--t-focus-ring); }

.eddy-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* icons: the sprite's strokes take the text colour; sizes 16 (default) / 20 / 24 */
.eddy-icon { inline-size: var(--t-icon-ui); block-size: var(--t-icon-ui); flex: none; display: inline-block; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: var(--t-icon-stroke); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.eddy-icon[data-size="20"] { inline-size: 20px; block-size: 20px; }
.eddy-icon[data-size="24"] { inline-size: 24px; block-size: 24px; }
.eddy-icon[data-size="12"] { inline-size: 12px; block-size: 12px; }
eddy-icon { display: inline-flex; line-height: 0; }

/* layout primitives (Cloudscape's Space between, Box) */
.eddy-stack { display: flex; flex-direction: column; gap: var(--t-space-4); }
.eddy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-4); }
.eddy-stack[data-gap="xs"], .eddy-row[data-gap="xs"] { gap: var(--t-space-2); }
.eddy-stack[data-gap="s"], .eddy-row[data-gap="s"] { gap: var(--t-space-3); }
.eddy-stack[data-gap="l"], .eddy-row[data-gap="l"] { gap: var(--t-space-6); }
.eddy-stack[data-gap="xl"], .eddy-row[data-gap="xl"] { gap: var(--t-space-8); }
.eddy-row[data-justify="end"] { justify-content: flex-end; }
.eddy-row[data-justify="between"] { justify-content: space-between; }
.eddy-row[data-wrap="no"] { flex-wrap: nowrap; }
.eddy-grow { flex: 1 1 0; min-inline-size: 0; }

/* text (Cloudscape's Box variants) */
.eddy-text-small { font-size: var(--t-fs-2); }
.eddy-text-caption { font-size: var(--t-fs-1); color: var(--t-muted); }
.eddy-text-muted { color: var(--t-muted); }
.eddy-text-strong { font-weight: var(--t-fw-strong); }
.eddy-text-mono { font-family: var(--t-mono); font-size: 0.95em; }
.eddy-text-ok { color: var(--t-ok-text); } .eddy-text-warn { color: var(--t-warn-text); } .eddy-text-err { color: var(--t-err-text); }
/* a key figure: its label above, the number large (a dashboard's count, a result's maximum) */
.eddy-text-label { font-size: var(--t-fs-2); font-weight: var(--t-fw-strong); color: var(--t-muted); }
.eddy-text-value { font-size: var(--t-fs-7); font-weight: var(--t-fw-heading); line-height: var(--t-lh-tight); color: var(--t-text); font-variant-numeric: tabular-nums; }
.eddy-h1, .eddy-h2, .eddy-h3, .eddy-h4 { margin: 0; font-weight: var(--t-fw-heading); line-height: var(--t-lh-tight); color: var(--t-text); }
.eddy-h1 { font-size: var(--t-fs-7); } .eddy-h2 { font-size: var(--t-fs-6); } .eddy-h3 { font-size: var(--t-fs-5); } .eddy-h4 { font-size: var(--t-fs-4); }
.eddy-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.eddy-kbd { display: inline-block; padding: 0 var(--t-space-2); border: 1px solid var(--t-line); border-block-end-width: 2px; border-radius: var(--t-control-radius);
  font: var(--t-fs-1) var(--t-mono); color: var(--t-text2); background: var(--t-panel2); line-height: 1.5; }
/* long-form text (Cloudscape's Text content) */
.eddy-prose { font-size: var(--t-fs-3); line-height: var(--t-lh-prose); color: var(--t-text); max-inline-size: 72ch; }
.eddy-prose :where(h1, h2, h3, h4) { font-weight: var(--t-fw-heading); line-height: var(--t-lh-tight); margin: 1.4em 0 .5em; }
.eddy-prose :where(h1) { font-size: var(--t-fs-7); } .eddy-prose :where(h2) { font-size: var(--t-fs-6); } .eddy-prose :where(h3) { font-size: var(--t-fs-5); }
.eddy-prose :where(p, ul, ol, pre, table, blockquote) { margin: 0 0 .8em; }
.eddy-prose :where(ul, ol) { padding-inline-start: 1.4em; }
.eddy-prose :where(code) { font-family: var(--t-mono); font-size: .92em; background: var(--t-panel2); border: 1px solid var(--t-line3); border-radius: 3px; padding: 0 .3em; }
.eddy-prose :where(pre) { font: var(--t-fs-2)/1.5 var(--t-mono); background: var(--t-panel2); border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); padding: var(--t-space-5); overflow: auto; }
.eddy-prose :where(pre code) { background: none; border: 0; padding: 0; }
.eddy-prose :where(a) { color: var(--t-accent); }
.eddy-prose :where(blockquote) { border-inline-start: 3px solid var(--t-line); padding-inline-start: var(--t-space-5); color: var(--t-text2); }
.eddy-prose :where(table) { border-collapse: collapse; }
.eddy-prose :where(th, td) { border-block-end: 1px solid var(--t-line3); padding: var(--t-space-2) var(--t-space-4); text-align: start; vertical-align: top; }
.eddy-prose :where(th) { font-weight: var(--t-fw-strong); color: var(--t-text2); border-block-end-color: var(--t-line); }

/* ================================================================================================ actions (DS3) */
/* Button: <button class="eddy-button" data-variant="normal | primary | link | icon | inline-icon" data-size="small | large">.
   aria-pressed makes it a toggle button; aria-disabled keeps a disabled button focusable so its reason (data-tip) is
   readable; data-loading shows a spinner. */
.eddy-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--t-control-gap);
  min-block-size: var(--t-control-h); padding: 0 var(--t-control-pad-x); margin: 0;
  font: var(--t-fw-normal) var(--t-fs-3)/1 var(--t-font-family); white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--t-btn-fg); background: var(--t-btn-bg); border: 1px solid var(--t-btn-line); border-radius: var(--t-control-radius);
  transition: background-color var(--t-dur-ui) var(--t-ease), border-color var(--t-dur-ui) var(--t-ease), box-shadow var(--t-dur-ui) var(--t-ease), transform var(--t-dur-ui) var(--t-ease);
}
.eddy-button:hover { background: var(--t-btn-hover-bg); border-color: var(--t-btn-hover-line); box-shadow: var(--t-btn-glow); transform: translateY(var(--t-lift)); }
.eddy-button:active { transform: translateY(0) scale(.98); }
.eddy-button:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-button[data-variant="primary"] { background: var(--t-primary-bg); color: var(--t-primary-fg); border-color: transparent; font-weight: var(--t-fw-strong); }
.eddy-button[data-variant="primary"]:hover { background: var(--t-primary-bg); filter: brightness(1.08); border-color: transparent; }
.eddy-button[data-variant="link"] { background: transparent; border-color: transparent; color: var(--t-accent); }
.eddy-button[data-variant="link"]:hover { background: var(--t-hover); border-color: transparent; }
.eddy-button[data-variant="icon"] { padding: 0; inline-size: var(--t-control-h); background: transparent; border-color: transparent; color: var(--t-text2); }
.eddy-button[data-variant="icon"]:hover { background: var(--t-btn-hover-bg); border-color: var(--t-btn-hover-line); color: var(--t-text); }
.eddy-button[data-variant="inline-icon"] { padding: 0; min-block-size: 0; inline-size: auto; background: transparent; border: 0; color: var(--t-muted); vertical-align: middle; }
.eddy-button[data-variant="inline-icon"]:hover { color: var(--t-accent); background: transparent; transform: none; box-shadow: none; }
.eddy-button[data-size="small"] { min-block-size: calc(var(--t-control-h) - 4px); padding-inline: var(--t-space-3); font-size: var(--t-fs-2); }
.eddy-button[data-size="small"][data-variant="icon"] { inline-size: calc(var(--t-control-h) - 4px); padding: 0; }
.eddy-button[data-size="large"] { min-block-size: calc(var(--t-control-h) + 6px); padding-inline: var(--t-space-6); font-size: var(--t-fs-4); }
.eddy-button[aria-pressed="true"] { background: var(--t-btn-on-bg); border-color: var(--t-btn-on-line); color: var(--t-btn-on-fg); }
.eddy-button:disabled, .eddy-button[aria-disabled="true"] { cursor: default; color: var(--t-dim); background: var(--t-panel2); border-color: var(--t-line2); box-shadow: none; transform: none; filter: none; }
.eddy-button[data-variant="link"]:disabled, .eddy-button[data-variant="link"][aria-disabled="true"],
.eddy-button[data-variant="icon"]:disabled, .eddy-button[data-variant="icon"][aria-disabled="true"],
.eddy-button[data-variant="inline-icon"]:disabled, .eddy-button[data-variant="inline-icon"][aria-disabled="true"] { background: transparent; border-color: transparent; }
.eddy-button[data-loading] { cursor: progress; }
.eddy-button:is(:disabled, [aria-disabled="true"]):focus-visible { box-shadow: var(--t-focus-ring); }
.eddy-button[data-stretch] { inline-size: 100%; }
.eddy-button .eddy-button-caret { margin-inline-start: calc(var(--t-space-1) * -1); margin-inline-end: calc(var(--t-space-2) * -1); }

/* Button group: a row of related actions; data-joined joins the borders (a split button, a segmented toolbar) */
.eddy-button-group { display: inline-flex; align-items: center; gap: var(--t-space-1); flex-wrap: wrap; }
.eddy-button-group[data-joined] { gap: 0; flex-wrap: nowrap; }
.eddy-button-group[data-joined] > .eddy-button { border-radius: 0; }
.eddy-button-group[data-joined] > .eddy-button + .eddy-button { margin-inline-start: -1px; }
.eddy-button-group[data-joined] > .eddy-button:first-child { border-start-start-radius: var(--t-control-radius); border-end-start-radius: var(--t-control-radius); }
.eddy-button-group[data-joined] > .eddy-button:last-child { border-start-end-radius: var(--t-control-radius); border-end-end-radius: var(--t-control-radius); }
.eddy-button-group[data-joined] > .eddy-button:hover, .eddy-button-group[data-joined] > .eddy-button:focus-visible { position: relative; z-index: 1; }
.eddy-button-group > .eddy-divider[data-vertical] { block-size: calc(var(--t-control-h) - 8px); margin-inline: var(--t-space-2); }

/* Link: inline in text, or standalone; data-variant="secondary" is text-coloured */
.eddy-link { color: var(--t-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; border-radius: 2px; }
.eddy-link:hover { color: var(--t-accent2); text-decoration-thickness: 2px; }
.eddy-link:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-link[data-variant="secondary"] { color: var(--t-text2); }
.eddy-link[data-variant="standalone"] { text-decoration: none; font-weight: var(--t-fw-strong); }
/* a link that stands alone (not inside a sentence) keeps a 16 px target in every face (WCAG 2.5.8) */
.eddy-link[data-variant="standalone"], .eddy-container-footer .eddy-link, .eddy-header-actions .eddy-link { display: inline-block; padding-block: 2px; }
.eddy-link[data-variant="standalone"]:hover { text-decoration: underline; }
.eddy-link > .eddy-icon { margin-inline-start: var(--t-space-1); vertical-align: -0.15em; inline-size: 0.95em; block-size: 0.95em; }
.eddy-copy-field { display: inline-flex; align-items: center; gap: var(--t-space-2); font-family: var(--t-mono); font-size: var(--t-fs-2); }

/* ================================================================================================ badges and tokens (DS3) */
.eddy-badge { display: inline-flex; align-items: center; gap: var(--t-space-1); padding: 0 var(--t-space-3); min-block-size: 18px;
  font: var(--t-fw-strong) var(--t-fs-1)/1.6 var(--t-font-family); border-radius: 9px; white-space: nowrap;
  color: var(--t-text2); background: var(--t-chrome); border: 1px solid var(--t-line2); }
.eddy-badge[data-color="blue"] { color: var(--t-accent); background: var(--t-info-bg); border-color: var(--t-info-line); }
.eddy-badge[data-color="green"] { color: var(--t-ok-text); background: var(--t-ok-bg); border-color: var(--t-ok-line); }
.eddy-badge[data-color="red"] { color: var(--t-err-text); background: var(--t-err-bg); border-color: var(--t-err-line); }
.eddy-badge[data-color="amber"] { color: var(--t-warn-text); background: var(--t-warn-bg); border-color: var(--t-warn-line); }
.eddy-badge[data-color="solid"] { color: var(--t-on-accent); background: var(--t-accent); border-color: transparent; }
.eddy-counter { color: var(--t-muted); font-weight: var(--t-fw-normal); }
.eddy-token { display: inline-flex; align-items: center; gap: var(--t-space-2); min-block-size: calc(var(--t-control-h) - 4px); max-inline-size: 100%;
  padding-inline: var(--t-space-4) var(--t-space-2); font-size: var(--t-fs-2); color: var(--t-text); background: var(--t-panel2);
  border: 1px solid var(--t-line); border-radius: var(--t-control-radius); }
.eddy-token > .eddy-token-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eddy-token > .eddy-token-desc { color: var(--t-muted); font-size: var(--t-fs-1); }
.eddy-token-dismiss { display: inline-flex; align-items: center; justify-content: center; inline-size: 18px; block-size: 18px; padding: 0; border: 0; border-radius: 2px;
  background: transparent; color: var(--t-muted); cursor: pointer; }
.eddy-token-dismiss:hover { color: var(--t-err); background: var(--t-err-bg); }
.eddy-token-dismiss:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-token[aria-disabled="true"] { color: var(--t-dim); }
.eddy-token-group { display: flex; flex-wrap: wrap; gap: var(--t-space-2); align-items: center; list-style: none; margin: 0; padding: 0; }

/* ================================================================================================ inputs (DS3) */
.eddy-input, .eddy-textarea, .eddy-select {
  box-sizing: border-box; inline-size: 100%; min-block-size: var(--t-control-h); margin: 0; padding: 0 var(--t-space-4);
  font: var(--t-fs-3)/1.3 var(--t-font-family); color: var(--t-text); background: var(--t-input-bg);
  border: 1px solid var(--t-input-line); border-radius: var(--t-control-radius);
  transition: border-color var(--t-dur-ui) var(--t-ease), box-shadow var(--t-dur-ui) var(--t-ease);
}
.eddy-textarea { padding-block: var(--t-space-3); min-block-size: calc(var(--t-control-h) * 3); resize: vertical; line-height: var(--t-lh); }
.eddy-input::placeholder, .eddy-textarea::placeholder { color: var(--t-dim); font-style: italic; }
.eddy-input:hover, .eddy-textarea:hover, .eddy-select:hover { border-color: var(--t-accent2); }
.eddy-input:focus, .eddy-textarea:focus, .eddy-select:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 1px var(--t-accent); }
.eddy-input:focus-visible, .eddy-textarea:focus-visible, .eddy-select:focus-visible { box-shadow: var(--t-focus-ring); }
/* a date or time input focuses one of the browser's own inner fields, so :focus-visible never matches the input itself */
.eddy-input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus-within { outline: none; border-color: var(--t-accent); box-shadow: var(--t-focus-ring); }
.eddy-input[aria-invalid="true"], .eddy-textarea[aria-invalid="true"], .eddy-select[aria-invalid="true"] { border-color: var(--t-err); box-shadow: inset 3px 0 0 var(--t-err); }
.eddy-input[aria-invalid="true"]:dir(rtl), .eddy-textarea[aria-invalid="true"]:dir(rtl) { box-shadow: inset -3px 0 0 var(--t-err); }
.eddy-input:disabled, .eddy-textarea:disabled, .eddy-select:disabled { color: var(--t-dim); background: var(--t-panel2); border-color: var(--t-line2); cursor: not-allowed; }
.eddy-input:read-only:not(:disabled), .eddy-textarea:read-only:not(:disabled) { background: var(--t-panel2); border-style: dashed; }
.eddy-input[type="number"] { font-variant-numeric: tabular-nums; }
.eddy-input-wrap { position: relative; display: flex; align-items: center; inline-size: 100%; }
.eddy-input-wrap > .eddy-icon { position: absolute; inset-inline-start: var(--t-space-4); color: var(--t-muted); pointer-events: none; }
.eddy-input-wrap > .eddy-icon ~ .eddy-input { padding-inline-start: calc(var(--t-space-4) + var(--t-icon-ui) + var(--t-space-3)); }
.eddy-input-wrap > .eddy-input-suffix { position: absolute; inset-inline-end: var(--t-space-4); color: var(--t-muted); font-size: var(--t-fs-2); pointer-events: none; }
.eddy-input-wrap > .eddy-input:has(~ .eddy-input-suffix) { padding-inline-end: calc(var(--t-space-4) + 5ch); }
.eddy-input-wrap > .eddy-button { position: absolute; inset-inline-end: 2px; min-block-size: calc(var(--t-control-h) - 4px); inline-size: calc(var(--t-control-h) - 4px); }
/* the native select: a chevron drawn from two gradients in the muted text colour */
.eddy-select { appearance: none; -webkit-appearance: none; padding-inline-end: calc(var(--t-space-4) * 2 + 8px); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--t-muted) 50%), linear-gradient(135deg, var(--t-muted) 50%, transparent 50%);
  background-position: right 14px center, right 10px center; background-size: 4px 4px; background-repeat: no-repeat; }
.eddy-select:dir(rtl) { background-position: left 10px center, left 14px center; }
.eddy-select[multiple] { background-image: none; padding-block: var(--t-space-2); padding-inline-end: var(--t-space-4); }

/* checkbox, radio and toggle: native inputs drawn by CSS (no script; form behaviour kept) */
.eddy-checkbox, .eddy-radio, .eddy-toggle { appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative;
  display: inline-grid; place-content: center; vertical-align: -3px; background: var(--t-input-bg); border: 1px solid var(--t-input-line);
  transition: background-color var(--t-dur-ui) var(--t-ease), border-color var(--t-dur-ui) var(--t-ease); }
.eddy-checkbox { inline-size: 16px; block-size: 16px; border-radius: 3px; }
.eddy-radio { inline-size: 16px; block-size: 16px; border-radius: 50%; }
.eddy-checkbox::before { content: ""; inline-size: 9px; block-size: 9px; background: var(--t-on-accent);
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 18%, 84% 4%, 40% 66%); transform: scale(0); transition: transform var(--t-dur-ui) var(--t-ease); }
.eddy-checkbox:indeterminate::before { clip-path: inset(40% 8% 40% 8%); transform: scale(1); }
.eddy-radio::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--t-on-accent); transform: scale(0); transition: transform var(--t-dur-ui) var(--t-ease); }
.eddy-checkbox:checked, .eddy-checkbox:indeterminate, .eddy-radio:checked { background: var(--t-accent); border-color: var(--t-accent); }
.eddy-checkbox:checked::before, .eddy-radio:checked::before { transform: scale(1); }
.eddy-checkbox:hover, .eddy-radio:hover, .eddy-toggle:hover { border-color: var(--t-accent2); }
.eddy-checkbox:focus-visible, .eddy-radio:focus-visible, .eddy-toggle:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-checkbox:disabled, .eddy-radio:disabled, .eddy-toggle:disabled { cursor: not-allowed; background: var(--t-panel2); border-color: var(--t-line2); }
.eddy-checkbox:disabled:checked, .eddy-radio:disabled:checked, .eddy-toggle:disabled:checked { background: var(--t-dim); border-color: var(--t-dim); }
.eddy-toggle { inline-size: 28px; block-size: 16px; border-radius: 8px; place-content: center start; padding: 0 1px; background: var(--t-line); border-color: var(--t-line); }
.eddy-toggle::before { content: ""; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--t-panel); box-shadow: var(--t-shadow-1);
  transition: transform var(--t-dur-ui) var(--t-ease); }
.eddy-toggle:checked { background: var(--t-accent); border-color: var(--t-accent); }
.eddy-toggle:checked::before { transform: translateX(12px); }
.eddy-toggle:checked:dir(rtl)::before { transform: translateX(-12px); }
/* a labelled choice: <label class="eddy-choice"><input class="eddy-checkbox"> Label <span class="eddy-choice-desc">…</span></label> */
.eddy-choice { display: inline-grid; grid-template-columns: auto 1fr; column-gap: var(--t-space-3); align-items: start; cursor: pointer; color: var(--t-text); line-height: var(--t-lh); }
.eddy-choice > input { margin-block-start: 2px; }
.eddy-choice > .eddy-choice-desc { grid-column: 2; color: var(--t-muted); font-size: var(--t-fs-2); }
.eddy-choice:has(input:disabled) { color: var(--t-dim); cursor: not-allowed; }
.eddy-choices { display: flex; flex-direction: column; gap: var(--t-space-3); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.eddy-choices[data-direction="row"] { flex-direction: row; flex-wrap: wrap; gap: var(--t-space-6); }

/* segmented control (native radios, one selected) and tiles (the same as cards) */
.eddy-segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--t-chrome); border: 1px solid var(--t-line2); border-radius: calc(var(--t-control-radius) + 2px); }
.eddy-segmented > label { position: relative; display: inline-flex; }
.eddy-segmented > label > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.eddy-segmented > label > span { display: inline-flex; align-items: center; gap: var(--t-control-gap); min-block-size: calc(var(--t-control-h) - 6px);
  padding: 0 var(--t-space-5); border-radius: var(--t-control-radius); color: var(--t-text2); font-size: var(--t-fs-2); white-space: nowrap; }
.eddy-segmented > label:hover > span { color: var(--t-text); background: var(--t-raise); }
.eddy-segmented > label > input:checked + span { background: var(--t-panel); color: var(--t-accent); font-weight: var(--t-fw-strong); box-shadow: var(--t-shadow-1); }
.eddy-segmented > label > input:focus-visible + span { box-shadow: var(--t-focus-ring); }
.eddy-segmented > label > input:disabled + span { color: var(--t-dim); }
.eddy-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--t-space-4); border: 0; padding: 0; margin: 0; }
.eddy-tile { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--t-space-4); row-gap: var(--t-space-1); align-content: start;
  padding: var(--t-space-5); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); background: var(--t-panel); cursor: pointer; }
.eddy-tile:hover { border-color: var(--t-accent2); }
.eddy-tile:has(input:checked) { border-color: var(--t-accent); box-shadow: inset 0 0 0 1px var(--t-accent); background: var(--t-info-bg); }
.eddy-tile > input { margin-block-start: 2px; }
.eddy-tile > .eddy-tile-desc { grid-column: 2; color: var(--t-muted); font-size: var(--t-fs-2); }

/* slider: the native range, drawn in the accent */
.eddy-slider { appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 18px; margin: 0; background: transparent; cursor: pointer; }
.eddy-slider::-webkit-slider-runnable-track { block-size: 4px; border-radius: 2px; background: var(--t-line); }
.eddy-slider::-moz-range-track { block-size: 4px; border-radius: 2px; background: var(--t-line); }
.eddy-slider::-moz-range-progress { block-size: 4px; border-radius: 2px; background: var(--t-accent); }
.eddy-slider::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 14px; block-size: 14px; margin-block-start: -5px; border-radius: 50%; background: var(--t-panel); border: 2px solid var(--t-accent); }
.eddy-slider::-moz-range-thumb { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--t-panel); border: 2px solid var(--t-accent); }
.eddy-slider:focus-visible { outline: none; }
.eddy-slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--t-focus-ring); }
.eddy-slider:focus-visible::-moz-range-thumb { box-shadow: var(--t-focus-ring); }
.eddy-slider:disabled { cursor: not-allowed; opacity: .55; }
.eddy-slider-row { display: flex; align-items: center; gap: var(--t-space-5); }
.eddy-slider-row > output { min-inline-size: 5ch; text-align: end; font-variant-numeric: tabular-nums; color: var(--t-text2); }

/* field and form: label, description, control, constraint, error, wired by ids (aria-describedby) */
.eddy-field { display: flex; flex-direction: column; gap: var(--t-space-2); min-inline-size: 0; }
.eddy-field-label { font-weight: var(--t-fw-strong); color: var(--t-text); font-size: var(--t-fs-3); display: flex; gap: var(--t-space-3); align-items: baseline; }
.eddy-field-label > .eddy-field-optional { font-weight: var(--t-fw-normal); color: var(--t-muted); font-style: italic; }
.eddy-field-label > .eddy-field-info { font-weight: var(--t-fw-normal); font-size: var(--t-fs-2); margin-inline-start: auto; }
.eddy-field-desc { color: var(--t-muted); font-size: var(--t-fs-2); margin-block-start: calc(var(--t-space-1) * -1); }
.eddy-field-constraint { color: var(--t-muted); font-size: var(--t-fs-2); }
.eddy-field-error { display: flex; gap: var(--t-space-2); align-items: flex-start; color: var(--t-err-text); font-size: var(--t-fs-2); font-weight: var(--t-fw-strong); }
.eddy-field-error > .eddy-icon { margin-block-start: 1px; }
.eddy-field-error:empty, .eddy-field-error[hidden] { display: none; }
.eddy-field[data-layout="inline"] { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; column-gap: var(--t-space-6); align-items: center; }
.eddy-field[data-layout="inline"] > :not(.eddy-field-label) { grid-column: 2; }
.eddy-field[data-layout="inline"] > .eddy-field-label { grid-row: span 3; align-self: start; padding-block-start: 4px; }
/* a property row (DS16): an inspector's working unit — a small muted label, then the control(s) filling the row; the
   row styles its native controls itself, so a page writes <div class="eddy-field" data-layout="row"><label>…</label>
   <input type="number">…</div> */
.eddy-field[data-layout="row"] { flex-direction: row; align-items: center; gap: 5px; margin-block-start: 5px; }
.eddy-field[data-layout="row"] > :is(label, .eddy-field-label) { flex: none; min-inline-size: 76px; color: var(--t-muted); font-size: var(--t-fs-1); font-weight: var(--t-fw-normal); }
.eddy-field[data-layout="row"] > :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select) { flex: 1; inline-size: 100%; min-inline-size: 0; margin: 0;
  padding: 3px 5px; color: var(--t-text); background: var(--t-input-bg); border: 1px solid var(--t-input-line); border-radius: 4px; font: var(--t-fs-2) var(--t-font-family); }
.eddy-field[data-layout="row"] > input[type="number"] { font-family: var(--t-mono); }
/* a value someone else owns (the engine, a released revision): readable at full contrast, marked as not editable (DS12) */
.eddy-field[data-layout="row"] > input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]):read-only:not(:disabled) { background: var(--t-panel2); border-style: dashed; }
.eddy-field[data-layout="row"] > :is(input, select):focus-visible { outline: none; border-color: var(--t-accent2); box-shadow: var(--t-focus-ring); }
.eddy-field[data-layout="row"] > input[type="range"] { flex: 1; }
.eddy-field[data-layout="row"] > input[type="color"] { flex: 0 0 40px; block-size: 22px; padding: 1px; border: 1px solid var(--t-line); border-radius: 4px; background: var(--t-input-bg); }
.eddy-form { display: flex; flex-direction: column; gap: var(--t-space-7); }
.eddy-form-header { display: flex; flex-direction: column; gap: var(--t-space-2); }
.eddy-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--t-space-4); align-items: center; }
.eddy-form-actions > .eddy-form-secondary { margin-inline-end: auto; }
.eddy-form-error { padding: var(--t-space-4) var(--t-space-5); border-radius: var(--t-control-radius); color: var(--t-err-text); background: var(--t-err-bg); border: 1px solid var(--t-err-line); }
.eddy-fieldset { display: flex; flex-direction: column; gap: var(--t-space-6); border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.eddy-fieldset > legend { padding: 0; margin-block-end: var(--t-space-4); font-weight: var(--t-fw-heading); font-size: var(--t-fs-4); }
.eddy-attr-row { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)) auto; gap: var(--t-space-4); align-items: end; }
.eddy-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--t-space-3); padding: var(--t-space-7);
  border: 1px dashed var(--t-line); border-radius: var(--t-radius-lg); color: var(--t-muted); background: var(--t-panel2); text-align: center; }
.eddy-dropzone[data-over] { border-color: var(--t-accent); color: var(--t-accent); background: var(--t-info-bg); }

/* ================================================================================================ feedback (DS4) */
.eddy-alert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--t-space-4); align-items: start; padding: var(--t-space-5) var(--t-space-6);
  border-radius: var(--t-radius-lg); border: 1px solid var(--t-info-line); background: var(--t-info-bg); color: var(--t-text); }
.eddy-alert > .eddy-icon { color: var(--t-info); margin-block-start: 1px; }
.eddy-alert[data-type="success"] { border-color: var(--t-ok-line); background: var(--t-ok-bg); }
.eddy-alert[data-type="success"] > .eddy-icon { color: var(--t-ok); }
.eddy-alert[data-type="warning"] { border-color: var(--t-warn-line); background: var(--t-warn-bg); }
.eddy-alert[data-type="warning"] > .eddy-icon { color: var(--t-warn); }
.eddy-alert[data-type="error"] { border-color: var(--t-err-line); background: var(--t-err-bg); }
.eddy-alert[data-type="error"] > .eddy-icon { color: var(--t-err); }
.eddy-alert-body { display: flex; flex-direction: column; gap: var(--t-space-2); min-inline-size: 0; }
.eddy-alert-title { font-weight: var(--t-fw-strong); }
.eddy-alert-actions { display: flex; gap: var(--t-space-3); align-items: center; }
.eddy-alert > .eddy-button[data-variant="icon"] { margin-block: calc(var(--t-space-2) * -1) 0; margin-inline: 0 calc(var(--t-space-3) * -1); }

.eddy-status { display: inline-flex; align-items: center; gap: var(--t-space-2); color: var(--t-text); white-space: nowrap; }
.eddy-status > .eddy-icon, .eddy-status > .eddy-spinner { color: var(--t-muted); }
.eddy-status[data-type="success"] > .eddy-icon { color: var(--t-ok); }
.eddy-status[data-type="error"] > .eddy-icon { color: var(--t-err); }
.eddy-status[data-type="warning"] > .eddy-icon { color: var(--t-warn); }
.eddy-status[data-type="info"] > .eddy-icon, .eddy-status[data-type="in-progress"] > .eddy-icon, .eddy-status > .eddy-spinner { color: var(--t-info); }
.eddy-status[data-type="success"][data-colour="status"] { color: var(--t-ok-text); }
.eddy-status[data-type="error"][data-colour="status"] { color: var(--t-err-text); }
.eddy-status[data-type="warning"][data-colour="status"] { color: var(--t-warn-text); }

/* spinner: a turning ring (loading is essential motion: Animations Off slows it rather than stopping it) */
@keyframes eddy-spin { to { transform: rotate(360deg); } }
.eddy-spinner { display: inline-block; flex: none; inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-block-start-color: currentColor; animation: eddy-spin .8s linear infinite; vertical-align: -2px; color: var(--t-accent); }
.eddy-spinner[data-size="large"] { inline-size: 28px; block-size: 28px; border-width: 3px; }
html[data-motion="off"] .eddy-spinner { animation-duration: 2.4s; }
@media (prefers-reduced-motion: reduce) { .eddy-spinner { animation-duration: 2.4s; } }

/* progress: the native element with a label and a value */
.eddy-progress { display: grid; grid-template-columns: 1fr auto; gap: var(--t-space-2) var(--t-space-4); align-items: center; }
.eddy-progress > .eddy-progress-label { grid-column: 1 / -1; font-weight: var(--t-fw-strong); }
.eddy-progress > .eddy-progress-desc { grid-column: 1 / -1; color: var(--t-muted); font-size: var(--t-fs-2); margin-block-start: calc(var(--t-space-2) * -1); }
.eddy-progress > progress { appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 6px; border: 0; border-radius: 3px; background: var(--t-line2); overflow: hidden; }
.eddy-progress > progress::-webkit-progress-bar { background: var(--t-line2); border-radius: 3px; }
.eddy-progress > progress::-webkit-progress-value { background: var(--t-accent); border-radius: 3px; }
.eddy-progress > progress::-moz-progress-bar { background: var(--t-accent); border-radius: 3px; }
.eddy-progress > output { font-size: var(--t-fs-2); color: var(--t-text2); font-variant-numeric: tabular-nums; min-inline-size: 4ch; text-align: end; }
.eddy-progress[data-status="error"] > progress::-webkit-progress-value { background: var(--t-err); }
.eddy-progress[data-status="error"] > progress::-moz-progress-bar { background: var(--t-err); }
.eddy-progress[data-status="success"] > progress::-webkit-progress-value { background: var(--t-ok); }
.eddy-progress[data-status="success"] > progress::-moz-progress-bar { background: var(--t-ok); }

/* skeleton: a placeholder that shimmers while content loads */
@keyframes eddy-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.eddy-skeleton { display: block; block-size: 1em; border-radius: var(--t-control-radius); background-color: var(--t-line3);
  background-image: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--t-panel) 70%, transparent) 50%, transparent 70%);
  background-size: 250% 100%; animation: eddy-shimmer 1.4s linear infinite; }
.eddy-skeleton[data-shape="line"] { block-size: .8em; margin-block: .3em; }
.eddy-skeleton[data-shape="block"] { block-size: 80px; }
.eddy-skeleton[data-shape="circle"] { inline-size: 32px; block-size: 32px; border-radius: 50%; }
html[data-motion="off"] .eddy-skeleton { animation: none; }
@media (prefers-reduced-motion: reduce) { .eddy-skeleton { animation: none; } }

/* empty state: the explanation and the next action */
.eddy-empty { display: flex; flex-direction: column; align-items: center; gap: var(--t-space-3); padding: var(--t-space-9) var(--t-space-6); text-align: center; color: var(--t-muted); }
.eddy-empty > .eddy-icon { inline-size: 28px; block-size: 28px; color: var(--t-dim); }
.eddy-empty-title { color: var(--t-text); font-weight: var(--t-fw-strong); }
.eddy-empty[data-size="small"] { gap: var(--t-space-2); padding: var(--t-space-4); font-size: var(--t-fs-2); }

/* ================================================================================================ layout (DS5) */
.eddy-container { display: flex; flex-direction: column; min-inline-size: 0; background: var(--t-panel); border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-1); container-type: inline-size; }
.eddy-container[data-variant="stacked"] { border-radius: 0; box-shadow: none; }
.eddy-container[data-variant="stacked"] + .eddy-container[data-variant="stacked"] { border-block-start: 0; }
.eddy-container[data-fit="height"] { block-size: 100%; }
.eddy-container-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--t-space-3) var(--t-space-6); padding: var(--t-space-5) var(--t-space-6); border-block-end: 1px solid var(--t-line3); }
.eddy-container-header:last-child { border-block-end: 0; }
.eddy-container-body { padding: var(--t-space-6); min-inline-size: 0; }
.eddy-container[data-fit="height"] > .eddy-container-body { flex: 1 1 auto; overflow: auto; }
.eddy-container-body[data-flush] { padding: 0; }
.eddy-container-footer { padding: var(--t-space-4) var(--t-space-6); border-block-start: 1px solid var(--t-line3); color: var(--t-text2); }

/* header: a title with a counter, a description, an info link and actions at the end */
.eddy-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--t-space-3) var(--t-space-6); inline-size: 100%; }
.eddy-header-text { display: flex; flex-direction: column; gap: var(--t-space-2); flex: 1 1 260px; min-inline-size: 0; }
.eddy-header-title { display: flex; align-items: baseline; gap: var(--t-space-3); flex-wrap: wrap; }
.eddy-header-desc { color: var(--t-muted); font-size: var(--t-fs-2); max-inline-size: 80ch; }
.eddy-header-actions { display: flex; flex-wrap: wrap; gap: var(--t-space-3); align-items: center; margin-inline-start: auto; }

/* key-value pairs, columns, grid, divider */
.eddy-kv { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: var(--t-space-6) var(--t-space-8); margin: 0; }
.eddy-kv[data-cols="2"] { --cols: 2; }
.eddy-kv[data-cols="3"] { --cols: 3; }
.eddy-kv[data-cols="4"] { --cols: 4; }
.eddy-kv > div { display: flex; flex-direction: column; gap: var(--t-space-1); min-inline-size: 0; }
.eddy-kv dt { color: var(--t-muted); font-size: var(--t-fs-2); font-weight: var(--t-fw-strong); }
.eddy-kv dd { margin: 0; color: var(--t-text); overflow-wrap: anywhere; }
.eddy-columns { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--t-space-6); }
.eddy-columns[data-cols="1"] { --cols: 1; }
.eddy-columns[data-cols="3"] { --cols: 3; }
.eddy-columns[data-cols="4"] { --cols: 4; }
.eddy-columns[data-borders] > * + * { border-inline-start: 1px solid var(--t-line2); padding-inline-start: var(--t-space-6); }
.eddy-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--t-space-6); }
.eddy-grid > [data-span="3"] { grid-column: span 3; }
.eddy-grid > [data-span="4"] { grid-column: span 4; }
.eddy-grid > [data-span="6"] { grid-column: span 6; }
.eddy-grid > [data-span="8"] { grid-column: span 8; }
.eddy-grid > [data-span="9"] { grid-column: span 9; }
.eddy-grid > [data-span="12"] { grid-column: span 12; }
@container (max-width: 560px) {
  .eddy-kv, .eddy-columns { grid-template-columns: minmax(0, 1fr); }
  .eddy-columns[data-borders] > * + * { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 640px) { .eddy-kv, .eddy-columns { grid-template-columns: minmax(0, 1fr); } .eddy-grid > [data-span] { grid-column: span 12; } }
.eddy-divider { border: 0; border-block-start: 1px solid var(--t-line2); margin: var(--t-space-4) 0; inline-size: 100%; }
.eddy-divider[data-vertical] { inline-size: 0; block-size: auto; align-self: stretch; border-block-start: 0; border-inline-start: 1px solid var(--t-line2); margin: 0 var(--t-space-4); }

/* expandable section: <details class="eddy-expandable"><summary>…</summary><div class="eddy-expandable-body">…</div></details> */
.eddy-expandable { min-inline-size: 0; }
.eddy-expandable > summary { display: flex; align-items: center; gap: var(--t-space-3); cursor: pointer; list-style: none; font-weight: var(--t-fw-strong); padding-block: var(--t-space-2); border-radius: var(--t-control-radius); }
.eddy-expandable > summary::-webkit-details-marker { display: none; }
.eddy-expandable > summary::before { content: ""; inline-size: 0; block-size: 0; border-block: 4px solid transparent; border-inline-start: 5px solid var(--t-muted); transition: transform var(--t-dur-ui) var(--t-ease); }
.eddy-expandable[open] > summary::before { transform: rotate(90deg); }
.eddy-expandable > summary:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-expandable > summary:hover { color: var(--t-accent); }
.eddy-expandable > .eddy-expandable-body { padding-block: var(--t-space-3); padding-inline: calc(5px + var(--t-space-3)) 0; }
.eddy-expandable[data-variant="container"] { border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); background: var(--t-panel); }
.eddy-expandable[data-variant="container"] > summary { padding: var(--t-space-4) var(--t-space-6); }
.eddy-expandable[data-variant="container"] > .eddy-expandable-body { padding: var(--t-space-4) var(--t-space-6) var(--t-space-6); border-block-start: 1px solid var(--t-line3); }

/* breadcrumbs */
.eddy-breadcrumbs > ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--t-fs-2); }
.eddy-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--t-space-2); color: var(--t-muted); min-inline-size: 0; }
.eddy-breadcrumbs li + li::before { content: "/"; color: var(--t-dim); }
.eddy-breadcrumbs a { color: var(--t-accent); text-decoration: none; border-radius: 2px; }
.eddy-breadcrumbs a:hover { text-decoration: underline; }
.eddy-breadcrumbs a:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-breadcrumbs [aria-current="page"] { color: var(--t-text); font-weight: var(--t-fw-strong); }

/* steps: a run's steps with their status (an agent's plan, a solve's stages) */
.eddy-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.eddy-steps > li { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 0 var(--t-space-4); padding-block-end: var(--t-space-5); }
.eddy-steps > li::after { content: ""; position: absolute; inset-inline-start: 9.5px; inset-block: 20px 2px; border-inline-start: 1px solid var(--t-line); }
.eddy-steps > li:last-child::after { display: none; }
.eddy-steps > li > .eddy-icon, .eddy-steps > li > .eddy-spinner { margin: 2px; color: var(--t-dim); }
.eddy-steps > li[data-status="success"] > .eddy-icon { color: var(--t-ok); }
.eddy-steps > li[data-status="error"] > .eddy-icon { color: var(--t-err); }
.eddy-steps > li[data-status="warning"] > .eddy-icon { color: var(--t-warn); }
.eddy-steps > li[data-status="in-progress"] > .eddy-spinner { color: var(--t-info); }
.eddy-steps-title { font-weight: var(--t-fw-strong); }
.eddy-steps-desc { grid-column: 2; color: var(--t-muted); font-size: var(--t-fs-2); }

/* ================================================================================================ hidden wins */
/* The HTML hidden attribute beats an eddy- class's display (a class rule would otherwise show a hidden element). */
[class^="eddy-"][hidden], [class*=" eddy-"][hidden], eddy-icon[hidden] { display: none !important; }

/* ================================================================================================ overlays (DS4) */
/* The browser's top layer (popover, dialog) centres its content by default; every Eddy surface is placed by script. */
@keyframes eddy-pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes eddy-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eddy-slide-end { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes eddy-slide-start { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes eddy-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* menu */
.eddy-menu-pop { position: fixed; inset: auto; margin: 0; padding: var(--t-space-2); min-inline-size: 180px; max-inline-size: min(360px, calc(100vw - 16px)); max-block-size: calc(100vh - 16px); overflow: auto;
  display: flex; flex-direction: column; gap: 1px; color: var(--t-text); background: var(--t-panel); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-2);
  font: var(--t-fs-3)/var(--t-lh) var(--t-font-family); animation: eddy-pop var(--t-dur-ui) var(--t-ease) backwards; }
.eddy-menu-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 0; flex: none; min-block-size: var(--t-row-h);
  padding: 0 var(--t-space-4); border: 0; border-radius: var(--t-control-radius); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; white-space: nowrap; }
.eddy-menu-item:hover, .eddy-menu-item:focus { outline: none; background: var(--t-hover); }
.eddy-menu-item:focus-visible { box-shadow: var(--t-focus-ring-inset); }
.eddy-menu-item[aria-expanded="true"] { background: var(--t-accent-soft); }
.eddy-menu-item[aria-disabled="true"] { color: var(--t-dim); cursor: default; background: transparent; }
.eddy-menu-item[aria-disabled="true"]:focus-visible { box-shadow: var(--t-focus-ring-inset); }
.eddy-menu-label { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.eddy-menu-desc { color: var(--t-muted); font-size: var(--t-fs-2); white-space: normal; }
.eddy-menu-lead { display: inline-flex; color: var(--t-text2); }
.eddy-menu-pop[data-lead] > .eddy-menu-item > .eddy-menu-lead, .eddy-menu-pop[data-lead] > .eddy-menu-group > .eddy-menu-item > .eddy-menu-lead { inline-size: var(--t-icon-ui); margin-inline-end: var(--t-space-4); }
.eddy-menu-item[role="menuitemcheckbox"] > .eddy-menu-lead, .eddy-menu-item[role="menuitemradio"] > .eddy-menu-lead { color: var(--t-accent); }
.eddy-menu-key { font: var(--t-fs-1) var(--t-mono); color: var(--t-muted); }
.eddy-menu-key:not(:empty) { margin-inline-start: var(--t-space-6); }
.eddy-menu-sub { display: inline-flex; color: var(--t-muted); }
.eddy-menu-sub:not(:empty) { margin-inline-start: var(--t-space-4); }
.eddy-menu-sub:dir(rtl) { transform: scaleX(-1); }
.eddy-menu-sep { flex: none; block-size: 1px; margin: var(--t-space-2) var(--t-space-3); background: var(--t-line2); }
.eddy-menu-group-label { padding: var(--t-space-3) var(--t-space-4) var(--t-space-1); font-size: var(--t-fs-1); font-weight: var(--t-fw-strong); color: var(--t-muted); text-transform: var(--t-label-case); letter-spacing: var(--t-label-track); }
.eddy-menu-group { display: flex; flex-direction: column; gap: 1px; }
eddy-menu { display: inline-flex; }

/* tooltip */
.eddy-tooltip { position: fixed; inset: auto; margin: 0; max-inline-size: 280px; padding: var(--t-space-2) var(--t-space-4); border: 0; border-radius: var(--t-control-radius);
  color: var(--t-title-fg); background: var(--t-title-bg); box-shadow: var(--t-shadow-2); font: var(--t-fs-2)/var(--t-lh) var(--t-font-family); pointer-events: none;
  animation: eddy-fade var(--t-dur-ui) linear backwards; }

/* popover */
.eddy-popover { position: fixed; inset: auto; margin: 0; padding: 0; inline-size: max-content; max-inline-size: min(var(--pop-w, 320px), calc(100vw - 16px));
  color: var(--t-text); background: var(--t-panel); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-2);
  font: var(--t-fs-3)/var(--t-lh) var(--t-font-family); animation: eddy-pop var(--t-dur-ui) var(--t-ease) backwards; }
.eddy-popover[data-size="small"] { --pop-w: 220px; }
.eddy-popover[data-size="large"] { --pop-w: 480px; }
.eddy-popover-head { display: flex; align-items: center; gap: var(--t-space-4); padding: var(--t-space-3) var(--t-space-3) 0 var(--t-space-5); }
.eddy-popover-title { flex: 1; font-weight: var(--t-fw-strong); }
.eddy-popover-body { padding: var(--t-space-4) var(--t-space-5) var(--t-space-5); }
.eddy-popover-head[hidden] + .eddy-popover-body { padding-block-start: var(--t-space-5); }
eddy-popover { display: inline; }

/* modal: the studio's dialog — a title bar in the pane-header colour, the body, the actions */
.eddy-modal { inline-size: min(var(--modal-w, 600px), calc(100vw - 32px)); max-block-size: calc(100vh - 64px); margin: auto; padding: 0; border: 1px solid var(--t-line); border-radius: var(--t-radius-lg);
  color: var(--t-text); background: var(--t-panel); box-shadow: var(--t-shadow-3); font: var(--t-fs-3)/var(--t-lh) var(--t-font-family); overflow: hidden; }
.eddy-modal[open] { display: flex; flex-direction: column; animation: eddy-pop var(--t-dur-in) var(--t-ease) backwards; }
.eddy-modal::backdrop { background: var(--t-scrim); animation: eddy-fade var(--t-dur-ui) linear backwards; }
.eddy-modal[data-size="small"] { --modal-w: 440px; }
.eddy-modal[data-size="large"] { --modal-w: 860px; }
.eddy-modal[data-size="max"] { --modal-w: 1280px; }
.eddy-modal-header { display: flex; align-items: center; gap: var(--t-space-4); padding: var(--t-space-3) var(--t-space-3) var(--t-space-3) var(--t-space-6); background: var(--t-head-bg); color: var(--t-head-fg); border-block-end: 1px solid var(--t-line); }
.eddy-modal-title { flex: 1; margin: 0; font-size: var(--t-fs-4); font-weight: var(--t-fw-heading); }
.eddy-modal-body { padding: var(--t-space-6); overflow: auto; display: flex; flex-direction: column; gap: var(--t-space-5); }
.eddy-modal-text { margin: 0; }
.eddy-modal-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--t-space-4); padding: var(--t-space-4) var(--t-space-6); border-block-start: 1px solid var(--t-line3); background: var(--t-panel2); }
.eddy-button[data-variant="primary"][data-danger]:not(:disabled, [aria-disabled="true"]) { background: var(--t-err); color: var(--t-on-accent); }
eddy-modal, eddy-drawer { display: contents; }

/* drawer */
.eddy-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; margin: 0; padding: 0; inline-size: min(var(--drawer-w, 360px), 100vw); max-inline-size: 100vw; block-size: 100%; max-block-size: 100%;
  display: flex; flex-direction: column; color: var(--t-text); background: var(--t-panel); border: 0; border-inline-start: 1px solid var(--t-line); box-shadow: var(--t-shadow-3);
  z-index: var(--t-z-drawer); font: var(--t-fs-3)/var(--t-lh) var(--t-font-family); animation: eddy-slide-end var(--t-dur-in) var(--t-ease) backwards; }
dialog.eddy-drawer:not([open]) { display: none; }
.eddy-drawer[data-side="start"] { inset-inline-start: 0; inset-inline-end: auto; border-inline-start: 0; border-inline-end: 1px solid var(--t-line); animation-name: eddy-slide-start; }
.eddy-drawer[data-size="small"] { --drawer-w: 280px; }
.eddy-drawer[data-size="large"] { --drawer-w: 520px; }
.eddy-drawer::backdrop { background: var(--t-scrim); }
.eddy-drawer-header { display: flex; align-items: center; gap: var(--t-space-4); padding: var(--t-space-3) var(--t-space-3) var(--t-space-3) var(--t-space-6); border-block-end: 1px solid var(--t-line2); background: var(--t-head-bg); color: var(--t-head-fg); }
.eddy-drawer-title { flex: 1; margin: 0; font-size: var(--t-fs-4); font-weight: var(--t-fw-heading); }
.eddy-drawer-body { flex: 1; overflow: auto; padding: var(--t-space-6); }

/* flashbar: inline above the content, or floating at the bottom end */
eddy-flashbar { display: block; }
.eddy-flashbar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--t-space-3); }
.eddy-flashbar-floating { position: fixed; inset-block-end: var(--t-space-7); inset-inline-end: var(--t-space-7); z-index: var(--t-z-toast); inline-size: min(420px, calc(100vw - 32px)); }
.eddy-flash { display: grid; grid-template-columns: auto 1fr auto auto; align-items: start; gap: var(--t-space-4); padding: var(--t-space-4) var(--t-space-4) var(--t-space-4) var(--t-space-5);
  border-radius: var(--t-radius-lg); color: var(--t-title-fg); background: var(--t-title-bg); box-shadow: var(--t-shadow-2); font: var(--t-fs-3)/var(--t-lh) var(--t-font-family);
  border-inline-start: 4px solid var(--t-info); animation: eddy-rise var(--t-dur-in) var(--t-ease) backwards; }
.eddy-flash > .eddy-icon, .eddy-flash > .eddy-spinner { margin-block-start: 2px; color: var(--t-info); }
.eddy-flash[data-type="success"] { border-inline-start-color: var(--t-ok); } .eddy-flash[data-type="success"] > .eddy-icon { color: var(--t-ok); }
.eddy-flash[data-type="warning"] { border-inline-start-color: var(--t-warn); } .eddy-flash[data-type="warning"] > .eddy-icon { color: var(--t-warn); }
.eddy-flash[data-type="error"] { border-inline-start-color: var(--t-err); } .eddy-flash[data-type="error"] > .eddy-icon { color: var(--t-err); }
.eddy-flash-body { display: flex; flex-direction: column; gap: var(--t-space-1); min-inline-size: 0; overflow-wrap: anywhere; }
.eddy-flash-title { font-weight: var(--t-fw-strong); }
.eddy-flash .eddy-button { color: var(--t-title-fg); background: transparent; border-color: var(--t-title-line); }
.eddy-flash .eddy-button:hover { background: var(--t-title-hover); }
.eddy-flash .eddy-button[data-variant="icon"] { border-color: transparent; }
.eddy-flash-out { opacity: 0; transform: translateY(6px); transition: opacity var(--t-dur-ui) linear, transform var(--t-dur-ui) var(--t-ease); }
/* inside a page (above the content), the flash reads in the page's colours */
eddy-flashbar:not([position="floating"]) .eddy-flash { color: var(--t-text); background: var(--t-panel); border: 1px solid var(--t-line2); border-inline-start: 4px solid var(--t-info); box-shadow: var(--t-shadow-1); }
eddy-flashbar:not([position="floating"]) .eddy-flash[data-type="success"] { border-inline-start-color: var(--t-ok); }
eddy-flashbar:not([position="floating"]) .eddy-flash[data-type="warning"] { border-inline-start-color: var(--t-warn); }
eddy-flashbar:not([position="floating"]) .eddy-flash[data-type="error"] { border-inline-start-color: var(--t-err); }
eddy-flashbar:not([position="floating"]) .eddy-flash .eddy-button { color: var(--t-btn-fg); border-color: var(--t-btn-line); }
eddy-flashbar:not([position="floating"]) .eddy-flash .eddy-button:hover { background: var(--t-btn-hover-bg); }
eddy-flashbar:not([position="floating"]) .eddy-flash .eddy-button[data-variant="icon"] { border-color: transparent; color: var(--t-text2); }

/* ================================================================================================ navigation and layout elements (DS5) */
/* tabs: the studio's tab strip — sentence-case labels, the accent rule under the selected tab */
eddy-tabs { display: flex; flex-direction: column; min-inline-size: 0; }
.eddy-tabs-head { display: flex; align-items: flex-end; border-block-end: 1px solid var(--t-line2); overflow-x: auto; scrollbar-width: thin; }
.eddy-tablist { display: flex; align-items: stretch; gap: var(--t-space-1); min-inline-size: max-content; }
.eddy-tab { position: relative; display: inline-flex; align-items: center; gap: var(--t-control-gap); min-block-size: calc(var(--t-control-h) + 6px); padding: 0 var(--t-space-5);
  border: 0; background: transparent; color: var(--t-text2); font: var(--t-fs-3)/1 var(--t-label-font); text-transform: var(--t-label-case); letter-spacing: var(--t-label-track);
  cursor: pointer; white-space: nowrap; border-start-start-radius: var(--t-control-radius); border-start-end-radius: var(--t-control-radius); }
.eddy-tab:hover { color: var(--t-text); background: var(--t-hover); }
.eddy-tab:focus-visible { outline: none; box-shadow: var(--t-focus-ring-inset); }
.eddy-tab[aria-selected="true"] { color: var(--t-accent); font-weight: var(--t-fw-strong); }
.eddy-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: var(--t-space-3); inset-block-end: -1px; block-size: 2px; background: var(--t-accent); border-radius: 1px; }
.eddy-tab-badge { padding: 0 var(--t-space-2); border-radius: 8px; font-size: var(--t-fs-1); background: var(--t-chrome); color: var(--t-text2); }
.eddy-tab-close { display: inline-flex; padding: 2px; border-radius: 2px; color: var(--t-muted); }
.eddy-tab-close:hover { color: var(--t-err); background: var(--t-err-bg); }
.eddy-tab-more { color: var(--t-muted); }
eddy-tabs > [role="tabpanel"] { padding-block: var(--t-space-6); min-inline-size: 0; }
eddy-tabs > [role="tabpanel"]:focus-visible { outline: none; box-shadow: var(--t-focus-ring-inset); }
eddy-tabs[data-variant="container"] { border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); background: var(--t-panel); box-shadow: var(--t-shadow-1); }
eddy-tabs[data-variant="container"] > .eddy-tabs-head { padding-inline: var(--t-space-4); background: var(--t-panel2); border-start-start-radius: var(--t-radius-lg); border-start-end-radius: var(--t-radius-lg); }
eddy-tabs[data-variant="container"] > [role="tabpanel"] { padding: var(--t-space-6); }

/* split: two panes and a separator */
eddy-split { display: grid; min-inline-size: 0; min-block-size: 0; }
eddy-split[data-orientation="horizontal"] { grid-template-columns: var(--split, 50%) 6px minmax(0, 1fr); }
eddy-split[data-orientation="vertical"] { grid-template-rows: var(--split, 50%) 6px minmax(0, 1fr); }
eddy-split > .eddy-split-pane { min-inline-size: 0; min-block-size: 0; overflow: auto; }
.eddy-split-sep { position: relative; background: transparent; touch-action: none; }
.eddy-split-sep::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 1px; block-size: 100%; background: var(--t-line2); transition: background-color var(--t-dur-ui) var(--t-ease); }
eddy-split[data-orientation="horizontal"] > .eddy-split-sep { cursor: col-resize; }
eddy-split[data-orientation="vertical"] > .eddy-split-sep { cursor: row-resize; }
eddy-split[data-orientation="vertical"] > .eddy-split-sep::after { inline-size: 100%; block-size: 1px; }
.eddy-split-sep:hover::after, .eddy-split-sep:focus-visible::after, eddy-split[data-dragging] > .eddy-split-sep::after { background: var(--t-accent); inline-size: 3px; }
eddy-split[data-orientation="vertical"] > .eddy-split-sep:hover::after, eddy-split[data-orientation="vertical"] > .eddy-split-sep:focus-visible::after { inline-size: 100%; block-size: 3px; }
.eddy-split-sep:focus-visible { outline: none; box-shadow: var(--t-focus-ring); z-index: 1; }
/* N panes in a row (each separator trades space between its neighbours), or a two-column grid */
eddy-panes { display: flex; min-inline-size: 0; min-block-size: 0; }
eddy-panes > .eddy-panes-pane { flex: 1 1 0; min-inline-size: 0; min-block-size: 0; overflow: auto; }
eddy-panes > .eddy-split-sep { flex: 0 0 6px; cursor: col-resize; }
eddy-panes[data-dragging] > .eddy-split-sep::after { background: var(--t-accent); inline-size: 3px; }
eddy-panes[data-layout="grid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--t-space-4); }
eddy-panes[data-layout="grid"] > .eddy-split-sep { display: none; }

/* side navigation */
eddy-side-nav { display: block; }
.eddy-side-nav { display: flex; flex-direction: column; gap: var(--t-space-1); padding: var(--t-space-5) var(--t-space-4); font-size: var(--t-fs-3); }
.eddy-side-nav-header { display: block; padding: var(--t-space-2) var(--t-space-4) var(--t-space-5); font-size: var(--t-fs-5); font-weight: var(--t-fw-heading); color: var(--t-text); text-decoration: none; }
.eddy-side-nav-header[href]:hover { color: var(--t-accent); }
.eddy-side-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.eddy-side-nav-list .eddy-side-nav-list { padding-inline-start: var(--t-space-5); }
.eddy-side-nav-link { display: flex; align-items: center; gap: var(--t-space-3); padding: var(--t-space-2) var(--t-space-4); min-block-size: var(--t-row-h); border-radius: var(--t-control-radius);
  color: var(--t-text2); text-decoration: none; }
.eddy-side-nav-link:hover { background: var(--t-hover); color: var(--t-text); }
.eddy-side-nav-link:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-side-nav-link[aria-current="page"] { background: var(--t-accent-soft); color: var(--t-accent); font-weight: var(--t-fw-strong); box-shadow: inset 3px 0 0 var(--t-accent); }
.eddy-side-nav-link[aria-current="page"]:dir(rtl) { box-shadow: inset -3px 0 0 var(--t-accent); }
.eddy-side-nav-link > .eddy-badge { margin-inline-start: auto; }
.eddy-side-nav-section { margin-block-start: var(--t-space-5); }
.eddy-side-nav-section-title { padding: var(--t-space-2) var(--t-space-4); font-size: var(--t-fs-1); font-weight: var(--t-fw-strong); color: var(--t-muted); text-transform: uppercase; letter-spacing: .06em; }
.eddy-side-nav-group > summary { display: flex; align-items: center; gap: var(--t-space-3); padding: var(--t-space-2) var(--t-space-4); min-block-size: var(--t-row-h); border-radius: var(--t-control-radius);
  cursor: pointer; list-style: none; color: var(--t-text); font-weight: var(--t-fw-strong); }
.eddy-side-nav-group > summary::-webkit-details-marker { display: none; }
.eddy-side-nav-group > summary::before { content: ""; border-block: 4px solid transparent; border-inline-start: 5px solid var(--t-muted); transition: transform var(--t-dur-ui) var(--t-ease); }
.eddy-side-nav-group[open] > summary::before { transform: rotate(90deg); }
.eddy-side-nav-group > summary:hover { background: var(--t-hover); }
.eddy-side-nav-group > summary:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-side-nav-sep { block-size: 1px; background: var(--t-line2); margin: var(--t-space-4) var(--t-space-4); }
.eddy-side-nav-link > .eddy-icon:first-child, .eddy-side-nav-group > summary > .eddy-icon { color: var(--t-muted); }
.eddy-side-nav-link[aria-current="page"] > .eddy-icon:first-child { color: inherit; }
/* the rail: icons only */
.eddy-side-nav[data-collapsed] { padding-inline: var(--t-space-2); }
.eddy-side-nav[data-collapsed] :is(.eddy-side-nav-header, .eddy-side-nav-section-title, .eddy-side-nav-group > summary, .eddy-side-nav-sep) { display: none; }
.eddy-side-nav[data-collapsed] :is(.eddy-side-nav-text, .eddy-side-nav-link > .eddy-badge) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eddy-side-nav[data-collapsed] .eddy-side-nav-link { justify-content: center; padding-inline: 0; }
.eddy-side-nav[data-collapsed] .eddy-side-nav-link > .eddy-icon ~ .eddy-icon { display: none; }
.eddy-side-nav[data-collapsed] .eddy-side-nav-list .eddy-side-nav-list { padding-inline-start: 0; }
.eddy-side-nav[data-collapsed] .eddy-side-nav-section { margin-block-start: var(--t-space-2); }

/* top navigation (in the layout's top-nav slot): brand, search, utilities */
.eddy-top-nav { display: flex; align-items: center; gap: var(--t-space-4); min-block-size: var(--t-topnav-h); padding: 0 var(--t-space-5); background: var(--t-titlebar); border-block-end: 1px solid var(--t-line); }
.eddy-top-nav-brand { display: inline-flex; align-items: baseline; gap: var(--t-space-4); color: var(--t-text); text-decoration: none; white-space: nowrap; }
.eddy-top-nav-brand > b { color: var(--t-accent); letter-spacing: .3px; }
.eddy-top-nav-search { flex: 0 1 420px; min-inline-size: 120px; }
.eddy-top-nav-utils { display: flex; align-items: center; gap: var(--t-space-2); margin-inline-start: auto; }

/* app layout */
eddy-app-layout { display: flex; flex-direction: column; min-block-size: 100vh; background: var(--t-bg); color: var(--t-text); }
.eddy-skip { position: absolute; inset-inline-start: var(--t-space-4); inset-block-start: -40px; z-index: var(--t-z-tooltip); padding: var(--t-space-3) var(--t-space-5);
  background: var(--t-panel); color: var(--t-accent); border-radius: var(--t-control-radius); box-shadow: var(--t-shadow-2); }
.eddy-skip:focus { inset-block-start: var(--t-space-3); outline: none; box-shadow: var(--t-focus-ring); }
.eddy-layout-top { position: sticky; inset-block-start: 0; z-index: calc(var(--t-z-sticky) + 1); }
.eddy-layout-body { position: relative; flex: 1; display: flex; min-block-size: 0; }
.eddy-layout-nav { position: sticky; inset-block-start: var(--t-topnav-h); align-self: flex-start; block-size: calc(100vh - var(--t-topnav-h)); overflow: auto; flex: none;
  inline-size: var(--t-sidenav-w); background: var(--t-panel2); border-inline-end: 1px solid var(--t-line2); }
.eddy-layout-close { float: inline-end; margin: var(--t-space-3); }
.eddy-layout-content { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.eddy-layout-bar { display: flex; align-items: center; gap: var(--t-space-3); padding: var(--t-space-3) var(--t-space-7) 0; min-block-size: calc(var(--t-control-h) + 8px); }
.eddy-layout-notes { padding: var(--t-space-4) var(--t-space-7) 0; }
.eddy-layout-content > [data-slot="content"] { flex: 1; padding: var(--t-space-5) var(--t-space-7) var(--t-space-9); min-inline-size: 0; }
.eddy-layout-content > [data-slot="content"]:focus { outline: none; }
eddy-app-layout[data-content="narrow"] .eddy-layout-content > [data-slot="content"] { max-inline-size: calc(820px + 2 * var(--t-space-7)); }
eddy-app-layout[data-content="default"] .eddy-layout-content > [data-slot="content"] { max-inline-size: calc(var(--t-content-max) + 2 * var(--t-space-7)); }
.eddy-layout-tools { position: sticky; inset-block-start: var(--t-topnav-h); align-self: flex-start; block-size: calc(100vh - var(--t-topnav-h)); overflow: auto; flex: none;
  inline-size: var(--t-tools-w); background: var(--t-panel); border-inline-start: 1px solid var(--t-line2); animation: eddy-slide-end var(--t-dur-in) var(--t-ease) backwards; }
.eddy-layout-tools-head { display: flex; align-items: center; justify-content: space-between; gap: var(--t-space-4); padding: var(--t-space-3) var(--t-space-3) var(--t-space-3) var(--t-space-6);
  border-block-end: 1px solid var(--t-line3); font-weight: var(--t-fw-heading); font-size: var(--t-fs-4); }
.eddy-layout-tools > :not(.eddy-layout-tools-head) { padding: var(--t-space-6); }
.eddy-layout-split { position: sticky; inset-block-end: 0; z-index: var(--t-z-sticky); background: var(--t-panel); border-block-start: 1px solid var(--t-line); box-shadow: var(--t-shadow-2);
  max-block-size: 50vh; overflow: auto; padding: var(--t-space-5) var(--t-space-7); }
.eddy-layout-split[data-position="side"] { position: sticky; inset-block-start: var(--t-topnav-h); align-self: flex-start; block-size: calc(100vh - var(--t-topnav-h)); max-block-size: none;
  inline-size: var(--t-tools-w); border-block-start: 0; border-inline-start: 1px solid var(--t-line); }
.eddy-layout-body:has(> .eddy-layout-split[data-position="bottom"]:not([hidden])) { flex-wrap: wrap; }
.eddy-layout-split[data-position="bottom"] { flex-basis: 100%; order: 9; }
.eddy-layout-scrim { position: fixed; inset: 0; z-index: calc(var(--t-z-drawer) - 1); background: var(--t-scrim); animation: eddy-fade var(--t-dur-ui) linear backwards; }
eddy-app-layout[data-narrow="true"] .eddy-layout-nav, eddy-app-layout[data-narrow="true"] .eddy-layout-tools {
  position: fixed; inset-block: 0; z-index: var(--t-z-drawer); block-size: 100vh; box-shadow: var(--t-shadow-3); }
eddy-app-layout[data-narrow="true"] .eddy-layout-nav { inset-inline-start: 0; inline-size: min(var(--t-sidenav-w), 86vw); animation: eddy-slide-start var(--t-dur-in) var(--t-ease) backwards; }
eddy-app-layout[data-narrow="true"] .eddy-layout-tools { inset-inline-end: 0; inline-size: min(var(--t-tools-w), 90vw); }
eddy-app-layout[data-narrow="false"] .eddy-layout-close { display: none; }
eddy-app-layout[data-narrow="true"] .eddy-layout-bar, eddy-app-layout[data-narrow="true"] .eddy-layout-notes, eddy-app-layout[data-narrow="true"] .eddy-layout-content > [data-slot="content"] { padding-inline: var(--t-space-5); }

/* help panel (in the tools drawer): the help for one topic, with "Learn more" links at the foot */
.eddy-help-panel { display: flex; flex-direction: column; gap: var(--t-space-5); }
.eddy-help-panel-footer { border-block-start: 1px solid var(--t-line3); padding-block-start: var(--t-space-5); }

/* pagination */
.eddy-pagination { display: inline-flex; align-items: center; gap: var(--t-space-1); }
.eddy-pagination-page, .eddy-pagination-arrow { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--t-control-h); min-block-size: var(--t-control-h);
  padding: 0 var(--t-space-2); border: 1px solid transparent; border-radius: var(--t-control-radius); background: transparent; color: var(--t-text2); font: var(--t-fs-3) var(--t-font-family);
  font-variant-numeric: tabular-nums; cursor: pointer; }
.eddy-pagination-page:hover, .eddy-pagination-arrow:hover:not(:disabled) { background: var(--t-hover); color: var(--t-text); }
.eddy-pagination-page:focus-visible, .eddy-pagination-arrow:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-pagination-page[aria-current="page"] { color: var(--t-accent); font-weight: var(--t-fw-strong); border-color: var(--t-accent); background: var(--t-info-bg); }
.eddy-pagination-arrow:disabled, .eddy-pagination-page:disabled { color: var(--t-dim); cursor: default; }
.eddy-pagination-arrow > .eddy-icon:dir(rtl) { transform: scaleX(-1); }
.eddy-pagination-gap { color: var(--t-dim); padding: 0 var(--t-space-1); }

/* wizard */
.eddy-wizard { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--t-space-8); }
.eddy-wizard-nav > ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--t-space-5); }
.eddy-wizard-nav li { display: flex; flex-direction: column; gap: var(--t-space-1); padding-inline-start: var(--t-space-5); border-inline-start: 2px solid var(--t-line2); }
.eddy-wizard-nav li[data-state="current"] { border-inline-start-color: var(--t-accent); }
.eddy-wizard-nav li[data-state="done"] { border-inline-start-color: var(--t-accent2); }
.eddy-wizard-nav li > a { color: var(--t-accent); text-decoration: none; }
.eddy-wizard-nav li > a:hover { text-decoration: underline; }
.eddy-wizard-nav li > a:focus-visible { outline: none; box-shadow: var(--t-focus-ring); border-radius: 2px; }
.eddy-wizard-nav-label { color: var(--t-muted); }
.eddy-wizard-nav-label[aria-current="step"] { color: var(--t-text); font-weight: var(--t-fw-strong); }
.eddy-wizard-main { display: flex; flex-direction: column; gap: var(--t-space-6); min-inline-size: 0; }
.eddy-wizard-head { display: flex; flex-direction: column; gap: var(--t-space-2); }
.eddy-wizard-head > h2:focus { outline: none; }
.eddy-wizard-actions { display: flex; justify-content: flex-end; gap: var(--t-space-4); }
@media (max-width: 760px) { .eddy-wizard { grid-template-columns: minmax(0, 1fr); } .eddy-wizard-nav > ol { flex-direction: row; overflow-x: auto; } }

/* anchor navigation */
.eddy-anchor-nav { display: flex; flex-direction: column; gap: var(--t-space-3); font-size: var(--t-fs-2); }
.eddy-anchor-nav-title { font-weight: var(--t-fw-strong); color: var(--t-text); }
.eddy-anchor-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-inline-start: 1px solid var(--t-line2); }
.eddy-anchor-nav li[data-level="3"] { padding-inline-start: var(--t-space-5); }
.eddy-anchor-nav a { display: block; padding: var(--t-space-1) var(--t-space-4); margin-inline-start: -1px; border-inline-start: 2px solid transparent; color: var(--t-text2); text-decoration: none; }
.eddy-anchor-nav a:hover { color: var(--t-accent); }
.eddy-anchor-nav a:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-anchor-nav a[aria-current="location"] { color: var(--t-accent); border-inline-start-color: var(--t-accent); font-weight: var(--t-fw-strong); }

/* ================================================================================================ input elements (DS3) */
/* select / multiselect / date range: the trigger looks like an input */
eddy-select, eddy-combobox, eddy-quantity, eddy-date-picker, eddy-date-range { display: block; min-inline-size: 0; }
.eddy-select-trigger { display: flex; align-items: center; gap: var(--t-control-gap); inline-size: 100%; min-block-size: var(--t-control-h); padding: 0 var(--t-space-3) 0 var(--t-space-4);
  font: var(--t-fs-3)/1.3 var(--t-font-family); color: var(--t-text); text-align: start; background: var(--t-input-bg); border: 1px solid var(--t-input-line);
  border-radius: var(--t-control-radius); cursor: pointer; }
.eddy-select-trigger:hover { border-color: var(--t-accent2); }
.eddy-select-trigger:focus-visible, .eddy-select-trigger[aria-expanded="true"] { outline: none; border-color: var(--t-accent); box-shadow: var(--t-focus-ring); }
.eddy-select-trigger[aria-invalid="true"] { border-color: var(--t-err); box-shadow: inset 3px 0 0 var(--t-err); }
.eddy-select-trigger:disabled { color: var(--t-dim); background: var(--t-panel2); border-color: var(--t-line2); cursor: not-allowed; }
.eddy-select-value { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--t-control-gap); overflow: hidden; }
.eddy-select-placeholder { color: var(--t-dim); font-style: italic; }
.eddy-select-caret { color: var(--t-muted); flex: none; }
.eddy-select-tokens { margin-block-start: var(--t-space-3); }

/* the listbox popup */
.eddy-listbox-pop { position: fixed; inset: auto; margin: 0; padding: var(--t-space-2); display: flex; flex-direction: column; gap: var(--t-space-2); max-block-size: min(360px, calc(100vh - 16px));
  color: var(--t-text); background: var(--t-panel); border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-2);
  font: var(--t-fs-3)/var(--t-lh) var(--t-font-family); animation: eddy-pop var(--t-dur-ui) var(--t-ease) backwards; }
.eddy-listbox { overflow: auto; display: flex; flex-direction: column; gap: 1px; min-block-size: 0; }
.eddy-listbox-filter { flex: none; }
.eddy-listbox-group { padding: var(--t-space-3) var(--t-space-4) var(--t-space-1); font-size: var(--t-fs-1); font-weight: var(--t-fw-strong); color: var(--t-muted); }
.eddy-option { display: flex; align-items: flex-start; gap: var(--t-space-3); padding: var(--t-space-2) var(--t-space-4); min-block-size: var(--t-row-h); border-radius: var(--t-control-radius); cursor: pointer; }
.eddy-option > .eddy-icon { margin-block-start: 2px; color: var(--t-text2); }
.eddy-option-check { display: inline-flex; inline-size: var(--t-icon-ui); flex: none; margin-block-start: 2px; color: var(--t-accent); }
.eddy-option-text { display: flex; flex-direction: column; min-inline-size: 0; }
.eddy-option-desc, .eddy-option-tags { color: var(--t-muted); font-size: var(--t-fs-2); }
.eddy-option-mark { background: var(--t-accent-soft); color: inherit; border-radius: 2px; }
.eddy-option[data-active] { background: var(--t-hover); box-shadow: var(--t-focus-ring-inset); }
.eddy-option[aria-selected="true"] { color: var(--t-accent); font-weight: var(--t-fw-strong); }
.eddy-option[aria-disabled="true"] { color: var(--t-dim); cursor: default; }
.eddy-listbox-empty { padding: var(--t-space-4); color: var(--t-muted); text-align: center; }
.eddy-listbox-status:empty { display: none; }
.eddy-listbox-status { padding: var(--t-space-1) var(--t-space-4); font-size: var(--t-fs-1); color: var(--t-muted); border-block-start: 1px solid var(--t-line3); }

/* quantity: the number, then its unit as a button */
.eddy-quantity-wrap > .eddy-input { padding-inline-end: calc(var(--t-space-3) + 9ch); text-align: end; font-variant-numeric: tabular-nums; }
.eddy-quantity-unit { position: absolute; inset-inline-end: 2px; inset-block: 2px; min-inline-size: 4ch; max-inline-size: 9ch; padding: 0 var(--t-space-3);
  border: 0; border-inline-start: 1px solid var(--t-line2); border-radius: 0 var(--t-control-radius) var(--t-control-radius) 0; background: var(--t-panel2);
  color: var(--t-text2); font: var(--t-fs-2) var(--t-font-family); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eddy-quantity-unit:hover:not(:disabled) { background: var(--t-hover); color: var(--t-text); }
.eddy-quantity-unit:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-quantity-unit:disabled { cursor: default; color: var(--t-muted); }
eddy-quantity > .eddy-field-error { margin-block-start: var(--t-space-2); }

/* calendar */
.eddy-calendar { display: inline-flex; flex-direction: column; gap: var(--t-space-3); }
.eddy-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--t-space-3); }
.eddy-calendar-head .eddy-icon:dir(rtl) { transform: scaleX(-1); }
.eddy-calendar-title { font-weight: var(--t-fw-strong); }
.eddy-calendar-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.eddy-calendar-grid th { padding: var(--t-space-2); font-size: var(--t-fs-1); font-weight: var(--t-fw-strong); color: var(--t-muted); text-align: center; }
.eddy-calendar-grid td { padding: 1px; text-align: center; }
.eddy-calendar-grid td[aria-selected="true"]:has([data-in-range]) { background: var(--t-accent-soft); }
.eddy-calendar-grid button { inline-size: 30px; block-size: 28px; border: 1px solid transparent; border-radius: var(--t-control-radius); background: transparent; color: var(--t-text);
  font: var(--t-fs-2) var(--t-font-family); cursor: pointer; }
.eddy-calendar-grid button:hover { background: var(--t-hover); }
.eddy-calendar-grid button:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-calendar-grid button[aria-current="date"] { border-color: var(--t-accent); font-weight: var(--t-fw-strong); }
.eddy-calendar-grid button[data-selected] { background: var(--t-accent); color: var(--t-on-accent); font-weight: var(--t-fw-strong); }
.eddy-calendar-grid button[aria-disabled="true"] { color: var(--t-dim); cursor: default; background: transparent; text-decoration: line-through; }
.eddy-date-pop { --pop-w: 520px; }

/* file upload, attribute editor */
eddy-file-upload { display: flex; flex-direction: column; gap: var(--t-space-4); }
.eddy-file-list .eddy-token[aria-invalid="true"] { border-color: var(--t-err-line); background: var(--t-err-bg); color: var(--t-err-text); }
.eddy-file-list .eddy-token > .eddy-icon { color: var(--t-muted); }
.eddy-file-list .eddy-token[aria-invalid="true"] > .eddy-icon { color: var(--t-err); }
eddy-attribute-editor { display: flex; flex-direction: column; gap: var(--t-space-4); }
.eddy-attr-body { display: flex; flex-direction: column; gap: var(--t-space-4); }
eddy-token-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-3); }
eddy-copy { display: inline-flex; vertical-align: middle; }
.eddy-copy-value { font: var(--t-fs-2) var(--t-mono); color: var(--t-text2); }

/* ================================================================================================ collections (DS6) */
/* table: the studio's grid — compact rows, a header in the pane-header colour, row rules */
eddy-table { display: flex; flex-direction: column; min-inline-size: 0; }
eddy-table[data-variant="container"] { background: var(--t-panel); border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-1); overflow: hidden; }
.eddy-table-header { padding: var(--t-space-5) var(--t-space-6) var(--t-space-3); }
.eddy-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-4); padding: var(--t-space-3) var(--t-space-6) var(--t-space-4); }
.eddy-table-tools > :first-child { flex: 1 1 280px; min-inline-size: 0; }
.eddy-table-scroll { overflow: auto; min-inline-size: 0; }
.eddy-table-scroll:focus-visible { outline: none; box-shadow: var(--t-focus-ring-inset); }
.eddy-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font: var(--t-fs-2)/var(--t-lh) var(--t-font-family); color: var(--t-text); font-variant-numeric: tabular-nums; }
.eddy-table thead th { position: relative; padding: 0 var(--t-space-4); block-size: calc(var(--t-row-h) + 2px); text-align: start; font-weight: var(--t-fw-strong); color: var(--t-head-fg);
  background: var(--t-head-bg); border-block-end: 1px solid var(--t-line); white-space: nowrap; }
.eddy-table thead[data-sticky] th { position: sticky; inset-block-start: 0; z-index: 1; }
.eddy-table tbody :is(td, th) { padding: var(--t-space-2) var(--t-space-4); block-size: var(--t-row-h); border-block-end: 1px solid var(--t-line3); vertical-align: middle; text-align: start; }
.eddy-table tbody th { font-weight: var(--t-fw-normal); }
.eddy-table[data-wrap="false"] .eddy-table-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-inline-size: 100%; vertical-align: middle; }
.eddy-table :is(td, th)[data-align="end"] { text-align: end; }
.eddy-table tbody tr:hover > :is(td, th) { background: var(--t-hover); }
.eddy-table tbody tr[aria-selected="true"] > :is(td, th) { background: var(--t-sel); }
.eddy-table[data-stripes] tbody tr:nth-child(even):not(:hover):not([aria-selected="true"]) > :is(td, th) { background: var(--t-panel2); }
.eddy-table-sel { inline-size: 36px; text-align: center; }
.eddy-table-sort { display: inline-flex; align-items: center; gap: var(--t-space-2); margin: 0 calc(var(--t-space-2) * -1); padding: var(--t-space-1) var(--t-space-2); border: 0; border-radius: var(--t-control-radius);
  background: transparent; color: inherit; font: inherit; cursor: pointer; }
.eddy-table-sort:hover { background: var(--t-raise); }
.eddy-table-sort:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-table-sort-icon { color: var(--t-muted); }
.eddy-table th:is([aria-sort="ascending"], [aria-sort="descending"]) .eddy-table-sort-icon { color: var(--t-accent); }
.eddy-table-resizer { position: absolute; inset-block: 4px; inset-inline-end: -3px; inline-size: 6px; cursor: col-resize; z-index: 2; border-radius: 2px; }
.eddy-table-resizer::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 2px; inline-size: 1px; background: var(--t-line); }
.eddy-table-resizer:hover::after, .eddy-table-resizer:focus-visible::after { inline-size: 2px; background: var(--t-accent); }
.eddy-table-resizer:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-table-expand { display: inline-flex; vertical-align: middle; margin-inline-end: var(--t-space-2); padding: 2px; border: 0; border-radius: 2px; background: transparent; color: var(--t-muted); cursor: pointer; }
.eddy-table-expand[aria-expanded="true"] > .eddy-icon { transform: rotate(90deg); }
.eddy-table-expand > .eddy-icon:dir(rtl) { transform: scaleX(-1); }
.eddy-table-expand[aria-expanded="true"] > .eddy-icon:dir(rtl) { transform: rotate(90deg); }
.eddy-table-expand:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-table-expand-gap { display: inline-block; inline-size: calc(var(--t-icon-ui) + 4px + var(--t-space-2)); }
.eddy-table-edit { margin-inline-start: var(--t-space-2); opacity: 0; }
.eddy-table tr:hover .eddy-table-edit, .eddy-table-edit:focus-visible { opacity: 1; }
.eddy-table-editing { display: flex; flex-direction: column; gap: var(--t-space-1); }
.eddy-table-state > td { text-align: center; color: var(--t-muted); padding: var(--t-space-7) var(--t-space-4); }
.eddy-table-spacer > td { padding: 0; border: 0; }
eddy-table[data-variant="container"] .eddy-table thead th:first-child { padding-inline-start: var(--t-space-6); }
eddy-table[data-variant="container"] .eddy-table tbody :is(td, th):first-child { padding-inline-start: var(--t-space-6); }

/* the grid variant: a worksheet, a tabular-data pane, a spreadsheet editor — ruled cells, compact, with or without
   thead / tbody; inputs and selects in a cell edit in place, a row can be selected, a cell can be read-only */
.eddy-table[data-variant="grid"] { inline-size: auto; border-collapse: collapse; font: var(--t-fs-1)/1.35 var(--t-font-family); background: var(--t-panel); white-space: nowrap; }
.eddy-table[data-variant="grid"] :is(td, th) { block-size: auto; padding: 2px var(--t-space-4); border: 1px solid var(--t-line); text-align: start; vertical-align: middle; }
.eddy-table[data-variant="grid"] th { position: sticky; inset-block-start: 0; z-index: 1; font-weight: var(--t-fw-strong); color: var(--t-head-fg); background: var(--t-head-bg); }
.eddy-table[data-variant="grid"] tr:hover > td { background: var(--t-hover); }
.eddy-table[data-variant="grid"] tr:hover > th { background: var(--t-head-bg); }
.eddy-table[data-variant="grid"] tr[aria-selected="true"] > td { background: var(--t-sel); }
.eddy-table[data-variant="grid"] td[data-readonly] { color: var(--t-text2); background: var(--t-panel2); }
.eddy-table[data-variant="grid"] td :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select) { inline-size: 86px; margin: 0; padding: 0 2px; font: inherit; color: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 0; }
.eddy-table[data-variant="grid"] td select { inline-size: auto; }
/* data-stretch: the grid fills its container and its fields fill their cells (a form laid out as a table) */
.eddy-table[data-variant="grid"][data-stretch] { inline-size: 100%; }
.eddy-table[data-variant="grid"][data-stretch] td :is(input:not([type="checkbox"], [type="radio"]), select) { inline-size: 100%; }
.eddy-table[data-variant="grid"] td :is(input, select):hover { border-color: var(--t-input-line); }
.eddy-table[data-variant="grid"] td :is(input, select):focus-visible { outline: none; border-color: var(--t-accent2); background: var(--t-input-bg); box-shadow: var(--t-focus-ring); }

/* property filter */
eddy-property-filter { display: flex; flex-direction: column; gap: var(--t-space-3); min-inline-size: 0; }
.eddy-pf-count { white-space: nowrap; }
.eddy-pf-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-3); }
.eddy-pf-tokens:empty { display: none; }
.eddy-pf-op { inline-size: auto; }

/* collection preferences */
eddy-collection-preferences { display: inline-flex; }
.eddy-pref-cols { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--t-space-1); }
.eddy-pref-cols > li { display: flex; align-items: center; gap: var(--t-space-2); padding: var(--t-space-1) var(--t-space-2); border-radius: var(--t-control-radius); }
.eddy-pref-cols > li:hover { background: var(--t-hover); }

/* cards */
.eddy-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min, 260px), 100%), 1fr)); gap: var(--t-space-5); }
.eddy-card { display: flex; flex-direction: column; gap: var(--t-space-4); padding: var(--t-space-5) var(--t-space-6); background: var(--t-panel); border: 1px solid var(--t-line2);
  border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-1); min-inline-size: 0; }
/* the action card: the whole card is one button or one link (a launcher) */
.eddy-card:is(a, button) { font: inherit; color: inherit; text-align: start; text-decoration: none; cursor: pointer; inline-size: 100%; }
.eddy-card:is(a, button):hover { border-color: var(--t-accent); }
.eddy-card:is(a, button):focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-card:is(a, button) .eddy-card-title { color: var(--t-text); }
.eddy-card[data-layout="row"] { flex-direction: row; align-items: flex-start; }
.eddy-card-text { display: flex; flex-direction: column; gap: var(--t-space-1); min-inline-size: 0; }
.eddy-card[aria-selected="true"] { border-color: var(--t-accent); box-shadow: inset 0 0 0 1px var(--t-accent), var(--t-shadow-1); }
.eddy-card-media { margin: calc(var(--t-space-5) * -1) calc(var(--t-space-6) * -1) 0; border-start-start-radius: var(--t-radius-lg); border-start-end-radius: var(--t-radius-lg); overflow: hidden; background: var(--t-canvas); }
.eddy-card-media > :is(img, canvas, svg) { display: block; inline-size: 100%; block-size: 140px; object-fit: cover; }
.eddy-card-head { display: flex; align-items: flex-start; gap: var(--t-space-4); }
.eddy-card-head > input { margin-block-start: 3px; }
.eddy-card-title { margin: 0; font-size: var(--t-fs-4); font-weight: var(--t-fw-heading); min-inline-size: 0; overflow-wrap: anywhere; }
.eddy-card-sections { margin: 0; display: flex; flex-direction: column; gap: var(--t-space-3); }
.eddy-card-sections dt { font-size: var(--t-fs-2); color: var(--t-muted); font-weight: var(--t-fw-strong); }
.eddy-card-sections dd { margin: 0; }
.eddy-cards-state { grid-column: 1 / -1; text-align: center; color: var(--t-muted); padding: var(--t-space-7); }

/* tree */
eddy-tree { display: block; }
.eddy-tree, .eddy-tree ul { list-style: none; margin: 0; padding: 0; }
.eddy-tree [role="treeitem"] { outline: none; }
.eddy-tree-row { display: flex; align-items: center; gap: var(--t-space-2); min-block-size: calc(var(--t-row-h) - 4px); padding-block: var(--t-row-tree); padding-inline-end: var(--t-space-3);
  border-radius: var(--t-control-radius); cursor: default; font-size: var(--t-tree-font); color: var(--t-text); user-select: none; }
.eddy-tree [role="treeitem"]:hover > .eddy-tree-row { background: var(--t-hover); }
.eddy-tree [role="treeitem"][aria-selected="true"] > .eddy-tree-row { background: var(--t-sel); }
.eddy-tree [role="treeitem"]:focus-visible > .eddy-tree-row { box-shadow: var(--t-focus-ring-inset); }
.eddy-tree [role="treeitem"][aria-disabled="true"] > .eddy-tree-row { color: var(--t-dim); }
.eddy-tree-twist { display: inline-flex; inline-size: var(--t-icon-ui); flex: none; color: var(--t-muted); cursor: pointer; }
.eddy-tree [aria-expanded="true"] > .eddy-tree-row > .eddy-tree-twist > .eddy-icon { transform: rotate(90deg); }
.eddy-tree-twist > .eddy-icon:dir(rtl) { transform: scaleX(-1); }
.eddy-tree [aria-expanded="true"] > .eddy-tree-row > .eddy-tree-twist > .eddy-icon:dir(rtl) { transform: rotate(90deg); }
.eddy-tree-row > .eddy-icon { color: var(--t-text2); }
.eddy-tree-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eddy-tree-desc { margin-inline-start: var(--t-space-3); color: var(--t-muted); font-size: var(--t-fs-1); }
.eddy-tree [aria-selected="true"] > .eddy-tree-row .eddy-tree-desc { color: var(--t-text2); }
.eddy-tree-row > .eddy-badge { margin-inline-start: auto; }

/* code view / editor, and the highlight */
eddy-code-view, eddy-code-editor { display: block; min-inline-size: 0; }
.eddy-code-view { position: relative; border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); background: var(--t-panel2); }
.eddy-code-tools { position: absolute; inset-block-start: var(--t-space-2); inset-inline-end: var(--t-space-3); }
.eddy-code-pre { margin: 0; display: flex; gap: var(--t-space-5); padding: var(--t-space-5) var(--t-space-6); overflow: auto; font: var(--t-fs-2)/1.55 var(--t-mono); color: var(--t-text); tab-size: 2; }
.eddy-code-view[data-wrap="true"] .eddy-code-pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.eddy-code-gutter { flex: none; text-align: end; color: var(--t-dim); white-space: pre; user-select: none; }
.eddy-code-editor { display: flex; border: 1px solid var(--t-input-line); border-radius: var(--t-control-radius); background: var(--t-input-bg); overflow: hidden; }
.eddy-code-editor:focus-within { border-color: var(--t-accent); box-shadow: var(--t-focus-ring); }
.eddy-code-editor > .eddy-code-gutter { padding: var(--t-space-4) var(--t-space-3); background: var(--t-panel2); border-inline-end: 1px solid var(--t-line3); font: var(--t-fs-2)/1.55 var(--t-mono); overflow: hidden; }
.eddy-code-stack { position: relative; flex: 1; min-inline-size: 0; }
.eddy-code-highlight, .eddy-code-input { margin: 0; padding: var(--t-space-4) var(--t-space-5); font: var(--t-fs-2)/1.55 var(--t-mono); tab-size: 2; white-space: pre; overflow: auto; border: 0; }
.eddy-code-highlight { position: absolute; inset: 0; pointer-events: none; color: var(--t-text); overflow: hidden; }
.eddy-code-input { position: relative; display: block; inline-size: 100%; block-size: calc(var(--rows, 12) * 1.55em + 2 * var(--t-space-4)); resize: vertical; background: transparent;
  color: transparent; caret-color: var(--t-text); outline: none; }
.eddy-code-input::selection { background: var(--t-sel); color: transparent; }
.eddy-tok-com { color: var(--t-muted); font-style: italic; }
.eddy-tok-str { color: var(--t-ok-text); }
.eddy-tok-num, .eddy-tok-lit { color: var(--t-warn-text); }
.eddy-tok-kw { color: var(--t-accent); font-weight: var(--t-fw-strong); }
.eddy-tok-key, .eddy-tok-var { color: var(--t-ctx); }
.eddy-tok-punc { color: var(--t-text2); }

/* list: a short list with per-item actions */
.eddy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.eddy-list-item { display: flex; align-items: center; gap: var(--t-space-4); padding: var(--t-space-3) var(--t-space-2); }
.eddy-list[data-dividers] > .eddy-list-item + .eddy-list-item { border-block-start: 1px solid var(--t-line3); }
.eddy-list-item > .eddy-icon { color: var(--t-muted); }
.eddy-list-text { flex: 1; display: flex; flex-direction: column; gap: var(--t-space-1); min-inline-size: 0; }
.eddy-list-actions { display: flex; gap: var(--t-space-2); align-items: center; }

/* ================================================================================================ tutorials (DS4) */
@keyframes eddy-ring { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent2) 80%, transparent), 0 0 0 12px color-mix(in srgb, var(--t-accent2) 6%, transparent); } }
.eddy-hotspot-ring { position: fixed; z-index: var(--t-z-tooltip); border-radius: var(--t-radius-lg); pointer-events: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent2) 60%, transparent), 0 0 0 8px color-mix(in srgb, var(--t-accent2) 18%, transparent);
  animation: eddy-ring 1.6s ease-in-out infinite; }
html[data-motion="off"] .eddy-hotspot-ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .eddy-hotspot-ring { animation: none; } }
.eddy-hotspot-card { position: fixed; inset: auto; margin: 0; inline-size: min(320px, calc(100vw - 16px)); padding: var(--t-space-4) var(--t-space-5) var(--t-space-5);
  display: flex; flex-direction: column; gap: var(--t-space-3); color: var(--t-text); background: var(--t-panel); border: 1px solid var(--t-accent2); border-radius: var(--t-radius-lg);
  box-shadow: var(--t-shadow-2); font: var(--t-fs-3)/var(--t-lh-prose) var(--t-font-family); animation: eddy-pop var(--t-dur-ui) var(--t-ease) backwards; }
.eddy-hotspot-head { display: flex; align-items: center; justify-content: space-between; min-block-size: 22px; }
.eddy-hotspot-title { font-weight: var(--t-fw-strong); font-size: var(--t-fs-4); color: var(--t-accent); }
.eddy-hotspot-body { margin: 0; }
eddy-hotspot { display: inline-flex; vertical-align: middle; margin-inline-start: var(--t-space-2); }
.eddy-hotspot { display: inline-flex; align-items: center; justify-content: center; inline-size: 18px; block-size: 18px; padding: 0; border: 1px solid var(--t-accent2); border-radius: 50%;
  background: var(--t-info-bg); color: var(--t-accent); cursor: pointer; }
.eddy-hotspot:hover { background: var(--t-accent-soft); }
.eddy-hotspot:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
eddy-error-boundary { display: block; }

/* ------------------------------------------------------------------------------------------------ the AI family (DS11) */
/* avatar: a person's initials (a tint from the name on the data palette) or an agent's mark */
.eddy-avatar { --avatar: var(--t-data-1); display: inline-flex; align-items: center; justify-content: center; position: relative; flex: none;
  inline-size: 28px; block-size: 28px; border-radius: 50%; overflow: hidden; user-select: none;
  background: color-mix(in srgb, var(--avatar) 24%, var(--t-panel)); color: var(--t-text); font-size: var(--t-fs-1); font-weight: var(--t-fw-strong); }
.eddy-avatar[data-color="2"] { --avatar: var(--t-data-2); } .eddy-avatar[data-color="3"] { --avatar: var(--t-data-3); } .eddy-avatar[data-color="4"] { --avatar: var(--t-data-4); }
.eddy-avatar[data-color="5"] { --avatar: var(--t-data-5); } .eddy-avatar[data-color="6"] { --avatar: var(--t-data-6); } .eddy-avatar[data-color="7"] { --avatar: var(--t-data-7); }
.eddy-avatar[data-color="8"] { --avatar: var(--t-data-8); }
.eddy-avatar[data-size="small"] { inline-size: 20px; block-size: 20px; font-size: 10px; }
.eddy-avatar[data-size="large"] { inline-size: 36px; block-size: 36px; font-size: var(--t-fs-2); }
.eddy-avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.eddy-avatar[data-kind="agent"] { border-radius: var(--t-control-radius); background: var(--t-accent); color: var(--t-on-accent); }
.eddy-avatar[data-kind="agent"] > .eddy-icon { inline-size: 62%; block-size: 62%; }
.eddy-avatar[data-loading]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; border-block-start-color: var(--t-on-accent);
  animation: eddy-spin 0.9s linear infinite; }
.eddy-avatars { display: inline-flex; }
.eddy-avatars > .eddy-avatar + .eddy-avatar { margin-inline-start: -4px; box-shadow: 0 0 0 2px var(--t-panel); }

/* the conversation and its bubbles */
.eddy-chat { display: flex; flex-direction: column; gap: var(--t-space-6); min-inline-size: 0; }
.eddy-chat-bubble { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--t-space-4); row-gap: var(--t-space-2); align-items: start; }
.eddy-chat-bubble > .eddy-avatar { grid-row: 1 / span 4; }
.eddy-chat-meta { display: flex; flex-wrap: wrap; gap: var(--t-space-3); align-items: baseline; font-size: var(--t-fs-1); color: var(--t-muted); }
.eddy-chat-meta > b { color: var(--t-text); font-size: var(--t-fs-2); }
.eddy-chat-body { min-inline-size: 0; padding: var(--t-space-4) var(--t-space-5); border-radius: var(--t-radius-lg); background: var(--t-panel2);
  border: 1px solid var(--t-line3); color: var(--t-text); overflow-wrap: anywhere; }
.eddy-chat-body > :first-child { margin-block-start: 0; } .eddy-chat-body > :last-child { margin-block-end: 0; }
.eddy-chat-bubble[data-from="user"] { grid-template-columns: minmax(0, 1fr) auto; }
.eddy-chat-bubble[data-from="user"] > .eddy-avatar { grid-column: 2; }
.eddy-chat-bubble[data-from="user"] > :not(.eddy-avatar) { grid-column: 1; justify-self: end; max-inline-size: 85%; }
.eddy-chat-bubble[data-from="user"] .eddy-chat-body { background: var(--t-accent-soft); border-color: transparent; }
.eddy-chat-body[data-streaming]::after { content: ""; display: inline-block; inline-size: 0.5em; block-size: 1em; margin-inline-start: 2px; vertical-align: -0.15em;
  background: var(--t-accent); animation: eddy-caret 1s steps(1) infinite; }
@keyframes eddy-caret { 50% { opacity: 0; } }
html[data-motion="off"] .eddy-chat-body[data-streaming]::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .eddy-chat-body[data-streaming]::after { animation: none; } }
.eddy-chat-actions { display: flex; flex-wrap: wrap; gap: var(--t-space-1); align-items: center; }
.eddy-chat-actions .eddy-button[aria-pressed="true"] { color: var(--t-accent); }
/* <eddy-chat> (AS8 / AS18): the element, its log, and an agent run drawn in it (static/eddy/lib/transcript.js) */
eddy-chat { display: flex; flex-direction: column; gap: var(--t-space-5); min-inline-size: 0; min-block-size: 0; }
eddy-chat > [data-part="log"] { flex: 1 1 auto; min-block-size: 0; overflow: auto; }
.eddy-chat-error { color: var(--t-err-text); margin: 0; }
.eddy-chat-run { display: flex; flex-direction: column; gap: var(--t-space-6); border-block-end: 1px dashed var(--t-line2); padding-block-end: var(--t-space-6); }
.eddy-chat-turn { display: flex; flex-direction: column; gap: var(--t-space-3); }
.eddy-chat-turn-meta { font-size: var(--t-fs-1); }
.eddy-chat-progress { font-size: var(--t-fs-2); }
.eddy-chat-note { display: flex; gap: var(--t-space-3); align-items: center; color: var(--t-muted); margin: 0; }
.eddy-chat-dim { color: var(--t-muted); }
.eddy-chat-cost { color: var(--t-muted); font: var(--t-fs-1) var(--t-mono); white-space: nowrap; }
.eddy-chat-path { color: var(--t-muted); font: var(--t-fs-1) var(--t-mono); overflow-wrap: anywhere; }
.eddy-chat-table { border-collapse: collapse; inline-size: 100%; font-size: var(--t-fs-2); }
.eddy-chat-table caption { text-align: start; color: var(--t-muted); padding-block: var(--t-space-2); }
.eddy-chat-table th, .eddy-chat-table td { text-align: start; padding: var(--t-space-1) var(--t-space-3); border-block-end: 1px solid var(--t-line3); vertical-align: top; }
.eddy-chat-claims th, .eddy-chat-claims td:first-child, .eddy-chat-claims td:last-child { white-space: nowrap; }
.eddy-chat-claims td:nth-child(2), .eddy-chat-usage td:first-child { overflow-wrap: anywhere; }
.eddy-chat-num { text-align: end; font-variant-numeric: tabular-nums; }
.eddy-chat-totals { display: flex; flex-wrap: wrap; gap: var(--t-space-4); align-items: center; font-size: var(--t-fs-2); }
.eddy-chat-totals .eddy-loading-bar { flex-basis: 100%; }
.eddy-chat-keys { display: flex; flex-wrap: wrap; gap: var(--t-space-3); }
.eddy-chat-answer { overflow-wrap: anywhere; }
.eddy-chat-run .eddy-tool-call > summary { flex-wrap: wrap; row-gap: var(--t-space-2); }

/* the loading bar: an answer on its way */
.eddy-loading-bar { position: relative; block-size: 3px; overflow: hidden; border-radius: 2px; background: var(--t-accent-soft); }
.eddy-loading-bar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 40%; border-radius: inherit; background: var(--t-accent);
  animation: eddy-loading 1.4s var(--t-ease) infinite; }
.eddy-loading-bar:dir(rtl)::before { animation-direction: reverse; }
@keyframes eddy-loading { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
html[data-motion="off"] .eddy-loading-bar::before { animation-duration: 3.2s; }
@media (prefers-reduced-motion: reduce) { .eddy-loading-bar::before { animation-duration: 3.2s; } }

/* the prompt input */
eddy-prompt { display: block; }
.eddy-prompt-box { display: flex; flex-direction: column; gap: var(--t-space-2); padding: var(--t-space-3) var(--t-space-3) var(--t-space-3) var(--t-space-5);
  border: 1px solid var(--t-line); border-radius: var(--t-radius-lg); background: var(--t-panel); }
.eddy-prompt-box:focus-within { border-color: var(--t-accent); box-shadow: var(--t-focus-ring); }
.eddy-prompt-box[data-drop] { border-style: dashed; border-color: var(--t-accent); background: var(--t-accent-soft); }
.eddy-prompt-field { inline-size: 100%; resize: none; margin: 0; border: 0; padding: var(--t-space-2) 0; background: transparent; color: var(--t-text);
  font: var(--t-fs-3)/var(--t-lh) var(--t-font-family); outline: 2px solid transparent; }
.eddy-prompt-field::placeholder { color: var(--t-muted); }
.eddy-prompt-field:disabled { color: var(--t-dim); }
.eddy-prompt-actions { display: flex; align-items: center; gap: var(--t-space-2); }
.eddy-prompt-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--t-space-2); }
.eddy-prompt-files[hidden] { display: none; }

/* support prompts: what to ask next */
.eddy-prompt-chips { display: flex; flex-wrap: wrap; gap: var(--t-space-3); }
.eddy-prompt-chip { display: inline-flex; align-items: center; gap: var(--t-space-2); min-block-size: var(--t-control-h); padding: 0 var(--t-space-5); margin: 0;
  border: 1px solid var(--t-line2); border-radius: 999px; background: var(--t-panel); color: var(--t-text); font: inherit; font-size: var(--t-fs-2); text-align: start; cursor: pointer; }
.eddy-prompt-chip:hover { border-color: var(--t-accent); color: var(--t-accent); }
.eddy-prompt-chip:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }

/* the tool-call card: what the agent ran, with what, and what came back */
.eddy-tool-call { border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); background: var(--t-panel); font-size: var(--t-fs-2); }
.eddy-tool-call > summary { display: flex; align-items: center; gap: var(--t-space-3); min-block-size: var(--t-row-h); padding: var(--t-space-2) var(--t-space-4);
  list-style: none; cursor: pointer; border-radius: inherit; }
.eddy-tool-call > summary::-webkit-details-marker { display: none; }
.eddy-tool-call > summary::before { content: ""; flex: none; border-block: 4px solid transparent; border-inline-start: 5px solid var(--t-muted); transition: transform var(--t-dur-ui) var(--t-ease); }
.eddy-tool-call[open] > summary::before { transform: rotate(90deg); }
.eddy-tool-call > summary:hover { background: var(--t-hover); }
.eddy-tool-call > summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }
.eddy-tool-call-name { font-family: var(--t-mono); font-weight: var(--t-fw-strong); color: var(--t-text); }
.eddy-tool-call-args { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-muted); font-family: var(--t-mono); }
.eddy-tool-call-body { display: flex; flex-direction: column; gap: var(--t-space-3); padding: 0 var(--t-space-4) var(--t-space-4); }
.eddy-tool-call-body pre { margin: 0; padding: var(--t-space-3); max-block-size: 240px; overflow: auto; border-radius: var(--t-control-radius); background: var(--t-panel2);
  color: var(--t-text); font: var(--t-fs-1)/1.5 var(--t-mono); }

/* the approval card: the agent asks before it acts */
.eddy-approval { display: flex; flex-direction: column; gap: var(--t-space-3); padding: var(--t-space-4) var(--t-space-5); border: 1px solid var(--t-warn-line);
  border-inline-start-width: 4px; border-radius: var(--t-radius-lg); background: var(--t-warn-bg); color: var(--t-text); }
.eddy-approval-title { display: flex; align-items: center; gap: var(--t-space-3); margin: 0; font-size: var(--t-fs-3); font-weight: var(--t-fw-strong); }
.eddy-approval-title > .eddy-icon { color: var(--t-warn); }
.eddy-approval-actions { display: flex; flex-wrap: wrap; gap: var(--t-space-3); align-items: center; }
.eddy-approval[data-state="approved"] { border-color: var(--t-ok-line); background: var(--t-ok-bg); }
.eddy-approval[data-state="approved"] .eddy-approval-title > .eddy-icon { color: var(--t-ok); }
.eddy-approval[data-state="rejected"] { border-color: var(--t-line2); background: var(--t-panel2); }
.eddy-approval[data-state="rejected"] .eddy-approval-title > .eddy-icon { color: var(--t-muted); }

/* citations: the result a number came from; the grounded badge: whether the answer's numbers check out */
.eddy-citation { display: inline-flex; align-items: center; gap: 2px; margin-inline: 1px; padding: 0 var(--t-space-2); border-radius: 4px; vertical-align: 0.1em;
  background: var(--t-accent-soft); color: var(--t-accent); font: var(--t-fs-1)/1.6 var(--t-mono); text-decoration: none; }
.eddy-citation:hover { text-decoration: underline; }
.eddy-citation:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }
.eddy-citation[data-state="flagged"] { background: var(--t-err-bg); color: var(--t-err-text); }
.eddy-grounded { display: inline-flex; align-items: center; gap: var(--t-space-2); font-size: var(--t-fs-1); font-weight: var(--t-fw-strong); color: var(--t-ok-text); }
.eddy-grounded[data-state="flagged"] { color: var(--t-err-text); }
.eddy-grounded[data-state="uncited"] { color: var(--t-muted); }

/* ------------------------------------------------------------------------------------------------ engineering data (DS10) */
/* plots: a canvas in the look's colours, a legend that hides series, a read-out tooltip */
eddy-plot { display: block; min-inline-size: 0; }
.eddy-plot-head { display: flex; align-items: center; gap: var(--t-space-3); margin-block-end: var(--t-space-2); }
.eddy-plot-legend { display: flex; flex-wrap: wrap; gap: var(--t-space-1) var(--t-space-4); }
.eddy-plot-legend[hidden] { display: none; }
.eddy-plot-key { display: inline-flex; align-items: center; gap: var(--t-space-2); padding: 2px var(--t-space-2); margin: 0; border: 0; border-radius: var(--t-control-radius);
  background: none; color: var(--t-text2); font: inherit; font-size: var(--t-fs-2); cursor: pointer; }
.eddy-plot-key:hover { background: var(--t-hover); color: var(--t-text); }
.eddy-plot-key:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }
.eddy-plot-key[aria-pressed="false"] { color: var(--t-dim); text-decoration: line-through; }
.eddy-plot-key[aria-pressed="false"] > .eddy-plot-swatch { opacity: .35; }
.eddy-plot-key:disabled { cursor: default; color: var(--t-text2); }
.eddy-plot-swatch { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 2px; flex: none; }
.eddy-plot-area { position: relative; }
.eddy-plot-canvas { display: block; border-radius: var(--t-control-radius); }
.eddy-plot-canvas:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }
.eddy-plot-tip { position: absolute; z-index: 1; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: var(--t-space-2) var(--t-space-3);
  border: 1px solid var(--t-line); border-radius: var(--t-control-radius); background: var(--t-panel); color: var(--t-text); box-shadow: var(--t-shadow-2);
  font-size: var(--t-fs-1); white-space: nowrap; }
.eddy-plot-tip[hidden] { display: none; }
.eddy-plot-tip-row { display: flex; align-items: center; gap: var(--t-space-2); }
.eddy-plot-tip-row > b { margin-inline-start: auto; padding-inline-start: var(--t-space-4); font-variant-numeric: tabular-nums; }
/* the colour-map legend */
eddy-colormap { display: flex; flex-direction: column; gap: var(--t-space-2); min-inline-size: 160px; font-size: var(--t-fs-1); color: var(--t-text2); }
.eddy-colormap-title { color: var(--t-text); font-weight: var(--t-fw-strong); }
.eddy-colormap-scale { display: flex; flex-direction: column; gap: 2px; }
.eddy-colormap-track { position: relative; }
.eddy-colormap-bar { block-size: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--t-line2); }
.eddy-colormap-ticks { position: relative; block-size: 1.4em; margin-inline: 0; }
.eddy-colormap-ticks > span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eddy-colormap-ticks > span:first-child { transform: none; }
.eddy-colormap-ticks > span:last-child { transform: translateX(-100%); }
.eddy-colormap-ticks:dir(rtl) > span { transform: translateX(50%); }
.eddy-colormap-ticks:dir(rtl) > span:first-child { transform: none; }
.eddy-colormap-ticks:dir(rtl) > span:last-child { transform: translateX(100%); }
.eddy-colormap-probe { position: absolute; inset-block-end: calc(100% + 2px); transform: translateX(-50%); padding: 0 var(--t-space-2); border-radius: 3px;
  background: var(--t-text); color: var(--t-bg); font-weight: var(--t-fw-strong); white-space: nowrap; }
.eddy-colormap-probe::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; margin-inline-start: -4px; border: 4px solid transparent; border-block-start-color: var(--t-text); }
.eddy-colormap-probe:dir(rtl) { transform: translateX(50%); }
.eddy-colormap-probe[hidden] { display: none; }
eddy-colormap[data-orientation="vertical"] { min-inline-size: 0; inline-size: max-content; }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-scale { flex-direction: row; block-size: 200px; gap: var(--t-space-2); }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-bar { inline-size: 14px; block-size: 100%; }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-track { block-size: 100%; }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-ticks { block-size: 100%; inline-size: 4.5em; }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-ticks > span, eddy-colormap[data-orientation="vertical"] .eddy-colormap-ticks > span:last-child,
eddy-colormap[data-orientation="vertical"] .eddy-colormap-ticks:dir(rtl) > span { transform: translateY(50%); }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-ticks > span:first-child { transform: none; }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-ticks > span:last-child { transform: translateY(100%); }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-probe { inset-block-end: auto; inset-inline-start: calc(100% + 6px); transform: translateY(50%); }
eddy-colormap[data-orientation="vertical"] .eddy-colormap-probe::after { inset-block-start: 50%; inset-inline-start: auto; inset-inline-end: 100%; margin: -4px 0 0; border-block-start-color: transparent; border-inline-end-color: var(--t-text); }
/* a job as it runs */
eddy-job { display: flex; flex-direction: column; gap: var(--t-space-2); padding: var(--t-space-4) var(--t-space-5); border: 1px solid var(--t-line2);
  border-radius: var(--t-radius-lg); background: var(--t-panel); min-inline-size: 0; }
.eddy-job-head { display: flex; align-items: center; gap: var(--t-space-4); min-inline-size: 0; }
.eddy-job-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-text); font-weight: var(--t-fw-strong); }
.eddy-job-meta:empty { display: none; }
eddy-job .eddy-loading-bar[hidden], eddy-job .eddy-button[hidden] { display: none; }
/* the evidence behind a number */
eddy-evidence { display: flex; flex-direction: column; gap: var(--t-space-2); min-inline-size: 0; }
.eddy-evidence-label { color: var(--t-text); font-weight: var(--t-fw-strong); }
.eddy-evidence-label[hidden], .eddy-grounded[hidden] { display: none; }
.eddy-evidence-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--t-space-3); }
.eddy-evidence-cert { margin: 0; max-block-size: 60vh; overflow: auto; padding: var(--t-space-4); border-radius: var(--t-control-radius); background: var(--t-panel2);
  color: var(--t-text); font: var(--t-fs-1)/1.5 var(--t-mono); white-space: pre; }
.eddy-evidence-cert:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }
/* the timeline scrubber */
eddy-timeline { display: flex; align-items: center; gap: var(--t-space-2); min-inline-size: 0; }
.eddy-timeline-range { flex: 1; min-inline-size: 80px; }
.eddy-timeline-time { min-inline-size: 8ch; text-align: end; color: var(--t-text); font-variant-numeric: tabular-nums; }
/* the resource picker */
eddy-resource-picker { display: block; }
.eddy-resource-row { display: flex; align-items: center; gap: var(--t-space-3); }
.eddy-resource-list { max-block-size: 50vh; }
/* the viewer: a part or a field in WebGL */
eddy-viewer { position: relative; display: block; block-size: 320px; min-block-size: 160px; overflow: hidden; border-radius: var(--t-radius-lg); background: var(--t-canvas); }
.eddy-viewer-canvas { display: block; inline-size: 100%; block-size: 100%; touch-action: none; cursor: grab; }
.eddy-viewer-canvas:active { cursor: grabbing; }
.eddy-viewer-canvas:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring-inset); }
.eddy-viewer-hud { position: absolute; inset-block-start: var(--t-space-3); inset-inline-start: var(--t-space-3); padding: 2px var(--t-space-3); border-radius: 3px; pointer-events: none;
  background: color-mix(in srgb, var(--t-panel) 85%, transparent); color: var(--t-text); font-size: var(--t-fs-1); }
.eddy-viewer-hud:empty { display: none; }
.eddy-viewer-legend { position: absolute; inset-block-start: var(--t-space-5); inset-inline-end: var(--t-space-5); padding: var(--t-space-3); border-radius: var(--t-control-radius);
  background: color-mix(in srgb, var(--t-panel) 90%, transparent); }
.eddy-viewer-legend[hidden] { display: none; }
eddy-viewer > .eddy-empty { position: absolute; inset: 0; justify-content: center; }
eddy-viewer > .eddy-empty[hidden] { display: none; }
/* a drawing sheet: the engine's SVG as an image of itself, fitted whole, on paper in every mode */
eddy-sheet { display: block; min-inline-size: 0; overflow: auto; padding: var(--t-space-4); border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); background: var(--t-bg); }
.eddy-sheet-img { display: block; inline-size: 100%; block-size: auto; max-block-size: var(--eddy-sheet-height, 70vh); object-fit: contain; }
.eddy-sheet-img[hidden], eddy-sheet > .eddy-empty[hidden] { display: none; }
/* a built-in app page, framed and driven over the embed protocol */
eddy-app-frame { position: relative; display: block; block-size: 320px; min-block-size: 160px; overflow: hidden; border: 1px solid var(--t-line2); border-radius: var(--t-radius-lg); background: var(--t-panel); }
.eddy-app-frame-iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.eddy-app-frame-iframe:is(:focus, [data-focused]) { outline: 2px solid var(--t-accent); outline-offset: -2px; }
/* engineering resources as tokens: a material, a requirement */
.eddy-chip { display: inline-flex; align-items: center; gap: var(--t-space-2); max-inline-size: 100%; min-block-size: 22px; padding: 0 var(--t-space-3) 0 var(--t-space-2);
  border: 1px solid var(--t-line2); border-radius: 999px; background: var(--t-panel); color: var(--t-text); font-size: var(--t-fs-2); line-height: 1.4; vertical-align: middle; text-decoration: none; }
a.eddy-chip:hover, button.eddy-chip:hover { border-color: var(--t-accent); }
/* a value chip (DS16): a key, a hash, a state as the engine spells it — mono, square-cornered, in a tone */
.eddy-chip[data-kind="value"] { min-block-size: 0; padding: 2px var(--t-space-4); border-radius: 2px; border-color: var(--t-line); background: var(--t-panel); color: var(--t-muted);
  font: var(--t-fs-1) var(--t-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eddy-chip[data-tone="ok"] { color: var(--t-ok-text); border-color: var(--t-ok-line); }
.eddy-chip[data-tone="warn"] { color: var(--t-warn-text); border-color: var(--t-warn-line); }
.eddy-chip[data-tone="err"] { color: var(--t-err-text); border-color: var(--t-err-line); }
/* a colour swatch: an item's colour in a list (a feature, a body, a series); data-shape="square" for a material */
.eddy-swatch { display: inline-block; flex: none; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--swatch, var(--t-muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-text) 20%, transparent); }
.eddy-swatch[data-shape="square"] { border-radius: 2px; }
.eddy-chip:is(a, button) { cursor: pointer; font: inherit; font-size: var(--t-fs-2); }
.eddy-chip:is(button)[aria-pressed="true"] { color: var(--t-btn-on-fg); background: var(--t-btn-on-bg); border-color: var(--t-btn-on-line); }
.eddy-chip:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }
.eddy-chip-swatch { inline-size: 12px; block-size: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-text) 25%, transparent); }
.eddy-chip-key { color: var(--t-muted); font-family: var(--t-mono); font-size: var(--t-fs-1); }
.eddy-chip[data-kind="requirement"] { border-radius: var(--t-control-radius); }
.eddy-chip[data-kind="requirement"] > .eddy-icon { color: var(--t-muted); }
.eddy-chip[data-status="verified"] > .eddy-icon { color: var(--t-ok); }
.eddy-chip[data-status="failed"] > .eddy-icon { color: var(--t-err); }
.eddy-chip[data-status="suspect"] > .eddy-icon { color: var(--t-warn); }
.eddy-chip[data-status="suspect"] { border-style: dashed; border-color: var(--t-warn-line); }
/* the variant diff: what changed between two variants */
.eddy-diff { inline-size: 100%; border-collapse: collapse; font-size: var(--t-fs-2); }
.eddy-diff :is(th, td) { padding: var(--t-space-2) var(--t-space-4); border-block-end: 1px solid var(--t-line3); text-align: start; vertical-align: baseline; }
.eddy-diff thead th { color: var(--t-muted); font-weight: var(--t-fw-strong); font-size: var(--t-fs-1); }
.eddy-diff tbody th { font-weight: var(--t-fw-normal); color: var(--t-text2); }
.eddy-diff del { color: var(--t-err-text); background: var(--t-err-bg); text-decoration: line-through; padding: 0 2px; border-radius: 2px; }
.eddy-diff ins { color: var(--t-ok-text); background: var(--t-ok-bg); text-decoration: none; padding: 0 2px; border-radius: 2px; }
.eddy-diff tr[data-change="added"] > th::before { content: "+ "; color: var(--t-ok-text); }
.eddy-diff tr[data-change="removed"] > th::before { content: "− "; color: var(--t-err-text); }
.eddy-diff .eddy-diff-delta { color: var(--t-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------------------------------------ the workbench (DS9) */
/* the ribbon: the CommandManager's tabs and band, at the studio's metrics (TH-b) */
eddy-ribbon { display: flex; flex-direction: column; min-inline-size: 0; background: var(--t-chrome); }
.eddy-ribbon-tabs { display: flex; padding: 0 var(--t-space-3); overflow-x: auto; scrollbar-width: thin; border-block-end: 1px solid var(--t-line); }
.eddy-ribbon-tab { display: inline-flex; align-items: center; gap: var(--t-space-1); flex: none; margin: 0; padding: var(--t-space-2) var(--t-space-6);
  border: 1px solid transparent; border-block-end: 0; border-start-start-radius: var(--t-control-radius); border-start-end-radius: var(--t-control-radius);
  background: none; color: var(--t-text2); font: inherit; font-size: var(--t-ribbon-font); white-space: nowrap; cursor: pointer; }
.eddy-ribbon-tab:hover { background: var(--t-hover); color: var(--t-text); }
.eddy-ribbon-tab[aria-selected="true"] { margin-block-end: -1px; border-color: var(--t-line); background: var(--t-panel); color: var(--t-accent); font-weight: var(--t-fw-strong); }
.eddy-ribbon-tab[data-contextual] { color: var(--t-ctx); background: var(--t-ctx-bg); box-shadow: inset 0 2px 0 var(--t-ctx); }
.eddy-ribbon-tab:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring-inset); }
.eddy-ribbon-band { display: flex; align-items: stretch; gap: 2px; padding: var(--t-space-2) var(--t-space-3) var(--t-space-1); overflow-x: auto; scrollbar-width: thin; background: var(--t-panel); }
.eddy-ribbon-group { display: flex; flex-direction: column; flex: none; padding-inline-end: var(--t-space-3); margin-inline-end: var(--t-space-1); border-inline-end: 1px solid var(--t-chrome); }
.eddy-ribbon-cmds { display: flex; flex: 1; align-items: stretch; gap: 2px; }
.eddy-ribbon-group-label { padding-block-start: 2px; text-align: center; white-space: nowrap; color: var(--t-dim); font-size: 10.5px; }
eddy-ribbon[data-level="simple"] .eddy-ribbon-group-label { display: none; }
.eddy-ribbon-col { display: flex; flex-direction: column; justify-content: center; }
.eddy-ribbon-cmd { display: flex; align-items: center; gap: 5px; margin: 0; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--t-text);
  font: inherit; font-size: var(--t-ribbon-font); text-align: start; cursor: pointer; }
.eddy-ribbon-cmd[data-size="big"] { flex-direction: column; justify-content: center; gap: 3px; min-inline-size: 62px; padding: 4px 4px 3px; border-radius: 4px; text-align: center; line-height: 1.15; }
.eddy-ribbon-cmd[data-size="small"] { block-size: var(--t-row-sm); padding: 0 6px 0 4px; white-space: nowrap; }
.eddy-ribbon-cmd:hover { border-color: var(--t-accent2); background: var(--t-hover); }
.eddy-ribbon-cmd:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }
/* a command that cannot run now: the whole command at .38 (the studio's greyed command), still focusable when it is
   aria-disabled (its tooltip says why) */
.eddy-ribbon-cmd:is(:disabled, [aria-disabled="true"]) { opacity: .38; cursor: default; }
.eddy-ribbon-cmd:is(:disabled, [aria-disabled="true"]):hover { border-color: transparent; background: none; }
.eddy-ribbon-cmd[aria-pressed="true"] { border-color: var(--t-accent); background: var(--t-accent-soft); }
.eddy-ribbon-cmd[data-size="big"] > .eddy-ribbon-img { inline-size: var(--t-icon-lg); block-size: var(--t-icon-lg); margin: var(--t-icon-lg-pull); }
.eddy-ribbon-cmd[data-size="small"] > .eddy-ribbon-img { flex: none; inline-size: var(--t-icon-sm); block-size: var(--t-icon-sm); margin: var(--t-icon-sm-pull); }
.eddy-ribbon-cmd[data-size="big"] > .eddy-icon, .eddy-ribbon-cmd > .eddy-ribbon-glyph { color: var(--t-accent); }
.eddy-ribbon-glyph { display: inline-flex; flex: none; align-items: center; justify-content: center; font-weight: var(--t-fw-normal); }
.eddy-ribbon-cmd[data-size="big"] > .eddy-ribbon-glyph { block-size: var(--t-icon-lg-box); font-size: var(--t-glyph-lg); line-height: 1; }
.eddy-ribbon-cmd[data-size="small"] > .eddy-ribbon-glyph { inline-size: var(--t-icon-sm-box); font-size: 14px; }
.eddy-ribbon-caret { inline-size: 10px; block-size: 10px; color: var(--t-muted); }
/* the ribbon's CSS form, for a shell that renders its own band (chrome.js): a contextual tab, a command that is not
   available (the honest-state rows keep their tooltip), a pressed toggle, form controls inside a small command */
.eddy-ribbon-tab[data-contextual][aria-selected="true"] { background: var(--t-ctx-bg); }
.eddy-ribbon-cmd > .eddy-ribbon-glyph > img { display: block; }
.eddy-ribbon-cmd[data-size="big"] > .eddy-ribbon-glyph > img { inline-size: var(--t-icon-lg); block-size: var(--t-icon-lg); margin: var(--t-icon-lg-pull); }
.eddy-ribbon-cmd[data-size="small"] > .eddy-ribbon-glyph > img { inline-size: var(--t-icon-sm); block-size: var(--t-icon-sm); margin: var(--t-icon-sm-pull); }
/* a command's tone: the sketch's Exit (ok) and Cancel (danger) */
.eddy-ribbon-cmd[data-tone="ok"] { color: var(--t-ok-text); font-weight: var(--t-fw-strong); }
.eddy-ribbon-cmd[data-tone="danger"] { color: var(--t-err-text); }
/* the tab strip at the band's foot (the SolidWorks CommandManager's order) */
.eddy-ribbon-tabs[data-placement="bottom"] > .eddy-ribbon-tab { align-items: flex-start; padding: 4px 14px; border: 1px solid transparent; border-block-start: 0; border-radius: 0 0 4px 4px; }
.eddy-ribbon-tabs[data-placement="bottom"] > .eddy-ribbon-tab:hover { background: none; color: var(--t-text2); }
.eddy-ribbon-tabs[data-placement="bottom"] > .eddy-ribbon-tab[aria-selected="true"] { margin-block: -1px 0; border-color: var(--t-line); color: var(--t-accent); }
.eddy-ribbon-cmd :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select) { block-size: 18px; padding: 0 var(--t-space-1); font: var(--t-fs-1) var(--t-font-family);
  color: var(--t-text); background: var(--t-input-bg); border: 1px solid var(--t-input-line); border-radius: 2px; }
.eddy-ribbon-cmd input[type="text"] { inline-size: 46px; }
.eddy-ribbon-cmd select { max-inline-size: 150px; }
.eddy-ribbon-cmd :is(input, select):focus-visible { outline: none; border-color: var(--t-accent2); box-shadow: var(--t-focus-ring); }
.eddy-ribbon-label { color: var(--t-muted); }

/* The workbench's chrome at the studio's metrics (DS15: the studio is the reference; its chrome is these classes).
   toolbar: a strip of tools — the title bar's items and quick access, a viewport's heads-up view bar, a pane's compact
   view bar. <div class="eddy-toolbar" role="toolbar" aria-label="View"><button class="eddy-tool" aria-pressed="true">
   Face</button><span class="eddy-toolbar-sep" role="separator"></span>…</div>. A tool is flat until hovered and takes
   its container's text colour; the base sets no font (a title-bar link reads in the bar's, a button in its own). */
.eddy-toolbar { display: flex; align-items: center; gap: 1px; min-inline-size: 0; }
.eddy-tool { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; margin: 0; padding: 3px 7px;
  border: 1px solid transparent; border-radius: 3px; background: none; color: inherit; white-space: nowrap; cursor: pointer; }
.eddy-tool:hover { border-color: var(--t-accent2); background: var(--t-hover); }
.eddy-tool:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-tool:is([aria-pressed="true"], [aria-expanded="true"]) { background: var(--t-accent-soft); border-color: var(--t-accent); }
.eddy-tool:is(:disabled, [aria-disabled="true"]) { color: var(--t-dim); cursor: default; }
.eddy-tool:is(:disabled, [aria-disabled="true"]):hover { background: none; border-color: transparent; }
.eddy-tool:is(:disabled, [aria-disabled="true"]) > img { opacity: .45; }
.eddy-tool > img { display: block; }
/* small: a pane's compact view bar (the shells' graphics bar) */
.eddy-tool[data-size="small"] { block-size: 22px; min-inline-size: 22px; padding: 0 4px; font: var(--t-fs-1)/1 var(--t-font-family); }
.eddy-tool[data-size="small"] > img { inline-size: var(--t-icon-ui); block-size: var(--t-icon-ui); }
/* medium: the heads-up view bar over the viewport (an icon alone is a square) */
.eddy-tool[data-size="medium"] { block-size: 28px; padding: 2px 7px; font: inherit; }
.eddy-tool[data-size="medium"]:has(> img:only-child) { min-inline-size: 28px; padding: 2px 5px; font-size: 16px; }
/* large: the title bar's quick access */
.eddy-tool[data-size="large"] { block-size: 26px; min-inline-size: 26px; padding: 2px 4px; font-size: 16px; line-height: 1; }
.eddy-tool:is([data-size="medium"], [data-size="large"]) > img { inline-size: var(--t-icon-qa); block-size: var(--t-icon-qa); margin: var(--t-icon-qa-pull); }
/* outline: a tool with a resting border (a pane's own command among text) */
.eddy-tool[data-variant="outline"] { border-color: var(--t-line); background: var(--t-panel); }
.eddy-toolbar-sep { flex: none; inline-size: 1px; block-size: 16px; margin: 0 3px; background: var(--t-line); }

/* status bar: the workbench's foot — cells of state (a divider before the document's state), the hint at the end */
.eddy-statusbar { display: flex; align-items: center; gap: 18px; padding: 3px 10px; color: var(--t-muted); background: var(--t-chrome); border-block-start: 1px solid var(--t-line);
  font-size: 12px; line-height: normal; }
.eddy-statusbar-cell { white-space: nowrap; }
.eddy-statusbar-cell[data-divider] { border-inline-start: 1px solid var(--t-line); padding-inline-start: 14px; }
.eddy-statusbar-cell[data-end] { flex: 0 1 auto; min-inline-size: 0; margin-inline-start: auto; overflow: hidden; text-overflow: ellipsis; }
.eddy-statusbar-cell[data-tone="error"] { color: var(--t-err-text); font-weight: var(--t-fw-strong); }
.eddy-statusbar-cell[data-tone="ok"] { color: var(--t-ok-text); }

/* pane tabs: the icon tabs over a docked pane (the FeatureManager / PropertyManager switch) */
.eddy-pane-tabs { display: flex; gap: 2px; }
.eddy-pane-tab { display: inline-block; min-inline-size: 34px; margin: 0; padding: 2px 8px; border: 1px solid transparent; border-radius: 3px; background: none;
  color: var(--t-muted); font-size: 17px; line-height: 22px; text-align: center; cursor: default; }
.eddy-pane-tab[aria-selected="true"] { background: var(--t-accent-soft); border-color: var(--t-accent); color: var(--t-accent); }
.eddy-pane-tab:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-pane-tab > img { inline-size: 30px; block-size: 30px; margin: -5px; vertical-align: middle; }

/* sheet tabs: a document's views at the viewport's foot (Model | 3D Views | Motion Study; a drawing's sheets) */
.eddy-sheet-tabs { display: flex; gap: 1px; }
.eddy-sheet-tab { padding: 2px 12px; border: 1px solid var(--t-line); border-block-end: 0; border-radius: 4px 4px 0 0; background: var(--t-chrome); color: var(--t-muted);
  font-size: 11px; cursor: default; }
.eddy-sheet-tab[aria-selected="true"] { background: var(--t-panel); color: var(--t-text); font-weight: var(--t-fw-strong); }
.eddy-sheet-tab:focus-visible { outline: none; box-shadow: var(--t-focus-ring-inset); }

/* PropertyManager: a command's panel docked in place of the tree — sections that fold (an advanced one arrives
   folded), a section the engine does not back yet greyed with its reason */
.eddy-pm-section { border-block-end: 1px solid var(--t-chrome); }
.eddy-pm-head { display: flex; align-items: center; gap: 5px; padding: 4px 8px; background: var(--t-chrome); color: var(--t-text2); font-weight: var(--t-fw-strong); cursor: pointer; }
.eddy-pm-head:focus-visible { outline: none; box-shadow: var(--t-focus-ring-inset); }
.eddy-pm-caret { inline-size: 10px; color: var(--t-muted); }
.eddy-pm-body { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; }
.eddy-pm-head[aria-expanded="false"] + .eddy-pm-body { display: none; }
.eddy-pm-section[data-unbacked] > .eddy-pm-head { color: var(--t-dim); }
/* a selection box: dashed while it waits for a pick (it says what to pick), solid once something is picked */
.eddy-pm-pick { flex: 1; padding: 3px 6px; border: 1px dashed var(--t-line); border-radius: 3px; color: var(--t-muted); }
.eddy-pm-pick[data-picked] { border-style: solid; border-color: var(--t-accent); color: var(--t-text); background: var(--t-accent-soft); }

/* the workbench tree (the FeatureManager): flat rows, the row is the treeitem; an icon column, the name, row actions */
.eddy-tree[data-variant="workbench"] > .eddy-tree-row { gap: 6px; min-block-size: 0; padding: var(--t-row-tree) 8px var(--t-row-tree) 14px; border-radius: 0; cursor: pointer; white-space: nowrap; }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row:hover { background: var(--t-hover); }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row[aria-selected="true"] { background: var(--t-sel); }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row[aria-disabled="true"] { opacity: .45; }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row:focus-visible { outline: none; box-shadow: var(--t-focus-ring-inset); }
.eddy-tree[data-variant="workbench"] .eddy-tree-label { flex: 1; }
.eddy-tree-icon { display: flex; flex: none; align-items: center; justify-content: center; inline-size: var(--t-icon-tree-box); color: var(--t-accent); font-size: 14px; line-height: 1; text-align: center; }
.eddy-tree-icon > img { display: block; inline-size: var(--t-icon-tree); block-size: var(--t-icon-tree); margin: var(--t-icon-tree-pull); }

/* property grid: Details / a PropertyManager — group rows, the property's name, its value edited in place */
.eddy-property-grid { inline-size: 100%; border-collapse: collapse; font: var(--t-tree-font)/1.25 var(--t-font-family); color: var(--t-text); }
.eddy-property-grid td { block-size: calc(14px + 2 * var(--t-row-tree)); padding: 1px var(--t-space-3); border-block-end: 1px solid var(--t-line3); vertical-align: middle; }
.eddy-property-grid-key { inline-size: 46%; color: var(--t-text2); background: var(--t-panel2); border-inline-end: 1px solid var(--t-line3); }
.eddy-property-grid-group > td { color: var(--t-text); background: var(--t-head-bg); font-weight: var(--t-fw-strong); border-block-start: 1px solid var(--t-line); cursor: default; }
.eddy-property-grid-twist { display: inline-block; inline-size: 12px; color: var(--t-muted); }
.eddy-property-grid-value :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) { box-sizing: border-box; inline-size: 100%; block-size: 18px; margin: 0; padding: 0 2px;
  font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 0; }
.eddy-property-grid-value textarea { block-size: auto; resize: vertical; }
.eddy-property-grid-value :is(input, select, textarea):hover { border-color: var(--t-input-line); background: var(--t-input-bg); }
.eddy-property-grid-value :is(input, select, textarea):focus-visible { outline: none; border-color: var(--t-accent2); background: var(--t-input-bg); box-shadow: var(--t-focus-ring); }
.eddy-property-grid-value [readonly] { color: var(--t-text2); }
.eddy-property-grid-value[data-attention] { background: var(--t-warn-bg); }
.eddy-property-grid-value > .eddy-button { min-block-size: 18px; padding-inline: var(--t-space-4); font-size: var(--t-fs-1); }
.eddy-property-grid-value > .eddy-button + .eddy-button { margin-inline-start: var(--t-space-2); }

/* the small tab strip of a dock (a pane's tabs at its foot or head) */
.eddy-tablist[data-size="small"] { gap: 0; }
.eddy-tablist[data-size="small"] > .eddy-tab { min-block-size: 22px; padding: 0 var(--t-space-5); font-size: var(--t-fs-2); border-radius: 0; }

/* ------------------------------------------------------------------------------------------------ the workbench elements (DS9 remainder)
   Each element draws the CSS forms above (the studio's metrics, DS15) and adds only what its behaviour needs. */
/* <eddy-feature-tree>: the workbench tree, with a caret column, feature states, the rollback bar, rename, drop marks */
eddy-feature-tree { display: block; }
.eddy-feature-tree-caret { inline-size: 10px; flex: none; text-align: center; color: var(--t-muted); }
.eddy-feature-tree-caret[data-twist] { cursor: pointer; }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row[data-state="failed"] .eddy-tree-icon { color: var(--t-err); }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row[data-state="failed"] .eddy-tree-label { text-decoration: underline wavy var(--t-err); text-underline-offset: 3px; }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row[data-state="warning"] .eddy-tree-icon { color: var(--t-warn-text); }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row[data-kind="group"] .eddy-tree-label { color: var(--t-muted); }
.eddy-tree[data-variant="workbench"] > .eddy-tree-row[data-drop] { box-shadow: inset 0 2px 0 var(--t-accent); }
.eddy-feature-tree-rollback { block-size: 4px; margin: 2px 8px; border-radius: 2px; background: var(--t-accent); cursor: ns-resize; }
.eddy-feature-tree-rollback:focus-visible { outline: 2px solid transparent; box-shadow: var(--t-focus-ring); }
.eddy-feature-tree-rename { box-sizing: border-box; inline-size: 100%; block-size: 18px; margin: 0; padding: 0 2px; border: 1px solid var(--t-accent2); border-radius: 2px;
  background: var(--t-input-bg); color: var(--t-text); font: inherit; }
.eddy-feature-tree-rename:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
/* <eddy-property-manager>: the panel's head (the command, OK / Cancel / Keep visible) and its message */
eddy-property-manager { display: flex; flex-direction: column; min-block-size: 0; background: var(--t-panel2); }
.eddy-pm-header { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--t-chrome); border-block-end: 1px solid var(--t-line); font-weight: var(--t-fw-strong); }
.eddy-pm-title { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-text); }
.eddy-pm-actions { display: flex; gap: 2px; }
.eddy-pm-actions > [data-pm="ok"] { color: var(--t-ok-text); }
.eddy-pm-actions > [data-pm="cancel"] { color: var(--t-err-text); }
.eddy-pm-message { margin: 6px 8px; padding: 5px 7px; border: 1px solid var(--t-line); border-radius: 3px; background: var(--t-ctx-bg); color: var(--t-text); font-size: var(--t-fs-1); line-height: 1.35; }
.eddy-pm-sections { display: flex; flex-direction: column; flex: 1; min-block-size: 0; overflow-y: auto; }
/* <eddy-property-grid>: a group's heading is a button that folds it; rows above the level wait under "N more" */
eddy-property-grid { display: block; }
.eddy-property-grid-toggle { display: flex; align-items: center; inline-size: 100%; min-block-size: 16px; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: start; cursor: pointer; }
.eddy-property-grid-toggle:focus-visible { outline: none; box-shadow: var(--t-focus-ring-inset); }
.eddy-property-grid-more { padding-inline-start: var(--t-space-6); background: var(--t-panel2); }
.eddy-property-grid-more > .eddy-button { min-block-size: 18px; padding-inline: var(--t-space-2); font-size: var(--t-fs-1); }
.eddy-property-grid-value [aria-invalid="true"] { border-color: var(--t-err); background: var(--t-err-bg); }
/* <eddy-view-toolbar>: the heads-up view bar over a viewport */
eddy-view-toolbar { display: inline-block; }
.eddy-view-toolbar { gap: 2px; padding: 2px 4px; border: 1px solid var(--t-line); border-radius: 5px; background: var(--t-panel); box-shadow: var(--t-shadow-1); }
.eddy-view-toolbar > .eddy-toolbar-sep { align-self: stretch; block-size: auto; margin: 0 2px; background: var(--t-chrome2); }
.eddy-view-toolbar-glyph { display: inline-flex; min-inline-size: 16px; justify-content: center; font-size: 15px; line-height: 1; }
.eddy-view-toolbar-caret { margin-inline-start: -2px; color: var(--t-muted); font-size: 9px; }
/* <eddy-view-cube>: the view selector, in the mode's colours */
eddy-view-cube { display: inline-block; }
.eddy-view-cube-svg { display: block; inline-size: 144px; block-size: 134px; overflow: visible; }
.eddy-view-cube-face { fill: var(--t-chrome); stroke: var(--t-muted); stroke-width: 1; cursor: pointer; }
.eddy-view-cube-face:hover { fill: var(--t-accent-soft); }
.eddy-view-cube-corner { fill: var(--t-accent-soft); stroke: var(--t-accent); stroke-width: 1; cursor: pointer; }
.eddy-view-cube-corner:hover { fill: var(--t-accent); }
.eddy-view-cube-face:focus-visible, .eddy-view-cube-corner:focus-visible { outline: 2px solid var(--t-accent2); outline-offset: 1px; stroke: var(--t-accent); stroke-width: 2; }
.eddy-view-cube-text { fill: var(--t-text); font: 9px var(--t-font-family); text-anchor: middle; pointer-events: none; }
.eddy-view-cube-axis { stroke-width: 2; stroke-linecap: round; }
.eddy-view-cube-axis[data-axis="x"] { stroke: var(--t-err); }
.eddy-view-cube-axis[data-axis="y"] { stroke: var(--t-ok); }
.eddy-view-cube-axis[data-axis="z"] { stroke: var(--t-accent); }
.eddy-view-cube-axis-label { font: 8px var(--t-font-family); text-anchor: middle; fill: var(--t-text2); }
/* <eddy-dock>: a docked pane's views behind a small tab strip, at its head or its foot */
eddy-dock { display: flex; flex-direction: column; min-block-size: 0; background: var(--t-panel2); }
eddy-dock[data-tabs="foot"] { flex-direction: column-reverse; }
.eddy-dock-bar { display: flex; align-items: center; gap: var(--t-space-2); min-block-size: 24px; padding-inline: var(--t-space-2); background: var(--t-chrome); border-block-end: 1px solid var(--t-line); }
eddy-dock[data-tabs="foot"] > .eddy-dock-bar { border-block-end: 0; border-block-start: 1px solid var(--t-line); }
.eddy-dock-title { flex: 1; padding-inline: var(--t-space-2); color: var(--t-text2); font-weight: var(--t-fw-strong); }
.eddy-dock-tabs { flex: 1; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; }
.eddy-dock-body { display: flex; flex-direction: column; flex: 1; min-block-size: 0; overflow: auto; }
.eddy-dock-view { flex: 1; min-block-size: 0; }
/* <eddy-status-bar>: the element is the .eddy-statusbar; a job's cell can hold a small meter */
.eddy-statusbar-meter { inline-size: 60px; block-size: 6px; margin-inline-end: 6px; vertical-align: middle; accent-color: var(--t-accent); }
/* <eddy-layers>: 2D CAD's layer rows (its metrics) — the colour, the name (the current layer pressed), visibility, lock, delete */
eddy-layers { display: flex; flex-direction: column; gap: 6px; }
.eddy-layers { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.eddy-layer-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 3px; }
.eddy-layer-row:hover { background: var(--t-hover); }
.eddy-layer-row[data-current] { background: var(--t-accent-soft); }
.eddy-layer-swatch { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 16px; block-size: 16px; margin: 0; padding: 0; border: 0;
  border-radius: 2px; background: none; cursor: pointer; }
.eddy-layer-swatch::before { content: ""; inline-size: 10px; block-size: 10px; border: 1px solid var(--t-line); background: var(--swatch, var(--t-text)); }
.eddy-layer-name { flex: 1; min-inline-size: 0; min-block-size: 18px; margin: 0; padding: 0 2px; overflow: hidden; border: 0; border-radius: 2px; background: none; color: var(--t-text);
  font: inherit; text-align: start; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.eddy-layer-name[aria-pressed="true"] { font-weight: var(--t-fw-strong); }
.eddy-layer-row[data-hidden] > .eddy-layer-name { color: var(--t-muted); }
.eddy-layer-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; min-inline-size: 18px; min-block-size: 18px; margin: 0; padding: 0 2px;
  border: 0; border-radius: 2px; background: none; color: var(--t-dim); cursor: pointer; }
.eddy-layer-toggle[aria-pressed="true"] { color: var(--t-text); }
.eddy-layer-toggle:hover { color: var(--t-accent); }
.eddy-layer-toggle[aria-disabled="true"] { opacity: .45; cursor: default; }
.eddy-layer-swatch:focus-visible, .eddy-layer-name:focus-visible, .eddy-layer-toggle:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.eddy-layers-add { justify-content: center; inline-size: 100%; }
.eddy-property-grid-check { display: flex; align-items: center; min-block-size: 16px; cursor: pointer; }
.eddy-dock-bar > [data-dock="collapse"][aria-expanded] { background: none; border-color: transparent; }
.eddy-dock-bar > [data-dock="collapse"]:hover { border-color: var(--t-accent2); background: var(--t-hover); }
/* <eddy-command-palette>: every command, searched; where it lives, its level and its shortcut on each row */
eddy-command-palette { display: contents; }
.eddy-command-palette > .eddy-modal-body { gap: var(--t-space-3); padding: var(--t-space-4); }
.eddy-command-palette-list { max-block-size: min(360px, 60vh); margin: 0; padding: 0; list-style: none; }
.eddy-command-palette-list > .eddy-option { align-items: center; }
.eddy-command-palette-list > .eddy-option > .eddy-option-text { flex: 1; }
/* <eddy-graph> (DS10.b): the node graph — the product graph's DAG at its page's metrics, in the mode's colours */
eddy-graph { display: block; }
.eddy-graph-svg { display: block; font: 11px var(--t-font-family); }
.eddy-graph-edge { fill: none; stroke: var(--t-muted); stroke-width: 1.2; opacity: .75; }
.eddy-graph-edge[data-hit] { stroke: var(--t-warn); stroke-width: 2; opacity: 1; }
.eddy-graph-node { cursor: pointer; }
.eddy-graph-node > rect { fill: var(--t-panel2); stroke: var(--t-line); stroke-width: 1; }
.eddy-graph-node[data-tone="param"] > rect { fill: var(--t-accent-soft); }
.eddy-graph-node[data-dirty] > rect { stroke: var(--t-err); stroke-dasharray: 4 2; stroke-width: 1.5; }
.eddy-graph-node[data-hit] > rect { stroke: var(--t-warn); stroke-width: 2; }
.eddy-graph-node[data-hot] > rect, .eddy-graph-node[aria-pressed="true"] > rect { stroke: var(--t-accent); stroke-width: 2; }
.eddy-graph-node:focus-visible { outline: 2px solid var(--t-accent2); outline-offset: 2px; }
.eddy-graph-label { fill: var(--t-text); pointer-events: none; }
.eddy-graph-sub { fill: var(--t-muted); font-size: 10px; pointer-events: none; }