/* designer-control chrome, built only from Rocket Sync tokens (semantic first, then composite
 * type/space, then primitive scales), following the component specs in the designer skill
 * (Card, Input, Button, Badge, Table, Toast). Only dc-* classes here: the DS classes (.card,
 * .table, .badge...) are what we preview and must stay untouched.
 *
 * Fallbacks live in one low-priority cascade layer: the real token CSS is unlayered, so it always
 * wins when it loaded; if the token build breaks, these keep the chrome usable. */

@layer dc-fallback {
  :root {
    --font-family-sans: Inter, system-ui, sans-serif;
    --font-family-mono: "JetBrains Mono", ui-monospace, monospace;
    --fg-primary: #111827; --fg-secondary: #6b7280; --fg-muted: #9ca3af; --fg-inverse: #fafafa;
    --fg-link: #030712; --fg-link-hover: #374151;
    --surface-base: #fafafa; --surface-raised: #fff; --surface-subtle: #f9fafb; --surface-muted: #f3f4f6; --surface-inverse: #111827;
    --border-default: #9ca3af; --border-secondary: #d1d5db; --border-muted: #f3f4f6; --border-hover: #6b7280;
    --action-primary-bg: #030712; --action-primary-bg-hover: #1f2937; --action-primary-text: #fff;
    --status-success-lighter: #ecfdf5; --status-success-fg: #047857; --status-success-default: #10b981; --status-success-light: #a7f3d0;
    --status-warning-lighter: #fffbeb; --status-warning-fg: #b45309; --status-warning-light: #fde68a;
    --status-error-lighter: #fef2f2; --status-error-fg: #b91c1c; --status-error-light: #fecaca;
    --overlay-default: rgba(17, 24, 39, 0.5);
    --state-focus-visible: 0 0 0 2px #fafafa, 0 0 0 4px #3c53ff;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-dropdown: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-toast: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --space-section: 56px;
    --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
    --text-xs: 11px; --text-sm: 12px; --text-base: 14px;
    --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
    --border-hairline: 1px;
    --duration-fast: 100ms; --duration-normal: 150ms; --duration-slow: 200ms;
    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --layout-header-height: 64px; --layout-sidebar-width: 280px; --layout-content-max-width: 1200px;
    --type-h1-font-size: 30px; --type-h1-font-weight: 700; --type-h1-line-height: 1.25; --type-h1-letter-spacing: -0.75px;
    --type-h3-font-size: 20px; --type-h3-font-weight: 600; --type-h3-line-height: 1.25; --type-h3-letter-spacing: 0;
    --type-h4-font-size: 18px; --type-h4-font-weight: 600; --type-h4-line-height: 1.25; --type-h4-letter-spacing: 0;
    --type-h5-font-size: 16px; --type-h5-font-weight: 600; --type-h5-line-height: 1.5; --type-h5-letter-spacing: 0;
    --type-body-lg-font-size: 16px; --type-body-md-font-size: 14px; --type-body-sm-font-size: 12px; --type-body-md-line-height: 1.5;
    --type-label-font-size: 12px; --type-label-font-weight: 600; --type-label-line-height: 1.5; --type-label-letter-spacing: 0.6px;
    --type-caption-font-size: 11px; --type-caption-line-height: 1.5;
    --type-code-font-size: 13px; --type-code-line-height: 1.625;
  }
}

