/* ==========================================================================
   demo.css — page-level framing for the /features/ static canvas scene.
   Prefix: .fd-* for everything that isn't part of the canvas look itself
   (canvas.css / canvas-modules.css own the cv- and cm- classes and are
   not edited). Scene is rendered by demo.js from scenes/<name>.js —
   drag/pan/zoom only. NOTE: never write "star-slash" sequences like
   .cv-* / ... inside comments without the spaces — it closes the comment
   early and the browser silently drops the next rule.
   ========================================================================== */

/* ── Canvas frame — full-bleed directly under the 60px sticky nav ────── */
.fd-canvas-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 60px);
  overflow: hidden;
}
/* .cv-viewport (canvas.css) is flex:1 — it fills the frame on its own.
   min-height/width 0 is required: the 3200×2200 .cv-canvas is an in-flow
   child, and a flex item's default min-height:auto would let it stretch
   the viewport to canvas size (making zoom-to-fit center in a viewport
   far taller than what's visible). The old app's .cv-stage absorbed this. */
.fd-canvas-frame .cv-viewport { min-height: 0; min-width: 0; }

/* ── Static core-card text — the engine styled these as textareas;
   rendered as plain divs now, so just keep the type treatment sane. */
.fd-static-title   { min-height: 0; }
.fd-static-summary { min-height: 0; white-space: pre-wrap; }

/* ── Module demo blurb — first child of every module card body ───────── */
.cm-demo-blurb {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cv-ink-soft);
  border-left: 2px solid var(--cv-brand-soft);
  padding: 2px 0 2px 8px;
  margin: 0 0 10px;
}

/* ── Display rows the renderer needs (no editable equivalent existed) ── */

/* budget line — label + right-aligned amount */
.fd-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 2px;
  font-size: 12.5px;
  color: var(--cv-ink);
}
.fd-line-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--cv-ink-soft);
  flex-shrink: 0;
}
.fd-line + .cm-budget-total { margin-top: 8px; margin-bottom: 0; }

/* date value — plain text where the engine had an <input type=date> */
.fd-date-value {
  font-size: 11px;
  font-weight: 500;
  color: var(--cv-ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* checklist label — plain text where the engine had an <input> */
.fd-check-label {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cv-ink);
  min-width: 0;
}
.fd-check-done { text-decoration: line-through; color: var(--cv-ink-faint); }

/* status dot + text */
.fd-status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.fd-status-row:last-child { margin-bottom: 0; }
.fd-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fd-tone-good { background: var(--cv-ok);   box-shadow: 0 0 0 3px rgba(74,124,89,0.15); }
.fd-tone-warn { background: var(--cv-warn); box-shadow: 0 0 0 3px rgba(212,146,42,0.15); }
.fd-status-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cv-ink-soft);
}

/* one-line stat */
.fd-stat {
  font-size: 12px;
  font-weight: 500;
  color: var(--cv-ink-soft);
  line-height: 1.45;
  margin-bottom: 8px;
}
.fd-stat:last-child { margin-bottom: 0; }

/* count badge inside a reused .cm-lp-pill */
.fd-pill-count {
  margin-left: 5px;
  padding-left: 5px;
  border-left: 1px solid var(--cv-line);
  font-variant-numeric: tabular-nums;
  color: var(--cv-ink-soft);
}

/* role text inside a reused .cm-actor-chip */
.fd-chip-role {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cv-ink-faint);
  padding-left: 6px;
  border-left: 1px solid var(--cv-line);
}

/* ── Lang toggle — floats top-right inside the viewport ──────────────── */
.fd-lang-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--cv-line);
  border-radius: 100px;
  box-shadow: var(--cv-shadow-sm);
  flex-shrink: 0;
}
.fd-lang-pill {
  appearance: none;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cv-ink-soft);
  padding: 5px 10px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fd-lang-pill:hover { color: var(--cv-ink); }
.fd-lang-pill[aria-current="true"] {
  background: var(--cv-brand);
  color: #fff;
}

/* ── Floating CTA — bottom-centre of the viewport, ignores panzoom ───── */
.fd-cta {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  background: var(--cv-brand);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(138,23,36,0.35), 0 2px 6px rgba(31,29,26,0.12);
  white-space: nowrap;
  animation: fd-cta-pulse 2.6s ease-in-out infinite;
}
.fd-cta:hover { background: #a01c2b; box-shadow: 0 8px 24px rgba(138,23,36,0.42); }

@keyframes fd-cta-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(138,23,36,0.35), 0 2px 6px rgba(31,29,26,0.12); }
  50%      { box-shadow: 0 6px 26px rgba(138,23,36,0.55), 0 2px 10px rgba(31,29,26,0.16); }
}

@media (prefers-reduced-motion: reduce) {
  .fd-cta { animation: none; }
}

/* ── Subtask card — very pale red title bar so it reads as its own tier ─ */
.cm-card-subtask .cm-card-header {
  background: #f9edee;
}

/* ── Static segmented toggle (budget currency USD | JPY) ─────────────── */
.fd-toggle {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 2px;
  margin-bottom: 8px;
  background: rgba(31,29,26,0.05);
  border: 1px solid var(--cv-line);
  border-radius: 100px;
}
.fd-toggle-opt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--cv-ink-soft);
  padding: 3px 10px;
  border-radius: 100px;
}
.fd-toggle-on {
  background: var(--cv-brand);
  color: #fff;
}

/* ── Brand-red avatar — Aio, the in-house AI assistant ───────────────── */
.fd-avatar-brand { background: var(--cv-brand); }

/* ── Green tick variant — landing page's "pulled from the plan" list ─── */
.fd-check-good.cm-done {
  background: #2e7d4f;
  border-color: #2e7d4f;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Viewport hugs the frame edge-to-edge on small screens. */
  .cv-viewport { margin: 8px; }
  .fd-lang-pill { padding: 5px 7px; font-size: 10px; }
}