/* TayTV Lab — immersive discovery layer. Kept separate from the publisher stylesheet
   so the editorial pages remain fast, quiet, and readable. */

.lab-page {
  --lab-accent: #b7a8e5;
  --lab-accent-2: #8ebbd0;
  --lab-panel: rgba(20, 21, 31, 0.76);
  --lab-line: rgba(255, 255, 255, 0.13);
  --lab-muted: rgba(255, 255, 255, 0.68);
  --lab-glow: 0 24px 90px rgba(0, 0, 0, 0.32);
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--lab-accent) 27%, transparent), transparent 29rem),
    radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--lab-accent-2) 24%, transparent), transparent 32rem),
    linear-gradient(180deg, #0c0d14 0%, #14121d 42%, #0d1017 100%);
  color: #fffaf0;
}

.lab-page main { min-height: 100vh; }
.lab-page .site-header { background: rgba(12, 13, 20, 0.78); color: #fffaf0; backdrop-filter: blur(18px); border-bottom-color: rgba(255,255,255,.1); }
.lab-page .site-header a,
.lab-page .site-header button { color: inherit; }
.lab-page .mobile-nav { background: #11131d; color: #fffaf0; }
.lab-page .reading-progress { background: rgba(255,255,255,.08); }
.lab-page .reading-progress i { background: linear-gradient(90deg, var(--lab-accent), var(--lab-accent-2)); }
.lab-page .site-footer { background: #090a10; color: #fffaf0; }

.lab-shell {
  width: min(1240px, calc(100% - 3rem));
  margin-inline: auto;
}

.lab-hero {
  position: relative;
  isolation: isolate;
  min-height: min(790px, 86vh);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--lab-line);
}

.lab-hero::before,
.lab-hero::after {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -2;
  pointer-events: none;
}

.lab-hero::before {
  opacity: .72;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.38) 0 1px, transparent 1.5px);
  background-size: 83px 83px, 131px 131px;
  background-position: 0 0, 42px 17px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
  animation: lab-stars 35s linear infinite;
}

.lab-hero::after {
  z-index: -1;
  background:
    conic-gradient(from 180deg at 50% 50%, transparent, color-mix(in srgb, var(--lab-accent) 18%, transparent), transparent 32%, color-mix(in srgb, var(--lab-accent-2) 16%, transparent), transparent 66%),
    radial-gradient(circle at 50% 54%, rgba(255,255,255,.05), transparent 40%);
  filter: blur(28px);
  animation: lab-aurora 18s ease-in-out infinite alternate;
}

@keyframes lab-stars { to { transform: translate3d(0, 83px, 0); } }
@keyframes lab-aurora { from { transform: rotate(-5deg) scale(1); } to { transform: rotate(8deg) scale(1.08); } }

.lab-hero__content {
  padding: 8rem 0 5rem;
  text-align: center;
}

.lab-kicker,
.lab-chip,
.lab-mini-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .69rem;
  font-weight: 800;
}

