/* Final prototype art and collision overrides. Loaded last. */
.prototype-public .learn-reference-hero {
  background:
    linear-gradient(90deg, rgba(2,9,18,.98) 0%, rgba(2,9,18,.88) 31%, rgba(2,9,18,.22) 58%, rgba(2,9,18,.03) 100%),
    url('/wrooms-learn-hero-portal.svg') right center / auto 100% no-repeat,
    radial-gradient(circle at 64% 18%,rgba(34,230,255,.16),transparent 24rem),
    linear-gradient(118deg,#03101a,#06202d 62%,#020912) !important;
}

/* The prototype is deliberately a compact information board, not a marketing page. */
.prototype-public main.learn-reference { margin-inline:auto !important; }
.prototype-public .learn-reference-topgrid,
.prototype-public .learn-reference-bottomgrid,
.prototype-public .learn-reference-timeline { position:relative; z-index:2; }
.prototype-public .learn-reference-search { border-color:rgba(34,230,255,.23) !important; background:rgba(1,12,19,.78) !important; }
.prototype-public .learn-reference-labcard,
.prototype-public .learn-reference-person,
.prototype-public .learn-reference-model,
.prototype-public .learn-reference-video-card,
.prototype-public .learn-reference-xcards>a,
.prototype-public .learn-reference-newslist>* ,
.prototype-public .learn-reference-sourcegrid>a {
  box-shadow: inset 0 1px rgba(255,255,255,.028), 0 5px 15px rgba(0,0,0,.12) !important;
}
.prototype-public .learn-reference-labcard:hover,
.prototype-public .learn-reference-person:hover,
.prototype-public .learn-reference-model:hover,
.prototype-public .learn-reference-sourcegrid>a:hover {
  border-color:rgba(90,242,255,.62) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 0 15px rgba(34,230,255,.11) !important;
}

/* People are editorial cards, not tiny dashboard tiles. Two columns prevent the
 * narrow-width word-by-word hover reflow and give source-backed portraits room. */
.prototype-public .learn-reference-peoplerow {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:.62rem !important;
  padding:.65rem !important;
  align-items:start;
}
.prototype-public .learn-person-card {
  min-width:0 !important;
  width:100% !important;
  overflow:hidden !important;
  border-radius:.7rem !important;
  background:linear-gradient(180deg,rgba(6,29,42,.98),rgba(2,15,24,.99)) !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
.prototype-public .learn-person-card__portrait {
  min-height:clamp(12rem,15vw,16rem) !important;
}
.prototype-public .learn-person-card__body,
.prototype-public .learn-person-card__body * {
  min-width:0;
  word-break:normal !important;
  writing-mode:horizontal-tb !important;
}
.prototype-public .learn-person-card__body p,
.prototype-public .learn-person-card__body li,
.prototype-public .learn-person-card__body span {
  white-space:normal !important;
}

/* Neutralize generic public-board overrides that otherwise enlarge or recolor the reference. */
.prototype-public[data-wrooms-surface="public"] > div > header { background:linear-gradient(180deg,rgba(1,11,18,.985),rgba(2,14,22,.965)) !important; }
.prototype-public[data-wrooms-surface="public"] footer { background:rgba(1,10,17,.96) !important; }
.prototype-public[data-wrooms-surface="public"] main section { scroll-margin-top:66px; }

/* Keep every legacy shell decoration behind production application content. */
.app-shell.rock-shell .rock-lightning,
.app-shell.rock-shell .rock-bolt,
.app-shell.rock-shell .amp-corner,
.app-shell.rock-shell [class*="speaker-grille"],
.app-shell.rock-shell [class*="stage-light"] { display:none !important; }
.app-shell.rock-shell .app-main-col { background:transparent !important; }
.app-shell.rock-shell .page-native,
.app-shell.rock-shell .page-pad { position:relative; z-index:2; }

@media (max-width:1120px) {
  .prototype-public .learn-reference-hero {
    background:
      linear-gradient(180deg,rgba(2,9,18,.92) 0%,rgba(2,9,18,.78) 40%,rgba(2,9,18,.12) 100%),
      url('/wrooms-learn-hero-portal.svg') 62% bottom / auto 72% no-repeat,
      #03121b !important;
  }
}
@media (max-width:760px) {
  .prototype-public .learn-reference-hero {
    background:
      linear-gradient(180deg,rgba(2,9,18,.96) 0%,rgba(2,9,18,.82) 48%,rgba(2,9,18,.18) 100%),
      url('/wrooms-learn-hero-portal.svg') 56% bottom / auto 58% no-repeat,
      #03121b !important;
  }
  .prototype-public .learn-reference-peoplerow { grid-template-columns:1fr !important; }
  .prototype-public .learn-person-card__portrait { min-height:15rem !important; }
}