/* ═══════════════════════════════════════════════════════════
   BEING ME - SHARED RESPONSIVE LAYER
   being-me-responsive.css  v2   (T5: one button set and type scale, below)

   Linked LAST in <head>, after each page's own <style> block, so it
   overrides page CSS without needing !important on every rule.

     <link rel="stylesheet" href="being-me-responsive.css">

   Every app page carries the same sidebar markup:
     <nav class="leftnav" id="bm-sidebar">
   and an outer flex shell (#app on some pages, an inline-styled div on
   others). Both are handled here so pages do not each grow their own
   breakpoint system.

   Requires two elements in the page and one script (see bm-mobile.js
   section at the foot of this file for the markup contract):
     <div class="bm-scrim" id="bm-scrim" onclick="bmToggleSidebar(false)"></div>
     <button class="bm-burger" id="bm-burger" onclick="bmToggleSidebar()">

   ── Canonical topbar title ──
   Three pages each declared their own .topbar-title at 18px, 16px and
   17px, so the header changed size as you moved between them. The rule
   now lives here only, and the per-page copies were deleted. If a page
   needs a different header size, that is a design decision worth making
   deliberately rather than by drift.

   PRINCIPLES
   - 16px minimum on every input. Below that iOS Safari zooms on focus
     and never zooms back, which reads to a member as a broken page.
   - 100dvh, never 100vh. On iOS the toolbar overlaps the bottom of a
     100vh element, hiding primary actions.
   - 44px minimum touch target on anything a member must hit.
   - Safe-area insets at the bottom, for the home indicator.
   ═══════════════════════════════════════════════════════════ */

/* ── CANONICAL PAGE HEADER ──────────────────────────────────────────
   Every app page carries the same top line: burger, title, action.
   Modelled on the My Self page.

   A three-column grid rather than flex + space-between, because the
   title has to sit dead centre regardless of how wide the action slot
   is - "Save" and "+ New Goal" are very different widths, and with
   flex the title drifts with them.

   The action slot may be empty. Pages without a primary action leave it
   so; the grid keeps the title centred anyway. Inventing a create button
   for a page that has nothing to create would be a fake affordance.

   The page hero - H1, subtitle, quotes - stays in the body below. Where
   a body H1 simply restated the page name it was removed, since the
   topbar now says it once. Values keeps its H1 because that names the
   tab, not the page.
   ──────────────────────────────────────────────────────────────────── */
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;padding:10px 24px;
  border-bottom:1px solid var(--border);background:var(--bg);
  flex-shrink:0;z-index:50;
}
.topbar > .bm-burger{justify-self:start}
.topbar-title{
  grid-column:2;justify-self:center;text-align:center;
  font-family:var(--serif);
  font-size:21px;font-weight:700;color:var(--text);
  line-height:1.2;white-space:nowrap;
}
.topbar-right{
  grid-column:3;justify-self:end;
  display:flex;align-items:center;gap:8px;min-width:0;
}

