@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@800&display=swap");
/* STAGE-4 brand: Strawberry Red on deep black (Brand Lab pick L8 · B10 · C19) */
:root{
  --brand:#D4153B; --brand-ink:#B8102F; --brand-wash:rgba(212,21,59,.09); --brand-edge:rgba(212,21,59,.32);
  --logo-fade:.06;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#F2294F; --brand-ink:#FF5A76; --brand-wash:rgba(242,41,79,.12); --brand-edge:rgba(242,41,79,.36);
    --ground:#000; --logo-fade:.09;
  }
}
:root[data-theme="dark"]{
  --brand:#F2294F; --brand-ink:#FF5A76; --brand-wash:rgba(242,41,79,.12); --brand-edge:rgba(242,41,79,.36);
  --ground:#000; --logo-fade:.09;
}

/* the name in the app bar and on the sign-in card: STAGE - IV */
.wordmark{font-family:"Oxanium", var(--disp, system-ui), sans-serif; font-weight:800; letter-spacing:.07em; word-spacing:-.05em}
.wordmark .wm-iv{color:var(--brand)}

/* every page sits on the home page's background: a red glow and a big faded team logo */
body::before, body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none}
body::before{
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    linear-gradient(var(--tex, rgba(255,255,255,.04)) 1px, transparent 1px),
    linear-gradient(90deg, var(--tex, rgba(255,255,255,.04)) 1px, transparent 1px);
  background-size:auto, 64px 64px, 64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 20%, transparent 78%);
          mask-image:radial-gradient(ellipse at 50% 50%, #000 20%, transparent 78%);
}
body::after{
  background:url("/img/brand/logo.svg") 50% 54% / min(120vmin, 1100px) no-repeat;
  opacity:var(--logo-fade); filter:grayscale(.35) blur(1.5px); transform:rotate(-8deg);
  -webkit-mask-image:radial-gradient(circle at 50% 54%, #000 30%, transparent 62%);
          mask-image:radial-gradient(circle at 50% 54%, #000 30%, transparent 62%);
}

/* STAGE-4 — the page bar.
   One strip under the app bar on every page, built the same way as the
   playbook's map row: full width, sticky, tiles centred, tools on the right.
   Uses the colour tokens each page already defines on :root. */

.pagebar{
  position:sticky; top:calc(var(--appbar-h, 66px) + env(safe-area-inset-top,0px)); z-index:28;
  border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter:saturate(1.5) blur(12px); -webkit-backdrop-filter:saturate(1.5) blur(12px);
}
.pagebar-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding-block:8px}
.pb-left{grid-column:1; justify-self:start; display:flex; align-items:center; gap:8px; min-width:0}
.pb-tiles{grid-column:2; display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; min-width:0}
.pb-tiles::-webkit-scrollbar{display:none}
.pb-right{grid-column:3; justify-self:end; display:flex; align-items:center; gap:8px; min-width:0}
@media (max-width:820px){
  .pagebar-in{grid-template-columns:minmax(0,1fr) auto; gap:8px}
  .pb-left{display:none}
  .pb-tiles{grid-column:1; justify-self:stretch}
  .pb-right{grid-column:2}
}

/* a shelf item: an icon with its name beside it — no box around it.
   Page links, tabs, outside links and the playbook's map tabs all use this look. */
.pb-tile{
  appearance:none; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  text-decoration:none; color:var(--ink-3); text-align:left;
  border:none; border-radius:3px; background:none;
  padding:7px 10px; position:relative;
  transition:color .12s ease;
}
.pb-tile:hover{color:var(--ink)}
.pb-tile:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.pb-tile img{width:28px; height:28px; border-radius:6px; display:block; flex:0 0 auto; opacity:.8; transition:opacity .12s ease}
.pb-tile:hover img{opacity:1}
.pb-tile > span:not(.ext){display:flex; flex-direction:column; line-height:1.15; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap}
.pb-tile small{font-family:var(--sans); font-weight:400; font-size:11.5px; color:var(--ink-3); letter-spacing:0; text-transform:none}
.pb-tile .ext{font-size:12px; color:var(--ink-3); margin-left:-2px}
.pb-tile:hover .ext{color:var(--ink)}
/* the page (or tab) you are on: full color, with a red line under it */
.pb-tile[aria-current="page"], .pb-tile[aria-selected="true"]{color:var(--ink)}
.pb-tile[aria-current="page"] img, .pb-tile[aria-selected="true"] img{opacity:1}
.pb-tile[aria-current="page"]::after, .pb-tile[aria-selected="true"]::after{
  content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px; border-radius:2px; background:var(--brand);
}
.pb-sep{width:1px; height:26px; background:var(--rule); flex:0 0 auto; margin-inline:2px}
@media (max-width:600px){
  .pb-tile{padding:6px 8px; gap:7px}
  .pb-tile img{width:24px; height:24px}
  .pb-tile > span:not(.ext){font-size:13px}
  .pb-tile small{display:none}
  .pb-right .btn .lbl{display:none}
}

/* not signed in: a Log in button sits top right where the name goes */
.loginbtn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; margin-right:14px;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 16px; border-radius:3px; border:1px solid var(--brand); background:var(--brand); color:#fff;
}
.loginbtn:hover{background:var(--brand-ink); border-color:var(--brand-ink); color:#fff}
.loginbtn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.whoami.guest{margin-right:0}

/* the socials strip at the bottom of every page (built by app/chrome.js from SOCIALS in app/config.js) */
.socials{margin-top:8px; padding:22px 20px calc(26px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--rule)}
.socials nav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px}
.socials a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink-3);
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 12px; border-radius:3px; transition:color .12s ease;
}
.socials a:hover{color:var(--brand-ink)}
.socials a:focus-visible{outline:2px solid var(--ct); outline-offset:1px}
.socials svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}