/* axi0 launcher: the nine-dot button, the light/dark switch beside it and the products sheet. One file for every
   axi0 page (the engine's pages through nginx, the suite pages directly). The colours below are the search palette's
   launcher subset, scoped to the launcher so a host page's own variables never bleed in; a page positions #axi0-apps
   itself (fixed on the engine's pages, in the header row on the suite pages). */
#axi0-apps, #axi0-apps-panel, .axi0-apps-scrim {
  --ax-core: #f6a04d; --ax-core-ink: #f6a04d; --ax-head: #fff; --ax-ink: #f5f5f7; --ax-mute: #8e8e98; --ax-icon: #b9b9c2;
  --ax-line: #1c1c21; --ax-pop-line: #232329; --ax-panel: #0a0a0c; --ax-hover: #141418; --ax-shadow: rgba(0, 0, 0, .72);
}
html[data-axi0-theme="light"] #axi0-apps, html[data-axi0-theme="light"] #axi0-apps-panel, html[data-axi0-theme="light"] .axi0-apps-scrim {
  --ax-core-ink: #9a4a0a; --ax-head: #17140f; --ax-ink: #17140f; --ax-mute: #675f54; --ax-icon: #4f4940;
  --ax-line: #e6dfd3; --ax-pop-line: #ddd5c8; --ax-panel: #fffdf9; --ax-hover: #efe8dc; --ax-shadow: rgba(60, 40, 10, .18);
}
@media (prefers-color-scheme: light) {
  html:not([data-axi0-theme="dark"]) #axi0-apps, html:not([data-axi0-theme="dark"]) #axi0-apps-panel, html:not([data-axi0-theme="dark"]) .axi0-apps-scrim {
    --ax-core-ink: #9a4a0a; --ax-head: #17140f; --ax-ink: #17140f; --ax-mute: #675f54; --ax-icon: #4f4940;
    --ax-line: #e6dfd3; --ax-pop-line: #ddd5c8; --ax-panel: #fffdf9; --ax-hover: #efe8dc; --ax-shadow: rgba(60, 40, 10, .18);
  }
}
#axi0-apps { position: relative; display: flex; align-items: center; gap: 4px; z-index: 110; }   /* the sheet opens above the page's content */
#axi0-apps-btn, .axi0-theme-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--ax-icon);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
#axi0-apps-btn:hover, #axi0-apps-btn[aria-expanded="true"], .axi0-theme-btn:hover { background: var(--ax-hover); color: var(--ax-head); }
#axi0-apps-btn:focus-visible, .axi0-theme-btn:focus-visible { outline: 2px solid var(--ax-core-ink); outline-offset: 1px; }
#axi0-apps-btn svg { width: 20px; height: 20px; fill: currentColor; }
.axi0-theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* the icon shows where a click takes you: the sun in dark, the moon in light */
.axi0-theme-btn .i-moon, html[data-axi0-theme="light"] .axi0-theme-btn .i-sun { display: none; }
html[data-axi0-theme="light"] .axi0-theme-btn .i-moon { display: block; }
@media (prefers-color-scheme: light) {
  html:not([data-axi0-theme="dark"]) .axi0-theme-btn .i-sun { display: none; }
  html:not([data-axi0-theme="dark"]) .axi0-theme-btn .i-moon { display: block; }
}
#axi0-apps-panel {
  position: absolute; top: 48px; right: 0; width: 312px; padding: 12px; box-sizing: border-box;
  background: var(--ax-panel); border: 1px solid var(--ax-pop-line); border-radius: 20px;
  box-shadow: 0 30px 80px var(--ax-shadow); max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain;
}
#axi0-apps-panel[hidden] { display: none; }
.axi0-apps-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 4px 8px; }
.axi0-apps-title { margin: 0; color: var(--ax-head); font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.axi0-apps-close {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -4px -6px 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ax-mute); cursor: pointer;
}
.axi0-apps-close:hover { background: var(--ax-hover); color: var(--ax-head); }
.axi0-apps-close:focus-visible { outline: 2px solid var(--ax-core-ink); outline-offset: -2px; }
.axi0-apps-close svg { width: 18px; height: 18px; }
.axi0-apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.axi0-apps-group { margin: 8px 0 2px; padding: 0 8px; color: var(--ax-mute); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.axi0-apps-grid + .axi0-apps-group { margin-top: 12px; }
.axi0-apps-grid.is-soon { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--ax-line); }
.axi0-apps-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 9px; min-height: 44px; padding: 14px 6px 12px; border-radius: 14px;
  text-decoration: none; color: var(--ax-ink); font-size: 12.5px; letter-spacing: .01em;
}
.axi0-apps-grid a:hover { background: var(--ax-hover); }
.axi0-apps-grid a:focus-visible { outline: 2px solid var(--ax-core-ink); outline-offset: -2px; }
.axi0-apps-grid a[aria-current="page"] { color: var(--ax-core-ink); }
/* the icons (inline SVG from search.js, 64-unit tiles): in dark today's dark tiles and light ink with a fine edge so
   the tile reads on the dark sheet; in light paper tiles with dark ink and a warm edge. Every product keeps its accent
   (the orange core, the Status green in a deeper shade on paper, the Studio paper "a" and its red line, the Agency mint,
   the Store green total). They follow html[data-axi0-theme] and the device the same instant as the page. */