/* ── Always present, hidden until needed ───────────────────── */
.bm-burger{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:42px;height:42px;padding:10px;background:none;border:none;
  cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.bm-burger span{
  display:block;height:1.6px;background:var(--gold-fill,#d4a843);
  border-radius:2px;transition:transform .25s,opacity .25s;
}
.bm-scrim{display:none}

/* ═══════════════════════════════════════════
   TABLET - 901px to 1100px
   Sidebar narrows rather than disappearing; there is still room.
═══════════════════════════════════════════ */
@media(min-width:901px) and (max-width:1100px){
  .leftnav{width:200px}
  .why-sidebar{width:172px;padding:16px 11px}
  .why-main{padding:20px 18px 70px}
}

/* ═══════════════════════════════════════════
   PHONE - 900px and below
═══════════════════════════════════════════ */
@media(max-width:900px){

  html,body{overflow-x:hidden;-webkit-text-size-adjust:100%}

  /* ── Shell ── */
  #app,
  .bm-shell{height:100dvh !important;overflow:hidden}

  /* ── Sidebar becomes an off-canvas drawer ── */
  /* The phone tab bar hides while the drawer is open (body.bm-drawer-open,
     set by being-me-mobile.js). An earlier fix raised this z-index above
     the bar instead; it could not work, because the drawer sits inside
     .app, which is its own stacking context at z-index:1. The z-index
     here only orders the drawer against the scrim.
     The footer clears the home indicator via the bottom padding.
     The shadow is only drawn while open. A drawer parked off-screen at
     translateX(-100%) still casts its shadow, so the old 48px shadow at
     70% black bled onto the left edge of every page on a phone. That
     was hard to see in dark and a dark smear in light. Open, the scrim
     does most of the separating, so the shadow can be light. */
  .leftnav{
    position:fixed;top:0;left:0;bottom:0;
    width:min(278px,84vw);z-index:400;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s;
    box-shadow:none;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .leftnav.bm-open{transform:translateX(0);box-shadow:0 0 32px rgba(0,0,0,.28)}

  .bm-scrim{
    display:block;position:fixed;inset:0;
    background:rgba(0,0,0,.6);z-index:399;
    opacity:0;pointer-events:none;transition:opacity .28s;
  }
  .bm-scrim.bm-open{opacity:1;pointer-events:auto}

  .bm-burger{display:flex}
  .bm-burger.bm-open span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
  .bm-burger.bm-open span:nth-child(2){opacity:0}
  .bm-burger.bm-open span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

  /* Nav rows are the primary target in the drawer: give them room. */
  .bm-nav-item,.bm-nav-parent,.bm-nav-sub{min-height:44px;font-size:14px}
  .bm-nav-sub{padding-top:10px;padding-bottom:10px}

  /* ── Topbar ── */
  .topbar{
    padding:10px 12px;gap:9px;
    padding-top:calc(10px + env(safe-area-inset-top));
  }
  .topbar-title{font-size:18px;overflow:hidden;
    text-overflow:ellipsis;min-width:0}
  .topbar-right{gap:6px;flex-shrink:0}
  .btn-sm{padding:8px 10px;font-size:11px;min-height:38px}
  .admin-btn{display:none}

  /* ── Inputs: 16px floor stops iOS zoom-on-focus ── */
  input,textarea,select,
  .finput,.ftextarea,.rta,.ch-inp{font-size:16px !important}
  .finput{padding:11px 13px}
  .ftextarea{min-height:88px}

  /* ── Buttons ── */
  .btn{min-height:44px;padding:0 16px}
  .btn-gold,.btn-teal{width:100%;justify-content:center}

  /* ── Two-column inner layouts collapse ── */
  .main-wrap{min-width:0}
  .view{overflow-y:auto;height:auto;min-height:0}

  .why-sidebar{
    width:100%;flex-shrink:0;border-right:none;
    border-top:1px solid var(--border);border-bottom:none;
    padding:14px 15px calc(18px + env(safe-area-inset-bottom));
    max-height:none;overflow:visible;
  }
  .why-main{
    flex:0 0 auto;width:100%;overflow:visible;
    padding:18px 15px 24px;
  }

  /* The Roles and Me & Why tabs put .why-sidebar and .why-main
     side by side as direct children of .view, which is display:flex.
     Without this they stay in a row and the main column is crushed to
     a vertical sliver of one-letter-per-line text. */
  .view.on{flex-direction:column;height:100%;min-height:0}

  /* Reference material goes BELOW the work. A member opening Roles on a
     phone should land on the task, not scroll past a values recap to
     reach it. */
  .why-main{order:1}
  .why-sidebar{order:2}

  /* ── Value grids ── */
  .vgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:5px}
  .vchip{padding:10px 10px;font-size:12.5px;min-height:40px}
  .cat-pills{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:3px}
  .cat-pills::-webkit-scrollbar{display:none}
  .cat-pills>*{flex:0 0 auto}
  .tray-chip{min-height:34px;display:inline-flex;align-items:center}

  /* Role pills are a primary target and were the lowest-contrast
     element on the page in Safari. */
  .role-chip{min-height:42px;font-size:13.5px;padding:10px 15px}

  /* Phase bars scroll rather than crush. */
  .vp-bars{overflow-x:auto;scrollbar-width:none}
  .vp-bars::-webkit-scrollbar{display:none}

  /* ── Goals and Aspirations: main + right rail ──
     .highlights-layout is display:flex and holds the content column
     beside a 280-300px rail. On a phone that leaves the goal cards
     roughly 90px wide - the "run 10km in under my age" title wrapping
     one word per line. Stack, and put the rail below the work. */
  .highlights-layout,
  .hl-body{flex-direction:column;overflow:visible;min-height:0}
  .highlights-content,
  .hl-main{order:1;overflow:visible;padding:18px 15px;width:100%;min-width:0}
  .hl-view{overflow:visible}
  .hl-add-bar{width:100%}
  .hl-filter-bar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding:10px 15px}
  .hl-filter-bar::-webkit-scrollbar{display:none}
  .hl-filter-bar>*{flex:0 0 auto}
  .hl-hero{padding:18px 15px 14px}
  .highlights-sidebar,
  .hl-sidebar{
    order:2;width:100%;border-left:none;
    border-top:1px solid var(--border);
    padding:16px 15px calc(20px + env(safe-area-inset-bottom));
    overflow:visible;
  }

  /* The page header stacks so the title is not squeezed by the action. */
  .page-header{
    padding:16px 15px 12px;flex-wrap:wrap;gap:10px;
    align-items:center;
  }
  .page-title{font-size:clamp(24px,7vw,32px);line-height:1.15}
  .page-sub{font-size:13px;width:100%;order:3}
  .page-actions{margin-left:auto}

  .filter-bar{padding:10px 15px;gap:6px}
  .filter-pill{font-size:12px;padding:7px 11px;min-height:36px;
    display:inline-flex;align-items:center}

  /* Goal cards need the full width to be readable at all. */
  .goal-card,.hl-card{width:100%;min-width:0}

  /* ── Cards ── */
  .core-card,.role-card,.prompt-card,.pib{padding:13px 14px}
  .count-row{flex-wrap:wrap;gap:8px}

  /* ── Tabs ── */
  .stabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .stabs::-webkit-scrollbar{display:none}
  .stabs>*{flex:0 0 auto;min-height:42px}

  /* ── Sticky footers clear the home indicator ── */
  .bnav,.sticky-actions,.view-actions{
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }

  /* ── Toast sits above the drawer, clear of the indicator ── */
  .toast{
    left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));
    width:auto;z-index:500;text-align:center;
  }
}

