/* QA -> R-Link app integration. Pure-CSS layer that maps the QA board's existing
   header/container onto the Dev room's hero + frame skeleton so the two workspaces
   read as one app. No markup changes required; loaded LAST so it wins the cascade.
   Scoped to the QA board (relies on .header > .header-top/.header-subtitle/.header-meta). */

/* keep all QA content above the ambient grid */
body .container, body .wrap { position: relative; z-index: 1; }
/* board frame width matches the Dev room's .wrap (board container only, not the submit form) */
body .container:has(> .header) {
  max-width: 1760px;
  margin: 0 auto;
  padding: 28px 24px 88px;
}

/* ambient grid to match the Dev room (floaters already supply the orbs) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.026;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 35%, transparent 80%);
}

/* align the floaters to the Dev orb spec */
body .bg-floater { filter: blur(60px); mix-blend-mode: screen; opacity: 1; }

/* ── hero: rebuild QA's 3-child header into the Dev left-aligned hero via grid ── */
body .container > .header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand meta" "sub meta";
  column-gap: 20px;
  row-gap: 4px;
  align-items: start;
  text-align: left;
  margin: 4px 0 22px;
  padding: 0;
  background: none;
  border: none;
}
body .container > .header .header-top {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  justify-content: flex-start;
}
/* R-Link brand-mark (gradient square + white bolt), injected without markup */
body .container > .header .header-top::before {
  content: "";
  width: 52px; height: 52px; flex: none;
  border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E") center / 24px 24px no-repeat,
    linear-gradient(135deg, #6a1fbf, #00c853);
  box-shadow: 0 12px 28px rgba(106, 31, 191, 0.35);
  animation: rl-bob 3.4s ease-in-out infinite;
}
/* eyebrow injected above the room title */
body .container > .header .header-brand::before {
  content: "R-Link Studio \00B7 Engineering";
  display: block;
  margin-bottom: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: #9ca3af;
  -webkit-text-fill-color: #9ca3af;
}
/* room title -> Dev h1 voice (drop the giant centered banner) */
body .container > .header .header-brand {
  margin: 0; text-align: left;
  font-family: 'Sora', sans-serif;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.04em;
}
body .container > .header .header-subtitle {
  grid-area: sub;
  margin: 6px 0 0; text-align: left;
  color: #9ca3af; font-size: 13.5px; line-height: 1.55; max-width: 720px;
}
/* meta -> Dev right-aligned stamp */
body .container > .header .header-meta {
  grid-area: meta;
  justify-self: end; align-self: start;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 5px; margin: 0;
  color: #6b7280; font-size: 12px; white-space: nowrap;
}

@media (max-width: 760px) {
  body .container > .header {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "sub" "meta";
  }
  body .container > .header .header-meta { justify-self: start; align-items: flex-start; }
}

/* brand-mark bob (keyframe local to this layer so QA pages don't need the full theme) */
@keyframes rl-bob { 0%,100%{ transform: translateY(0) rotate(-1deg);} 50%{ transform: translateY(-5px) rotate(1deg);} }

/* ── health.html hero (uses .wrap > header > .title{.logo,h1,#subtitle} + .head-actions) ── */
body .wrap > header { align-items: flex-start; }
body .wrap > header .title { display: flex; align-items: center; gap: 16px; }
body .wrap > header .title .logo {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  font-size: 0; display: grid; place-items: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E") center / 24px 24px no-repeat,
    linear-gradient(135deg, #6a1fbf, #00c853);
  box-shadow: 0 12px 28px rgba(106, 31, 191, 0.35);
  animation: rl-bob 3.4s ease-in-out infinite;
}
body .wrap > header .title h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(26px, 3.4vw, 44px); font-weight: 800;
  line-height: 0.98; letter-spacing: -0.04em; color: #fafafa;
}
body .wrap > header .title h1::before {
  content: "R-Link Studio \00B7 Engineering";
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
  color: #9ca3af;
}
body .wrap > header .title #subtitle {
  margin-top: 6px; color: #9ca3af; font-size: 13.5px; line-height: 1.55;
}