/* ============================================================
   Invitation page — Innodisk x Qualcomm Dragonwing Workshop
   Adds only what styles.css / showcase.css do not already define:
   the agenda timeline. Everything else (nav, hero.editorial,
   section.block, .section-head, .btn, .paths…) is the real
   site's own component library.
   ============================================================ */

/* ---- language toggle (zh/en) ---- */
[data-lang="zh"] .en-only { display: none; }
[data-lang="en"] .zh-only { display: none; }

/* --font-ui / --font-display (styles.css) list "Work Sans Variable" first,
   with "Noto Sans TC Variable" only as the CJK fallback — Latin text (.en-
   only) renders in Work Sans, Chinese text (.zh-only) has no Work Sans
   glyphs to use so it falls through to Noto Sans TC. The two fonts don't
   share em-box metrics: Noto Sans TC's ideographs fill far more of the em
   square than Work Sans's Latin glyphs, so at the identical declared
   font-size .zh-only visibly renders larger than its .en-only counterpart
   everywhere on the page (confirmed by rendering both at font-size:24px
   side by side — the same-size boxes hold visibly different-size glyphs).
   Scale it back down so switching the language toggle doesn't make the
   whole page look like it grew. */
.zh-only { font-size: 0.9em; }

.lang-toggle {
  display: flex; align-items: stretch; height: 38px;
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
  background: var(--surface-2);
}
.lang-toggle button {
  border: 0; background: transparent; color: var(--text-2);
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
  padding: 0 0.85rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.lang-toggle button:hover { color: var(--text); }
.lang-toggle button.is-active { background: var(--accent); color: var(--on-accent); }
.nav-drawer .lang-toggle { margin: 0.6rem 0; align-self: flex-start; }

/* Center the nav-links row in the header bar on these two workshop pages
   only — scoped here rather than in styles.css, since the shared .nav
   layout (brand-left / links+tools-right) is relied on by every other
   page on the site. */
@media (min-width: 981px) {
  .site-header .nav { position: relative; }
  .site-header .nav-links {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
}

.ag-meta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 2rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 0.86rem; color: var(--text-2);
}
.chip svg { width: 16px; height: 16px; color: var(--accent-text); flex: none; }

.timeline { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.ag-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem;
  padding: 1.3rem 0; border-bottom: 1px solid var(--border);
}
@media (max-width: 640px) { .ag-row { grid-template-columns: 1fr; gap: 0.4rem; } }
.ag-time { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--text-2); padding-top: 0.1rem; }
.ag-title { font-weight: 700; margin-bottom: 0.4rem; }
.ag-speaker { font-size: 0.95rem; color: var(--text-2); line-height: 1.75; }
.ag-speaker .org { color: var(--text-2); }
.ag-speaker .who .name { font-weight: 600; color: var(--text); }
.ag-speaker .who .role { color: var(--text-2); }
.ag-row.is-break { padding: 0.8rem 0; opacity: 0.8; }
.ag-row.is-break .ag-label { font-weight: 600; color: var(--text-2); }
.ag-row:has(+ .ag-row.is-lab) { border-bottom-color: transparent; }
.ag-row.is-lab {
  position: relative;
  z-index: 0;
  border-bottom-color: transparent;
}
.ag-row.is-lab::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.5rem -1.1rem;
  background: var(--surface-grad, var(--surface));
  border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--accent), 0 8px 24px rgba(0,0,0,0.12);
}
@media (max-width: 640px) { .ag-row.is-lab::before { inset: 0.5rem -0.6rem; } }
.ag-row.is-lab .ag-tag {
  display: inline-block; margin-bottom: 0.5rem;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
  color: var(--accent-text);
}
.ag-nums { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.ag-nums li { display: flex; gap: 0.5rem; margin-bottom: 0.25rem; }
.ag-nums .n { color: var(--accent-text); font-weight: 700; }

/* ---- #prep flow: 01→02→03 is a fixed sequence (confirmed with the
   user — everyone does all three, in order). Two earlier attempts at
   this (three side-by-side .path-card boxes with a connecting arrow
   between them) were both rejected — cards read as three independent
   choices no matter how the connector between them was drawn, and the
   card-grid instinct is what needed to go, not the arrow style. Rebuilt
   as a single-column vertical timeline instead — modelled on this same
   site's own docs.css .steps/.step-line (Get Started page) and
   prep-page.css .install-step, both of which already read unambiguously
   as "step 1 then step 2 then step 3" — a numbered rail with a literal
   line running down it, plain text beside it, no per-step box/border. ---- */
/* Progress-bar style on desktop: one continuous track spanning all three
   steps (not per-gap segments), with each numbered node sitting on top of
   it and its content centred underneath — the "wizard/setup progress"
   pattern the user asked to try, versus the earlier left-aligned roadmap
   layout. The track spans from the 1st node's centre to the 3rd node's
   centre; with three equal flex-basis steps and each node centred in its
   own column, those centres land at exactly 1/6 and 5/6 of the row width,
   so the inset below is 100%/6 with no JS/measurement needed. Below
   ~860px three centred columns of body text stop working, so it folds
   back to a left-aligned vertical list with a per-step connecting line
   instead (::after on .flow-step, not a bar — a continuous bar reads as
   "progress" only when it's actually horizontal).

   The fill itself reuses this site's own .bar-fill/data-w mechanism (see
   styles.css .bar-track/.bar-fill and main.js's fillBars(), already used
   for the benchmark charts): width:0 → data-w on a 1.1s transition, fired
   by the same IntersectionObserver that adds .in to .reveal elements. No
   new JS — .flow-timeline already carries .reveal, and fillBars() looks
   for any .bar-fill inside whichever .reveal element just came into view.
   Each .flow-step also gets its own staggered slide-up instead of relying
   on main.js's generic per-.reveal-element stagger (that indexes across
   every .reveal on the whole page, not just these three, so the delay
   order isn't guaranteed to match 01→02→03) — cascading in behind the
   bar filling reads as "the path is being drawn", not just static text. */
.flow-timeline {
  margin: 2rem 0 0; padding: 0; position: relative;
  display: flex; align-items: flex-start; gap: 0;
}
.flow-track {
  position: absolute; top: 21px; left: 16.6667%; right: 16.6667%;
  height: 3px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.flow-track-fill {
  background: linear-gradient(to right, var(--accent), color-mix(in oklch, var(--accent) 45%, transparent));
}
.flow-step {
  flex: 1; min-width: 0; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 1.2rem;
}
/* cancel the generic .reveal.in slide-up on the container itself (it would
   otherwise move as a block in addition to each step staggering below —
   two motions at once reads as jittery, not polished) so only the three
   steps animate, each on its own delay. */
.flow-timeline.in { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .flow-timeline.in .flow-step { animation: reveal-in 0.6s var(--ease) both; }
  .flow-timeline .flow-step:nth-child(2) { animation-delay: 0.15s; }
  .flow-timeline .flow-step:nth-child(3) { animation-delay: 0.3s; }
}
/* plain flat-grey chip + line read as correct but generic (docs-page
   furniture, not a workshop invite). Give the badge the same glow
   .prereq/.pi-video-card already use for "this is the highlighted thing"
   so the node sitting on the track reads as an active stop, not a flat
   number label. */
.flow-num {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--gradient-btn); color: var(--on-accent);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 6px 18px var(--accent-glow);
  transition: transform 0.2s var(--ease);
}
.flow-step:hover .flow-num { transform: translateY(-3px); }
/* step 01 is the one thing that actually has a deadline (before arrival) —
   two rounds of animating the number badge itself (a rotating mascot, then
   a bouncing one) both read as odd rather than charming, so the reminder
   moved to where it's unambiguous: the "必做/Required" tag itself, given
   its own solid accent colour (instead of the flat grey every other tag
   pill uses) plus a soft breathing glow — a label you can read, not a
   character you have to interpret. */
.tag-pill--required {
  color: var(--on-accent); background: var(--gradient-btn);
  border-color: transparent; font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .tag-pill--required { animation: tag-required-glow 2.2s ease-in-out infinite; }
  @keyframes tag-required-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); }
    50% { box-shadow: 0 0 9px 2px color-mix(in oklch, var(--accent) 55%, transparent); }
  }
}
.flow-body .flow-icon {
  display: inline-flex; vertical-align: -0.15em; margin-right: 0.5rem;
  color: var(--accent-text);
}
.flow-body .flow-icon svg { width: 1.05em; height: 1.05em; }
.flow-body h3 { margin: 0 0 0.5rem; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; }
.flow-body p { margin: 0; color: var(--text-2); line-height: 1.7; }
.flow-body .path-tags { justify-content: center; margin: 0.9rem 0 0; padding-top: 0; }
.flow-body .path-link { margin-top: 0.9rem; }
/* steps 02/03 aren't meant to be looked into before the event — their
   content (flashing walkthrough, scripts) is only handed out on the day —
   so they shouldn't read as equally "ready now" as step 01, and (unlike
   the first pass at this) don't get a link out to the page at all here:
   flattened badge (no gradient/glow), dimmed heading/icon/body, and the
   tag says why instead of a bare "on-site" label that reads the same
   whether you can look now or not. The Flashing/Handouts pages themselves
   still exist and are still linked from the header nav — this only
   removes the invite page's own preview link, it doesn't unpublish them. */
