/* ── Landing page + manual page styles ────────────────────────────────
 * Loaded only by templates/auth/index.html, manuals_index.html, and
 * manual.html via {% block extra_css %}. base.css is NOT modified.
 * Uses :root variables defined in base.css verbatim.
 *
 * See WebApp/docs/PLAN_HOME_PAGE_BAZZAZ.txt §"LANDING.CSS — DESIGN SPEC".
 * Tree-style TOC sidebar added by the follow-up — see
 * WebApp/docs/REPORT_HOME_PAGE_BAZZAZ_FOLLOWUP.txt.
 * Pre-rendered HTML pivot — see
 * WebApp/docs/REPORT_HOME_PAGE_BAZZAZ_FOLLOWUP2.txt.
 * ───────────────────────────────────────────────────────────────────── */


/* ── Layout & Hero ─────────────────────────────────────────────────── */
.landing                     { animation: fadeSlideIn .4s var(--ease-smooth);
                               max-width: 1200px; margin: 0 auto;
                               padding: 1.5rem 1.25rem 4rem; }
.landing-hero                { display: grid;
                               grid-template-columns: 1.05fr 1fr;
                               gap: 3rem; align-items: center;
                               min-height: 65vh; position: relative; }
.hero-illust                 { max-width: 320px; height: auto;
                               margin-bottom: .75rem; }
.hero-title                  { font-size: 2.4rem; font-weight: 800;
                               line-height: 1.15; margin: .25rem 0 .5rem; }