/* ---------- type presets (composite type.* tokens) ---------- */
.dc-t-display-lg { font-size: var(--type-display-lg-font-size, 60px); font-weight: var(--type-display-lg-font-weight, 800); line-height: var(--type-display-lg-line-height, 1); letter-spacing: var(--type-display-lg-letter-spacing, -3px); }
.dc-t-display-sm { font-size: var(--type-display-sm-font-size, 36px); font-weight: var(--type-display-sm-font-weight, 700); line-height: var(--type-display-sm-line-height, 1.15); letter-spacing: var(--type-display-sm-letter-spacing, -0.9px); }
.dc-t-h2 { font-size: var(--type-h2-font-size, 24px); font-weight: var(--type-h2-font-weight, 600); line-height: var(--type-h2-line-height, 1.25); letter-spacing: var(--type-h2-letter-spacing, -0.6px); }
/* Eyebrow, as on the Penpot design-system boards: 12/600 in the accent red, sentence case. */
.dc-eyebrow { margin: 0; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: 1.5; color: var(--accent-default, #fc3638); }
.dc-t-h1 { font-size: var(--type-h1-font-size); font-weight: var(--type-h1-font-weight); line-height: var(--type-h1-line-height); letter-spacing: var(--type-h1-letter-spacing); }
.dc-t-h3 { font-size: var(--type-h3-font-size); font-weight: var(--type-h3-font-weight); line-height: var(--type-h3-line-height); letter-spacing: var(--type-h3-letter-spacing); }
.dc-t-h4 { font-size: var(--type-h4-font-size); font-weight: var(--type-h4-font-weight); line-height: var(--type-h4-line-height); letter-spacing: var(--type-h4-letter-spacing); }
.dc-t-h5 { font-size: var(--type-h5-font-size); font-weight: var(--type-h5-font-weight); line-height: var(--type-h5-line-height); letter-spacing: var(--type-h5-letter-spacing); }
.dc-t-label { font-size: var(--type-label-font-size); font-weight: var(--type-label-font-weight); line-height: var(--type-label-line-height); letter-spacing: var(--type-label-letter-spacing); text-transform: uppercase; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-family-sans);
  font-size: var(--type-body-md-font-size);
  line-height: var(--type-body-md-line-height);
  color: var(--fg-primary);
  background: var(--surface-muted);
  -webkit-font-smoothing: antialiased;
}
code, pre, .dc-mono { font-family: var(--font-family-mono); font-size: var(--text-sm); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--state-focus-visible); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* ---------- shell ----------
 * Areas are separated by surface color, not lines (like platform/apps/web-app's dashboard): the page is
 * surface.muted, the sidebar and the content board are surface.raised, the header sits on the page color. */
.dc-shell { display: grid; grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr); min-height: 100vh; }

/* Sidebar */
.dc-nav {
  position: sticky; top: 0; height: 100vh; overflow: hidden; /* only the links scroll (#dc-nav-links) */
  background: var(--sidebar-bg, var(--surface-raised));
  display: flex; flex-direction: column;
}
/* Sidebar nav scrollbar (the links scroll; logo and footer stay put): 2px, brand primary (brand.default), full strength. */
.dc-nav { --dc-scroll-thumb: var(--brand-default, #030712); }
/* Chrome/Safari use the ::-webkit-scrollbar rules (2px). Chrome ignores those whenever the standard
 * scrollbar-width/-color are set, so the standard ones go to Firefox only (it can't go below "thin"). */
@supports (-moz-appearance: none) { #dc-nav-links { scrollbar-width: thin; scrollbar-color: var(--dc-scroll-thumb) transparent; } }
#dc-nav-links::-webkit-scrollbar { width: 2px; }
#dc-nav-links::-webkit-scrollbar-track { background: transparent; }
#dc-nav-links::-webkit-scrollbar-thumb { background-color: var(--dc-scroll-thumb); border-radius: var(--radius-full); }
#dc-nav-links::-webkit-scrollbar-thumb:hover { background-color: var(--brand-default, #030712); }
.dc-brand {
  display: flex; gap: var(--space-md); align-items: center; text-decoration: none;
  height: var(--layout-header-height); padding: 0 var(--space-xl); flex: none;
}
.dc-brand-mark { width: 32px; height: 32px; border-radius: var(--radius-md); flex: none; display: block; }
.dc-brand-name { display: block; font-size: var(--type-h5-font-size); font-weight: var(--type-h5-font-weight); line-height: 1.25; }
.dc-brand-sub { display: block; font-size: var(--type-body-sm-font-size); color: var(--fg-secondary); }
#dc-nav-links { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-sm) var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: 2px; }
.dc-nav-group { color: var(--fg-secondary); padding: var(--space-lg) var(--space-md) var(--space-xs); }
.dc-nav-group:first-child { padding-top: 0; }
/* Nav items use the Rocket Sync sidebar component tokens, as the web-app sidebar does. */
.dc-nav-link {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
  min-height: 40px; padding: var(--sidebar-item-padding-y, 8px) var(--sidebar-item-padding-x, 12px); border-radius: var(--sidebar-item-radius, 8px);
  text-decoration: none; color: var(--sidebar-item-text, var(--fg-secondary)); font-weight: var(--font-weight-medium);
  transition: background-color var(--duration-fast) var(--easing-ease-out), color var(--duration-fast) var(--easing-ease-out);
}
.dc-nav-link:hover { background: var(--surface-muted); color: var(--fg-primary); }
.dc-nav-link[aria-current="page"] { background: var(--sidebar-item-active-bg, var(--action-primary-bg)); color: var(--sidebar-item-active-text, var(--action-primary-text)); }
.dc-count {
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1.5;
  padding: 0 var(--space-sm); border-radius: var(--radius-full); background: var(--surface-muted); color: var(--fg-secondary);
}
.dc-nav-link[aria-current="page"] .dc-count { background: rgba(255, 255, 255, 0.16); color: var(--action-primary-text); }
.dc-count.dc-bad { background: var(--status-error-lighter); color: var(--status-error-fg); }
.dc-nav-foot { margin-top: auto; padding: var(--space-lg) var(--space-xl) var(--space-xl); }
.dc-live { font-size: var(--type-body-sm-font-size); color: var(--fg-secondary); display: inline-flex; align-items: center; gap: var(--space-sm); }
.dc-live::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--fg-muted); }
.dc-live.dc-on::before { background: var(--status-success-default); box-shadow: 0 0 0 3px var(--status-success-light); }
.dc-scrim { display: none; }

/* Top bar + page header */
.dc-main { min-width: 0; display: flex; flex-direction: column; }
.dc-top {
  /* In the page flow: scrolls away with the content. */
  display: flex; align-items: center; gap: var(--space-lg);
  height: var(--layout-header-height); padding: 0 var(--space-2xl);
}
.dc-menu {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border: 0; background: transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-ease-out);
}
.dc-menu:hover { background: var(--surface-raised); }
.dc-menu svg { width: 20px; height: 20px; }
.dc-crumb { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; font-size: var(--type-body-md-font-size); color: var(--fg-secondary); white-space: nowrap; }
.dc-crumb b { color: var(--fg-primary); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; }
.dc-status { margin-left: auto; display: flex; gap: var(--space-sm); flex-wrap: nowrap; }

.dc-page {
  /* The content sits on a board like the Penpot design-system pages: white, radius.3xl, space.page padding. */
  width: calc(100% - 2 * var(--space-xl)); max-width: calc(var(--layout-content-max-width) + 2 * var(--space-page, 80px));
  /* space.page like the Penpot boards, down to space.3xl when the sidebar leaves less room. */
  margin: 0 var(--space-xl) var(--space-xl); padding: clamp(var(--space-3xl), 4.5vw, var(--space-page, 80px));
  background: var(--surface-raised); border-radius: var(--radius-3xl, 32px);
}
.dc-head { display: flex; flex-direction: column; gap: var(--space-md); max-width: 760px; margin-bottom: var(--space-4xl); }
.dc-title { margin: 0; }
.dc-desc { margin: 0; font-size: var(--text-lg, 18px); line-height: 1.5; color: var(--fg-secondary); }
.dc-desc:empty { display: none; }
.dc-banner {
  margin: 0 0 var(--space-xl); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg);
  background: var(--status-error-lighter); border: var(--border-hairline) solid var(--status-error-light); color: var(--status-error-fg);
}
.dc-banner pre { margin: var(--space-sm) 0 0; white-space: pre-wrap; }
.dc-view { display: flex; flex-direction: column; gap: var(--space-4xl); }

