/* bar.css — Affine.Earth's page bar: 56 px, one row, never wraps; what does not fit is in More.
 *
 * ONE HOME FOR THE BAR'S RULES (ontology change 11, 2026-10-14). They were part of layout.css, so a page that does not
 * load layout.css (the instruments, the users guide, the 404 page, pages whose own classes collide with layout.css's)
 * could not carry the bar. layout.css imports this file on its first line, so every page that loads layout.css (or
 * ui.css, which imports layout.css) renders the bar exactly as before; every other page links this file alone.
 * The bar's markup is written from one Swift law (PageBarLaw, cells/xcode/Sources/GaiaFTCLCLI/Commands/
 * UISuitePages.swift); `gaiaftcl ui-suite pages` checks every served page against it.
 *
 * Every token is layout.css's, with layout.css's dark value as the fallback (in whole px where layout.css scales by the
 * width), so a page without layout.css draws the same bar. A page without layout.css that follows the OS's light
 * preference must define the bar's tokens in both schemes (--bg --surface --surface-2 --line --ink --ink-2 --ink-3
 * --mint), as guide.html and the 404 page do.
 */

.bar, .bar * { box-sizing: border-box; }
.bar { display: flex; align-items: center; gap: var(--sp-3, 12px); block-size: var(--bar, 56px);
  padding-inline: max(var(--gutter, 16px), var(--safe-s, env(safe-area-inset-left, 0px)))
                  max(var(--gutter, 16px), var(--safe-e, env(safe-area-inset-right, 0px)));
  background: color-mix(in srgb, var(--bg, #070b15) 90%, transparent); border-block-end: 1px solid var(--line, #1d2a46);
  position: sticky; inset-block-start: 0; z-index: 30; backdrop-filter: blur(10px);
  margin: 0; padding-block: 0; flex-wrap: nowrap; justify-content: flex-start;   /* a page's own header rules never reach the bar */
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif); }
.bar .brand { display: inline-flex; align-items: center; min-block-size: var(--tap, 44px); font-weight: 800; letter-spacing: -.02em;
  font-size: var(--fs-h3, 20px); white-space: nowrap; color: var(--ink, #f1f6fb); text-decoration: none; }
.bar .brand .dot { color: var(--mint, #6be3b0); }
/* the brand's dot is a full stop on every page: a page's own .dot (games.html draws status dots with it) never
   reaches it (measured 2026-10-14: an 8 px red disc in place of the stop, and the bar 8 px past the edge at 390) */
.bar .brand .dot { display: inline; inline-size: auto; block-size: auto; border-radius: 0; background: none; margin: 0;
  vertical-align: baseline; }
/* the brand is a Latin name: its three children read 'Earth.Affine' under dir=rtl (measured) */
.bar .brand { direction: ltr; unicode-bidi: isolate; }
/* the sub-line gives way first: it shrinks to an ellipsis before an entry of the nav is clipped (measured 2026-10-14 at
   1024: with the six group words the nav overflowed its box by 12 px on lattice.html and 72 px on a study page) */
.bar .brand-sub { color: var(--ink-3, #6b7d99); font-size: var(--fs-small, 13px); white-space: nowrap;
  flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.bar-nav { display: flex; gap: var(--sp-1, 4px); flex: 1 0 auto; min-inline-size: 0; overflow: hidden; }
.bar-nav > a { white-space: nowrap; flex: 0 0 auto; padding: 0 .9em; border-radius: 999px; color: var(--ink-2, #9eb0cc);
  font-size: var(--fs-ui, 14px); text-decoration: none; min-block-size: var(--tap, 44px);
  display: inline-flex; align-items: center; }
.bar-nav > a:hover, .bar-nav > a[aria-current] { color: var(--ink, #f1f6fb); background: var(--surface, #0e1526); }
/* the count that fits per class; More holds every entry. 7 at 1440: 6 left 341 px of the nav empty */
.bar-nav > a { display: none; }
@media (min-width: 640px)  { .bar-nav > a:nth-child(-n+2) { display: inline-flex; } }
@media (min-width: 1024px) { .bar-nav > a:nth-child(-n+4) { display: inline-flex; } }
@media (min-width: 1440px) { .bar-nav > a:nth-child(-n+7) { display: inline-flex; } }
@media (min-width: 1920px) { .bar-nav > a:nth-child(-n+9) { display: inline-flex; } }
.bar-end { display: flex; align-items: center; gap: var(--sp-2, 8px); flex: 0 0 auto; margin-inline-start: auto; }
.bar select, .bar .btn { min-block-size: var(--tap, 44px); font: inherit; font-size: var(--fs-ui, 14px);
  color: var(--ink, #f1f6fb); background: var(--surface, #0e1526); border: 1px solid var(--line, #1d2a46); border-radius: 999px;
  padding-inline: .9em; }
.more { position: relative; }
.more > summary { list-style: none; cursor: pointer; min-block-size: var(--tap, 44px); min-inline-size: var(--tap, 44px); display: inline-flex;
  align-items: center; justify-content: center; border: 1px solid var(--line, #1d2a46); border-radius: 999px; background: var(--surface, #0e1526);
  font-size: var(--fs-ui, 14px); padding-inline: .8em; white-space: nowrap; }
.more > summary::-webkit-details-marker { display: none; }
.more-menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); min-inline-size: 16rem;
  max-inline-size: min(22rem, 92vw); max-block-size: calc(100dvh - var(--bar, 56px) - 1rem); overflow: auto;
  background: var(--surface, #0e1526); border: 1px solid var(--line, #1d2a46); border-radius: var(--radius, 14px); padding: var(--sp-2, 8px);
  display: grid; gap: 2px; z-index: 40; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.more-menu a, .more-menu button { display: flex; align-items: center; min-block-size: var(--tap, 44px); padding-inline: .8em;
  border-radius: var(--radius-sm, 8px); color: var(--ink, #f1f6fb); text-decoration: none;
  font-size: var(--fs-ui, 14px); background: none; border: 0; text-align: start; font-family: inherit; }
.more-menu a:hover { background: var(--surface-2, #0b1020); }
.more-menu .group { font-size: var(--fs-small, 13px); color: var(--ink-3, #6b7d99);
  text-transform: uppercase; letter-spacing: .08em; padding: var(--sp-2, 8px) .8em 2px; }

/* phone + narrow: the sub-line goes; the language picker narrows */
@media (max-width: 1023.98px) {
  .bar .brand-sub { display: none; }
  .bar select { max-inline-size: 8.5rem; }
}
/* phone: the picker narrows again, so More stays on the screen (measured 2026-10-14 at 390: the bar was 416 px wide on
   watch.html and openusd/index.html and More was cut at the edge; court-client.html had the same rule on its own). The
   selector outweighs the picker's own width, which flash.js writes into the page after this file. */
@media (max-width: 639.98px) { .bar select, header.bar .af-pill select { max-inline-size: 5.5rem; } header.bar .af-pill .af-expanded97, .bar .af-pill .af-expanded97 { display: none !important; } .bar { gap: var(--sp-2, 8px); } }
/* the language picker in the bar follows the page's ink: flash.js gives every pill its floating pill's light text
   (#e8ecf5), so on a page in the light scheme the in-bar picker read light on white (measured 2026-10-14 on guide.html
   at 390); on a dark page --ink is that same light value, so nothing there moves */
.bar .af-pill.af-bar { color: var(--ink, #f1f6fb); }
/* in the shell, a hosted page drops its own bar: the shell's bar is the one bar */
html.hosted .bar { display: none; }
@media print { .bar { display: none !important; } }