/* DMWorks tokens v4 — generated by build.mjs, edit tokens/tokens.json */

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-raised: #111111;
  --fill: #1c1c1c;
  --line: #2a2a2a;
  --ink: #f2f2f2;
  --ink-2: #e4e4e4;
  --muted: #8a8a8a;
  --primary: var(--ink);
  --on-primary: #000000;
  --danger: #e5484d;
  --success: #33d17a;
  --warning: #a0a0a0;
  --create: #f5c400;
  --overlay: rgba(0,0,0,.75);
  --obj-blue: #4c8dff;
  --obj-green: #3ccf7a;
  --obj-yellow: #f5c400;
  --obj-orange: #ffa05c;
  --obj-pink: #ff6fae;
  --obj-purple: #a98bff;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f2;
  --bg-raised: #ffffff;
  --fill: #e2e2e2;
  --line: #d0d0d0;
  --ink: #000000;
  --ink-2: #1b1b1b;
  --muted: #6a6a6a;
  --primary: var(--ink);
  --on-primary: #f2f2f2;
  --danger: #c62a2f;
  --success: #137a46;
  --warning: #5a5a5a;
  --create: #8a6a00;
  --overlay: rgba(0,0,0,.4);
  --obj-blue: #1f5fd6;
  --obj-green: #14864a;
  --obj-yellow: #8a6a00;
  --obj-orange: #b8620f;
  --obj-pink: #c2306f;
  --obj-purple: #6a45d1;
}

[data-theme="pro"] {
  color-scheme: dark;
  --bg: #0f0f0f;
  --bg-raised: #171717;
  --fill: #202020;
  --line: #2a2a2a;
  --ink: #ececec;
  --ink-2: #dcdcdc;
  --muted: #8f8f8f;
  --primary: var(--ink);
  --on-primary: #0f0f0f;
  --danger: #e5484d;
  --success: #33d17a;
  --warning: #a0a0a0;
  --create: #f5c400;
  --overlay: rgba(0,0,0,.6);
  --obj-blue: #4c8dff;
  --obj-green: #3ccf7a;
  --obj-yellow: #f5c400;
  --obj-orange: #ffa05c;
  --obj-pink: #ff6fae;
  --obj-purple: #a98bff;
}

/* Product option: warnings in yellow, for products without yellow actions (DMWorks Net). */
[data-warning="yellow"] { --warning: var(--create); }

:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --radius-box: 2px;
  --radius-thumb: 8px;
  --radius-icon: 12px;
  --radius-menu: 16px;
  --radius-float: 24px;
  --radius-pill: 999px;
  --button-l: 56px;
  --button-m: 48px;
  --button-s: 40px;
  --button-xs: 32px;
  --dock: 56px;
  --dock-float: 64px;
  --row: 72px;
  --row-short: 56px;
  --touch-min: 44px;
  --stroke-line: 1px;
  --stroke-box: 1.5px;
  --stroke-icon: 1.8px;
  --stroke-icon-selected: 2.6px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-long: 500ms;
  --ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-move: cubic-bezier(0.3, 0, 0.2, 1);
  --font-sans: "Instrument Sans", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text-display: 700 66px/56px var(--font-sans);
  --text-title: 700 40px/40px var(--font-sans);
  --text-headline: 700 28px/32px var(--font-sans);
  --text-title-s: 700 24px/28px var(--font-sans);
  --text-title-xs: 700 20px/24px var(--font-sans);
  --text-button: 500 17px/24px var(--font-sans);
  --text-row: 500 16px/20px var(--font-sans);
  --text-body: 400 15px/20px var(--font-sans);
  --text-small: 400 14px/20px var(--font-sans);
  --text-hint: 400 13px/20px var(--font-sans);
  --text-label: 500 12px/16px var(--font-sans);
  --text-caption: 400 12px/16px var(--font-sans);
  --text-code: 400 13px/20px var(--font-mono);
}

/* components/core/components.css */
/* DMWorks components. Values come from tokens.css; this file only arranges them.
   States are classes so previews can show them side by side: .is-pressed, .is-selected, .is-loading, .is-error, [disabled]. */

