/* Wrooms Learn — full-page knowledge mission board.
 * Uses the official doorway palette already defined by the application:
 * violet #7c3aed, electric blue #2563eb, mint #5eead4, doorway black #07070a.
 */

body:has(#overview) {
  --learn-violet: #7c3aed;
  --learn-blue: #2563eb;
  --learn-mint: #5eead4;
  --learn-door: #07070a;
  --learn-line: color-mix(in oklab, var(--learn-mint) 42%, transparent);
  --learn-panel: color-mix(in oklab, #0c0c10 88%, var(--learn-blue) 12%);
  background:
    radial-gradient(70rem 36rem at 82% 8%, color-mix(in oklab, var(--learn-blue) 24%, transparent), transparent 62%),
    radial-gradient(55rem 34rem at 15% 22%, color-mix(in oklab, var(--learn-violet) 17%, transparent), transparent 66%),
    linear-gradient(180deg, #050507 0%, #070b12 46%, #050507 100%);
}

body:has(#overview) .page-pad.page-native {
  max-width: none !important;
  width: 100%;
  padding-inline: clamp(0.9rem, 2vw, 2.25rem) !important;
  padding-bottom: 3rem;
  overflow: visible !important;
}

/* Bigger, proportional public navigation while Learn is active. */
body:has(#overview) header:has(.wrooms-site-nav) > div {
  max-width: 1760px !important;
}
body:has(#overview) .wrooms-site-nav {
  min-height: 3.15rem !important;
  height: auto !important;
  gap: 0.2rem !important;
  padding: 0.28rem !important;
  border-radius: 1.25rem !important;
}
body:has(#overview) .wrooms-site-nav > a {
  min-height: 2.55rem !important;
  height: 2.55rem !important;
  padding-inline: clamp(0.72rem, 1vw, 1rem) !important;
  gap: 0.35rem;
  border-radius: 0.95rem !important;
  font-size: clamp(0.72rem, 0.67rem + 0.12vw, 0.84rem) !important;
  font-weight: 650 !important;
}
body:has(#overview) .wrooms-site-nav > a > span:first-child {
  width: 1.3rem !important;
  height: 1.3rem !important;
  margin-right: 0.18rem !important;
  font-size: 0.9rem !important;
  opacity: 1 !important;
  border: 1px solid color-mix(in oklab, currentColor 24%, transparent);
  border-radius: 0.42rem;
  background: color-mix(in oklab, currentColor 8%, transparent);
}
body:has(#overview) .wrooms-site-nav > a[href="/history"] {
  color: var(--learn-mint) !important;
  background: linear-gradient(135deg, color-mix(in oklab, var(--learn-blue) 24%, #0c0c10), color-mix(in oklab, var(--learn-violet) 18%, #0c0c10)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--learn-mint) 55%, transparent),
    0 0 24px color-mix(in oklab, var(--learn-blue) 28%, transparent) !important;
}

/* Intro becomes part of the board rather than a narrow page heading. */
body:has(#overview) .page-pad > :first-child {
  max-width: 1760px;
  margin-inline: auto;
}
body:has(#overview) .page-pad > section:first-of-type {
  max-width: 1760px;
  margin: clamp(1rem, 1.8vw, 1.75rem) auto 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.1vw, 1.25rem) !important;
}
body:has(#overview) .page-pad > section:first-of-type > div {
  min-height: 8.5rem;
  padding: clamp(1.1rem, 1.6vw, 1.65rem) !important;
  border-color: color-mix(in oklab, var(--learn-mint) 18%, var(--color-border)) !important;
  background:
    linear-gradient(140deg, color-mix(in oklab, var(--learn-blue) 13%, #0c0c10), color-mix(in oklab, var(--learn-violet) 8%, #0c0c10)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 50px -36px color-mix(in oklab, var(--learn-blue) 70%, transparent) !important;
}
body:has(#overview) .page-pad > section:first-of-type svg { color: var(--learn-mint) !important; }

/* The old sidebar/article split becomes a wide game board. */
body:has(#overview) .page-pad > section:nth-of-type(2) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  max-width: 1760px;
  min-height: 0 !important;
  margin: clamp(1rem, 1.8vw, 1.75rem) auto 0 !important;
  gap: clamp(1rem, 1.6vw, 1.5rem) !important;
}
body:has(#overview) .page-pad > section:nth-of-type(2) > aside {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding: clamp(0.9rem, 1.3vw, 1.2rem) !important;
  border-radius: 1.7rem !important;
  border-color: color-mix(in oklab, var(--learn-mint) 18%, var(--color-border)) !important;
  background: linear-gradient(135deg, rgba(12,12,16,.94), rgba(10,18,28,.94)) !important;
}
body:has(#overview) .page-pad > section:nth-of-type(2) > aside > div:first-child {
  max-width: 40rem;
}
body:has(#overview) .page-pad > section:nth-of-type(2) > aside > div:nth-child(2) {
  width: min(24rem, 100%);
  margin-top: 0.65rem !important;
}
body:has(#overview) .page-pad > section:nth-of-type(2) > aside > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  max-height: none !important;
  overflow: visible !important;
  gap: 0.75rem !important;
  margin-top: 1rem !important;
  padding-right: 0 !important;
}
body:has(#overview) .page-pad > section:nth-of-type(2) > aside > div:last-child > button {
  min-height: 7rem;
  padding: 1rem !important;
  border-radius: 1.35rem !important;
  background: linear-gradient(150deg, rgba(20,20,26,.96), rgba(8,14,23,.96)) !important;
  border-color: color-mix(in oklab, var(--learn-blue) 18%, var(--color-border)) !important;
}
body:has(#overview) .page-pad > section:nth-of-type(2) > aside > div:last-child > button:hover {
  border-color: color-mix(in oklab, var(--learn-mint) 48%, var(--color-border)) !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--learn-mint) 12%, transparent), 0 18px 45px -32px var(--learn-blue);
}

/* Primary mission board. */
body:has(#overview) article:has(#overview) {
  overflow: visible !important;
  border-radius: 2rem !important;
  border-color: color-mix(in oklab, var(--learn-mint) 22%, var(--color-border)) !important;
  background:
    linear-gradient(180deg, rgba(7,11,18,.94), rgba(5,5,7,.98)) !important;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--learn-blue) 12%, transparent),
    0 40px 110px -70px color-mix(in oklab, var(--learn-blue) 85%, transparent) !important;
}

#overview {
  min-height: clamp(24rem, 52vw, 38rem);
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: clamp(1.5rem, 4vw, 4.5rem) !important;
  border-bottom-color: color-mix(in oklab, var(--learn-mint) 20%, var(--color-border)) !important;
  background:
    radial-gradient(38rem 30rem at 88% 30%, color-mix(in oklab, var(--learn-mint) 16%, transparent), transparent 66%),
    radial-gradient(44rem 34rem at 68% 12%, color-mix(in oklab, var(--learn-blue) 27%, transparent), transparent 64%),
    radial-gradient(42rem 32rem at 18% 25%, color-mix(in oklab, var(--learn-violet) 19%, transparent), transparent 70%),
    linear-gradient(128deg, #07070a 0%, #07111d 48%, #08121c 72%, #07070a 100%) !important;
}
#overview::before {
  content: "";
  position: absolute;
  right: clamp(4rem, 12vw, 14rem);
  top: clamp(2.4rem, 6vw, 5rem);
  width: clamp(7rem, 12vw, 12rem);
  aspect-ratio: 0.58;
  border-radius: 999px 999px 1rem 1rem;
  border: 1px solid color-mix(in oklab, var(--learn-mint) 64%, transparent);
  background:
    linear-gradient(90deg, transparent 47%, color-mix(in oklab, var(--learn-mint) 70%, transparent) 49% 51%, transparent 53%),
    radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--learn-mint) 20%, transparent), transparent 58%);
  box-shadow:
    0 0 45px color-mix(in oklab, var(--learn-mint) 24%, transparent),
    inset 0 0 38px color-mix(in oklab, var(--learn-blue) 18%, transparent);
  opacity: .82;
  pointer-events: none;
}
#overview::after {
  content: "KNOWLEDGE  •  PEOPLE  •  MODELS  •  TOMORROW";
  position: absolute;
  right: clamp(1.2rem, 3vw, 3.5rem);
  top: 50%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font: 700 .58rem/1.4 var(--font-mono);
  letter-spacing: .24em;
  color: color-mix(in oklab, var(--learn-mint) 66%, transparent);
  opacity: .8;
}
#overview h2 {
  font-size: clamp(3rem, 7vw, 7.75rem) !important;
  line-height: .9 !important;
  letter-spacing: -.055em !important;
  max-width: 11ch;
  text-shadow: 0 0 34px color-mix(in oklab, var(--learn-blue) 24%, transparent);
}
#overview > p {
  max-width: 60rem !important;
  font-size: clamp(1rem, 1.2vw, 1.3rem) !important;
}
#overview nav {
  max-width: 72rem;
  gap: .45rem !important;
}
#overview nav a {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  padding-inline: .95rem !important;
  border-color: color-mix(in oklab, var(--learn-mint) 18%, var(--color-border)) !important;
  background: rgba(7,7,10,.66) !important;
  backdrop-filter: blur(12px);
}

