/* =====================================================================
 * Live-demo overrides — honesty-boundary affordances for the embedded mocks.
 *
 * The mocks depict the real product, but some surfaces are briefed / not yet
 * live (the Yarra copilot, deposits, calendar sync, the discovery channel).
 * Per the honesty boundary they must read as "coming", never as shipped.
 * Each such surface is tagged with .yj-soon-tag (an inline "Coming soon"
 * pill) and/or wrapped in .yj-soon (a non-interactive, dashed preview).
 *
 * Loaded last, after the component CSS, by every screen that needs it.
 * Tokens only; no animation (so it's reduced-motion-safe by construction).
 * =================================================================== */

/* Inline "Coming soon" pill — sits next to the feature's label. */
.yj-soon-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--sunlight-50);
  color: var(--sunlight-700);
  border: 1px solid var(--sunlight-200);
  white-space: nowrap;
  vertical-align: middle;
}
.yj-soon-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sunlight-400);
}

/* On a dark / canopy chrome surface, flip to legible light-gold. */
.yj-soon-tag.on-dark,
[data-variant="canopy"] .yj-on-dark .yj-soon-tag {
  background: rgba(221, 160, 29, 0.14);
  color: var(--sunlight-200);
  border-color: rgba(221, 160, 29, 0.30);
}

/* Wrap a whole briefed surface: visible as a preview, but not interactive
 * and clearly marked. Children stay legible; controls are inert. */
.yj-soon {
  position: relative;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.yj-soon > * {
  opacity: 0.92;
}
/* No live interaction on a not-yet-live surface. */
.yj-soon button,
.yj-soon a,
.yj-soon input,
.yj-soon select,
.yj-soon textarea,
.yj-soon [role="button"] {
  pointer-events: none;
  cursor: default;
}

/* A small standalone caption to explain a preview ("Yarra copilot — coming
 * soon on a paid plan."). Quiet, secondary. */
.yj-soon-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--fg-tertiary);
}
.yj-soon-note strong {
  color: var(--fg-secondary);
  font-weight: 600;
}

/* "This is a demo" strip — only shown standalone (see demo-standalone.js;
 * hidden by default so it never appears inside the homepage iframes). */
.demo-strip { display: none; }
html.demo-standalone .demo-strip {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 9999;
  padding: 9px 18px;
  background: var(--canopy-800);
  color: var(--mist-100);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.3;
  border-bottom: 1px solid var(--canopy-600);
}
.demo-strip-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(221, 160, 29, 0.16);
  color: var(--sunlight-200);
  border: 1px solid rgba(221, 160, 29, 0.32);
}
.demo-strip-text { color: var(--mist-100); }
.demo-strip-cta {
  margin-left: auto;
  color: var(--sunlight-200);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.demo-strip-cta:hover { color: var(--sunlight-100); text-decoration: underline; }