/* v14. Explanatory callouts BESIDE the dashboard shot, behind a toggle.
 *
 * v4 moves the boxes off the screenshot: they sit in the margin either side of
 * the tablet and only clip its outer edge, so they never cover the interface
 * being explained. That needs three things to hold together:
 *
 *  1. The layer stays a child of .ss-card (inset by its 0.75rem bezel), so its
 *     coordinate space is exactly the screen and the anchors stay glued to the
 *     right pixels through the scroll tilt. .ss-card / .ss-stage / .ss-scroll
 *     are all overflow:visible, so the boxes can hang outside it.
 *  2. The card gives up horizontal room for them. `calc(100% - 22rem)` keeps a
 *     constant ~176px margin each side once the viewport drops below the point
 *     where 74rem already leaves enough.
 *  3. Below 1200px there is no honest way to fit boxes beside a readable
 *     tablet, so the layer is dropped and the same five strings render as a
 *     list under it.
 */

/* Full width by default. The card only gives up room for the boxes once the
   Features toggle is on -- otherwise it would pay ~150px of width at 1440 for
   an overlay nobody asked to see. Transitioned so the swap is not a jump. */
/* The callout boxes sit at left:-16% and left:98%, i.e. well outside the card.
   An absolutely positioned element still extends the document's scrollable
   area even while visibility:hidden, so with the toggle OFF this section was
   making the whole page horizontally scrollable (174px at 1440) -- and on a
   trackpad any sideways component in a scroll gesture then dragged the page
   right. `clip` rather than `hidden`: it does not create a scroll container,
   so it cannot introduce a stray vertical scrollport. Visible boxes are always
   inside the viewport, so nothing that should be seen is cut. */
#interface { overflow-x: clip; }

/* Push the whole stage down inside its own section.
   .ss-scroll is a fixed 64rem box with align-items:center, and the stage sits
   high in it: scrolled to the end of the section there are 104px of dead space
   under the controls while the kicker is jammed against (or behind) the 65px
   sticky nav. This spends 80 of those 104px moving everything down, which
   leaves 24px of slack before the section edge and gives the kicker 84px of
   clearance under the nav on a 1080px-tall window.

   `top`, not margin or transform, on purpose: .ss-stage is already
   position:relative, so an offset moves it without changing the stage's height
   (a height change is split by the centring and moves the headline the WRONG
   way), without disturbing the scroll-tilt progress the script reads off
   #interface, and without adding a transform next to the existing
   `perspective: 1000px`, which would rebuild the 3D context the tablet tilts in.

   Under 1100px .ss-scroll switches to height:auto and the tablet stops tilting,
   so there is no dead space to reclaim and the offset must not apply. */
@media (min-width: 1100px) { .ss-stage { top: 5rem; } }
@supports not (overflow: clip) { #interface { overflow-x: hidden; } }

.ss-card { max-width: 74rem; transition: max-width .45s ease; }
.sc-on .ss-card { max-width: min(74rem, calc(100% - 22rem)); }
@media (prefers-reduced-motion: reduce) { .ss-card { transition: none; } }

.sc-layer {
  position: absolute;
  inset: 0.75rem;                        /* == .ss-card padding, i.e. the screen */
  pointer-events: none;
  z-index: 3;
  font-family: Arial, Helvetica, sans-serif;
  container-type: inline-size;
  overflow: visible;                     /* the boxes live outside this box */
}

/* Connectors. viewBox 0..100 on both axes with preserveAspectRatio:none means
   path coordinates ARE percentages of the screen; overflow:visible lets them
   run out to the boxes beside the tablet. */
.sc-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sc-lines path {
  fill: none;
  stroke: hsl(var(--deep) / .55);
  stroke-width: 1.25px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 3;
}
/* Drawn first, wider and light: a dark hairline vanishes wherever a connector
   crosses a dark listing photo, which is exactly where the Spam line runs. */
.sc-lines path.sc-halo {
  stroke: hsl(0 0% 100% / .92);
  stroke-width: 3.5px;
  stroke-dasharray: none;
}

/* A ring, not a filled dot and not an SVG marker: a marker inside a
   non-uniformly scaled viewBox gets squashed, and a filled dot sat on top of
   the control it pointed at and hid it. */
.sc-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 999px;
  border: 2px solid hsl(var(--deep) / .85);
  background: transparent;
  box-shadow: 0 0 0 2px hsl(0 0% 100% / .7), inset 0 0 0 2px hsl(0 0% 100% / .55);
}
/* Anchors that sit on a run of text rather than on a control get a pill wide
   enough to bracket the whole run, so the marker reads as a circling instead
   of a blob dropped on a digit. */
.sc-dot-wide { width: 5.9cqw; height: 2.5cqw; margin: -1.25cqw 0 0 -2.95cqw; border-radius: 999px; }


/* Chrome, not frosted glass: a vertical polish gradient with a hard tonal
   break just above the middle is what reads as brushed metal, and the rim is
   the same 145deg metal sweep the feature cards use. */
