/* Data Muse UI — shared chrome + design tokens (from Figma, file i4S2Jdz0hCNmjHRXpPH0Jf).
   These are the app-builder styles (dashboard + wizard screens). Chart templates keep
   their own CSS; this file is the surrounding application shell only. */

:root {
  --dm-black: #000000;
  --dm-header-border: #1e293b;
  --dm-white: #ffffff;
  --dm-surface: #f4f4f4;       /* hero / panel surface */
  --dm-surface-2: #f3f4f6;     /* toggles, subtle fills */
  --dm-ink: #111827;           /* primary heading ink */
  --dm-ink-2: #374151;         /* control label ink */
  --dm-muted: #6b7280;         /* body / secondary text */
  --dm-label: #94a3b8;         /* section eyebrow labels */
  --dm-label-2: #737373;
  --dm-brand: #cd0808;         /* Variety red */
  --dm-brand-hover: #b00707;
  --dm-border: #e5e7eb;
  --dm-border-2: #f3f4f6;
  --dm-published-bg: #ecfdf5;  --dm-published-fg: #047857;
  --dm-draft-bg: #fffbeb;      --dm-draft-fg: #b45309;
  --dm-kind-bg: #efefef;       /* neutral "what kind of record is this" badge */

  --dm-r-card: 16px;
  --dm-r-hero: 23px;
  --dm-r-pill: 999px;
  --dm-r-sm: 8px;

  --dm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --dm-shadow-card: 0 2px 10px 0 rgba(0, 0, 0, 0.04);
  --dm-maxw: 1400px;
}

body { font-family: var(--dm-font); color: var(--dm-ink); }

/* #app-root is a full-bleed column; the neutral padding from index.html is removed
   here because each screen manages its own spacing to match the Figma frames. */
#app-root { max-width: none; margin: 0; padding: 0; }

.dm-view { display: flex; flex-direction: column; align-items: center; padding-bottom: 32px; }
.dm-container { width: 100%; max-width: var(--dm-maxw); margin: 0 auto; padding: 0 20px; }

