/* ============================================================================
   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. THE PAGE ITSELF IS NOT
   TOUCHED: no rule below reaches #sim-view, a chart, a tile or a band.

   Every colour is a variable tokens.css already defines. 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 and 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.

   ONE SITE HAS ONE VISUAL SYSTEM. Every class here begins tour- or is
   .tourbtn, and every one was grepped to zero in site.css and index.html
   before it was used.
============================================================================ */

/* ---------- the TOUR control -----------------------------------------------
   One instance, at the right hand end of the footer line. It sits inside the
   footer's own .mono line, which .fbar already pushes to the right of the
   mark, so the button lands at the end of the strip rather than in a row of
   its own.

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

   IT IS HIDDEN UNTIL THE PAGE IT TOURS IS THE PAGE ON SCREEN. tour.js sets and
   clears the hidden attribute off the address. There is no site tour yet, and
   a TOUR button on a tab that has none is a control that lies. */
.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; margin-left:16px; vertical-align:baseline; cursor:pointer;
  transition:background-color .15s linear,border-color .15s linear;
}
.tourbtn[hidden]{ display:none; }
.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.

   z-index 9000 clears everything the site declares: the drawers sit at 850 and
   their scrim at 800. */
.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:392px; 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); }

/* The step's own eyebrow: which of the fourteen, in the site's mono label. */
.tour-k{
  font-family:var(--m); font-size:9px; letter-spacing:1.9px;
  text-transform:uppercase; color:var(--grey); padding-right:22px;
}
.tour-t{
  font-family:var(--f); font-weight:700; font-size:16.5px; line-height:1.25;
  margin-top:5px; padding-right:22px;
}

/* THE TWO BANDS. Each carries its own head, so a reader can tell what is being
   described from what is being asked of them without reading either. */
.tour-band{ margin-top:13px; border-top:1px solid var(--line); padding-top:10px; }
.tour-band.ask{ border-top-color:var(--line2); }
.tour-h{
  font-family:var(--m); font-size:9px; letter-spacing:1.9px;
  text-transform:uppercase; color:var(--grey);
}
.tour-band.ask .tour-h{ color:var(--rust); }
.tour-p{ margin-top:6px; color:var(--body); font-size:13.5px; line-height:1.58; }
.tour-band.ask .tour-p{ color:var(--ink); }

/* ---------- 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; }

/* ---------- short screens --------------------------------------------------
   A WIDER CARD IS A SHORTER CARD, and on a short screen height is the thing in
   short supply. At 1280x800 a 392px card is tall enough that two steps, the
   reference table and the sheets grid, had nowhere to sit clear of the thing
   they describe and had to take the least covered position over it. At 520px
   the same text is about a third shorter and the reference table clears
   entirely, which is the width this is set at.

   THE SHEETS GRID STILL DOES NOT CLEAR AT 1280x800, and that is stated rather
   than tuned away. Under a 52px sticky header there are 748px to work in; the
   grid takes 396 and the card 363, which is 39px too many. 560 and 600 were
   both measured: each cuts the grid's overlap to about 5 000px2 but the card
   then no longer fits between the two columns of PLACEHOLDER marks on step 13
   and covers one of the five outright. A sliver down the edge of a 462 000px2
   grid is a better failure than a mark hidden altogether, so 520 stands and the
   overlap at that one width is reported rather than hidden.

   The breakpoint is on HEIGHT, not width, because that is what runs out: a
   1440x900 screen keeps the narrower card and does not need this. */
@media (max-height:840px){
  .tour-card{ width:min(520px,calc(100vw - 32px)); }
}

/* ---------- 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 the control reaches paper. */
@media print{
  .tour-root,.tourbtn{ display:none !important; }
}