.sc-box {
  position: absolute;
  width: 18%;
  padding: .68rem .8rem;
  border-radius: .65rem;
  text-align: center;
  border: 1px solid transparent;
  /* A hint of polish, not a mirror. The face was a full chrome sweep with a
     hard tonal band across the middle; it now reads as near-white with the
     faintest sheen, and the metal is carried by the rim alone. */
  background:
    linear-gradient(180deg,
        hsl(0 0% 100%)        0%,
        hsl(220 14% 99%)     46%,
        hsl(220 12% 96%)     53%,
        hsl(0 0% 100%)      100%) padding-box,
    linear-gradient(145deg,
        hsl(0 0% 100%)        0%,
        hsl(var(--line-strong)) 22%,
        hsl(0 0% 100%)       42%,
        hsl(var(--warm))      60%,
        hsl(var(--line-strong)) 88%,
        hsl(0 0% 100%)      100%) border-box;
  box-shadow:
    0 1px 1px hsl(var(--deep) / .07),
    0 8px 22px hsl(var(--deep) / .14),
    inset 0 1px 0 hsl(0 0% 100%);
  color: hsl(var(--fg));
  font-size: clamp(9px, 1.22cqw, 13.5px);
  line-height: 1.4;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* Two conditions, both required: the Features toggle is on (.sc-on, written to
   .ss-stage), AND the tablet has finished tilting flat (.is-flat, written to
   .ss-card by the scroll script). Off by default -- the shot should be clean
   until someone asks for the annotations. visibility, not just opacity, so the
   boxes cannot be tabbed to or read out while hidden. */
.sc-layer {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.sc-on .is-flat .sc-layer {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .05s, transform .45s ease .05s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .sc-layer { transition: none; } }

/* -------------------------------------------------- narrow + phone fallback
   Under 1200px there is no room beside the tablet for a box without either
   shrinking the tablet past usefulness or running off the viewport. And below
   768px the tablet shows a CROPPED two-column shot in which three of the five
   anchors do not exist at all. Both cases get the list instead. */
.sc-list { display: none; }
@media (max-width: 1199px) {
  .ss-card, .sc-on .ss-card { max-width: 74rem; }
  .sc-layer { display: none; }
  .sc-list { display: none; }
  .sc-on .sc-list {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 1.5rem auto 0;
    max-width: 56rem;
    padding: 0 1rem;
    font-family: Arial, Helvetica, sans-serif;
  }
  .sc-list li {
    list-style: none;
    padding: .6rem .85rem;
    border-radius: .65rem;
    border: 1px solid transparent;
    text-align: center;
    background:
      linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(220 16% 97%) 44%,
          hsl(220 14% 90%) 50%, hsl(220 12% 96%) 56%, hsl(0 0% 100%) 100%) padding-box,
      linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(var(--line-strong)) 30%,
          hsl(var(--warm)) 60%, hsl(var(--line-strong)) 85%, hsl(0 0% 100%) 100%) border-box;
    box-shadow: 0 1px 1px hsl(var(--deep) / .08), 0 5px 14px hsl(var(--deep) / .12),
                inset 0 1px 0 hsl(0 0% 100%);
    font-size: 13px;
    line-height: 1.45;
    color: hsl(var(--fg));
  }
}


/* ------------------------------------------------------------- controls --
   The theme group and the Features toggle share one centred row. */
.ss-controls {
  /* Stacked, not side by side: the Features toggle sits under the theme
     switch so the pair reads as one centred column beneath the tablet. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  /* Left at 1.5rem deliberately. Two callouts hang off the bottom edge of the
     tablet into this band, but they are placed to the LEFT and RIGHT of the
     centred control column rather than above it, so no extra room is needed.
     Do NOT reintroduce a taller margin here, and above all do not make it
     conditional on .sc-on: .ss-scroll is a fixed-height flex box with
     align-items:center, so any height added below the tablet is split by the
     centring -- a 4rem reservation moved the headline and tablet 20px UP and
     the controls 20px DOWN on every click of the Features toggle, which put
     the kicker too close to the section rule and opened a hole underneath. */
  margin: 1.5rem auto 0;
}
.ss-controls .ss-theme { margin: 0; }

/* The Features toggle borrows the dashboard's own idioms: the segmented pill
   of its view switcher, and the eye it puts on the LIVE and MEMBERS panels to
   show and hide them. */
.ss-fx {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  cursor: pointer;
  color: hsl(var(--fg-muted));
  font: inherit;
  font-size: 12px;
  letter-spacing: .02em;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.ss-fx svg { width: 15px; height: 15px; }
.ss-fx.is-on {
  background:
    linear-gradient(hsl(var(--deep)), hsl(var(--deep))) padding-box,
    linear-gradient(150deg, hsl(0 0% 100% / .5) 0%, hsl(var(--deep)) 55%,
        hsl(0 0% 100% / .3) 100%) border-box;
  color: hsl(var(--deep-fg));
  box-shadow:
    0 1px 2px hsl(var(--deep) / .3),
    0 6px 18px hsl(var(--deep) / .22),
    inset 0 1px hsl(0 0% 100% / .22);
}