/* ═══════════════════════════════════════════
   SMALL PHONE - 420px and below
═══════════════════════════════════════════ */
@media(max-width:420px){
  .vgrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .vchip{font-size:12px}
  .topbar-title{font-size:17px}
  .why-main{padding:16px 12px 20px}
}

/* ═══════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .leftnav,.bm-scrim,.bm-burger span{transition:none}
}

/* ═══════════════════════════════════════════
   COACH ACCESS
   The coach toggle lives in the sidebar footer, which on a phone is an
   off-canvas drawer - two taps away and invisible until you go looking.
   A floating button used to sit here to fix that; the phone tab bar in
   being-me-nav.js now carries the coach in its centre permanently, so
   the button and its styles are gone rather than left as a second way
   in. The coach panel's own phone rules live with the panel in
   being-me-shell.js, because vision board did not link this file and
   the rules never reached it.
═══════════════════════════════════════════ */

/* Keyboard focus must stay visible once targets are enlarged. */
.bm-burger:focus-visible,
.leftnav a:focus-visible,
.bm-nav-item:focus-visible{
  outline:2px solid var(--gold,#d4a843);outline-offset:2px;border-radius:8px;
}

/* ── ONE TYPEFACE, UPRIGHT (Tideline T2, 18 Oct 2026) ─────────
   Instrument Sans has no italic, and Tideline uses none (Phase 5:
   at most one italic on any screen; none in the boards). <em> and
   friends keep their meaning for screen readers and stand upright;
   where a page colours its <em>, the colour carries the emphasis. */
em, i, cite, dfn, address { font-style: normal; }
/* Form controls do not inherit the page font by default, so a button
   (the check-in close, for one) fell back to the system face (T5). */
button, input, select, textarea { font-family: inherit; }

/* ═══════════════════════════════════════════
   ONE BUTTON SET AND ONE TYPE SCALE (Tideline T5, 18 Oct 2026)

   The tokens are in being-me-theme.css (COMPONENTS AND TYPE). This
   is the one place they are applied. Pages grew their own button
   classes over two years (.btn-gold, .btn-primary, .tb-btn.gold,
   .rc-btn.primary, .btn-prim ...); rather than rename hundreds of
   buttons in markup and scripts, each name is listed here against
   the shared look. Because this file is linked last, a page's own
   colour for these names no longer decides what a member sees.
   New markup uses .bm-btn with -primary, -secondary or -quiet.

   tests/verify-contrast.py measures the result on every page.
═══════════════════════════════════════════ */

/* Shape: every button is a pill. */
.btn,.btn-sm,.btn-xs,.btn-primary,.btn-ghost,.btn-gold,.btn-teal,.btn-agree,.btn-personal,
.btn-out,.btn-prim,.btn-next,.btn-begin,.tb-btn,.rc-btn,.cp-send,.em-coach-btn,.help-send,
.comment-send,.rail-next,.ab-btn,.da-btn,.sheet-cta .go,.wf-add,.bm-btn{
  border-radius:var(--btn-r);
}

.bm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 20px;font:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;
  border:1.5px solid transparent;text-decoration:none;white-space:nowrap}