/* ---------- building blocks ---------- */
/* Section = Penpot "block": title (type.h2) + description (body.lg), then the content 32px below. */
.dc-section { display: flex; flex-direction: column; gap: var(--space-2xl); min-width: 0; }
.dc-section-title { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 760px; }
.dc-section-title h2 { margin: 0; }
.dc-lead { margin: 0; font-size: var(--type-body-lg-font-size); line-height: 1.5; color: var(--fg-secondary); max-width: 760px; }
.dc-section h3 { margin: 0; }
.dc-muted { color: var(--fg-secondary); }

/* Card, as on the Penpot boards: surface.subtle, 1px gray.200 inner stroke, radius.xl, space.xl padding. */
.dc-panel {
  background: var(--surface-subtle); border: var(--border-hairline) solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-xl); padding: var(--space-xl);
}
.dc-grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dc-stat { display: flex; flex-direction: column; gap: var(--space-sm); }
.dc-stat-label { color: var(--fg-secondary); }
.dc-stat-value { margin: var(--space-xs) 0; }
.dc-card-title { margin: 0; }
.dc-card-text { margin: 0; color: var(--fg-secondary); }
.dc-stat-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); color: var(--fg-secondary); }
.dc-stat-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.dc-stat-list b { color: var(--fg-primary); font-weight: var(--font-weight-semibold); }
.dc-stat-foot { margin-top: auto; padding-top: var(--space-md); border-top: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); }
.dc-link {
  color: var(--fg-link); text-decoration: none; font-weight: var(--font-weight-semibold); cursor: pointer;
  background: none; border: 0; padding: 0; border-radius: var(--radius-xs);
}
.dc-link:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; }

.dc-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }

