/* ============================================================================
   tour.css

   The guided tour's own stylesheet. Nothing in here targets an element the
   site already draws, with the single exception of .tourbtn, which is the
   control added for this feature and belongs to it.

   Every colour is a variable the site already defines in :root. The dim is
   --ink at low opacity, which is the ink the body is already set in, not a new
   grey. No radius, no shadow, no gradient anywhere in this file: the spotlight
   is drawn as a masked rect with a hole punched in it rather than as a
   box-shadow spread, which is the only way to cut a hole in a dim without one.
============================================================================ */

/* ---------- the TOUR controls ----------------------------------------------
   Two instances, one in the footer line and one in the Workroom header row,
   because body.locked hides the whole footer on that tab above 1100px. They
   are declared together and are identical: the face, size, letter spacing and
   padding are written here rather than inherited, so the Workroom instance
   does not take the metrics of the row it sits in and drift from the footer
   one. The values are the footer .mono line's own, var(--m) at 10px on 2.2px.

   Filled rust, so it reads as the one control on the strip rather than as a
   further clause of the footer line. --paper is the light text colour the
   footer already uses on its own dark ground, on .fmark and on footer .n.

   Focus is the site's own treatment, 2px rust at 2px offset, the rule .wsectb
   already uses. The offset is what keeps the ring readable against the fill. */
.tourbtn{
  font-family:var(--m); font-size:10px; letter-spacing:2.2px;
  text-transform:uppercase; font-weight:400; line-height:1.3;
  color:var(--paper); background:var(--rust);
  border:1px solid var(--rust); border-radius:0;
  padding:3px 9px 4px; vertical-align:baseline; cursor:pointer;
  transition:background-color .15s linear,border-color .15s linear;
}
#tourbtn.tourbtn{ margin-left:16px; }
.tourbtn:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.tourbtn:focus-visible{ outline:2px solid var(--rust); outline-offset:2px; }

/* ---------- the overlay ----------------------------------------------------
   The root covers the viewport and carries no click handler of any kind, which
   is what makes a stray click on the dim do nothing rather than lose the tour.
   It also means the page underneath is not clickable while the tour is up. */
.tour-root{ position:fixed; inset:0; z-index:9000; }

/* One SVG, sized to the viewport by tour.js. Fixed, so it stays over the
   viewport while the page scrolls beneath it. */
.tour-svg{ position:fixed; inset:0; width:100%; height:100%; display:block; }

/* The dim itself: one rect wearing the mask the anchors punch their holes in.
   --ink at low opacity, not a new grey. */
.tour-shade{ fill:rgba(26,26,24,.44); }

/* The spotlight. Stroke only, no fill, so the anchor under it is untouched and
   nothing is tinted. A sibling of the dim in the same SVG, so the hole and its
   border cannot separate on scroll. */
.tour-ring{ fill:none; stroke:var(--rust); stroke-width:1.5; }

/* ---------- the step card -------------------------------------------------- */
.tour-card{
  position:fixed; z-index:1; width:360px; max-width:calc(100vw - 32px);
  background:var(--panel); border:1px solid var(--ink);
  padding:18px 20px 16px; color:var(--ink);
  font-family:var(--f); font-size:14px; line-height:1.6;
  transition:top .16s linear,left .16s linear;
}

.tour-x{
  position:absolute; top:8px; right:9px;
  font-family:var(--m); font-size:14px; line-height:1;
  background:transparent; border:0; border-radius:0;
  color:var(--grey); cursor:pointer; padding:4px 5px;
}
.tour-x:hover{ color:var(--ink); }

.tour-t{
  font-family:var(--f); font-weight:700; font-size:16.5px; line-height:1.25;
  padding-right:22px;
}
.tour-w{ margin-top:10px; color:var(--body); font-size:13.5px; line-height:1.62; }

/* The ask band. Its head is rust and its body is ink, so the band reads as an
   instruction rather than as more description. */
.tour-ask{ margin-top:14px; border-top:1px solid var(--line2); padding-top:11px; }
.tour-askh{
  font-family:var(--m); font-size:9px; letter-spacing:1.9px;
  text-transform:uppercase; color:var(--rust);
}
.tour-askb{ margin-top:6px; font-size:13.5px; line-height:1.55; }

/* ---------- the card footer ------------------------------------------------ */
.tour-f{
  margin-top:15px; border-top:1px solid var(--line);
  padding-top:11px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; flex-wrap:wrap;
}

.tour-roles{ display:flex; gap:0; }
.tour-role{
  font-family:var(--m); font-size:8.5px; letter-spacing:1.4px;
  text-transform:uppercase; padding:4px 8px 5px;
  background:transparent; color:var(--grey);
  border:1px solid var(--line2); border-radius:0; cursor:pointer;
  transition:background .12s linear,color .12s linear;
}
.tour-role + .tour-role{ border-left:0; }
/* the selected one is filled, in the site's own chip treatment */
.tour-role[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.tour-count{
  font-family:var(--m); font-size:8.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--rust); flex:0 0 auto;
}

.tour-nav{ display:flex; gap:0; margin-left:auto; }
.tour-b{
  font-family:var(--m); font-size:8.5px; letter-spacing:1.4px;
  text-transform:uppercase; padding:4px 9px 5px;
  background:transparent; color:var(--ink);
  border:1px solid var(--line2); border-radius:0; cursor:pointer;
  transition:background .12s linear,color .12s linear;
}
.tour-b + .tour-b{ border-left:0; }
.tour-b:hover:not([disabled]){ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tour-b[disabled]{ color:var(--grey); opacity:.5; cursor:default; }

/* ---------- narrow screens ------------------------------------------------- */
@media (max-width:640px){
  .tour-card{ width:calc(100vw - 24px); }
}

/* ---------- reduced motion -------------------------------------------------
   Transitions only. Nothing else about the tour changes. */
@media (prefers-reduced-motion:reduce){
  .tour-card,.tour-b,.tour-role,.tourbtn{ transition:none; }
}

/* ---------- print ----------------------------------------------------------
   Neither the overlay nor either control reaches paper. */
@media print{
  .tour-root,.tourbtn{ display:none !important; }
}