/* Primary: the accent fill, its own text colour. */
.btn-gold,.btn-primary,.tb-btn.gold,.rc-btn.primary,.cp-send,.em-coach-btn,.help-send,
.btn-prim,.btn-next,.btn-begin,.rail-next,.ab-btn.gold,.da-btn.gold,.sheet-cta .go,.wf-add,
.bm-btn-primary{
  background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:transparent;font-weight:600;
}
.btn-gold:hover,.btn-primary:hover,.tb-btn.gold:hover,.rc-btn.primary:hover,.cp-send:hover,
.em-coach-btn:hover,.bm-btn-primary:hover{background:var(--btn-primary-bg);filter:brightness(1.08)}

/* Secondary: an outline in the accent. My Coach actions use it too. */
.btn-ghost,.btn-teal,.btn-out,.rc-btn.ghost,.bm-btn-secondary{
  background:transparent;color:var(--btn-line);border:1.5px solid var(--btn-line);
}
.btn-ghost:hover,.btn-teal:hover,.btn-out:hover,.rc-btn.ghost:hover,.bm-btn-secondary:hover{
  background:var(--gd);color:var(--btn-line);border-color:var(--btn-line);
}

/* Quiet: underlined accent text. */
.bm-btn-quiet{background:transparent;color:var(--btn-line);border-color:transparent;
  text-decoration:underline;text-underline-offset:4px;font-weight:500;padding:0 8px}

.bm-btn-sm{min-height:36px;padding:0 14px;font-size:13px}
.bm-btn:disabled{background:var(--bg4);color:var(--text3);border-color:transparent;cursor:not-allowed;filter:none}
.bm-btn:focus-visible,.btn:focus-visible,.btn-primary:focus-visible,.btn-gold:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px}
.bm-btn .bm-coach-mark,.btn-teal .bm-coach-mark{flex-shrink:0}

/* A selected filter pill sits on a life-area colour (or the accent):
   its text is the colour made for that, in both modes. */
.filter-pill.on,.disc-filter.on,.hl-add-area-sel.sel{color:var(--on-area)}

/* Type: page titles at display size, section titles at heading size,
   headings at 600. */
.pt,.page-title,.pg-title,.ph-title,.home-greeting h1,.page-head h1,.hero-title,.hero-strip-text h1{
  font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-head);letter-spacing:-0.02em;
}
.sec-title,.section h2,.sh2{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:var(--fw-head)}
@media(max-width:420px){
  .pt,.page-title,.pg-title,.ph-title,.home-greeting h1,.page-head h1,.hero-title,.hero-strip-text h1{
    font-size:30px;line-height:36px}
}