/* ---- header ------------------------------------------------------------- */
.dm-header {
  width: 100%;
  background: var(--dm-black);
  border-bottom: 1px solid var(--dm-header-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  min-height: 95px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
}
/* Brand left, mode toggle right (Figma header-row spaces them across the frame). */
.dm-header__inner {
  width: 100%; max-width: var(--dm-maxw);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.dm-brand { display: flex; align-items: center; gap: 12px; }
.dm-brand__logo { height: 42px; width: auto; display: block; }
.dm-brand__wordmark {
  font-weight: 300; font-size: 28px; color: #fff;
  letter-spacing: 2.8px; text-transform: uppercase; white-space: nowrap;
}
.dm-brand--link { background: none; border: 0; cursor: pointer; }
.dm-brand--link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---- mode toggle (Figma mode-toggle 275:328) ----------------------------- */
.dm-modes {
  display: flex; align-items: center; gap: 4px; flex: none;
  background: var(--dm-surface-2); border-radius: var(--dm-r-pill); padding: 4px;
}
.dm-modes__btn {
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--dm-font); font-weight: 500; font-size: 14px; color: var(--dm-muted);
  border-radius: var(--dm-r-pill); padding: 10px 20px;
}
.dm-modes__btn[aria-pressed="true"] {
  background: var(--dm-white); color: var(--dm-ink); font-weight: 600;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.dm-modes__btn:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }

/* ---- buttons ------------------------------------------------------------ */
.dm-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--dm-font); font-weight: 600; font-size: 16px;
  border: 0; border-radius: var(--dm-r-pill); cursor: pointer;
  padding: 12px 24px; background: var(--dm-white); color: var(--dm-ink-2);
}
.dm-btn:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-btn--primary { background: var(--dm-brand); color: #fff; padding: 16px 48px; font-size: 18px; }
.dm-btn--primary:hover { background: var(--dm-brand-hover); }
.dm-btn--primary .dm-icon { filter: none; }
.dm-btn--dark { background: var(--dm-black); color: #fff; padding: 10px 16px; font-size: 15px; gap: 8px; }
.dm-btn--dark:hover:not([disabled]) { background: #1a1a1a; }
/* An inline action inside a status bar or a card, next to body text rather than in a
   bottom bar — so it sits on the text's baseline grid instead of dominating it. */
.dm-btn--sm { padding: 7px 14px; font-size: 13px; gap: 6px;
  border: 1px solid var(--dm-border); }
.dm-btn--sm:hover:not([disabled]) { border-color: #cbd5e1; background: var(--dm-surface); }
.dm-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- pills / chips ------------------------------------------------------ */
.dm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dm-white); border: 1px solid var(--dm-border);
  border-radius: var(--dm-r-pill); padding: 10px 14px;
  font-weight: 600; font-size: 13px; color: var(--dm-ink); cursor: pointer;
}
.dm-pill:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-pill[aria-pressed="true"] { border-color: var(--dm-ink); }
.dm-pill:disabled { color: var(--dm-muted); border-color: var(--dm-border); background: #f8fafc; cursor: default; opacity: 0.6; }

.dm-icon { width: 16px; height: 16px; display: block; flex: none; }
.dm-icon--sm { width: 14px; height: 14px; }
.dm-icon--xs { width: 12px; height: 12px; }
.dm-icon--lg { width: 24px; height: 24px; display: block; flex: none; }

/* ---- eyebrow labels ----------------------------------------------------- */
.dm-eyebrow {
  font-weight: 700; font-size: 12px; color: var(--dm-label);
  letter-spacing: 0.96px; text-transform: uppercase;
}

/* ---- hero CTA ----------------------------------------------------------- */
.dm-hero {
  width: 100%; max-width: var(--dm-maxw); margin: 31px auto 0;
  background: var(--dm-surface); border-radius: var(--dm-r-hero);
  padding: 30px 38px; display: flex; flex-direction: column;
  align-items: center; gap: 20px; text-align: center;
}
/* Designer Mode gets a taller gradient hero + the mode badge (Figma 384:2821). */
.dm-hero--designer {
  gap: 35px;
  background: linear-gradient(to bottom, var(--dm-white) 0%, #f5f5f7 50%, #e8ebed 100%);
}
.dm-hero__stack { display: flex; flex-direction: column; align-items: center; gap: 13px; max-width: 760px; }
.dm-hero__badge {
  background: rgba(229, 232, 237, 0.7); border: 1px solid rgba(209, 212, 219, 0.6);
  border-radius: 20px; padding: 6px 16px;
  font-weight: 600; font-size: 12px; color: #616673;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.dm-hero__title { font-weight: 800; font-size: 30px; color: var(--dm-ink); line-height: 1.2; margin: 0; }
.dm-hero__sub { font-weight: 400; font-size: 14px; color: var(--dm-muted); line-height: 1.5; margin: 0; max-width: 760px; }
.dm-hero__actions { display: flex; flex-wrap: wrap; gap: 31px; align-items: center; justify-content: center; }

/* Hero call-to-action buttons. One shape, one colour per entry point (Figma 384:2827):
   red = start from a CSV, black = author a template, grey = bring your own HTML. */
.dm-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--dm-font); font-weight: 600; font-size: 18px; color: #fff;
  border: 0; border-radius: var(--dm-r-pill); cursor: pointer; padding: 16px 48px;
}
.dm-cta:focus-visible { outline: 2px solid var(--dm-ink); outline-offset: 3px; }
.dm-cta--csv { background: var(--dm-brand); }
.dm-cta--csv:hover { background: var(--dm-brand-hover); }
.dm-cta--template { background: var(--dm-black); }
.dm-cta--template:hover { background: #1a1a1a; }
.dm-cta--embed { background: #9c9c9c; }
.dm-cta--embed:hover { background: #8a8a8a; }

/* ---- filter toolbar ----------------------------------------------------- */
.dm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--dm-border-2); padding-bottom: 12px; width: 100%; }
.dm-tabs { display: flex; gap: 20px; align-items: center; font-size: 13px; }
.dm-tab { background: none; border: 0; cursor: pointer; font-family: var(--dm-font);
  font-weight: 400; font-size: 13px; color: var(--dm-muted); padding: 0; }
.dm-tab[aria-selected="true"] { font-weight: 600; color: var(--dm-ink); }
.dm-controls { display: flex; gap: 12px; align-items: center; }
.dm-search { display: flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid var(--dm-border); border-radius: var(--dm-r-pill); padding: 8px 12px; width: 342px; max-width: 100%; }
.dm-search input { border: 0; outline: 0; font-family: var(--dm-font); font-weight: 600;
  font-size: 12px; color: #000; flex: 1; min-width: 0; background: transparent; }
.dm-search input::placeholder { color: #6b7280; font-weight: 600; }
.dm-view-toggle { display: flex; gap: 6px; align-items: center; background: #fff;
  border: 1px solid var(--dm-border); border-radius: var(--dm-r-pill); padding: 6px; }
.dm-view-toggle__btn { width: 28px; height: 28px; border: 0; background: none; border-radius: var(--dm-r-sm);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dm-view-toggle__btn[aria-pressed="true"] { background: var(--dm-surface-2); }

/* Sort control (Figma recent-dropdown 523:6275). Native <select> for keyboard/AT
   behaviour, restyled to the comp's pill with the committed chevron asset. */
.dm-sort {
  appearance: none; -webkit-appearance: none;
  background: #fff url('../assets/icons/chevron-down.svg') no-repeat right 12px center / 14px 14px;
  border: 1px solid var(--dm-border); border-radius: var(--dm-r-pill);
  padding: 8px 34px 8px 12px; cursor: pointer;
  font-family: var(--dm-font); font-weight: 600; font-size: 13px; color: var(--dm-ink-2);
}
.dm-sort:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }

/* ---- folders ------------------------------------------------------------ */
.dm-section { width: 100%; max-width: var(--dm-maxw); margin: 0 auto; padding: 24px 20px 0; }
.dm-folders .dm-eyebrow { color: var(--dm-label-2); }  /* Figma FOLDERS label 523:6238 */
.dm-folders__list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; align-items: center; }
.dm-divider { height: 0; border-top: 1px solid var(--dm-border); width: 100%; margin-top: 12px; }
/* Pushed to the far end of the pill row (Figma uses an explicit spacer). */
.dm-newfolder {
  margin-left: auto; flex: none;
  background: var(--dm-ink); color: #fff; border: 0; border-radius: var(--dm-r-sm);
  padding: 10px 14px; cursor: pointer;
  font-family: var(--dm-font); font-weight: 600; font-size: 13px; white-space: nowrap;
}
.dm-newfolder:hover { background: #000; }
.dm-newfolder:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-folders__new { cursor: default; }
.dm-folders__input {
  border: 0; outline: 0; background: transparent; min-width: 0; width: 120px;
  font-family: var(--dm-font); font-weight: 600; font-size: 13px; color: var(--dm-ink);
}

/* ---- card grid ---------------------------------------------------------- */
.dm-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; width: 100%;
}
.dm-cards--list { grid-template-columns: 1fr; }
.dm-card {
  position: relative;
  background: #fff; border: 1px solid var(--dm-border); border-radius: var(--dm-r-card);
  box-shadow: var(--dm-shadow-card); padding: 12px 13px 14px;
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  font-family: var(--dm-font); width: 100%;
}
/* Full-card transparent click target (the card can't be a <button> — it holds an
   iframe). Focus lands here; the ring is drawn on the card via :focus-within. */
.dm-card__open {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2;
}
.dm-card__open:focus-visible { outline: none; }
.dm-card:focus-within { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
/* Top row: template name + the actions menu (Figma top-row 376:681). */
.dm-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dm-card__template {
  font-weight: 600; font-size: 11px; color: #595959;
  letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dm-card__title { font-weight: 600; font-size: 15px; color: var(--dm-ink); margin: 0 0 6px; }
.dm-card__thumb {
  height: 220px; border-radius: 10px; background: var(--dm-surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
/* Offscreen render host: the chart is rasterized to a PNG from here, never shown. */
.dm-card__thumb-frame {
  position: fixed; top: 0; left: -10000px;
  border: 0; background: #fff; pointer-events: none;
}
/* Baked PNG preview: top-anchored and clipped by the thumb box, so the card shows the
   head of the chart crisply (browser image downscaling, not soft CSS transform-scale). */
.dm-card__thumb-img { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
/* A designer's generated chart, shown live because its document may not be read (dashboard.js
   liveThumb): rendered at the template's own width and scaled down to the card, top-anchored
   and clipped by the thumb box exactly like the baked PNG above. */
.dm-card__thumb-live {
  position: absolute; top: 0; left: 0; transform-origin: top left;
  border: 0; background: #fff; pointer-events: none;
}
.dm-card__thumb-empty { color: var(--dm-label); font-weight: 600; font-size: 13px; }
.dm-card__meta { display: flex; gap: 8px; align-items: center; }
.dm-card__time { font-weight: 500; font-size: 12px; color: var(--dm-label); }

/* Per-card actions — trigger + popover sit above the open overlay (z-index 2). Sits in
   the card's top row (Figma), so it's in flow; the popover anchors to it. */
.dm-card__menu { position: relative; flex: none; z-index: 3; }
.dm-card__menu-btn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent;
  background: rgba(255, 255, 255, .82); color: var(--dm-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.dm-card__menu-btn:hover { background: #fff; border-color: var(--dm-border); color: var(--dm-ink); }
.dm-card__menu-btn:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-card__menu-dots { font-size: 18px; font-weight: 700; }
.dm-card__menu-list {
  position: absolute; top: 34px; right: 0; min-width: 160px; z-index: 4;
  background: #fff; border: 1px solid var(--dm-border); border-radius: 10px;
  box-shadow: var(--dm-shadow-card); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.dm-card__menu-list[hidden] { display: none; }
.dm-card__menu-item {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: transparent; border-radius: 7px;
  font-family: var(--dm-font); font-size: 13px; font-weight: 500; color: var(--dm-ink); cursor: pointer;
}
.dm-card__menu-item:hover { background: var(--dm-surface-2); }
.dm-card__menu-item:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: -2px; }
.dm-card__menu-item--danger { color: #b42318; }
.dm-card__menu-item--danger:hover { background: #fef3f2; }
.dm-card__menu-confirm { margin: 4px 8px 8px; font-size: 13px; font-weight: 600; color: var(--dm-ink); }
.dm-card__menu-actions { display: flex; gap: 6px; }
.dm-card__menu-actions .dm-card__menu-item { justify-content: center; border: 1px solid var(--dm-border); }

.dm-badge { font-weight: 600; font-size: 12px; border-radius: var(--dm-r-pill); padding: 4px 10px; white-space: nowrap; }
.dm-badge--published { background: var(--dm-published-bg); color: var(--dm-published-fg); }
.dm-badge--draft { background: var(--dm-draft-bg); color: var(--dm-draft-fg); }
/* What the record IS (chart / chart template / HTML embed) — trails the meta row. */
.dm-badge--kind { background: var(--dm-kind-bg); color: var(--dm-black); margin-left: auto; text-transform: uppercase; }

.dm-latest { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 24px 0 18px; }
.dm-latest__title {
  margin: 0; font-weight: 700; font-size: 18px; color: #1a202c;
  letter-spacing: 0.9px; text-transform: uppercase;
}
/* Sits opposite the section title (.dm-latest is space-between), so it reads as a hint on
   the row rather than a second heading. */
.dm-latest__note { margin: 0; font-size: 13px; font-weight: 500; color: var(--dm-muted); }

/* Built-in templates on the Chart Templates tab. The card is the saved-record card, so the
   two grids read as one library; only the meta row differs, because a built-in is chosen as
   a starting point rather than opened as a document. */
.dm-badge--builtin { background: var(--dm-kind-bg); color: var(--dm-black); text-transform: uppercase; }
.dm-card--builtin .dm-card__time { margin-left: auto; }

.dm-empty { width: 100%; padding: 60px 20px; text-align: center; color: var(--dm-muted); }
.dm-pager { align-self: flex-end; margin-top: 16px; }
.dm-pager button { background: none; border: 0; font-family: var(--dm-font); font-weight: 600;
  font-size: 13px; color: #000; cursor: pointer; }

/* ======================================================================== */
/* Wizard chrome (Figma 1. Upload Data 177:554) — shared across steps 1–4.  */
/* ======================================================================== */
.dm-wizard { display: flex; flex-direction: column; min-height: 100vh; }
.dm-wizard__body { flex: 1; width: 100%; max-width: var(--dm-maxw); margin: 0 auto; padding: 25px 32px; }

/* ---- step-indicator bar ------------------------------------------------- */
.dm-stepbar { display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--dm-surface); padding: 25px 32px; }
.dm-step { flex: 1 0 0; min-width: 0; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--dm-border); border-radius: var(--dm-r-pill); padding: 12px 24px 12px 20px; }
.dm-step--active { border-color: #202020; }
.dm-step__num { flex: none; width: 22px; height: 22px; border-radius: 11px; background: var(--dm-border);
  color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.dm-step--active .dm-step__num { background: var(--dm-ink); }
.dm-step__label { font-weight: 500; font-size: 14px; color: var(--dm-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-step--active .dm-step__label { font-weight: 600; color: #000; }
.dm-step__sep { flex: none; }
/* completed steps are clickable to go back */
.dm-step--link { cursor: pointer; font-family: var(--dm-font); text-align: left; }
.dm-step--link:hover { border-color: var(--dm-ink); background: var(--dm-surface-2); }
.dm-step--link:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-step--done .dm-step__num { background: var(--dm-ink); }
.dm-step--done .dm-step__label { color: var(--dm-ink); }

/* ---- two-column panels + shared panel heads ----------------------------- */
.dm-upload__layout { display: flex; gap: 32px; align-items: stretch; width: 100%; }
.dm-upload__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.dm-vor { flex: none; width: 1px; align-self: stretch; background: var(--dm-border); }
.dm-panel__head { display: flex; flex-direction: column; gap: 6px; }
.dm-panel__title { font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--dm-ink); margin: 0; }
.dm-panel__sub { font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--dm-muted); margin: 0; }

/* ---- dropzone ----------------------------------------------------------- */
.dm-dropzone { background: #fcfcfc; border: 2px dashed #cfcfcf; border-radius: var(--dm-r-card);
  padding: 40px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  cursor: pointer; text-align: center; }
.dm-dropzone:hover, .dm-dropzone:focus-visible { border-color: #9ca3af; outline: none; }
.dm-dropzone:focus-visible { box-shadow: 0 0 0 3px rgba(205, 8, 8, 0.15); }
.dm-dropzone.is-dragover { border-color: var(--dm-ink); background: #f4f4f5; }
.dm-dropzone.is-error { border-color: var(--dm-brand); }
.dm-dropzone__content { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.dm-dropzone__iconbg { width: 52px; height: 52px; border-radius: 26px; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.dm-dropzone__iconbg--ok { background: var(--dm-published-bg); }
.dm-dropzone__icon { width: 24px; height: 24px; }
.dm-dropzone__text { display: flex; flex-direction: column; gap: 4px; }
.dm-dropzone__title { font-weight: 600; font-size: 16px; color: #1e1b4b; margin: 0; word-break: break-word; }
.dm-dropzone__hint { font-weight: 400; font-size: 13px; color: #000; margin: 0; }
.dm-dropzone__browse { display: inline-flex; align-items: center; gap: 6px; background: var(--dm-black);
  color: #fff; border-radius: var(--dm-r-pill); padding: 10px 24px; font-weight: 600; font-size: 13px; }
.dm-dropzone__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--dm-draft-fg); text-align: left; max-width: 420px; }
.dm-dropzone__error { margin: 0; font-weight: 600; font-size: 13px; color: var(--dm-brand); }

/* ---- sample dataset download (Designer frame 416:4535) ------------------ */
/* Sits under the dropzone in the designer lane. Deliberately quiet: it is an escape hatch
   for someone who hasn't got a file yet, not a second call to action competing with the
   dropzone above it. Measurements from the frame: 12px radius, 1.5px border, 13px/20px pad. */
.dm-samples { display: flex; flex-direction: column; gap: 12px; }
.dm-samples__label { font-weight: 600; font-size: 14px; color: var(--dm-ink); margin: 0; }
.dm-samples__select { width: 100%; border-width: 1.5px; border-radius: 12px; padding: 13px 20px; }

/* ---- recommendation card ------------------------------------------------ */
.dm-rec { display: flex; align-items: center; gap: 22px; text-align: left; width: 100%;
  background: #fff; border: 1px solid #e0e7ff; border-radius: var(--dm-r-card); padding: 20px;
  font-family: var(--dm-font); cursor: pointer; }
.dm-rec[disabled] { cursor: default; }
.dm-rec:not([disabled]):hover { border-color: #c7d2fe; }
.dm-rec:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-rec[aria-pressed="true"] { border-color: var(--dm-ink); }
.dm-rec__badge { flex: none; width: 127px; height: 113px; border: 1px solid var(--dm-border);
  border-radius: 12px; box-shadow: 0 2px 8px -4px rgba(0,0,0,0.03);
  display: flex; align-items: center; justify-content: center; color: #000; font-weight: 600; font-size: 14px; }
.dm-rec__badge--filled { background: #fff; }
.dm-rec__body-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-rec__title { font-weight: 700; font-size: 20px; line-height: 1.2; color: #0f172a; margin: 0; }
.dm-rec__body { font-weight: 400; font-size: 14px; line-height: 1.5; color: #000; margin: 0; }

/* ---- manual chart picker ------------------------------------------------ */
.dm-picker { display: flex; flex-direction: column; gap: 16px; }
.dm-picker__label { font-weight: 600; font-size: 12px; color: var(--dm-muted); margin: 0; }
.dm-chartgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
  background: #fff; border: 1px solid var(--dm-border); border-radius: var(--dm-r-card);
  padding: 16px; box-shadow: 0 6px 9px rgba(0,0,0,0.04); }
.dm-chartcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 140px; padding: 12px; background: #fff; border: 1px solid var(--dm-border); border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03); cursor: pointer; font-family: var(--dm-font); }
.dm-chartcard:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-chartcard[aria-pressed="true"] { background: #f5f5f5; border-color: #000; }
.dm-chartcard__glyph { height: 44px; display: flex; align-items: center; justify-content: center; }
.dm-chartcard__label { font-weight: 500; font-size: 13px; color: var(--dm-ink-2); text-align: center; }
.dm-chartcard[aria-pressed="true"] .dm-chartcard__label { font-weight: 600; color: #000; }

/* picker glyphs (grey bar grammar) */
.dm-glyph { display: flex; }
.dm-glyph--col { flex-direction: column; gap: 6px; align-items: flex-start; }
.dm-gbar { height: 8px; border-radius: 2px; background: #475569; }
.dm-gbar--lite { background: #94a3b8; }
.dm-glyph__grp { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.dm-glyph__grp + .dm-glyph__grp { margin-top: 6px; }
.dm-glyph__pie { width: 40px; height: 40px; display: block; }
.dm-glyph__line { width: 72px; height: 34px; display: block; }
.dm-glyph--table { flex-direction: column; gap: 3px; }
.dm-glyph__trow { display: flex; gap: 3px; }
.dm-gcell { width: 18px; height: 8px; border-radius: 2px; background: #475569; }
.dm-glyph--table .dm-glyph__trow:first-child .dm-gcell { background: #94a3b8; }
/* Stacked bars: columns of segments growing off a shared baseline, darker band on top —
   the one thing that reads differently from the ranked-bar glyphs at this size. */
.dm-glyph--stack { align-items: flex-end; gap: 6px; }
.dm-glyph__stk { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: 14px; }
.dm-gseg { width: 100%; border-radius: 2px; background: #475569; }
.dm-gseg--lite { background: #94a3b8; }
/* Schedule chart: the grouping column as one block beside the rows it spans. */
.dm-glyph--sched { gap: 3px; align-items: stretch; }
.dm-gband { width: 18px; border-radius: 2px; background: #94a3b8; }
.dm-glyph__srows { display: flex; flex-direction: column; gap: 3px; }

/* ---- bottom action bar -------------------------------------------------- */
/* Sticky to the viewport bottom so Back / Next / Publish stay reachable while
   scrolling long screens (tall preview, big data table); rests naturally at the
   end of the page when content is short. */
.dm-bottombar { width: 100%; background: #fff; border-top: 1px solid var(--dm-border);
  display: flex; justify-content: flex-end; padding: 10px 32px;
  position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06); }

/* ---- pill size + ghost back button (shared) ----------------------------- */
.dm-pill--sm { padding: 6px 12px; font-size: 13px; height: 32px; }
.dm-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  font-family: var(--dm-font); font-weight: 600; font-size: 14px; color: var(--dm-ink-2); cursor: pointer; }
.dm-back:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-bottombar--split { justify-content: space-between; align-items: center; }

/* Why the Next button in this bar is disabled, said next to the button rather than only at the
   field that is missing — a dark unpressable button with its reason elsewhere on a tall screen
   is how Designer flow B was reported broken twice (app/views/template-customize.js). Empty
   most of the time, and it must not push the buttons around when it fills. */
.dm-bottombar__why { margin: 0 auto 0 16px; font-size: 13px; color: var(--dm-ink-2); }
.dm-bottombar__why:empty { display: none; }

/* ---- native select (types + roles) ------------------------------------- */
.dm-select { font-family: var(--dm-font); font-size: 14px; color: var(--dm-ink);
  background: #fff; border: 1px solid var(--dm-border); border-radius: var(--dm-r-sm);
  padding: 9px 12px; width: 100%; cursor: pointer; }
.dm-select:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 1px; }
.dm-select.is-error { border-color: var(--dm-brand); }

/* ======================================================================== */
/* Data Verification (Figma 2. Data Verification 177:887).                  */
/* ======================================================================== */
.dm-verify__grid { display: flex; gap: 40px; align-items: flex-start; width: 100%; }
.dm-verify__left { flex: none; width: 350px; display: flex; flex-direction: column; gap: 24px; }
.dm-verify__right { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 15px; }

.dm-lg--num { color: #047857; }
.dm-lg--role { color: #1d4ed8; }
.dm-lg--empty { color: var(--dm-brand); }

/* data-check notes */
.dm-notes { border: 1px solid var(--dm-border); border-radius: 12px; padding: 14px 16px; }
.dm-notes--ok { border-color: #a7f3d0; background: var(--dm-published-bg); }
.dm-notes--info { border-color: #bfdbfe; background: #eff6ff; }
.dm-notes--warn { border-color: #fde68a; background: var(--dm-draft-bg); }
.dm-notes__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; line-height: 1.5; color: var(--dm-ink-2); }

/* role mapping */
.dm-roles { display: flex; flex-direction: column; gap: 12px; }
.dm-roles__note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--dm-muted); }
.dm-role { display: flex; flex-direction: column; gap: 5px; }
.dm-role__label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--dm-ink); }
.dm-role__req { font-weight: 600; font-size: 11px; color: var(--dm-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.dm-role__req.is-error { color: var(--dm-brand); }
.dm-role__hint { font-size: 12px; color: var(--dm-muted); }

/* right-panel header + hint */
.dm-verify__rowhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.dm-verify__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dm-verify__hint { margin: 0; font-size: 13px; color: var(--dm-muted); }
/* Preview search (both verify frames). Pill-shaped to sit level with the action pills beside
   it; the icon is absolute so the input keeps its own full click target. */
.dm-verify__searchwrap { position: relative; display: inline-flex; align-items: center; }
.dm-verify__searchicon { position: absolute; left: 10px; pointer-events: none; opacity: .55; }
.dm-verify__search { width: 200px; max-width: 100%; height: 30px; padding: 0 10px 0 30px;
  font-family: var(--dm-font); font-size: 13px; color: var(--dm-ink);
  background: #fff; border: 1px solid var(--dm-border); border-radius: 999px; }
.dm-verify__search::placeholder { color: var(--dm-muted); }
.dm-verify__search:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 1px; }

/* data table (spreadsheet-style, CSS grid keeps all rows column-aligned) */
.dm-dt { border: 1px solid var(--dm-border); border-radius: 12px; overflow: auto; width: 100%; background: #fff; }
/* No per-row min-width: every row grid must resolve identical tracks off the same
   container width, or long cells would widen only their own row and drift out of
   alignment. Columns fall back to their 120px min and the table scrolls when wide. */
.dm-dt__letters, .dm-dt__head, .dm-dt__row { display: grid; align-items: center; }
.dm-dt__letters { background: #f3f4f6; border-bottom: 1px solid var(--dm-border); height: 26px; }
.dm-dt__corner { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--dm-border); height: 100%; }
.dm-dt__letter { text-align: center; font-weight: 600; font-size: 11px; color: #9ca3af; border-right: 1px solid var(--dm-border);
  cursor: grab; user-select: none; height: 100%; display: flex; align-items: center; justify-content: center; }
.dm-dt__letter:last-child { border-right: 0; }
.dm-dt__letter:active { cursor: grabbing; }
.dm-dt__letter.is-dragging { opacity: 0.4; }
.dm-dt__letter.is-drop { background: #dbeafe; color: var(--dm-brand); box-shadow: inset 2px 0 0 var(--dm-brand); }
.dm-dt__head { background: #f1f5f9; padding: 8px 0; border-bottom: 1px solid var(--dm-border); }
.dm-dt__col { display: flex; flex-direction: column; gap: 6px; padding: 4px 12px; border-right: 1px solid #eef2f7; }
.dm-dt__col:last-child { border-right: 0; }
.dm-dt__colname { font-weight: 700; font-size: 13px; color: var(--dm-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-dt__col.is-num .dm-dt__colname { color: #047857; }
.dm-dt__col.is-role .dm-dt__colname { color: #1d4ed8; }
.dm-dt__type { font-family: var(--dm-font); font-size: 11px; color: var(--dm-muted); background: #fff;
  border: 1px solid var(--dm-border); border-radius: 6px; padding: 3px 6px; cursor: pointer; }
.dm-dt__type:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 1px; }
.dm-dt__rownum { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 10px 12px; font-size: 13px; color: #94a3b8; border-right: 1px solid var(--dm-border); }
.dm-dt__head .dm-dt__rownum { font-weight: 700; color: var(--dm-ink-2); }
.dm-dt__row { border-bottom: 1px solid #f3f4f6; }
.dm-dt__row:nth-child(even) { background: #f9fafb; }
.dm-dt__row:last-child { border-bottom: 0; }
.dm-dt__cell { padding: 10px 12px; font-size: 13px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-dt__cell.is-num { color: #047857; text-align: right; font-variant-numeric: tabular-nums; }
.dm-dt__cell.is-role { color: #1d4ed8; font-weight: 600; }
.dm-dt__cell.is-empty { background: #fef2f2; color: var(--dm-brand); }
.dm-dt__more { padding: 10px 12px; font-size: 12px; color: var(--dm-muted); border-top: 1px solid var(--dm-border); background: #fafafa; }

/* editable table: column-name inputs, cell inputs, and remove/add controls */
.dm-dt__colhead { display: flex; align-items: center; gap: 4px; }
.dm-dt__colname--input { flex: 1 1 auto; min-width: 0; font-family: inherit; background: transparent;
  border: 1px solid transparent; border-radius: 6px; padding: 2px 4px; cursor: text; }
.dm-dt__colname--input:hover { border-color: var(--dm-border); }
.dm-dt__colname--input:focus { outline: none; border-color: var(--dm-brand); background: #fff; }
.dm-dt__cellinput { width: 100%; font-family: inherit; font-size: 13px; color: inherit; background: transparent;
  border: 1px solid transparent; border-radius: 6px; padding: 2px 4px; }
.dm-dt__cellinput:hover { border-color: var(--dm-border); }
.dm-dt__cellinput:focus { outline: none; border-color: var(--dm-brand); background: #fff; }
.dm-dt__cellinput::placeholder { color: #cbd5e1; }
.dm-dt__iconbtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 18px; height: 18px; font-size: 15px; line-height: 1; color: var(--dm-muted); background: transparent;
  border: 0; border-radius: 4px; cursor: pointer; padding: 0; }
.dm-dt__iconbtn:hover { background: #fee2e2; color: var(--dm-brand); }
.dm-dt__iconbtn:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 1px; }
.dm-dt__iconbtn:disabled { opacity: 0; pointer-events: none; }
.dm-dt__rowremove { opacity: 0; }
.dm-dt__row:hover .dm-dt__rowremove, .dm-dt__rowremove:focus-visible { opacity: 1; }
.dm-dt__footer { display: flex; gap: 12px; justify-content: flex-end; width: 100%; }

@media (max-width: 860px) {
  .dm-upload__layout { flex-direction: column; }
  .dm-vor { width: 100%; height: 1px; }
  .dm-stepbar { flex-wrap: wrap; }
  .dm-step { flex: 1 1 45%; }
  .dm-verify__grid { flex-direction: column; }
  .dm-verify__left { width: 100%; }
}

/* Chart Design (design.js) — two-column: Customize panel + live-preview card */
.dm-design { display: flex; flex-direction: row; gap: 40px; align-items: flex-start;
  width: 100%; max-width: var(--dm-maxw); margin: 0 auto; padding: 28px 32px 40px; }
.dm-design__side { flex: none; width: 427px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.dm-design__stage { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dm-design__previewbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dm-design__notice:empty { display: none; }

/* mode tabs (Customize / Chat Bot Live Edit) */
.dm-design__tabs { display: flex; gap: 8px; }
.dm-design__tab { flex: 1 1 0; background: none; border: 0; border-bottom: 3px solid #e7e7e7;
  padding: 0 4px 12px; font-family: var(--dm-font); font-weight: 400; font-size: 19px; color: #676767;
  cursor: pointer; text-align: center; white-space: nowrap; }
.dm-design__tab.is-active { font-weight: 700; color: #000; border-bottom-color: #5a5a5a; }
.dm-design__tab:disabled { cursor: not-allowed; color: #a3a3a3; }
.dm-design__tab:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; border-radius: 4px; }

/* Customize control card */
.dm-design__card { background: #fff; border: 1px solid #eaeaea; border-radius: 12px;
  padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 16px; }

.dm-preview { background: #fff; border: 1px solid var(--dm-border); border-radius: var(--dm-r-card);
  box-shadow: var(--dm-shadow-card); padding: 16px; overflow: hidden; }
.dm-preview__inner { width: 100%; margin: 0 auto; transition: max-width .2s ease; }
.preview-frame { display: block; width: 100%; border: 0; min-height: 320px; background: #fff; }
/* Visualize preview card matches the Figma frame (deeper padding + drop shadow) */
.dm-design__stage .dm-preview { padding: 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04); }

/* history row under the preview (Designer frame 417:802) --------------------- */
/* The frame lays the three buttons edge to edge across the card; here the two real actions
   group left and the saved state takes the third slot, right-aligned so it reads as status
   rather than as a button someone forgot to style. Wraps on narrow stages. */
.dm-design__history { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.dm-design__historybtns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-design__saved { margin: 0; font-size: 12px; color: var(--dm-muted); }

/* preview device-width toggle */
.dm-devices { display: inline-flex; gap: 6px; }
.dm-device { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px;
  background: #fff; border: 1px solid var(--dm-border); border-radius: 6px; cursor: pointer; padding: 0; }
.dm-device.is-active { background: var(--dm-black); border-color: var(--dm-black); }
.dm-device:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-device__icon { width: 14px; height: 14px; filter: brightness(0) invert(0.6); }
.dm-device.is-active .dm-device__icon { filter: brightness(0) invert(1); }

/* config panels */
.dm-cfg__title { margin: 0; font-weight: 700; font-size: 12px; letter-spacing: 0.4px; color: #0f172a; text-transform: uppercase; }
.dm-cfg__hint { margin: 0; font-size: 12px; color: var(--dm-muted); }
.dm-cfg__warn { margin: 0; font-size: 12px; color: var(--dm-draft-fg); }
.dm-cfg__warn:empty { display: none; }
.dm-cfg__stack, .dm-cfg__stack-host { display: flex; flex-direction: column; gap: 16px; }
.dm-cfg__row { display: flex; gap: 20px; align-items: flex-start; }
.dm-cfg__row--wrap { flex-wrap: wrap; }
.dm-cfg__field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 220px; min-width: 0; }
.dm-cfg__field--inline { flex: 0 0 auto; }
.dm-cfg__label { font-weight: 600; font-size: 12px; color: var(--dm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* grouped card sections */
.dm-cfg__group { display: flex; flex-direction: column; gap: 12px; }
/* The greyed-out group and its "Coming soon" chip are gone with the Typography placeholder —
   that was the only group that used them, and it now states real approved values. */

/* stacked labelled field */
.dm-field { display: flex; flex-direction: column; gap: 5px; }
.dm-field.is-disabled { opacity: 0.65; }
.dm-field__label { font-weight: 700; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: #0f172a; }

.dm-input { font-family: var(--dm-font); font-size: 14px; color: var(--dm-ink); background: #fff;
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 12px; width: 100%; }
.dm-input:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 1px; }
.dm-input::placeholder { color: #9ca3af; }
.dm-input:disabled { background: #f8fafc; cursor: not-allowed; }
.dm-select--sm { font-size: 13px; padding: 6px 8px; }

/* chart-type switcher (rectangular chips) */
.dm-typegrid { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-typepill { font-family: var(--dm-font); font-size: 11px; font-weight: 500; color: var(--dm-ink-2);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.dm-typepill:hover { border-color: #cbd5e1; }
.dm-typepill.is-active { background: var(--dm-black); border-color: var(--dm-black); color: #fff; }
.dm-typepill:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }

/* typography block — the approved spec per chart text style, read-only. Rows are inset and
   borderless so the block reads as information rather than as controls someone disabled. */
.dm-typo { display: flex; flex-direction: column; gap: 4px; }
.dm-typo__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-left: 2px solid var(--dm-border); padding-left: 10px; }
.dm-typo__name { font-size: 12px; color: var(--dm-ink); }
.dm-typo__spec { font-size: 11px; color: var(--dm-muted); font-variant-numeric: tabular-nums; }
.dm-typo__ink { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.12); }

/* refine block (sort + color) */
.dm-refine { display: flex; flex-direction: column; gap: 6px; }
.dm-refine__family { align-self: flex-start; min-width: 170px; }
.dm-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dm-segbtn { font-family: var(--dm-font); font-size: 12px; color: var(--dm-ink-2); background: #fff;
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.dm-segbtn.is-active { background: var(--dm-black); border-color: var(--dm-black); color: #fff; }
.dm-segbtn:disabled { color: var(--dm-muted); cursor: not-allowed; opacity: 0.6; }
.dm-segbtn:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }

/* palette — single-color swatches (sequential). The custom `<input type=color>` that used to
   sit at the end of this row is gone: approved colors only, so there is no free hex. */
.dm-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dm-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); cursor: pointer; padding: 0; }
.dm-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dm-black); }
.dm-swatch:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }

/* palette — categorical preset chips */
.dm-palchip { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; background: #fff;
  border: 1px solid var(--dm-border); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.dm-palchip.is-active { border-color: var(--dm-black); box-shadow: 0 0 0 1px var(--dm-black); }
.dm-palchip:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-palchip__row { display: inline-flex; gap: 3px; }
.dm-palchip__dot { width: 16px; height: 16px; border-radius: 4px; }
.dm-palchip__name { font-size: 11px; font-weight: 600; color: var(--dm-ink-2); }

/* tab toggle: [hidden] must beat the flex/block display set on the panels above */
.dm-design [hidden] { display: none !important; }

/* Chat Bot Live Edit panel (chat.js — Figma node 202:351) */
.dm-chat { display: flex; flex-direction: column; gap: 20px; }
.dm-chat__intro { display: flex; flex-direction: column; gap: 8px; }
.dm-chat__title { margin: 0; font-size: 21px; font-weight: 700; color: #0f172a; }
.dm-chat__sub { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dm-ink); }

.dm-chat__log { display: flex; flex-direction: column; gap: 20px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  max-height: 460px; overflow-y: auto; }

.dm-chat__msg { display: flex; gap: 16px; align-items: flex-start; }
.dm-chat__avatar { flex: none; width: 36px; height: 36px; border-radius: 18px; display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.dm-chat__avatar--user { background: var(--dm-black); }
.dm-chat__avatar--bot { background: var(--dm-brand); }
.dm-chat__boticon { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.dm-chat__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dm-chat__meta { display: flex; align-items: center; gap: 8px; }
.dm-chat__who { font-size: 13px; font-weight: 600; color: #0f172a; }
.dm-chat__time { font-size: 11px; color: #475569; opacity: 0.6; }
.dm-chat__bubble { border-radius: 12px; padding: 16px; border: 1px solid #e3e8f0; }
.dm-chat__bubble--user { background: #fff; }
.dm-chat__bubble--bot { background: #f2f2f2; }
.dm-chat__bubble--error { background: var(--dm-draft-bg); border-color: var(--dm-draft-fg); }
.dm-chat__text { margin: 0; font-size: 14px; line-height: 1.5; color: #0f172a; white-space: pre-wrap; }

/* propose-and-pick: approved palettes offered inside a bot bubble. Reuses .dm-palchip so
   a swatch in chat is the same object as a swatch in the Customize panel — same shape,
   same active state — because picking one does exactly the same thing. */
.dm-chat__palettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dm-chat__palchip { flex: 1 1 140px; align-items: stretch; background: #fff; }
.dm-chat__palchip .dm-palchip__row { flex-wrap: wrap; }
/* The step names ("Indigo 500 · Indigo 300") are the reason an editor can trust the pick,
   so they are shown rather than hidden in a tooltip. */
.dm-chat__palnote { font-size: 10px; line-height: 1.3; color: var(--dm-muted); }
.dm-chat__pickstatus { margin: 10px 0 0; font-size: 12px; color: var(--dm-muted); }
.dm-chat__pickstatus:empty { display: none; }

.dm-chat__typing { display: inline-flex; gap: 4px; align-items: center; height: 14px; }
.dm-chat__typing span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8;
  animation: dm-chat-blink 1.2s infinite both; }
.dm-chat__typing span:nth-child(2) { animation-delay: 0.2s; }
.dm-chat__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dm-chat-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.dm-chat__composer { display: flex; align-items: flex-end; gap: 12px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 16px; padding: 12px; }
.dm-chat__input { flex: 1 1 0; min-width: 0; border: 0; resize: none; background: none;
  font-family: var(--dm-font); font-size: 14px; line-height: 1.4; color: var(--dm-ink);
  max-height: 120px; overflow-y: auto; }
.dm-chat__input:focus { outline: none; }
.dm-chat__input::placeholder { color: #475569; opacity: 0.7; }
.dm-chat__input:disabled { opacity: 0.6; }
.dm-chat__send { flex: none; width: 38px; height: 36px; border: 0; border-radius: 8px;
  background: var(--dm-black); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dm-chat__send:hover:not(:disabled) { background: #1a1a1a; }
.dm-chat__send:disabled { opacity: 0.45; cursor: not-allowed; }
.dm-chat__send:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-chat__sendicon { width: 16px; height: 16px; filter: brightness(0) invert(1); }

@media (max-width: 980px) {
  .dm-design { flex-direction: column; gap: 24px; padding: 24px 20px 40px; }
  .dm-design__side { width: 100%; }
}
@media (max-width: 860px) {
  .dm-cfg__row { flex-direction: column; gap: 12px; }
  .dm-cfg__field { flex: 1 1 auto; width: 100%; }
}

/* ======================================================================== */
/* Publish & Embed (publish-view.js — Figma 4. Publish & Embed 177:3102).   */
/* ======================================================================== */
.dm-pub { display: flex; gap: 40px; align-items: flex-start; width: 100%; }
.dm-pub__panel { flex: none; width: 513px; max-width: 100%; display: flex; flex-direction: column; gap: 24px;
  border: 1px solid var(--dm-border); border-radius: var(--dm-r-card); padding: 32px; background: #fff; }
.dm-pub__previewcol { flex: 1 0 0; min-width: 0; }
.dm-pub__title { margin: 0; font-weight: 700; font-size: 24px; color: var(--dm-ink); }

.dm-pub__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-pub__statusnote { font-size: 13px; color: var(--dm-muted); }

.dm-pub__section { display: flex; gap: 16px; align-items: flex-start; }
.dm-pub__sectionicon { flex: none; width: 24px; display: flex; justify-content: center; padding-top: 4px; }
.dm-pub__sectionbody { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dm-pub__label { margin: 0; font-size: 13px; color: var(--dm-ink); }
.dm-pub__label strong { font-weight: 700; }
.dm-icon--lg { width: 20px; height: 20px; }

.dm-pub__divider { height: 0; border-top: 1px solid var(--dm-border); width: 100%; }

/* copy field: read-only value + copy button + status line */
.dm-copyfield-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.dm-copyfield { display: flex; gap: 8px; align-items: stretch; width: 100%; }
.dm-copyfield__input { flex: 1 0 0; min-width: 0; font-family: var(--dm-font); font-size: 13px; color: var(--dm-ink-2);
  background: #f9fafb; border: 1px solid var(--dm-border); border-radius: 4px; padding: 10px 12px; }
.dm-copyfield__input:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 1px; }
.dm-copyfield__input--multi { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  line-height: 1.5; resize: vertical; white-space: pre; overflow: auto; }
.dm-copyfield__btn { flex: none; width: 38px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; padding: 0; }
.dm-copyfield__btn:hover { background: #f9fafb; }
.dm-copyfield__btn:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-copyfield__btn.is-copied { border-color: var(--dm-published-fg); background: var(--dm-published-bg); }
.dm-copyfield__icon { width: 16px; height: 16px; display: block; }
.dm-copyfield__status { font-size: 12px; color: var(--dm-published-fg); min-height: 14px; }
.dm-copyfield__status:empty { min-height: 0; }

/* publish/export block */
.dm-pub__export { display: flex; flex-direction: column; gap: 12px; }
.dm-pub__exporthead { margin: 0; font-weight: 700; font-size: 16px; color: var(--dm-ink); }
.dm-pub__hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dm-muted); }
.dm-pub__publishbtn { align-self: flex-start; }
.dm-pub__errors:empty { display: none; }

/* right-column preview card */
.dm-pub__preview { height: 100%; }

@media (max-width: 980px) {
  .dm-pub { flex-direction: column; }
  .dm-pub__panel { width: 100%; }
  .dm-pub__previewcol { width: 100%; }
}

/* ======================================================================== */
/* Designer template flow (Figma 269:901, 278:389, 517:4184, 517:4437,      */
/* 415:748) — "Create a New Chart Template" → Customize → Publish.          */
/* Designer Mode only; the router keeps editors out of these three routes.  */
/* ======================================================================== */

/* ---- step 1: upload a design (269:901) ---------------------------------- */
.dm-tplnew { display: flex; flex-direction: column; gap: 28px; }
.dm-tplnew__head { max-width: 760px; }
/* The frame sets the two cards side by side at equal width; they stack under 820px rather
   than squeezing a URL field and a drop target into half a phone. */
.dm-tplnew__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dm-tplnew__attached { margin: 0; font-size: 13px; color: var(--dm-muted); }
.dm-tplnew__attached.is-set { color: var(--dm-ink); font-weight: 600; }
/* A rejected file is reported here as well as on the card: this is the line next to the Next
   button the rejection disables (see template-new.js). */
.dm-tplnew__attached.is-error { color: var(--dm-brand); font-weight: 600; }

/* The frame draws both cards with a red dashed border. Red reads as an error, so the dash
   stays and the red is spent only on dragover and on a rejected file (see template-new.js). */
.dm-tplcard { display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: #fff; border: 2px dashed #d4d4d8; border-radius: var(--dm-r-card);
  box-shadow: var(--dm-shadow-card); }
.dm-tplcard.is-dragover { border-color: var(--dm-brand); background: #fffafa; }
.dm-tplcard.is-error { border-color: var(--dm-brand); }
.dm-tplcard--sm { padding: 16px; gap: 10px; }
.dm-tplcard__head { display: flex; align-items: center; gap: 10px; }
.dm-tplcard__glyph { width: 24px; height: 24px; display: block; flex: none; }
.dm-tplcard__title { margin: 0; font-weight: 700; font-size: 16px; color: var(--dm-ink); }
.dm-tplcard__body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--dm-muted); }
.dm-tplcard__input { border-radius: var(--dm-r-pill); padding: 10px 16px; }
.dm-tplcard__cta { align-self: flex-start; }
.dm-tplcard__status { margin: 0; font-size: 12px; font-weight: 600; color: var(--dm-ink); }
.dm-tplcard__status:empty, .dm-tplcard__error:empty { display: none; }
.dm-tplcard__error { margin: 0; font-size: 12px; color: var(--dm-brand); }

/* "Or, try another option" (300:405) */
.dm-tplopts { display: flex; flex-direction: column; gap: 12px; }
.dm-tplopts__label { margin: 0; }
.dm-tplopts__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dm-tplopt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 16px 20px; background: #fff; border: 1px solid var(--dm-border); border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03); cursor: pointer; font-family: var(--dm-font); }
.dm-tplopt:hover { border-color: #cbd5e1; }
.dm-tplopt:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-tplopt__title { font-weight: 600; font-size: 14px; color: var(--dm-ink); }
.dm-tplopt__body { font-size: 12px; line-height: 1.5; color: var(--dm-muted); }

@media (max-width: 820px) {
  .dm-tplnew__cards, .dm-tplopts__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- step 2: customize design (517:4208 workspace-layout) --------------- */
/* Centred title bar above the workspace (278:389 top-bar). */
.dm-tplbar { width: 100%; background: #fff; border-bottom: 1px solid var(--dm-border);
  padding: 18px 20px; display: flex; justify-content: center; }
.dm-tplbar__title { margin: 0; font-weight: 700; font-size: 24px; color: var(--dm-ink); }

/* The four columns the frame measures: rail 80, middle panel 276, canvas 784, sidebar 280.
   The canvas is the flexible one, so a narrower window shrinks the preview rather than the
   controls; under 1180px the whole thing stacks. */
.dm-tplwork { display: flex; align-items: stretch; gap: 0; width: 100%;
  background: var(--dm-surface-2); min-height: 560px; }
.dm-tplrail { flex: none; width: 80px; background: #fff; border-right: 1px solid var(--dm-border);
  display: flex; flex-direction: column; padding: 16px 0; gap: 4px; }
.dm-tplrail__btn { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; background: none; border: 0; border-left: 3px solid transparent;
  cursor: pointer; font-family: var(--dm-font); color: #475569; }
.dm-tplrail__btn.is-active { color: var(--dm-brand); border-left-color: var(--dm-brand); background: #fef6f6; }
.dm-tplrail__btn:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: -2px; }
.dm-tplrail__label { font-size: 11px; font-weight: 600; }
/* One committed SVG per rail icon, recoloured by CSS: the frame draws each one grey when idle
   and Variety red when active, and a mask is the only way to do that without either exporting
   two copies of every icon or hand-editing vector data we didn't author. */
.dm-maskicon, .dm-tplrail__icon { display: block; background-color: currentColor;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.dm-maskicon { width: 16px; height: 16px; }
.dm-tplrail__icon { width: 20px; height: 20px; }

/* Middle panel — hidden on the Text tab, which has no middle column in the comp. */
.dm-tplmid { flex: none; width: 276px; background: #fff; border-right: 1px solid var(--dm-border);
  padding: 20px 16px; overflow-y: auto; }
.dm-tplmid[hidden] { display: none; }
.dm-tplpanel { display: flex; flex-direction: column; gap: 16px; }
.dm-tplpanel__title { margin: 0; font-weight: 700; font-size: 14px; color: var(--dm-ink); }
.dm-tplpanel__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dm-muted); }

.dm-tplcanvas { flex: 1 1 auto; min-width: 0; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dm-tplpreview { width: 100%; }

/* The build bar above the canvas: what the model made of the uploaded design, or how it
   failed, or that it is still working. It sits above the preview because on a first visit
   it is the only thing on this screen with anything to say. */
.dm-tplbuild { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: #fff; border: 1px solid var(--dm-border); border-radius: 12px; padding: 12px 16px; }
.dm-tplbuild__line { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 13px; line-height: 1.5;
  color: var(--dm-ink-2); }
/* The model's own aside about what it could not tell from the comp — quieter than the
   headline, and on its own row so it never squeezes the button. */
.dm-tplbuild__note { margin: 0; flex: 1 1 100%; font-size: 12px; line-height: 1.5;
  color: var(--dm-muted); }
.dm-tplbuild__note:empty { display: none; }
/* Working. The left edge pulses rather than a spinner: this runs for up to a minute, and a
   spinner that long reads as hung. Held still for anyone who asked for less motion. */
.dm-tplbuild.is-busy { border-color: #cbd5e1; box-shadow: inset 3px 0 0 0 var(--dm-brand);
  animation: dm-build-pulse 1.8s ease-in-out infinite; }
@keyframes dm-build-pulse { 0%, 100% { box-shadow: inset 3px 0 0 0 var(--dm-brand); }
  50% { box-shadow: inset 3px 0 0 0 #f3b8b8; } }
@media (prefers-reduced-motion: reduce) {
  .dm-tplbuild.is-busy { animation: none; }
}

/* The attached design, kept beside the live preview — the whole reason for storing it. */
.dm-tplref { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  background: #fff; border: 1px solid var(--dm-border); border-radius: 12px; padding: 14px 16px; }
.dm-tplref__img { max-width: 100%; height: auto; display: block; border: 1px solid var(--dm-border);
  border-radius: 8px; }
.dm-tplref__label { margin: 0; font-size: 12px; color: var(--dm-muted); word-break: break-all; }
.dm-tplref__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--dm-ink); text-decoration: none; border: 1px solid var(--dm-border); border-radius: 8px;
  padding: 8px 12px; }
.dm-tplref__link:hover { border-color: #cbd5e1; }
.dm-tplref__link:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }

.dm-tplside { flex: none; width: 280px; background: #fff; border-left: 1px solid var(--dm-border);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.dm-tplside__styles { display: flex; flex-direction: column; gap: 14px; }
.dm-tplside__saved { margin: 0; align-self: flex-start; font-size: 12px; font-weight: 600; color: #fff;
  background: var(--dm-black); border-radius: var(--dm-r-pill); padding: 6px 14px; }

/* Collapsible per-text-style section (517:4338 and the four collapsed rows below it). */
.dm-tplsec { border: 1px solid var(--dm-border); border-radius: 10px; overflow: hidden; }
.dm-tplsec__head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #fff; border: 0; cursor: pointer; font-family: var(--dm-font); text-align: left; }
.dm-tplsec__head:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: -2px; }
.dm-tplsec__label { flex: 1 0 0; font-weight: 600; font-size: 13px; color: var(--dm-ink); }
.dm-tplsec__pencil { width: 12px; height: 12px; display: block; flex: none; }
.dm-tplsec__chev { flex: none; transition: transform .15s ease; }
.dm-tplsec__head[aria-expanded="true"] .dm-tplsec__chev { transform: rotate(180deg); }
.dm-tplsec__body { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px;
  border-top: 1px solid var(--dm-border-2); }
.dm-tplsec__body[hidden] { display: none; }
.dm-tplsec__grouptitle { margin: 8px 0 0; font-weight: 700; font-size: 11px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--dm-label); }
.dm-tplsec__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* An approved value with no alternative. Not styled as a disabled control: nothing here was
   ever a control, so greying it out would only suggest it could have been switched on. */
.dm-tplsec__locked { font-size: 12px; color: var(--dm-ink); text-align: right; }
.dm-tplsec__colour { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dm-ink); }

/* Background swatches are squares, not the palette's circles: a background is an area. */
.dm-swatch--bg { width: 26px; height: 26px; border-radius: 6px; }

/* ---- editor-capability checkboxes (517:4408), shared by steps 2 and 3 ---- */
.dm-checkrow { display: flex; align-items: flex-start; gap: 10px; }
.dm-check { flex: none; width: 18px; height: 18px; margin-top: 2px; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; }
.dm-check.is-on { background: var(--dm-brand); border-color: var(--dm-brand); }
.dm-check:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }
.dm-check__tick { width: 10px; height: 10px; display: none; }
.dm-check.is-on .dm-check__tick { display: block; }
.dm-checkrow__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-checkrow__label { margin: 0; font-weight: 600; font-size: 13px; color: var(--dm-ink); }
.dm-checkrow__note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--dm-muted); }

@media (max-width: 1180px) {
  .dm-tplwork { flex-wrap: wrap; }
  .dm-tplrail { width: 100%; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--dm-border); }
  .dm-tplrail__btn { border-left: 0; border-bottom: 3px solid transparent; }
  .dm-tplrail__btn.is-active { border-left-color: transparent; border-bottom-color: var(--dm-brand); }
  .dm-tplmid, .dm-tplside, .dm-tplcanvas { width: 100%; flex: 1 1 100%; }
  .dm-tplside { border-left: 0; border-top: 1px solid var(--dm-border); }
}

/* ---- step 3: finalize template for editors (415:748) -------------------- */
.dm-tplfinal { display: flex; align-items: flex-start; gap: 24px; }
.dm-tplfinal__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dm-tplfinal__card { background: #fff; border: 1px solid var(--dm-border); border-radius: var(--dm-r-card);
  box-shadow: var(--dm-shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dm-tplfinal__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dm-tplfinal__title { margin: 0; font-weight: 700; font-size: 18px; color: var(--dm-ink); }
.dm-tplfinal__sub { margin: 0; font-size: 12px; color: var(--dm-muted); }
.dm-tplfinal__ref { margin: 0; font-size: 12px; color: var(--dm-muted); word-break: break-all; }
.dm-tplfinal__notice:empty { display: none; }
/* The frame's red uppercase eyebrow. Tool chrome may use the logo red; charts may not. */
.dm-eyebrow--brand { color: var(--dm-brand); }

/* The frame's green SAVED pill, reporting the real save state rather than decorating. */
.dm-savedbadge { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--dm-draft-fg); background: var(--dm-draft-bg); border-radius: var(--dm-r-pill);
  padding: 3px 10px; }
.dm-savedbadge.is-saved { color: var(--dm-published-fg); background: var(--dm-published-bg); }

.dm-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  padding: 0; background: #fff; border: 1px solid var(--dm-border); border-radius: 6px; cursor: pointer; }
.dm-iconbtn:hover { border-color: #cbd5e1; }
.dm-iconbtn:focus-visible { outline: 2px solid var(--dm-brand); outline-offset: 2px; }

/* "How do editors use this?" info panel */
.dm-tplinfo { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px; }
.dm-tplinfo__head { margin: 0; display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; color: #1e3a8a; }
.dm-tplinfo__body { margin: 0; font-size: 13px; line-height: 1.6; color: #1e40af; }

/* Template Settings card */
.dm-tplsettings { flex: none; width: 320px; background: #fff; border: 1px solid var(--dm-border);
  border-radius: var(--dm-r-card); box-shadow: var(--dm-shadow-card); padding: 20px;
  display: flex; flex-direction: column; gap: 14px; }
.dm-tplsettings__title { margin: 0; font-weight: 700; font-size: 16px; color: var(--dm-ink); }
.dm-tplsettings__sub { margin: 0; font-weight: 700; font-size: 11px; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--dm-label); }
.dm-input--area { resize: vertical; line-height: 1.5; }

@media (max-width: 980px) {
  .dm-tplfinal { flex-direction: column; }
  .dm-tplsettings { width: 100%; }
}

/* ---- published templates in the editor's picker ------------------------- */
/* Added, not in either upload frame: a designer publishing a template is publishing it TO
   this screen. Empty (and invisible) until something is published. */
.dm-teamtpl { display: flex; flex-direction: column; gap: 16px; }
.dm-teamtpl:empty { display: none; }
.dm-chartcard--team { border-color: #cbd5e1; }
.dm-chartcard__meta { font-size: 11px; color: var(--dm-muted); text-align: center; }

/* A control the designer switched off. The reason replaces the control (config-panel.js). */
.dm-refine--locked { padding: 10px 12px; background: var(--dm-surface-2); border-radius: 8px; }
.dm-verify__hint.is-locked { color: var(--dm-draft-fg); }

/* An empty state inside a card rather than a whole screen. */
.dm-empty--inline { padding: 40px 16px; font-size: 13px; }

/* ======================================================================== */
/* Designer HTML-embed flow (Figma 304:403 → 522:5706) — "Upload an HTML    */
/* File to Embed and Publish Live" → "Publish & Embed". Two screens, which  */
/* is the whole flow: the designer's file is already finished. Designer Mode */
/* only; the router keeps editors out of both routes.                       */
/* ======================================================================== */

/* ---- step 1: upload the file (304:438) ---------------------------------- */
/* The frame centres the whole column, unlike the template flow's left-aligned head — it is
   one drop target and nothing else, so there is nothing to align to on the left. */
.dm-embednew { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.dm-embednew__head { max-width: 720px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
/* 36px in the comp; 30px here, the size every other headline in the app was scaled to from
   the same 1440px frames (see the note in embed-new.js). */
.dm-embednew__title { margin: 0; font-weight: 800; font-size: 30px; line-height: 1.2; color: var(--dm-ink); }
.dm-embednew__title:focus-visible { outline: none; }
.dm-embednew__sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dm-muted); }
/* The white card the frame draws the dashed zone inside (304:441). */
.dm-embednew__card { width: 100%; max-width: 860px; background: #fff; border: 1px solid var(--dm-border);
  border-radius: 20px; box-shadow: var(--dm-shadow-card); padding: 20px; }
.dm-embednew__opts { width: 100%; max-width: 860px; }

/* ---- step 2: publish & embed (522:5706) --------------------------------- */
/* The right column: the designer's own file, in a sandbox with no access to Data Muse. */
.dm-embedpreview { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.dm-embedpreview__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-embedpreview__title { margin: 0; font-weight: 700; font-size: 15px; color: var(--dm-ink); }
.dm-embedpreview__sub { margin: 0; font-size: 12px; color: var(--dm-muted); word-break: break-word; }
.dm-embedpreview__note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--dm-label); }
/* Sized in JS from the height field, so no height here — only the frame's own chrome. The
   white background matters: an embed authored for a white article page must not be judged
   against the app's grey surface. */
.dm-embedframe { width: 100%; border: 1px solid var(--dm-border); border-radius: 10px;
  background: #fff; display: block; }

/* The embed height control — the comp's hard-coded height="450px", made editable. */
.dm-embedheight { display: flex; flex-direction: column; gap: 8px; }
.dm-embedheight__row { display: flex; align-items: center; gap: 8px; }
.dm-embedheight__input { width: 120px; }
.dm-embedheight__unit { font-size: 13px; color: var(--dm-muted); }