/* demo.css — "Try the apps": a clickable demo of each app on the home page.

   Loaded by index.html only. demo.js owns the behaviour; demo/<app>.js holds
   each app's story. Inherits the page's world (styles.css tokens): the stage is
   the hero's ink panel, the app window is the hero preview's window, and the
   app drawn inside it speaks the PRODUCT's own UI language — bordered badges
   without dots, green for a confirming action, amber for a hold, violet only
   for words a model wrote.

   ── LAYERS ──────────────────────────────────────────────────────────────────
   .demo           the section (hidden until demo.js has a demo to show)
   .demo__stage    the ink panel
   .demo__picker   one pill per app (each carries data-app, so an app the
                   operator hides leaves with its pill)
   .demo__window   browser chrome + .demo__screen, where a story renders
   .demo__guide    progress, what is happening, and the controls
   .dk-*           the demo app's own component kit (dk = demo kit) */

/* ---- Section + stage ------------------------------------------------------ */
.demo { padding-top: 0; }
.demo[hidden] { display: none; }

.demo__stage {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  color: var(--on-ink);
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(42, 93, 219, 0.30), transparent 72%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(156, 201, 255, 0.08), transparent 70%),
    var(--ink);
}

.demo__head { max-width: 50rem; margin: 0 auto; text-align: center; }
.demo__kicker {
  display: block; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sky); margin-bottom: var(--sp-xs);
}
.demo__title {
  font-size: var(--fs-h2); font-weight: 450; letter-spacing: -0.025em;
  line-height: 1.1; text-wrap: balance; color: var(--on-ink);
}
.demo__intro {
  margin: var(--sp-s) auto 0; max-width: 54ch; font-size: var(--fs-lead); text-wrap: pretty;
  color: color-mix(in srgb, var(--on-ink) 76%, var(--ink));
}

/* ---- App picker ------------------------------------------------------------
   A dock of the apps' own logos — the same icon on the same colour as the
   product's app switcher — with the name under each. Wraps never: one row on
   a wide screen, one swipeable row on a phone, faded at both ends there so the
   row says it continues (same rule as the hero's names). */
