/* Unified skin — the parts that are structure rather than colour (S48, RBI-140).
 *
 * skin.js rewrites the colour variables both surfaces already use. This file carries the
 * two things a variable swap cannot do on its own: give accent-coloured TEXT a token that
 * survives a light ground, and add the technical-label treatment that is most of what makes
 * Stitch's system read the way it does.
 *
 * Everything here is scoped to [data-skin-tone], which skin.js only sets when the new skin
 * is active — so this file is inert under the classic theme even when it is loaded.
 */

/* Lime on a light ground is unreadable as text. skin.js publishes --accent-text as the
 * readable stand-in (deep olive on light, the lime itself on dark); these are the places
 * the two stylesheets use the accent as ink rather than as a fill. */
[data-skin-tone] a:not(.btn),
[data-skin-tone] .more,
[data-skin-tone] .tile .ms,
[data-skin-tone] .num,
[data-skin-tone] .hours .day span:last-child,
[data-skin-tone] .open-badge,
[data-skin-tone] .contact-grid a {
  color: var(--accent-text);
}
[data-skin-tone] .open-badge {
  background: color-mix(in srgb, var(--accent-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-text) 34%, transparent);
}
[data-skin-tone] .open-badge i { background: var(--accent-text); }

/* The lime fill keeps its dark ink in both tones — that pair always clears contrast. */
[data-skin-tone] .btn-accent { background: var(--accent); color: var(--accent-ink); }

/* Stitch labels every block with a small, wide, uppercase eyebrow. Ours were already
 * uppercase; this brings them to the same weight and tracking. */
[data-skin-tone] .eyebrow,
[data-skin-tone] .stat span,
[data-skin-tone] footer h4,
[data-skin-tone] .paste-bar .label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Tighter corners and a flatter card are the other half of the technical feel. */
[data-skin-tone="light"] .card,
[data-skin-tone="light"] .tile,
[data-skin-tone="light"] .expect li {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--card-solid);
}


/* Facility tour — the same video twice: muted wallpaper, and the real thing on demand. */
#tour-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:url('/rbi/static/img/tour-poster.webp') center/cover no-repeat}
/* Overscanned on purpose: YouTube draws captions and its paused overlay inside the frame,
   and a background has no business showing either. Blowing the iframe up past the viewport
   pushes the caption band below the fold and the centre overlay out toward the edges. */
#tour-bg iframe,#tour-bg > div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(148vw,263vh);height:max(148vh,83vw);border:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease}
#tour-bg.is-live iframe,#tour-bg.is-live > div{opacity:1}
#tour-bg.is-paused iframe,#tour-bg.is-paused > div{opacity:0}
/* The scrim is what keeps the page readable over moving pictures. Built from the page
   ground, so it follows the brightness slider instead of fighting it. */
/* The veil stops are variables so the video can be dialled independently of the page. The
   fallbacks here are what the classic theme uses; skin.js overwrites them from its slider. */
#tour-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,
    color-mix(in srgb,var(--bg) var(--veil-1,93%),transparent) 0%,
    color-mix(in srgb,var(--bg) var(--veil-2,84%),transparent) 34%,
    color-mix(in srgb,var(--bg) var(--veil-3,55%),transparent) 66%,
    color-mix(in srgb,var(--bg) var(--veil-4,34%),transparent) 100%)}
/* On a phone the copy spans the full width, so there is no clear side to give the footage —
   it sits under the text or nowhere. Fixed heavier stops rather than the Video slider's,
   because readability is not a preference. */
@media(max-width:900px){ #tour-bg::after{background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 74%,transparent) 0%,
    color-mix(in srgb,var(--bg) 83%,transparent) 55%,
    color-mix(in srgb,var(--bg) 87%,transparent) 100%)}}

/* Tour control. Top right of the content column, directly under Book now, scrolling away
   with the page rather than following it down. The hero copy is left-aligned so the right of
   the column is free, which is the one place it fits at full width without covering anything.
   Absolutely positioned so it does not push the hero down. */