/* Input spec (md): min height 40, padding space.md, text.base, radius.md, border.default, hover border.hover */
.dc-field, .dc-select {
  height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-md);
  border: var(--border-hairline) solid var(--border-default); background: var(--surface-raised);
  color: var(--fg-primary); font: inherit; min-width: 0;
  transition: border-color var(--duration-fast) var(--easing-ease-out);
}
.dc-field::placeholder { color: var(--fg-muted); }
.dc-field:hover, .dc-select:hover { border-color: var(--border-hover); }
.dc-field:focus-visible, .dc-select:focus-visible { border-color: var(--color-gray-600, #4b5563); }
.dc-field { width: 320px; max-width: 100%; }
.dc-check { display: inline-flex; gap: var(--space-sm); align-items: center; color: var(--fg-secondary); }
.dc-check input[type="range"], .dc-check input[type="checkbox"] { accent-color: var(--action-primary-bg); }

/* Filter chips: Button compact (min height 32, space.md, text.sm), pill shape */
.dc-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-md);
  border-radius: var(--radius-full); border: var(--border-hairline) solid var(--border-secondary);
  background: var(--surface-raised); cursor: pointer; text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--fg-primary);
  transition: background-color var(--duration-fast) var(--easing-ease-out), border-color var(--duration-fast) var(--easing-ease-out);
}
.dc-chip:hover { border-color: var(--border-hover); }
.dc-chip[aria-pressed="true"] { background: var(--action-primary-bg); border-color: var(--action-primary-bg); color: var(--action-primary-text); }

/* Button spec (default size, primary variant) */
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 40px; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md);
  border: var(--border-hairline) solid transparent; background: var(--action-primary-bg); color: var(--action-primary-text);
  font-size: var(--text-base); font-weight: var(--font-weight-semibold); cursor: pointer;
  transition: background-color var(--duration-normal) var(--easing-ease-out);
}
.dc-btn:hover { background: var(--action-primary-bg-hover); }
.dc-btn:active { background: var(--action-primary-bg-active, var(--action-primary-bg)); }

/* Table spec: header surface.subtle + gray.600 semibold, cells space.lg/space.md, rows border.muted */
.dc-table-wrap {
  overflow-x: auto; border: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-xl);
  background: var(--surface-raised);
}
.dc-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.dc-table th {
  text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-gray-600, #4b5563); white-space: nowrap;
  padding: var(--space-md) var(--space-lg); background: var(--surface-subtle);
  border-bottom: var(--border-hairline) solid var(--border-muted); position: sticky; top: 0;
}
.dc-table td { padding: var(--space-md) var(--space-lg); border-bottom: var(--border-hairline) solid var(--border-muted); vertical-align: middle; }
.dc-table tr:last-child td { border-bottom: 0; }
.dc-table tbody tr:hover td { background: var(--surface-subtle); }
.dc-table code { word-break: break-all; }
.dc-name { cursor: copy; border-radius: var(--radius-xs); }
.dc-name:hover { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Badge spec: space.sm / 2, text.xs, semibold, radius.full, status lighter + fg */
.dc-tag, .dc-pill {
  display: inline-flex; align-self: flex-start; justify-self: start; align-items: center; gap: var(--space-xs);
  padding: 2px var(--space-sm); border-radius: var(--radius-full); white-space: nowrap;
  font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1.5;
  background: var(--surface-muted); color: var(--fg-secondary);
}
.dc-pill { align-self: center; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); font-weight: var(--font-weight-medium); background: var(--surface-raised); }
.dc-pill b { color: var(--fg-primary); font-weight: var(--font-weight-semibold); }
.dc-good { background: var(--status-success-lighter); color: var(--status-success-fg); }
.dc-warn { background: var(--status-warning-lighter); color: var(--status-warning-fg); }
.dc-bad { background: var(--status-error-lighter); color: var(--status-error-fg); }
.dc-pill.dc-good b, .dc-pill.dc-warn b, .dc-pill.dc-bad b { color: inherit; }

