/* brand-one.css · ONE's frame in the Mass Acceleration brand (2026-10-29, unified app): the kit logo and the mode switch in
   the top bar, the sign-in screen, the six-colour rule on page heads, the accent on the current tab, 8/16 radii.
   Layer: presentation · Pillar: 05 Marketing & Brand · Owner: COO · Rev 0.1 · 2026-10-29
   Consumes: shared/brand.css tokens (--ma-*), app.css classes  Produces: the brand look; no colour literal here */
html, body { font-family: var(--ma-font); }
.topbar { gap: 12px; min-height: 64px; }
.brand { margin-right: auto; }
.brand-logo { height: 24px; width: auto; display: block; }
.topbar .mode-switch { margin: 0 8px; }
@media (min-width: 800px) { .topbar-tools { flex: 0 1 auto; } }   /* logo | switch | tools, as in the company app */
.signin-logo { height: 28px; width: auto; display: block; margin: 0 auto 8px; }
.mt-logo { height: 26px; width: auto; display: block; margin: 0 auto 16px; }
.center-screen h1 { font-size: 2rem; font-weight: 800; }
.center-screen .muted { max-width: 30rem; }
.tile, .card, .sheet { border-radius: var(--ma-radius); }
.tab[aria-current] { text-decoration: none; color: var(--foreground); box-shadow: inset 0 -3px 0 var(--ma-accent); }
.view-head, .dash-head { position: relative; padding-top: 14px; }
.view-head::before, .dash-head::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 96px;   /* the six-colour rule */
  background: linear-gradient(90deg, var(--peach) 0 16.66%, var(--orange) 16.66% 33.33%, var(--pink) 33.33% 50%,
    var(--purple) 50% 66.66%, var(--periwinkle) 66.66% 83.33%, var(--teal) 83.33% 100%); }
.chip, .badge { border-color: var(--ma-border-strong); }
.tabbar { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: thin; }   /* many tabs: the bar scrolls, never the page */
.tab { padding: 0 12px; white-space: nowrap; color: var(--ma-text-muted); }
@media (max-width: 799px) {
  .topbar { flex-wrap: wrap; row-gap: 4px; padding-top: calc(8px + env(safe-area-inset-top)); }   /* the switch gets its own row */
  .topbar .mode-switch { margin: 0; }
  .brand-logo { height: 20px; }
}