.hero-accent                 { background: linear-gradient(135deg,
                                                            var(--primary),
                                                            #a855f7);
                               -webkit-background-clip: text;
                               -webkit-text-fill-color: transparent;
                               background-clip: text; }
.hero-tagline                { color: var(--muted); font-size: 1.05rem;
                               line-height: 1.55; max-width: 480px;
                               margin-bottom: 1.25rem; }
.hero-ctas                   { display: flex; flex-wrap: wrap; gap: .55rem; }


/* ── Background blobs ──────────────────────────────────────────────── */
.hero-bg-blobs               { position: absolute; inset: 0;
                               pointer-events: none; overflow: hidden;
                               z-index: 0; }
.blob                        { position: absolute; border-radius: 50%;
                               filter: blur(70px); opacity: .35; }
.blob-1                      { width: 380px; height: 380px;
                               background: var(--primary);
                               top: -80px; left: -60px;
                               animation: blobFloat1 38s ease-in-out
                                          infinite alternate; }
.blob-2                      { width: 320px; height: 320px;
                               background: var(--gold);
                               bottom: -100px; right: -40px;
                               animation: blobFloat2 42s ease-in-out
                                          infinite alternate; }
.blob-3                      { width: 260px; height: 260px;
                               background: var(--success);
                               top: 40%; right: 25%; opacity: .2;
                               animation: blobFloat3 50s ease-in-out
                                          infinite alternate; }
.landing-hero > *:not(.hero-bg-blobs) { position: relative; z-index: 1; }

@keyframes blobFloat1 { from { transform: translate(0, 0) scale(1); }
                        to   { transform: translate(80px, 60px) scale(1.1); } }
@keyframes blobFloat2 { from { transform: translate(0, 0) scale(1); }
                        to   { transform: translate(-60px, -40px) scale(1.05); } }
@keyframes blobFloat3 { from { transform: translate(0, 0); }
                        to   { transform: translate(-40px, 30px); } }


/* ── Section helpers ───────────────────────────────────────────────── */
.section-title-lg            { font-size: 1.5rem; font-weight: 800;
                               margin: 0 0 .25rem; color: var(--text); }
.section-sub                 { color: var(--muted); font-size: .95rem;
                               margin-bottom: 1.25rem; }
.landing-features,
.landing-tutorials,
.landing-downloads,
.landing-manuals             { margin-top: 4rem; }


/* ── Features strip ────────────────────────────────────────────────── */
.feature-grid                { display: grid;
                               grid-template-columns:
                                 repeat(auto-fit, minmax(220px, 1fr));
                               gap: 1.25rem; }
.feature-card                { background: var(--bg2);
                               border: 1px solid var(--border);
                               border-radius: var(--radius);
                               padding: 1.25rem; text-align: center;
                               box-shadow: var(--shadow);
                               transition: transform .25s var(--ease-smooth),
                                           box-shadow .25s; }
.feature-card:hover          { transform: translateY(-4px);
                               box-shadow: var(--shadow-md); }
.feature-card img            { width: 96px; height: 96px;
                               margin: 0 auto .5rem; opacity: .95; }
.feature-card h3             { font-size: 1rem; margin-bottom: .35rem; }
.feature-card p              { font-size: .85rem; color: var(--muted);
                               line-height: 1.5; }


/* ── Video grid ────────────────────────────────────────────────────── */
.video-grid                  { display: grid;
                               grid-template-columns:
                                 repeat(auto-fit, minmax(280px, 1fr));
                               gap: 1.25rem; }
.video-card                  { background: var(--bg2);
                               border: 1px solid var(--border);
                               border-radius: var(--radius);
                               overflow: hidden;
                               box-shadow: var(--shadow);
                               transition: transform .25s var(--ease-smooth),
                                           box-shadow .25s; }
.video-card:hover            { transform: translateY(-3px);
                               box-shadow: var(--shadow-md); }
.video-frame                 { position: relative; width: 100%;
                               aspect-ratio: 16/9;
                               padding-top: 56.25%;
                               background: #000; }
.video-frame iframe          { position: absolute; inset: 0;
                               width: 100%; height: 100%; border: 0; }
.video-placeholder           { aspect-ratio: 16/9; padding-top: 56.25%;
                               position: relative;
                               background: var(--bg3);
                               display: flex; align-items: center;
                               justify-content: center;
                               color: var(--muted); font-weight: 700; }
.video-meta                  { padding: .75rem 1rem 1rem; }
.video-meta h4               { margin: .25rem 0 .35rem; font-size: 1rem; }
.video-meta p                { color: var(--muted); font-size: .85rem;
                               line-height: 1.5; margin: 0; }
.video-aud                   { display: inline-block; padding: 1px 8px;
                               border-radius: 999px; font-size: .68rem;
                               font-weight: 700; text-transform: uppercase;
                               letter-spacing: .04em; }
.aud-student                 { background: var(--primary-light);
                               color: var(--primary);
                               border: 1px solid rgba(124, 58, 237, .2); }
.aud-professor               { background: var(--gold-glow);
                               color: var(--gold-dim);
                               border: 1px solid rgba(255, 149, 0, .25); }


/* ── Downloads ─────────────────────────────────────────────────────── */
.download-grid               { display: flex; flex-wrap: wrap;
                               gap: 1rem; }
.dl-card                     { display: flex; align-items: center;
                               gap: 1rem; padding: 1rem 1.25rem;
                               background: var(--bg2);
                               border: 1px solid var(--border);
                               border-radius: var(--radius);
                               box-shadow: var(--shadow);
                               text-decoration: none; color: inherit;
                               min-width: 260px;
                               transition: transform .2s, box-shadow .2s,
                                           border-color .2s; }
.dl-card:hover               { transform: translateY(-2px);
                               box-shadow: var(--shadow-md);
                               border-color: var(--primary); }
.dl-icon                     { font-size: 2rem; line-height: 1; }
.dl-info strong              { display: block; font-weight: 700; }
.dl-info small               { color: var(--muted); font-size: .78rem; }
.dl-disabled                 { opacity: .55; pointer-events: none;
                               cursor: not-allowed; }


/* ── Manuals (list on landing) ─────────────────────────────────────── */
.manual-list                 { list-style: none; padding: 0; margin: 0;
                               display: grid;
                               grid-template-columns:
                                 repeat(auto-fit, minmax(260px, 1fr));
                               gap: .75rem; }
.manual-list a               { display: flex; align-items: center;
                               gap: .75rem; padding: .85rem 1rem;
                               background: var(--bg2);
                               border: 1px solid var(--border);
                               border-radius: var(--radius-sm);
                               text-decoration: none; color: inherit;
                               transition: transform .15s,
                                           border-color .15s,
                                           box-shadow .15s; }
.manual-list a:hover         { transform: translateX(3px);
                               border-color: var(--primary);
                               box-shadow: 0 2px 8px rgba(124, 58, 237, .08); }
.manual-icon                 { font-size: 1.25rem; }
.manual-meta strong          { display: block; font-weight: 700;
                               font-size: .92rem; }
.manual-meta small           { color: var(--muted); font-size: .76rem; }
.manual-hint                 { margin-top: .85rem; font-size: .85rem; }
.manual-hint a               { color: var(--primary); font-weight: 700;
                               text-decoration: none; }


/* ── Footer ────────────────────────────────────────────────────────── */
.landing-footer              { display: flex; justify-content: center;
                               gap: .5rem; align-items: center;
                               color: var(--muted); font-size: .82rem;
                               margin-top: 4rem; padding-top: 1.5rem;
                               border-top: 1px solid var(--border); }
.landing-footer a            { color: var(--primary);
                               text-decoration: none; }


/* ── Reveal-on-scroll (progressive enhancement) ────────────────────── */
.reveal                      { /* default: fully visible (no JS) */ }
body.has-reveal-js .reveal   { opacity: 0; transform: translateY(16px);
                               transition: opacity .55s var(--ease-smooth),
                                           transform .55s var(--ease-smooth); }
body.has-reveal-js .reveal.is-visible
                             { opacity: 1; transform: none; }


/* ── Manual page typography (manual.html + manuals_index.html) ─────── */
.manual-page                 { max-width: 800px; margin: 0 auto;
                               padding: 1.5rem 1.25rem 4rem; }
.manual-header               { display: flex; justify-content: space-between;
                               align-items: center; gap: 1rem;
                               margin-bottom: 1.5rem; flex-wrap: wrap; }
.manual-back                 { color: var(--muted); text-decoration: none;
                               font-weight: 700; font-size: .85rem; }
.manual-back:hover           { color: var(--primary); }
.manual-content              { background: var(--bg2);
                               border: 1px solid var(--border);
                               border-radius: var(--radius);
                               padding: 2rem 2.25rem;
                               box-shadow: var(--shadow); }
.manual-content h1,
.manual-content h2           { color: var(--primary); font-weight: 800;
                               margin: 1.5rem 0 .65rem;
                               line-height: 1.25;
                               scroll-margin-top: 72px; }
.manual-content h1           { font-size: 1.75rem;
                               padding-bottom: .35rem;
                               border-bottom: 2px solid var(--border); }
.manual-content h2           { font-size: 1.3rem; }
.manual-content h3           { font-size: 1.05rem; font-weight: 700;
                               color: var(--text); margin: 1.1rem 0 .4rem;
                               scroll-margin-top: 72px; }
.manual-content p            { margin: .55rem 0; line-height: 1.7; }
.manual-content ul,
.manual-content ol           { margin: .5rem 0 .75rem 1.5rem;
                               line-height: 1.7; }
.manual-content li           { margin: .25rem 0; }
.manual-content img          { max-width: 100%; height: auto;
                               display: block;
                               margin: 1rem auto;
                               border: 1px solid var(--border);
                               border-radius: var(--radius-sm);
                               box-shadow: var(--shadow); }
.manual-content table        { width: 100%; border-collapse: collapse;
                               margin: 1rem 0; font-size: .9rem; }
.manual-content th,
.manual-content td           { padding: .55rem .75rem;
                               border: 1px solid var(--border);
                               text-align: left; vertical-align: top; }
.manual-content th           { background: var(--bg3);
                               font-weight: 700; }
.manual-content table.callout
                             { /* single-cell callout — added by JS */
                               border: none;
                               background: var(--primary-light);
                               border-left: 4px solid var(--primary);
                               border-radius: var(--radius-sm);
                               padding: 0; margin: 1rem 0; }
.manual-content table.callout td
                             { border: none;
                               padding: .85rem 1rem;
                               font-size: .92rem;
                               color: var(--text); }
.manual-content p.figure-caption
                             { font-size: .82rem; color: var(--muted);
                               text-align: center;
                               margin-top: -.5rem; margin-bottom: 1rem;
                               font-style: italic; }
.manual-content code         { background: var(--primary-light);
                               color: var(--primary);
                               padding: 1px 5px; border-radius: 4px;
                               font-size: .9em; }
.manual-content a            { color: var(--primary); }


/* ─────────────────────────────────────────────────────────────────────
   Manual page — TREE-STYLE LAYOUT WITH TOC SIDEBAR
   (only active when the page has the .manual-page-tree modifier)
   ────────────────────────────────────────────────────────────────── */
.manual-page-tree            { max-width: 1200px; }   /* widen for sidebar */
.manual-meta-bar             { display: flex; align-items: center;
                               gap: .5rem; flex-wrap: wrap; }
.manual-title-pill           { font-size: .85rem; font-weight: 700;
                               background: var(--bg2);
                               border: 1px solid var(--border);
                               padding: .3rem .7rem;
                               border-radius: 999px;
                               color: var(--text); }
.manual-title-pill small     { color: var(--muted); font-weight: 600;
                               margin-left: .25rem; }

/* Mobile-only TOC toggle button — hidden on desktop. */
#toc-toggle                  { display: none; }

/* Two-column grid: sidebar + article. */
.manual-layout               { display: grid;
                               grid-template-columns: 260px 1fr;
                               gap: 2rem;
                               align-items: flex-start; }

/* Sidebar */
.manual-toc                  { position: sticky; top: 72px;
                               max-height: calc(100vh - 88px);
                               overflow-y: auto;
                               background: var(--bg2);
                               border: 1px solid var(--border);
                               border-radius: var(--radius);
                               padding: 1rem;
                               font-size: .85rem;
                               box-shadow: var(--shadow); }
.manual-toc .toc-title       { font-weight: 800; font-size: .72rem;
                               color: var(--muted);
                               text-transform: uppercase;
                               letter-spacing: .06em;
                               margin-bottom: .55rem; }

.toc-list, .toc-nested       { list-style: none; padding: 0; margin: 0; }
.toc-nested                  { margin-left: .85rem;
                               border-left: 1px solid var(--border);
                               padding-left: .55rem;
                               margin-top: .15rem;
                               margin-bottom: .25rem; }
.toc-list a                  { display: block;
                               padding: .25rem .4rem;
                               text-decoration: none;
                               color: var(--text);
                               border-radius: var(--radius-sm);
                               line-height: 1.35;
                               transition: background .12s, color .12s;
                               word-wrap: break-word; }
.toc-list a:hover            { background: var(--primary-light);
                               color: var(--primary); }
.toc-list a.active           { background: var(--primary-light);
                               color: var(--primary);
                               font-weight: 700; }
.toc-list .toc-h1 > a        { font-weight: 700; font-size: .9rem; }
.toc-list .toc-h2 > a        { font-size: .82rem; color: var(--muted); }
.toc-list .toc-h2 > a:hover,
.toc-list .toc-h2 > a.active { color: var(--primary); }
.toc-list .toc-h3 > a        { font-size: .78rem; color: var(--muted); }


/* ── Pre-rendered manual HTML — small tweaks ──────────────────────────
 * The conversion script (regenerate_manuals.py) tags Word's empty
 * "Table of Contents" auto-field heading with .manual-hidden-toc.
 * The template's JS also hides it at runtime, but this CSS rule
 * prevents the flash before JS runs and works when JS is disabled.
 * ───────────────────────────────────────────────────────────────────── */
.manual-hidden-toc           { display: none; }


/* ── Mobile (≤960px / ≤768px) ──────────────────────────────────────── */
@media (max-width: 960px) {
  .landing-hero              { grid-template-columns: 1fr; gap: 2rem;
                               min-height: auto; padding-top: 1rem; }
  .hero-left                 { text-align: center; }
  .hero-ctas                 { justify-content: center; }
  .hero-illust               { margin: 0 auto; }

  /* Manual page: TOC becomes a collapsible drawer at the top. */
  #toc-toggle                { display: inline-flex; }
  .manual-layout             { grid-template-columns: 1fr;
                               gap: .75rem; }
  .manual-toc                { display: none;
                               position: static;
                               max-height: 50vh;
                               margin-bottom: .5rem; }
  .manual-toc.toc-open       { display: block; }
}
@media (max-width: 768px) {
  .hero-title                { font-size: 1.85rem; }
  .blob-1                    { width: 250px; height: 250px; }
  .blob-2                    { width: 220px; height: 220px; }
  .blob-3                    { width: 180px; height: 180px; opacity: .15; }
  .video-grid                { grid-template-columns: 1fr; }
  .download-grid             { flex-direction: column; }
  .manual-content            { padding: 1.25rem 1rem; }
}


/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blob-1, .blob-2, .blob-3  { animation: none; }
}


/* ─────────────────────────────────────────────────────────────────────
 * LEGACY ROLE-SELECTOR + SWITCH-LINK STYLES
 * Migrated verbatim from the inline <style> block previously in
 * templates/auth/index.html. Selectors and rules are not changed.
 * ───────────────────────────────────────────────────────────────────── */

.auth-page      { max-width: 480px; margin: 0 auto; padding: 2rem 1.25rem; }

/* Role selector strip */
.role-strip     { display: flex; gap: .75rem; margin-bottom: 0; }
.role-btn       {
  flex: 1;
  padding: .65rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--muted);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.role-btn:hover                { border-color: var(--primary); color: var(--primary); }
.role-btn.active-student       { border-color: var(--primary); background: var(--primary-light);
                                  color: var(--primary); }
.role-btn.active-professor     { border-color: var(--gold); background: var(--gold-glow);
                                  color: var(--gold-dim); }

/* Form panel — hidden until role chosen */
#form-panel     { display: none; margin-top: 1.25rem; }

/* Mode heading */
.mode-heading   {
  font-size: 1rem; font-weight: 700;
  color: var(--text); margin: 0 0 .75rem;
}

/* Switch link row */
.switch-row     { margin-top: 1rem; text-align: center;
                  font-size: .84rem; color: var(--muted); }
.switch-row a   { color: var(--primary); text-decoration: none; font-weight: 600; }
.switch-row a:hover { text-decoration: underline; }


/* ── Section 1.5: Intro video (PLAN_HOMEPAGE_INTRO_VIDEO) ────── */
.landing-intro-video {
  /* Sits inside .landing (max-width 1200px, centered). The inner
     980px cap keeps the heading/copy from sprawling on wide
     screens; the frame below has its own 880px cap. */
  text-align: center;
  padding: 3rem 1.5rem 1rem;
  max-width: 980px;
  margin: 0 auto;
}
.landing-intro-video .section-title-lg {
  margin-bottom: 0.4rem;
}
.landing-intro-video .section-sub {
  margin-bottom: 1.5rem;
  color: var(--muted, #6b7280);
}
.intro-video-frame {
  /* .video-frame already provides 16:9 aspect-ratio + iframe
     sizing (lines ~115–120). This rule only widens it for the
     intro context and adds a soft chrome. */
  max-width: 880px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}