/* ================================================================================
   RollRoom shared chrome — rr-chrome.css (T1-shared-chrome, Sep 2026)
   ALL header / belt-burger mobile-nav / footer CSS, in one place, for every public
   page (index / gyms / masterskya / forgyms / matrecord). See rr-chrome.js for the
   matching markup + behaviour.

   Load with <link rel="stylesheet" href="shared/rr-chrome.css"> in <head> BEFORE
   the page's own <style>, so page-level overrides win the cascade (later same-
   specificity rule wins).

   CANONICAL SOURCES (ROLLROOM.md §6.1 header, §6.11 footer):
     - header / nav chips / CTA / belt-burger mobile-nav: index.html (byte-identical
       across pages before this task, only hrefs differed).
     - footer: masterskya.html v7, which is index.html's footer PLUS the Sep 15, 2026
       @media(max-width:759px) phone-footer layout that had shipped on masterskya
       only ("masterskya only until ported to the other 4 pages" — this file IS
       that port). Bringing it here is the ONE intended render change on
       index/gyms/forgyms/matrecord, and only at phone widths.

   MERGED IN from the four copies' small acquired differences (previously drifted,
   see PROJECT.md "known baseline problems" — resolved by construction here):
     - .cta-mini gets `text-decoration:none` (gyms/forgyms/matrecord render it as an
       <a>, not a <button>). matrecord's copy of .cta-mini had ALSO silently dropped
       `:active{transform:translateY(1px)}` and the transform half of the hover/active
       transition — restored to match index/masterskya/gyms/forgyms (see FRONTEND.md
       for the diff).
     - the `[aria-current="page"]` chip rules for .bar-mid/.foot-col (gyms/forgyms/
       matrecord mark their own nav chip; index/masterskya mark nothing — harmless
       no-op there since neither page emits aria-current="page").
     - forgyms' `.mnav .mnav-cta` extra text-align/padding/line-height for its longer
       "Bring your room to RollRoom" label — verified harmless on the shorter labels
       elsewhere (screenshots, FRONTEND.md A2).

   Page-level chrome overrides that STAY OUT of this file, in the page's own <style>
   (see each page for the comment explaining why):
     - forgyms: its `.bar-cta` reveal breakpoint is 980px, not the shared 860px (the
       longer CTA label needs a wider bar) — two small rules there restore that.
     - forgyms: `footer{margin-top:60px}` at desktop widths (pre-existing 4px diff
       from the other four pages; preserved rather than guessed at — see FRONTEND.md).
     - masterskya: `.mnav.open ~ main .mcta{display:none}` (`.mcta` only exists on
       the profile template).
     - every `.wrap` max-width (1160 vs 1240 — page layout, not chrome).
   ================================================================================ */

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:12px var(--pad);max-width:1160px;margin:0 auto;gap:14px}
.logo{display:flex;align-items:center;min-height:44px;gap:13px;text-decoration:none;color:var(--bone)}
.logo .word{font-family:'Anton',sans-serif;font-size:26px;letter-spacing:.05em;line-height:1}
.logo .word em{font-style:normal;color:var(--red)}
.bar-mid{display:none;flex:1;justify-content:center;gap:12px}
/* nav chip — shared by the header nav and the footer link columns */
.bar-mid a,.foot-col a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:9px 22px;font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--ash);text-decoration:none;isolation:isolate;transition:color .22s ease,box-shadow .25s ease}
/* rectangle at rest; the sides lean into a parallelogram on hover/focus (top & bottom
   stay level), with a red underglow. shape morphs on a ::before so the link's own
   focus ring stays unclipped. */