.lab-kicker { color: color-mix(in srgb, var(--lab-accent) 78%, white); }
.lab-hero h1 {
  max-width: 980px;
  margin: 1rem auto 1.35rem;
  font-family: var(--font-display);
  font-size: clamp(4.6rem, 11vw, 10.2rem);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .76;
}
.lab-hero h1 em { color: var(--lab-accent); font-weight: 400; }
.lab-hero__intro {
  max-width: 720px;
  margin: 0 auto;
  color: var(--lab-muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.75;
}
.lab-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.lab-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .78rem 1.15rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-decoration: none;
  transition: transform .22s var(--ease), background .22s ease, border-color .22s ease;
}
.lab-button:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.36); }
.lab-button--hot { background: #fffaf0; color: #11131b; border-color: #fffaf0; }
.lab-button--hot:hover { background: #fff; }
.lab-shortcuts { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.4rem; color:rgba(255,255,255,.54); font-size:.78rem; }
.lab-shortcuts kbd { padding:.16rem .42rem; border:1px solid rgba(255,255,255,.16); border-bottom-color:rgba(255,255,255,.3); border-radius:.35rem; background:rgba(0,0,0,.25); font-family:var(--font-mono); font-size:.68rem; }

.lab-dashboard { padding: clamp(4rem, 8vw, 8rem) 0; }
.lab-section { margin-top: clamp(4rem, 8vw, 7rem); }
.lab-section:first-child { margin-top: 0; }
.lab-section__head { display:grid; grid-template-columns:minmax(0,1fr) minmax(15rem,.42fr); gap:2rem; align-items:end; margin-bottom:2rem; }
.lab-section__head h2 { margin:0; font-family:var(--font-display); font-size:clamp(2.7rem,5vw,5.1rem); font-weight:500; letter-spacing:-.055em; line-height:.9; }
.lab-section__head h2 em { color:var(--lab-accent); font-weight:400; }
.lab-section__head p { margin:0; color:var(--lab-muted); }

.lab-panel {
  border: 1px solid var(--lab-line);
  border-radius: 1.45rem;
  background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow: var(--lab-glow);
  backdrop-filter: blur(18px);
}

.lab-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
.lab-card { grid-column:span 4; min-height:220px; padding:1.4rem; position:relative; overflow:hidden; }
.lab-card--wide { grid-column:span 8; }
.lab-card--full { grid-column:1/-1; }
.lab-card::after { content:""; position:absolute; width:12rem; height:12rem; right:-4rem; bottom:-6rem; border-radius:50%; background:var(--card-accent,var(--lab-accent)); filter:blur(45px); opacity:.15; pointer-events:none; }
.lab-card h3 { margin:.5rem 0 .8rem; font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.7rem); font-weight:500; letter-spacing:-.035em; }
.lab-card p { color:var(--lab-muted); }

.lab-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-top:1.2rem; }
.lab-stat { padding:1rem; border:1px solid var(--lab-line); border-radius:1rem; background:rgba(0,0,0,.15); }
.lab-stat strong { display:block; font-family:var(--font-display); font-size:2.3rem; line-height:1; }
.lab-stat span { color:var(--lab-muted); font-size:.76rem; }
.lab-meter { height:10px; margin-top:1rem; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.lab-meter i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--lab-accent),var(--lab-accent-2)); transition:width .6s var(--ease); }

.lab-searchbox { position:relative; }
.lab-searchbox input {
  width:100%;
  min-height:64px;
  padding:0 4.2rem 0 1.2rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:1.1rem;
  background:rgba(0,0,0,.22);
  color:#fff;
  font-size:1.05rem;
  outline:none;
}
.lab-searchbox input:focus { border-color:var(--lab-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--lab-accent) 18%,transparent); }
.lab-searchbox span { position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--lab-muted); font-family:var(--font-mono); font-size:.72rem; }
.lab-search-results { display:grid; gap:.55rem; margin-top:.75rem; }
.lab-result {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.8rem;
  align-items:center;
  padding:.8rem 1rem;
  border:1px solid transparent;
  border-radius:.9rem;
  color:inherit;
  text-decoration:none;
  background:rgba(255,255,255,.045);
}
.lab-result:hover,.lab-result:focus-visible { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); }
.lab-result__icon { display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.7rem; background:rgba(255,255,255,.08); }
.lab-result b { display:block; line-height:1.2; }
.lab-result small { color:var(--lab-muted); }
.lab-result__type { color:var(--lab-muted); font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.09em; }

