/*
  bmsr-tokens.css -- BMSR One Frame shared tokens + frame components.
  Locked spec: D-TBD-FRAME-1 (BMSR_DesignDecisions.md, Section 2, filed under D-2663).
  Canonical home: bmsr-clock-tools/bmsr-frame/. Vendored verbatim into
  bmsr-dashboard-tools, bmsr-website-tools, and gpc-client-portal's /bmsr/ path
  (Sessions 2-4 of the BMSR One Frame plan, P-26091512) -- do not fork this file
  per repo; fix drift at the source and re-vendor.

  Tailwind surfaces (Dashboard, KB) generate their tailwind.config color scale
  from the --bmsr-* custom properties below rather than hand-carrying a second
  copy of these hex values.

  WCAG 2.2 AA: every text-on-background pair used by the frame components in
  this file was measured (relative-luminance contrast ratio) and, where the
  spec's first-pass color read below 4.5:1 for normal-size text, replaced with
  the nearest token step that clears it. Three deliberate deviations from the
  design doc's literal color picks, all contrast-driven:
    - Sign-out button text is navy-950 (not white) on orange-500:
      white-on-orange-500 measures 3.04:1 (fails 4.5:1 normal-text AA);
      navy-950-on-orange-500 measures 5.43:1. The shift-offer pill uses the
      same pair.
    - Back link and footer text use navy-500, not navy-400/navy-300:
      navy-400-on-page-bg measures 3.81:1, navy-300-on-page-bg measures 2.18:1
      (both fail); navy-500-on-page-bg measures 5.76:1.
    - Modal subtitle and close (X) use navy-500, not navy-400:
      navy-400-on-white measures 4.25:1 (fails); navy-500-on-white measures 6.43:1.
  Everything else (wordmark white, ".OS" navy-300, surface label orange-400,
  all on the navy-700 bar) already cleared 4.5:1 as specced and is unchanged.

  AMENDED 260915 (same session, D1 in D-TBD-FRAME-1): added an explicit
  "Home" control (.bmsr-hub-link) to every header, not gated by role
  -- the brand-block-as-Home-link stays but is no longer the only Home
  control.

  AMENDED 260915 (P-26091560) -- ACCOUNT MENU replaces the bar controls and the
  phone menu sheet. The bar carries only the brand, the surface label and the
  toggle; Home, the signed-in role and Sign out moved into .bmsr-menu,
  one anchored ~215px dropdown at EVERY width. What this deleted: the
  full-width sheet that pushed the page down, the 760/761px control fork
  (including the force-the-sheet-shut rule above the breakpoint), the
  .bmsr-hub-link--sheet variant, the white-on-white focus-ring fix (every menu
  control now sits on one white background, so one navy ring covers them), the
  identity PILL (the role is information, so it is text), and orange as the
  colour of signing out. New contrast pairs, all on the white panel and all
  measured: menu rows navy-700 (11.27:1), row icons / the "My Account" group
  label / the "Signed in" line navy-500 (6.43:1). navy-400 was rejected for
  each -- it measures 4.25:1 on white and fails AA for normal-size text.
*/

:root{
  /* BMSR brand scale -- GPCDS_DesignSystem_TruthFile.md BMSR palette */
  --bmsr-navy-950:#0D1F38;
  --bmsr-navy-900:#122A4A;
  --bmsr-navy-800:#163358;
  --bmsr-navy-700:#1B3A6B;
  --bmsr-navy-600:#24507E;
  --bmsr-navy-500:#2D6291;
  --bmsr-navy-400:#4A80A8;
  --bmsr-navy-300:#7FACC8;
  --bmsr-navy-200:#B5D1E5;
  --bmsr-navy-100:#DAE8F2;
  --bmsr-navy-50:#EEF3FA;

  --bmsr-orange-600:#D4622B;
  --bmsr-orange-500:#E8723A;
  --bmsr-orange-400:#EE8F5E;
  --bmsr-orange-300:#F4B08A;
  --bmsr-orange-200:#F8D0B5;
  --bmsr-orange-100:#FFF0E6;
  --bmsr-orange-50:#FFF8F3;

  --bmsr-pto-green:#166534;
  --bmsr-pto-green-bg:#DCFCE7;
  --bmsr-role-gray:#F0EEE8;
  --bmsr-role-gray-2:#FAFAF6;

  --bmsr-bg:var(--bmsr-navy-50);
  --bmsr-card:#FFFFFF;

  /* shadows -- navy-tinted, never pure black/gray */
  --bmsr-shadow-soft:0 1px 3px rgba(13,31,56,.08);
  --bmsr-shadow-mid:0 2px 10px rgba(27,58,107,.10);
  --bmsr-shadow-bar:0 2px 8px rgba(27,58,107,.20);
  --bmsr-shadow-modal:0 12px 32px rgba(13,31,56,.28);

  /* radius ladder */
  --bmsr-radius-tight:6px;
  --bmsr-radius-card:8px;
  --bmsr-radius-card-brand:20px;   /* BMSR signature -- larger than structural default */
  --bmsr-radius-modal:16px;
  --bmsr-radius-pill:999px;

  /* type ramp */
  --bmsr-font:'Manrope',system-ui,sans-serif;
  --bmsr-header-h:56px; /* published bar height -- stack sticky rows under it with top:var(--bmsr-header-h) */
  --bmsr-fs-wordmark:17px;
  --bmsr-fs-surface-label:11px;
  --bmsr-fs-identity:13px;
  --bmsr-fs-back:14px;
  --bmsr-fs-footer:11px;
  --bmsr-fs-modal-title:15px;
  --bmsr-fs-modal-subtitle:12px;

  --bmsr-frame-breakpoint:760px;
}

