/* ══════════════════════════════════════════════════════════════════════
   FOLLOW THE STEPS — its own stylesheet
   Markup and copy are in app/js/part084.js.

   Everything here is either the disc that opens the guide or a card that
   runs through the hero's rail. The rail itself — .hs-deck, .hs-cell, the
   slide, the direction, the height — is nowssb-nm.css and belongs to
   app/js/part083.js; a step card is a .hs-cell like any other and inherits
   all of it. That is the point: the guide moves exactly the way the video
   banners move, because it is moving through the same deck.

   url() paths resolve against THIS FILE, which sits in app/ — one level
   below the page. There are none; if one is added it is ../assets/.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   THE DISC ON THE HERO
   Bottom right of the hero card, over its own corner. Only this look
   has one — the script mounts it on .hero-simple and nowhere else.
   ══════════════════════════════════════════════════════════════════ */
.fst-btn {
  position: absolute; z-index: 40;
  /* Two homes, and the script moves it between them. Closed it is a child
     of .hs-foot, in flow, standing beside the word Learn. Open it is a
     child of .hero-content — inside the set — because the strip is
     carrying the guide's own row by then. */
  position: relative; right: auto; bottom: auto;
  flex-shrink: 0;
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; min-height: 40px !important;
  padding: 0 !important; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: none !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #060c18;
  cursor: pointer;
  /* A dark ring, not a light one: the disc sits over the set's white
     bezel, and a white halo disappeared into it. */
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 0 2px rgba(6,12,24,0.6);
  transition: transform .24s cubic-bezier(.2,1,.3,1), box-shadow .2s ease;
}
.fst-btn svg { width: 18px; height: 18px; display: block; }
.fst-btn:active { transform: scale(.9); }
/* open: the arrow turns back on itself, and the ring goes blonde */
.fst-btn.on {
  transform: rotate(-90deg);
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 0 3px rgba(232,213,163,0.8);
}
.fst-btn.on:active { transform: rotate(-90deg) scale(.9); }

