/* Interactive demos. The app components (.hb-sync-btn, .sync-widget,
   .chart-widget) keep the values from the approved sources in
   ../new/interactive demos/ — Menlo stack, app colours and geometry. Only the
   stage around them follows the site. */

.demo {
  --hb-bg-low: #1e1e1e;
  --hb-bg-mid: #242424;
  --hb-border-hi: #454545;
  --hb-text: #ffffff;
  --hb-muted: #c8c8c8;
  --hb-dim: #8d8d8d;
  --hb-amber: #e0a14a;
  --hb-green: #52c07a;
  --hb-line: #4a9eff;
  --hb-shadow-md: 0 12px 28px rgba(6, 10, 18, 0.26);
  border: 1px solid #242424; border-radius: 14px;
  background: radial-gradient(120% 90% at 20% 0%, #17191b 0%, #111213 60%, #0f0f10 100%);
  padding: clamp(18px, 3vw, 32px);
}
.demo__foot { display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.demo__caption { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--dim, #8d8d8d); flex: 1 1 auto; min-width: 0; }
/* Replay: a small round arrow at the end of the caption line. */
.demo__replay {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; margin-bottom: -4px;
  display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  color: #bdbdbd; background: transparent; border: 1px solid #333;
}
.demo__replay:hover { color: #fff; border-color: #5a5a5a; }
.demo__replay svg { width: 13px; height: 13px; }

/* ---------- Sync: button + status matrix ---------- */
.sync-demo__stage {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 300px);
  gap: clamp(20px, 4vw, 48px); align-items: center; justify-content: center;
}
@media (max-width: 620px) {
  .sync-demo__stage { grid-template-columns: minmax(0, 300px); }
}
.sync-demo__sidebar {
  background: #1e1e1e; border: 1px solid #262626; border-radius: 12px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.sync-demo__label { font: 600 0.62rem/1 Menlo, Monaco, 'Courier New', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #8d8d8d; margin: 2px 2px 0; }

.hb-sync-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, #454545 16%, transparent);
  border-radius: 10px; padding: 8px 14px;
  background: color-mix(in srgb, #242424 86%, #2b2b2b);
  color: #ffffff; cursor: pointer;
  font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 0.8044rem; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.hb-sync-btn[aria-disabled="true"] { cursor: default; }
.hb-sync-btn[data-state="ready"] { border-color: color-mix(in srgb, #454545 72%, transparent); background: color-mix(in srgb, #3d5f3d 34%, #242424); }
.hb-sync-btn[data-state="ready"]:hover { background: color-mix(in srgb, #3d5f3d 42%, #242424); }
.hb-sync-btn[data-state="syncing"], .hb-sync-btn[data-state="synced"] { background: color-mix(in srgb, #242424 84%, #2b2b2b); color: #c8c8c8; }
.hb-sync-btn[data-state="synced"] { cursor: default; }
/* Local vector of Material Symbols Outlined "sync" (FILL 0, wght 400),
   drawn in the glyph's own em box so size and rotation centre match the font. */
.hb-sync-btn__icon { width: 1.17rem; height: 1.17rem; flex: 0 0 auto; color: #8d8d8d; }
.hb-sync-btn[data-state="ready"] .hb-sync-btn__icon { color: #98fb98; }
.hb-sync-btn__icon.is-spinning { animation: hb-sync-spin 1.8s linear infinite; }
@keyframes hb-sync-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.hb-sync-btn__dot {
  width: 9px; height: 9px; border-radius: 999px; background: #8d8d8d; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition: background 140ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hb-sync-btn__dot[data-tone="success"] { background: #7dc38f; transform: scale(1.15); }

.sync-widget {
  background: color-mix(in srgb, var(--hb-bg-low) 94%, black);
  border: 1px solid color-mix(in srgb, var(--hb-border-hi) 18%, transparent);
  border-radius: 16px; box-shadow: var(--hb-shadow-md);
  padding: 16px 18px 14px; width: 100%; max-width: 300px;
  display: flex; flex-direction: column;
  font-family: Menlo, Monaco, 'Courier New', monospace; color: var(--hb-text);
}
.sync-widget__title { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: color-mix(in srgb, var(--hb-text) 94%, white 6%); }
.sync-widget__subtitle { font-size: 0.625rem; color: var(--hb-dim); font-style: italic; margin-top: -2px; min-height: 14px; transition: color 200ms ease; }
.sync-widget__subtitle.is-done { color: var(--hb-green); font-style: normal; }
.sync-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 18px; justify-items: center; }
.sync-dot { width: 14px; height: 14px; border-radius: 999px; border: 1px solid transparent; background: var(--hb-amber); transform: scale(1); transition: background 320ms ease, transform 320ms ease, box-shadow 320ms ease; }
.sync-dot.is-active { background: var(--hb-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hb-green) 12%, transparent); }
.sync-dot.is-popping { transform: scale(1.15); }

/* ---------- Assignment chart ---------- */
.chart-widget {
  background: color-mix(in srgb, var(--hb-bg-low) 94%, black);
  border: 1px solid color-mix(in srgb, var(--hb-border-hi) 18%, transparent);
  border-radius: 16px; box-shadow: var(--hb-shadow-md);
  padding: 16px 18px 14px; width: 100%;
  display: flex; flex-direction: column;
  font-family: Menlo, Monaco, 'Courier New', monospace; color: var(--hb-text);
}
.chart-widget__title { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: color-mix(in srgb, var(--hb-text) 94%, white 6%); }
.chart-shell { position: relative; margin-top: 10px; }
.chart-shell svg { width: 100%; height: auto; overflow: visible; display: block; }
.chart-axis { stroke: rgba(255, 255, 255, 0.88); stroke-width: 1.15; }
.chart-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--hb-line); stroke-width: 2.7; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(74, 158, 255, 0.12)); }
.chart-area { fill: url(#hb-assignment-fill); }
.chart-node-hit { fill: transparent; cursor: pointer; }
.chart-node { fill: var(--hb-bg-low); stroke: var(--hb-line); stroke-width: 1.4; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; transform: scale(0.2); transition: opacity 220ms ease, transform 420ms cubic-bezier(.34,1.56,.64,1); }
.chart-node-hit:hover + .chart-node { opacity: 1; transform: scale(1); }
.chart-node.is-landing { opacity: 1; transform: scale(1); }
.chart-tick-text, .chart-axis-label { fill: rgba(255, 255, 255, 0.86); font-size: 10px; font-family: Menlo, Monaco, 'Courier New', monospace; user-select: none; }
.chart-axis-label { fill: #ffffff; font-size: 11px; text-transform: lowercase; letter-spacing: 0.04em; opacity: 0.94; }
.chart-widget__foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 10px; }
.chart-replay {
  appearance: none; border: 1px solid color-mix(in srgb, var(--hb-border-hi) 40%, transparent);
  background: color-mix(in srgb, var(--hb-bg-mid) 92%, black); color: var(--hb-muted); font-family: inherit;
  font-size: 0.625rem; letter-spacing: 0.02em; border-radius: 8px; padding: 5px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.chart-replay:hover { color: var(--hb-text); border-color: color-mix(in srgb, var(--hb-border-hi) 80%, transparent); }
.chart-replay:active { background: color-mix(in srgb, var(--hb-bg-low) 90%, black); }
.chart-replay svg.icon { width: 11px; height: 11px; transition: transform 500ms ease; }
.chart-replay.is-spinning svg.icon { transform: rotate(360deg); }

@media (prefers-reduced-motion: reduce) {
  .hb-sync-btn__icon.is-spinning { animation: none; opacity: 0.6; }
  .hb-sync-btn__dot, .sync-dot, .chart-node, .chart-replay svg.icon { transition: none; }
}