.demo__picker {
  margin: var(--sp-m) auto var(--sp-m);
  display: flex; justify-content: center; gap: clamp(0.25rem, 1vw, 0.75rem);
  max-width: 66rem;
}
.demo__app {
  flex: 0 0 auto; width: 6.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.25rem 0.5rem;
  font: inherit; color: color-mix(in srgb, var(--on-ink) 72%, var(--ink));
  background: transparent; border: 0; border-radius: var(--radius-s);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.demo__logo {
  width: 3.25rem; height: 3.25rem; border-radius: 15px; flex: none;
  display: grid; place-items: center;
  background: var(--tone, var(--accent)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -8px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.demo__logo svg { width: 1.5rem; height: 1.5rem; }
.demo__name {
  font-size: var(--fs-xs); font-weight: 550; line-height: 1.25; text-align: center;
  text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.demo__app:hover { color: var(--on-ink); }
.demo__app:hover .demo__logo { transform: translateY(-2px); }
.demo__app[aria-selected="true"] { color: var(--on-ink); }
.demo__app[aria-selected="true"] .demo__name { font-weight: 650; }
.demo__app[aria-selected="true"] .demo__logo {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 2.5px var(--ink), 0 0 0 4.5px var(--on-ink), 0 10px 20px -8px rgba(0, 0, 0, 0.7);
}
.demo__app:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

@media (max-width: 76rem) {
  .demo__picker {
    justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 0.35rem 1rem; margin-inline: -1rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
  }
  .demo__picker::-webkit-scrollbar { display: none; }
}
@media (max-width: 40rem) {
  .demo__app { width: 5.25rem; }
  .demo__logo { width: 2.85rem; height: 2.85rem; border-radius: 13px; }
  .demo__logo svg { width: 1.3rem; height: 1.3rem; }
}

/* ---- The window ------------------------------------------------------------ */
.demo__player { max-width: 66rem; margin: 0 auto; }
.demo__window {
  position: relative;
  background: #F6F7F9;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(6, 22, 39, 0.20),
    0 24px 48px -24px rgba(0, 0, 0, 0.55);
  color: var(--text);
  text-align: left;
}
.demo__chrome {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: #fff; border-bottom: 1px solid var(--border-soft);
}
.demo__lights { display: inline-flex; gap: 6px; flex: none; }
.demo__lights i { width: 10px; height: 10px; border-radius: 50%; background: #E3E6EA; }
.demo__url {
  flex: 1; min-width: 0;
  font-size: 0.78rem; color: var(--text-muted);
  background: var(--tint); border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo__url b { font-weight: 600; color: var(--text); }
.demo__screen {
  position: relative;
  container-type: inline-size; container-name: dscreen;
  /* The window and its guide fit one laptop screen together. */
  height: clamp(22rem, calc(100vh - 24rem), 34rem);
  height: clamp(22rem, calc(100svh - 24rem), 34rem);
  overflow: hidden;
}
@media (max-width: 40rem) {
  .demo__screen { height: max(22rem, min(32rem, calc(100vh - 16rem))); height: max(22rem, min(32rem, calc(100svh - 16rem))); }
    /* On a phone every pixel of width goes to the app window. */
  .demo > .wrap { padding-inline: 0.75rem; }
  .demo__stage { padding-inline: 0.875rem; border-radius: var(--radius-l); }
  .demo__head { padding-inline: 0.25rem; }
}

/* Loading / error states inside the screen. */
.demo__state {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.75rem;
  color: var(--text-muted); font-size: var(--fs-sm); text-align: center; padding: 1.5rem;
}
.demo__spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--border); border-top-color: var(--accent);
  animation: demo-spin 0.8s linear infinite;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }

/* ---- The pointer ------------------------------------------------------------
   Only while "Watch it" is running: it glides to the next thing to press and
   presses it, so a visitor who would rather watch can sit back. */
.demo__cursor {
  position: absolute; left: 0; top: 0; z-index: 20;
  width: 26px; height: 26px; pointer-events: none;
  opacity: 0; transform: translate(-40px, -40px);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  filter: drop-shadow(0 2px 3px rgba(6, 22, 39, 0.35));
}
.demo__cursor[data-on] { opacity: 1; }
.demo__cursor svg { display: block; width: 100%; height: 100%; }
.demo__press {
  position: absolute; z-index: 19; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; pointer-events: none;
  background: rgba(42, 93, 219, 0.28);
  animation: demo-press 0.45s ease-out forwards;
}
@keyframes demo-press { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* The next thing to press. An outline (not a halo) that breathes outward. */
.demo__screen [data-go] { position: relative; }
.demo__screen .is-next {
  outline: 2px solid var(--accent); outline-offset: 3px;
  animation: demo-ring 1.6s ease-in-out infinite;
}
@keyframes demo-ring {
  0%, 100% { outline-offset: 3px; outline-color: rgba(42, 93, 219, 1); }
  50%      { outline-offset: 7px; outline-color: rgba(42, 93, 219, 0.35); }
}

/* ---- Guide ------------------------------------------------------------------ */
.demo__guide {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-s) var(--sp-m);
  margin-top: var(--sp-m);
  text-align: left;
}
.demo__progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; }
.demo__count {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
  color: color-mix(in srgb, var(--on-ink) 70%, var(--ink));
  font-variant-numeric: tabular-nums;
}
.demo__bars { display: flex; gap: 4px; flex: 1; max-width: 16rem; }
.demo__bars i {
  flex: 1; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--on-ink) 18%, transparent);
  transition: background-color 0.3s ease;
}
.demo__bars i[data-s="done"] { background: var(--sky); }
.demo__bars i[data-s="now"] { background: var(--on-ink); }
.demo__say { font-size: var(--fs-body); line-height: 1.5; text-wrap: pretty; color: color-mix(in srgb, var(--on-ink) 78%, var(--ink)); min-height: 3em; }
.demo__say strong { color: var(--on-ink); font-weight: 650; }
.demo__plan {
  grid-column: 1 / -1;
  font-size: var(--fs-sm); line-height: 1.5;
  color: color-mix(in srgb, var(--on-ink) 70%, var(--ink));
  padding-left: 0.75rem; border-left: 1px solid color-mix(in srgb, var(--sky) 60%, transparent);
}
.demo__plan[hidden], .demo__plan [hidden] { display: none; }
.demo__controls { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); justify-content: flex-end; }
.demo__ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  font: inherit; font-size: var(--fs-sm); font-weight: 550; line-height: 1.2;
  padding: 0.7rem 1.2rem; border-radius: var(--radius-pill); cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--on-ink) 40%, transparent);
  background: transparent; color: var(--on-ink); text-decoration: none; white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.demo__ctl:hover { border-color: var(--on-ink); }
