/* Hub-only layout bits. Everything else — tokens, rail, topbar, cards, tiles,
   dotted numbers, utabs, chips, dock — is the branch dashboard's own
   /css/app.css + /css/pumo.css (served by the hub from public/css). */
@layer pages {
  /* sign-in / forced password: one centred card */
  .hub-auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
  .hub-auth .card { width: min(420px, 100%); }
  .hub-auth .rail-brand { padding-inline: 0; }
  .hub-auth [type="submit"] { width: 100%; margin-top: var(--s-5); }

  /* branch cards */
  .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s-4); }
  .bcard { display: flex; flex-direction: column; gap: var(--s-3); }
  .bcard .card-head { margin-bottom: 0; }
  .bcard .card-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bcard-foot { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
  .bcard-foot .muted { flex: 1; min-width: 0; font-size: 12px; }
  .bcard.off .kv > b { color: var(--fg-2); }

  /* onboarding */
  .onb-steps { margin: var(--s-4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); counter-reset: s; }
  .onb-steps li { counter-increment: s; display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.7; }
  .onb-steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 500 12.5px/1 var(--font-num); color: var(--on-ink); background: var(--ink); }
  .code { display: block; margin-top: var(--s-2); padding: var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-all; }

  /* a branch opened inside the hub: slim bar + the branch's own dashboard */
  .shell.hub-rail-off .rail { display: none; }
  .bview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .bview-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); padding: 10px var(--s-5); border-bottom: 1px solid var(--line); }
  .bview-bar b { font: 400 16px/1.3 var(--font-display); }
  .bview-bar .muted { font-size: 12px; }
  .bframe { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: var(--bg); }
  .bview .pg { padding: var(--s-8) var(--s-4); width: 100%; }

  .hub-wall .vid-img[hidden] { display: none; }
  #hubStage .vid { aspect-ratio: 16 / 9; }
  .hub-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  /* 2FA enrolment QR: always on white, quiet zone included in the SVG */
  .mfa-qr { display: flex; justify-content: center; margin: var(--s-3) 0; }
  .mfa-qr img { width: min(240px, 70vw); height: auto; border-radius: var(--r-sm); background: #fff; image-rendering: pixelated; }
}
@layer pages {
  @media (max-width: 1023.98px) {
    .bview-bar { padding: 8px var(--s-3); }
    .bview-bar .hide-sm { display: none; }
    .shell.in-branch ~ .mbar-wrap { display: none; }
  }
}