.dm-root { font-family: var(--font-sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
.dm-icon { flex: none; width: 1em; height: 1em; display: block; }
:where(.dm-btn, .dm-icon-btn, .dm-toggle, .dm-check, .dm-seg button, .dm-chip, .dm-row, .dm-tab, .dm-dock a):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Buttons: pill, four heights, padding ≈ 0.4 × height. */
.dm-btn { --h: var(--button-l); --p: 24px; --fs: 17px; --ic: 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 var(--p); border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--primary); color: var(--on-primary); font: 500 var(--fs)/1 var(--font-sans); cursor: pointer; white-space: nowrap; box-sizing: border-box; }
.dm-btn .dm-icon { font-size: var(--ic); }
.dm-btn--m { --h: var(--button-m); --p: 20px; --fs: 15px; --ic: 18px; }
.dm-btn--s { --h: var(--button-s); --p: 16px; --fs: 14px; --ic: 16px; gap: 4px; }
.dm-btn--xs { --h: var(--button-xs); --p: 12px; --fs: 13px; --ic: 14px; gap: 4px; }
.dm-btn--block { display: flex; width: 100%; }
.dm-btn--line { background: none; border-color: var(--line); color: var(--ink); }
.dm-btn--danger { background: var(--danger); color: var(--on-primary); }
.dm-btn--create, .dm-btn--accent { background: none; border-color: var(--create); color: var(--create); }
.dm-btn--text { background: none; color: var(--ink); padding: 0 4px; text-decoration: underline; text-underline-offset: 3px; }
.dm-btn.is-pressed { filter: brightness(0.82); transform: scale(0.98); }
.dm-btn--line.is-pressed, .dm-btn--accent.is-pressed, .dm-btn--create.is-pressed { background: var(--fill); filter: none; }
.dm-btn[disabled] { opacity: 0.4; cursor: default; }
.dm-btn.is-loading { pointer-events: none; }
/* Spinner sits in the pill's rounded end, concentric with it. */
.dm-btn.is-loading:has(> .dm-spin:first-child) { padding-left: calc((var(--h) - var(--ic)) / 2); }
.dm-spin { width: var(--ic, 1.15em); height: var(--ic, 1.15em); flex: none; border-radius: 50%; border: 2.4px solid currentColor; border-right-color: transparent; opacity: 0.9; box-sizing: border-box; }

.dm-icon-btn { --s: var(--button-m); --ic: 18px; flex: none; width: var(--s); height: var(--s); padding: 0; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-sizing: border-box; }
.dm-icon-btn .dm-icon { font-size: var(--ic); }
.dm-icon-btn--l { --s: var(--button-l); --ic: 20px; }
.dm-icon-btn--s { --s: var(--button-s); --ic: 16px; }
.dm-icon-btn--xs { --s: var(--button-xs); --ic: 14px; }
.dm-icon-btn--fill { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dm-icon-btn.is-pressed { background: var(--fill); }
.dm-icon-btn[disabled] { opacity: 0.4; }

/* Selection controls. */
.dm-toggle { flex: none; width: 52px; height: 32px; padding: 3px; border-radius: 16px; border: 1px solid var(--line); background: none; display: flex; align-items: center; box-sizing: border-box; cursor: pointer; }
.dm-toggle::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); }
.dm-toggle.is-selected { background: var(--ink); border-color: var(--ink); justify-content: flex-end; }
.dm-toggle.is-selected::after { background: var(--on-primary); }
.dm-toggle[disabled] { opacity: 0.4; }

.dm-check { flex: none; width: 22px; height: 22px; border-radius: var(--radius-box); border: 1.5px solid var(--ink); background: none; display: grid; place-items: center; color: var(--on-primary); box-sizing: border-box; padding: 0; }
.dm-check .dm-icon { font-size: 14px; visibility: hidden; }
.dm-check.is-selected { background: var(--ink); }
.dm-check.is-selected .dm-icon { visibility: visible; }
.dm-check--radio { border-radius: 50%; }
.dm-check--radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); opacity: 0; }
.dm-check--radio.is-selected { background: none; }
.dm-check--radio.is-selected::after { opacity: 1; }
.dm-check[disabled] { opacity: 0.4; }
.dm-check.is-error { border-color: var(--danger); }

