/* =========================================================
   Learning Rewired Lab — Design Lab (redesign)
   Page-specific styles. Pairs with global.css + resource-lab.js.
   Layout is inline on the elements; this file holds only
   what inline styles can't express (keyframes, media
   queries, hover states).
   ========================================================= */

.dl-home { box-sizing: border-box; }
.dl-home *, .dl-home *::before, .dl-home *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.dl-home main { overflow: hidden; }
.dl-home ::selection { background: rgba(22,184,217,.22); }

/* ---- keyframes ---- */
@keyframes dl-pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes dl-sheen { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes dl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .dl-float { animation: none !important; } }

/* ---- hover states ---- */
.h-cyan:hover  { background:#0ea5c2 !important; }
.h-mint:hover  { background:#ffffff !important; }
.h-ink:hover   { background:rgba(255,255,255,.14) !important; }
.h-ghost:hover { border-color:#16b8d9 !important; color:#0789a2 !important; }
.h-link:hover  { color:#07111f !important; }
.h-bright:hover { filter:brightness(1.08); }
.dl-move:hover { border-color:rgba(110,231,216,.6) !important; }
.dl-cat:hover  { border-color:rgba(22,184,217,.4) !important; background:#fff !important; }

.h-tool { transition:transform .2s, box-shadow .2s, border-color .2s; }
.h-tool:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,23,42,.1) !important; border-color:rgba(22,184,217,.4) !important; }

/* ---- FAQ/protocol accordion ---- */
.dl-faq { transition:border-color .2s; }
.dl-faq summary::-webkit-details-marker { display:none; }
.dl-faq summary { list-style:none; }
.dl-faq[open] .dl-faq-sign { transform:rotate(45deg); }
.dl-faq-sign { transition:transform .2s; }

/* ---- Kit form (dark gate) — keep the embed legible on navy ---- */
[data-ref="kit-form"] .formkit-form { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
[data-ref="kit-form"] input { border-radius:10px !important; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  [data-r="hero"], [data-r="move"], [data-r="pb"], [data-r="console"] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-r="hero"] { gap: 40px !important; }
  [data-r="move"] > div:first-child { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  [data-r="h1"] { font-size: 46px !important; }
  [data-r="pb"] { border-radius: 24px !important; }
  [data-r="pb-media"] { min-height: 280px !important; }
  [data-r="arch"], [data-r="tools"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="console"] { grid-template-columns: 1fr !important; gap: 18px !important; }
  [data-r="console"] aside { position: static !important; display: flex !important; flex-wrap: wrap !important; }
  [data-r="console"] aside button { flex: 1 1 auto !important; }
}
@media (max-width: 640px) {
  [data-r="h1"] { font-size: 37px !important; }
  [data-r="arch"], [data-r="tools"] { grid-template-columns: 1fr !important; }
  [data-r="sec-h"] { font-size: 30px !important; }
  [data-r="pb-body"] { padding: 34px 26px !important; }
}