/* a preview of a hero is a photograph of it — nothing in one is pressable */
.stw-prev-stage .fst-btn { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   A STEP CARD

   It is a cell of the hero's deck, so it is already absolutely placed,
   already sliding in from the right and already leaving to the left —
   .hs-cell does all of that. What is left to say is what it looks like,
   and the answer is: the banner's shape, in black, with words where the
   tablet was.
   ══════════════════════════════════════════════════════════════════ */
.hs-cell.fst-cell {
  box-sizing: border-box;
  /* the banners' own wrapper geometry, so the two are the same rectangle
     as they pass each other */
  padding: 14px !important;
  border-radius: 0 !important;      /* square, like the wrapper it replaces */
  /* Black, and only black. The rail either side of this is footage inside
     glass; the one thing here that has to be READ earns its silence by
     having nothing in it that moves or refracts. */
  background: #05070d !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: column;
  /* ── One length, and it is the hero's ──
     The hero card is the first card of this same guide — it carries the
     title — so a step card has to be the same rectangle or the deck
     resizes the moment you press forward. --fst-h is the hero cell's own
     layout height, measured by the script.

     This is the constraint the copy is written to: a lead of one line and
     three points of one line each. A step you take in at a glance beats a
     step you scroll. */
  height: var(--fst-h, 300px);
  min-height: 0;
  text-align: left;
  overflow: hidden;
}

/* The head is the banners' head — .hs-head, .hs-orb, .hs-head-h,
   .hs-head-t, all from nowssb-nm.css — so a step announces itself in the
   same voice a banner does. Only the rule under it is ours. */
.fst-cell .hs-head { flex-shrink: 0; }
/* the same white disc the store mark wears, so every drawing on this card
   is the same object */
.fst-cell .hs-orb {
  background: #fff !important;
  border: none !important;
  color: #060c18 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.fst-cell .fst-body {
  flex: 1; min-height: 0;
  margin-top: 10px; padding: 0 4px 2px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.fst-cell .fst-body::-webkit-scrollbar { display: none; }
/* No fade at the foot. It was there to say "there is more below", and with
   every card now short enough to be whole it was only ever greying out the
   last line of the ones that are not. */

.fst-lead {
  margin: 0;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400;
  line-height: 1.48; color: rgba(255,255,255,0.68);
}

/* ── The points ──
   A key and a line about it, with a rule down the left rather than a
   bullet glyph — a wrapped line still reads as belonging to its key
   instead of floating loose underneath it. */
.fst-pts { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.fst-pt {
  padding-left: 12px;
  border-left: 2px solid rgba(232,213,163,0.36);
}
.fst-pt-k {
  display: block;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 800;
  letter-spacing: .2px; color: #fff;
}
.fst-pt-v {
  display: block; margin-top: 2px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400;
  line-height: 1.42; color: rgba(255,255,255,0.56);
}

.fst-go {
  margin-top: 13px; margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px !important; min-height: 0 !important;
  border: none !important; border-radius: 999px !important;
  background: #fff !important; color: #060c18 !important;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .6px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
.fst-go svg { width: 15px; height: 15px; display: block; }
.fst-go:active { transform: scale(.95); }

/* ══════════════════════════════════════════════════════════════════
   THE TWO DISCS

   Under the deck, hard right. They exist only while the guide is running:
   the banners have no dots and no arrows and that does not change — a
   rail that runs itself should not look like one that needs driving.
   ══════════════════════════════════════════════════════════════════ */
/* In the strip under the set, so it is one row wide and no taller than the
   row it replaces. The buttons that live there are hidden while it is up. */
/* One row, on every card, laid out the same on all of them. Inside a step
   card it is pinned to the foot so it lands in the same place whatever the
   card above it is; on the title card it is in flow under the heading. */
.fst-nav {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; margin: 0;
}
/* In flow, not pinned. The card is a three-part column — head, body,
   row — so the row cannot land on top of the Enter pill however long the
   body is, and the body scrolls between the two instead of under one of
   them. Pinning it absolutely and padding the body away from it was the
   version that overlapped: the padding is inside the scroller, so at rest
   it put nothing between them at all. */
.fst-cell > .fst-nav {
  flex-shrink: 0; margin-top: 10px;
}
.fst-title > .fst-nav { margin-top: auto; pointer-events: auto; }
/* ── The strip, in two states ──
   Closed it is the card's own row: Explore, Help & Coach, Learn and the disc.
   Open it is the practice row for the TITLE card — and only that card, which
   is the hero, which is exactly when this strip is the cell on show. Every
   step card carries its own row inside itself, where there is room for it.

   Nothing overlaps because nothing shares: whichever row is up, the other
   one's pieces are out. */
.hs-foot.fst-nav-on > .hero-btns,
.hs-foot.fst-nav-on > .hs-sep,
.hs-foot.fst-nav-on > .hs-learn,
.hs-foot.fst-nav-on > .fst-btn { display: none !important; }
.hs-foot > .fst-nav { flex: 1 1 auto; min-width: 0; }
/* Inside the set, bottom right of the screen. */
.hero-content > .fst-btn {
  position: absolute !important; right: 12px; bottom: 12px;
  width: 38px !important; height: 38px !important;
  min-width: 38px !important; min-height: 38px !important;
}
/* The disc that opened the guide rides on the hero card, and the hero card
   is cell 0 — it slides out of the deck the moment a step is on. So the way
   out lives here, with the two discs, which is the only part of the guide
   that is always on screen. */
.fst-x {
  flex-shrink: 0;
  width: 34px !important; height: 34px !important;
  min-width: 34px !important; min-height: 34px !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.75); cursor: pointer;
}
.fst-x svg { width: 15px; height: 15px; display: block; }
.fst-x:active { transform: scale(.92); }

.fst-count {
  flex-shrink: 0; display: flex; align-items: baseline; gap: 5px;
  font-family: 'DM Sans', sans-serif;
}
.fst-count b { font-size: 15px; font-weight: 800; color: #fff; }
.fst-count span { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.42); }
.fst-bar {
  flex: 1 1 auto; min-width: 16px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.14); overflow: hidden;
}
/* The name of the card, immediately left of the two discs — where the eye
   already is on the way to pressing one. It takes what the bar does not
   need, and truncates rather than wrapping: this row is one line high and
   has to stay one line high. */
.fst-lbl {
  flex: 0 1 auto; min-width: 0;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .2px; color: rgba(255,255,255,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: right;
}
.fst-bar i {
  display: block; height: 100%; width: 6.6%;
  background: #e8d5a3;
  transition: width .4s cubic-bezier(.22,1,.28,1);
}
.fst-arrow {
  flex-shrink: 0;
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; min-height: 40px !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff; cursor: pointer;
  transition: opacity .2s ease, background .2s ease, transform .16s ease;
}
.fst-arrow svg { width: 17px; height: 17px; display: block; }
.fst-arrow:active { transform: scale(.9); }
/* forward is the one you are meant to press, so it is the filled one */
.fst-arrow.fst-arrow-n {
  background: #fff !important;
  border-color: #fff !important;
  color: #060c18;
}
.fst-arrow:disabled { opacity: .28; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fst-btn, .fst-bar i { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   THE SET AS THE TITLE CARD

   While the guide is running, the television's own screen carries it: the
   wordmark in blonde and one line under it. The hero's own furniture —
   the tagline, the word on its timer, the picture rail, Explore and App
   Guide — is hidden rather than removed, because it is the app's real
   header and taking it apart to put it back is how you lose a piece of it.

   The film behind stays. It is the only thing in the set that should keep
   moving while the title is up.
   ══════════════════════════════════════════════════════════════════ */
.hero-simple.fst-title-on .hero-content > *:not(.fst-title):not(.hero-bg-vid):not(.fst-btn) {
  display: none !important;
}
.fst-title {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: stretch;
  /* Centred, and carrying two lines and nothing else. A title, a back disc
     and a full row inside a 230px screen with a wordmark already in it is
     what made this unreadable — the row moved out to the strip under the
     set, which is this card's own bottom edge. */
  justify-content: center;
  padding: 0 26px;
  text-align: left;
  pointer-events: none;
}
.fst-title-b {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(30px, 8.6vw, 46px);
  line-height: 1; letter-spacing: -1px;
  color: #e8d5a3;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
/* the wordmark's own two weights, in blonde rather than white */
.fst-title-b .b { font-weight: 800; }
.fst-title-b .t { font-weight: 300; opacity: .85; }
.fst-title-row {
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
}
.fst-title-sep { flex: 0 0 1px !important; height: 30px; }
/* and a little more air between the arrow and the word under it, so the
   two read as one control rather than a disc with a caption stuck to it */
.fst-title-back { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.fst-back-slot { display: flex; }
.fst-back-lbl {
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.fst-title-s {
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 10px rgba(0,0,0,0.8);
}
/* in the title row the disc is in flow, not pinned to a corner */
.fst-back-slot > .fst-btn {
  position: relative !important; right: auto !important; bottom: auto !important;
  width: 36px !important; height: 36px !important;
  min-width: 36px !important; min-height: 36px !important;
  border-radius: 50% !important;
}

/* The banners' head is sized for a banner. On a step card it is competing
   with the words for a 229px box, so it comes down — same shape, less of
   the height. */
.fst-cell .hs-head { margin-bottom: 0 !important; }
.fst-cell .hs-orb { width: 34px !important; height: 34px !important; }
.fst-cell .hs-orb svg { width: 17px !important; height: 17px !important; }
.fst-cell .hs-head-h { font-size: 10px !important; letter-spacing: 1.6px !important; }
.fst-cell .hs-head-t { font-size: 15px !important; line-height: 1.15 !important; }


/* ══════════════════════════════════════════════════════════════════
   CORNERS
   Square is what this card is, and Customize can say otherwise. The
   Corners option is unset until someone picks one (app/js/part063.js), so
   this only rounds a card for a reader who asked for round corners.
   ══════════════════════════════════════════════════════════════════ */
body.homecorner-round .hs-cell.fst-cell { border-radius: 22px !important; }