/* ============================= HEADER ============================= */

/* position:relative makes the host the containing block for the absolutely-positioned
   account menu, so the panel hangs off the bar on non-sticky surfaces too. The sticky
   rule below out-specifies it and is itself a positioned ancestor, so both cases anchor
   to the host -- which is exactly the bar's height, the panel being out of flow. */
bmsr-header{ display:block; font-family:var(--bmsr-font); position:relative; }
/* The bundle's sizing contract (56px bar, 48px child cap, full-width sheet controls) was only
   true under a host `*{box-sizing:border-box}` reset -- lab.css and the three pages have one,
   the GroupMe templates have `*{box-sizing:border-box}` too, but the bundle must not depend on
   it (pr-adversary A2-F1, 260915). Own the sizing model for everything the frame renders. */
bmsr-header, bmsr-header *, bmsr-footer, bmsr-footer *,
.bmsr-modal-backdrop, .bmsr-modal-backdrop *{ box-sizing:border-box; }

/* The bar is EXACTLY --bmsr-header-h tall so consumers can stack their own sticky rows under it
   with `top: var(--bmsr-header-h)`. Arithmetic (border-box): the tallest child is .bmsr-brand at
   44px touch-target + 2x2px padding = 48px; + 2x4px bar padding = 56px. It was content-box 56px
   + 20px padding = 76px, then 48 + 16 = 64px -- both slid Schedule's toolbar under the bar
   (pr-adversary B1-F3, A-r2-F1, 260915). Any child taller than 48px breaks this contract. */
.bmsr-header{
  background:var(--bmsr-navy-700);
  color:#FFFFFF;
  box-sizing:border-box;
  height:var(--bmsr-header-h);
  display:flex;
  align-items:center;
  gap:14px;
  padding:4px 16px;
  box-shadow:var(--bmsr-shadow-bar);
}
/* Sticky lives on the HOST element, not the inner .bmsr-header: the host is a display:block
   box exactly the bar's own height, so position:sticky on the inner div had nothing to stick
   within and the bar scrolled away (pr-adversary A-F1, 260915). The inner class is kept as a
   hook only. */
bmsr-header[sticky]{ position:sticky; top:0; z-index:40; }

.bmsr-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  border-radius:10px;
  padding:2px 8px 2px 2px;
  margin-left:-2px;
  min-height:44px;
}
/* Hover/focus DARKENS the brand chip rather than lightening it: a white tint under the .OS
   suffix (navy-300) and the surface label (orange-400) pushed both below 4.5:1 on hover
   (pr-adversary A2-F2, 260915); a black tint only raises their contrast. */
.bmsr-brand:hover, .bmsr-brand:focus-visible{ background:rgba(0,0,0,.18); }
.bmsr-brand:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }

.bmsr-brand-mark{
  flex:none;
  width:40px;
  height:40px;
  border-radius:8px;
  background:#FFFFFF;
  display:grid;
  place-items:center;
  padding:3px;
}
.bmsr-brand-mark img{ width:100%; height:100%; object-fit:contain; display:block; }

.bmsr-wordmark{
  font-size:var(--bmsr-fs-wordmark);
  font-weight:800;
  white-space:nowrap;
  line-height:1;
}
.bmsr-wordmark .bmsr-os{ color:var(--bmsr-navy-300); font-weight:800; } /* 4.63:1 on navy-700, AA pass */

