/*
 * Production application layout for the run-through simulator.
 *
 * The legacy simulator styles contain the component mechanics and compact
 * fallbacks. This final layer turns those components into one coherent app:
 * a continuous product canvas, a readable content measure, natural-height
 * sections, and page-specific information architecture.
 */

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo {
  --app-content-max: 92rem;
  --app-page-gutter: clamp(.9rem, 2.35vw, 2.35rem);
  --app-section-gap: clamp(.8rem, 1.2vw, 1.2rem);
  --app-card-radius: 1rem;
  --app-control-radius: .7rem;
  --app-control-height: 2.9rem;
  --app-passive-line: color-mix(in srgb, var(--line) 72%, transparent);
  --app-passive-fill: color-mix(in srgb, var(--surface) 90%, var(--bg));
  --app-raised-fill: color-mix(in srgb, var(--surface) 96%, var(--bg));
  --app-soft-shadow: 0 18px 42px -34px color-mix(in srgb, var(--ink) 36%, transparent);
  --product-text-caption: clamp(.68rem, .63rem + .1vw, .76rem);
  --product-text-meta: clamp(.76rem, .7rem + .12vw, .86rem);
  --product-text-body: clamp(.86rem, .8rem + .13vw, .98rem);
  --product-text-control: clamp(.86rem, .8rem + .12vw, .96rem);
  --product-text-subtitle: clamp(.94rem, .88rem + .18vw, 1.08rem);
  --product-text-title: clamp(1.05rem, .98rem + .26vw, 1.25rem);
  --product-text-display: clamp(1.48rem, 1.25rem + .62vw, 2.05rem);
  --product-text-figure: clamp(1.72rem, 1.42rem + .8vw, 2.45rem);
}

