/* ============================================================
   The guided walkthrough — its own surface.

   Designed to sit on top of two very different grounds: the guide's white
   paper and the instruments' near-black. Everything below therefore states
   its own colors in the UVU palette rather than inheriting them, and the
   card is UVU Green with Legacy Gold as the only accent — the same pairing
   the rest of the site uses, well inside the 20% accent rule.
   ============================================================ */

/* ---------- the way in: a pill in the bar, never a filled box ---------- */
.tour-pill {
  font-family: var(--sans); font-size: clamp(.71rem, .78vw, .78rem); font-weight: 700;
  white-space: nowrap; cursor: pointer;
  color: var(--ever, #185C33); background: transparent;
  border: 1.4px solid rgba(24, 92, 51, .55); border-radius: 999px;
  padding: .3em .78em; line-height: 1.25; flex: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.tour-pill:hover { background: rgba(24, 92, 51, .09); border-color: var(--ever, #185C33); }
.tour-pill:focus-visible { outline: 2px solid var(--brass, #8A6423); outline-offset: 2px; }
.tour-pill .dot {
  display: inline-block; width: .42em; height: .42em; border-radius: 50%;
  background: var(--brass-bright, #D2AC5F); margin-right: .45em; vertical-align: .06em;
}
/* The pill is the bar list's first child so a phone's menu sheet meets it
   first (tour.js mountPill). On a wide screen the bar is a flex row and this
   puts it back where it has always been: after the twelve links, on the right. */
.topnav .tour-pill { order: 2; }
.instrument .tour-pill { color: #E3C387; border-color: rgba(227, 195, 135, .5); }
.instrument .tour-pill:hover { background: rgba(227, 195, 135, .13); border-color: #E3C387; }
.instrument .tour-pill .dot { background: #E3C387; }

/* the little chooser the pill opens */
.tour-menu {
  position: absolute; z-index: 90; min-width: 16rem; max-width: min(22rem, calc(100vw - 2rem));
  background: #FCFBF8; color: #161A17;
  border: 1px solid rgba(22, 26, 23, .32); border-radius: 5px;
  box-shadow: 0 14px 38px rgba(14, 58, 34, .22); padding: .55rem;
  font-family: var(--sans, sans-serif);
}
.instrument .tour-menu { background: #10281B; color: #E7E2D3; border-color: rgba(231, 226, 211, .3); }
.tour-menu button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 600; line-height: 1.35;
  color: inherit; background: transparent; border: 0; border-radius: 3px;
  padding: .5rem .55rem;
}
.tour-menu button + button { margin-top: .1rem; }
.tour-menu button small { display: block; font-weight: 400; font-size: .74rem; opacity: .78; margin-top: .12rem; }
.tour-menu button:hover, .tour-menu button:focus-visible {
  background: rgba(24, 92, 51, .1); outline: none;
}
.instrument .tour-menu button:hover, .instrument .tour-menu button:focus-visible { background: rgba(227, 195, 135, .14); }

/* On a phone the chooser is a bottom sheet, like every other explanation on
   this site. Measured against the pill it opened below the fold, which is the
   whole of what the owner could not reach. tour.js adds `as-sheet` and the
   same `.sheet-scrim` the (i) panels use, and sets no inline position. */
@media (max-width: 700px) {
  .tour-menu.as-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; min-width: 0; max-width: none; z-index: 96;
    max-height: min(64vh, 30rem);
    max-height: min(64dvh, 30rem);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    border: 0; border-top: 3px solid var(--ever, #185C33);
    border-radius: 16px 16px 0 0;
    padding: 1.5rem .9rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 44px rgba(11, 33, 22, .4);
  }
  .instrument .tour-menu.as-sheet { border-top-color: var(--inst-accent, #E3C387); }
  /* the grab handle, so it reads as a sheet and not as a stranded card */
  .tour-menu.as-sheet::before {
    content: ""; position: absolute; top: .6rem; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 2px;
    background: rgba(22, 26, 23, .28);
  }
  .instrument .tour-menu.as-sheet::before { background: rgba(231, 226, 211, .32); }
  .tour-menu.as-sheet button {
    min-height: 44px; font-size: 16px; line-height: 1.35; padding: .7rem .6rem;
  }
  .tour-menu.as-sheet button + button { margin-top: .15rem; }
  .tour-menu.as-sheet button small { font-size: 14px; margin-top: .2rem; }
}

/* ---------- the quiet first-visit offer ---------- */
.tour-offer {
  display: grid; grid-template-columns: 1fr auto; gap: .8rem 1.1rem; align-items: center;
  margin: 1.4rem 0 0; padding: .85rem 1rem;
  border: 1px solid rgba(22, 26, 23, .14); border-left: 3px solid var(--ever, #185C33);
  border-radius: 0 4px 4px 0; background: var(--paper-2, #F2F0EB);
  font-family: var(--sans, sans-serif); font-size: .87rem; line-height: 1.5; color: var(--ink-soft, #3E4A44);
}
.tour-offer b { color: var(--ink, #161A17); font-weight: 700; }
.tour-offer .tour-offer-do { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tour-offer .go {
  font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  background: var(--ever, #185C33); color: #FFFFFF;
  border: 1px solid var(--ever-deep, #0E3A22); border-radius: 3px; padding: .5em 1em;
}
.tour-offer .go:hover { background: var(--ever-deep, #0E3A22); }
.tour-offer .no {
  font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--ink-faint, #5C6863); border: 0; padding: .5em .4em;
  text-decoration: underline; text-underline-offset: 2px;
}
.tour-offer .go:focus-visible, .tour-offer .no:focus-visible { outline: 2px solid var(--brass, #8A6423); outline-offset: 2px; }
@media (max-width: 620px) { .tour-offer { grid-template-columns: 1fr; } }

/* ---------- the spotlight ---------- */
#tour-root { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
#tour-root[hidden] { display: none !important; }
/* purely visual: every pointer event passes through to the page underneath, so
   a reader can still work the control the card is telling them to try */
.tour-mask { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tour-mask .dim { fill: #0B2116; fill-opacity: .68; }
.tour-ring { fill: none; stroke: #D2AC5F; stroke-width: 2.5; }
.tour-ring-soft { fill: none; stroke: rgba(210, 172, 95, .32); stroke-width: 7; }

/* ---------- the card ----------
   One shape at every width: a kicker line with the proof link at its right,
   the title, the body, one short line, then Back and Next. On a phone the
   same parts become a bottom sheet capped at 30% of the screen, so whatever
   the card is pointing at is still visible above it. */
.tour-card {
  position: fixed; z-index: 9001; pointer-events: auto;
  width: min(25.5rem, calc(100vw - 2rem));
  background: #185C33; color: #F1EFE6;
  border: 1px solid #0E3A22; border-radius: 6px;
  box-shadow: 0 18px 46px rgba(8, 26, 16, .45);
  font-family: var(--sans, sans-serif); font-size: .93rem; line-height: 1.45;
  padding: .9rem 1.05rem .75rem;
}
.tour-card .tour-kicker {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  font-family: var(--mono, monospace); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: #E3C387; margin-bottom: .34rem;
}
.tour-card .tour-kicker > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-card h2 {
  font-family: var(--display, sans-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.14;
  color: #FFFFFF; margin: 0 0 .4rem;
}
.tour-card .tour-body { margin: 0; color: #F1EFE6; }
.tour-card .tour-try {
  margin: .45rem 0 0; color: #E3C387; font-weight: 600;
}
/* the proof link rides the kicker's right end, small, on one line */
.tour-card a.proof {
  flex: none; font-family: var(--mono, monospace); font-size: .64rem; letter-spacing: .06em;
  color: #E3C387; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.tour-card a.proof:hover { color: #FFFFFF; }

/* the 2px progress bar along the sheet's top edge — the phone's dots row */
.tour-bar { display: none; }

.tour-foot {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .55rem; border-top: 1px solid rgba(231, 226, 211, .2);
}
.tour-dots { display: flex; gap: .26rem; flex-wrap: wrap; align-items: center; margin: 0 auto 0 .2rem; }
.tour-dots i {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(231, 226, 211, .32);
}
.tour-dots i.on { background: #E3C387; }
.tour-dots i.past { background: rgba(227, 195, 135, .62); }

.tour-card button {
  font-family: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  border-radius: 3px; padding: .45em .85em; line-height: 1.3;
}
.tour-b-next { background: #D2AC5F; color: #10281B; border: 1px solid #B08F45; }
.tour-b-next:hover { background: #E3C387; }
.tour-b-back { background: transparent; color: #E7E2D3; border: 1px solid rgba(231, 226, 211, .4); }
.tour-b-back:hover { background: rgba(231, 226, 211, .12); }
.tour-b-back[disabled] { opacity: .4; cursor: default; }
.tour-b-skip {
  background: transparent; color: #C8D3C6; border: 0; padding: .45em .3em;
  text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
}
.tour-b-skip:hover { color: #FFFFFF; }
.tour-card button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.tour-switch {
  display: block; width: 100%; margin-top: .5rem; text-align: left;
  background: transparent; border: 0; padding: .1rem 0;
  font-family: inherit; font-size: .72rem; font-weight: 600; color: #C8D3C6;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.tour-switch:hover { color: #E3C387; }

/* ---------- on a phone the card is a bottom sheet ----------
   The owner read this on a phone and it took up most of the screen. It is now
   capped at 30% of it: one kicker line, the title, the body, one short line,
   and one row of buttons. The dots become a hairline of progress along the top
   edge, and the "every control" way in lives in the chooser instead. */
@media (max-width: 700px) {
  .tour-card {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100%;
    max-height: 30vh;
    max-height: 30dvh;   /* see mobile.css §3.2: `vh` is the taller viewport */
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: 10px 10px 0 0; border-bottom: 0; border-top: 1px solid #0E3A22;
    /* the sheet often lands on the green hero, so its edge is cast upward */
    box-shadow: 0 -10px 30px rgba(8, 26, 16, .5);
    font-size: .95rem; line-height: 1.4;
    padding: .5rem .9rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  }
  .tour-card::before {
    content: ""; display: block; width: 2.4rem; height: 3px; border-radius: 2px;
    background: rgba(231, 226, 211, .35); margin: .05rem auto .4rem;
  }
  .tour-bar {
    display: block; position: sticky; top: 0; height: 2px; margin: -.5rem -.9rem .2rem;
    background: rgba(231, 226, 211, .18);
  }
  .tour-bar i { display: block; height: 100%; background: #D2AC5F; }
  /* 11px caps, not 10: this is the line that says where you are */
  .tour-card .tour-kicker, .tour-card a.proof { font-size: .69rem; letter-spacing: .07em; }
  .tour-card a.proof .where { display: none; }   /* just "Proof ›" on a phone */
  .tour-card .tour-kicker { margin-bottom: .22rem; }
  .tour-card h2 { font-size: 1.02rem; margin-bottom: .3rem; }
  .tour-card .tour-try { margin-top: .3rem; }
  .tour-dots { display: none; }
  .tour-foot {
    position: sticky; bottom: 0; background: #185C33; gap: .45rem;
    margin-top: .5rem; padding-top: .4rem; flex-wrap: nowrap;
  }
  .tour-b-skip { margin-right: auto; }
  .tour-card button { min-height: 44px; }
  .tour-switch { display: flex; align-items: center; }
  /* the every-control path is offered in the chooser, not inside the sheet */
  .tour-switch[data-to="every"] { display: none; }
  .tour-switch { margin-top: .35rem; }

  /* the topology page pins its controls along the bottom edge, under the
     sheet, and nothing scrolls them clear — so the sheet moves to the top */
  .tour-card.at-top {
    top: 0 !important; bottom: auto !important;
    border-radius: 0 0 10px 10px; border-top: 0; border-bottom: 1px solid #0E3A22;
    box-shadow: 0 10px 30px rgba(8, 26, 16, .5);
    padding: calc(.5rem + env(safe-area-inset-top, 0px)) .9rem .55rem;
  }
  .tour-card.at-top::before { display: none; }
  .tour-card.at-top .tour-bar { margin-top: calc(-.5rem - env(safe-area-inset-top, 0px)); }
}

/* While the sheet is open the page is given room to scroll its last elements
   up clear of it. Nothing moves; the page just gets longer. */
html.tour-open body { padding-bottom: 0; }
@media (max-width: 700px) {
  html.tour-open body { padding-bottom: min(46vh, 420px); }
}

/* ---------- motion ---------- */
.tour-ring, .tour-ring-soft, .tour-mask .hole { transition: all .28s cubic-bezier(.4, 0, .2, 1); }
.tour-card { transition: opacity .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-ring-soft, .tour-mask .hole, .tour-card { transition: none !important; }
}

/* ---------- the walkthrough never prints ---------- */
@media print {
  #tour-root, .tour-pill, .tour-offer, .tour-menu { display: none !important; }
}