/* =============================================================================
   tutorial-gw.css — gifts.wtf feature tour v2 (build #6, the TWO-PANE dialog).

   Styles the Intel-Maps-style self-contained feature tour that tutorial-gw.js
   builds: a full-viewport layer whose scrim blurs the whole page (blur 14px +
   dark scrim), one FIXED-SIZE card min(73vw,940px) × 555px, radius 16,
   centered. Left pane ~300px: brand header (pom mascot), 8 clickable nav rows
   with 16px gift icons, pinned "N of 8". Right pane: 8-segment progress bar,
   X close, floating 64px icon tile, H1 32/800, 2-line-clamped body, proof
   badge pill, a lower band with a larger floating gift render, Back/Next
   footer. Content swaps with a 150ms fade + 8px rise; the card NEVER changes
   size.

   Theme-aware: every colour is a SHARED theme.css var (--void/--panel/--well/
   --raised/--hover/--hairline*/--ink-*/--p400/--p500/--on-accent) so it
   re-themes for free in wtf / dark. CSP-safe (no external anything).
   Compositor-only motion; prefers-reduced-motion honored. Owns ONLY the
   #gwTut subtree. Companion: tutorial-gw.js · root #gwTut · launcher
   #gwTutStart (styled in market.css — not touched here).
   ========================================================================== */

/* ---- overlay root (hidden until data-open) -------------------------------- */
#gwTut{
  position:fixed; inset:0;
  z-index:230;                 /* above the tester FAB / toasts */
  display:none;
}
#gwTut[data-open]{
  display:flex;
  align-items:center; justify-content:center;
  padding:12px;
}

/* blur + scrim over the whole page. NO dismiss on click (js adds no handler);
   it still captures clicks/wheel so the shop behind stays inert. */
#gwTut .gwt2-scrim{
  position:absolute; inset:0;
  background:rgba(4,8,16,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

/* ---- the card: FIXED size, two panes -------------------------------------- */
#gwTut .gwt2-card{
  position:relative; z-index:1;
  display:flex; overflow:hidden;
  box-sizing:border-box;
  width:min(73vw, 940px);
  height:555px;
  max-width:100%; max-height:calc(100dvh - 24px);
  border-radius:16px;
  background:var(--panel);
  border:1px solid var(--hairline-2);
  box-shadow:0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.22);
}
#gwTut[data-open] .gwt2-card{ animation:gwt2CardIn .15s ease both; }
@keyframes gwt2CardIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

/* =============================================================================
   SIDEBAR (~300px): brand header · 8 nav rows · pinned counter
   ========================================================================== */
#gwTut .gwt2-side{
  flex:0 0 300px; min-width:0;
  display:flex; flex-direction:column;
  box-sizing:border-box;
  padding:22px 14px 16px;
  background:var(--well);
  border-right:1px solid var(--hairline);
}

#gwTut .gwt2-brand{
  display:flex; align-items:center; gap:10px;
  padding:0 10px 18px;
}
#gwTut .gwt2-pom{
  width:38px; height:38px; flex:none;
  border-radius:10px; object-fit:contain;
}
#gwTut .gwt2-brandtxt{ min-width:0; }
#gwTut .gwt2-brandname{
  font:700 15px/1.2 var(--font-ui,system-ui,sans-serif);
  color:var(--ink-hi); letter-spacing:-.005em;
}
#gwTut .gwt2-brandsub{
  font:500 12px/1.3 var(--font-ui,system-ui,sans-serif);
  color:var(--ink-lo);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

#gwTut .gwt2-nav{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto;
}
#gwTut .gwt2-navrow{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  box-sizing:border-box; width:100%; height:40px; flex:none;
  padding:0 12px; border:0; border-radius:10px;
  background:transparent; text-align:left;
  font:600 14px/1 var(--font-ui,system-ui,sans-serif);
  color:var(--ink-lo);
  transition:background .15s ease, color .15s ease;
}
#gwTut .gwt2-navrow:hover{ background:var(--hover); color:var(--ink-mid); }
#gwTut .gwt2-navrow[aria-current="step"]{
  background:var(--raised);
  box-shadow:inset 0 0 0 1px var(--hairline);
  color:var(--ink-hi);
}
#gwTut .gwt2-navrow:focus-visible{ outline:2px solid var(--p400); outline-offset:1px; }
#gwTut .gwt2-navico{
  width:16px; height:16px; flex:none;
  border-radius:4px; object-fit:contain;
}
#gwTut .gwt2-navlbl{
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* pinned "N of 8" */
#gwTut .gwt2-count{
  flex:none; margin-top:10px; padding:12px 12px 0;
  border-top:1px solid var(--hairline);
  font:600 12px/1 var(--font-ui,system-ui,sans-serif);
  color:var(--ink-faint);
}

/* =============================================================================
   CONTENT PANE: progress · X · tile · H1 · body · badge · hero band · footer
   ========================================================================== */
#gwTut .gwt2-main{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column;
  box-sizing:border-box;
  padding:24px 32px 0;
}

