/* ══ THE APEX SWITCHER ═════════════════════════════════════════════════════
   Links to the other apps in the family this person can open. Lifted out of
   shell.css (cbapex#23) so it can travel to pages that do not wear the kit
   frame — cbnight's Loom-descended pages, whose chrome is cbloom's `#hdr` with
   an additive Apex nav hung off it.

   ⚠️ THE SEAM: this file styles the switcher's own nodes. The HOST places the
   button among its other controls — shell.css still owns
   `.shell-head > .apex-appsbtn { order: 2 }`, because where Apps sits relative
   to Card and Menu is a fact about the kit's header, not about the switcher.
   Two files, no rule declared in both. The failure this avoids is written up in
   night.css: a shadow copy that loads later WINS, so a fix in the original is
   silently overridden in the one place that copied it. */

/* ⚠️ ZERO SPECIFICITY, ON PURPOSE. `:where()` contributes nothing, so wherever
   the host has its own header-button style — shell.css's `.shell-hbtn`, which
   the button also carries — that wins every property it declares, with no rule
   written twice. This is what the button looks like where there is no kit
   frame: cbnight's boards and its index page. */
:where(.apex-appsbtn) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--ax-mono, ui-monospace, monospace);
  font-size: var(--ax-fs-micro, 0.6875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subdued, #a598b8);
  background: transparent;
  border: var(--ax-line, 1px solid rgba(255, 255, 255, 0.14));
  border-radius: 0.4rem;
  cursor: pointer;
}
:where(.apex-appsbtn:hover),
:where(.apex-appsbtn:focus-visible) {
  color: var(--text, #f3eef8);
  border-color: color-mix(in srgb, var(--accent, #b98cff) 55%, transparent);
}

.apex-appsbtn .ai {
  width: 0.85rem;
  height: 0.85rem;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
/* Four squares — an app grid, drawn rather than shipped as an asset so it
   inherits the accent like every other glyph in the header. */
.apex-appsbtn .ai::before,
.apex-appsbtn .ai::after {
  content: "";
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background:
    linear-gradient(currentColor, currentColor) left top / calc(50% - 1px) 100% no-repeat,
    linear-gradient(currentColor, currentColor) right top / calc(50% - 1px) 100% no-repeat;
  border-radius: 1px;
}

.apex-apps {
  /* ⚠️⚠️ FIXED, AND ON `<body>` — not absolute inside the header. It was the
     latter, which works on the kit's `.shell-head` and is INVISIBLE on cbloom's
     `#hdr`: that header is `height: 48px; overflow: hidden`, so a panel opening
     below it was clipped out of existence. Playwright's `isVisible()` reported
     true throughout — it reads the bounding box and the computed style, and an
     ancestor's `overflow` is neither.

     `top` and `right` are set by `apex-switcher.js` on open, from the button's
     and the host's rects. They are declared here only so the panel is never
     briefly at 0,0. */
  position: fixed;
  top: 0;
  right: 1rem;
  /* Above the kit header's own z-index and above cbloom's. */
  z-index: 400;
  /* ⚠️ TWO COLUMNS, AND NO SCROLLER. A one-column list of nine apps is a menu
     that scrolls, and a menu that scrolls hides the thing you opened it to
     find. Splitting it long-ways turns n rows into ceil(n/2) — six apps become
     three rows, which fits without a scrollbar at any sane height.
     `max-content` on the columns keeps both as narrow as their longest label
     rather than padding them out to equal thirds of nothing. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0.1rem 0.75rem;
  padding: 0.55rem;
  /* ⚠️ Never wider than the screen. `max-content` columns sized to
     "Conservative Connector" twice over run past a 400px viewport, and a
     dropdown that overflows the body gives the whole page a horizontal
     scrollbar — the thing this menu was rebuilt to get rid of. */
  max-width: calc(100vw - 1rem);
  /* The app's own surface, so the menu is made of the same stuff as its
     overlays (`.loom-modal` wears `--surface` too). This read `--panel`, a
     token nothing defines, so every app painted the literal plum whatever
     its ground — cbadmin's claret, cbsitrep's oxblood (cbapex#176). */
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--ax-line, 1px solid rgba(255, 255, 255, 0.14));
  border-radius: 0.6rem;
  box-shadow: 0 16px 34px rgba(7, 5, 14, 0.5);
}
/* ⚠️ `[hidden]` written NEXT TO the display rule. A bare `hidden` attribute
   loses to any authored `display`, and this family has lost a tab strip to
   exactly that. */
.apex-apps[hidden] { display: none; }
/* Every region heading after the first stands off the rows above it. */
.apex-apps-h:not(:first-child) { margin-top: 0.7rem; }
/* The Apps button, same treatment (2026-09-07): inside the family's dialog
   the rows are the zoo's PAD (components.css § Pad, 2026-10-11), two-up under
   the dialog's own region headings. The `.apex-apps-*` rules in this file
   style the FALLBACK dropdown only, on chromes that load no components.css.
   ⚠️ Keep the two tiles alike: a change to one is a change to both. */

/* ══ The page behind the open panel (operator, 2026-09-06) ═══════════════════
   The busy portal's glass — the same tint and the same 3px as `.shell-busy`
   and `.ax-dialog::backdrop` — written out here rather than through skin.css's
   `[data-glass]`, because this file travels to chromes that do not load
   skin.css. `-webkit-` stated for iOS before 18. Below the kit header (z 20)
   in the same stacking context, above everything else; the panel itself is on
   <body> at 400, so it is never under its own scrim. */
.apex-scrim {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: color-mix(in srgb, var(--bg, #171326) 38%, transparent);
  /* On a kit page skin.css's `[data-glass]` supplies the blur (and forbids it
     everywhere else, `!important`); this token is what it reads. The explicit
     pair below is for a chrome that never loads skin.css. */
  --ax-glass-blur: 3px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  touch-action: none;
}
.apex-scrim[hidden] { display: none; }
/* The document does not scroll while the panel is open. */
html.apex-apps-open,
html.apex-apps-open body {
  overflow: hidden;
  overscroll-behavior: none;
}

.apex-apps-h {
  grid-column: 1 / -1;
  margin: 0 0 0.3rem;
  padding: 0 0.4rem;
  font-family: var(--ax-mono, ui-monospace, monospace);
  font-size: var(--ax-fs-micro, 0.6875rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--subdued, #a598b8);
}
.apex-apps-a {
  display: flex;
  /* Centred on the LABEL, not on the row box: the row's height is set by
     whichever of the two is taller, and aligning to the box left a 1.55rem mark
     sitting proud of a 0.78rem line of type. */
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.4rem;
  color: var(--text, #f3eef8);
  text-decoration: none;
  font-size: var(--ax-fs-sm, 0.875rem);
  line-height: 1.2;
}
.apex-apps-a:hover,
.apex-apps-a:focus-visible {
  background: color-mix(in srgb, var(--accent, #b98cff) 16%, transparent);
}
.apex-apps-a span {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Every mark at ONE size, whatever the app's logo happens to be. These come
   from `/api/app/icon/<card>/mark` — the same artwork as the PWA tile.

   ⚠️ THIS BLOCK USED TO REFUSE A BACKGROUND, and the reason it gave was sound:
   the marks are composited onto NOTHING, so any ground here would be "a
   slightly-different dark sitting on the menu panel as a visible square". That
   argument rules out a dark tile; it does not rule out a WELL. Operator,
   2026-09-04: "Can you make the icons stand out a little more? Background
   effect? Chonkier?" — so the ground is a wash of the app's own accent, which
   reads as a deliberate holder rather than as a mismatched square, and the
   radius comes back with it because there is a tile to round again.

   1.85rem → 2.25rem, and the padding is inside that box (loom.css line 7 sets
   `box-sizing: border-box` family-wide), so the row grows 0.4rem and the glyph
   grows with it rather than being crowded by its own well. */
.apex-apps-a img {
  /* 1.5 → 1.85 (operator, 2026-08-28: "Apps buttons a little bit larger")
     → 2.25 (operator, 2026-09-04: "chonkier"). */
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.22rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent, #b98cff) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line, #5f4c66) 60%, transparent);
  flex: 0 0 auto;
  object-fit: contain;
}
/* The well brightens with the row, so the mark is part of the hover rather than
   a sticker sitting on top of it. */
.apex-apps-a:hover img,
.apex-apps-a:focus-visible img {
  background: color-mix(in srgb, var(--accent, #b98cff) 24%, transparent);
}
/* The glyph that stands in for a mark on the reader's OWN surfaces (stash,
   card). Same 1.5rem box as an app's mark so the two sections' labels line up
   in one column — a section whose text starts 4px left of the one above it
   reads as a mistake even when nobody can say why. */
.apex-apps-g {
  /* Matches the mark box above so the two sections' labels start in one column.
     ⚠️ It had said 1.5rem "same box as an app's mark" since before the mark went
     to 1.85rem, so the comment had been describing a column that no longer lined
     up — invisible because these rules are unreachable today (see below). */
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: var(--ax-fs-md, 1rem);
  line-height: 1;
  color: var(--accent, #b98cff);
}
/* ⚠️ UNREACHABLE TODAY, AND KEPT DELIBERATELY — read this before "fixing" either
   side. The comment here used to say "where you already are: still listed, so
   the menu is a map rather than a set of buttons", which describes a design the
   code does not implement: `apex.ts` filters the current app OUT of the list
   (`a.app !== APP`) and its own comment explains why — a row that offers you the
   page you are on is a dead control. So the switcher emits neither
   `aria-current` nor `.apex-apps-g`, and these two rules never match.

   Left in place because the map-not-buttons idea is a real option someone may
   still choose, and the styling for it is the cheap half. But the comment now
   says which world it is for, so nobody spends an afternoon working out why
   greying-out does not happen. */
.apex-apps-a[aria-current="page"] {
  color: var(--subdued, #a598b8);
  cursor: default;
}
.apex-apps-a[aria-current="page"] .apex-apps-g { color: var(--subdued, #a598b8); }