.flow-step--later .flow-num { background: var(--surface-2); color: var(--text-3); box-shadow: none; }
.flow-step--later .flow-body h3 { color: var(--text-2); }
.flow-step--later .flow-body .flow-icon { color: var(--text-3); }
.flow-step--later .flow-body p { color: var(--text-3); }
@media (max-width: 860px) {
  .flow-timeline { flex-direction: column; }
  .flow-track { display: none; }
  .flow-step {
    flex-direction: row; align-items: flex-start; text-align: left;
    padding: 0 0 2rem; gap: 1.5rem;
  }
  .flow-step:last-child { padding-bottom: 0; }
  .flow-step:not(:last-child)::after {
    content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px;
    background: linear-gradient(var(--accent), color-mix(in oklch, var(--accent) 15%, transparent));
  }
  .flow-num { margin-bottom: 0; }
  .flow-body h3 { justify-content: flex-start; }
  .flow-body .path-tags { justify-content: flex-start; }
}

/* current-page highlight for .nav-links — normally lives in docs.css, but
   this page doesn't load docs.css (its own bespoke sections would collide
   with docs.css's .prose/.callout/.docs-layout rules), so without this
   copy the "current" pill+underline docs.css gives Pre-Install.html never
   renders here and Overview's own tab sits unhighlighted. */
.nav-links a.current {
  color: var(--accent-text);
  background: var(--accent-soft);
  font-weight: 500;
  position: relative;
}
.nav-links a.current::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-btn);
}