/* AdPylon live demo. Builds on main.css tokens and keeps the color code:
   amber = real signup action only; in-demo actions are ink (dark) buttons;
   green = in sync / gain; coral = problem / risk; blue → teal = Google → Bing. */

.demo-body { min-height: 100vh; background: #f3f2ee; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ---------- Top bar ---------- */
.demo-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 8px 20px;
  background: var(--ink-950);
  color: #fff;
}
.demo-brand { min-width: 44px; color: #fff; }
.demo-brand .brand-mark { color: #111a2e; }
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: var(--muted-on-dark);
  font: 600 0.8125rem var(--font-mono);
  white-space: nowrap;
}
.demo-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); animation: pulse 2s ease-out infinite; }
.demo-top-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.demo-select {
  min-height: 44px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--ink-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3aec4' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 10px;
  color: #fff;
  font: 600 1rem var(--font-body);
  appearance: none;
  cursor: pointer;
}
.demo-top .btn-outline { border-color: rgb(255 255 255 / 0.3); color: #fff; }
@media (hover: hover) { .demo-top .btn-outline:hover { background: rgb(255 255 255 / 0.08); color: #fff; } }

/* ---------- Shell ---------- */
.demo-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 20px;
}

.demo-nav ul { position: sticky; top: 88px; display: grid; gap: 2px; }
.demo-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
@media (hover: hover) { .demo-nav a:hover { background: #e9e7e0; color: var(--text); } }
.demo-nav a[aria-current="page"] { background: var(--ink-950); color: #fff; }
.nav-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(194 53 43 / 0.12);
  color: var(--loss-ink);
  font: 700 0.75rem/1.5 var(--font-mono);
  text-align: center;
}
.nav-count[hidden] { display: none; }
[aria-current="page"] .nav-count { background: rgb(255 107 94 / 0.25); color: #ffd2cd; }

.demo-main { min-width: 0; outline: none; }

/* ---------- View basics ---------- */
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.view > *, .grid-2 > *, .stack > * { min-width: 0; } /* let wide tables scroll inside their box */
.view-head h1 { font-size: clamp(1.625rem, 1.5vw + 1rem, 2.125rem); font-weight: 800; letter-spacing: -0.03em; outline: none; }
.view-sub { margin-top: 6px; color: var(--text-muted); max-width: 62ch; }
.card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.card h2 { font-size: 1.125rem; letter-spacing: -0.01em; }
.card-sub { margin-top: 6px; color: var(--text-muted); font-size: 0.9375rem; }
.card-h2-gap { margin-top: 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-result { border-color: rgb(21 128 61 / 0.35); background: linear-gradient(180deg, rgb(21 128 61 / 0.05), var(--card) 40%); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.grid-wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.stack { display: grid; gap: 20px; }
.muted { color: var(--text-muted); }
.small { font-size: 0.8125rem; }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; white-space: nowrap; }
.ok-text { color: var(--gain-ink); font-weight: 600; }
.loss-text { color: var(--loss-ink); font-weight: 600; }

.btn-xs { min-height: 40px; padding: 6px 14px; font-size: 0.875rem; }
@media (pointer: coarse) { .btn-xs, .seg { min-height: 44px; } } /* finger-sized on touch screens */
.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--trust-ink);
  font: 600 0.9375rem var(--font-body);
  cursor: pointer;
}
.link-btn::after { content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--ico-arrow-r) center / contain no-repeat; mask: var(--ico-arrow-r) center / contain no-repeat; margin-inline-start: 6px; transition: transform .15s ease; }
@media (hover: hover) { .link-btn:hover::after { transform: translateX(3px); } }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-ok { background: rgb(21 128 61 / 0.1); color: var(--gain-ink); }
.chip-loss { background: rgb(194 53 43 / 0.1); color: var(--loss-ink); }
.chip-warn { background: rgb(180 120 0 / 0.12); color: #8a5a00; }
.chip-neutral { background: var(--paper-tint); color: var(--text-muted); }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.tile { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tile-label { color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; }
.tile-value { margin-top: 4px; font: 800 1.75rem/1.1 var(--font-display); letter-spacing: -0.03em; }
.tile-sub { margin-top: 4px; color: var(--text-muted); font-size: 0.8125rem; }
.tile-gain { border-color: rgb(21 128 61 / 0.3); background: rgb(21 128 61 / 0.06); }
.tile-gain .tile-value { color: var(--gain-ink); }

/* ---------- Chart ---------- */
.chart { margin: 14px 0 6px; }
.chart svg { display: block; width: 100%; height: auto; }
.bar-google { fill: var(--google); }
.bar-bing { fill: var(--bing); }
.chart-tick { fill: #8a8577; font: 600 9px var(--font-mono); }
.chart-legend { display: flex; gap: 16px; margin-top: 6px; font-size: 0.8125rem; color: var(--text-muted); }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.legend-google::before { background: var(--google); }
.legend-bing::before { background: var(--bing); }

/* ---------- Overview lists ---------- */
.attn-list { display: grid; gap: 8px; margin-top: 12px; }
.attn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 4px 14px;
  border-inline-start: 3px solid;
  border-radius: 4px;
  background: var(--paper);
  font-size: 0.9375rem;
}
.attn-loss { border-color: var(--loss-ink); }
.attn-info { border-color: var(--google); }
.all-clear { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgb(21 128 61 / 0.08); color: #14532d; font-weight: 600; }
.engines { display: grid; gap: 8px; margin-top: 12px; }
.engine-row { display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper); }
.engine-row span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.engine-row span:first-child::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.engine-g span:first-child::before { background: var(--google); }
.engine-b span:first-child::before { background: var(--bing); }
.engine-row .muted { text-align: end; }

/* ---------- Tables ---------- */
.toolbar { display: flex; gap: 6px; }
.seg {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-muted);
  font: 600 0.875rem var(--font-body);
  cursor: pointer;
}
.seg[aria-pressed="true"] { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.table-wrap { position: relative; overflow-x: auto; /* relative: keeps absolutely positioned a11y labels inside the scroll box */ border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.card .table-wrap { border: 0; border-radius: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
.data-table thead th { color: var(--text-muted); font: 600 0.75rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody th { font-weight: 600; }
.data-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tr.is-open { background: rgb(79 139 255 / 0.06); }
.cell-main { display: block; }
.cell-sub { display: block; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; }
.cell-action { text-align: end; }
.diff-card { border-color: rgb(79 139 255 / 0.4); box-shadow: 0 20px 40px -24px rgb(36 87 214 / 0.4); }
.diff { margin-top: 14px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }

/* ---------- Budget ---------- */
.range-label { display: block; margin-top: 20px; font-weight: 600; font-size: 0.9375rem; }
.range-row { display: flex; align-items: center; gap: 14px; margin: 8px 0 6px; }
.range-row input[type="range"] { flex: 1; height: 44px; accent-color: var(--ink-950); cursor: pointer; }
.range-out { min-width: 3.5ch; font: 800 1.375rem var(--font-display); text-align: end; }
.card .btn-block { margin-top: 18px; }
.sim-headline { margin-top: 16px; color: var(--gain-ink); font: 800 1.625rem/1.1 var(--font-display); letter-spacing: -0.02em; }

/* ---------- Approvals ---------- */
.mail-list { display: grid; gap: 14px; }
.mail-item { padding: 18px 20px; border: 1px solid var(--line); border-inline-start: 4px solid var(--google); border-radius: var(--radius-sm); background: var(--card); }
.mail-approved { border-inline-start-color: var(--gain-ink); }
.mail-rejected { border-inline-start-color: #b3ad9f; opacity: 0.85; }
.mail-meta { color: var(--text-muted); font: 600 0.8125rem var(--font-mono); }
.mail-title { margin: 6px 0; font-size: 1.125rem; }
.mail-text { color: var(--text-muted); }
.mail-item > .chip { margin-top: 12px; }

/* ---------- Policy ---------- */
.summary-line { font-weight: 700; }
.issue-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.issue { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.issue.is-fixed { background: rgb(21 128 61 / 0.04); }
.issue-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.issue-title { font-size: 1.0625rem; }
.issue-text { color: var(--text-muted); font-size: 0.9375rem; }
.issue .btn { justify-self: start; }

/* ---------- Experiments ---------- */
.exp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.exp-card { display: grid; gap: 8px; align-content: start; }
.exp-verdict { color: var(--gain-ink); font-weight: 700; }
.exp-card .btn, .exp-card .chip { justify-self: start; }

/* ---------- Audit ---------- */
.kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 10px 12px; margin-top: 12px; align-items: center; font-size: 0.9375rem; }
.kv dd { margin: 0; text-align: end; }
.kv .chip { white-space: normal; }
.team { display: grid; gap: 8px; margin-top: 12px; }
.team li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9375rem; }

/* ---------- Tasks rail ---------- */
.demo-tasks { position: sticky; top: 88px; align-self: start; }
.tasks-inner { padding: 20px; border-radius: var(--radius); background: var(--ink-950); color: var(--text-on-dark); }
.tasks-inner h2 { color: #fff; font-size: 1.125rem; }
.tasks-progress { margin-top: 4px; color: var(--muted-on-dark); font-size: 0.875rem; }
.progress { height: 6px; margin-top: 10px; border-radius: 999px; background: var(--ink-line); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--bridge); transition: width .4s ease; }
.task-list { display: grid; gap: 4px; margin-top: 14px; }
.task-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-on-dark);
  font: 500 0.9375rem/1.35 var(--font-body);
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) { .task-btn:hover { background: rgb(255 255 255 / 0.06); } }
.task-check { flex: none; width: 20px; height: 20px; border: 2px solid var(--ink-line); border-radius: 50%; }
.is-done .task-btn { color: var(--muted-on-dark); text-decoration: line-through; }
.is-done .task-check {
  border-color: var(--gain);
  background: var(--gain) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23070c18' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.tasks-next { display: none; }
/* The tasks panel is dark: muted text must use the on-dark token, not the page one. */
.tasks-inner .muted { color: var(--muted-on-dark); }
.tasks-foot { margin-top: 14px; color: var(--muted-on-dark); font-size: 0.8125rem; }
.done-box { display: grid; gap: 10px; margin-top: 14px; }
.done-box p { color: var(--text-on-dark); font-size: 0.9375rem; }
.tasks-inner .btn-outline { border-color: rgb(255 255 255 / 0.3); color: #fff; }
@media (hover: hover) { .tasks-inner .btn-outline:hover { background: rgb(255 255 255 / 0.08); color: #fff; } }
.is-finished { box-shadow: 0 0 0 2px var(--gain), 0 24px 50px -24px rgb(61 220 132 / 0.5); }

/* ---------- Banner, toast, picker ---------- */
.demo-banner {
  position: fixed;
  inset-inline-start: 0; inset-inline-end: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgb(7 12 24 / 0.96);
  color: var(--text-on-dark);
  font-size: 0.9375rem;
}
.demo-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--gain-ink);
  color: #fff;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.45);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.demo-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.demo-picker {
  width: min(100% - 32px, 860px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: clamp(24px, 4vw, 40px);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / 0.6);
}
.demo-picker::backdrop { background: rgb(7 12 24 / 0.72); backdrop-filter: blur(4px); }
.picker-title { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); font-weight: 800; letter-spacing: -0.03em; }
.picker-sub { margin: 8px 0 22px; color: var(--text-muted); }
.picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.picker-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 44px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) { .picker-card:hover { border-color: var(--ink-950); box-shadow: 0 16px 30px -18px rgb(15 23 42 / 0.4); } }
.picker-name { font: 800 1.25rem var(--font-display); }
.picker-desc { color: var(--text-muted); font-size: 0.9375rem; }
.picker-stat { margin-top: 4px; color: var(--trust-ink); font: 600 0.8125rem var(--font-mono); }
.picker-note { margin-top: 16px; color: var(--text-muted); font-size: 0.875rem; }
.picker-close {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: 700 1rem var(--font-body);
  cursor: pointer;
}
@media (hover: hover) { .picker-close:hover { background: var(--paper-tint); } }

.demo-noscript { max-width: 560px; padding: 32px; border-radius: var(--radius); background: var(--card); }
.demo-noscript h1 { font-size: 1.75rem; margin-bottom: 10px; }
.demo-noscript p { margin-bottom: 18px; color: var(--text-muted); }
.no-js .demo-nav, .no-js .demo-tasks, .no-js .demo-top-actions { display: none; }

/* ---------- MCC roll-up ---------- */
.mcc-banners { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.mcc-banner { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.mcc-banner p { color: var(--text-muted); font-size: 0.9375rem; }
.mcc-banner .mcc-big { color: var(--text); font: 800 1.375rem/1.15 var(--font-display); letter-spacing: -0.02em; }
.mcc-banner .btn, .mcc-banner .link-btn { justify-self: start; margin-top: 4px; }
.mcc-gain { border-color: rgb(21 128 61 / 0.3); background: linear-gradient(180deg, rgb(21 128 61 / 0.07), var(--card)); }
.mcc-gain .mcc-big { color: var(--gain-ink); }
.mcc-risk { border-color: rgb(194 53 43 / 0.3); background: linear-gradient(180deg, rgb(255 107 94 / 0.07), var(--card)); }
.mcc-risk .mcc-big { color: var(--loss-ink); }
.mcc-ok .mcc-big { font-size: 1.125rem; }
.mcc-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 12px 18px; }
.mcc-inline p { color: #14532d; font-weight: 600; }

.mini-split { display: flex; gap: 2px; width: 96px; height: 6px; }
.split-line { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.split-line .cell-sub { font-weight: 500; }
.acct-table th[scope="row"] { min-width: 180px; }
.cac-pair { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-split span { border-radius: 3px; }
.mini-g { background: var(--google); }
.mini-b { background: var(--bing); }
.acct-table td { white-space: nowrap; }
.acct-table td .chip { margin-top: 4px; }
.acct-table .num-text { font-variant-numeric: tabular-nums; }
.acct-table tfoot th, .acct-table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; background: var(--paper); font-weight: 700; }
.strong { font-weight: 800; }
.link-btn-plain { min-height: 44px; }
.link-btn-plain::after { content: none; }
.seg-owner { border-color: var(--google); color: var(--trust-ink); }
.seg-owner[aria-pressed="true"] { background: rgb(79 139 255 / 0.1); border-color: var(--google); color: var(--trust-ink); }
.toolbar { flex-wrap: wrap; align-items: center; }
.toolbar-end { margin-inline-start: auto; }

@media (max-width: 1024px) {
  .mcc-banners { grid-template-columns: minmax(0, 1fr); }
}

/* Roll-up table → cards on phones */
@media (max-width: 760px) {
  .acct-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .acct-table, .acct-table tbody, .acct-table tfoot { display: block; }
  .acct-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .acct-table th, .acct-table td { padding: 0; border: 0; white-space: normal; text-align: start; }
  .acct-table th[scope="row"] { grid-column: 1 / -1; }
  .acct-table td[data-label] { display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; }
  .acct-table th[scope="row"] { min-width: 0; }
  .acct-table td.num { text-align: start; }
  .acct-table td[data-label]::before {
    content: attr(data-label);
    white-space: normal;
    color: var(--text-muted);
    font: 600 0.6875rem var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .acct-table td .chip { justify-self: start; }
  .acct-table .hide-phone { display: none; }
  .acct-table tfoot tr { background: var(--paper); }
  .acct-table tfoot th, .acct-table tfoot td { border-top: 0; background: none; }
  .table-wrap:has(.acct-table) { overflow: visible; }
  .toolbar-end { margin-inline-start: 0; width: 100%; }
}

@media (max-width: 480px) {
  /* Never squeeze the actions; the "sample data" badge wraps to its own row instead */
  .demo-top-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  /* Size to the label ("Small business" fits at 360px); it gives way to long "Start free"
     labels (German, Russian) with an ellipsis rather than pushing the page wider. */
  .demo-select { flex: 0 1 auto; min-width: 5.5rem; max-width: 12rem; padding-inline: 12px 30px; background-position: right 10px center; text-overflow: ellipsis; }
  .demo-top .btn-sm { white-space: nowrap; flex: none; padding-inline: 14px; }
}

/* Wide views (account roll-up): the task rail becomes the compact "Next" bar */
@media (min-width: 769px) {
  .demo-shell.is-wide { grid-template-columns: 220px minmax(0, 1fr); }
  .demo-shell.is-wide .demo-nav { grid-column: 1; grid-row: 1 / span 2; }
  .demo-shell.is-wide .demo-tasks { grid-column: 2; grid-row: 1; position: static; }
  .demo-shell.is-wide .demo-main { grid-column: 2; grid-row: 2; }
  .demo-shell.is-wide .tasks-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: 4px 20px; padding: 12px 18px; }
  .demo-shell.is-wide .tasks-head { display: contents; }
  .demo-shell.is-wide .tasks-head h2 { font-size: 1rem; }
  .demo-shell.is-wide .tasks-progress { margin: 0; white-space: nowrap; }
  .demo-shell.is-wide .progress { grid-column: 1 / -1; order: 5; margin-top: 4px; }
  .demo-shell.is-wide .task-list, .demo-shell.is-wide .tasks-foot { display: none; }
  .demo-shell.is-wide .tasks-next {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px;
    border: 1px solid var(--ink-line); border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.04);
    color: #fff; font: 600 0.9375rem var(--font-body); text-align: start; cursor: pointer;
  }
  .demo-shell.is-wide .tasks-next::after { content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--ico-arrow-r) center / contain no-repeat; mask: var(--ico-arrow-r) center / contain no-repeat; margin-inline-start: auto; }
  .demo-shell.is-wide .done-box { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.split-line .cell-sub { white-space: nowrap; }

/* ---------- Campaign table → cards on phones ---------- */
@media (max-width: 600px) {
  .camp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .camp-table, .camp-table tbody { display: block; }
  .camp-table tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .camp-table tbody tr:last-child { border-bottom: 0; }
  .camp-table th, .camp-table td { padding: 0; border: 0; }
  .camp-table th[scope="row"] { grid-column: 1 / -1; }
  .camp-table td.num { display: grid; text-align: start; font-weight: 700; }
  .camp-table td.num::before {
    content: attr(data-label);
    color: var(--text-muted);
    font: 600 0.6875rem var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .camp-table .cell-status { justify-self: end; }
  .camp-table .cell-action { grid-column: 1 / -1; text-align: start; }
  .camp-table .cell-action:empty { display: none; }
  .camp-table .cell-action .btn { width: 100%; }
  .table-wrap:has(.camp-table) { overflow: visible; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .demo-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .demo-tasks { grid-column: 2; position: static; order: -1; }
  .task-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2, .grid-wide-left { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .demo-top { position: static; flex-wrap: wrap; gap: 8px 10px; padding: 8px 16px; }
  .demo-badge { order: 3; }
  .demo-top-actions { order: 2; }
  .demo-share { display: none; }
  .demo-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .demo-tasks { grid-column: auto; }
  .tasks-inner { padding: 14px 16px; }
  .task-list, .tasks-foot { display: none; }
  .tasks-next {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.04);
    color: #fff;
    font: 600 0.9375rem var(--font-body);
    text-align: start;
    cursor: pointer;
  }
  .tasks-next::after { content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: var(--ico-arrow-r) center / contain no-repeat; mask: var(--ico-arrow-r) center / contain no-repeat; margin-inline-start: auto; }
  .demo-nav { position: sticky; top: 0; z-index: 20; min-width: 0; margin: 0 -16px; padding: 0 16px; background: #f3f2ee; overflow-x: auto; scrollbar-width: none; }
  .demo-nav::-webkit-scrollbar { display: none; }
  /* Fade the right edge so a cut-off tab reads as "swipe for more" */
  .demo-nav ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .demo-nav ul { position: static; display: flex; gap: 4px; padding: 6px 0; }
  .demo-nav a { white-space: nowrap; }
  .issue-list, .exp-grid, .picker-grid { grid-template-columns: 1fr; }
  .demo-banner { justify-content: space-between; font-size: 0.8125rem; }
}
@media (max-width: 480px) {
  .demo-top .brand-name { display: none; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile-value { font-size: 1.375rem; }
  .card { padding: 18px; }
  .demo-banner p { display: none; }
  .demo-banner { justify-content: center; }
  .demo-banner .btn { width: 100%; }
}

/* Stacked tables on phones: each cell has the full row width, so labels may wrap.
   Long translations ("2 zu synchronisieren") must not push the page sideways. */
@media (max-width: 768px) {
  .stack-table td, .stack-table .num, .acct-table td, .acct-table td * { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  /* The "Live demo · sample data" badge sits on its own row here; longer translations wrap */
  .demo-badge { max-width: 100%; white-space: normal; }
}

/* Phones: the language button in the demo bar shows just the flag */
@media (max-width: 480px) {
  .demo-top .lang-trigger { padding-inline: 10px 8px; gap: 6px; }
  .demo-top .lang-trigger .lang-code { display: none; }
}