.bar-mid a::before,.foot-col a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--panel);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .3s cubic-bezier(.34,1.1,.5,1),background .22s ease,filter .22s ease}
.bar-mid a:hover,.bar-mid a:focus-visible,.foot-col a:hover,.foot-col a:focus-visible{color:var(--white)}
.bar-mid a:hover::before,.bar-mid a:focus-visible::before,.foot-col a:hover::before,.foot-col a:focus-visible::before{clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);background:var(--red);filter:drop-shadow(0 5px 16px rgba(225,29,36,.55))}
.bar-mid a:active,.foot-col a:active{color:var(--white)}
.bar-mid a:active::before,.foot-col a:active::before{background:var(--red-deep);filter:drop-shadow(0 6px 22px rgba(225,29,36,.75))}
/* you-are-here: the current tab sits in the leaned, filled state at rest (gyms/forgyms/matrecord) */
.bar-mid a[aria-current="page"],.foot-col a[aria-current="page"]{color:var(--bone)}
.bar-mid a[aria-current="page"]::before,.foot-col a[aria-current="page"]::before{clip-path:polygon(15% 0,100% 0,85% 100%,0 100%);background:var(--belt-black)}
.bar-cta{display:none;align-items:center;gap:10px}
.cta-mini{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:12.5px;letter-spacing:.03em;background:var(--cta-bg);color:var(--bone);border:1px solid var(--red-deep);border-radius:10px;padding:11px 16px;cursor:pointer;white-space:nowrap;box-shadow:var(--red-glow);transition:box-shadow .25s ease,transform .1s ease;text-decoration:none}
.cta-mini:hover{box-shadow:var(--red-glow-lg)}
.cta-mini:active{transform:translateY(1px)}
/* the header CTA only fades in once the hero's own form scrolls away — index-only
   (id="bar-list-cta" exists only there); harmless to ship globally since no other
   page emits that id. */
#bar-list-cta{opacity:0;pointer-events:none;transition:opacity .25s ease,box-shadow .25s ease}
#bar-list-cta.show{opacity:1;pointer-events:auto}
@media(min-width:860px){.bar-cta{display:flex} .bar-mid{display:flex}}

/* ---------- mobile nav — the belt menu ---------- */
.nav-burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:46px;height:44px;padding:11px;background:transparent;border:0;border-radius:10px;cursor:pointer}
.nav-burger i{display:block;height:2.5px;border-radius:2px;background:var(--bone);transition:transform .3s cubic-bezier(.34,1.2,.5,1),opacity .2s ease}
/* the middle bar IS the belt's rank bar — red, glowing */
.nav-burger i:nth-child(2){background:var(--red);box-shadow:0 0 9px rgba(225,29,36,.8)}
.nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(min-width:860px){.nav-burger{display:none}}
.mnav{position:fixed;inset:0;z-index:49;background:radial-gradient(680px 420px at 82% 0%,rgba(225,29,36,.16),transparent 62%),rgba(8,8,10,.97);backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;padding:96px 34px 60px}
.mnav[hidden]{display:none}
.mnav-links{display:flex;flex-direction:column;gap:4px}
.mnav .mlink{position:relative;display:block;font-family:'Anton',sans-serif;font-size:clamp(32px,8.6vw,44px);line-height:1.16;text-transform:uppercase;letter-spacing:.015em;color:var(--bone);text-decoration:none;padding:10px 0 10px 40px;opacity:0;transform:translateY(18px)}
.mnav .mlink::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:24px;height:3px;border-radius:2px;background:var(--line);transition:background .2s ease,box-shadow .2s ease}
.mnav .mlink:active::before,.mnav .mlink[aria-current="page"]::before{background:var(--red);box-shadow:0 0 12px rgba(225,29,36,.8)}
.mnav .mlink[aria-current="page"]{color:var(--white)}
.mnav .mnav-cta{margin-top:28px;display:flex;align-items:center;justify-content:center;min-height:54px;font-weight:800;font-size:15px;letter-spacing:.02em;background:var(--cta-bg);color:var(--bone);border:1px solid var(--red-deep);border-radius:13px;text-decoration:none;box-shadow:var(--red-glow-lg);opacity:0;transform:translateY(18px);text-align:center;padding:12px 18px;line-height:1.25}
.mnav.open .mlink,.mnav.open .mnav-cta{animation:mnavIn .5s cubic-bezier(.22,1,.36,1) forwards}
.mnav.open .mlink:nth-child(1){animation-delay:.03s}
.mnav.open .mlink:nth-child(2){animation-delay:.09s}
.mnav.open .mlink:nth-child(3){animation-delay:.15s}
.mnav.open .mlink:nth-child(4){animation-delay:.21s}
.mnav.open .mnav-cta{animation-delay:.3s}
@keyframes mnavIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.mnav .mlink,.mnav .mnav-cta{opacity:1;transform:none}}
/* the menu floor: a black belt wearing its rank bar */
.mnav .mnav-tag{position:absolute;bottom:26px;left:34px;right:34px;display:flex;height:7px;border-radius:4px;overflow:hidden}
.mnav .mnav-tag i{display:block;height:100%}
.mnav .mnav-tag i:nth-child(1){flex:1;background:var(--belt-black)}
.mnav .mnav-tag i:nth-child(2){width:7%;background:var(--white)}
.mnav .mnav-tag i:nth-child(3){width:20%;background:var(--red);box-shadow:0 0 14px rgba(225,29,36,.8)}
.mnav .mnav-tag i:nth-child(4){width:7%;background:var(--white)}
.mnav .mnav-tag i:nth-child(5){flex:0 0 12%;background:var(--belt-black)}
/* logo back-glow — breathes hotter while the page moves */
.logo{position:relative;isolation:isolate}
.logo::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:16px;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(225,29,36,.42),rgba(225,29,36,.10) 52%,transparent 76%);filter:blur(9px);opacity:.5;transition:opacity .45s ease}
header.glow-hot .logo::before{opacity:1}
/* footer "coming soon" item — inert, not a chip */
.foot-col .soon{display:inline-flex;align-items:center;min-height:44px;padding:9px 22px;font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--ash-dim)}