/* One shell, one canvas. The simulated browser chrome is the only frame. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-live-preview,
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence {
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-live-preview {
  overflow: hidden;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-browser-bar {
  position: relative;
  z-index: 40;
  min-height: 2.7rem;
  border: 0;
  border-bottom: 1px solid var(--browser-chrome-line);
  border-radius: 0;
  padding: .38rem clamp(.55rem, 1.4vw, 1rem);
  box-shadow: 0 8px 24px -24px rgba(20, 30, 36, .72);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport {
  background: var(--bg);
  scrollbar-gutter: auto;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport > .app-window {
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .app-nav {
  position: sticky;
  z-index: 30;
  top: 0;
  width: min(100%, var(--app-content-max));
  min-height: 4.85rem;
  margin-inline: auto;
  border: 0;
  border-bottom: 1px solid var(--app-passive-line);
  border-radius: 0;
  padding: .7rem var(--app-page-gutter);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  box-shadow: 0 12px 30px -32px color-mix(in srgb, var(--ink) 48%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .app-brand {
  min-width: 0;
  min-height: 0;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .app-brand-wordmark {
  width: clamp(10.5rem, 20vw, 15.5rem);
  height: 3rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] .app-brand-wordmark {
  width: clamp(12rem, 24vw, 17.5rem);
  height: 2.8rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .app-tabs {
  min-height: 2.4rem;
  padding-inline: .35rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .app-nav-chip {
  min-height: 2.15rem;
  border-color: var(--app-passive-line);
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  padding-inline: .72rem;
  font-size: var(--product-text-caption);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-page {
  width: min(100%, var(--app-content-max));
  max-width: var(--app-content-max);
  min-height: 0;
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 2rem) var(--app-page-gutter) clamp(2rem, 4vw, 4rem);
  background: transparent;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-main {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: start;
  align-items: start;
  gap: var(--app-section-gap);
  min-height: 0;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-main > .live-card {
  align-self: start;
  height: auto;
}

/* Page identity uses the same equal semantic rim as the active work below. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .8rem 1.5rem;
  min-height: 0;
  border: 2px solid color-mix(in srgb, var(--accent) 54%, var(--app-passive-line));
  border-radius: var(--app-card-radius);
  background: var(--app-raised-fill);
  padding: clamp(.85rem, 1.15vw, 1.15rem);
  box-shadow: var(--app-soft-shadow);
  overflow: visible;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head::after {
  display: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head-main {
  display: grid;
  gap: .32rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head .app-eyebrow {
  color: var(--accent-ink);
  font-size: var(--product-text-caption);
  letter-spacing: .09em;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head h4 {
  max-width: 25ch;
  margin: 0;
  color: var(--ink);
  font-size: var(--product-text-display);
  line-height: 1.02;
  letter-spacing: -.025em;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head p {
  max-width: 70ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--product-text-body);
  line-height: 1.48;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head-actions {
  align-self: start;
  justify-content: flex-end;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-status {
  min-height: 2.25rem;
  padding: .45rem .72rem;
  font-size: var(--product-text-caption);
}

/* KPI strips read as compact page facts rather than three more cards. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
  gap: .55rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-kpi,
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-kpis > .live-kpi:nth-child(n) {
  min-height: 4.15rem;
  border: 1px solid var(--app-passive-line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  padding: .72rem .82rem;
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-kpi span {
  color: var(--faint);
  font-size: var(--product-text-caption);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-kpi b {
  margin-top: .22rem;
  color: var(--ink);
  font-size: var(--product-text-title);
}

/* Passive grouping is quiet. Active work earns the brand rim and emission. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card {
  gap: clamp(.65rem, .9vw, .9rem);
  border: 1px solid var(--app-passive-line);
  border-radius: var(--app-card-radius);
  background: var(--app-raised-fill);
  padding: clamp(.85rem, 1.15vw, 1.15rem);
  box-shadow: var(--app-soft-shadow);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card:not(.awaiting-action, .is-continuation-target, .hot):hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--app-passive-line));
  transform: translateY(-1px);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card:is(.awaiting-action, .is-continuation-target, .hot) {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 36%),
    var(--app-raised-fill);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 10%, transparent),
    var(--app-soft-shadow);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card-title {
  gap: .45rem .7rem;
  font-size: var(--product-text-title);
  line-height: 1.2;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card-title span {
  font-size: var(--product-text-caption);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .block-icon {
  width: 2.15rem;
  height: 2.15rem;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: .65rem;
  background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
  .live-input,
  .liquidity-side,
  .liquidity-amount,
  .side-button,
  .app-ballot button,
  .defi-amount-input
) {
  min-height: var(--app-control-height);
  border-color: var(--app-passive-line);
  border-radius: var(--app-control-radius);
  background: color-mix(in srgb, var(--bg) 78%, var(--surface));
  font-size: var(--product-text-control);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-field {
  gap: .32rem;
  min-width: 0;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-field label {
  color: var(--faint);
  font-size: var(--product-text-caption);
  letter-spacing: .055em;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
  .mini-row,
  .app-row,
  .check-item,
  .face-check,
  .checkout-row,
  .app-route-step,
  .receipt-detail,
  .evidence-item
) {
  min-height: 2.55rem;
  border-color: color-mix(in srgb, var(--line) 56%, transparent);
  background: color-mix(in srgb, var(--bg) 42%, transparent);
  color: var(--muted);
  padding: .58rem .68rem;
  font-size: var(--product-text-meta);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
  .mini-row,
  .app-row,
  .check-item,
  .face-check,
  .checkout-row,
  .app-route-step,
  .receipt-detail,
  .evidence-item
) :is(b, strong, dd) {
  color: var(--ink);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .sim-app-action {
  min-height: 3rem;
  border-radius: var(--app-control-radius);
  padding: .66rem 1rem;
  font-size: var(--product-text-control);
  box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--action-fill) 66%, transparent);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-action-row {
  gap: .5rem .7rem;
  padding-top: .22rem;
}

/* Records are compact receipts, not a second nested application frame. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card.block-record {
  padding: 0;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card.block-record > summary {
  min-height: 4.6rem;
  border-radius: calc(var(--app-card-radius) - 1px);
  padding: .85rem 1rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card.block-record[open] > summary {
  border-bottom: 1px solid var(--app-passive-line);
  border-radius: calc(var(--app-card-radius) - 1px) calc(var(--app-card-radius) - 1px) 0 0;
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .record-panel {
  padding: .8rem 1rem 1rem;
}

/* Market creation form: meaningful field widths, not six cramped boxes. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-create-market .block-fields,
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-fields {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
  .page-create-market,
  .page-private-room
) .block-fields > .live-card-title,
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
  .page-create-market,
  .page-private-room
) .block-fields > .live-action-row {
  grid-column: 1 / -1;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-create-market .block-fields > .live-field:nth-of-type(2) {
  grid-column: span 7;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-create-market .block-fields > .live-field:nth-of-type(3) {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-create-market .block-fields > .live-field:nth-of-type(4) {
  grid-column: 1 / -1;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-create-market .block-fields > .live-field:nth-of-type(n + 5) {
  grid-column: span 4;
}

/* The private-room screen is a proper summary/form split. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-participants {
  grid-column: span 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-fields {
  grid-column: span 8;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-fields > .live-field:nth-of-type(2) {
  grid-column: span 7;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-fields > .live-field:nth-of-type(3) {
  grid-column: span 2;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-fields > .live-field:nth-of-type(4) {
  grid-column: span 3;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-fields > .live-field:nth-of-type(5) {
  grid-column: span 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-fields > .live-field:nth-of-type(6) {
  grid-column: span 8;
}

/* Lending becomes a familiar DeFi vault: position left, transaction right. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending > .live-main > .live-kpis {
  display: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending > .live-main:has(.defi-position-live) > .live-kpis {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending > .live-main:has(.defi-position-live) > .live-kpis > .live-kpi:nth-child(-n + 2) {
  display: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .block-yield {
  grid-template-columns: minmax(15rem, .72fr) minmax(20rem, 1.28fr);
  column-gap: clamp(.85rem, 1.4vw, 1.35rem);
  row-gap: .8rem;
  padding: clamp(1rem, 1.5vw, 1.35rem);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .block-yield > .live-card-title {
  grid-column: 1 / -1;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .block-yield > .defi-vault {
  display: contents;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .defi-vault-head {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  border: 0;
  border-radius: .85rem;
  background: color-mix(in srgb, var(--accent-soft) 44%, var(--bg));
  padding: .9rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .defi-vault-stats {
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: 1fr;
  gap: .45rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .defi-vault-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .7rem;
  min-height: 2.7rem;
  border-color: var(--app-passive-line);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--bg) 54%, transparent);
  padding: .62rem .72rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .defi-vault-stat b {
  margin: 0;
  text-align: right;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .defi-deposit-card {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: stretch;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: .95rem;
  background: color-mix(in srgb, var(--surface) 76%, var(--bg));
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .defi-deposit-tabs {
  min-height: 3rem;
  border-bottom-color: var(--app-passive-line);
  background: color-mix(in srgb, var(--bg) 68%, transparent);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .defi-deposit-body {
  gap: .75rem;
  padding: clamp(.8rem, 1.25vw, 1.15rem);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .block-yield > .live-action-row {
  grid-column: 2;
  grid-row: 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .block-yield > .live-action-row .sim-app-action {
  width: 100%;
  justify-content: space-between;
}

/* Dense decision pages get stable, semantic proportions. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
  .page-resolution-request,
  .page-court-handoff
) .live-card[data-block-type="record"] {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
  .page-resolution-request,
  .page-court-handoff
) .live-card[data-block-type="table"] {
  grid-column: span 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
  .page-resolution-request,
  .page-court-handoff
) .live-card[data-block-type="odds"] {
  grid-column: span 3;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-order-book .live-main:has(> .block-record) .block-fill {
  grid-column: span 8;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-order-book .live-main:has(> .block-record) .block-record {
  grid-column: span 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-create-market .live-main:has(> .block-odds) .block-odds {
  grid-column: span 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-create-market .live-main:has(> .block-odds) .block-record {
  grid-column: span 8;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .live-main[data-block-count="3"] .block-participants {
  grid-column: span 3;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .live-main[data-block-count="3"] .block-record {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .live-main[data-block-count="3"] .block-checklist {
  grid-column: span 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-juror-workspace .block-evidence {
  grid-column: span 7;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-juror-workspace .block-ballot {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-juror-workspace .live-main:has(> .block-proof) .block-proof {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-juror-workspace .live-main:has(> .block-proof) .block-record {
  grid-column: span 7;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-protocol-draw .live-main[data-block-count="2"]:has(> .block-beacon) .block-beacon {
  grid-column: span 7;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-protocol-draw .live-main[data-block-count="2"]:has(> .block-beacon) .block-seats {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-protocol-draw .live-main[data-block-count="3"] .block-beacon {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-protocol-draw .live-main[data-block-count="3"] .block-seats {
  grid-column: span 3;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-protocol-draw .live-main[data-block-count="3"] .block-face-checks {
  grid-column: span 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-protocol-draw .live-main[data-block-count="2"]:has(> .block-proof) .block-face-checks {
  grid-column: span 7;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-protocol-draw .live-main[data-block-count="2"]:has(> .block-proof) .block-proof {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-appeal-result .block-proof {
  grid-column: span 4;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-appeal-result .block-appeal-crowdfund {
  grid-column: span 8;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-settled-market .block-settlement {
  grid-column: span 5;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-settled-market .block-table {
  grid-column: span 7;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-juror-settlement .juror-settlement-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-appeal-crowdfund > .live-main > .live-kpis {
  display: none;
}

@container run-stage (min-width: 1100px) {
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
    .page-court-handoff,
    .page-appeal-review,
    .page-appeal-result,
    .page-juror-settlement,
    .page-parlay-slip
  ) > .live-main > .live-kpis,
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room > .live-main:has(> .block-record) > .live-kpis {
    display: none;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-juror-workspace > .live-main:has(> .block-proof) > .live-kpis {
    display: none;
  }
}

/* OmenMarketMaker: mesh canvas, tonal depth, green only for state and action. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] > .app-window {
  background:
    radial-gradient(circle at 78% 2%, rgba(4, 226, 109, .085), transparent 34rem),
    linear-gradient(rgba(0, 4, 2, .88), rgba(0, 4, 2, .95)),
    var(--omm-black);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] .app-nav {
  border-bottom-color: rgba(4, 226, 109, .19);
  background: rgba(0, 4, 2, .84);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] .live-page {
  background: transparent;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] .live-head {
  border-color: rgba(4, 226, 109, .54);
  background: rgba(7, 20, 12, .93);
  box-shadow: 0 20px 46px -40px rgba(0, 0, 0, .9);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] :is(
  .live-card,
  .trade-ticket,
  .app-panel
) {
  border-color: rgba(119, 181, 140, .16);
  background: rgba(7, 20, 12, .93);
  box-shadow: 0 20px 46px -40px rgba(0, 0, 0, .9);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] :is(
  .live-kpi,
  .mini-row,
  .app-row,
  .check-item,
  .face-check,
  .checkout-row,
  .app-route-step,
  .receipt-detail,
  .evidence-item
) {
  border-color: rgba(119, 181, 140, .12);
  background: rgba(2, 11, 6, .68);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] .live-card:not(.awaiting-action, .is-continuation-target, .hot):hover {
  border-color: rgba(4, 226, 109, .3);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="omen"] .live-card:is(.awaiting-action, .is-continuation-target, .hot) {
  border-color: rgba(4, 226, 109, .72);
  background:
    radial-gradient(circle at 100% 0, rgba(4, 226, 109, .11), transparent 38%),
    rgba(7, 22, 13, .97);
  box-shadow: inset 0 0 0 1px rgba(4, 226, 109, .08), 0 0 20px rgba(4, 226, 109, .09);
}

/* DemoThemis: warm paper and taupe structure; cyan is interaction, not fill. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] > .app-window {
  background:
    radial-gradient(circle at 82% 2%, rgba(var(--dt-emission-rgb), .05), transparent 30rem),
    var(--dt-brand-gradient);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] .app-nav {
  border-bottom-color: rgba(117, 98, 84, .16);
  background: rgba(250, 246, 241, .86);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] .live-page {
  background: transparent;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] .live-head {
  border-color: rgba(var(--dt-emission-rgb), .54);
  background: rgba(255, 252, 248, .82);
  box-shadow: 0 18px 42px -36px rgba(79, 64, 53, .58);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] :is(
  .live-card,
  .trade-ticket,
  .app-panel
) {
  border-color: rgba(117, 98, 84, .2);
  background: rgba(255, 252, 248, .82);
  box-shadow: 0 18px 42px -36px rgba(79, 64, 53, .58);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] :is(
  .live-kpi,
  .mini-row,
  .app-row,
  .check-item,
  .face-check,
  .checkout-row,
  .app-route-step,
  .receipt-detail,
  .evidence-item
) {
  border-color: rgba(117, 98, 84, .14);
  background: rgba(239, 232, 226, .46);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] .live-card:not(.awaiting-action, .is-continuation-target, .hot):hover {
  border-color: rgba(var(--dt-emission-rgb), .34);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport[data-app-theme="themis"] .live-card:is(.awaiting-action, .is-continuation-target, .hot) {
  border-color: rgba(var(--dt-emission-rgb), .72);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--dt-emission-rgb), .08), transparent 38%),
    rgba(255, 252, 248, .92);
  box-shadow: inset 0 0 0 1px rgba(var(--dt-emission-rgb), .11), 0 0 20px rgba(var(--dt-emission-rgb), .1);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card:is(
  .block-fields,
  .block-odds,
  .block-fill,
  .block-yield,
  .block-checklist,
  .block-tokens,
  .block-participants,
  .block-legs,
  .block-record,
  .block-beacon,
  .block-evidence,
  .block-proof,
  .block-checkout,
  .block-appeal-crowdfund,
  .block-closed
) {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .live-card.block-yield {
  border-color: color-mix(in srgb, var(--good) 54%, var(--line));
}

/* Protocol explainers use the same production canvas and content measure. */
body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence::before {
  display: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence > :is(
  .protocol-sequence-header,
  .protocol-sequence-scroll
) {
  box-sizing: border-box;
  width: min(100%, var(--app-content-max));
  max-width: var(--app-content-max);
  margin-inline: auto;
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-header {
  min-height: 4.85rem;
  border: 0;
  border-bottom: 1px solid var(--protocol-line);
  background: color-mix(in srgb, var(--protocol-bg) 86%, transparent);
  padding: .7rem var(--app-page-gutter);
  backdrop-filter: blur(16px) saturate(1.08);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-mark {
  width: clamp(10.5rem, 20vw, 15.5rem);
  height: 3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-scroll {
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--app-section-gap);
  padding: clamp(1rem, 2vw, 2rem) var(--app-page-gutter) clamp(2rem, 4vw, 4rem);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-scroll > * {
  min-height: max-content;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-current {
  align-items: start;
  border-bottom: 1px solid var(--protocol-line);
  padding: .25rem 0 1.2rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-current h4 {
  max-width: 28ch;
  font-size: var(--product-text-display);
  line-height: 1.04;
  letter-spacing: -.025em;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-current p {
  max-width: 72ch;
  font-size: var(--product-text-body);
  line-height: 1.48;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-facts {
  gap: .55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-fact {
  min-height: 4rem;
  border: 1px solid var(--protocol-line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--protocol-surface) 76%, transparent);
  padding: .7rem .8rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace {
  position: relative;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: .6rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace-step {
  min-height: 4rem;
  border-color: var(--protocol-line);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--protocol-surface) 76%, transparent);
  padding: .65rem .72rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace-step::after {
  display: none;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace-step.is-current {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--protocol-accent) 70%, var(--protocol-line));
  background: var(--protocol-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--protocol-accent) 10%, transparent);
}

@container run-stage (min-width: 1100px) {
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace {
    grid-template-columns: repeat(var(--protocol-step-count, 2), minmax(0, 1fr));
    gap: 0;
    padding-block: .2rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace::before {
    position: absolute;
    top: 1.68rem;
    right: 1.7rem;
    left: 1.7rem;
    height: 1px;
    background: var(--protocol-line);
    content: "";
    pointer-events: none;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace-step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: .42rem;
    min-height: 5.8rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: .42rem .55rem;
    text-align: center;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace-number {
    position: relative;
    z-index: 2;
    width: 2.1rem;
    height: 2.1rem;
    background: var(--protocol-bg);
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace-copy {
    justify-items: center;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace-step.is-current {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-trace-step.is-current .protocol-trace-copy {
    color: var(--protocol-accent);
  }
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-records {
  gap: var(--app-section-gap);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-tally .protocol-record[data-record-type="route"] {
  --protocol-record-span: 7 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-tally .protocol-record[data-record-type="proof"] {
  --protocol-record-span: 5 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-appeal .protocol-sequence-records:has(> :nth-child(2):last-child) .protocol-record[data-record-type="route"] {
  --protocol-record-span: 7 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-appeal .protocol-sequence-records:has(> :nth-child(2):last-child) .protocol-record[data-record-type="seats"] {
  --protocol-record-span: 5 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-appeal .protocol-sequence-records:has(> :nth-child(3):last-child) .protocol-record[data-record-type="seats"] {
  --protocol-record-span: 3 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-appeal .protocol-sequence-records:has(> :nth-child(3):last-child) .protocol-record[data-record-type="proof"] {
  --protocol-record-span: 4 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-appeal .protocol-sequence-records:has(> :nth-child(3):last-child) .protocol-record[data-record-type="table"] {
  --protocol-record-span: 5 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-relay .protocol-record[data-record-type="closed"] {
  --protocol-record-span: 4 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-relay .protocol-record[data-record-type="table"] {
  --protocol-record-span: 8 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo:is(
  .parlay-execution,
  .cashout-execution
) .protocol-sequence-records > .protocol-record:first-child {
  --protocol-record-span: 7 !important;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo:is(
  .parlay-execution,
  .cashout-execution
) .protocol-sequence-records > .protocol-record:nth-child(2) {
  --protocol-record-span: 5 !important;
}

@container run-stage (min-width: 1100px) {
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-tally:has(.protocol-record .proof-stamp) .protocol-sequence-facts,
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-appeal:has(.protocol-sequence-records > :nth-child(3)) .protocol-sequence-facts,
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .product-demo.protocol-relay .protocol-sequence-facts {
    display: none;
  }
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence .protocol-record.live-card {
  align-self: start;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border-color: var(--protocol-line);
  border-radius: var(--app-card-radius);
  background: color-mix(in srgb, var(--protocol-surface) 88%, transparent);
  padding: clamp(.85rem, 1.15vw, 1.15rem);
  box-shadow: var(--app-soft-shadow);
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence .app-seat-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(2.6rem, 3.1rem));
  justify-content: start;
  max-width: 42rem;
  gap: .42rem;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence .app-seat {
  width: 100%;
  aspect-ratio: 1;
}

/* Court coachmarks stay in the same warm/cyan visual language as the app. */
body[data-page-brand="neutral"] .product-mode-panel[data-active-brand="demothemis"] .target-callout,
body[data-page-brand="neutral"] .product-demo[data-active-brand="demothemis"] .target-callout {
  border: 1px solid rgba(var(--dt-emission-rgb), .72);
  background:
    radial-gradient(circle at 100% 0, rgba(var(--dt-emission-rgb), .1), transparent 42%),
    rgba(255, 251, 246, .98);
  color: var(--dt-ink);
  box-shadow:
    inset 0 0 0 1px rgba(var(--dt-emission-rgb), .1),
    0 0 18px rgba(var(--dt-emission-rgb), .12),
    0 14px 30px -22px rgba(79, 64, 53, .42);
}

body[data-page-brand="neutral"] .product-mode-panel[data-active-brand="demothemis"] .target-callout :is(strong, b),
body[data-page-brand="neutral"] .product-demo[data-active-brand="demothemis"] .target-callout :is(strong, b) {
  color: var(--dt-ink);
}

body[data-page-brand="neutral"] .product-mode-panel[data-active-brand="demothemis"] .target-callout :is(span, small),
body[data-page-brand="neutral"] .product-demo[data-active-brand="demothemis"] .target-callout :is(span, small) {
  color: #70645b;
}

body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-legend {
  padding: .85rem 0 0;
}

/* Browser-window view covers only the tab and never adds a decorative frame. */
body[data-page-brand="neutral"] .product-mode-panel.is-full-window {
  gap: 0;
  padding: 0;
  background: var(--bg);
}

body[data-page-brand="neutral"] #productModePanel.is-full-window {
  padding: 0;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window > .run-control-panel {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .38rem clamp(.45rem, 1.2vw, .85rem);
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window > .simulator-island {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window .product-demo {
  gap: 0;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-step-guide {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .42rem clamp(.45rem, 1.2vw, .85rem);
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window :is(
  .sim-live-preview,
  .protocol-sequence,
  .sim-demand-frame
) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-demand-frame {
  padding: 2rem 0 0;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-app-viewport > .app-window {
  max-width: none;
  border-inline: 0;
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window .protocol-sequence > :is(
  .protocol-sequence-header,
  .protocol-sequence-scroll
) {
  max-width: var(--app-content-max);
  border-inline: 0;
  box-shadow: none;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-app-viewport .live-page {
  min-height: 0;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-app-viewport .live-main {
  min-height: 0;
}

body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-app-viewport .live-card {
  align-self: start;
}

/* Tablet: use two meaningful columns before collapsing to a phone stack. */
@container run-stage (min-width: 761px) and (max-width: 1099px) {
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-main > :is(
    .live-head,
    .live-kpis,
    .live-intent
  ) {
    grid-column: 1 / -1;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-main > .live-card {
    grid-column: auto / span 1 !important;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-main > .live-card:is(
    [data-layout-role="primary"],
    .block-yield,
    .block-fill,
    .block-appeal-crowdfund,
    .block-juror-settlement
  ) {
    grid-column: 1 / -1 !important;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-participants,
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-private-room .block-fields {
    grid-column: 1 / -1 !important;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-records {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence .protocol-record.live-card {
    grid-column: span 1;
  }
}

@container run-stage (max-width: 1099px) {
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .appeal-crowdfund,
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .appeal-crowdfund-body {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .appeal-crowdfund > *,
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .appeal-crowdfund-body > * {
    grid-column: 1 / -1 !important;
    min-width: 0;
    max-width: 100%;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
    .appeal-contributor-row,
    .appeal-goal-breakdown,
    .appeal-goal-part,
    .appeal-custody-note,
    .appeal-quote-details
  ) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Phone and narrow embedded views keep every control readable and ordered. */
@container run-stage (max-width: 760px) {
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .app-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem .7rem;
    min-height: 0;
    padding: .6rem .72rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .app-brand {
    grid-column: 1 / -1;
    border: 0;
    border-bottom: 1px solid var(--app-passive-line);
    padding: 0 0 .5rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .app-brand-wordmark {
    width: min(100%, 13.5rem);
    height: 2.8rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-page {
    padding: .85rem .72rem 2rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-main {
    grid-template-columns: minmax(0, 1fr);
    gap: .72rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-main > * {
    grid-column: 1 / -1 !important;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head {
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    padding-bottom: .9rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head p {
    display: block;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-head-actions {
    justify-content: flex-start;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
    .page-create-market,
    .page-private-room
  ) .block-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
    .page-create-market,
    .page-private-room
  ) .block-fields > .live-field {
    grid-column: 1 / -1 !important;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .block-yield {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .block-yield > :is(
    .live-card-title,
    .live-action-row
  ),
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-token-lending .block-yield :is(
    .defi-vault-head,
    .defi-vault-stats,
    .defi-deposit-card
  ) {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .page-juror-settlement .juror-settlement-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-header {
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
    padding: .65rem .72rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-mark {
    width: min(100%, 13.5rem);
    height: 2.8rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-identity {
    display: grid;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-kicker {
    display: none;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-identity strong {
    font-size: .86rem;
    line-height: 1.15;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-badges {
    justify-content: flex-start;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-scroll {
    padding: .85rem .72rem 2rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-current,
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence-records {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence .protocol-record.live-card {
    grid-column: 1 / -1;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .protocol-sequence .app-seat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 22rem;
  }
}

@container run-stage (max-width: 420px) {
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card {
    border-radius: .85rem;
    padding: .78rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport :is(
    .mini-row,
    .app-row,
    .check-item,
    .face-check,
    .checkout-row,
    .app-route-step,
    .receipt-detail,
    .evidence-item
  ) {
    min-height: 0;
    padding: .52rem .58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-brand="neutral"] .product-mode-panel[data-product-mode] .sim-app-viewport .live-card {
    transition: none;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  body[data-page-brand="neutral"] .product-mode-panel.is-full-window > .run-control-panel {
    padding-block: .26rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel.is-full-window .run-controls :is(
    .btn,
    .event-navigator-toggle,
    .simulator-fullscreen-toggle
  ) {
    min-height: 2.5rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-step-guide {
    padding-block: .3rem;
  }

  body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-step-badge {
    width: 2.5rem;
    min-height: 2.5rem;
  }
}

/*
 * Sparse pages should feel composed on tall monitors, not pinned to the top
 * of a giant empty canvas. Dense trading, lending, and crowdfunding screens
 * keep their natural top-to-bottom workflow; one- and two-card pages sit in
 * the optical centre of the remaining application area.
 */
@media (min-width: 1200px) and (min-height: 1050px) {
  body[data-page-brand="neutral"] .product-mode-panel.is-full-window .sim-app-viewport .live-page:not(
    .page-live-market,
    .page-token-lending,
    .page-appeal-crowdfund
  ) .live-main:is(
    [data-block-count="1"],
    [data-block-count="2"]
  ) {
    box-sizing: border-box;
    align-content: safe center;
    padding-bottom: clamp(6rem, 12vh, 12rem);
  }
}

@media (max-width: 280px) {
  body[data-page-brand="neutral"] .target-callout:not(.is-inline) {
    top: auto !important;
    right: .25rem !important;
    bottom: .25rem !important;
    left: .25rem !important;
    width: auto !important;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: none;
  }
}