.lab-daily { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:1.2rem; align-items:stretch; }
.lab-daily__record { min-height:330px; display:grid; place-items:center; border-radius:1.2rem; background:radial-gradient(circle at center, color-mix(in srgb,var(--daily-primary,#8eb5a7) 46%,transparent), transparent 52%), rgba(0,0,0,.18); overflow:hidden; }
.lab-disc { position:relative; width:min(230px,70%); aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle at center,#08090c 0 3px,#171820 4px 7px); box-shadow:0 28px 60px rgba(0,0,0,.45); animation:lab-spin 18s linear infinite; }
.lab-disc::before { content:""; position:absolute; inset:31%; border-radius:50%; background:var(--daily-primary,#8eb5a7); box-shadow:inset 0 0 0 2px rgba(255,255,255,.22); }
.lab-disc::after { content:""; position:absolute; width:9px; aspect-ratio:1; border-radius:50%; background:#0a0b10; left:50%; top:50%; transform:translate(-50%,-50%); }
@keyframes lab-spin { to { transform:rotate(360deg); } }
.lab-daily__copy { padding:1.5rem; display:flex; flex-direction:column; justify-content:center; }
.lab-daily__copy h3 { font-family:var(--font-display); font-size:clamp(2.4rem,5vw,4.7rem); font-weight:500; letter-spacing:-.05em; margin:.4rem 0 .8rem; }
.lab-daily__copy p { max-width:52rem; color:var(--lab-muted); }

.lab-moods { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1rem; }
.lab-mood { min-height:42px; padding:.65rem .9rem; border:1px solid var(--lab-line); border-radius:999px; background:rgba(255,255,255,.05); color:#fff; }
.lab-mood:hover,.lab-mood[aria-pressed="true"] { background:var(--lab-accent); color:#101117; border-color:transparent; }
.lab-recommendation { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1.1rem; border:1px solid var(--lab-line); border-radius:1.1rem; background:rgba(0,0,0,.16); }
.lab-swatch { width:68px; aspect-ratio:1; border-radius:1rem; background:linear-gradient(135deg,var(--swatch-a),var(--swatch-b)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.lab-recommendation h3 { margin:0 0 .2rem; }
.lab-recommendation p { margin:0; color:var(--lab-muted); }

.lab-compare-controls { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:end; margin-bottom:1rem; }
.lab-field label { display:block; margin:0 0 .35rem; color:var(--lab-muted); font-size:.75rem; }
.lab-field select { width:100%; min-height:48px; padding:0 .9rem; border:1px solid var(--lab-line); border-radius:.8rem; background:#171824; color:#fff; }
.lab-vs { padding-bottom:.8rem; font-family:var(--font-display); font-style:italic; color:var(--lab-muted); }
.lab-compare { display:grid; grid-template-columns:1fr minmax(180px,.36fr) 1fr; gap:1rem; }
.lab-era-card { position:relative; overflow:hidden; padding:1.35rem; border:1px solid var(--lab-line); border-radius:1.2rem; background:linear-gradient(155deg,color-mix(in srgb,var(--era-primary) 24%,#151622),rgba(15,16,23,.92)); }
.lab-era-card::before { content:""; position:absolute; inset:auto -15% -45% 25%; height:70%; border-radius:50%; background:var(--era-primary); opacity:.16; filter:blur(38px); }
.lab-era-card > * { position:relative; }
.lab-era-card h3 { margin:.4rem 0; font-family:var(--font-display); font-size:2.5rem; font-weight:500; letter-spacing:-.04em; }
.lab-era-card__palette { display:flex; gap:.4rem; margin:.9rem 0; }
.lab-era-card__palette i { width:2rem; height:2rem; border-radius:50%; border:1px solid rgba(255,255,255,.25); }
.lab-symbols { display:flex; flex-wrap:wrap; gap:.4rem; }
.lab-symbols span { padding:.28rem .5rem; border:1px solid var(--lab-line); border-radius:999px; color:var(--lab-muted); font-size:.72rem; }
.lab-bridge { display:flex; flex-direction:column; justify-content:center; padding:1rem; text-align:center; border:1px dashed rgba(255,255,255,.18); border-radius:1.2rem; }
.lab-bridge strong { font-family:var(--font-display); font-size:1.7rem; font-weight:500; }
.lab-bridge p { margin:.5rem 0 0; color:var(--lab-muted); font-size:.78rem; }

.lab-constellation-wrap { position:relative; min-height:570px; overflow:hidden; border:1px solid var(--lab-line); border-radius:1.5rem; background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.05),transparent 50%),#090b12; }
.lab-constellation-wrap::before { content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 1px); background-size:61px 61px; }
.lab-constellation-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.38; }
.lab-star { position:absolute; z-index:2; transform:translate(-50%,-50%); display:grid; place-items:center; width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.26); background:var(--star); color:#fff; box-shadow:0 0 0 7px color-mix(in srgb,var(--star) 14%,transparent),0 0 35px color-mix(in srgb,var(--star) 38%,transparent); text-decoration:none; transition:transform .2s var(--ease),z-index .2s; }
.lab-star:hover,.lab-star:focus-visible { transform:translate(-50%,-50%) scale(1.18); z-index:5; }
.lab-star span { position:absolute; top:calc(100% + .5rem); width:110px; text-align:center; color:#fff; font-size:.7rem; font-weight:700; text-shadow:0 2px 10px #000; }
.lab-star small { font-size:.55rem; font-family:var(--font-mono); }
.lab-constellation-note { position:absolute; left:1rem; bottom:1rem; z-index:3; max-width:22rem; padding:.75rem .9rem; border:1px solid var(--lab-line); border-radius:.8rem; background:rgba(8,10,16,.76); color:var(--lab-muted); font-size:.75rem; backdrop-filter:blur(10px); }

.lab-trail,.lab-vault { display:grid; gap:.65rem; }
.lab-trail-item,.lab-vault-item { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; padding:.85rem 1rem; border:1px solid var(--lab-line); border-radius:.9rem; background:rgba(255,255,255,.04); }
.lab-trail-item a,.lab-vault-item a { color:#fff; text-decoration:none; font-weight:700; }
.lab-trail-item small,.lab-vault-item small { display:block; color:var(--lab-muted); font-weight:400; }
.lab-action { min-height:38px; padding:.5rem .75rem; border:1px solid var(--lab-line); border-radius:999px; background:rgba(255,255,255,.06); color:#fff; font-size:.72rem; }
.lab-action:hover { background:rgba(255,255,255,.12); }
.lab-action.is-saved { background:var(--lab-accent); color:#101117; border-color:transparent; }
.lab-empty { padding:1.1rem; border:1px dashed var(--lab-line); border-radius:.9rem; color:var(--lab-muted); text-align:center; }

.lab-toast { position:fixed; z-index:9999; right:1rem; bottom:1rem; max-width:min(360px,calc(100% - 2rem)); padding:.9rem 1rem; border:1px solid rgba(255,255,255,.18); border-radius:1rem; background:rgba(10,11,17,.92); color:#fff; box-shadow:0 20px 60px rgba(0,0,0,.4); backdrop-filter:blur(18px); transform:translateY(140%); opacity:0; transition:.28s var(--ease); }
.lab-toast.is-visible { transform:none; opacity:1; }

/* Home-page entrance to the Lab. */
.home-lab {
  position:relative;
  overflow:hidden;
  padding:clamp(4.5rem,8vw,8rem) 0;
  background:#0e1017;
  color:#fffaf0;
}
.home-lab::before { content:""; position:absolute; inset:0; opacity:.7; background:radial-gradient(circle at 15% 20%,rgba(183,168,229,.24),transparent 32rem),radial-gradient(circle at 85% 80%,rgba(142,187,208,.19),transparent 30rem); }
.home-lab .section-shell { position:relative; }
.home-lab .display-title em { color:#b7a8e5; }
.home-lab .section-aside { color:rgba(255,255,255,.64); }
.home-lab-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.home-lab-card { min-height:230px; display:flex; flex-direction:column; justify-content:space-between; padding:1.2rem; border:1px solid rgba(255,255,255,.13); border-radius:1.2rem; background:rgba(255,255,255,.055); color:inherit; text-decoration:none; transition:transform .22s var(--ease),background .22s ease; }
.home-lab-card:hover { transform:translateY(-5px); background:rgba(255,255,255,.09); }
.home-lab-card > span { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.home-lab-card i { font-family:var(--font-display); font-size:3rem; font-style:normal; color:#b7a8e5; }
.home-lab-card h3 { margin:.5rem 0; font-family:var(--font-display); font-size:1.8rem; font-weight:500; letter-spacing:-.03em; }
.home-lab-card p { margin:0; color:rgba(255,255,255,.62); font-size:.84rem; }

@media (max-width: 980px) {
  .lab-section__head { grid-template-columns:1fr; }
  .lab-card,.lab-card--wide { grid-column:span 6; }
  .lab-daily { grid-template-columns:1fr; }
  .lab-compare { grid-template-columns:1fr; }
  .lab-bridge { min-height:130px; }
  .home-lab-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 680px) {
  .lab-shell { width:min(100% - 1.25rem,1240px); }
  .lab-hero { min-height:700px; }
  .lab-hero__content { padding-top:6rem; }
  .lab-hero h1 { font-size:clamp(4rem,24vw,7rem); }
  .lab-card,.lab-card--wide { grid-column:1/-1; }
  .lab-stats { grid-template-columns:repeat(2,1fr); }
  .lab-compare-controls { grid-template-columns:1fr; }
  .lab-vs { display:none; }
  .lab-recommendation { grid-template-columns:auto 1fr; }
  .lab-recommendation .lab-button { grid-column:1/-1; width:100%; }
  .lab-constellation-wrap { min-height:640px; }
  .lab-star { width:46px; height:46px; }
  .lab-star span { width:80px; font-size:.62rem; }
  .home-lab-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-hero::before,.lab-hero::after,.lab-disc { animation:none !important; }
  .lab-star,.home-lab-card,.lab-button { transition:none !important; }
}