/*
IC SHIP PASS — generated by icpass.py from the map. edit the CODE; rerun to refresh this.

══════════════════════════════════════════════════════════════════════
 PAGE 0 — TABLE OF CONTENTS  (goldfish pointers)
 jump by SEARCHING the anchor phrase — line numbers drift, names don't.
══════════════════════════════════════════════════════════════════════
  the sub-bar — drawers EXPAND into a bar .... search: "the sub-bar — drawers"
  CLEAN SKINS (clinical · corp) — glyph.js ... search: "CLEAN SKINS (clinical"
══════════════════════════════════════════════════════════════════════

 FOR AI
 ───────
   **OWNS** — the visual form and layout of the top navigation chrome (topbar) and its expandable
   **sub-bar (subbar). Exports no names; topbar.js owns behavior and reads these class names
   **(.tb-btn, .tb-brand, .tb-skin, etc.) and IDs (#topbar, #subbar) to wire up clicks and state.
   
   **TOUCH HERE** —
   - change topbar height or spacing → `#topbar` L5, `var(--topbar-h)` L7
   - change active button appearance (the red underline) → `.tb-btn.active` L48, line 50 sets
   - `inset 0 -2px 0 var(--accent)`
   - change icon size in subbar drawers → `var(--tb-icon-sub)` L123–124
   - change subbar background or border → `#subbar` L93, lines 98–99
   - add hover/active states to skin dropdown → `.tb-skin` L75, line 88
   - adjust brand wordmark styling → `.tb-brand` L18, lines 23–26
   - change clinical/corporate skin text chip layout → lines 130–140 (the `:has(.gl-chip)` rules)
   
   **TRAPS** —
   - Line 50: the `inset 0 -2px 0 var(--accent)` underline on `.tb-btn.active` is the visual
   - signal that a drawer is open; removing or moving it breaks the UI contract with topbar.js.
   - Lines 130–133: four selectors (`:root[data-skin="clinical"]`,
   - `:root[data-skin="corporate"]`, `[data-skin="clinical"]`, `[data-skin="corporate"]`) must
   - all be kept in sync; if you add a skin, you must add it to all four places or
   - clinical/corporate buttons will behave differently.
   - Line 54–58: the comment explains why `.tb-emoji` and `.tb-png` have `pointer-events: none` —
   - removing it will break the deck (cards) button in fullscreen mode.
   - Line 95: `flex-wrap: wrap` is the fix for horizontal scroll; removing it reintroduces the
   - bug.
   
   **DO NOT** —
   - rename `.tb-btn`, `.tb-brand`, `.tb-skin`, `#topbar`, `#subbar`, `.subbar-row` — topbar.js
   - depends on these names.
   - change the structure of the clinical/corporate skin rules (lines 130–140) without checking
   - glyph.js to see how it injects `.gl-chip` elements.
   - move or delete the `pointer-events: none` rules on lines 59–60, 64 — they prevent unintended
   - drag behavior.
   - add new skins without updating all four selectors in lines 130–133.
   - change button behavior (click, focus, active state) — that lives in topbar.js, not here.
   
   
   
   
   
   ---

END IC SHIP PASS
*/

/* 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; }
/* the columns toggle (Sum 2026-07-27) — one classical column shown 3× (normal) or 1× (reader) */
.tb-cols { display: inline-flex; align-items: center; gap: 2px; }
.tb-col  { height: calc(var(--tb-icon) * 0.78); width: auto; 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); }