/* ---------- SKILL ACQUISITION nav chip (owner, Aug 5, 2026) — a 4th slot for a product that
   is NOT shipped. Dimmed and tagged rather than hidden: it says what's coming without
   pretending it's live. Points at #skillacq, the coming-later band on the Mat Record page,
   because there is no Skill Acquisition page any more (parked at future/skillacquisition.html).
   Nav chip padding drops 22px -> 15px so four chips clear the 860px breakpoint without
   wrapping; the footer column keeps its original 22px padding (that rule is above, untouched). */
.bar-mid a{padding:9px 15px}
.nsoon{color:var(--ash-dim)}
.ntag{margin-left:7px;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ash-dim);border:1px solid var(--line);border-radius:999px;padding:2px 6px;white-space:nowrap}
.nsoon:hover .ntag,.nsoon:focus-visible .ntag{color:var(--white);border-color:rgba(255,255,255,.5)}
.mnav-links .nsoon .ntag{font-size:11px;padding:3px 9px;vertical-align:.22em}

/* ---------- GYM OWNER LOGIN (O1, Oct 6, 2026) — the invited owner's door, deliberately quiet. Ash text, bone on
   hover/focus, never red: red is the waitlist CTA's. Desktop bar: inside .bar-cta, left of the CTA, only from
   1100px (measured Oct 6: at 1024 it squeezed forgyms' chips — the longest CTA — onto two lines; clean from 1100).
   Below that the link lives in the mobile menu and the footer. ---------- */
.bar-login{display:none;align-items:center;min-height:44px;padding:0 6px;font-weight:700;font-size:12.5px;letter-spacing:.03em;color:var(--ash);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.bar-login:hover,.bar-login:focus-visible{color:var(--bone);text-decoration:underline;text-decoration-color:rgba(244,242,236,.4);text-underline-offset:4px}
@media(min-width:1100px){.bar-login{display:inline-flex}}
.mnav .mnav-login{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ash);text-decoration:underline;text-decoration-color:rgba(154,154,162,.45);text-underline-offset:4px;opacity:0;transform:translateY(18px)}
.mnav .mnav-login:hover,.mnav .mnav-login:focus-visible{color:var(--bone)}
.mnav.open .mnav-login{animation:mnavIn .5s cubic-bezier(.22,1,.36,1) .36s forwards}
@media (prefers-reduced-motion: reduce){.mnav .mnav-login{opacity:1;transform:none}}
/* footer: same chip shape as its column, but the hover lean fills belt-black, not red */
.foot-col a.foot-login:hover::before,.foot-col a.foot-login:focus-visible::before,.foot-col a.foot-login:active::before{background:var(--belt-black);filter:none}