/* ---------- colors (Penpot: swatch tiles with the name and value inside, bottom-left) ---------- */
.dc-palettes { display: flex; flex-direction: column; gap: var(--space-lg); }
.dc-palette { display: grid; grid-template-columns: 148px repeat(10, minmax(0, 1fr)); gap: var(--space-sm); align-items: center; }
.dc-palette-label { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.dc-palette-name { font-size: var(--type-h3-font-size); font-weight: var(--type-h3-font-weight); line-height: 1.25; }
.dc-palette .dc-swatch { padding: var(--space-md) var(--space-sm); }
.dc-palette-meta { font-size: var(--type-caption-font-size); line-height: 1.5; color: var(--fg-secondary); }
.dc-swatches { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.dc-swatch {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; height: 88px;
  padding: var(--space-md); border-radius: var(--radius-lg); border: 0; cursor: copy; text-align: left; font: inherit;
  font-size: var(--type-caption-font-size); line-height: 1.5; color: var(--fg-primary); overflow: hidden;
  transition: transform var(--duration-fast) var(--easing-ease-out);
}
.dc-swatch:hover { transform: translateY(-2px); }
.dc-swatch.dc-on-dark { color: var(--color-white, #fff); }
.dc-swatch.dc-light { box-shadow: inset 0 0 0 1px var(--color-gray-200, #e5e7eb); }
.dc-swatch > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-swatch .dc-tag { position: absolute; top: var(--space-sm); right: var(--space-sm); }
.dc-chip-sm { width: 24px; height: 24px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); display: inline-block; vertical-align: middle; flex: none; }
.dc-checker { background-image: linear-gradient(45deg, var(--surface-muted) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-muted) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-muted) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-muted) 75%); background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0; }

/* ---------- typography (Penpot: typeface cards, then rows of meta | sample with dividers) ---------- */
.dc-typefaces { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dc-typeface { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-2xl); }
.dc-typeface-aa { font-size: 96px; line-height: 1; color: var(--fg-primary); }
.dc-typeface p { margin: 0; color: var(--fg-secondary); overflow-wrap: anywhere; }
.dc-type-rows { display: flex; flex-direction: column; }
.dc-type-row { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-xl); padding: var(--space-2xl) 0; border-bottom: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); align-items: start; }
.dc-type-row:first-child { padding-top: 0; }
.dc-type-meta { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--type-caption-font-size); line-height: 1.5; color: var(--fg-secondary); }
.dc-type-meta b { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--fg-primary); }
.dc-type-meta code { font-size: var(--text-sm); color: var(--fg-secondary); }
.dc-type-sample { min-width: 0; overflow-wrap: anywhere; outline: none; border-radius: var(--radius-xs); color: var(--fg-primary); }

/* ---------- foundations (Penpot: mono name | value | red bar; gray radius tiles; shadows on a sunken panel) ---------- */
.dc-bars { display: flex; flex-direction: column; gap: var(--space-md); }
.dc-bar-row { display: grid; grid-template-columns: 180px 72px 1fr; gap: var(--space-xl); align-items: center; cursor: copy; }
.dc-bar-row code { font-size: var(--type-code-font-size); color: var(--fg-primary); }
.dc-bar-row .dc-val { font-size: var(--type-caption-font-size); color: var(--fg-secondary); }
.dc-bar { height: 16px; border-radius: var(--radius-xs); background: var(--accent-default, #fc3638); min-width: 2px; max-width: 100%; }
.dc-bar.dc-gray { background: var(--border-secondary); }
.dc-tiles { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.dc-tile { display: flex; flex-direction: column; gap: var(--space-md); font-size: var(--type-caption-font-size); line-height: 1.5; color: var(--fg-secondary); cursor: copy; background: none; border: 0; padding: 0; text-align: left; border-radius: var(--radius-md); font-family: inherit; }
.dc-tile-box { width: 100%; max-width: 112px; aspect-ratio: 1; background: var(--color-gray-200, #e5e7eb); }
.dc-tile-box.dc-ink { background: var(--fg-primary); border-radius: var(--radius-lg); }
.dc-tile-box.dc-outline { background: var(--surface-raised); border-radius: var(--radius-lg); aspect-ratio: 2 / 1; max-width: 124px; }
.dc-shadow-panel { display: grid; gap: var(--space-2xl); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: var(--space-2xl); background: var(--surface-sunken); border-radius: var(--radius-2xl); }
.dc-shadow-panel .dc-tile { align-items: center; text-align: center; }
.dc-shadow-panel .dc-tile-box { max-width: none; aspect-ratio: 16 / 9; background: var(--surface-raised); border-radius: var(--radius-xl); }
.dc-motion { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-md); align-items: center; padding: var(--space-sm) 0; cursor: pointer; }
.dc-track { position: relative; height: 24px; border-radius: var(--radius-full); background: var(--surface-muted); }
.dc-dot { position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--accent-default, #fc3638); }
.dc-play .dc-dot { left: calc(100% - 20px); }

/* ---------- components ---------- */
.dc-comp { scroll-margin-top: var(--space-lg); }
.dc-comp-head { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.dc-comp-head h2 { margin: 0; }
.dc-comp-box { border: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-xl); background: var(--surface-raised); overflow: hidden; }
.dc-stage { padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-xl); overflow-x: auto; }
.dc-stage-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.dc-stage-label { font-family: var(--font-family-mono); font-size: var(--text-sm); color: var(--fg-secondary); width: 100%; margin-bottom: calc(-1 * var(--space-xs)); }
.dc-comp-foot { border-top: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); background: var(--surface-subtle); }
.dc-comp-foot summary {
  cursor: pointer; padding: var(--space-md) var(--space-lg); font-weight: var(--font-weight-medium); color: var(--fg-primary);
  list-style: none; display: flex; align-items: center; gap: var(--space-sm);
}
.dc-comp-foot summary::-webkit-details-marker { display: none; }
.dc-comp-foot summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--duration-fast) var(--easing-ease-out); }
.dc-comp-foot[open] summary::before { transform: rotate(45deg); }
.dc-comp-foot summary:hover { background: var(--surface-muted); }
.dc-comp-foot[open] summary { border-bottom: var(--border-hairline) solid var(--border-muted); }
.dc-comp-foot pre {
  margin: 0; padding: var(--space-lg); overflow-x: auto; background: var(--surface-inverse); color: var(--fg-inverse);
  font-size: var(--type-code-font-size); line-height: var(--type-code-line-height);
}
.dc-comp-foot .dc-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.dc-frame { position: relative; height: 320px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-muted); }