.dm-seg { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.dm-seg button { height: var(--button-m); padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: none; color: var(--ink); font: 400 15px/1 var(--font-sans); cursor: pointer; }
.dm-seg button.is-selected { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }

.dm-chip { display: inline-flex; align-items: center; gap: 8px; height: var(--button-xs); padding: 0 16px 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: none; color: var(--ink); font: 500 14px/1 var(--font-sans); white-space: nowrap; box-sizing: border-box; }
.dm-chip--filter { padding: 0 12px; cursor: pointer; }
.dm-chip--filter.is-selected { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
.dm-chip--attention { border-color: var(--create); color: var(--create); }
.dm-chip--attention .dm-chip__dot { background: var(--create); }
.dm-chip--ink { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
.dm-chip--ink .dm-chip__dot { background: var(--on-primary); }
.dm-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }

.dm-stepper { display: inline-flex; align-items: center; height: var(--button-m); padding: 0 4px; border-radius: var(--radius-pill); border: 1px solid var(--line); box-sizing: border-box; }
.dm-stepper button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 16px; }
.dm-stepper button[disabled] { opacity: 0.3; }
.dm-stepper output { width: 40px; text-align: center; font: 600 17px/1 var(--font-sans); font-variant-numeric: tabular-nums; }

/* Inputs. */
.dm-field { display: flex; flex-direction: column; gap: var(--space-8); }
.dm-field__label { font: 500 12px/16px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.dm-field__note { font: 400 12px/16px var(--font-sans); color: var(--muted); }
.dm-input { display: flex; align-items: center; gap: 8px; height: var(--button-l); padding: 0 24px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: none; color: var(--ink); font: 400 16px/20px var(--font-sans); box-sizing: border-box; }
.dm-input input, .dm-input span { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: inherit; font: inherit; outline: none; }
.dm-input .is-placeholder { color: var(--muted); }
.dm-input .dm-icon { font-size: 18px; color: var(--muted); }
/* Two lines (label + value) in a pill: text starts where the rounded end ends. */
.dm-input--stacked { padding: 0 24px 0 28px; }
.dm-input--stacked .dm-input__stack { display: flex; flex-direction: column; gap: 2px; }
.dm-input--stacked .dm-field__label { font-size: 11px; line-height: 14px; color: var(--muted); }
.dm-input--m { height: var(--button-m); padding: 0 20px 0 16px; }
.dm-input.is-focus { border: 1.5px solid var(--ink); }
.dm-input.is-error { border-color: var(--danger); }
.dm-field.is-error .dm-field__note { color: var(--danger); }
.dm-input[aria-disabled="true"] { opacity: 0.4; }
.dm-input__action { flex: none; width: 40px; height: 40px; margin-right: -16px; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink); display: grid; place-items: center; font-size: 16px; }
.dm-textarea { min-height: 112px; padding: var(--space-16); border-radius: var(--radius-box); border: 1px solid var(--line); background: none; color: var(--ink); font: 400 15px/20px var(--font-sans); box-sizing: border-box; }
.dm-mono, .dm-input .dm-mono { font-family: var(--font-mono); font-size: 13px; }

/* Navigation. */
.dm-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); height: 48px; }
.dm-header__title { flex: 1 1 auto; text-align: center; font: 600 17px/24px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-header--line { border-bottom: 1px solid var(--line); }
.dm-large-title { display: flex; flex-direction: column; gap: var(--space-8); }

.dm-dock { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: var(--dock); padding: 0 var(--space-24); background: var(--bg); }
.dm-dock a { display: grid; place-items: center; color: var(--muted); font-size: 24px; }
.dm-dock a.is-selected { color: var(--ink); }
.dm-dock--float { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: var(--dock-float); padding: 8px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line); background: var(--bg-raised); box-sizing: border-box; }
.dm-dock--float a { height: 48px; border-radius: var(--radius-pill); font-size: 24px; text-decoration: none; }
.dm-dock--float a.is-selected { background: var(--ink); color: var(--on-primary); }

.dm-tabs { display: flex; gap: var(--space-24); border-bottom: 1px solid var(--line); }
.dm-tab { height: 48px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: 500 15px/1 var(--font-sans); cursor: pointer; }
.dm-tab.is-selected { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.dm-dots { display: flex; align-items: center; gap: 8px; }
.dm-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line); }
.dm-dots i.is-selected { width: 24px; background: var(--ink); }

