/* Jarvis's mind as the landing hero (front_pages/js/hero-mind.js). The same
   dark screen as the desk hero, painted only from the palette: its night
   surfaces (--pal-dark-*, which gui.services emits at :root), its primary
   as the accent, and the type colors of the mind map itself. */
.lp-hero-stage.landing-hero.lp-hero-mind { padding-top: calc(var(--lp-nav-h, 4.5rem) + clamp(1rem, 3vh, 2rem)); }
.lp-mind-wrap { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding: 0 clamp(.75rem, 3vw, 2.5rem); }
.lp-mind { --mind-accent: var(--bs-primary); --mind-line: rgba(255, 255, 255, .09); --mind-dim: rgba(255, 255, 255, .58);
  --mind-bg: var(--pal-dark-body-bg, color-mix(in srgb, var(--bs-primary) 8%, #0d0d10));
  --mind-paper: var(--pal-dark-paper-bg, color-mix(in srgb, var(--bs-primary) 12%, #19191d));
  --mind-ink: #ececef;
  position: relative; max-width: 1500px; margin: 0 auto; height: min(68vh, 760px); min-height: 26rem;
  border-radius: 1.1rem; overflow: hidden; color: var(--mind-ink); isolation: isolate;
  background: radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--mind-accent) 10%, var(--mind-paper)) 0%, var(--mind-bg) 55%, color-mix(in srgb, var(--mind-bg) 72%, #000) 100%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px var(--mind-line) inset; }
.lp-mind-screen { position: absolute; inset: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lp-mind-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1rem; font-size: .7rem; letter-spacing: .14em; color: var(--mind-dim); border-bottom: 1px solid var(--mind-line); }
.lp-mind-rule { flex: 1 1 auto; height: 1px; background: repeating-linear-gradient(90deg, var(--mind-line) 0 6px, transparent 6px 10px); }
.lp-mind-state { color: var(--mind-accent); white-space: nowrap; }
.lp-mind-state::before { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor; vertical-align: middle; animation: mind-blink 1.6s ease-in-out infinite; }
.lp-mind-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-mind-legend { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; display: flex; gap: .9rem; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mind-dim); }
.lp-mind-legend span::before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.lp-mind-legend [data-kind="family"]::before { background: var(--bs-secondary); }
.lp-mind-legend [data-kind="tool"]::before { background: var(--bs-info); }
.lp-mind-legend [data-kind="memory"]::before { background: var(--bs-warning); }
.lp-mind-legend [data-kind="skill"]::before { background: var(--bs-success); }
.lp-mind-caption { position: absolute; left: 50%; bottom: 1.1rem; z-index: 3; transform: translateX(-50%); max-width: 80%;
  padding: .35rem .8rem; border-radius: 2rem; border: 1px solid var(--mind-line); background: color-mix(in srgb, var(--mind-bg) 78%, transparent);
  font-size: .74rem; color: var(--mind-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .5s ease; }
.lp-mind-sleep { position: absolute; left: 50%; top: 18%; z-index: 3; transform: translateX(-50%); text-align: center; opacity: 0;
  transition: opacity 1.2s ease; pointer-events: none; }
.lp-mind-time { font-family: system-ui, sans-serif; font-weight: 200; font-size: clamp(2.6rem, 7vw, 5rem); color: #fff; letter-spacing: .02em; }
.lp-mind-date { color: var(--mind-dim); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; }
.lp-mind.is-asleep .lp-mind-sleep { opacity: 1; }
.lp-mind.is-asleep .lp-mind-caption, .lp-mind.is-asleep .lp-mind-legend { opacity: 0; }
.lp-mind.is-asleep .lp-mind-state { color: var(--mind-dim); }
@keyframes mind-blink { 50% { opacity: .35; } }
@media (max-width: 767.98px) {
  .lp-mind { height: auto; min-height: 30rem; }
  .lp-mind-legend { gap: .6rem; font-size: .6rem; }
  .lp-mind-sleep { top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-mind *, .lp-mind *::before { animation: none !important; transition: none !important; }
}