@charset "UTF-8"; /* Design tokens as CSS custom properties, so a single [data-theme] attribute on flips the whole site between light (default) and dark. */ :root, [data-theme=light] { color-scheme: light; --bg: #ffffff; --bg-soft: #f7f8fa; --surface: #f1f3f6; --code-bg: #f6f8fa; --fg: #1a1f29; --fg-soft: #3a424f; --muted: #687180; --border: #e2e6ec; --accent: #1373b0; /* logo blue (light) */ /* Theme-independent brand + fonts — declared on :root so they apply in both themes. */ --green: #69be46; /* logo green */ --orange: #f59b2d; /* logo orange */ --red: #d2051e; /* logo red */ --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Syntax-highlight token colors (light). */ --tok-comment: #8a93a0; --tok-string: #3f8f2f; --tok-keyword: #8b3fc9; --tok-number: #b5651d; --tok-func: #1373b0; --tok-property: #0f8a76; --tok-tag: #c0392b; --tok-attr: #b5651d; --tok-interp: #1373b0; --tok-punct: #687180; } [data-theme=dark] { color-scheme: dark; --bg: #0f1115; --bg-soft: #14171d; --surface: #181c23; --code-bg: #0c0e12; --fg: #e7ebf0; --fg-soft: #c2c9d2; --muted: #8b94a3; --border: #272d38; --accent: #1e8cd2; /* logo blue (dark) */ /* Syntax-highlight token colors (dark). */ --tok-comment: #6b7686; --tok-string: #9ccf6a; --tok-keyword: #c792ea; --tok-number: #f5a96a; --tok-func: #5cb6f0; --tok-property: #7fd4c1; --tok-tag: #f07a82; --tok-attr: #f5b86a; --tok-interp: #5cb6f0; --tok-punct: #8b94a3; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--mono); } /* Inline Lucide glyph in prose (`:icon[name]`) — sized to the text, currentColor stroke. */ .inline-icon { display: inline-flex; vertical-align: -0.15em; } .inline-icon svg { width: 1.05em; height: 1.05em; } /* Inline code inside prose. */ :not(pre) > code { font-size: 0.88em; padding: 1px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); } /* Prose typography — applies to the doc content rendered by each page. */ h1 { font-size: 34px; line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.02em; } h2 { font-size: 23px; line-height: 1.3; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } h3 { font-size: 18px; margin: 28px 0 10px; } /* Leave room under the sticky top bar when jumping to an anchor. */ h1, h2, h3, h4 { scroll-margin-top: 76px; } p { margin: 14px 0; color: var(--fg-soft); } ul, ol { margin: 14px 0; padding-left: 22px; color: var(--fg-soft); } li { margin: 6px 0; } .lead { font-size: 18px; color: var(--fg-soft); } strong { color: var(--fg); } /* Code group — every code sample is a Weave-UI (rendered by the Tabs component, so these are global). The Tabs supplies the frame + the tab-bar header (language / filename); the body inside each panel is frameless. */ .code-group.weave-tabs { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--code-bg); } .code-group .weave-tabs__list { padding: 0 6px; border-bottom-color: var(--border); background: color-mix(in srgb, var(--fg) 4%, transparent); } .code-group .weave-tabs__panel { padding: 0; } /* Syntax-highlight token classes. These spans are created in JS by the highlighter (no component scope attribute), so the classes are global. */ .tok-comment { color: var(--tok-comment); font-style: italic; } .tok-string { color: var(--tok-string); } .tok-keyword { color: var(--tok-keyword); } .tok-number { color: var(--tok-number); } .tok-func { color: var(--tok-func); } .tok-property { color: var(--tok-property); } .tok-tag { color: var(--tok-tag); } .tok-attr { color: var(--tok-attr); } .tok-interp { color: var(--tok-interp); } .tok-punct { color: var(--tok-punct); } /* ───────────────────────── internal emit ───────────────────────── */ /* ───────────────────────── public API ───────────────────────── */ .weave-divider { border: 0; border-top: var(--weave-divider-thickness) solid var(--weave-divider-line); margin: 0; align-self: stretch; } .weave-divider--vertical { border-top: 0; border-left: var(--weave-divider-thickness) solid var(--weave-divider-line); width: 0; height: var(--weave-divider-height); align-self: center; } @keyframes weave-ripple { to { transform: scale(var(--weave-ripple-scale)); opacity: 0; } } .weave-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: var(--weave-ripple-opacity); transform: scale(0); pointer-events: none; animation: weave-ripple var(--weave-ripple-duration) ease-out; } .weave-icon { display: inline-flex; width: var(--weave-icon-size); height: var(--weave-icon-size); flex: 0 0 auto; line-height: 0; color: inherit; } .weave-icon svg { width: 100%; height: 100%; stroke-width: var(--weave-icon-stroke); } .weave-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--weave-button-gap); padding: var(--weave-button-padding-y) var(--weave-button-padding-x); border: 1px solid transparent; border-radius: var(--weave-button-radius); background: var(--weave-button-background); color: var(--weave-button-text); font-size: var(--weave-button-font-size); font-weight: var(--weave-button-weight); line-height: 1; cursor: pointer; user-select: none; transition: background var(--weave-button-duration) ease, color var(--weave-button-duration) ease, opacity var(--weave-button-duration) ease; position: relative; overflow: hidden; } .weave-button:hover { opacity: var(--weave-button-hover-opacity); } .weave-button:active { transform: translateY(1px); } .weave-button:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } /* Outline — 1px ink border, inverts to the primary fill on hover. */ .weave-button--outline { background: transparent; color: var(--weave-button-background); border-color: var(--weave-button-border); } .weave-button--outline:hover { background: var(--weave-button-background); color: var(--weave-button-text); opacity: 1; } /* Marked — text with a 2px accent underline mark (no fill). */ .weave-button--marked { background: transparent; color: var(--weave-button-background); box-shadow: inset 0 calc(-1 * var(--weave-button-mark-width)) 0 var(--weave-button-accent); } .weave-button--marked:hover { opacity: 1; } /* Ghost — text only; sub → ink on hover. */ .weave-button--ghost { background: transparent; color: var(--weave-button-ghost-text); } .weave-button--ghost:hover { background: transparent; color: var(--weave-button-ghost-text-hover); opacity: 1; } /* Icon — 34px square, houses a single . The glyph inherits the surrounding text color (ink on a light surface, canvas on an ink toolbar) so it's visible on any background — never hard-code ink here. */ .weave-button--icon { width: var(--weave-button-icon-size); height: var(--weave-button-icon-size); padding: 0; background: transparent; color: inherit; } .weave-button--icon:hover { background: var(--weave-button-icon-hover); opacity: 1; } /* Disabled (native attr, not a class) — field bg, sub text, no feedback. */ .weave-button[disabled] { background: var(--weave-button-disabled-background); color: var(--weave-button-disabled-text); border-color: transparent; box-shadow: none; cursor: not-allowed; opacity: 1; } .weave-button[disabled]:active { transform: none; } .weave-button-toggle { display: inline-flex; border: 1px solid var(--weave-button-toggle-border); border-radius: var(--weave-button-toggle-radius); overflow: hidden; } .weave-button-toggle__segment { appearance: none; display: inline-flex; align-items: center; gap: var(--weave-button-toggle-icon-gap); border: 0; border-left: 1px solid var(--weave-button-toggle-border); background: transparent; color: var(--weave-button-toggle-text); font-size: var(--weave-button-toggle-font-size); font-weight: var(--weave-button-toggle-weight); padding: var(--weave-button-toggle-padding-y) var(--weave-button-toggle-padding-x); line-height: 1; cursor: pointer; transition: background var(--weave-button-toggle-duration) ease, color var(--weave-button-toggle-duration) ease; } .weave-button-toggle__segment:first-child { border-left: 0; } .weave-button-toggle__segment:hover { background: var(--weave-button-toggle-hover); } .weave-button-toggle__segment:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; outline-offset: -2px; } /* Selected — the accent-free ink fill (state via native ARIA attr, not a class). */ .weave-button-toggle__segment[aria-checked=true], .weave-button-toggle__segment[aria-pressed=true] { background: var(--weave-button-toggle-selected-background); color: var(--weave-button-toggle-selected-text); } .weave-button-toggle__segment[disabled] { color: var(--weave-button-toggle-disabled-text); cursor: not-allowed; } .weave-badge { position: relative; display: inline-flex; vertical-align: middle; } .weave-badge__mark { position: absolute; top: 0; inset-inline-end: 0; transform: translate(50%, -50%); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: var(--weave-badge-min-size); height: var(--weave-badge-min-size); padding: 0 var(--weave-badge-padding-x); border-radius: var(--weave-badge-radius); background: var(--weave-badge-background); color: var(--weave-badge-text); font-size: var(--weave-badge-font-size); font-weight: var(--weave-badge-weight); font-variant-numeric: tabular-nums; line-height: 1; pointer-events: none; } /* Dot — a bare 6px mark, no text. */ .weave-badge--dot .weave-badge__mark { min-width: var(--weave-badge-dot-size); width: var(--weave-badge-dot-size); height: var(--weave-badge-dot-size); padding: 0; background: var(--weave-badge-dot); } /* Corners (default top-end). */ .weave-badge--bottom .weave-badge__mark { top: auto; bottom: 0; transform: translate(50%, 50%); } .weave-badge--start .weave-badge__mark { inset-inline-end: auto; inset-inline-start: 0; transform: translate(-50%, -50%); } .weave-badge--bottom.weave-badge--start .weave-badge__mark { transform: translate(-50%, 50%); } /* Transforms aren't direction-aware — flip the horizontal push under RTL so the mark still sits just outside the correct (logical) corner. */ [dir=rtl] .weave-badge__mark { transform: translate(-50%, -50%); } [dir=rtl] .weave-badge--bottom .weave-badge__mark { transform: translate(-50%, 50%); } [dir=rtl] .weave-badge--start .weave-badge__mark { transform: translate(50%, -50%); } [dir=rtl] .weave-badge--bottom.weave-badge--start .weave-badge__mark { transform: translate(50%, 50%); } /* Tag — a standalone outline label; the container IS the visible mark. */ .weave-badge--tag { display: inline-flex; align-items: center; padding: var(--weave-badge-tag-padding-y) var(--weave-badge-tag-padding-x); border: 1px solid var(--weave-badge-tag-border); border-radius: var(--weave-badge-tag-radius); color: var(--weave-badge-tag-text); font-size: var(--weave-badge-tag-font-size); font-weight: var(--weave-badge-weight); line-height: 1; } .weave-card { display: flex; flex-direction: column; gap: var(--weave-card-gap); padding: var(--weave-card-padding); background: var(--weave-card-background); border: 1px solid var(--weave-card-border); border-radius: var(--weave-card-radius); overflow: hidden; color: var(--weave-card-body-text); } .weave-card--interactive { cursor: pointer; transition: background var(--weave-card-duration) ease; } .weave-card--interactive:hover { background: var(--weave-card-hover); } /* Media — bleeds to the card edges (cancels the padding) and to the top. */ .weave-card__media { margin: calc(-1 * var(--weave-card-padding)) calc(-1 * var(--weave-card-padding)) 0; } .weave-card__media > *, .weave-card__media img { display: block; width: 100%; } .weave-card__title { margin: 0; font-size: var(--weave-card-title-size); font-weight: var(--weave-card-title-weight); letter-spacing: -0.02em; color: var(--weave-card-title-text); } .weave-card__body { margin: 0; font-size: var(--weave-card-body-size); line-height: var(--weave-card-body-line-height); color: var(--weave-card-body-text); } /* Secondary/meta text inside a card. */ .weave-card__meta { font-size: var(--weave-card-body-size); color: var(--weave-card-meta-text); } /* Actions sink to the bottom: in an equal-height row the content area takes the slack and the action row stays pinned to the card's bottom edge (no dead gap below it). When the card is only as tall as its content, `auto` collapses to 0. */ .weave-card__actions { display: flex; gap: var(--weave-card-actions-gap); align-items: center; margin-top: auto; } .weave-toolbar { display: flex; align-items: center; gap: var(--weave-toolbar-gap); box-sizing: border-box; height: var(--weave-toolbar-height); padding: 0 var(--weave-toolbar-padding-x); background: var(--weave-toolbar-background); color: var(--weave-toolbar-text); border-bottom: 1px solid var(--weave-toolbar-border); } .weave-toolbar--ink { background: var(--weave-toolbar-ink-background); color: var(--weave-toolbar-ink-text); border-bottom-color: transparent; } .weave-toolbar--sticky { position: sticky; top: 0; z-index: 10; } /* The flexible gap — everything after it is pushed to the trailing edge. */ .weave-toolbar__spacer { flex: 1 1 auto; } .weave-toolbar__start, .weave-toolbar__end { display: flex; align-items: center; gap: var(--weave-toolbar-gap); } .weave-list { display: flex; flex-direction: column; } .weave-list__row { display: flex; align-items: center; gap: var(--weave-list-padding-x); min-height: var(--weave-list-row-height); padding: var(--weave-list-padding-y) var(--weave-list-padding-x); border-inline-start: var(--weave-list-marker-width) solid transparent; color: var(--weave-list-text); font-size: var(--weave-list-font-size); font-weight: var(--weave-list-weight); line-height: var(--weave-list-line-height); transition: background var(--weave-list-duration) ease; } .weave-list__row + .weave-list__row { box-shadow: 0 -1px 0 var(--weave-list-divider); } .weave-list[role=listbox] .weave-list__row { cursor: pointer; } .weave-list[role=listbox] .weave-list__row:hover { background: var(--weave-list-hover); } .weave-list__row:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; outline-offset: -2px; } .weave-list__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .weave-list__meta { flex: none; color: var(--weave-list-meta); font-size: var(--weave-list-meta-font-size); } .weave-list__drag-handle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--weave-list-drag-handle-size); color: var(--weave-list-drag-handle); cursor: grab; touch-action: none; user-select: none; } .weave-list__drag-handle:active { cursor: grabbing; } /* Selected — accentSoft tint + 2px accent left border (state via native ARIA attr). */ .weave-list__row[aria-selected=true] { background: var(--weave-list-selected-background); border-inline-start-color: var(--weave-list-selected-marker); } .weave-list__row[aria-disabled=true] { color: var(--weave-list-disabled-text); cursor: not-allowed; } .weave-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--weave-grid-list-min-tile), 1fr)); gap: var(--weave-grid-list-gap); background: var(--weave-grid-list-border); border: var(--weave-grid-list-gap) solid var(--weave-grid-list-border); border-radius: var(--weave-grid-list-radius); overflow: hidden; } .weave-grid-list__tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--weave-grid-list-tile-background); color: var(--weave-grid-list-tile-text); } .weave-grid-list__tile--accent { background: var(--weave-grid-list-accent-background); color: var(--weave-grid-list-accent-text); } .weave-progress-bar { position: relative; overflow: hidden; width: 100%; height: var(--weave-progress-bar-height); background: var(--weave-progress-bar-track); border-radius: var(--weave-progress-bar-radius); } .weave-progress-bar__fill { position: relative; inset-inline-start: 0; width: 0; height: 100%; background: var(--weave-progress-bar-fill); border-radius: inherit; transition: width var(--weave-progress-bar-duration) ease; } /* Indeterminate — a fixed-width segment slides across; the width is keyframe-driven, so no inline width and no transition. */ .weave-progress-bar--indeterminate .weave-progress-bar__fill { width: var(--weave-progress-bar-segment); transition: none; animation: weave-progress-bar-indet var(--weave-progress-bar-indet-duration) ease-in-out infinite; } @keyframes weave-progress-bar-indet { 0% { inset-inline-start: calc(-1 * var(--weave-progress-bar-segment)); } 100% { inset-inline-start: 100%; } } .weave-progress-spinner { box-sizing: border-box; display: inline-block; width: var(--weave-progress-spinner-diameter); height: var(--weave-progress-spinner-diameter); border: var(--weave-progress-spinner-thickness) solid var(--weave-progress-spinner-track); border-top-color: var(--weave-progress-spinner-indicator); border-radius: 50%; animation: weave-progress-spinner-spin var(--weave-progress-spinner-duration) linear infinite; } /* Compact 18px ring. */ .weave-progress-spinner--small { width: var(--weave-progress-spinner-diameter-small); height: var(--weave-progress-spinner-diameter-small); } @keyframes weave-progress-spinner-spin { to { transform: rotate(360deg); } } .weave-checkbox { position: relative; display: inline-flex; align-items: center; gap: var(--weave-checkbox-gap); cursor: pointer; } /* The real input overlays the whole label (opacity 0) so it stays keyboard- and pointer-reachable while the __box carries the visual. */ .weave-checkbox__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; } .weave-checkbox__box { position: relative; flex: none; box-sizing: border-box; width: var(--weave-checkbox-size); height: var(--weave-checkbox-size); border: var(--weave-checkbox-border-width) solid var(--weave-checkbox-border); border-radius: var(--weave-checkbox-radius); background: var(--weave-checkbox-background); transition: background var(--weave-checkbox-duration) ease, border-color var(--weave-checkbox-duration) ease; } /* The ✓ tick — the shared checkmark glyph, revealed when checked. */ .weave-checkbox__box::after { content: ""; width: 5px; height: 9px; border: solid var(--weave-checkbox-mark); border-width: 0 2px 2px 0; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; transition: opacity var(--weave-checkbox-duration) ease; } /* The mixed dash — shown when indeterminate. */ .weave-checkbox__box::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 1px; background: var(--weave-checkbox-mark); transform: translate(-50%, -50%); opacity: 0; transition: opacity var(--weave-checkbox-duration) ease; } .weave-checkbox__label { font-size: var(--weave-checkbox-label-size); color: var(--weave-checkbox-label-text); } /* On (checked or indeterminate) — the accent fill. */ .weave-checkbox__input:checked + .weave-checkbox__box, .weave-checkbox__input:indeterminate + .weave-checkbox__box { background: var(--weave-checkbox-checked-background); border-color: var(--weave-checkbox-checked-background); } .weave-checkbox__input:checked + .weave-checkbox__box::after { opacity: 1; } /* Indeterminate rules come AFTER checked so a box that is both shows the dash, not the tick. */ .weave-checkbox__input:indeterminate + .weave-checkbox__box::after { opacity: 0; } .weave-checkbox__input:indeterminate + .weave-checkbox__box::before { opacity: 1; } .weave-checkbox__input:focus-visible + .weave-checkbox__box { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-checkbox__input:disabled { cursor: not-allowed; } .weave-checkbox__input:disabled + .weave-checkbox__box { opacity: 0.5; } .weave-checkbox__input:disabled ~ .weave-checkbox__label { color: var(--weave-checkbox-disabled-text); } .weave-radio-group { display: inline-flex; flex-direction: column; gap: var(--weave-radio-group-gap); } .weave-radio { position: relative; display: inline-flex; align-items: center; gap: var(--weave-radio-gap); cursor: pointer; } /* The real input overlays the whole label (opacity 0) — keyboard/pointer reachable, native radio grouping intact — while the __box carries the visual. */ .weave-radio__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; } .weave-radio__box { position: relative; flex: none; box-sizing: border-box; width: var(--weave-radio-size); height: var(--weave-radio-size); border: var(--weave-radio-border-width) solid var(--weave-radio-border); border-radius: 50%; background: var(--weave-radio-background); transition: border-color var(--weave-radio-duration) ease; } /* The dot — scales in when selected. */ .weave-radio__box::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--weave-radio-dot-size); height: var(--weave-radio-dot-size); border-radius: 50%; background: var(--weave-radio-dot); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform var(--weave-radio-duration) ease, opacity var(--weave-radio-duration) ease; } .weave-radio__label { font-size: var(--weave-radio-label-size); color: var(--weave-radio-label-text); } /* Selected — accent ring + dot (state via the native :checked pseudo, no class). */ .weave-radio__input:checked + .weave-radio__box { border-color: var(--weave-radio-checked-border); } .weave-radio__input:checked + .weave-radio__box::after { transform: translate(-50%, -50%) scale(1); opacity: 1; } .weave-radio__input:focus-visible + .weave-radio__box { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-radio__input:disabled { cursor: not-allowed; } .weave-radio__input:disabled + .weave-radio__box { opacity: 0.5; } .weave-radio__input:disabled ~ .weave-radio__label { color: var(--weave-radio-disabled-text); } .weave-slide-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--weave-slide-toggle-gap); cursor: pointer; } .weave-slide-toggle__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; } .weave-slide-toggle__track { position: relative; flex: none; box-sizing: border-box; width: var(--weave-slide-toggle-track-width); height: var(--weave-slide-toggle-track-height); border-radius: var(--weave-slide-toggle-radius); background: var(--weave-slide-toggle-track-off); transition: background var(--weave-slide-toggle-duration) ease; } /* The knob — slides across when on. */ .weave-slide-toggle__track::after { content: ""; position: absolute; top: var(--weave-slide-toggle-knob-inset); inset-inline-start: var(--weave-slide-toggle-knob-inset); width: var(--weave-slide-toggle-knob-size); height: var(--weave-slide-toggle-knob-size); border-radius: var(--weave-slide-toggle-knob-radius); background: var(--weave-slide-toggle-knob-off); transition: transform var(--weave-slide-toggle-duration) ease, background var(--weave-slide-toggle-duration) ease; } .weave-slide-toggle__label { font-size: var(--weave-slide-toggle-label-size); color: var(--weave-slide-toggle-label-text); } /* On — accent track + white knob slid to the far side. */ .weave-slide-toggle__input:checked + .weave-slide-toggle__track { background: var(--weave-slide-toggle-track-on); } .weave-slide-toggle__input:checked + .weave-slide-toggle__track::after { transform: translateX(calc(var(--weave-slide-toggle-track-width) - var(--weave-slide-toggle-knob-size) - 2 * var(--weave-slide-toggle-knob-inset))); background: var(--weave-slide-toggle-knob-on); } [dir=rtl] .weave-slide-toggle__input:checked + .weave-slide-toggle__track::after { transform: translateX(calc(-1 * (var(--weave-slide-toggle-track-width) - var(--weave-slide-toggle-knob-size) - 2 * var(--weave-slide-toggle-knob-inset)))); } .weave-slide-toggle__input:focus-visible + .weave-slide-toggle__track { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-slide-toggle__input:disabled { cursor: not-allowed; } .weave-slide-toggle__input:disabled + .weave-slide-toggle__track { opacity: 0.5; } .weave-slide-toggle__input:disabled ~ .weave-slide-toggle__label { color: var(--weave-slide-toggle-disabled-text); } .weave-form-field { display: flex; flex-direction: column; gap: var(--weave-form-field-gap); } .weave-form-field__label { font-size: var(--weave-form-field-label-size); font-weight: var(--weave-form-field-label-weight); text-transform: uppercase; letter-spacing: var(--weave-form-field-label-tracking); color: var(--weave-form-field-label); } .weave-form-field__control { display: block; } .weave-form-field__hint { font-size: var(--weave-form-field-message-size); color: var(--weave-form-field-hint); } .weave-form-field__error { font-size: var(--weave-form-field-message-size); color: var(--weave-form-field-error); } /* Error state — the label reddens (the control's underline reddens off the aria-invalid this field sets, styled by the control itself). */ .weave-form-field--invalid .weave-form-field__label { color: var(--weave-form-field-error); } .weave-input { border: 0; border-bottom: var(--weave-input-border-width) solid var(--weave-input-border); background: transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .weave-input:focus, .weave-input:focus-within { outline: none; border-bottom-color: var(--weave-input-focus); box-shadow: inset 0 -1px 0 var(--weave-input-focus); } .weave-input { display: inline-flex; align-items: center; gap: var(--weave-input-gap); width: 100%; box-sizing: border-box; color: var(--weave-input-text); } /* Multiline aligns adornments to the first line, not the vertical centre. */ .weave-input--multiline { align-items: flex-start; } /* Error — red underline (driven by the bound control's touched-and-invalid state). */ .weave-input--invalid { border-bottom-color: var(--weave-input-error); } .weave-input--invalid:focus-within { border-bottom-color: var(--weave-input-error); box-shadow: inset 0 -1px 0 var(--weave-input-error); } .weave-input__field { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--weave-input-font-size); color: inherit; padding: var(--weave-input-padding-y) 0; outline: none; } .weave-input__field::placeholder { color: var(--weave-input-placeholder); } /* Neutralise the browser autofill tint (blue/yellow box) so the field stays a transparent underline. The 100000s transition defers the autofill background indefinitely; text/caret keep the field colour. */ .weave-input__field:-webkit-autofill, .weave-input__field:-webkit-autofill:hover, .weave-input__field:-webkit-autofill:focus { transition: background-color 100000s ease-in-out 0s; -webkit-text-fill-color: var(--weave-input-text); caret-color: var(--weave-input-text); } /* Suppress native adornments Weave replaces or omits: the `type=search` clear (we ship our own `__clear`) and the `type=number` spinner buttons. */ .weave-input__field::-webkit-search-cancel-button, .weave-input__field::-webkit-search-decoration { appearance: none; -webkit-appearance: none; } .weave-input__field::-webkit-outer-spin-button, .weave-input__field::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .weave-input__field[type=number] { appearance: textfield; -moz-appearance: textfield; } .weave-input__field:disabled { cursor: not-allowed; opacity: 0.6; } textarea.weave-input__field { resize: vertical; line-height: 1.4; } /* Prefix / suffix — adornment text or icon; empty slots collapse (JS adds --empty). */ .weave-input__prefix, .weave-input__suffix { display: inline-flex; align-items: center; flex: none; color: var(--weave-input-adornment); font-size: var(--weave-input-font-size); } .weave-input__prefix--empty, .weave-input__suffix--empty { display: none; } /* Clear × — the shared Weave clear button (same as Select). */ .weave-input__clear { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--weave-input-adornment); cursor: pointer; } .weave-input__clear:hover { color: var(--weave-input-text); } .weave-input__clear { flex: none; font-size: var(--weave-input-clear-size); line-height: 1; } .weave-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--weave-chips-gap); } .weave-chips__chip { display: inline-flex; align-items: center; gap: var(--weave-chips-chip-gap); padding: var(--weave-chips-padding-y) var(--weave-chips-padding-x); border: 1px solid var(--weave-chips-border); border-radius: var(--weave-chips-radius); background: transparent; color: var(--weave-chips-text); font-size: var(--weave-chips-font-size); line-height: var(--weave-chips-line-height); } .weave-chips__chip:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-chips__label { white-space: nowrap; } .weave-chips__remove { display: inline-flex; align-items: center; justify-content: center; width: var(--weave-chips-remove-size); height: var(--weave-chips-remove-size); margin-inline-end: var(--weave-chips-remove-nudge); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--weave-chips-remove); font-size: var(--weave-chips-remove-font-size); line-height: 1; cursor: pointer; transition: color var(--weave-chips-duration) ease, background var(--weave-chips-duration) ease; } .weave-chips__remove:hover:not(:disabled) { color: var(--weave-chips-text); background: var(--weave-chips-hover); } .weave-chips__remove:disabled { cursor: not-allowed; opacity: 0.5; } /* The dashed "+ Add" chip — a real button. */ .weave-chips__chip--add { gap: var(--weave-chips-add-gap); border-style: dashed; color: var(--weave-chips-add-text); cursor: pointer; font-family: inherit; transition: background var(--weave-chips-duration) ease; } .weave-chips__chip--add:hover:not(:disabled) { background: var(--weave-chips-hover); } .weave-chips__chip--add:disabled { cursor: not-allowed; opacity: 0.5; } .weave-overlay-backdrop { background: var(--weave-overlay-backdrop); } .weave-overlay-backdrop--transparent { background: transparent; } .weave-overlay-panel { box-sizing: border-box; min-width: var(--weave-overlay-min-width); background: var(--weave-overlay-surface); color: var(--weave-overlay-text); border: 1px solid var(--weave-overlay-line); border-radius: var(--weave-overlay-radius); } .weave-tooltip { pointer-events: none; max-width: var(--weave-tooltip-max-width); padding: var(--weave-tooltip-padding-y) var(--weave-tooltip-padding-x); border-radius: var(--weave-tooltip-radius); background: var(--weave-tooltip-background); color: var(--weave-tooltip-text); font-size: var(--weave-tooltip-font-size); font-weight: var(--weave-tooltip-weight); line-height: var(--weave-tooltip-line-height); animation: weave-tooltip-in var(--weave-tooltip-duration) ease; } @keyframes weave-tooltip-in { from { opacity: 0; } to { opacity: 1; } } .weave-menu { box-sizing: border-box; min-width: var(--weave-overlay-min-width); background: var(--weave-overlay-surface); color: var(--weave-overlay-text); border: 1px solid var(--weave-overlay-line); border-radius: var(--weave-overlay-radius); min-width: var(--weave-menu-min-width); padding: var(--weave-menu-padding-y) 0; overflow: hidden; } .weave-menu__item { display: flex; flex-direction: column; justify-content: center; gap: var(--weave-menu-item-gap); width: 100%; min-height: var(--weave-menu-item-height); padding: var(--weave-menu-item-padding-y) var(--weave-menu-item-padding-x); border: 0; background: transparent; color: var(--weave-menu-item-text); font: inherit; font-size: var(--weave-menu-font-size); font-weight: var(--weave-menu-weight); text-align: left; cursor: pointer; transition: background var(--weave-menu-duration) ease; } .weave-menu__description { font-size: var(--weave-menu-description-size); font-weight: var(--weave-menu-description-weight); line-height: var(--weave-menu-description-line-height); color: var(--weave-menu-item-description); } .weave-menu__item:not(:disabled):hover, .weave-menu__item:focus { background: var(--weave-menu-item-hover); outline: none; } .weave-menu__item[disabled] { color: var(--weave-menu-item-disabled); cursor: default; } .weave-menu__divider { height: var(--weave-menu-divider-height); margin: var(--weave-menu-padding-y) 0; background: var(--weave-menu-divider); } .weave-dialog { display: flex; flex-direction: column; box-sizing: border-box; width: var(--weave-dialog-width); min-width: var(--weave-dialog-min-width); max-width: calc(100vw - 2 * var(--weave-dialog-margin)); max-height: calc(100vh - 2 * var(--weave-dialog-margin)); background: var(--weave-dialog-surface); color: var(--weave-dialog-text); border: 1px solid var(--weave-dialog-line); border-radius: var(--weave-dialog-radius); overflow: hidden; } .weave-dialog__header { flex: 0 0 auto; padding: var(--weave-dialog-padding); border-bottom: 1px solid var(--weave-dialog-line); font-size: var(--weave-dialog-title-size); font-weight: var(--weave-dialog-title-weight); line-height: var(--weave-dialog-title-line-height); } .weave-dialog__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--weave-dialog-padding); line-height: var(--weave-dialog-content-line-height); } .weave-dialog__actions { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: var(--weave-dialog-actions-gap); padding: var(--weave-dialog-padding); border-top: 1px solid var(--weave-dialog-line); } .weave-bottom-sheet { display: flex; flex-direction: column; box-sizing: border-box; max-width: var(--weave-bottom-sheet-max-width); margin-inline: auto; max-height: var(--weave-bottom-sheet-max-height); background: var(--weave-bottom-sheet-surface); color: var(--weave-bottom-sheet-text); border: 1px solid var(--weave-bottom-sheet-line); border-bottom: 0; border-radius: var(--weave-bottom-sheet-radius) var(--weave-bottom-sheet-radius) 0 0; overflow: hidden; animation: weave-bottom-sheet-in var(--weave-bottom-sheet-duration) ease; } @keyframes weave-bottom-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } .weave-bottom-sheet__handle { flex: 0 0 auto; width: var(--weave-bottom-sheet-handle-width); height: var(--weave-bottom-sheet-handle-height); margin: var(--weave-bottom-sheet-handle-top) auto 0; border-radius: 999px; background: var(--weave-bottom-sheet-handle); cursor: grab; touch-action: none; } .weave-bottom-sheet__handle:active { cursor: grabbing; } .weave-bottom-sheet__header { flex: 0 0 auto; padding: var(--weave-bottom-sheet-padding); border-bottom: 1px solid var(--weave-bottom-sheet-line); font-size: var(--weave-bottom-sheet-title-size); font-weight: var(--weave-bottom-sheet-title-weight); line-height: var(--weave-bottom-sheet-title-line-height); } .weave-bottom-sheet__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--weave-bottom-sheet-padding); line-height: var(--weave-bottom-sheet-content-line-height); } .weave-bottom-sheet__actions { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: var(--weave-bottom-sheet-actions-gap); padding: var(--weave-bottom-sheet-padding); border-top: 1px solid var(--weave-bottom-sheet-line); } .weave-snackbar { display: flex; align-items: center; gap: var(--weave-snackbar-gap); box-sizing: border-box; margin: var(--weave-snackbar-offset); max-width: var(--weave-snackbar-max-width); padding: var(--weave-snackbar-padding-y) var(--weave-snackbar-padding-x); border-radius: var(--weave-snackbar-radius); background: var(--weave-snackbar-background); color: var(--weave-snackbar-text); font-size: var(--weave-snackbar-font-size); font-weight: var(--weave-snackbar-weight); line-height: var(--weave-snackbar-line-height); animation: weave-snackbar-in var(--weave-snackbar-duration) ease; } @keyframes weave-snackbar-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .weave-snackbar__message { flex: 1 1 auto; } .weave-snackbar__action { flex: 0 0 auto; border: 0; background: transparent; padding: 0; margin-inline-start: var(--weave-snackbar-gap); color: var(--weave-snackbar-action); font: inherit; font-weight: var(--weave-snackbar-action-weight); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .weave-snackbar__action:hover, .weave-snackbar__action:focus-visible { text-decoration: underline; outline: none; } .weave-select { display: block; } .weave-select__field { border: 0; border-bottom: var(--weave-select-border-width) solid var(--weave-select-border); background: transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .weave-select__field:focus, .weave-select__field:focus-within { outline: none; border-bottom-color: var(--weave-select-focus); box-shadow: inset 0 -1px 0 var(--weave-select-focus); } .weave-select__field { display: flex; align-items: center; gap: var(--weave-select-gap); padding: var(--weave-select-field-padding-y) 0; color: var(--weave-select-text); font-size: var(--weave-select-font-size); font-weight: var(--weave-select-weight); line-height: 1.4; cursor: pointer; } .weave-select__value--placeholder { color: var(--weave-select-placeholder); } .weave-select__spacer { flex: 1 1 auto; } .weave-select__chevron { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--weave-select-chevron); transition: transform var(--weave-select-duration) ease; } .weave-select__field[aria-expanded=true] .weave-select__chevron { transform: rotate(180deg); } .weave-select__prefix--empty, .weave-select__suffix--empty { display: none; } .weave-select__clear { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--weave-select-placeholder); cursor: pointer; } .weave-select__clear:hover { color: var(--weave-select-text); } .weave-select--disabled .weave-select__field { color: var(--weave-select-disabled-text); cursor: default; } .weave-select--invalid .weave-select__field { border-bottom-color: var(--weave-select-error); box-shadow: inset 0 -1px 0 0 var(--weave-select-error); } /* ── the listbox panel ── */ .weave-select__panel { box-sizing: border-box; min-width: var(--weave-overlay-min-width); background: var(--weave-overlay-surface); color: var(--weave-overlay-text); border: 1px solid var(--weave-overlay-line); border-radius: var(--weave-overlay-radius); max-height: var(--weave-select-panel-max-height); overflow-y: auto; padding: 4px 0; } .weave-select__option { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: var(--weave-select-option-min-height); padding: 5px calc(var(--weave-select-option-padding-x) + 16px) 5px var(--weave-select-option-padding-x); color: var(--weave-select-text); font-size: var(--weave-select-font-size); cursor: pointer; transition: background var(--weave-select-duration) ease; } .weave-select__option--active { background: var(--weave-select-option-hover); } .weave-select__option--selected { background: var(--weave-select-option-selected); } .weave-select__option--selected::after { content: ""; width: 5px; height: 9px; border: solid var(--weave-select-option-mark); border-width: 0 2px 2px 0; position: absolute; right: var(--weave-select-option-padding-x); top: 50%; margin-top: -6px; transform: rotate(45deg); } .weave-select__option[aria-disabled=true] { color: var(--weave-select-disabled-text); cursor: default; } .weave-select__description { font-size: var(--weave-select-description-size); font-weight: 400; line-height: 1.3; color: var(--weave-select-description); } .weave-autocomplete__panel { box-sizing: border-box; min-width: var(--weave-overlay-min-width); background: var(--weave-overlay-surface); color: var(--weave-overlay-text); border: 1px solid var(--weave-overlay-line); border-radius: var(--weave-overlay-radius); max-height: var(--weave-autocomplete-panel-max-height); overflow-y: auto; padding: var(--weave-autocomplete-panel-padding-y) 0; } .weave-autocomplete__option { display: flex; flex-direction: column; justify-content: center; gap: var(--weave-autocomplete-option-gap); min-height: var(--weave-autocomplete-option-min-height); padding: var(--weave-autocomplete-option-padding-y) var(--weave-autocomplete-option-padding-x); color: var(--weave-autocomplete-text); font-size: var(--weave-autocomplete-font-size); cursor: pointer; transition: background var(--weave-autocomplete-duration) ease; } .weave-autocomplete__option--active { background: var(--weave-autocomplete-option-hover); } .weave-autocomplete__description { font-size: var(--weave-autocomplete-description-size); font-weight: var(--weave-autocomplete-description-weight); line-height: var(--weave-autocomplete-description-line-height); color: var(--weave-autocomplete-description); } .weave-autocomplete__empty { padding: var(--weave-autocomplete-empty-padding-y) var(--weave-autocomplete-option-padding-x); color: var(--weave-autocomplete-description); font-size: var(--weave-autocomplete-font-size); } .weave-expansion { display: flex; flex-direction: column; border: 1px solid var(--weave-expansion-divider); border-radius: var(--weave-expansion-radius); overflow: hidden; } .weave-expansion__panel + .weave-expansion__panel { border-top: 1px solid var(--weave-expansion-divider); } .weave-expansion__heading { margin: 0; } .weave-expansion__header { display: flex; align-items: center; justify-content: space-between; gap: var(--weave-expansion-header-gap); width: 100%; min-height: var(--weave-expansion-header-height); padding: var(--weave-expansion-padding-y) var(--weave-expansion-padding-x); border: 0; background: transparent; color: var(--weave-expansion-text); font-family: inherit; font-size: var(--weave-expansion-header-size); font-weight: var(--weave-expansion-header-weight); text-align: left; cursor: pointer; transition: background var(--weave-expansion-duration) ease; } .weave-expansion__header:hover { background: var(--weave-expansion-header-hover-background); } .weave-expansion__header[aria-expanded=true] { background: var(--weave-expansion-header-open-background); } .weave-expansion__header:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; outline-offset: -2px; } .weave-expansion__header[aria-disabled=true] { color: var(--weave-expansion-disabled-text); cursor: not-allowed; } .weave-expansion__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .weave-expansion__marker { flex: none; width: var(--weave-expansion-marker-width); color: var(--weave-expansion-marker); font-weight: var(--weave-expansion-marker-weight); text-align: center; } .weave-expansion__marker::after { content: "+"; } .weave-expansion__header[aria-expanded=true] .weave-expansion__marker::after { content: "−"; } .weave-expansion__region { display: grid; grid-template-rows: 0fr; } .weave-expansion__region[data-open=true] { grid-template-rows: 1fr; } .weave-expansion__body { overflow: hidden; min-height: 0; } .weave-expansion__content { padding: var(--weave-expansion-body-padding-y) var(--weave-expansion-body-padding-x); color: var(--weave-expansion-text); font-size: var(--weave-expansion-body-size); } .weave-expansion__region[data-open=true] .weave-expansion__content { animation: weave-expansion-reveal var(--weave-expansion-duration) ease; } @keyframes weave-expansion-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .weave-tabs { display: flex; flex-direction: column; } .weave-tabs__list { display: flex; border-bottom: 1px solid var(--weave-tabs-line); } .weave-tabs__tab { display: inline-flex; align-items: center; gap: var(--weave-tabs-gap); padding: var(--weave-tabs-tab-padding-y) var(--weave-tabs-tab-padding-x); border: 0; background: transparent; color: var(--weave-tabs-text); font-family: inherit; font-size: var(--weave-tabs-tab-size); font-weight: var(--weave-tabs-tab-weight); cursor: pointer; transition: color var(--weave-tabs-duration) ease; } .weave-tabs__tab::before { content: ""; flex: none; width: var(--weave-tabs-marker-size); height: var(--weave-tabs-marker-size); background: transparent; } .weave-tabs__tab[aria-selected=true] { color: var(--weave-tabs-text-active); } .weave-tabs__tab[aria-selected=true]::before { background: var(--weave-tabs-marker); } .weave-tabs__tab:not([aria-disabled=true]):hover { color: var(--weave-tabs-text-active); } .weave-tabs__tab[aria-disabled=true] { color: var(--weave-tabs-disabled-text); cursor: not-allowed; } .weave-tabs__tab:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; outline-offset: -2px; } .weave-tabs__panel { padding: var(--weave-tabs-panel-padding-y) 0; color: var(--weave-tabs-panel-text); font-size: var(--weave-tabs-panel-size); } .weave-tabs__panel:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; outline-offset: -2px; } .weave-stepper { display: flex; flex-direction: column; } .weave-stepper__header { display: flex; align-items: center; } .weave-stepper__step { display: inline-flex; align-items: center; gap: var(--weave-stepper-gap); min-width: 0; padding: var(--weave-stepper-step-padding-y) var(--weave-stepper-step-padding-x); border: 0; background: transparent; color: var(--weave-stepper-label); font-family: inherit; font-size: var(--weave-stepper-label-size); font-weight: var(--weave-stepper-label-weight); cursor: pointer; } .weave-stepper__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .weave-stepper__step[aria-disabled=true] { cursor: not-allowed; } .weave-stepper__step:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; border-radius: var(--weave-stepper-radius); } .weave-stepper__indicator { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--weave-stepper-indicator-size); height: var(--weave-stepper-indicator-size); border-radius: 50%; font-size: var(--weave-stepper-number-size); line-height: 1; transition: background var(--weave-stepper-duration) ease, border-color var(--weave-stepper-duration) ease, color var(--weave-stepper-duration) ease; } .weave-stepper__step[data-state=upcoming] .weave-stepper__indicator { border: var(--weave-stepper-border-width) solid var(--weave-stepper-upcoming-border); color: var(--weave-stepper-upcoming-text); } .weave-stepper__step[data-state=upcoming] .weave-stepper__label { color: var(--weave-stepper-label-upcoming); } .weave-stepper__step[data-state=active] .weave-stepper__indicator { background: var(--weave-stepper-active-background); color: var(--weave-stepper-on-accent); } .weave-stepper__step[data-state=done] .weave-stepper__indicator { background: var(--weave-stepper-done-background); } .weave-stepper__step[data-state=done] .weave-stepper__number { display: none; } .weave-stepper__step[data-state=done] .weave-stepper__indicator::after { content: ""; width: var(--weave-stepper-check-width); height: var(--weave-stepper-check-height); border: solid var(--weave-stepper-on-accent); border-width: 0 2px 2px 0; margin-top: -2px; transform: rotate(45deg); } .weave-stepper__optional { margin-inline-start: var(--weave-stepper-optional-gap); color: var(--weave-stepper-optional); font-size: var(--weave-stepper-optional-size); } .weave-stepper__connector { flex: 1 1 auto; min-width: var(--weave-stepper-connector-min); height: var(--weave-stepper-connector-height); margin: 0 var(--weave-stepper-connector-gap); background: var(--weave-stepper-connector); transition: background var(--weave-stepper-duration) ease; } .weave-stepper__connector[data-state=done] { background: var(--weave-stepper-connector-done); } .weave-stepper__panel { padding: var(--weave-stepper-panel-padding-y) 0; } .weave-stepper__actions { display: flex; gap: var(--weave-stepper-actions-gap); margin-top: var(--weave-stepper-actions-margin); } .weave-slider { position: relative; display: flex; align-items: center; height: var(--weave-slider-height); cursor: pointer; touch-action: none; user-select: none; } .weave-slider__track { position: relative; width: 100%; height: var(--weave-slider-track-height); background: var(--weave-slider-track); border-radius: calc(var(--weave-slider-track-height) / 2); } .weave-slider__fill { position: absolute; inset-block: 0; inset-inline-start: 0; height: 100%; background: var(--weave-slider-fill); border-radius: inherit; } .weave-slider__thumb { position: absolute; top: 50%; width: var(--weave-slider-thumb-width); height: var(--weave-slider-thumb-height); background: var(--weave-slider-thumb); transform: translate(-50%, -50%); } .weave-slider__thumb::after { content: ""; position: absolute; top: calc(var(--weave-slider-cap-size) / -2); left: 50%; width: var(--weave-slider-cap-size); height: var(--weave-slider-cap-size); background: var(--weave-slider-cap); transform: translateX(-50%); } .weave-slider:focus-visible { outline: none; } .weave-slider:focus-visible .weave-slider__thumb { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-slider--invalid .weave-slider__fill, .weave-slider--invalid .weave-slider__thumb::after { background: var(--weave-slider-error); } .weave-slider--disabled { cursor: not-allowed; opacity: 0.5; } .weave-paginator { display: flex; align-items: center; gap: var(--weave-paginator-gap); flex-wrap: wrap; color: var(--weave-paginator-text); font-size: var(--weave-paginator-font-size); font-weight: var(--weave-paginator-weight); } .weave-paginator__page, .weave-paginator__nav { min-width: var(--weave-paginator-button); height: var(--weave-paginator-button); padding: 0 var(--weave-paginator-button-padding-x); } .weave-paginator__nav { font-size: var(--weave-paginator-nav-glyph-size); line-height: 1; } .weave-paginator__ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: var(--weave-paginator-button); height: var(--weave-paginator-button); color: var(--weave-paginator-disabled-text); } .weave-paginator__range { margin-inline-start: var(--weave-paginator-section-gap); color: var(--weave-paginator-range); font-size: var(--weave-paginator-range-size); font-variant-numeric: tabular-nums; white-space: nowrap; } .weave-paginator__jump { display: inline-flex; align-items: center; gap: var(--weave-paginator-jump-gap); margin-inline-start: var(--weave-paginator-section-gap); color: var(--weave-paginator-range); font-size: var(--weave-paginator-range-size); } .weave-paginator__jump-field { width: var(--weave-paginator-jump-width); } .weave-paginator__jump-field .weave-input__field { text-align: center; font-variant-numeric: tabular-nums; } .weave-paginator__size { margin-inline-start: var(--weave-paginator-section-gap); width: var(--weave-paginator-size-width); } .weave-paginator--disabled { opacity: var(--weave-paginator-disabled-opacity); } .weave-sidenav { position: relative; display: flex; overflow: hidden; } .weave-sidenav__drawer { box-sizing: border-box; width: var(--weave-sidenav-width); background: var(--weave-sidenav-drawer-background); border-inline-end: 1px solid var(--weave-sidenav-drawer-line); overflow: auto; transition: transform var(--weave-sidenav-duration) ease, margin var(--weave-sidenav-duration) ease; } .weave-sidenav__content { flex: 1 1 auto; min-width: 0; overflow: auto; transition: margin var(--weave-sidenav-duration) ease; } .weave-sidenav__backdrop { position: absolute; inset: 0; z-index: var(--weave-sidenav-backdrop-z); background: var(--weave-sidenav-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--weave-sidenav-duration) ease; } .weave-sidenav--backdrop .weave-sidenav__backdrop { opacity: 1; pointer-events: auto; } /* ── side: drawer is in flow and pushes the content ── */ .weave-sidenav--side .weave-sidenav__drawer { flex: 0 0 var(--weave-sidenav-width); } .weave-sidenav--side:not(.weave-sidenav--opened) .weave-sidenav__drawer { margin-inline-start: calc(-1 * var(--weave-sidenav-width)); } /* ── over / push: drawer floats over the content ── */ .weave-sidenav--over .weave-sidenav__drawer, .weave-sidenav--push .weave-sidenav__drawer { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: var(--weave-sidenav-drawer-z); transform: translateX(-100%); } .weave-sidenav--over.weave-sidenav--opened .weave-sidenav__drawer, .weave-sidenav--push.weave-sidenav--opened .weave-sidenav__drawer { transform: translateX(0); } .weave-sidenav--push.weave-sidenav--opened .weave-sidenav__content { margin-inline-start: var(--weave-sidenav-width); } /* ── end position: drawer docks to the inline-end edge ── */ .weave-sidenav--end .weave-sidenav__drawer { order: 2; border-inline-end: 0; border-inline-start: 1px solid var(--weave-sidenav-drawer-line); } .weave-sidenav--end.weave-sidenav--side:not(.weave-sidenav--opened) .weave-sidenav__drawer { margin-inline-start: 0; margin-inline-end: calc(-1 * var(--weave-sidenav-width)); } .weave-sidenav--end.weave-sidenav--over .weave-sidenav__drawer, .weave-sidenav--end.weave-sidenav--push .weave-sidenav__drawer { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); } .weave-sidenav--end.weave-sidenav--over.weave-sidenav--opened .weave-sidenav__drawer, .weave-sidenav--end.weave-sidenav--push.weave-sidenav--opened .weave-sidenav__drawer { transform: translateX(0); } .weave-sidenav--end.weave-sidenav--push.weave-sidenav--opened .weave-sidenav__content { margin-inline-start: 0; margin-inline-end: var(--weave-sidenav-width); } .weave-table { position: relative; } .weave-table__scroll { overflow: auto; } .weave-table__grid { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--weave-table-surface); color: var(--weave-table-text); font-size: var(--weave-table-font-size); line-height: var(--weave-table-line-height); } /* ── header ── */ .weave-table__header-cell { position: sticky; top: 0; z-index: 2; box-sizing: border-box; padding: var(--weave-table-cell-padding-y) var(--weave-table-cell-padding-x); background: var(--weave-table-surface); color: var(--weave-table-header-text); font-size: var(--weave-table-header-size); font-weight: var(--weave-table-header-weight); text-align: start; white-space: nowrap; box-shadow: 0 1px 0 var(--weave-table-line); } .weave-table__sort { display: inline-flex; align-items: center; gap: var(--weave-table-control-gap); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } .weave-table__sort--active { color: var(--weave-table-header-active); } .weave-table__sort:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-table__sort-arrow { display: inline-block; width: 1em; color: var(--weave-table-sort-arrow); font-size: var(--weave-table-arrow-size); } /* ── column resize grip (drag the header edge; keyboard on the separator) ── */ .weave-table__resize-grip { position: absolute; top: 0; inset-inline-end: 0; height: 100%; width: var(--weave-table-resize-grip-width); cursor: col-resize; touch-action: none; user-select: none; outline: none; } .weave-table__resize-grip::after { content: ""; position: absolute; top: 20%; inset-inline-end: calc((var(--weave-table-resize-grip-width) - var(--weave-table-resize-grip-line)) / 2); width: var(--weave-table-resize-grip-line); height: 60%; background: var(--weave-table-resize-grip); } .weave-table__resize-grip:hover::after, .weave-table__resize-grip:focus-visible::after { background: var(--weave-table-resize-grip-active); } .weave-table[data-resizing] { user-select: none; } /* ── body cells ── */ .weave-table__cell { box-sizing: border-box; padding: var(--weave-table-cell-padding-y) var(--weave-table-cell-padding-x); box-shadow: 0 -1px 0 var(--weave-table-line); white-space: nowrap; } .weave-table__cell--numeric { text-align: end; font-variant-numeric: tabular-nums; } .weave-table__row > .weave-table__cell:first-child { border-inline-start: var(--weave-table-marker-width) solid transparent; } .weave-table__row:hover > .weave-table__cell { background: var(--weave-table-row-hover); } /* ── selection (native ARIA attr, no state class) ── */ .weave-table__row[aria-selected=true] > .weave-table__cell { background: var(--weave-table-selected-background); } .weave-table__row[aria-selected=true] > .weave-table__cell:first-child { border-inline-start-color: var(--weave-table-selected-marker); } /* ── sticky columns (offsets set inline by JS) ── */ .weave-table__cell--sticky-start, .weave-table__cell--sticky-end { position: sticky; z-index: 1; background: var(--weave-table-surface); } .weave-table__header-cell.weave-table__cell--sticky-start, .weave-table__header-cell.weave-table__cell--sticky-end { z-index: 3; } /* ── select + expand utility columns (fixed width set inline for sticky offsets) ── */ .weave-table__select, .weave-table__expand { text-align: center; white-space: nowrap; } .weave-table__expand-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--weave-table-expand-size); height: var(--weave-table-expand-size); padding: 0; border: 0; background: transparent; color: var(--weave-table-header-text); cursor: pointer; } .weave-table__expand-toggle::before { content: "▸"; display: inline-block; transition: transform var(--weave-table-duration) ease; } .weave-table__expand-toggle[aria-expanded=true]::before { transform: rotate(90deg); } .weave-table__expand-toggle:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } /* ── expanded detail row ── */ .weave-table__detail-cell { padding: var(--weave-table-cell-padding-y) var(--weave-table-cell-padding-x); background: var(--weave-table-detail-background); box-shadow: 0 -1px 0 var(--weave-table-line); } /* ── empty state ── */ .weave-table__empty { padding: var(--weave-table-cell-padding-y) var(--weave-table-cell-padding-x); color: var(--weave-table-empty-text); text-align: center; } .weave-tree { display: block; } .weave-tree__node { display: flex; align-items: center; gap: var(--weave-tree-gap); box-sizing: border-box; min-height: var(--weave-tree-node-height); padding-block: var(--weave-tree-node-padding-y); padding-inline-end: var(--weave-tree-node-padding-x); padding-inline-start: calc(var(--weave-tree-node-padding-x) + var(--weave-tree-indent) * var(--weave-tree-depth, 0)); border-inline-start: var(--weave-tree-marker-width) solid transparent; color: var(--weave-tree-text); font-size: var(--weave-tree-font-size); line-height: var(--weave-tree-line-height); cursor: pointer; user-select: none; } .weave-tree__node:hover { background: var(--weave-tree-row-hover); } .weave-tree__node:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } /* ── selection (native ARIA attr, no state class) ── */ .weave-tree__node[aria-selected=true] { background: var(--weave-tree-selected-background); border-inline-start-color: var(--weave-tree-selected-marker); } /* ── disclosure marker ── */ .weave-tree__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--weave-tree-toggle-size); height: var(--weave-tree-toggle-size); color: var(--weave-tree-toggle); font-size: var(--weave-tree-toggle-glyph); } .weave-tree__toggle::before { content: "▸"; display: inline-block; transition: transform var(--weave-tree-duration) ease; } .weave-tree__toggle--leaf::before { content: ""; } .weave-tree__node[aria-expanded=true] .weave-tree__toggle::before { transform: rotate(90deg); } .weave-tree__content { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .weave-tree__drag-handle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--weave-tree-drag-handle-size); color: var(--weave-tree-drag-handle); cursor: grab; touch-action: none; user-select: none; } .weave-tree__drag-handle:active { cursor: grabbing; } .weave-datepicker { display: block; } .weave-datepicker__field { border: 0; border-bottom: var(--weave-datepicker-border-width) solid var(--weave-datepicker-border); background: transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .weave-datepicker__field:focus, .weave-datepicker__field:focus-within { outline: none; border-bottom-color: var(--weave-datepicker-focus); box-shadow: inset 0 -1px 0 var(--weave-datepicker-focus); } .weave-datepicker__field { display: flex; align-items: center; gap: var(--weave-datepicker-gap); padding: var(--weave-datepicker-field-padding-y) 0; color: var(--weave-datepicker-text); font-size: var(--weave-datepicker-font-size); font-weight: var(--weave-datepicker-weight); line-height: 1.4; cursor: pointer; } .weave-datepicker__value--placeholder { color: var(--weave-datepicker-placeholder); } .weave-datepicker__input { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; flex: 1 1 auto; min-width: 0; padding: 0; color: var(--weave-datepicker-text); } .weave-datepicker__input::placeholder { color: var(--weave-datepicker-placeholder); } .weave-datepicker__icon-button { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; } .weave-datepicker__icon-button:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-datepicker__spacer { flex: 1 1 auto; } .weave-datepicker__clear { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--weave-datepicker-placeholder); cursor: pointer; } .weave-datepicker__clear:hover { color: var(--weave-datepicker-text); } .weave-datepicker__icon { position: relative; flex: 0 0 auto; width: var(--weave-datepicker-icon-size); height: var(--weave-datepicker-icon-size); border: 1.5px solid var(--weave-datepicker-icon); border-radius: 2px; } .weave-datepicker__icon::before { content: ""; position: absolute; inset: -1.5px -1.5px auto -1.5px; height: 3px; background: var(--weave-datepicker-icon); border-radius: 2px 2px 0 0; } .weave-datepicker--disabled .weave-datepicker__field { color: var(--weave-datepicker-disabled-text); cursor: default; } .weave-datepicker--invalid .weave-datepicker__field { border-bottom-color: var(--weave-datepicker-error); box-shadow: inset 0 -1px 0 0 var(--weave-datepicker-error); } /* ── calendar panel ── */ .weave-datepicker__panel { box-sizing: border-box; min-width: var(--weave-overlay-min-width); background: var(--weave-overlay-surface); color: var(--weave-overlay-text); border: 1px solid var(--weave-overlay-line); border-radius: var(--weave-overlay-radius); width: var(--weave-datepicker-panel-width); padding: var(--weave-datepicker-panel-padding); } .weave-datepicker__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .weave-datepicker__nav-button { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: var(--weave-datepicker-nav-size); height: var(--weave-datepicker-nav-size); border-radius: 50%; color: var(--weave-datepicker-nav); cursor: pointer; } .weave-datepicker__nav-button:hover { color: var(--weave-datepicker-nav-hover); background: var(--weave-datepicker-cell-hover); } .weave-datepicker__nav-button:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-datepicker__month-label { font-size: var(--weave-datepicker-month-label-size); font-weight: var(--weave-datepicker-month-label-weight); color: var(--weave-datepicker-text); } .weave-datepicker__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; } .weave-datepicker__weekday { display: flex; align-items: center; justify-content: center; height: var(--weave-datepicker-cell-size); color: var(--weave-datepicker-weekday); font-size: var(--weave-datepicker-weekday-size); font-weight: 400; } .weave-datepicker__row { display: grid; grid-template-columns: repeat(7, 1fr); } .weave-datepicker__cell { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: var(--weave-datepicker-cell-size); height: var(--weave-datepicker-cell-size); margin: 1px auto; border-radius: var(--weave-datepicker-cell-radius); color: var(--weave-datepicker-cell-text); font-size: var(--weave-datepicker-cell-size); cursor: pointer; } .weave-datepicker__cell--blank { cursor: default; } .weave-datepicker__cell:not(:disabled):not(.weave-datepicker__cell--selected):hover { background: var(--weave-datepicker-cell-hover); } .weave-datepicker__cell:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: -1px; } .weave-datepicker__cell--today { box-shadow: inset 0 0 0 1px var(--weave-datepicker-today-ring); } .weave-datepicker__cell--selected { background: var(--weave-datepicker-selected-background); color: var(--weave-datepicker-selected-text); box-shadow: none; } .weave-datepicker__cell--disabled { color: var(--weave-datepicker-disabled-text); cursor: default; } .weave-timepicker { display: block; } .weave-timepicker__field { border: 0; border-bottom: var(--weave-timepicker-border-width) solid var(--weave-timepicker-border); background: transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .weave-timepicker__field:focus, .weave-timepicker__field:focus-within { outline: none; border-bottom-color: var(--weave-timepicker-focus); box-shadow: inset 0 -1px 0 var(--weave-timepicker-focus); } .weave-timepicker__field { display: flex; align-items: center; gap: var(--weave-timepicker-gap); padding: var(--weave-timepicker-field-padding-y) 0; color: var(--weave-timepicker-text); font-size: var(--weave-timepicker-font-size); font-weight: var(--weave-timepicker-weight); line-height: 1.4; cursor: pointer; } .weave-timepicker__value--placeholder { color: var(--weave-timepicker-placeholder); } .weave-timepicker__spacer { flex: 1 1 auto; } .weave-timepicker__clear { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--weave-timepicker-placeholder); cursor: pointer; } .weave-timepicker__clear:hover { color: var(--weave-timepicker-text); } .weave-timepicker__icon { position: relative; flex: 0 0 auto; width: var(--weave-timepicker-icon-size); height: var(--weave-timepicker-icon-size); border: 1.5px solid var(--weave-timepicker-icon); border-radius: 50%; } .weave-timepicker__icon::before { content: ""; position: absolute; left: 50%; top: 25%; width: 1.5px; height: 30%; background: var(--weave-timepicker-icon); transform: translateX(-50%); } .weave-timepicker--disabled .weave-timepicker__field { color: var(--weave-timepicker-disabled-text); cursor: default; } .weave-timepicker--invalid .weave-timepicker__field { border-bottom-color: var(--weave-timepicker-error); box-shadow: inset 0 -1px 0 0 var(--weave-timepicker-error); } /* ── spinner panel ── */ .weave-timepicker__panel { box-sizing: border-box; min-width: var(--weave-overlay-min-width); background: var(--weave-overlay-surface); color: var(--weave-overlay-text); border: 1px solid var(--weave-overlay-line); border-radius: var(--weave-overlay-radius); display: flex; align-items: center; gap: var(--weave-timepicker-col-gap); padding: var(--weave-timepicker-panel-padding); } .weave-timepicker__col { display: flex; flex-direction: column; align-items: center; width: var(--weave-timepicker-col-width); } .weave-timepicker__col:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-timepicker__col-value { padding: 2px 0; color: var(--weave-timepicker-text); font-size: var(--weave-timepicker-value-size); font-weight: var(--weave-timepicker-value-weight); font-variant-numeric: tabular-nums; } .weave-timepicker__spin { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: var(--weave-timepicker-spin-size); height: var(--weave-timepicker-spin-size); color: var(--weave-timepicker-spin); font-size: var(--weave-timepicker-spin-glyph-size); cursor: pointer; } .weave-timepicker__spin:hover { color: var(--weave-timepicker-spin-hover); } .weave-timepicker__colon { color: var(--weave-timepicker-colon); font-size: var(--weave-timepicker-colon-size); font-weight: var(--weave-timepicker-value-weight); } .weave-timepicker__ampm { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; margin-inline-start: var(--weave-timepicker-col-gap); padding: var(--weave-timepicker-ampm-padding-y) var(--weave-timepicker-ampm-padding-x); border: 1px solid var(--weave-timepicker-ampm-border); border-radius: var(--weave-timepicker-radius); color: var(--weave-timepicker-ampm-text); font-size: var(--weave-timepicker-ampm-size); font-weight: var(--weave-timepicker-ampm-weight); cursor: pointer; } .weave-timepicker__ampm:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-menubar { display: flex; align-items: center; gap: var(--weave-menubar-gap); } .weave-menubar__item { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; padding: var(--weave-menubar-item-padding-y) var(--weave-menubar-item-padding-x); border-radius: var(--weave-menubar-radius); color: var(--weave-menubar-text); font-size: var(--weave-menubar-font-size); font-weight: var(--weave-menubar-weight); cursor: pointer; transition: background var(--weave-menubar-duration) ease; } .weave-menubar__item:not([aria-disabled=true]):hover { background: var(--weave-menubar-item-hover); } .weave-menubar__item[aria-expanded=true] { background: var(--weave-menubar-item-open); } .weave-menubar__item[aria-disabled=true] { color: var(--weave-menubar-disabled-text); cursor: default; } .weave-menubar__item:focus-visible { outline: 2px solid var(--weave-color-accent); outline-offset: 1px; } .weave-popover-edit { box-sizing: border-box; min-width: var(--weave-overlay-min-width); background: var(--weave-overlay-surface); color: var(--weave-overlay-text); border: 1px solid var(--weave-overlay-line); border-radius: var(--weave-overlay-radius); min-width: var(--weave-popover-edit-min-width); padding: var(--weave-popover-edit-padding); } .weave-popover-edit__input { appearance: none; background: transparent; border: 0; outline: none; font: inherit; color: inherit; border: 0; border-bottom: var(--weave-popover-edit-border-width) solid var(--weave-popover-edit-border); background: transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .weave-popover-edit__input:focus, .weave-popover-edit__input:focus-within { outline: none; border-bottom-color: var(--weave-popover-edit-focus); box-shadow: inset 0 -1px 0 var(--weave-popover-edit-focus); } .weave-popover-edit__input { display: block; width: 100%; padding: var(--weave-popover-edit-field-padding-y) 0; color: var(--weave-popover-edit-text); font-size: var(--weave-popover-edit-font-size); } .weave-popover-edit__input::placeholder { color: var(--weave-popover-edit-placeholder); } @media (prefers-reduced-motion: reduce) { [class^=weave-], [class^=weave-]::before, [class^=weave-]::after, [class*=" weave-"], [class*=" weave-"]::before, [class*=" weave-"]::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } :root { --weave-color-canvas: var(--bg); --weave-color-surface: var(--surface); --weave-color-ink: var(--fg); --weave-color-sub: var(--muted); --weave-color-line: var(--border); --weave-color-field: var(--bg-soft); --weave-color-accent: var(--accent); --weave-color-paid: var(--green); --weave-color-error: var(--red); --weave-color-neutral: var(--muted); --weave-text-base: 13px; --weave-text-label: 10px; --weave-text-display: 34px; --weave-shape-radius: 4px; --weave-motion-fast: 0.15s; --weave-motion-sheet: 0.26s; --weave-motion-ripple: 0.55s; --weave-divider-line: var(--weave-color-line); --weave-divider-thickness: 1px; --weave-divider-height: 16px; --weave-ripple-opacity: 0.22; --weave-ripple-duration: var(--weave-motion-ripple); --weave-ripple-scale: 4; --weave-icon-size: 18px; --weave-icon-stroke: 1.4; --weave-button-background: var(--weave-color-ink); --weave-button-text: var(--weave-color-canvas); --weave-button-border: var(--weave-color-ink); --weave-button-accent: var(--weave-color-accent); --weave-button-ghost-text: var(--weave-color-sub); --weave-button-ghost-text-hover: var(--weave-color-ink); --weave-button-icon-hover: color-mix(in srgb, currentColor 8%, transparent); --weave-button-disabled-background: var(--weave-color-field); --weave-button-disabled-text: var(--weave-color-sub); --weave-button-radius: var(--weave-shape-radius); --weave-button-padding-x: 18px; --weave-button-padding-y: 9px; --weave-button-gap: 8px; --weave-button-icon-size: 34px; --weave-button-mark-width: 2px; --weave-button-hover-opacity: 0.85; --weave-button-duration: var(--weave-motion-fast); --weave-button-font-size: 13px; --weave-button-weight: 600; --weave-button-toggle-border: var(--weave-color-line); --weave-button-toggle-text: var(--weave-color-ink); --weave-button-toggle-hover: var(--weave-color-field); --weave-button-toggle-selected-background: var(--weave-color-ink); --weave-button-toggle-selected-text: var(--weave-color-canvas); --weave-button-toggle-disabled-text: var(--weave-color-sub); --weave-button-toggle-radius: var(--weave-shape-radius); --weave-button-toggle-padding-x: 12px; --weave-button-toggle-padding-y: 7px; --weave-button-toggle-icon-gap: 6px; --weave-button-toggle-duration: var(--weave-motion-fast); --weave-button-toggle-font-size: 13px; --weave-button-toggle-weight: 600; --weave-badge-background: var(--weave-color-accent); --weave-badge-text: #ffffff; --weave-badge-dot: var(--weave-color-error); --weave-badge-tag-border: var(--weave-color-line); --weave-badge-tag-text: var(--weave-color-sub); --weave-badge-min-size: 15px; --weave-badge-dot-size: 6px; --weave-badge-padding-x: 5px; --weave-badge-radius: 999px; --weave-badge-font-size: 10px; --weave-badge-tag-radius: var(--weave-shape-radius); --weave-badge-tag-padding-x: 6px; --weave-badge-tag-padding-y: 2px; --weave-badge-tag-font-size: 10px; --weave-badge-weight: 600; --weave-card-background: var(--weave-color-surface); --weave-card-border: var(--weave-color-line); --weave-card-hover: var(--weave-color-field); --weave-card-title-text: var(--weave-color-ink); --weave-card-body-text: var(--weave-color-ink); --weave-card-meta-text: var(--weave-color-sub); --weave-card-radius: var(--weave-shape-radius); --weave-card-padding: 16px; --weave-card-gap: 10px; --weave-card-actions-gap: 8px; --weave-card-duration: var(--weave-motion-fast); --weave-card-title-size: 15px; --weave-card-title-weight: 600; --weave-card-body-size: 13px; --weave-card-body-line-height: 1.5; --weave-toolbar-background: var(--weave-color-surface); --weave-toolbar-border: var(--weave-color-line); --weave-toolbar-text: var(--weave-color-ink); --weave-toolbar-ink-background: var(--weave-color-ink); --weave-toolbar-ink-text: var(--weave-color-canvas); --weave-toolbar-height: 52px; --weave-toolbar-padding-x: 16px; --weave-toolbar-gap: 12px; --weave-list-text: var(--weave-color-ink); --weave-list-meta: var(--weave-color-sub); --weave-list-hover: var(--weave-color-field); --weave-list-divider: var(--weave-color-line); --weave-list-selected-background: color-mix(in srgb, var(--weave-color-accent) 12%, transparent); --weave-list-selected-marker: var(--weave-color-accent); --weave-list-disabled-text: var(--weave-color-sub); --weave-list-drag-handle: var(--weave-color-sub); --weave-list-row-height: 34px; --weave-list-padding-x: 12px; --weave-list-padding-y: 7px; --weave-list-marker-width: 2px; --weave-list-drag-handle-size: 16px; --weave-list-duration: var(--weave-motion-fast); --weave-list-font-size: 13px; --weave-list-meta-font-size: 11px; --weave-list-weight: 500; --weave-list-line-height: 1.3; --weave-grid-list-border: var(--weave-color-line); --weave-grid-list-tile-background: var(--weave-color-surface); --weave-grid-list-tile-text: var(--weave-color-ink); --weave-grid-list-accent-background: var(--weave-color-accent); --weave-grid-list-accent-text: var(--weave-color-canvas); --weave-grid-list-min-tile: 96px; --weave-grid-list-gap: 1px; --weave-grid-list-radius: var(--weave-shape-radius); --weave-progress-bar-track: var(--weave-color-field); --weave-progress-bar-fill: var(--weave-color-accent); --weave-progress-bar-height: 4px; --weave-progress-bar-radius: 2px; --weave-progress-bar-duration: var(--weave-motion-fast); --weave-progress-bar-segment: 40%; --weave-progress-bar-indet-duration: 1.4s; --weave-progress-spinner-track: var(--weave-color-field); --weave-progress-spinner-indicator: var(--weave-color-accent); --weave-progress-spinner-diameter: 26px; --weave-progress-spinner-diameter-small: 18px; --weave-progress-spinner-thickness: 2px; --weave-progress-spinner-duration: 0.8s; --weave-checkbox-border: var(--weave-color-line); --weave-checkbox-background: transparent; --weave-checkbox-checked-background: var(--weave-color-accent); --weave-checkbox-mark: #fff; --weave-checkbox-label-text: var(--weave-color-ink); --weave-checkbox-disabled-text: var(--weave-color-sub); --weave-checkbox-size: 20px; --weave-checkbox-radius: 3px; --weave-checkbox-border-width: 1.5px; --weave-checkbox-gap: 8px; --weave-checkbox-duration: var(--weave-motion-fast); --weave-checkbox-label-size: 13px; --weave-radio-border: var(--weave-color-line); --weave-radio-background: transparent; --weave-radio-checked-border: var(--weave-color-accent); --weave-radio-dot: var(--weave-color-accent); --weave-radio-label-text: var(--weave-color-ink); --weave-radio-disabled-text: var(--weave-color-sub); --weave-radio-size: 20px; --weave-radio-border-width: 1.5px; --weave-radio-dot-size: 8px; --weave-radio-gap: 8px; --weave-radio-group-gap: 12px; --weave-radio-duration: var(--weave-motion-fast); --weave-radio-label-size: 13px; --weave-slide-toggle-track-off: var(--weave-color-field); --weave-slide-toggle-track-on: var(--weave-color-accent); --weave-slide-toggle-knob-off: var(--weave-color-ink); --weave-slide-toggle-knob-on: #fff; --weave-slide-toggle-label-text: var(--weave-color-ink); --weave-slide-toggle-disabled-text: var(--weave-color-sub); --weave-slide-toggle-track-width: 42px; --weave-slide-toggle-track-height: 24px; --weave-slide-toggle-knob-size: 18px; --weave-slide-toggle-knob-inset: 3px; --weave-slide-toggle-radius: 3px; --weave-slide-toggle-knob-radius: 2px; --weave-slide-toggle-gap: 8px; --weave-slide-toggle-duration: 0.16s; --weave-form-field-label: var(--weave-color-sub); --weave-form-field-hint: var(--weave-color-sub); --weave-form-field-error: var(--weave-color-error); --weave-form-field-gap: 6px; --weave-form-field-label-size: 10px; --weave-form-field-message-size: 11px; --weave-form-field-label-weight: 600; --weave-form-field-label-tracking: 0.14em; --weave-input-border: var(--weave-color-line); --weave-input-focus: var(--weave-color-accent); --weave-input-error: var(--weave-color-error); --weave-input-text: var(--weave-color-ink); --weave-input-placeholder: var(--weave-color-sub); --weave-input-adornment: var(--weave-color-sub); --weave-input-padding-y: 6px; --weave-input-gap: 8px; --weave-input-border-width: 1.5px; --weave-input-clear-size: 15px; --weave-input-font-size: 13px; --weave-input-duration: var(--weave-motion-fast); --weave-chips-border: var(--weave-color-line); --weave-chips-text: var(--weave-color-ink); --weave-chips-hover: var(--weave-color-field); --weave-chips-remove: var(--weave-color-sub); --weave-chips-add-text: var(--weave-color-sub); --weave-chips-radius: 3px; --weave-chips-padding-x: 10px; --weave-chips-padding-y: 4px; --weave-chips-gap: 8px; --weave-chips-chip-gap: 6px; --weave-chips-add-gap: 4px; --weave-chips-remove-size: 16px; --weave-chips-remove-nudge: -4px; --weave-chips-duration: var(--weave-motion-fast); --weave-chips-font-size: 12px; --weave-chips-line-height: 1.4; --weave-chips-remove-font-size: 14px; --weave-overlay-surface: var(--weave-color-surface); --weave-overlay-text: var(--weave-color-ink); --weave-overlay-line: var(--weave-color-line); --weave-overlay-backdrop: rgba(20, 22, 28, 0.32); --weave-overlay-radius: var(--weave-shape-radius); --weave-overlay-min-width: 180px; --weave-overlay-padding-y: 4px; --weave-overlay-duration: var(--weave-motion-fast); --weave-tooltip-background: var(--weave-color-ink); --weave-tooltip-text: var(--weave-color-surface); --weave-tooltip-padding-x: 8px; --weave-tooltip-padding-y: 4px; --weave-tooltip-radius: var(--weave-shape-radius); --weave-tooltip-max-width: 240px; --weave-tooltip-duration: var(--weave-motion-fast); --weave-tooltip-font-size: 11px; --weave-tooltip-weight: 500; --weave-tooltip-line-height: 1.4; --weave-menu-item-text: var(--weave-color-ink); --weave-menu-item-hover: var(--weave-color-field); --weave-menu-item-disabled: var(--weave-color-sub); --weave-menu-item-description: var(--weave-color-sub); --weave-menu-divider: var(--weave-color-line); --weave-menu-min-width: 180px; --weave-menu-padding-y: 4px; --weave-menu-item-height: 32px; --weave-menu-item-padding-x: 12px; --weave-menu-item-padding-y: 5px; --weave-menu-item-gap: 1px; --weave-menu-divider-height: 1px; --weave-menu-duration: var(--weave-motion-fast); --weave-menu-font-size: 13px; --weave-menu-weight: 500; --weave-menu-description-size: 11px; --weave-menu-description-weight: 400; --weave-menu-description-line-height: 1.3; --weave-dialog-surface: var(--weave-color-surface); --weave-dialog-text: var(--weave-color-ink); --weave-dialog-line: var(--weave-color-line); --weave-dialog-width: 560px; --weave-dialog-min-width: 320px; --weave-dialog-margin: 16px; --weave-dialog-radius: var(--weave-shape-radius); --weave-dialog-padding: 20px; --weave-dialog-actions-gap: 8px; --weave-dialog-title-size: 15px; --weave-dialog-title-weight: 600; --weave-dialog-title-line-height: 1.3; --weave-dialog-content-line-height: 1.5; --weave-bottom-sheet-surface: var(--weave-color-surface); --weave-bottom-sheet-text: var(--weave-color-ink); --weave-bottom-sheet-line: var(--weave-color-line); --weave-bottom-sheet-handle: var(--weave-color-line); --weave-bottom-sheet-handle-width: 36px; --weave-bottom-sheet-handle-height: 4px; --weave-bottom-sheet-handle-top: 8px; --weave-bottom-sheet-max-height: 72vh; --weave-bottom-sheet-max-width: 640px; --weave-bottom-sheet-radius: var(--weave-shape-radius); --weave-bottom-sheet-padding: 20px; --weave-bottom-sheet-actions-gap: 8px; --weave-bottom-sheet-duration: var(--weave-motion-sheet); --weave-bottom-sheet-title-size: 15px; --weave-bottom-sheet-title-weight: 600; --weave-bottom-sheet-title-line-height: 1.3; --weave-bottom-sheet-content-line-height: 1.5; --weave-snackbar-background: var(--weave-color-ink); --weave-snackbar-text: var(--weave-color-surface); --weave-snackbar-action: var(--weave-color-accent); --weave-snackbar-offset: 24px; --weave-snackbar-max-width: 480px; --weave-snackbar-radius: var(--weave-shape-radius); --weave-snackbar-padding-y: 12px; --weave-snackbar-padding-x: 16px; --weave-snackbar-gap: 12px; --weave-snackbar-duration: var(--weave-motion-fast); --weave-snackbar-font-size: 13px; --weave-snackbar-weight: 500; --weave-snackbar-line-height: 1.4; --weave-snackbar-action-weight: 600; --weave-select-text: var(--weave-color-ink); --weave-select-placeholder: var(--weave-color-sub); --weave-select-border: var(--weave-color-line); --weave-select-focus: var(--weave-color-accent); --weave-select-error: var(--weave-color-error); --weave-select-chevron: var(--weave-color-sub); --weave-select-disabled-text: var(--weave-color-sub); --weave-select-option-hover: var(--weave-color-field); --weave-select-option-selected: color-mix(in srgb, var(--weave-color-accent) 12%, transparent); --weave-select-option-mark: var(--weave-color-accent); --weave-select-description: var(--weave-color-sub); --weave-select-gap: 8px; --weave-select-field-padding-y: 6px; --weave-select-border-width: 1.5px; --weave-select-radius: var(--weave-shape-radius); --weave-select-panel-max-height: 280px; --weave-select-option-min-height: 32px; --weave-select-option-padding-x: 12px; --weave-select-duration: var(--weave-motion-fast); --weave-select-font-size: 13px; --weave-select-description-size: 11px; --weave-select-weight: 500; --weave-autocomplete-text: var(--weave-color-ink); --weave-autocomplete-option-hover: var(--weave-color-field); --weave-autocomplete-description: var(--weave-color-sub); --weave-autocomplete-panel-max-height: 280px; --weave-autocomplete-panel-padding-y: 4px; --weave-autocomplete-option-min-height: 32px; --weave-autocomplete-option-padding-x: 12px; --weave-autocomplete-option-padding-y: 5px; --weave-autocomplete-option-gap: 1px; --weave-autocomplete-empty-padding-y: 8px; --weave-autocomplete-duration: var(--weave-motion-fast); --weave-autocomplete-font-size: 13px; --weave-autocomplete-description-size: 11px; --weave-autocomplete-description-weight: 400; --weave-autocomplete-description-line-height: 1.3; --weave-expansion-text: var(--weave-color-ink); --weave-expansion-marker: var(--weave-color-sub); --weave-expansion-divider: var(--weave-color-line); --weave-expansion-header-open-background: var(--weave-color-field); --weave-expansion-header-hover-background: color-mix(in srgb, var(--weave-color-field) 55%, transparent); --weave-expansion-disabled-text: var(--weave-color-sub); --weave-expansion-radius: var(--weave-shape-radius); --weave-expansion-header-height: 44px; --weave-expansion-header-gap: 12px; --weave-expansion-padding-x: 14px; --weave-expansion-padding-y: 10px; --weave-expansion-body-padding-x: 14px; --weave-expansion-body-padding-y: 12px; --weave-expansion-marker-width: 16px; --weave-expansion-duration: var(--weave-motion-fast); --weave-expansion-header-size: 13px; --weave-expansion-header-weight: 600; --weave-expansion-body-size: 13px; --weave-expansion-marker-weight: 400; --weave-tabs-text: var(--weave-color-sub); --weave-tabs-text-active: var(--weave-color-ink); --weave-tabs-marker: var(--weave-color-accent); --weave-tabs-line: var(--weave-color-line); --weave-tabs-disabled-text: var(--weave-color-sub); --weave-tabs-panel-text: var(--weave-color-ink); --weave-tabs-tab-padding-x: 14px; --weave-tabs-tab-padding-y: 10px; --weave-tabs-marker-size: 5px; --weave-tabs-gap: 7px; --weave-tabs-panel-padding-y: 14px; --weave-tabs-duration: var(--weave-motion-fast); --weave-tabs-tab-size: 13px; --weave-tabs-tab-weight: 500; --weave-tabs-panel-size: 13px; --weave-stepper-active-background: var(--weave-color-accent); --weave-stepper-done-background: var(--weave-color-accent); --weave-stepper-on-accent: #fff; --weave-stepper-upcoming-border: var(--weave-color-line); --weave-stepper-upcoming-text: var(--weave-color-sub); --weave-stepper-label: var(--weave-color-ink); --weave-stepper-label-upcoming: var(--weave-color-sub); --weave-stepper-optional: var(--weave-color-sub); --weave-stepper-connector: var(--weave-color-line); --weave-stepper-connector-done: var(--weave-color-accent); --weave-stepper-indicator-size: 26px; --weave-stepper-gap: 10px; --weave-stepper-step-padding-x: 2px; --weave-stepper-step-padding-y: 4px; --weave-stepper-connector-min: 24px; --weave-stepper-connector-height: 1px; --weave-stepper-connector-gap: 6px; --weave-stepper-border-width: 1.5px; --weave-stepper-radius: var(--weave-shape-radius); --weave-stepper-check-width: 5px; --weave-stepper-check-height: 9px; --weave-stepper-optional-gap: 6px; --weave-stepper-panel-padding-y: 16px; --weave-stepper-actions-gap: 8px; --weave-stepper-actions-margin: 8px; --weave-stepper-duration: var(--weave-motion-fast); --weave-stepper-label-size: 13px; --weave-stepper-label-weight: 500; --weave-stepper-number-size: 12px; --weave-stepper-optional-size: 10px; --weave-slider-track: var(--weave-color-field); --weave-slider-fill: var(--weave-color-accent); --weave-slider-thumb: var(--weave-color-ink); --weave-slider-cap: var(--weave-color-accent); --weave-slider-error: var(--weave-color-error); --weave-slider-height: 18px; --weave-slider-track-height: 2px; --weave-slider-thumb-width: 3px; --weave-slider-thumb-height: 18px; --weave-slider-cap-size: 5px; --weave-slider-duration: var(--weave-motion-fast); --weave-paginator-text: var(--weave-color-sub); --weave-paginator-range: var(--weave-color-sub); --weave-paginator-disabled-text: var(--weave-color-sub); --weave-paginator-button: 28px; --weave-paginator-button-padding-x: 6px; --weave-paginator-gap: 2px; --weave-paginator-section-gap: 16px; --weave-paginator-jump-gap: 6px; --weave-paginator-jump-width: 56px; --weave-paginator-size-width: 116px; --weave-paginator-disabled-opacity: 0.6; --weave-paginator-font-size: 13px; --weave-paginator-weight: 500; --weave-paginator-range-size: 12px; --weave-paginator-nav-glyph-size: 16px; --weave-sidenav-drawer-background: var(--weave-color-surface); --weave-sidenav-drawer-line: var(--weave-color-line); --weave-sidenav-backdrop: var(--weave-overlay-backdrop); --weave-sidenav-width: 230px; --weave-sidenav-duration: var(--weave-motion-sheet); --weave-sidenav-backdrop-z: 1; --weave-sidenav-drawer-z: 2; --weave-table-surface: var(--weave-color-surface); --weave-table-text: var(--weave-color-ink); --weave-table-header-text: var(--weave-color-sub); --weave-table-header-active: var(--weave-color-ink); --weave-table-line: var(--weave-color-line); --weave-table-row-hover: var(--weave-color-field); --weave-table-selected-background: color-mix(in srgb, var(--weave-color-accent) 12%, transparent); --weave-table-selected-marker: var(--weave-color-accent); --weave-table-sort-arrow: var(--weave-color-accent); --weave-table-resize-grip: var(--weave-color-line); --weave-table-resize-grip-active: var(--weave-color-accent); --weave-table-detail-background: var(--weave-color-field); --weave-table-empty-text: var(--weave-color-sub); --weave-table-row-height: 34px; --weave-table-cell-padding-x: 12px; --weave-table-cell-padding-y: 7px; --weave-table-marker-width: 2px; --weave-table-control-gap: 6px; --weave-table-expand-size: 20px; --weave-table-resize-grip-width: 9px; --weave-table-resize-grip-line: 2px; --weave-table-duration: var(--weave-motion-fast); --weave-table-font-size: 13px; --weave-table-header-size: 12px; --weave-table-header-weight: 600; --weave-table-line-height: 1.3; --weave-table-arrow-size: 12px; --weave-tree-text: var(--weave-color-ink); --weave-tree-toggle: var(--weave-color-sub); --weave-tree-line: var(--weave-color-line); --weave-tree-row-hover: var(--weave-color-field); --weave-tree-selected-background: color-mix(in srgb, var(--weave-color-accent) 12%, transparent); --weave-tree-selected-marker: var(--weave-color-accent); --weave-tree-drag-handle: var(--weave-color-sub); --weave-tree-node-height: 34px; --weave-tree-drag-handle-size: 16px; --weave-tree-node-padding-x: 10px; --weave-tree-node-padding-y: 6px; --weave-tree-indent: 18px; --weave-tree-toggle-size: 20px; --weave-tree-gap: 4px; --weave-tree-marker-width: 2px; --weave-tree-duration: var(--weave-motion-fast); --weave-tree-font-size: 14px; --weave-tree-line-height: 1.3; --weave-tree-toggle-glyph: 12px; --weave-datepicker-text: var(--weave-color-ink); --weave-datepicker-placeholder: var(--weave-color-sub); --weave-datepicker-border: var(--weave-color-line); --weave-datepicker-focus: var(--weave-color-accent); --weave-datepicker-error: var(--weave-color-error); --weave-datepicker-icon: var(--weave-color-sub); --weave-datepicker-disabled-text: var(--weave-color-sub); --weave-datepicker-nav: var(--weave-color-sub); --weave-datepicker-nav-hover: var(--weave-color-ink); --weave-datepicker-weekday: var(--weave-color-sub); --weave-datepicker-cell-text: var(--weave-color-ink); --weave-datepicker-cell-hover: var(--weave-color-field); --weave-datepicker-selected-background: var(--weave-color-accent); --weave-datepicker-selected-text: var(--weave-color-surface); --weave-datepicker-today-ring: var(--weave-color-accent); --weave-datepicker-gap: 8px; --weave-datepicker-field-padding-y: 6px; --weave-datepicker-border-width: 1.5px; --weave-datepicker-radius: var(--weave-shape-radius); --weave-datepicker-icon-size: 14px; --weave-datepicker-panel-width: 236px; --weave-datepicker-panel-padding: 10px; --weave-datepicker-cell-size: 12px; --weave-datepicker-cell-radius: var(--weave-shape-radius); --weave-datepicker-nav-size: 26px; --weave-datepicker-duration: var(--weave-motion-fast); --weave-datepicker-font-size: 13px; --weave-datepicker-weight: 500; --weave-datepicker-weekday-size: 11px; --weave-datepicker-month-label-size: 13px; --weave-datepicker-month-label-weight: 600; --weave-timepicker-text: var(--weave-color-ink); --weave-timepicker-placeholder: var(--weave-color-sub); --weave-timepicker-border: var(--weave-color-line); --weave-timepicker-focus: var(--weave-color-accent); --weave-timepicker-error: var(--weave-color-error); --weave-timepicker-icon: var(--weave-color-sub); --weave-timepicker-disabled-text: var(--weave-color-sub); --weave-timepicker-spin: var(--weave-color-sub); --weave-timepicker-spin-hover: var(--weave-color-accent); --weave-timepicker-colon: var(--weave-color-sub); --weave-timepicker-ampm-border: var(--weave-color-line); --weave-timepicker-ampm-text: var(--weave-color-ink); --weave-timepicker-gap: 8px; --weave-timepicker-field-padding-y: 6px; --weave-timepicker-border-width: 1.5px; --weave-timepicker-radius: var(--weave-shape-radius); --weave-timepicker-icon-size: 14px; --weave-timepicker-panel-padding: 12px; --weave-timepicker-col-gap: 6px; --weave-timepicker-col-width: 42px; --weave-timepicker-spin-size: 22px; --weave-timepicker-ampm-padding-x: 10px; --weave-timepicker-ampm-padding-y: 6px; --weave-timepicker-duration: var(--weave-motion-fast); --weave-timepicker-font-size: 13px; --weave-timepicker-weight: 500; --weave-timepicker-value-size: 20px; --weave-timepicker-value-weight: 600; --weave-timepicker-colon-size: 20px; --weave-timepicker-spin-glyph-size: 10px; --weave-timepicker-ampm-size: 12px; --weave-timepicker-ampm-weight: 600; --weave-menubar-text: var(--weave-color-ink); --weave-menubar-item-hover: var(--weave-color-field); --weave-menubar-item-open: var(--weave-color-field); --weave-menubar-disabled-text: var(--weave-color-sub); --weave-menubar-gap: 2px; --weave-menubar-item-padding-x: 10px; --weave-menubar-item-padding-y: 6px; --weave-menubar-radius: var(--weave-shape-radius); --weave-menubar-duration: var(--weave-motion-fast); --weave-menubar-font-size: 13px; --weave-menubar-weight: 500; --weave-popover-edit-text: var(--weave-color-ink); --weave-popover-edit-placeholder: var(--weave-color-sub); --weave-popover-edit-border: var(--weave-color-line); --weave-popover-edit-focus: var(--weave-color-accent); --weave-popover-edit-padding: 8px; --weave-popover-edit-min-width: 160px; --weave-popover-edit-field-padding-y: 4px; --weave-popover-edit-border-width: 1.5px; --weave-popover-edit-font-size: 13px; } /* ── Top bar: ── */ .weave-toolbar.topbar { gap: 14px; padding: 0 20px; z-index: 20; --weave-icon-size: 24px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); } .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 700; font-size: 17px; } .brand:hover { text-decoration: none; } .sections { margin-left: 4px; overflow: visible; --weave-button-toggle-border: transparent; --weave-button-toggle-hover: color-mix(in srgb, currentColor 8%, transparent); --weave-button-toggle-text: var(--fg-soft); --weave-button-toggle-selected-background: transparent; --weave-button-toggle-selected-text: var(--accent); } .sections .weave-button-toggle__segment { border-radius: 8px; } /* ── Layout: — full width; the hamburger stays visible so the drawer can be collapsed/expanded on every screen size (side mode toggles too). ── */ .weave-sidenav.layout { --weave-sidenav-width: 256px; --weave-sidenav-drawer-background: transparent; height: calc(100vh - var(--weave-toolbar-height, 52px)); } .sidebar { padding: 16px 12px; } .sidebar-nav.weave-expansion { border: 0; border-radius: 0; overflow: visible; --weave-expansion-header-open-background: color-mix(in srgb, var(--fg) 6%, transparent); --weave-expansion-header-hover-background: var(--surface); --weave-expansion-marker: var(--muted); } .sidebar-nav .weave-expansion__panel + .weave-expansion__panel { border-top: 0; } .sidebar-nav .weave-expansion__header { min-height: 0; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); border-radius: 7px; } .sidebar-nav .weave-expansion__content { padding: 0 0 6px; } .nav-link { display: block; padding: 6px 10px; border-radius: 7px; color: var(--fg-soft); font-size: 14px; } .nav-link:hover { color: var(--fg); background: var(--surface); text-decoration: none; } .nav-link.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; } .content { padding: 36px 48px 96px; } @media (max-width: 900px) { .content { padding: 28px 22px 80px; } } /* ── Overrides for @weave-framework/ui roots the docs primitives compose ── These target elements rendered by child UI components (/