/* ==========================================================================
   MODULE TOUR (Start with one module — structured page)
   --------------------------------------------------------------------------
   Reference (29 Sep): neon.com's "Lakebase Architecture / Advanced
   Autoscaling / Built by Databricks" block. A sticky list of the modules
   holds the top-left of the section while the modules scroll past on the
   right; the one in view is marked (assets/js/tour.js), and clicking a name
   glides to it. Each module is its headline (first sentence dark, the
   description continuing in grey, first line indented as on Neon) with the
   illustration living directly on the page beneath it, no frame, then a
   legend row.

   Copy is the modules' own: nav names are the module labels, headlines and
   descriptions verbatim, the legend is the old Input/Output ledger, and
   the Explore links are kept.
   ========================================================================== */

.tour {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  column-gap: var(--space-9);
  margin-top: var(--space-8);
}

.tour__nav {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-8));
  align-self: start;
  padding-top: var(--space-3);
}
.tour__nav ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tour__nav a {
  position: relative;
  display: block;
  padding-left: 18px;
  font-size: 15px;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--motion-base) var(--motion-ease);
}
.tour__nav a:hover { color: var(--heading); }
.tour__nav a::before {                  /* the "you are here" marker */
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  translate: 0 -50%;
  background: var(--heading);
  opacity: 0;
  transition: opacity var(--motion-base) var(--motion-ease);
}
.tour__nav a[aria-current="true"] { color: var(--heading); }
.tour__nav a[aria-current="true"]::before { opacity: 1; }

.tour__item {
  /* adds to html's scroll-padding-top (nav + space-5), so a clicked module's
     headline lands level with the sticky list (nav + space-8) */
  scroll-margin-top: calc(var(--space-8) - var(--space-5));
}
/* A hairline between modules, with equal room either side. It belongs to
   the module above, so each module's top edge stays its headline (what the
   sticky list aligns to). */
.tour__item:not(:last-child) {
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: var(--border-w) solid var(--line);
}
.tour__item h3 {
  font-size: var(--size-h3);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.mod__grey { color: var(--ink-muted); }

/* The stage: the illustration on the open page, over its grain glow. */
.tour__art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 1000 / 560;
}
.tour__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* Legend row, after neon.com's chart legend: no box, no tint, no rule
   above. Left, the Input and Output as legend items, each led by a swatch
   (outlined square = what goes in, dotted accent square = what comes out);
   right, the Explore link in the larger type Neon gives its sentence. */
.tour__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5) var(--space-8);
  align-items: start;
  padding-top: var(--space-6);
}
.tour__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 14px var(--space-6);
  margin: 0;
}
.tour__spec div { display: flex; align-items: baseline; gap: 10px; }
.tour__spec dt {
  position: relative;
  flex: none;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.tour__spec dt::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 20px; height: 20px;
  translate: 0 -50%;
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--heading) 32%, var(--ground));
}
.tour__spec div + div dt::before {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--ground));
  background:
    radial-gradient(circle, var(--accent-text, var(--accent)) 0.9px, transparent 1.3px) 0 0 / 4px 4px,
    color-mix(in srgb, var(--accent) 14%, var(--ground));
}
.tour__spec dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--heading);
}
.tour__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  font-size: 20px;
  line-height: 1.5;
  color: var(--accent-text, var(--accent));
  text-decoration: none;
  --icon-size: 18px;
}
.tour__more .icon { transition: translate var(--motion-base) var(--motion-ease); }
.tour__more:hover { opacity: 0.75; }
.tour__more:hover .icon { translate: 2px -2px; }

/* --------------------------------------------------------------------------
   Vignettes — four different visual types, one per module, after the
   polarsignals.com feature cards, so the blocks stop reading as the same
   stack of boxes:
     Spec     .vchips   staggered key/value chips over ruled lines
     Code     .veditor  dark editor card
     Review   .vcards   stacked finding cards with gradient icon tiles
     On-call  .vchart   line chart: spike, deploy marker, tooltip
   Each sits on its own grain glow (assets/img/glow-*.png).
   Fills use the --ill-* illustration colours (palette.css); icons are
   Lucide. Square corners throughout, to match the site. */

