/* LYRC design-token skin for Find the hook (hook-loop.html).
 * Revert: remove `lyrc-app` from <body class> OR delete the <link> in hook-loop.html.
 * Tokens come from cutflux-tokens.css (--cf-*). Approach mirrors beat-timeline-lyrc.css.
 * Visual layer only - no layout, geometry, order or behaviour changes.
 * !important is used only where lab-tool-shell.css already forces !important (or to beat an inline style). */

/* -- Page tokens: collapse the per-tool tint/accent onto LYRC (lab-tool-shell.css reads these) -- */
html[data-lab-tool] body.lyrc-app {
  --portal-bg: var(--cf-bg);
  --portal-surface: var(--cf-panel);
  --portal-tint: transparent;
  --portal-glow: transparent;
  --portal-accent: var(--cf-accent);
  --portal-accent-deep: var(--cf-accent);
  --portal-border: var(--cf-border-subtle);
  --portal-border-hot: var(--cf-border);
  background: var(--cf-bg) !important; /* flat: no radial glows on the static backdrop */
  color: var(--cf-text);
  font-family: var(--cf-font);
}
html[data-lab-tool] body.lyrc-app :focus-visible { outline: none; box-shadow: var(--cf-focus) !important; }

/* -- Top bar -- */
html[data-lab-tool] body.lyrc-app .bar {
  background: var(--cf-bg) !important;
  border-bottom-color: var(--cf-border-subtle) !important;
}
html[data-lab-tool] body.lyrc-app .brand { color: var(--cf-text); font-weight: 700; }
html[data-lab-tool] body.lyrc-app .back { color: var(--cf-text-3); transition: color var(--cf-t-fast); }
html[data-lab-tool] body.lyrc-app .back:hover { color: var(--cf-text); }

/* -- Headings + copy (text opacity 100/70/50/30 only) -- */
html[data-lab-tool] body.lyrc-app h1 { color: var(--cf-text); font-weight: 700; }
html[data-lab-tool] body.lyrc-app .sub { color: var(--cf-text-2); }
html[data-lab-tool] body.lyrc-app .hint { color: var(--cf-text-3); }
html[data-lab-tool] body.lyrc-app label { color: var(--cf-text-2); }

/* -- Cards / panels: flat panel + border, no inset glow -- */
html[data-lab-tool] body.lyrc-app .card {
  background: var(--cf-panel) !important;
  border: 1px solid var(--cf-border-subtle) !important;
  border-radius: var(--cf-r-panel);
  box-shadow: none;
}
html[data-lab-tool] body.lyrc-app .card h2 { color: var(--cf-text) !important; font-weight: 600; }

/* -- Tip / how-it-works banner: flat card surface -- */
html[data-lab-tool] body.lyrc-app .hl-flow,
html[data-lab-tool] body.lyrc-app .tr-tip,
html[data-lab-tool] body.lyrc-app .sr-tip,
html[data-lab-tool] body.lyrc-app .vs-tip {
  background: var(--cf-card) !important;
  border: 1px solid var(--cf-border) !important;
  border-radius: var(--cf-r-panel);
  color: var(--cf-text-2);
}
html[data-lab-tool] body.lyrc-app .hl-flow.show,
html[data-lab-tool] body.lyrc-app .tr-tip.show,
html[data-lab-tool] body.lyrc-app .sr-tip.show,
html[data-lab-tool] body.lyrc-app .vs-tip.show { animation: lyrcLabIn var(--cf-t-slow) both; }
html[data-lab-tool] body.lyrc-app .hl-flow strong,
html[data-lab-tool] body.lyrc-app .tr-tip strong,
html[data-lab-tool] body.lyrc-app .sr-tip strong,
html[data-lab-tool] body.lyrc-app .vs-tip strong { color: var(--cf-text); }
html[data-lab-tool] body.lyrc-app .hl-close,
html[data-lab-tool] body.lyrc-app .tr-close,
html[data-lab-tool] body.lyrc-app .sr-close,
html[data-lab-tool] body.lyrc-app .vs-close {
  background: var(--cf-raised);
  border: 1px solid var(--cf-border);
  color: var(--cf-text-2);
  transition: background-color var(--cf-t-fast), color var(--cf-t-fast);
}
html[data-lab-tool] body.lyrc-app .hl-close:hover,
html[data-lab-tool] body.lyrc-app .tr-close:hover,
html[data-lab-tool] body.lyrc-app .sr-close:hover,
html[data-lab-tool] body.lyrc-app .vs-close:hover { background: var(--cf-hover); color: var(--cf-text); }

