/* topbar.css — the nav chrome. form only. (topbar.js owns behavior.)
   contrast: the topbar reads as chrome, not as content.
   each icon is a card-toggle. active = lit with the collar red. */

#topbar {
  flex-shrink: 0;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-md);
  box-shadow: inset 1px 1px 0 var(--bevel-light), 0 2px 6px var(--bevel-dark);
}

/* the brand corner — a small collar dot + wordmark */
.tb-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-right: var(--space-lg);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
  user-select: none;
}

.tb-brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* the card-toggle buttons */
.tb-btn {
  width: var(--hit);
  height: var(--hit);
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text-dim);
  cursor: pointer;
}

.tb-btn:hover  { color: var(--text); background: var(--surface); }
.tb-btn:active { transform: translateY(1px); }

.tb-btn.active {
  background: var(--surface-2);
  box-shadow: inset 1px 1px 0 var(--bevel-light), inset 0 -2px 0 var(--accent);
}

/* full-color icons — never tint them (tinting is what washes color out). */
/* pointer-events:none → clicks always land on the BUTTON, never the icon. without this a
   PNG icon (shell/deck.png) is a draggable <img>: in fullscreen with the browser toolbar set
   to auto-hide, reaching up to click reveals the toolbar, that cursor-nudge starts an image
   drag, and the drag cancels the click (button animates, drawer never opens). emoji/span
   icons aren't draggable, which is why only the deck (cards) trigger broke. */
.tb-emoji { font-size: var(--tb-emoji-fs); line-height: 1; pointer-events: none; }
.tb-png   { width: var(--tb-icon); height: var(--tb-icon); object-fit: contain; pointer-events: none; }
.tb-css   { width: var(--tb-icon); height: var(--tb-icon); display: grid; place-items: center; pointer-events: none; }   /* a drawn {css} icon (e.g. the nurse cap) */

/* eat me / drink me tell the story by SIZE — the berry GROWS for grow, SHRINKS for shrink. */
.tb-zoom-grow   .tb-png { width: calc(var(--tb-icon) * 1.35); height: calc(var(--tb-icon) * 1.35); }
.tb-zoom-shrink .tb-png { width: calc(var(--tb-icon) * 0.6);  height: calc(var(--tb-icon) * 0.6); }
.tb-css svg { width: 100%; height: 100%; display: block; }

/* gear floats to the far right — settings, set apart by space (placement) */
.tb-spacer { flex: 1; }

/* the skins dropdown — a topbar control, just left of the zoom buttons. reads as chrome. */
.tb-skin {
  height: var(--hit);
  margin: 0 var(--space-xs);
  padding: 0 var(--space-sm);
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--fs-chrome);
  letter-spacing: 1px;
  cursor: pointer;
}
.tb-skin:hover { color: var(--text); border-color: var(--accent); }

/* ── the sub-bar — drawers EXPAND into a bar below the top bar (not dropdowns). ── */
.tb-trigger.open { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); }

#subbar {
  flex-shrink: 0;
  display: flex; flex-wrap: wrap; align-items: center;   /* WRAP to the next line — no horizontal scroll (the fix) */
  gap: var(--space-sm) var(--space-md);                  /* a little more space BETWEEN suite groups */
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
}
#subbar:empty { display: none; }       /* no open suites → no bar */
#subbar.hidden { display: none; }      /* the 🗄️ drawer icon hides it */
.subbar-suite { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--r-md); background: rgba(124,77,255,.06); border: 1px solid rgba(179,136,255,.16); }
/* each open drawer is one horizontal strip; they stack below the top bar */
.subbar-row {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
}

/* drawer tiles — ICON-ONLY (2026-07-09). the name is the hover tooltip (title="…"); the label
   was wasted space here too. one square tile, same bean, sized off the tokens. */
#subbar .tb-btn {
  width: var(--hit); height: var(--hit);
  display: grid; place-items: center;
  border-radius: var(--r-md); flex-shrink: 0;
}
#subbar .tb-btn.active { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); }
#subbar .tb-emoji { font-size: var(--tb-icon-sub); }
#subbar .tb-png   { width: var(--tb-icon-sub); height: var(--tb-icon-sub); }

/* ── CLEAN SKINS (clinical · corp) — glyph.js swaps the emoji icons for TEXT chips (.gl-chip), but the
   button stays an icon-SQUARE (width: var(--hit)) → the words overflow and the bar reads
   "coderLearnnursewellnessPA" (Sum 2026-07-23: "top bar needs work in clinical corp"). when a button
   holds a text chip, let it size to its label: auto width + real padding + a visible seat. ── */
:root[data-skin="clinical"] .tb-btn:has(.gl-chip),
:root[data-skin="corporate"] .tb-btn:has(.gl-chip),
[data-skin="clinical"] .tb-btn:has(.gl-chip),
[data-skin="corporate"] .tb-btn:has(.gl-chip) {
  width: auto; min-width: var(--hit);
  padding: 0 var(--space-sm);
}
:root[data-skin="clinical"] .tb-btn .gl-chip, :root[data-skin="corporate"] .tb-btn .gl-chip,
[data-skin="clinical"] .tb-btn .gl-chip, [data-skin="corporate"] .tb-btn .gl-chip {
  font-size: var(--fs-chrome, 13px); white-space: nowrap;
}
#subbar .tb-css   { width: var(--tb-icon-sub); height: var(--tb-icon-sub); }