.tour-anchor{position:absolute;top:20px;left:0;right:0;z-index:2;pointer-events:none}
.tour-anchor .wrap{display:flex;justify-content:flex-end}
.tour-anchor .tour-btn{pointer-events:auto}
.tour-btn{display:inline-flex;align-items:center;gap:.5rem;flex:none;cursor:pointer;
  padding:.42rem 1rem .42rem .42rem;border-radius:var(--pill);font:inherit;font-size:.86rem;
  font-weight:700;color:var(--ink);background:var(--card-solid);border:1px solid var(--line-2);
  box-shadow:var(--shadow);transition:border-color .15s ease,background .15s ease}
.tour-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tour-btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.tour-btn .play{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;flex:none}
.tour-btn .play .ms{font-size:17px;margin-left:1px}
@media(max-width:900px){
  .tour-btn{position:fixed;top:calc(84px + 10px);right:16px;z-index:60;
    background:var(--card-solid);box-shadow:var(--shadow);padding:.42rem .95rem .42rem .42rem}
  .tour-btn .label{position:static;left:auto}
  .tour-btn--booking{display:none}
}
#tour-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:color-mix(in srgb,#000 78%,transparent);backdrop-filter:blur(6px)}
#tour-modal[hidden]{display:none}
.tour-shell{width:min(100%,1100px);position:relative}
#tour-frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--r);overflow:hidden;
  background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6)}
#tour-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tour-close{position:absolute;top:-52px;right:0;display:inline-flex;align-items:center;gap:.4rem;
  background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:var(--pill);
  padding:.45rem 1rem;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.tour-close:hover{background:rgba(255,255,255,.12)}
@media(max-width:620px){
  /* Parked under the hamburger, top right. The bottom of a phone screen is spoken for on
     both surfaces — the booking app's action bar lives there and it is how people pay — and
     there is no free corner that scrolling content will not eventually run into. Fixed, so
     it stays put rather than sliding over whatever is passing underneath.
     Compact too: full width sat on top of the page's own buttons. */
  .tour-btn{top:calc(var(--tour-top,84px) + 10px);bottom:auto;left:auto;right:16px;
    padding:.42rem .85rem .42rem .42rem;font-size:.8rem;gap:.4rem}
  .tour-btn .play{width:24px;height:24px}
  .tour-btn .play .ms{font-size:16px}
  .tour-btn .label-long{display:none}
  /* Not on the booking app: its header is not sticky, so a fixed pill would float over the
     page, and its top right already holds the My bookings / member actions. */
  .tour-btn--booking{display:none}
  .tour-close{top:-46px}}

/* The brightness control. Deliberately plain and always in the same corner — it is a tool
 * for choosing the theme, not part of the design being chosen. */
.skin-control {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--card-solid);
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.skin-control .row { display: flex; align-items: center; gap: 8px; }
.skin-control label { letter-spacing: .04em; text-transform: uppercase; min-width: 40px; }
.skin-control input[type="range"] { width: 116px; accent-color: var(--accent); }
.skin-control output { min-width: 58px; font-variant-numeric: tabular-nums; color: var(--ink); }
.skin-control button {
  cursor: pointer;
  font: inherit;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px 10px;
}
.skin-control button:hover { color: var(--ink); }
.skin-control button:focus-visible,
.skin-control input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (max-width: 620px) {
  .skin-control { left: 16px; right: 16px; }
  .skin-control .row { flex: 1 1 100%; }
  .skin-control input[type="range"] { width: auto; flex: 1; }
}

/* Touch targets. Measured at 390px: footer links were 20-22px tall and the social buttons
   38px, both under the 44px a thumb actually needs. */
@media (max-width: 620px) {
  footer li a,
  footer p a { display: inline-block; padding: 9px 0; }
  .socials a { width: 44px; height: 44px; }
  .burger { padding: .6rem .7rem; }
}