/* Rows: 72 with a 48 cover, 12 all round; touch area bleeds 12 past the 24 edge. */
.dm-row { display: flex; align-items: center; gap: var(--space-12); min-height: var(--row); margin: 0 -12px; padding: 0 12px; border-radius: var(--radius-thumb); color: var(--ink); box-sizing: border-box; }
.dm-row--short { min-height: var(--row-short); }
.dm-row.is-pressed { background: var(--fill); }
.dm-row.is-selected { background: var(--ink); color: var(--on-primary); }
.dm-row.is-selected .dm-row__sub, .dm-row.is-selected .dm-row__end { color: inherit; opacity: 0.6; }
.dm-row.is-dragging { background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); }
.dm-row[aria-disabled="true"] { opacity: 0.45; }
.dm-row__cover { flex: none; width: 48px; height: 48px; border-radius: var(--radius-thumb); background: var(--fill); display: grid; place-items: center; color: var(--muted); font-size: 20px; }
.dm-row__cover--round { border-radius: 50%; }
.dm-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dm-row__title { font: 500 16px/20px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row__sub { font: 400 12px/16px var(--font-sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row__end { flex: none; color: var(--muted); font: 400 15px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.dm-row__end .dm-icon { font-size: 18px; }
.dm-list { display: flex; flex-direction: column; }
.dm-list--lined > .dm-row + .dm-row { box-shadow: 0 -1px 0 var(--line); border-radius: 0; }

.dm-disclosure { border-bottom: 1px solid var(--line); }
.dm-disclosure summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: var(--row-short); font: 500 16px/20px var(--font-sans); cursor: pointer; }
.dm-disclosure summary::-webkit-details-marker { display: none; }
.dm-disclosure summary .dm-icon { font-size: 18px; color: var(--muted); transition: transform .2s; }
.dm-disclosure[open] summary .dm-icon { transform: rotate(180deg); }
.dm-disclosure p { margin: 0; padding: 0 32px var(--space-16) 0; font: 400 14px/20px var(--font-sans); color: var(--muted); }

/* Containers. */
.dm-tile { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 128px; padding: var(--space-16); border: var(--stroke-box) solid var(--ink); border-radius: var(--radius-box); background: var(--bg); color: var(--ink); box-sizing: border-box; }
.dm-tile__label { flex: 1 1 auto; font: 500 12px/16px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.dm-tile__value { font: 700 40px/40px var(--font-sans); letter-spacing: -1.8px; font-variant-numeric: tabular-nums; }
.dm-tile__unit { font: 400 14px/20px var(--font-sans); color: var(--muted); }
.dm-tile.is-selected { background: var(--ink); color: var(--on-primary); }
.dm-tile.is-selected .dm-tile__label, .dm-tile.is-selected .dm-tile__unit { color: inherit; opacity: 0.6; }
/* Inversion: the fill is a sibling layer; text above it blends with difference. */
.dm-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); z-index: 0; }
.dm-fill--x { top: 0; bottom: 0; right: auto; }
.dm-invert { position: relative; z-index: 1; color: #ffffff !important; mix-blend-mode: difference; }
.dm-invert * { color: inherit !important; opacity: 1 !important; }
.dm-scale { position: relative; height: var(--button-l); border: 1px solid var(--line); border-radius: var(--radius-box); overflow: hidden; isolation: isolate; background: var(--bg); }
.dm-scale .dm-invert { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-16); font: 500 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.dm-choice { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-16); min-height: 112px; padding: var(--space-16); border: var(--stroke-box) solid var(--ink); border-radius: var(--radius-box); background: none; color: var(--ink); text-align: left; box-sizing: border-box; }
.dm-choice b { font: 700 24px/28px var(--font-sans); letter-spacing: -0.8px; }
.dm-choice span { font: 400 14px/20px var(--font-sans); color: var(--muted); }
.dm-choice.is-selected { background: var(--ink); color: var(--on-primary); }
.dm-choice.is-selected span { color: inherit; opacity: 0.6; }
.dm-choice[disabled] { opacity: 0.4; }

.dm-hint { display: flex; align-items: center; gap: var(--space-12); padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-box); font: 400 13px/20px var(--font-sans); color: var(--muted); }
.dm-hint b { color: var(--ink); font-weight: 600; }
.dm-hint__body { flex: 1 1 auto; min-width: 0; }
.dm-hint--banner { align-items: flex-start; padding: var(--space-16); border: var(--stroke-box) solid var(--ink); }
.dm-hint--warning { border-color: var(--warning); color: var(--warning); }
.dm-hint--danger { border-color: var(--danger); color: var(--danger); }
.dm-hint--warning .dm-btn, .dm-hint--danger .dm-btn { color: inherit; border-color: currentColor; }

/* Floating surfaces: rounded, raised, outlined. */
.dm-scrim { background: var(--overlay); }
.dm-sheet { display: flex; flex-direction: column; gap: var(--space-16); padding: 8px var(--space-24) var(--space-32); background: var(--bg-raised); border: 1.5px solid var(--line); border-bottom: 0; border-radius: var(--radius-float) var(--radius-float) 0 0; margin: 0 -1.5px; }
/* Side borders sit just past the screen edge, so only the rounded top edge shows. */
.dm-sheet__grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--line); }
.dm-dialog { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-float); }
.dm-dialog__actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-8); }
.dm-menu { display: flex; flex-direction: column; width: 232px; padding: 8px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-menu); box-sizing: border-box; }
.dm-menu button { display: flex; align-items: center; gap: var(--space-12); height: 48px; padding: 0 12px; border: 0; border-radius: var(--radius-thumb); background: none; color: var(--ink); font: 400 15px/1 var(--font-sans); text-align: left; cursor: pointer; }
.dm-menu button .dm-icon { font-size: 18px; }
.dm-menu button.is-pressed { background: var(--fill); }
.dm-menu button.is-danger { color: var(--danger); }
.dm-menu hr { width: auto; margin: 4px 12px; border: 0; border-top: 1px solid var(--line); }
.dm-toast { display: inline-flex; align-items: center; gap: var(--space-12); height: 48px; padding: 0 20px 0 16px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-primary); font: 500 15px/1 var(--font-sans); }
.dm-toast .dm-icon { font-size: 16px; }
.dm-toast .dm-btn { margin-right: -12px; background: var(--on-primary); color: var(--ink); }