/* Spacious board cells. */
article:has(#overview) > div:last-child {
  gap: clamp(2.5rem, 5vw, 5.5rem) !important;
  padding: clamp(1.25rem, 3vw, 3.25rem) !important;
}
article:has(#overview) section[id],
article:has(#overview) > div:last-child > section:first-child {
  position: relative;
  scroll-margin-top: 7rem;
}
article:has(#overview) section[id]::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: .3rem;
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--learn-mint);
  box-shadow: 0 0 18px var(--learn-mint);
}

#people > div:last-child {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)) !important;
  gap: clamp(1rem, 1.5vw, 1.4rem) !important;
}
#people article {
  border-radius: 1.7rem !important;
  border-color: color-mix(in oklab, var(--learn-blue) 20%, var(--color-border)) !important;
  background: linear-gradient(155deg, rgba(11,18,29,.96), rgba(9,9,13,.98)) !important;
}
#people article:hover {
  transform: translateY(-4px) scale(1.006) !important;
  border-color: color-mix(in oklab, var(--learn-mint) 50%, var(--color-border)) !important;
  box-shadow: 0 26px 70px -44px color-mix(in oklab, var(--learn-blue) 85%, transparent) !important;
}

#models > div:last-child {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important;
  gap: 1rem !important;
}
#models > div:last-child > div {
  min-height: 11rem;
  padding: 1.4rem !important;
  border-radius: 1.6rem !important;
  border-color: color-mix(in oklab, var(--learn-violet) 22%, var(--color-border)) !important;
  background:
    linear-gradient(145deg, color-mix(in oklab, var(--learn-blue) 10%, #0c0c10), color-mix(in oklab, var(--learn-violet) 10%, #0c0c10)) !important;
}

/* Milestones read like a board-game route. */
#timeline ol {
  position: relative;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 22rem);
  grid-template-columns: none !important;
  gap: 1rem !important;
  overflow-x: auto;
  padding: 2.25rem .25rem 1rem !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