.demo__ctl:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.demo__ctl[disabled] { opacity: 0.4; pointer-events: none; }
.demo__ctl--main { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.demo__ctl--main:hover { background: #fff; border-color: #fff; }
.demo__ctl svg { width: 15px; height: 15px; flex: none; }
.demo__ctl-in { display: inline-flex; align-items: center; gap: 0.45em; }
/* The end of a story: three different doors, one per row, so a long app name
   ("Try Payment Reconciliation") never has to squeeze into half a row. */
.demo__controls[data-demo-end] { flex-direction: column; align-items: stretch; }
.demo__controls[data-demo-end] > .demo__ctl { flex: 0 0 auto; width: 100%; }
.demo__controls[data-demo-end] > .demo__ctl--main { order: -1; flex-basis: auto; }
.demo__controls[data-demo-end] [data-demo-next-app] { order: 0; }
.demo__controls[data-demo-end] [data-demo-restart] { order: 1; border-color: transparent; }
.demo__controls[data-demo-end] [data-demo-restart]:hover { border-color: color-mix(in srgb, var(--on-ink) 40%, transparent); }
/* `hidden` must win over the display these controls set themselves. */
.demo__controls[hidden], .demo__ctl[hidden], .demo__ctl-in[hidden] { display: none; }

@media (max-width: 40rem) {
  .demo__guide { grid-template-columns: 1fr; }
  .demo__controls { justify-content: stretch; }
  .demo__controls > * { flex: 1 1 auto; }
}

/* Wide screens: the guide stands BESIDE the window, like a presenter's notes,
   so the instruction and the screen are in view together on a laptop. Under it
   the window would push the guide below the fold. */
@media (min-width: 68rem) {
  .demo__player {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem;
    gap: clamp(1.5rem, 2.5vw, 2.5rem); align-items: stretch;
  }
  .demo__guide {
    margin-top: 0;
    display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: var(--sp-m); padding: var(--sp-s) 0;
  }
  .demo__progress { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .demo__bars { width: 100%; max-width: none; }
  .demo__say { font-size: 1.0625rem; min-height: 7.5em; }
  .demo__controls { justify-content: stretch; }
  .demo__controls > * { flex: 1 1 0; min-width: 0; padding-inline: 0.8rem; }
  /* The main action sits on top, full width, where the eye lands after the
     text; the quieter controls share the row under it. */
  .demo__controls .demo__ctl--main { order: -1; flex-basis: 100%; }
}

/* =============================================================================
   The demo app — a small copy of the product's own UI, drawn at ~85% scale.
   Sized against the SCREEN (container queries), not the viewport, so the same
   story reads in a 1000px window and a 330px one.
   ========================================================================== */
.dk {
  --dk-text: #0B2239; --dk-muted: #5F6D77; --dk-faint: #66737D;
  --dk-border: #E3E7EC; --dk-soft: #F1F3F6; --dk-surface: #fff; --dk-bg: #F6F7F9;
  --dk-brand: #2A5DDB; --dk-brand-soft: #E8EEFC;
  --dk-ok: #16704C; --dk-ok-bg: #E3F3EB; --dk-ok-bd: #B7DEC9;
  --dk-warn: #8A5A00; --dk-warn-bg: #FFF4DB; --dk-warn-bd: #F3D9A0;
  --dk-bad: #B3261E; --dk-bad-bg: #FCEAE8; --dk-bad-bd: #F2C2BD;
  --dk-ai: #5B3FD6; --dk-ai-bg: #F4F1FF; --dk-ai-bd: #DCD3FB;
  height: 100%; display: flex; font-size: 13.5px; line-height: 1.45; color: var(--dk-text);
  background: var(--dk-bg);
}
.dk *, .dk *::before, .dk *::after { box-sizing: border-box; }
.dk svg { width: 15px; height: 15px; flex: none; vertical-align: -2px; }
.dk-item > svg { color: var(--dk-muted); }
.dk__side {
  width: 196px; flex: none; background: #fff; border-right: 1px solid var(--dk-border);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 2px;
}
.dk__app { display: flex; align-items: center; gap: 9px; padding: 4px 6px 14px; font-weight: 650; font-size: 14px; }
.dk__mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--tone, var(--dk-brand)); color: #fff; font-size: 12px; font-weight: 700;
}
.dk__nav {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px;
  color: var(--dk-muted); font-weight: 500; white-space: nowrap;
}
.dk__nav svg { width: 15px; height: 15px; flex: none; }
/* The app colour lives on its logo and the active icon only. Violet apps
   (Customer Desk, Customer 360) must not tint the chrome next to violet AI
   text, so the active row itself stays neutral. */
.dk__nav.is-on { background: var(--dk-soft); color: var(--dk-text); font-weight: 600; }
.dk__nav.is-on svg { color: var(--tone, var(--dk-brand)); }
/* The company's own mark at the top of the sidebar, then the app it is in —
   the order the product's sidebar uses. */
.dk__org { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; font-weight: 750; font-size: 14px; letter-spacing: -0.01em; color: #0B2239; }
.dk__org-mark { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, #F59F00, #E8590C); color: #fff; flex: none; font-size: 13px; font-weight: 800; }
.dk__org-mark svg { width: 14px; height: 14px; }
.dk__side .dk__app {
  border: 1px solid var(--dk-border); border-radius: 10px; padding: 7px 8px; margin-bottom: 10px;
  background: #FAFBFC;
}
.dk__mark svg { width: 15px; height: 15px; color: #fff; }
.dk__search {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 1 280px; min-width: 0;
  border: 1px solid var(--dk-border); background: var(--dk-bg); border-radius: 8px;
  padding: 5px 9px; color: var(--dk-faint); font-size: 12px; white-space: nowrap; overflow: hidden;
}
.dk__search span { overflow: hidden; text-overflow: ellipsis; }
.dk__search kbd { margin-left: auto; font: inherit; font-size: 10.5px; color: var(--dk-muted); background: #fff; border: 1px solid var(--dk-border); border-radius: 4px; padding: 0 4px; }
.dk__right { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.dk__bell { position: relative; display: inline-grid; place-items: center; color: var(--dk-muted); }
.dk__bell i {
  position: absolute; top: -6px; right: -7px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: #E03131; color: #fff; font-size: 9.5px; font-weight: 700; font-style: normal;
  display: grid; place-items: center; border: 1.5px solid #fff;
}
.dk__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 18px; background: #fff; border-bottom: 1px solid var(--dk-border);
  color: var(--dk-muted); font-size: 12.5px; min-height: 44px;
}
.dk__top .dk__app { padding: 0; display: none; }
.dk__crumb { font-weight: 600; color: var(--dk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk__who { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dk__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 22px; scrollbar-width: thin; }

/* A mid-size window (the guide beside it on a 1100–1300px screen): the
   sidebar keeps its icons and gives the page the width. */
@container dscreen (min-width: 601px) and (max-width: 780px) {
  .dk__side { width: 54px; padding: 12px 8px; align-items: center; }
  .dk__org, .dk__side .dk__app, .dk__nav { font-size: 0; gap: 0; justify-content: center; }
  .dk__side .dk__app { padding: 4px; border: 0; background: none; margin-bottom: 8px; }
  .dk__nav { padding: 8px; }
  .dk__search { flex-basis: 200px; }
}

@container dscreen (max-width: 600px) {
  .dk { font-size: 13px; }
  .dk__side { display: none; }
  .dk__top { padding: 8px 12px; }
  .dk__top .dk__app { display: flex; font-size: 0; gap: 0; }
  .dk__top .dk__crumb { display: block; flex: 1; min-width: 0; }
  .dk__search { display: none; }
  .dk__top .dk__app { border: 0; padding: 0; margin: 0; background: none; }
  .dk__who-role { display: none; }
  .dk__body { padding: 14px 12px 18px; }
}

/* Page head */
.dk-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dk-h h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.dk-h p { color: var(--dk-muted); margin-top: 2px; font-size: 12.5px; }

/* Buttons. Real <button>s only for the step's target; the rest are spans. */
.dk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--dk-border); background: #fff; color: var(--dk-text);
}
button.dk-btn { cursor: pointer; }
.dk-btn svg { width: 14px; height: 14px; flex: none; }
.dk-btn--primary { background: var(--dk-brand); border-color: var(--dk-brand); color: #fff; }
.dk-btn--success { background: #1E8A5A; border-color: #1E8A5A; color: #fff; }
.dk-btn--warn { background: var(--dk-warn-bg); border-color: var(--dk-warn-bd); color: var(--dk-warn); }
.dk-btn--danger { background: #fff; border-color: var(--dk-bad-bd); color: var(--dk-bad); }
.dk-btn--ghost { background: transparent; border-color: transparent; color: var(--dk-muted); }
.dk-btn--lg { padding: 9px 15px; font-size: 13px; }
.dk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dk-row--end { justify-content: flex-end; }
.dk-row--between { justify-content: space-between; }
.dk-stack { display: grid; gap: 12px; }
.dk-grid2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dk-grid3 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container dscreen (max-width: 600px) {
  .dk-grid2, .dk-grid3 { grid-template-columns: minmax(0, 1fr); }
}

/* Badges: bordered, no dot. */
.dk-badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--dk-border); background: var(--dk-soft); color: var(--dk-muted);
}
.dk-badge svg { width: 12px; height: 12px; }
.dk-badge--info { background: var(--dk-brand-soft); border-color: #C9D6F7; color: #1D48B0; }
.dk-badge--ok { background: var(--dk-ok-bg); border-color: var(--dk-ok-bd); color: var(--dk-ok); }
.dk-badge--warn { background: var(--dk-warn-bg); border-color: var(--dk-warn-bd); color: var(--dk-warn); }
.dk-badge--bad { background: var(--dk-bad-bg); border-color: var(--dk-bad-bd); color: var(--dk-bad); }
.dk-badge--ai { background: var(--dk-ai-bg); border-color: var(--dk-ai-bd); color: var(--dk-ai); }

/* Live work clock */
.dk-live {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: 999px;
  background: var(--dk-ok-bg); border: 1px solid var(--dk-ok-bd); color: var(--dk-ok);
}
.dk-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dk-blink 1.4s ease-in-out infinite; }
.dk-live--paused { background: var(--dk-warn-bg); border-color: var(--dk-warn-bd); color: var(--dk-warn); }
.dk-live--paused::before { animation: none; border-radius: 1px; width: 6px; height: 8px; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px); }
@keyframes dk-blink { 50% { opacity: 0.3; } }

/* Cards */
.dk-card { background: #fff; border: 1px solid var(--dk-border); border-radius: 12px; overflow: hidden; }
.dk-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--dk-border); font-weight: 650; font-size: 13px;
}
.dk-card__count {
  font-size: 11px; font-weight: 700; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--dk-warn-bg); color: var(--dk-warn); border: 1px solid var(--dk-warn-bd);
}
.dk-card__count--n { background: var(--dk-soft); color: var(--dk-muted); border-color: var(--dk-border); }
.dk-card__body { padding: 12px 14px; }
.dk-card--pad { padding: 14px; }

/* KPI tiles */
.dk-kpis { display: grid; gap: 10px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-bottom: 14px; }
.dk-kpi { background: #fff; border: 1px solid var(--dk-border); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.dk-kpi__label { font-size: 11.5px; color: var(--dk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-kpi__value {
  font-size: clamp(16px, 2.6cqi, 20px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-kpi__sub { font-size: 11px; color: var(--dk-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-kpi--ok .dk-kpi__value { color: var(--dk-ok); }
.dk-kpi--warn .dk-kpi__value { color: var(--dk-warn); }
.dk-kpi--bad .dk-kpi__value { color: var(--dk-bad); }
@container dscreen (max-width: 600px) {
  .dk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Key / value */
.dk-kv { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr); gap: 7px 12px; font-size: 12.5px; }
.dk-kv dt { color: var(--dk-muted); }
.dk-kv dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }

/* Table */
.dk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dk-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--dk-muted);
  padding: 8px 10px; border-bottom: 1px solid var(--dk-border); white-space: nowrap; background: #FAFBFC;
}
.dk-table td { padding: 9px 10px; border-bottom: 1px solid var(--dk-soft); vertical-align: middle; }
.dk-table tr:last-child td { border-bottom: 0; }
.dk-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-table tr.is-hl td { background: #F3F7FF; }
.dk-sub { display: block; font-size: 11px; color: var(--dk-faint); }
.dk-scroll { overflow-x: auto; }
@container dscreen (max-width: 600px) {
  .dk-table .dk-hide-sm { display: none; }
}

/* Codes and IDs */
.dk-mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; color: var(--dk-muted); }

/* Avatar */
.dk-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; background: var(--av, #5F6D77);
}
.dk-av--lg { width: 34px; height: 34px; font-size: 12px; }

/* AI — violet means a model wrote it, nothing else. */
.dk-ai { border: 1px solid var(--dk-ai-bd); background: var(--dk-ai-bg); border-radius: 12px; padding: 11px 13px; }
.dk-ai__label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dk-ai); margin-bottom: 4px; }
.dk-ai__label svg { width: 13px; height: 13px; }
.dk-ai p + p { margin-top: 6px; }

/* Notices */
.dk-note { border-radius: 10px; padding: 9px 12px; font-size: 12.5px; border: 1px solid var(--dk-border); background: var(--dk-soft); display: flex; gap: 8px; align-items: flex-start; }
.dk-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.dk-note--ok { background: var(--dk-ok-bg); border-color: var(--dk-ok-bd); color: var(--dk-ok); }
.dk-note--warn { background: var(--dk-warn-bg); border-color: var(--dk-warn-bd); color: var(--dk-warn); }
.dk-note--bad { background: var(--dk-bad-bg); border-color: var(--dk-bad-bd); color: var(--dk-bad); }
.dk-note--info { background: var(--dk-brand-soft); border-color: #C9D6F7; color: #1D48B0; }

/* Inputs (drawn, not real: the visitor never has to type) */
.dk-field { display: grid; gap: 4px; }
.dk-field__label { font-size: 11.5px; font-weight: 600; color: var(--dk-muted); }
.dk-input {
  border: 1px solid var(--dk-border); background: #fff; border-radius: 8px;
  padding: 8px 10px; min-height: 34px; font-size: 13px; color: var(--dk-text);
  display: flex; align-items: center; gap: 6px;
}
.dk-input--area { align-items: flex-start; min-height: 74px; white-space: pre-wrap; }
.dk-input--focus { border-color: var(--dk-brand); box-shadow: 0 0 0 3px rgba(42, 93, 219, 0.14); }
.dk-input .ph { color: var(--dk-faint); }
.dk-caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--dk-brand); vertical-align: text-bottom; animation: dk-blink 1s steps(1) infinite; }

/* Lists */
.dk-list { display: grid; }
.dk-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--dk-soft); min-width: 0; }
.dk-item:last-child { border-bottom: 0; }
.dk-item__main { flex: 1; min-width: 0; }
.dk-item__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-item__meta { font-size: 11.5px; color: var(--dk-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-item.is-hl { background: #F3F7FF; }
.dk-item.is-new { animation: dk-in 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dk-in { from { opacity: 0; transform: translateY(-6px); background: #E8EEFC; } }

/* Chat */
.dk-chat { display: grid; gap: 8px; }
.dk-bubble { max-width: 82%; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.45; background: #fff; border: 1px solid var(--dk-border); }
.dk-bubble--me { justify-self: end; background: #DCF8C6; border-color: #C6EBB0; }
.dk-bubble--draft { justify-self: end; background: var(--dk-ai-bg); border: 1px dashed #B9A9F5; }
.dk-bubble__meta { display: block; margin-top: 3px; font-size: 10.5px; color: var(--dk-faint); text-align: right; }

/* Kanban */
.dk-board { display: grid; gap: 10px; grid-template-columns: repeat(var(--n, 4), minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
.dk-col { background: #EEF0F3; border-radius: 12px; padding: 8px; display: grid; align-content: start; gap: 8px; min-height: 160px; }
.dk-col__head { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--dk-muted); padding: 2px 4px; }
.dk-tile { background: #fff; border: 1px solid var(--dk-border); border-radius: 10px; padding: 9px 10px; display: grid; gap: 4px; }
.dk-tile__title { font-weight: 600; font-size: 12.5px; }
.dk-tile__meta { font-size: 11px; color: var(--dk-faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Bars (simple horizontal chart) */
.dk-bars { display: grid; gap: 7px; }
.dk-bar { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; }
.dk-bar__track { height: 10px; border-radius: 5px; background: var(--dk-soft); overflow: hidden; }
.dk-bar__fill { height: 100%; border-radius: 5px; background: var(--tone, var(--dk-brand)); width: var(--w, 0%); }
.dk-bar__val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Stars */
.dk-stars { display: inline-flex; gap: 2px; color: #E8A400; }
.dk-stars svg { width: 15px; height: 15px; }

/* Check rows (checklists) */
.dk-check { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--dk-soft); }
.dk-check:last-child { border-bottom: 0; }
.dk-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #C3CAD2; flex: none; display: grid; place-items: center; background: #fff; }
.dk-box svg { width: 12px; height: 12px; color: #fff; }
.dk-box.is-on { background: #1E8A5A; border-color: #1E8A5A; }

/* Toast (inside the screen) */
.dk-toast {
  position: absolute; left: 50%; bottom: 16px; z-index: 15; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px);
  background: #0B2239; color: #fff; border-radius: 10px; padding: 9px 14px; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 10px 24px -10px rgba(6, 22, 39, 0.55);
  animation: dk-toast 3.2s ease forwards;
}
.dk-toast svg { width: 15px; height: 15px; color: #7FD8A8; flex: none; }
@keyframes dk-toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 8%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

/* A scene's entrance: one soft rise, so a step reads as a change, not a flash. */
.dk-enter { animation: dk-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dk-enter { from { opacity: 0.4; transform: translateY(6px); } }

.dk-muted { color: var(--dk-muted); }
.dk-faint { color: var(--dk-faint); }
.dk-strong { font-weight: 650; }
.dk-ok { color: var(--dk-ok); }
.dk-bad { color: var(--dk-bad); }
.dk-warn { color: var(--dk-warn); }
.dk-sep { height: 1px; background: var(--dk-border); margin: 12px 0; }
.dk-sm { font-size: 12px; }
.dk-xs { font-size: 11px; }
.dk-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .demo__screen .is-next { animation: none; outline-offset: 4px; }
  .demo__cursor { transition: none; }
  .dk-live::before, .dk-caret, .dk-item.is-new, .dk-enter, .demo__press { animation: none; }
}

/* On a phone the page's floating WhatsApp button sits exactly where the
   demo's right-hand buttons (Send, Review, Next) land. While the stage is on
   screen it steps down out of the way; demo.js sets the class. */
@media (max-width: 40rem) {
  .wa-fab { transition: transform 0.25s ease, opacity 0.25s ease; }
  html.demo-in-view .wa-fab { transform: translateY(calc(100% + 2rem)); opacity: 0; pointer-events: none; }
}