/* Shared: gradient icon tile + skeleton bar. */
.vtile {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  color: var(--white);
  --icon-size: 16px;
  --icon-stroke: 2;
}
.vtile--butter { background: linear-gradient(135deg, var(--ill-butter), var(--ill-ember)); }
.vtile--sage   { background: linear-gradient(135deg, var(--ill-lime), var(--ill-jade)); }
.vtile--teal   { background: linear-gradient(135deg, var(--ill-teal), var(--ill-jade)); }
.vtile--ember  { background: linear-gradient(135deg, var(--ill-ember), var(--ill-flame)); }
.vbar {
  display: block;
  height: 7px;
  background: color-mix(in srgb, var(--heading) 11%, transparent);
}
.vmono { font-family: var(--font-mono, var(--font-body)); }

/* Spec: chips. */
.vchips {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  width: 100%;
  padding-block: var(--space-4);
}
.vchips::before {                       /* ruled lines, faded at the sides */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(to bottom,
    transparent 0 32px,
    color-mix(in srgb, var(--sage-green) 16%, transparent) 32px 33px);
  -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
          mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
}
.vchip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border: var(--border-w) solid color-mix(in srgb, var(--sage-green) 18%, var(--white));
  background: var(--white);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--sage-forest) 30%, transparent);
  translate: var(--x, 0) 0;
  font-size: 13.5px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.vchip b { font-weight: 500; color: var(--heading); }
.vchip--lg { padding: 10px 20px 10px 10px; font-size: 15.5px; }
.vchip--lg .vtile { width: 34px; height: 34px; }

/* Code: dark editor. Carries its own dark vars inside the paper section. */
.veditor {
  --ground: var(--night);
  --heading: var(--ember-cream);
  --ink: var(--ember-stone);
  --ink-muted: color-mix(in srgb, var(--ember-stone) 72%, var(--night));
  --line: color-mix(in srgb, var(--ember-cream) 12%, var(--night));
  width: min(100%, 360px);
  background: var(--ground);
  border: var(--border-w) solid var(--line);
  box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--night) 70%, transparent);
  color: var(--ink);
  font-size: 13px;
}
.veditor__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.veditor__head .vtile { background: color-mix(in srgb, var(--ember-cream) 10%, var(--night)); color: var(--heading); }
.veditor__head b { display: block; font-size: 14px; font-weight: 500; color: var(--heading); }
.veditor__head .vmono { font-size: 11.5px; color: var(--ink-muted); }
.vpill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: var(--border-w) solid color-mix(in srgb, var(--ill-sage) 45%, transparent);
  background: color-mix(in srgb, var(--ill-sage) 16%, transparent);
  color: var(--ill-sage);
  font: 500 11.5px/1.2 var(--font-mono, var(--font-body));
  --icon-size: 12px;
  --icon-stroke: 2.5;
}
.veditor__code {
  display: grid;
  gap: 9px;
  margin: 0 16px;
  padding: 12px 0;
  border: var(--border-w) solid var(--line);
  background: color-mix(in srgb, var(--ember-cream) 3%, var(--night));
}
.vline { display: flex; align-items: center; gap: 12px; padding-right: 14px; }
.vline i {
  width: 26px;
  font: 400 11px/1 var(--font-mono, var(--font-body));
  font-style: normal;
  text-align: right;
  color: var(--ink-muted);
}
.vline .vbar { background: color-mix(in srgb, var(--ember-cream) 16%, transparent); }
.vline--add { background: color-mix(in srgb, var(--ill-sage) 12%, transparent); }
.vline--add .vbar { background: color-mix(in srgb, var(--ill-sage) 55%, transparent); }
.vline--del { background: color-mix(in srgb, var(--ill-flame) 12%, transparent); }
.vline--del .vbar { background: color-mix(in srgb, var(--ill-flame) 55%, transparent); }
.veditor__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.veditor__foot b { font-weight: 500; color: var(--heading); }
.veditor__foot span { color: var(--ink-muted); }
.vtoggle {                              /* square track, illustration only */
  flex: none;
  position: relative;
  width: 30px; height: 16px;
  background: var(--ill-jade);
}
.vtoggle::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 10px; height: 10px;
  background: var(--white);
}

