/* The app shell (XYZ-32): product name, the menu, the account button. Tokens only. */
.xb-shell {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-4); min-height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .xb-shell { padding: 0 var(--space-6); } }

.xb-shell .brand { font: 700 20px/28px var(--font-sans); color: var(--ink); text-decoration: none; }

.xb-shell nav { display: flex; gap: var(--space-1); flex: 1; }
.xb-shell nav a {
  font: var(--label); color: var(--ink-muted); text-decoration: none; white-space: nowrap;
  min-height: 36px; display: inline-flex; align-items: center;
  padding: 0 var(--space-3); border-radius: var(--radius-pill);
}
.xb-shell nav a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }

.xb-shell .status { font: var(--small); color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xb-shell .sync {
  font: var(--label); white-space: nowrap; text-decoration: none; flex-shrink: 0;
  min-height: 36px; display: inline-flex; align-items: center; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent);
}
.xb-shell .sync:hover { background: var(--accent-hover); }
.xb-shell .sync::before { content: "\21BB"; margin-right: var(--space-2); }

/* Folded: the menu button first, a gap where the pages were. */
.xb-shell .pages-menu { position: relative; display: none; }
.xb-shell .fold {
  min-height: var(--touch); min-width: var(--touch); margin-left: calc(-1 * var(--space-2));
  border-color: transparent; background: transparent; font-size: 20px; padding: 0;
}
.xb-shell.folded .pages-menu { display: block; }
.xb-shell.folded nav, .xb-shell.folded > .status { display: none; }
.xb-shell.folded .sync { margin-left: auto; }
.xb-shell .menu.pages { left: 0; right: auto; }
.xb-shell .menu.pages a {
  font: var(--body); color: var(--ink); text-decoration: none; min-height: var(--touch);
  display: flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-s);
}
.xb-shell .menu.pages a[aria-current="page"] { background: var(--accent-soft); }
.xb-shell .menu.pages .status { margin: 0; padding: var(--space-3) var(--space-3) var(--space-1); border-top: 1px solid var(--line); }

.xb-shell .account { position: relative; }
.xb-shell .account > button { min-height: 36px; padding: 0 var(--space-3); }
.xb-shell .menu {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop); padding: var(--space-2); display: grid; gap: var(--space-1);
}
.xb-shell .menu[hidden] { display: none; }
.xb-shell .menu .heading { font: var(--caption); color: var(--ink-subtle); padding: var(--space-2) var(--space-2) 0; }
.xb-shell .menu button {
  justify-self: stretch; justify-content: flex-start; border-radius: var(--radius-s);
  border-color: transparent; background: transparent; min-height: var(--touch);
}
.xb-shell .menu button[aria-checked="true"] { background: var(--accent-soft); }
.xb-shell .menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-1) 0; width: 100%; }