/* -- Drop zones -- */
html[data-lab-tool] body.lyrc-app .drop {
  border: 2px dashed var(--cf-border-strong);
  border-radius: var(--cf-r-card);
  background: var(--cf-surface);
  transition: border-color var(--cf-t-fast), background-color var(--cf-t-fast);
}
html[data-lab-tool] body.lyrc-app .drop:hover,
html[data-lab-tool] body.lyrc-app .drop.over {
  border-color: var(--cf-accent) !important;
  background: var(--cf-accent-soft) !important;
}
html[data-lab-tool] body.lyrc-app .drop p { color: var(--cf-text-3); }
html[data-lab-tool] body.lyrc-app .drop .big { color: var(--cf-text); }

/* -- Inputs -- */
html[data-lab-tool] body.lyrc-app input[type="text"],
html[data-lab-tool] body.lyrc-app textarea,
html[data-lab-tool] body.lyrc-app select {
  background: var(--cf-input);
  color: var(--cf-text);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-button);
  transition: border-color var(--cf-t-fast), box-shadow var(--cf-t-fast);
}
html[data-lab-tool] body.lyrc-app input[type="text"]::placeholder { color: var(--cf-text-4); }
html[data-lab-tool] body.lyrc-app input:focus,
html[data-lab-tool] body.lyrc-app textarea:focus,
html[data-lab-tool] body.lyrc-app select:focus { border-color: var(--cf-accent); box-shadow: var(--cf-focus); }
html[data-lab-tool] body.lyrc-app input[type="range"] { accent-color: var(--cf-accent); }

/* -- Primary button: flat accent, 6px -- */
html[data-lab-tool] body.lyrc-app button.primary {
  background: var(--cf-accent) !important;
  border: 0;
  border-radius: var(--cf-r-button);
  color: #fff;
  box-shadow: none;
  filter: none !important;
  font-family: var(--cf-font);
  font-weight: 600;
  transition: transform var(--cf-t-fast), background-color var(--cf-t-fast), color var(--cf-t-fast);
}
html[data-lab-tool] body.lyrc-app button.primary:hover:not(:disabled) { background: var(--cf-accent-hover) !important; }
html[data-lab-tool] body.lyrc-app button.primary:disabled {
  opacity: 1;
  background: var(--cf-surface) !important;
  box-shadow: inset 0 0 0 1px var(--cf-border);
  color: var(--cf-text-4);
}

/* -- Secondary buttons (transport / mode chips): flat surface + border -- */
html[data-lab-tool] body.lyrc-app .controls button,
html[data-lab-tool] body.lyrc-app button.secondary,
html[data-lab-tool] body.lyrc-app .modes button {
  background: var(--cf-surface);
  border-color: var(--cf-border); /* .modes keep their 1px border; borderless buttons get an inset hairline below */
  border-radius: var(--cf-r-button);
  color: var(--cf-text);
  font-family: var(--cf-font);
  transition: background-color var(--cf-t-fast), border-color var(--cf-t-fast), color var(--cf-t-fast), opacity var(--cf-t-fast);
}
html[data-lab-tool] body.lyrc-app .controls button:hover:not(:disabled),
html[data-lab-tool] body.lyrc-app button.secondary:hover:not(:disabled),
html[data-lab-tool] body.lyrc-app .modes button:hover:not(.active) { background: var(--cf-hover); }
html[data-lab-tool] body.lyrc-app .controls button,
html[data-lab-tool] body.lyrc-app button.secondary { box-shadow: inset 0 0 0 1px var(--cf-border); }
html[data-lab-tool] body.lyrc-app .controls button:disabled,
html[data-lab-tool] body.lyrc-app button.secondary:disabled { opacity: 1; color: var(--cf-text-4); box-shadow: inset 0 0 0 1px var(--cf-border-subtle); }
/* The page's `font: 600 Npx inherit` shorthands are invalid (dropped), so buttons fell back to the UA font.
   Inter at the UA's ~13px keeps the same box size; mode chips use 12px so 3-up labels still fit one line. */