/* Review: finding cards. */
.vcards { display: grid; gap: 14px; width: min(100%, 440px); }
.vcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: var(--border-w) solid color-mix(in srgb, var(--ill-ember) 20%, var(--white));
  background: var(--white);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--ember-black) 28%, transparent);
}
.vcard:nth-child(2) { translate: 14px 0; }
.vcard > div { display: grid; gap: 8px; flex: 1; min-width: 0; }
.vcard b { font-size: 14px; font-weight: 500; color: var(--heading); }
.vcard .vtile { width: 36px; height: 36px; --icon-size: 18px; }

/* On-call: chart. */
.vchart { position: relative; width: min(100%, 680px); }
.vchart__tip {
  position: absolute;
  top: -6px; left: 0;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 10px 14px;
  border: var(--border-w) solid var(--line);
  background: var(--white);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--ember-black) 28%, transparent);
  font-size: 13px;
  color: var(--ink-muted);
}
.vchart__tip div { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.vchart__tip b { font-weight: 500; color: var(--heading); }
.vdot { width: 10px; height: 10px; border: 2px solid; background: var(--white); }
.vdot--sage  { border-color: var(--ill-jade); }
.vdot--ember { border-color: var(--ill-flame); }
.vtag {
  padding: 2px 6px;
  background: color-mix(in srgb, var(--ill-flame) 14%, transparent);
  color: var(--ember-orange-ink);
  font: 500 11px/1.3 var(--font-mono, var(--font-body));
}
.vchart svg { display: block; width: 100%; height: auto; overflow: visible; }
.vchart .grid   { stroke: color-mix(in srgb, var(--heading) 10%, transparent); stroke-dasharray: 3 4; fill: none; }
.vchart .mark   { stroke: color-mix(in srgb, var(--heading) 35%, transparent); stroke-dasharray: 3 3; fill: none; }
.vchart .ln     { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vchart .ln--sage  { stroke: var(--ill-jade); }
.vchart .ln--ember { stroke: var(--ill-flame); }
.vchart .area   { stroke: none; }
.vchart .stop-a { stop-color: var(--ill-ember); stop-opacity: 0.32; }
.vchart .stop-b { stop-color: var(--ill-ember); stop-opacity: 0; }
.vchart .pt     { fill: var(--white); stroke-width: 2; }
.vchart .pt--sage  { stroke: var(--ill-jade); }
.vchart .pt--ember { stroke: var(--ill-flame); }
.vchart__axis { display: flex; justify-content: space-between; margin-top: 12px; }
.vchart__axis .vbar { width: 34px; height: 6px; }

@media (max-width: 900px) {
  .tour { grid-template-columns: 1fr; margin-top: var(--space-6); }
  /* The list becomes a sticky strip under the header. */
  .tour__nav {
    z-index: 2;
    top: var(--nav-h);
    margin-inline: calc(-1 * var(--pad-x, 5vw));
    padding: 12px var(--pad-x, 5vw);
    background: var(--ground);
    border-bottom: var(--border-w) solid var(--line);
    overflow-x: auto;
  }
  /* the list carries the end padding: a scroller's own right padding isn't
     scrollable, so the last name would stop flush against the edge */
  .tour__nav ol { grid-auto-flow: column; justify-content: start; gap: var(--space-6); width: max-content; padding-right: var(--pad-x, 5vw); }
  .tour__nav a { white-space: nowrap; }
  .tour__item { padding-top: var(--space-7); scroll-margin-top: 32px; }
  .tour__item:not(:last-child) { padding-bottom: var(--space-7); margin-bottom: 0; }
  .tour__art { aspect-ratio: auto; min-height: 320px; padding-block: var(--space-6); }
  .tour__foot { grid-template-columns: 1fr; padding-top: var(--space-5); }
  .tour__spec { flex-direction: column; }
  .tour__more { font-size: 17px; }
  .vchip { white-space: normal; translate: 0 0; }
  .vcard:nth-child(2) { translate: 0 0; }
}

/* Mobile (1 Oct): tour list 14px, spec chips 12px. */
@media (max-width: 900px) {
  .tour__nav a { font-size: 14px; }
  .vchip, .vchip--lg { font-size: 12px; }
}