#gwTut .gwt2-top{
  flex:none;
  display:flex; align-items:center; gap:16px;
  margin-bottom:24px;
}
#gwTut .gwt2-prog{ flex:1 1 auto; display:flex; gap:8px; }
#gwTut .gwt2-seg{
  flex:1 1 0; height:3px; border-radius:2px;
  background:var(--hairline-2);
  transition:background .2s ease;          /* the 200ms fill */
}
#gwTut .gwt2-seg.on{ background:var(--p400); }
#gwTut .gwt2-x{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  flex:none; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; padding:0;
  background:transparent; color:var(--ink-lo);
  font:400 20px/1 var(--font-ui,system-ui,sans-serif);
  transition:background .15s ease, color .15s ease;
}
#gwTut .gwt2-x:hover{ background:var(--hover); color:var(--ink-hi); }
#gwTut .gwt2-x:focus-visible{ outline:2px solid var(--p400); outline-offset:1px; }

/* the crossfading region — fixed vertical budget, the band absorbs the rest */
#gwTut .gwt2-swap{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}
#gwTut .gwt2-swap.gwt2-in{ animation:gwt2In .15s ease both; }
@keyframes gwt2In{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

/* 64px rounded-square icon tile, art floats gently */
#gwTut .gwt2-tile{
  flex:none;
  width:64px; height:64px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background:var(--raised);
  border:1px solid var(--hairline);
  margin-bottom:16px;
}
#gwTut .gwt2-tileimg{
  width:44px; height:44px; object-fit:contain;
  animation:gwt2Float 3s ease-in-out infinite;
}

#gwTut .gwt2-h1{
  flex:none; margin:0 0 10px;
  font:800 32px/1.15 var(--font-ui,system-ui,sans-serif);
  letter-spacing:-.015em;
  color:var(--ink-hi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* body: 16/1.55, HARD 2-line clamp with a matching min-height so a 1-line
   step never shifts the layout below it */
#gwTut .gwt2-body{
  flex:none; margin:0 0 16px;
  font:450 16px/1.55 var(--font-ui,system-ui,sans-serif);
  color:var(--ink-mid);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:50px;                          /* 2 × 16px × 1.55 */
  max-width:60ch;
}

/* proof badge pill: 7px accent dot + label */
#gwTut .gwt2-badge{
  flex:none; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:999px;
  background:var(--raised);
  border:1px solid var(--hairline-2);
}
#gwTut .gwt2-dot{
  width:7px; height:7px; flex:none; border-radius:50%;
  background:var(--p400);
}
#gwTut .gwt2-badgelbl{
  font:600 12.5px/1 var(--font-ui,system-ui,sans-serif);
  color:var(--ink-mid);
}

/* lower band (~150px): the larger floating gift render */
#gwTut .gwt2-band{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:8px 0;
}
#gwTut .gwt2-hero{
  max-height:min(150px, 100%); max-width:70%;
  object-fit:contain;
  animation:gwt2FloatBig 3s ease-in-out infinite;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.35));
}

/* footer: hairline, bare Back left, solid accent Next right */
#gwTut .gwt2-foot{
  flex:none;
  display:flex; align-items:center;
  border-top:1px solid var(--hairline);
  padding:14px 0 18px;
}
#gwTut .gwt2-back{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  border:0; background:transparent; padding:8px 6px;
  font:600 14px/1 var(--font-ui,system-ui,sans-serif);
  color:var(--ink-lo);
  transition:color .15s ease;
}
#gwTut .gwt2-back:hover{ color:var(--ink-hi); }
#gwTut .gwt2-back[disabled]{ opacity:.35; cursor:default; pointer-events:none; }
#gwTut .gwt2-back:focus-visible{ outline:2px solid var(--p400); outline-offset:1px; }
#gwTut .gwt2-next{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  margin-left:auto;
  border:1px solid var(--p400); border-radius:10px;
  padding:11px 20px;
  background:var(--p400); color:var(--on-accent);
  font:700 14px/1 var(--font-ui,system-ui,sans-serif);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
#gwTut .gwt2-next:hover{ background:var(--p500); border-color:var(--p500); }
#gwTut .gwt2-next:active{ transform:translateY(1px); }
#gwTut .gwt2-next:focus-visible{ outline:2px solid var(--p400); outline-offset:2px; }

/* real-art-or-nothing: a render that failed to load hides, never a broken glyph */
#gwTut img[data-missing="1"]{ visibility:hidden; }

/* ---- float keyframes (compositor-only) ------------------------------------ */
@keyframes gwt2Float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}
@keyframes gwt2FloatBig{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}

/* ---- small screens: the sidebar folds away, content pane goes full-bleed -- */
@media (max-width:760px){
  #gwTut .gwt2-card{
    width:calc(100vw - 20px);
    height:min(555px, calc(100dvh - 20px));
  }
  #gwTut .gwt2-side{ display:none; }
  #gwTut .gwt2-main{ padding:18px 18px 0; }
  #gwTut .gwt2-h1{ font-size:26px; white-space:normal; min-height:60px; }
  #gwTut .gwt2-body{ -webkit-line-clamp:3; min-height:75px; }
}

/* ---- reduced motion ------------------------------------------------------- */
#gwTut[data-motion="reduced"] .gwt2-tileimg,
#gwTut[data-motion="reduced"] .gwt2-hero,
#gwTut[data-motion="reduced"] .gwt2-swap.gwt2-in,
#gwTut[data-motion="reduced"] .gwt2-card{ animation:none !important; }
#gwTut[data-motion="reduced"] .gwt2-seg{ transition:none !important; }

@media (prefers-reduced-motion:reduce){
  #gwTut .gwt2-tileimg,
  #gwTut .gwt2-hero,
  #gwTut .gwt2-swap.gwt2-in,
  #gwTut[data-open] .gwt2-card{ animation:none !important; }
  #gwTut .gwt2-seg{ transition:none !important; }
}