/* ---------- icons ---------- */
.dc-icon-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.dc-icon {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-sm) var(--space-md); cursor: copy;
  border: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-xl); background: var(--surface-subtle);
  color: var(--dc-icon-color, var(--fg-primary)); font: inherit;
  transition: box-shadow var(--duration-normal) var(--easing-ease-out), border-color var(--duration-normal) var(--easing-ease-out);
}
.dc-icon:hover { border-color: var(--border-secondary); box-shadow: var(--shadow-dropdown); }
.dc-icon svg { width: var(--dc-icon-size, 24px); height: var(--dc-icon-size, 24px); }
.dc-flag-grid .dc-icon img { height: var(--dc-icon-size, 24px); width: auto; border-radius: var(--radius-xs, 2px); }
.dc-icon-name { font-size: var(--text-sm); color: var(--fg-primary); text-align: center; overflow-wrap: anywhere; }
.dc-icon-meta { font-size: var(--text-xs); color: var(--fg-secondary); }

/* ---------- APD (3D story images) ---------- */
.dc-apd-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(var(--dc-apd-size, 220px) + 48px)), 1fr)); }
.dc-apd { display: flex; flex-direction: column; border: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-subtle); }
.dc-apd-stage { display: grid; place-items: center; height: calc(var(--dc-apd-size, 220px) + 48px); padding: var(--space-xl); border: 0; cursor: copy; background: var(--dc-apd-bg, var(--surface-subtle)); transition: background var(--duration-normal) var(--easing-ease-out); }
.dc-apd-stage img { max-width: var(--dc-apd-size, 220px); max-height: var(--dc-apd-size, 220px); width: 100%; height: 100%; object-fit: contain; transition: transform var(--duration-slow) var(--easing-ease-out); }
.dc-apd-stage:hover img { transform: translateY(-4px) scale(1.03); }
.dc-apd-body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); border-top: var(--border-hairline) solid var(--border-muted); }
.dc-apd-body p { margin: 0; color: var(--fg-secondary); }
.dc-apd-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.dc-apd-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.dc-apd-variants { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg) 0; }
.dc-apd-note { font-size: var(--type-body-sm-font-size); }
.dc-apd-meta { font-size: var(--text-xs); color: var(--fg-secondary); font-family: var(--font-family-mono); }

/* ---------- branding (logo cards: preview stage on the logo's own background, then details) ---------- */
.dc-logo-grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dc-logo { display: flex; flex-direction: column; border: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-subtle); }
.dc-logo-stage { display: grid; place-items: center; height: 200px; padding: var(--space-2xl); background: var(--surface-raised); transition: background var(--duration-normal) var(--easing-ease-out); }
.dc-logo-stage.dc-on-dark { background: var(--surface-inverse); }
.dc-logo-stage.dc-checker { background-color: var(--surface-raised); background-image: linear-gradient(45deg, var(--surface-muted) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-muted) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-muted) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-muted) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.dc-logo-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 24px; object-fit: contain; }
.dc-logo-body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); border-top: var(--border-hairline) solid var(--color-gray-200, #e5e7eb); }
.dc-logo-body code { font-size: var(--text-sm); overflow-wrap: anywhere; }
.dc-logo-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }

