/* ═══════════ TOP BAR ═══════════ */
.topbar{height:var(--topbar-h);background:var(--nav-bg);display:flex;align-items:center;
  padding:0 1.25rem;gap:1rem;position:relative;z-index:100}
.topbar-brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;color:var(--nav-text);flex-shrink:0}
.topbar-brand-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.1rem}
.topbar-brand-name span{color:var(--amber)}
.topbar-brand-tag{font-size:0.7rem;opacity:0.5;font-weight:500}
.topbar-divider{width:1px;height:28px;background:rgba(255,255,255,0.12);flex-shrink:0}
/* 2026-05-29 v145 (Luke caught: 'fix the title is being cut off
 * make it longer / "create an AAC board for ..." is cut off
 * show it all there'). Pre-v145 the board-name-input was capped
 * at min-width:200px with no max-width grow path. AI-generated
 * board names like "Create an AAC board for wu tang clan"
 * truncated to "Create an AAC board fo..." behind the topbar-
 * actions row. v145 widens the floor + lets the input grow to
 * fill available topbar space via flex sibling negotiation. The
 * topbar-spacer (flex:1) yields room when the title needs it;
 * the actions row stays right-aligned. text-overflow:ellipsis
 * stays as a fallback when the title outgrows the whole bar
 * (e.g. tablet portrait at 768px). */
.board-name-input{background:rgba(255,255,255,0.08);border:1px solid transparent;border-radius:var(--radius-sm);
  color:var(--nav-text);padding:0.4rem 0.75rem;font-size:0.95rem;font-weight:600;
  min-width:280px;max-width:min(560px, 40vw);flex:1 1 auto;
  text-overflow:ellipsis;
  transition:all var(--transition);outline:none}
.board-name-input:hover{background:rgba(255,255,255,0.12)}
.board-name-input:focus{background:rgba(255,255,255,0.15);border-color:var(--amber)}
.board-name-input::placeholder{color:rgba(245,237,224,0.35)}
.topbar-spacer{flex:1}
.topbar-actions{display:flex;align-items:center;gap:0.5rem}
.topbar-btn{padding:0.45rem 1rem;border-radius:var(--radius-sm);font-size:0.8rem;font-weight:600;
  transition:all var(--transition);display:flex;align-items:center;gap:0.4rem}
.topbar-btn-ghost{color:rgba(245,237,224,0.7)}
.topbar-btn-ghost:hover{color:var(--nav-text);background:rgba(255,255,255,0.08)}
.topbar-btn-outline{color:var(--nav-text);border:1px solid rgba(255,255,255,0.2)}
.topbar-btn-outline:hover{border-color:var(--amber);color:var(--amber)}
.topbar-btn-primary{background:var(--amber);color:#fff}
.topbar-btn-primary:hover{background:var(--amber-dark);transform:translateY(-1px);box-shadow:0 4px 15px rgba(232,168,56,0.4)}
.topbar-nav{display:flex;align-items:center;gap:0.25rem;margin-right:0.5rem}
.topbar-nav-link{padding:0.4rem 0.7rem;border-radius:var(--radius-md);color:rgba(245,237,224,0.6);
  font-size:0.8rem;font-weight:600;text-decoration:none;transition:all var(--transition);white-space:nowrap}
.topbar-nav-link:hover{background:rgba(255,255,255,0.1);color:var(--nav-text)}
.topbar-nav-link.active{background:rgba(255,255,255,0.12);color:var(--nav-text)}
.topbar-user{display:flex;align-items:center;gap:0.5rem;color:rgba(245,237,224,0.6);
  font-size:0.8rem;margin-left:0.5rem;cursor:pointer;padding:0.3rem 0.6rem;border-radius:var(--radius-sm);
  transition:all var(--transition)}
.topbar-user:hover{background:rgba(255,255,255,0.08);color:var(--nav-text)}
/* 2026-06-01 (Luke): hide the "Guest" account pill for guests — it's noise
   (they have Sign Up / Sign In). Signed-in users still get their account pill.
   body.tinky-guest is stamped by community-nav-rail.js stampGuestClass(). */
body.tinky-guest .topbar-user{display:none !important}
/* 2026-06-02 (Luke): guests must NOT see signed-in-only right-rail sections —
   "My Personal QR" (a per-USER published-board QR) and "Clinical data"
   (clinician share). They need an account; hidden until signed in. */
body.tinky-guest #accPersonalQr,
body.tinky-guest #accClinicShare{display:none !important}
.topbar-user-avatar{width:28px;height:28px;border-radius:50%;background:var(--amber);
  display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:#fff;font-weight:700}