/* ============================================================================================
   product-tour-overage.css — the product tour pages, /demo/{slug} (2026-10-01)

   WHAT THIS IS
   Every page's linked CSS is held to its budget (scripts/verify.mjs, rule P2) and the shared sheet is at
   its line, so the tour page's styles live here, linked by src/pages/demo/[slug].astro with data-overage.
   The page is full screen like the tours site (Robert, 2026-10-01): the header bar, then the tour in its
   frame filling the rest of the window. The tour brings its own styles inside the frame; nothing here
   reaches into it. This sheet loads before the shared one, so a rule that must beat a shared rule
   outranks it by specificity, not by order.
   ============================================================================================ */

/* one screen: the bar, then the frame taking every pixel left */
.product-tour { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100svh; background: var(--bg); }

/* the bar: the tours' own header in the Hub's type, one row */
.product-tour-bar { display: flex; align-items: center; gap: var(--s-4); min-width: 0; min-height: 64px; padding: var(--s-2) var(--s-5); border-bottom: 1px solid var(--border); }
.product-tour-home { display: inline-flex; flex: none; padding-right: var(--s-4); border-right: 1px solid var(--border); }
.product-tour-home img { display: block; width: 118px; height: auto; }
.product-tour-kicker { flex: none; font-size: 12px; font-weight: var(--fw-display); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* the H1 at the tours' title size, in Lato: it must outrank the site's headline rule (base.css, body :is(h1, …),
   specificity 0,2,2), which loads after this sheet */
body .product-tour .product-tour-bar > h1.product-tour-title { min-width: 0; font-family: var(--font); font-size: 18px; font-weight: 700; font-variation-settings: normal; line-height: 1.25; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }
.product-tour-length { flex: none; font-size: 13px; color: var(--muted); white-space: nowrap; }

/* the switch: Interactive or Video, the tours' segmented control; it pushes the links to the right */
.product-tour-view { flex: none; margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-control); background: var(--bg-3); }
.product-tour-view[hidden] { display: none; }
.product-tour-view button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-control); background: none; font: inherit; font-size: 13px; font-weight: var(--fw-display); color: var(--body); cursor: pointer; }
.product-tour-view button:hover { color: var(--ink); }
.product-tour-view button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(26, 18, 46, .14); }
/* the two links at the tours' header size, smaller than the Hub's small button */
.product-tour-bar .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.product-tour-all { flex: none; margin-left: auto; }
.product-tour-view:not([hidden]) ~ .product-tour-all { margin-left: 0; }
.product-tour-demo { flex: none; }

/* the frame: the tour, edge to edge under the bar */
.product-tour-frame { display: block; width: 100%; height: 100%; border: 0; }

/* narrower: the kicker and the length go first, then All tours; on a phone the bar keeps the logo, the
   title, the switch and Book a demo (the tour opens on its video there, the player's own choice). The shared
   .btn rule loads after this sheet, so hiding a button needs the bar in the selector. */
@media (max-width: 1023.98px) { .product-tour-kicker, .product-tour-length { display: none; } }
@media (max-width: 759.98px) {
  .product-tour-bar { gap: var(--s-3); min-height: 56px; padding-inline: var(--s-4); }
  .product-tour-home { padding-right: var(--s-3); }
  .product-tour-home img { width: 96px; }
  .product-tour-bar .product-tour-all { display: none; }
  .product-tour-view { margin-left: auto; }
  .product-tour-view button { padding: 0 10px; }
}
@media (max-width: 479.98px) { .product-tour-bar .btn { padding: 0 14px; } body .product-tour .product-tour-bar > h1.product-tour-title { font-size: 16px; } }