/* Status and feedback. */
.dm-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; border: 2px solid var(--bg); background: var(--ink); color: var(--on-primary); font: 700 11px/16px var(--font-sans); text-align: center; box-sizing: border-box; }
.dm-badge--dot { min-width: 0; width: 10px; height: 10px; padding: 0; top: 2px; right: 2px; }
.dm-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line); font: 600 12px/1 var(--font-sans); letter-spacing: 1px; text-transform: uppercase; }
.dm-progress { height: 2px; background: var(--line); }
.dm-progress > i { display: block; height: 100%; background: var(--ink); }
.dm-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-8); }
.dm-steps > span { display: flex; flex-direction: column; gap: 6px; font: 500 12px/16px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.dm-steps > span.is-selected { color: var(--ink); }
.dm-steps i { display: block; height: 3px; border-radius: 2px; background: var(--line); }
.dm-steps i > b { display: block; height: 100%; border-radius: 2px; background: var(--ink); }
/* Colour only when it means something: .is-create for a launched action, or a status colour (ping quality). */
.dm-steps i > b.is-create, .dm-progress > i.is-create { background: var(--create); }
.dm-skeleton { background: var(--fill); border-radius: var(--radius-box); }
.dm-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); padding: var(--space-24) var(--space-16); text-align: center; }
.dm-empty__mark { width: 56px; height: 56px; border-radius: 50%; border: var(--stroke-box) solid var(--ink); display: grid; place-items: center; font-size: 22px; box-sizing: border-box; }
.dm-empty__title { font: 700 20px/24px var(--font-sans); letter-spacing: -0.6px; }
.dm-empty__text { font: 400 14px/20px var(--font-sans); color: var(--muted); max-width: 280px; }