html[data-lab-tool] body.lyrc-app button.primary,
html[data-lab-tool] body.lyrc-app .controls button,
html[data-lab-tool] body.lyrc-app button.secondary { font-size: var(--cf-fs-base); font-weight: 600; }
html[data-lab-tool] body.lyrc-app .modes button { color: var(--cf-text-2); font-size: var(--cf-fs-sm); font-weight: 600; }
html[data-lab-tool] body.lyrc-app .modes button.active {
  background: var(--cf-accent-soft) !important;
  border-color: var(--cf-accent) !important;
  color: var(--cf-text) !important;
}

/* -- Preview frame -- */
html[data-lab-tool] body.lyrc-app .preview-wrap {
  background: var(--cf-canvas);
  border-radius: var(--cf-r-card);
}

/* -- Status line (status colours only, never interactive) -- */
html[data-lab-tool] body.lyrc-app .status { color: var(--cf-text-3); transition: color var(--cf-t-base); }
html[data-lab-tool] body.lyrc-app .status.ok { color: var(--cf-ok); }
html[data-lab-tool] body.lyrc-app .status.err { color: var(--cf-pink); }

/* -- Loading: progress bar = flat accent fill with a soft sheen while it runs -- */
html[data-lab-tool] body.lyrc-app .progress {
  background: var(--cf-surface);
  border-radius: var(--cf-r-pill);
}
html[data-lab-tool] body.lyrc-app .progress.show { animation: lyrcLabIn var(--cf-t-base) both; }
html[data-lab-tool] body.lyrc-app .progress > div {
  position: relative;
  overflow: hidden;
  background: var(--cf-accent) !important;
  border-radius: var(--cf-r-pill);
  transition: width var(--cf-t-base);
}
html[data-lab-tool] body.lyrc-app .progress > div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: lyrcLabSheen 1.2s ease-in-out infinite;
}

@keyframes lyrcLabIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lyrcLabSheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  html[data-lab-tool] body.lyrc-app * { animation: none !important; }
}

/* ===== Hook-loop specifics ===== */
html[data-lab-tool] body.lyrc-app .hl-step {
  background: var(--cf-surface);
  box-shadow: inset 0 0 0 1px var(--cf-border-subtle);
  border-radius: var(--cf-r-card);
}
html[data-lab-tool] body.lyrc-app .hl-num { background: var(--cf-accent); color: #fff; }
html[data-lab-tool] body.lyrc-app .hl-txt { color: var(--cf-text-2); }
html[data-lab-tool] body.lyrc-app .hl-txt strong { color: var(--cf-text); }

/* Results panel fades in instead of popping */
html[data-lab-tool] body.lyrc-app .vis-wrap {
  background: var(--cf-surface);
  box-shadow: inset 0 0 0 1px var(--cf-border-subtle);
  border-radius: var(--cf-r-card);
  animation: lyrcLabIn var(--cf-t-slow) both;
}
html[data-lab-tool] body.lyrc-app canvas.wave { background: var(--cf-canvas); border-radius: var(--cf-r-button); }
html[data-lab-tool] body.lyrc-app .stat {
  background: var(--cf-card);
  box-shadow: inset 0 0 0 1px var(--cf-border-subtle);
  border-radius: var(--cf-r-card);
}
html[data-lab-tool] body.lyrc-app .stat-label { color: var(--cf-text-3); }
html[data-lab-tool] body.lyrc-app .stat-value { color: var(--cf-text); font-variant-numeric: tabular-nums; }
html[data-lab-tool] body.lyrc-app #timeLabel { color: var(--cf-text-3) !important; font-variant-numeric: tabular-nums; }

/* Playback progress */
html[data-lab-tool] body.lyrc-app .play-bar progress { background: var(--cf-raised); border-radius: var(--cf-r-pill); }
html[data-lab-tool] body.lyrc-app .play-bar progress::-webkit-progress-bar { background: var(--cf-raised); border-radius: var(--cf-r-pill); }
html[data-lab-tool] body.lyrc-app .play-bar progress::-webkit-progress-value { background: var(--cf-accent); border-radius: var(--cf-r-pill); }
html[data-lab-tool] body.lyrc-app .play-bar progress::-moz-progress-bar { background: var(--cf-accent); border-radius: var(--cf-r-pill); }