/* topbar.css — the shared tool-page top bar, as ONE definition (#1508).
 *
 * It lived in house.css, which also restyles body, h1, h2, p and a. Pages with
 * their own layout (pivot, datadive) could not take that whole layer, so they
 * FORKED the component instead — pivot carried nine of these rules wired to
 * --paper/--line, so the same bar rendered warm cream there and cool blue on
 * the planner. Not a missed variable: a second implementation.
 *
 * Split out so a page can take the component without the layout. house.css
 * imports it; a page that wants only the bar links it directly.
 *
 * REQUIRES tokens.css for --bg / --ink / --rule / --accent / --font-*.
 */

/* ============================================================
   Front-door stitch (#983) — the shared tool-page top-bar.
   Every tool (workflow · task list · plan) wears the same slim
   chrome: the WeYala wordmark links back to the shell (app), a
   "← Tools" breadcrumb, and the tool's own sign-in control
   (wy-sync.js) slotted on the right. Additive nav only — the
   tool body below it is untouched.
   ============================================================ */
.wy-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px clamp(14px, 4vw, 24px);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.wy-topbar .wy-mark {
  font-family: var(--font-serif); font-size: 22px; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1;
}
.wy-topbar .wy-mark i {
  font-style: normal; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); margin-left: 2px; vertical-align: baseline;
}
.wy-topbar .wy-back {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.wy-topbar .wy-back:hover { border-color: var(--accent); color: var(--accent); }
.wy-topbar .wy-topbar-slot {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
@media (max-width: 520px) {
  .wy-topbar { gap: 9px; padding: 9px 14px; }
  .wy-topbar .wy-mark { font-size: 19px; }
  .wy-topbar .wy-topbar-slot { width: 100%; justify-content: flex-start; }
}

/* 44px TOUCH FLOOR for the top bar (#1348). The wordmark measured 19px and the
   back link ~30px at a true 390 viewport — both are navigation, both are the
   first thing a thumb reaches for, and both are in the shared bar rather than
   on any one page, so the rule belongs here.

   Narrow-only, and by min-height + centring rather than padding: padding would
   push the bar taller on every page at once, while a floor with centred content
   grows the TARGET and leaves the bar's own rhythm alone. */
@media (max-width: 560px) {
  .wy-topbar .wy-mark,
  .wy-topbar .wy-back { min-height: 44px; display: inline-flex; align-items: center; }
}