/* ---------- marketing templates: posters at their real 900 x 1100 size, scaled to the column ---------- */
.tp-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: var(--space-2xl); align-items: start; }
/* The preview stays in view (pinned) while the settings beside it scroll. */
.tp-frame { position: sticky; top: var(--space-lg); width: 100%; aspect-ratio: 900 / 1100; --tp-scale: 0.5; }
.tp-poster {
  position: absolute; top: 0; left: 0; width: 900px; height: 1100px; transform: scale(var(--tp-scale)); transform-origin: 0 0;
  background: var(--surface-muted); border-radius: var(--radius-3xl); overflow: hidden;
  font-family: var(--font-family-sans); color: var(--fg-primary);
}
.tp-area { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.tp-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fg-muted); font-size: var(--text-2xl); }
/* content-style-1 / -3 */
.tp-cs1 .tp-area { justify-content: center; gap: 75px; padding: 0 50px; }
.tp-text { width: 700px; display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.tp-title { font-size: var(--text-6xl, 60px); font-weight: var(--font-weight-extrabold, 800); line-height: 1.15; letter-spacing: -3px; white-space: pre-line; }
.tp-subtitle { font-size: var(--text-2xl, 24px); font-weight: var(--font-weight-normal, 400); line-height: 1.5; color: var(--fg-secondary); white-space: pre-line; }
.tp-preview { width: 700px; height: 400px; flex: none; margin-bottom: 50px; border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-subtle); }
.tp-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-grid { position: absolute; left: 0; bottom: 0; width: 900px; height: 660px; overflow: hidden; }
.tp-grid img { position: absolute; left: -225px; bottom: 0; width: 1350px; height: 971px; }
.tp-pattern { position: absolute; left: -1251.9px; top: -546.3px; width: 2931.5px; height: 2931.5px; opacity: 0.04; transform: rotate(5deg); }
/* content-style-2 */
.tp-cs2 .tp-area { padding: var(--space-page, 80px) 0; }
.tp-eyebrow { font-size: var(--text-3xl, 30px); font-weight: var(--font-weight-bold, 700); line-height: 1.2; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; }
.tp-stage { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.tp-headline { display: flex; flex-direction: column; align-items: center; transform: rotate(-8deg); }
.tp-line { font-weight: var(--font-weight-extrabold, 800); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.tp-square { position: absolute; left: 50%; top: 50%; width: 350px; height: 350px; transform: translate(-50%, -50%); z-index: 1; overflow: hidden; display: grid; place-items: center; }
.tp-square.tp-contain img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tp-square.tp-cover img { width: 100%; height: 100%; object-fit: cover; }
.tp-footer { font-size: var(--text-4xl, 36px); font-weight: var(--font-weight-bold, 700); line-height: 1.2; white-space: nowrap; }
/* controls */
.tp-controls { display: flex; flex-direction: column; gap: var(--space-lg); }
.tp-field { display: flex; flex-direction: column; gap: var(--space-sm); color: var(--fg-secondary); }
.tp-field .dc-field, .tp-field .dc-select { width: 100%; }
.tp-field textarea.dc-field { height: auto; padding: var(--space-sm) var(--space-md); line-height: 1.5; resize: vertical; font: inherit; }
.tp-hint { font-size: var(--type-body-sm-font-size); }
.tp-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.tp-row .dc-select { flex: 1; min-width: 160px; }
.tp-upload { cursor: pointer; }
.tp-thumbs { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.tp-thumb {
  position: relative; aspect-ratio: 1; padding: var(--space-xs); border: 0; border-radius: var(--radius-md); background: var(--surface-raised);
  cursor: pointer; overflow: hidden; transition: box-shadow var(--duration-fast) var(--easing-ease-out);
}
.tp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tp-thumb span { position: absolute; left: var(--space-xs); bottom: var(--space-xs); font-size: 10px; font-weight: var(--font-weight-semibold); padding: 0 var(--space-xs); border-radius: var(--radius-xs); background: var(--surface-inverse); color: var(--fg-inverse); }
.tp-thumb:hover { box-shadow: inset 0 0 0 2px var(--border-secondary); }
.tp-thumb.tp-on { box-shadow: inset 0 0 0 2px var(--action-primary-bg); }
.tp-warn { margin: 0 0 var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--status-warning-lighter); color: var(--status-warning-fg); font-size: var(--type-body-sm-font-size); }
@media (max-width: 1100px) { .tp-layout { grid-template-columns: minmax(0, 1fr); } .tp-frame, .pt-frame { position: relative; top: auto; } }
/* presentation template: slide frame (960 x 540) + list/group controls */
.pt-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
.pt-frame { position: sticky; top: var(--space-lg); width: 100%; aspect-ratio: 960 / 540; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-inverse); }
.pt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pt-group { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); background: var(--surface-raised); }
.pt-group .tp-field { gap: var(--space-xs); }
.pt-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.pt-item { display: flex; gap: var(--space-sm); align-items: center; }
.pt-item .dc-select { flex: 0 0 150px; min-width: 0; }
.pt-item .dc-field { flex: 1; width: auto; min-width: 0; }
.pt-remove { flex: none; justify-content: center; width: 32px; padding: 0; }