.axi0-ic { display: block; width: 42px; height: 42px; --t: #000; --e: #3a3a43; --k: #f5f5f7; --c: #f6a04d; --g: #3ddc84; --rf: #f7f5ef; --rs: none; --rl: #16201c; }
.axi0-ic .t { fill: var(--t); stroke: var(--e); }
.axi0-ic .k { fill: none; stroke: var(--k); }
.axi0-ic .f { fill: var(--k); }
.axi0-ic .a { fill: var(--c); }
.axi0-ic .g { fill: none; stroke: var(--g); }
.axi0-ic .gf { fill: var(--g); }
.axi0-ic .m { fill: #8fd1b5; }
.axi0-ic .r { fill: none; stroke: #ba3822; }
.axi0-ic .rc { fill: var(--rf); stroke: var(--rs); }
.axi0-ic .rl { fill: none; stroke: var(--rl); }
.axi0-ic .gl { fill: none; stroke: #1d6a50; }
.axi0-ic-io { --t: #15171a; --k: #eef0f3; --c: #fb9344; }
.axi0-ic-tech { --t: #0e1012; --k: #eef0f3; --c: #fb9344; }
.axi0-ic-art, .axi0-ic-store { --t: #16201c; --k: #f7f5ef; }
.axi0-ic-site { --t: #f7f3eb; --e: #f7f3eb; --k: #261d16; }
html[data-axi0-theme="light"] .axi0-ic { --t: #f6f2ea; --e: #cfc5b5; --k: #17140f; --g: #1a8a4c; --rf: #fffdf9; --rs: #17140f; --rl: #17140f; }
html[data-axi0-theme="light"] .axi0-ic-site { --t: #f7f3eb; --k: #261d16; }
html[data-axi0-theme="light"] .axi0-ic-art { --k: #16201c; }
@media (prefers-color-scheme: light) {
  html:not([data-axi0-theme="dark"]) .axi0-ic { --t: #f6f2ea; --e: #cfc5b5; --k: #17140f; --g: #1a8a4c; --rf: #fffdf9; --rs: #17140f; --rl: #17140f; }
  html:not([data-axi0-theme="dark"]) .axi0-ic-site { --t: #f7f3eb; --k: #261d16; }
  html:not([data-axi0-theme="dark"]) .axi0-ic-art { --k: #16201c; }
}
.axi0-apps-grid a.axi0-soon { position: relative; color: var(--ax-mute); }
.axi0-apps-grid a.axi0-soon .axi0-ic { opacity: .55; }
.axi0-apps-grid a.axi0-soon::after { content: "soon"; position: absolute; top: 9px; right: 10px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ax-core-ink); border: 1px solid rgba(246, 160, 77, .45); border-radius: 999px; padding: 1px 5px; }
.axi0-apps-grid a.axi0-soon:hover .axi0-ic { opacity: .85; }
.axi0-apps-foot { text-align: center; color: var(--ax-mute); font-size: 11px; padding: 8px 4px 2px; border-top: 1px solid var(--ax-line); margin: 6px 0 0; }
.axi0-apps-scrim { display: none; }

@media (max-width: 600px) {
  #axi0-apps { gap: 2px; }
  /* the launcher on a phone: a sheet under the header row, the full width of the screen, scrolling inside */
  #axi0-apps-panel {
    position: fixed; top: 56px; left: 0; right: 0; width: auto; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px);
    padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 0 0 20px 20px; border-width: 1px 0;
  }
  .axi0-apps-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .axi0-apps-scrim { display: block; position: fixed; inset: 56px 0 0; z-index: -1; background: rgba(0, 0, 0, .5); }
  .axi0-apps-scrim[hidden] { display: none; }
}

/* ---- the app bar: one geometry for every suite page (the engine's pages pin the same controls to the same points
   with fixed positioning in search.css). Desktop: an 80 px row whose controls centre on y = 50, the launcher's right
   edge 14 px from the viewport's edge, the mark's left edge 20 px from it, the switch 4 px left of the launcher, the
   Key pill 10 px left of the switch. Phones: a 56 px row centred on y = 28, 10 / 16 px from the edges. These rules
   win over each page's own .top block (header.top is more specific), so a page never drifts. */
header.top {
  box-sizing: border-box; max-width: none; height: 80px; margin: 0; padding: 20px 14px 0 20px;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px;
}
header.top .top-right { display: flex; align-items: center; gap: 10px; }
header.top .me-slot { position: relative; flex: none; display: flex; align-items: center; width: auto; min-width: 36px; height: 40px; }
header.top .me-slot:empty { display: none; }
header.top .axi0-me-pill {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 104px; height: 30px;
  padding: 0 8px; border-radius: 999px; border: 1px solid rgba(246, 160, 77, .6); background: rgba(246, 160, 77, .08);
  color: var(--ax-head, #fff) !important; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: background .15s, border-color .15s;
}
html[data-axi0-theme="light"] header.top .axi0-me-pill { color: #17140f !important; }
@media (prefers-color-scheme: light) { html:not([data-axi0-theme="dark"]) header.top .axi0-me-pill { color: #17140f !important; } }
header.top .axi0-me-pill:hover { background: rgba(246, 160, 77, .16); border-color: #f6a04d; }
header.top .axi0-me-pill:focus-visible { outline: 2px solid var(--ax-core-ink, #f6a04d); outline-offset: 2px; }
@media (max-width: 600px) {
  header.top { height: 56px; padding: 0 10px 0 16px; gap: 10px; }
  header.top .top-right { gap: 8px; }   /* the engine's phone row: pill right edge 8 px left of the switch */
}
@media (prefers-reduced-motion: reduce) { header.top .axi0-me-pill { transition: none; } }