/* Data: charts are tiles whose fill follows the data. */
.dm-chart { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); border: var(--stroke-box) solid var(--ink); border-radius: var(--radius-box); }
.dm-chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-chart > .dm-invert { position: absolute; inset: 0; }
.dm-pie { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--bg); border: var(--stroke-box) solid var(--ink); box-sizing: border-box; }
.dm-pie__fill { position: absolute; inset: 0; background: conic-gradient(var(--ink) 0deg calc(var(--p) * 3.6deg), transparent 0deg); }
.dm-pie .dm-invert { position: absolute; inset: 0; display: grid; place-items: center; }
.dm-qr { position: relative; width: 144px; height: 144px; padding: 12px; border-radius: var(--radius-box); background: #ffffff; box-sizing: border-box; }
.dm-qr__logo { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 4px; background: #ffffff; box-sizing: border-box; }

/* components/core/motion.css */
/* DMWorks motion. Animation helps or is absent: nothing blocks input, nothing runs longer than 300ms
   except numbers and scales, which are the result itself. */

.dm-btn, .dm-icon-btn, .dm-chip--filter, .dm-row, .dm-tab, .dm-dock a {
  transition: transform var(--duration-fast) var(--ease-move), filter var(--duration-fast) var(--ease-move),
    background-color var(--duration-base) var(--ease-move), color var(--duration-base) var(--ease-move), border-color var(--duration-base) var(--ease-move);
}
.dm-btn:active, .dm-icon-btn:active { transform: scale(0.98); filter: brightness(0.82); }
.dm-btn--line:active, .dm-icon-btn:not(.dm-icon-btn--fill):active { filter: none; background-color: var(--fill); }

.dm-toggle, .dm-toggle::after, .dm-check, .dm-check::after { transition: transform var(--duration-base) var(--ease-move), background-color var(--duration-base) var(--ease-move), border-color var(--duration-base) var(--ease-move); }
.dm-fill { transition: height var(--duration-long) var(--ease-move), width var(--duration-long) var(--ease-move); }
.dm-progress > i, .dm-steps i > b { transition: width var(--duration-slow) var(--ease-move), background-color var(--duration-base) var(--ease-move); }

/* Floating layers: the app sets data-state="open" | "closed"; without it they render static (previews).
   Leaving is always shorter than arriving. */
.dm-scrim[data-state] { transition: opacity var(--duration-slow) var(--ease-enter); }
.dm-scrim[data-state="closed"] { opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-exit); }
.dm-sheet[data-state] { transition: transform var(--duration-slow) var(--ease-enter); }
.dm-sheet[data-state="closed"] { transform: translateY(calc(100% + 2px)); transition: transform var(--duration-base) var(--ease-exit); }
.dm-dialog[data-state], .dm-menu[data-state], .dm-toast[data-state] { transition: opacity var(--duration-base) var(--ease-enter), transform var(--duration-base) var(--ease-enter); }
.dm-dialog[data-state="closed"], .dm-menu[data-state="closed"] { opacity: 0; transform: scale(0.96); pointer-events: none; transition: opacity var(--duration-fast) var(--ease-exit), transform var(--duration-fast) var(--ease-exit); }
.dm-menu { transform-origin: top right; }
.dm-toast[data-state="open"] { transition-duration: var(--duration-slow); }
.dm-toast[data-state="closed"] { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity var(--duration-base) var(--ease-exit), transform var(--duration-base) var(--ease-exit); }

/* Screens inside an app: the new one slides 24 and fades in. Between pages of a site use View Transitions. */
.dm-screen-in { animation: dm-screen-in var(--duration-slow) var(--ease-enter) both; }
@keyframes dm-screen-in { from { opacity: 0; transform: translateX(24px); } }
/* Staggered appearance: set --i on each block, at most 6 steps. */
.dm-appear { animation: dm-appear var(--duration-slow) var(--ease-enter) both; animation-delay: calc(min(var(--i, 0), 5) * 40ms); }
@keyframes dm-appear { from { opacity: 0; transform: translateY(8px); } }

.dm-skeleton { animation: dm-pulse 1.2s ease-in-out infinite; }
@keyframes dm-pulse { 50% { opacity: 0.6; } }
.dm-spin { animation: dm-spin 0.8s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-property: opacity, color, background-color, border-color !important; }
  .dm-sheet[data-state], .dm-dialog[data-state], .dm-menu[data-state], .dm-toast[data-state] { transform: none !important; }
  .dm-spin { animation: dm-spin 0.8s linear infinite !important; }
}