/* ---------- footer — canonical source masterskya.html v7 ---------- */
footer{border-top:1px solid var(--line);margin-top:56px;padding:34px 0 40px}
.foot{display:grid;gap:24px}
.foot-logo{display:flex;align-items:center;gap:11px}
.foot-logo .foot-mark{display:flex}
.foot-brand .word{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.05em}
.foot-brand .word em{font-style:normal;color:var(--red)}
.foot-brand p{color:var(--ash);font-size:14px;line-height:1.65;margin-top:12px;max-width:42ch}
.foot-cols{display:flex;flex-wrap:wrap;gap:28px}
/* chips are inline-flex, so the column has to stack them itself. the contact column nests its
   links in an <address>, which needs the same stacking. */
.foot-col,.foot-col address{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.foot-col h4{font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:6px;padding-left:22px}
.foot-legal{border-top:1px solid var(--line);margin-top:6px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;color:var(--ash-dim);font-size:11px;font-weight:500}
.foot-legal a{color:var(--ash-dim);text-decoration:none}
.foot-legal a:hover{color:var(--ash)}
/* link columns need ~500px to hold three chip stacks on one row; the brand text is capped at
   42ch and never used the extra, so give the width to the columns. */
@media(min-width:760px){.foot{grid-template-columns:1fr 1.2fr}.foot-legal{grid-column:1/-1}}
/* mobile footer layout — Sep 15 2026 — was masterskya-only, now shared (this port). Layout
   only: not one word of the footer changes. On a phone the three link groups stacked into
   seven chip-boxes one per row, each sized to its own text, so the right edge was a staircase
   and the block ran long, at the end of a page. Two columns of plain ash links, labels aligned
   to their own group, tighter margins. The chip's angled hover fill is a nav treatment for a
   horizontal bar; in a vertical list it was drawing seven boxes nobody needed. 44px targets stay. */
@media(max-width:759px){
  footer{margin-top:40px;padding:28px 0 32px}
  .foot{gap:20px}
  .foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
  .foot-col,.foot-col address{gap:0}
  .foot-col h4{padding-left:0;margin-bottom:2px}
  .foot-col a,.foot-col .soon{padding:9px 0;font-size:13px;font-weight:600;color:var(--ash)}
  .foot-col a::before{content:none}
  .foot-col a:hover,.foot-col a:focus-visible{color:var(--bone)}
  .foot-brand p{margin-top:10px}
  .foot-legal{margin-top:0;padding-top:16px}
}
/* Round-4 QA fix (masterskya, Sep 15 2026): three footer columns in a 2-col grid left a dead
   cell — EXPLORE spans both rows, the two short columns stack. Footer-only half of that pass;
   the rest (.cchev/.coach.has-role) is masterskya's own instructor-row markup and stays there. */
@media(max-width:759px){
  .foot-cols{align-items:start}
  .foot-col:first-child{grid-row:1 / span 2}
}

/* ---------- SAFE AREAS (T5 iOS readiness, Oct 7, 2026) — every page now asks for viewport-fit=cover, so the
   chrome's own edges keep clear of the notch / Dynamic Island / home indicator in the iPhone app, a home-screen
   install and landscape Safari. The --rr-sa* tokens come from shared/rr-platform.css (0 on desktop, and 0 if
   that file is missing — the fallbacks below), so nothing moves on a desktop browser. The sticky header gets
   its top inset from rr-platform.css (`body > header`), which also covers the pages with their own header.
   Appended after everything else on purpose: same selectors as above, so these win by order. ---------- */
.mnav{padding:calc(96px + var(--rr-sat,0px)) calc(34px + var(--rr-sar,0px)) calc(60px + var(--rr-sab,0px)) calc(34px + var(--rr-sal,0px))}
.mnav .mnav-tag{bottom:calc(26px + var(--rr-sab,0px));left:calc(34px + var(--rr-sal,0px));right:calc(34px + var(--rr-sar,0px))}
footer{padding-bottom:calc(40px + var(--rr-sab,0px))}
@media(max-width:759px){footer{padding-bottom:calc(32px + var(--rr-sab,0px))}}