#timeline ol::before {
  content: "";
  position: absolute;
  left: .4rem;
  right: .4rem;
  top: 1.05rem;
  height: 2px;
  background: linear-gradient(90deg, var(--learn-violet), var(--learn-blue), var(--learn-mint));
  box-shadow: 0 0 18px color-mix(in oklab, var(--learn-blue) 55%, transparent);
}
#timeline li {
  min-height: 14rem;
  scroll-snap-align: start;
  border-radius: 1.65rem !important;
  border-color: color-mix(in oklab, var(--learn-mint) 18%, var(--color-border)) !important;
  background: linear-gradient(155deg, rgba(12,18,28,.96), rgba(7,7,10,.98)) !important;
}
#timeline li::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: -1.75rem;
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: var(--learn-mint);
  box-shadow: 0 0 0 5px #07111d, 0 0 20px var(--learn-mint);
}

#video > a,
#news > a,
#source > a,
#social > div {
  border-radius: 1.7rem !important;
  border-color: color-mix(in oklab, var(--learn-blue) 18%, var(--color-border)) !important;
  background: linear-gradient(145deg, rgba(11,18,29,.95), rgba(7,7,10,.98)) !important;
}
#video > a {
  min-height: 18rem;
  padding: clamp(1.25rem, 2.4vw, 2.25rem) !important;
}
#social {
  grid-template-columns: minmax(16rem,.62fr) minmax(28rem,1.38fr) !important;
  gap: 1.2rem !important;
}
#social > div:last-child {
  min-height: 36rem;
  overflow: hidden;
}
#news > a,
#source > a { min-height: 14rem; padding: 1.5rem !important; }

@keyframes learnPortalPulse {
  0%,100% { filter: drop-shadow(0 0 8px color-mix(in oklab, var(--learn-mint) 22%, transparent)); opacity: .72; }
  50% { filter: drop-shadow(0 0 22px color-mix(in oklab, var(--learn-blue) 48%, transparent)); opacity: .95; }
}
#overview::before { animation: learnPortalPulse 4.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  #overview::before { animation: none; }
  body:has(#overview) #people article:hover { transform: none !important; }
}

@media (max-width: 1100px) {
  #overview::before { opacity: .36; right: 4rem; }
  #social { grid-template-columns: 1fr !important; }
  body:has(#overview) .wrooms-site-nav > a { padding-inline: .7rem !important; }
}

@media (max-width: 760px) {
  body:has(#overview) .page-pad.page-native { padding-inline: .65rem !important; }
  body:has(#overview) .page-pad > section:first-of-type { grid-template-columns: 1fr; }
  body:has(#overview) .page-pad > section:nth-of-type(2) > aside > div:last-child {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  body:has(#overview) .page-pad > section:nth-of-type(2) > aside > div:last-child > button { min-height: 8rem; }
  #overview { min-height: 31rem; padding: 1.35rem !important; }
  #overview::before { width: 6rem; right: 1.8rem; top: 2rem; opacity: .28; }
  #overview::after { display: none; }
  #overview h2 { font-size: clamp(2.7rem, 17vw, 5rem) !important; }
  article:has(#overview) > div:last-child { padding: 1rem !important; gap: 3rem !important; }
  #people > div:last-child,
  #models > div:last-child { grid-template-columns: 1fr !important; }
}