/* ---------- toast (Tooltip/Toast spec: surface.inverse, fg.inverse, shadow.toast) ---------- */
.dc-toast {
  position: fixed; bottom: var(--space-xl); left: 50%; transform: translate(-50%, var(--space-lg)); opacity: 0; pointer-events: none;
  background: var(--surface-inverse); color: var(--fg-inverse); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-md);
  box-shadow: var(--shadow-toast); font-size: var(--text-base); font-weight: var(--font-weight-medium); z-index: 1000;
  transition: opacity var(--duration-normal) var(--easing-ease-out), transform var(--duration-normal) var(--easing-ease-out);
}
.dc-toast.dc-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- small screens (breakpoint 1024: sidebar becomes a drawer) ---------- */
@media (max-width: 1023px) {
  .dc-shell { grid-template-columns: minmax(0, 1fr); }
  .dc-nav {
    position: fixed; z-index: 50; width: var(--layout-sidebar-width); max-width: 85vw; transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--easing-ease-out); box-shadow: var(--shadow-toast);
  }
  .dc-nav.dc-open { transform: none; }
  .dc-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: var(--overlay-default); opacity: 0; pointer-events: none; transition: opacity var(--duration-slow) var(--easing-ease-out); }
  .dc-nav.dc-open + .dc-scrim { opacity: 1; pointer-events: auto; }
  .dc-menu { display: inline-flex; }
}
@media (max-width: 1279px) {
  .dc-palette { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dc-palette-label { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .dc-top { padding: 0 var(--space-lg); gap: var(--space-md); }
  .dc-page { width: calc(100% - 2 * var(--space-sm)); margin: var(--space-sm); padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-2xl, 24px); }
  .dc-head { margin-bottom: var(--space-2xl); }
  .dc-view { gap: var(--space-3xl); }
  .dc-t-display-lg, .dc-t-display-sm { font-size: var(--type-display-sm-font-size, 36px); }
  .dc-status .dc-pill:not(:first-child) { display: none; }
  .dc-type-row { grid-template-columns: 1fr; gap: var(--space-sm); }
  .dc-bar-row { grid-template-columns: 1fr 60px; }
  .dc-bar-row .dc-bar { grid-column: 1 / -1; }
  .dc-motion { grid-template-columns: 1fr; }
  .dc-stage { padding: var(--space-lg); }
  .dc-field { width: 100%; }
}

/* Image guide */
.dc-ig-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dc-ig-slot { display: flex; flex-direction: column; border: var(--border-hairline) solid var(--border-muted); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-subtle); }
.dc-ig-frame { display: grid; place-items: center; margin: var(--space-lg) auto 0; height: 150px; max-width: calc(100% - 2 * var(--space-lg)); border: var(--border-thin) dashed var(--border-default); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--fg-secondary); font-family: var(--font-family-mono); font-size: var(--text-sm); }
.dc-ig-rules { margin: 0; padding-left: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xs); color: var(--fg-secondary); }

/* Animated APD: sprites cycle in JS, the sprite floats and the clouds drift in CSS (mirrors web-front FlyingRocket/FlyingPlane). */
.dc-anim-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.dc-anim { cursor: pointer; }
.dc-anim-box { position: relative; width: min(100%, 300px); pointer-events: none; }
/* beat .dc-apd-stage img (height:100%, max-size, object-fit) so images size exactly like web-front */
.dc-apd-stage .dc-anim-box img { display: block; height: auto; max-width: none; max-height: none; object-fit: fill; }
.dc-apd-stage .dc-anim-box img.dc-anim-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-anim-cloud { position: absolute; animation: dc-anim-drift ease-in-out infinite; }
.dc-anim-sprite { position: absolute; aspect-ratio: 1; animation: dc-anim-float ease-in-out infinite; }
.dc-anim-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-anim-frame[hidden] { display: none; }
.dc-anim.dc-paused *, .dc-anim.dc-paused { animation-play-state: paused; }
@keyframes dc-anim-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--ax)); } }
@keyframes dc-anim-float { 0%, 100% { transform: translate(0, 0) rotate(calc(var(--ar) * -1)); } 50% { transform: translate(var(--ax), var(--ay)) rotate(var(--ar)); } }
.dc-apd-stage .dc-anim-box img.dc-anim-frame[hidden] { display: none; }