.bmsr-surface-label{
  font-size:var(--bmsr-fs-surface-label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--bmsr-orange-400); /* 4.68:1 on navy-700, AA pass */
  white-space:nowrap;
  padding-left:2px;
  border-left:1px solid rgba(255,255,255,.35);
  margin-left:2px;
  padding-left:10px;
}

.bmsr-offer-pill{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-height:44px;
  padding:8px 12px;
  /* Solid act-now orange; navy-950 text, as the sign-out deviation above (5.43:1). */
  background:var(--bmsr-orange-500);
  color:var(--bmsr-navy-950);
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  border-radius:var(--bmsr-radius-pill);
  white-space:nowrap;
  text-decoration:none;
}
.bmsr-offer-pill:hover{ background:var(--bmsr-orange-400); }
.bmsr-offer-pill:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }
.bmsr-offer-pill + .bmsr-menu-toggle{ margin-left:0; }

/* ---------------------------- ACCOUNT MENU (P-26091560) ----------------------------
   One anchored dropdown at every width. The toggle is the only control left in the bar;
   it loses the bordered square that made it read as an unstyled button and becomes a
   borderless icon that tints on hover/open. 44px target, inside the 48px child cap that
   keeps the bar exactly --bmsr-header-h tall. */
.bmsr-menu-toggle{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--bmsr-font);
  background:transparent;
  border:none;
  color:#FFFFFF;
  border-radius:var(--bmsr-radius-tight);
  width:44px;
  height:44px;
  padding:0;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  flex:none;
}
.bmsr-menu-toggle:hover{ background:rgba(255,255,255,.12); }
.bmsr-menu-toggle[aria-expanded="true"]{ background:rgba(255,255,255,.14); }
.bmsr-menu-toggle:focus-visible{ outline:2px solid #FFFFFF; outline-offset:2px; }

/* The panel FLOATS: position:absolute means it contributes nothing to the host's height,
   so opening it can never push page content down (the defect that made the old phone
   sheet shove the whole page). Anchored to the host's bottom-right, it is the same
   ~215px panel on a phone as on a desktop -- never full-width. z-index clears the
   frame's own sticky bar and any page content stacking below it. */
.bmsr-menu{
  display:none;
  position:absolute;
  top:calc(100% - 4px);
  right:16px;              /* flush with the bar's content edge, under the toggle */
  width:215px;
  max-width:calc(100vw - 32px);
  background:var(--bmsr-card);
  color:var(--bmsr-navy-950);
  border:1px solid var(--bmsr-navy-100);
  border-radius:11px;
  box-shadow:0 10px 26px rgba(13,31,56,.22);
  padding:6px;
  z-index:50;
}
.bmsr-menu[data-open="true"]{ display:block; }

/* Every row -- the Home link and the Sign out button -- is the same quiet
   navy row on white (11.27:1). Sign out is no longer a filled orange slab: orange is
   the brand's act-now colour and signing out is not that. */
.bmsr-menu-row{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:40px;
  padding:0 8px;
  background:none;
  border:none;
  border-radius:7px;
  font-family:var(--bmsr-font);
  font-size:13px;
  font-weight:700;
  color:var(--bmsr-navy-700); /* 11.27:1 on white */
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.bmsr-menu-row:hover{ background:var(--bmsr-navy-50); }
/* One navy ring for the whole panel: the controls now share a single white background,
   which retires the per-variant white-on-white fix the old split needed. */
.bmsr-menu-row:focus-visible{ outline:2px solid var(--bmsr-navy-600); outline-offset:-2px; }
.bmsr-menu-ic{
  width:15px;
  text-align:center;
  color:var(--bmsr-navy-500); /* 6.43:1 on white -- navy-400 measures 4.25:1 and fails */
  font-size:13px;
  flex:none;
}

.bmsr-menu-rule{ height:1px; background:var(--bmsr-navy-100); margin:4px 2px; }

.bmsr-menu-group{
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bmsr-navy-500); /* 6.43:1 on white */
  padding:8px 8px 2px;
}

/* The role is a FACT about the signed-in staffer, not a control -- so it is plain text.
   It was a bordered pill sitting beside an identically-bordered pill that WAS a button,
   which is the specific thing that made the bar look unconsidered. */
.bmsr-identity{
  display:block;
  padding:1px 8px 5px;
  font-size:12px;
  font-weight:700;
  color:var(--bmsr-navy-500); /* 6.43:1 on white */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Phone shell: the bar tightens, but the menu does NOT change -- that is the point of
   one hamburger at every width. No control fork, no duplicate markup, nothing to force
   shut when a window crosses the breakpoint. */
@media (max-width: 760px){
  .bmsr-header{ gap:6px; padding-inline:10px; }
  .bmsr-brand{ gap:8px; padding-right:2px; }
  .bmsr-wordmark{ font-size:15px; }
  .bmsr-surface-label{ display:none; }
  .bmsr-offer-pill{ font-size:12px; padding-inline:8px; }
}

/* ============================= BACK LINK ============================= */

.bmsr-back{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--bmsr-font);
  font-size:var(--bmsr-fs-back);
  font-weight:600;
  color:var(--bmsr-navy-500); /* 5.76:1 on --bmsr-bg, 6.43:1 on white -- fixed from navy-400 (3.81:1, fails AA) */
  text-decoration:none;
  background:none;
  border:none;
  padding:6px 2px;
  cursor:pointer;
}
.bmsr-back:hover{ color:var(--bmsr-navy-700); text-decoration:underline; }
.bmsr-back:focus-visible{ outline:2px solid var(--bmsr-navy-500); outline-offset:2px; border-radius:4px; }

/* ============================= FOOTER ============================= */

bmsr-footer{ display:block; font-family:var(--bmsr-font); }

.bmsr-footer{
  padding:10px 16px;
  font-size:var(--bmsr-fs-footer);
  color:var(--bmsr-navy-500); /* 5.76:1 on --bmsr-bg, 6.43:1 on white -- fixed from navy-300 (2.18:1, fails AA) */
  text-align:center;
  background:transparent;
}

/* ============================= MODAL SHELL ============================= */

.bmsr-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(13,31,56,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:200;
}
/* display:flex above out-specifies the UA's [hidden]{display:none}, so a backdrop toggled with
   the hidden property stayed visible. Was lab.css-only; belongs in the shipped bundle
   (pr-adversary A-F2, 260915). Inline style="display:none" toggling (index.html) is unaffected. */
.bmsr-modal-backdrop[hidden]{ display:none; }
.bmsr-modal{
  background:var(--bmsr-card);
  border-radius:var(--bmsr-radius-modal);
  box-shadow:var(--bmsr-shadow-modal);
  max-width:440px;
  width:100%;
  max-height:88vh;
  overflow:auto;
}
.bmsr-modal-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid var(--bmsr-navy-100);
}
.bmsr-modal-header-text{ flex:1 1 auto; min-width:0; }
.bmsr-modal-title{
  font-size:var(--bmsr-fs-modal-title);
  font-weight:700;
  color:var(--bmsr-navy-950);
  margin:0;
}
.bmsr-modal-subtitle{
  font-size:var(--bmsr-fs-modal-subtitle);
  color:var(--bmsr-navy-500); /* 6.43:1 on white -- fixed from navy-400 (4.25:1, fails AA) */
  margin:4px 0 0;
}
.bmsr-modal-close{
  flex:none;
  background:none;
  border:none;
  font-size:22px;
  line-height:1;
  color:var(--bmsr-navy-500); /* 6.43:1 on white -- fixed from the slate/gray idiom seen in shipped modals */
  cursor:pointer;
  /* 44px touch target (team review 260915); the glyph stays 22px, the hit box grows around it
     and pulls into the header's padding so the visual position is unchanged. */
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  padding:0;
  margin:-11px -11px -11px 0;
}
.bmsr-modal-close:hover{ color:var(--bmsr-navy-700); }
.bmsr-modal-close:focus-visible{ outline:2px solid var(--bmsr-navy-500); outline-offset:2px; border-radius:4px; }
.bmsr-modal-body{ padding:16px 18px; }

/* ============================= PAGE / CONTENT SHELL ============================= */

.bmsr-page{
  background:var(--bmsr-bg);
  color:var(--bmsr-navy-950);
  font-family:var(--bmsr-font);
}
.bmsr-content{
  max-width:440px;
  margin:0 auto;
  padding:16px;
}
@media (min-width: 761px){
  .bmsr-content{ max-width:560px; }
}
.bmsr-card{
  background:var(--bmsr-card);
  border-radius:var(--bmsr-radius-card-brand);
  padding:16px;
  box-shadow:var(--bmsr-shadow-soft);
}