/*
 * The demo layer's own styles. Appended to the mock; nothing in the mock is restyled.
 *
 * @build yaml/site-launch.yaml · P15.T13 · 2026-09-20
 * @why   Two things the mock does not have and the demo needs: a visible statement that
 *        the data is invented, and an answer the visitor can see when they change
 *        something. Everything below is written in the mock's own tokens (--accent,
 *        --line, --ink-faint, --radius, the JetBrains Mono micro-label) so it reads as
 *        part of the product rather than as a layer bolted over it.
 */

/* ---------------------------------------------------------------- the demo badge
   A pill in the app's own top bar, between the org name and the counters. NOT a
   floating overlay: the demo is shown inside an <iframe> that IS the whole window, so
   an overlay would sit on top of the product in every screenshot. A build/environment
   pill in the chrome is something real products carry, so it costs the demo nothing to
   look like one — and it is on screen in all three views, which a one-off note is not. */
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(215, 56, 51, 0.32);
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.demo-badge i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

/* ---------------------------------------------------------------- the answer toast
   Every wired control answers here, and it answers on the same frame the click lands
   (docs/design/UX-FEEDBACK.md rule 1: nothing ever looks stuck). Bottom-left, clear of
   the strategy column on the right where the controls themselves are, so the answer
   does not cover the thing that was just changed. */
.demo-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 420px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
  color: #FFFDFA;
  font-size: 12.5px;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(27, 25, 21, 0.22);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}
.demo-toast[data-shown] {
  opacity: 1;
  transform: translateY(0);
}
.demo-toast .tick {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #4C9A6A;
  color: #FFFDFA;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
}
/* The honest variant: a control that is switched off in the demo says so, and does not
   dress the refusal up as a success. */
.demo-toast[data-kind="off"] .tick {
  background: var(--ink-faint);
}

/* ---------------------------------------------------------------- press states
   The mock styles hover on its controls and nothing on :active. A control the visitor
   is holding down must look held down before its result arrives, so the two the demo
   wires get one. */
.sbtn:active,
.btn:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .demo-toast { transition: none; }
  .sbtn:active, .btn:active { transform: none; }
}