/* compass.css — COMPASS-ONE-MOUNT-V1 (2026-07-24)
 *
 * The chip lives on two surfaces with opposite palettes: /cuts is dark glass,
 * /library is light. Every colour below reads a token with a LIGHT-SURFACE
 * FALLBACK, so the same element is legible on SP without a second stylesheet
 * and without SP having to adopt DC's glass variables. Geometry is identical on
 * both — a fixed 44x44 circle, which is the whole point of the glyph decision
 * (COMPASS-IS-A-GLYPH-V1): no text, so no width that depends on user data, so
 * it can never overflow or shove its neighbours off a 390px screen.
 */

#dc-loc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 50%;
  background: var(--glass-bg, rgba(0, 0, 0, 0.05));
  border: var(--glass-brd, 1px solid rgba(0, 0, 0, 0.14));
  box-shadow: var(--glass-hi, 0 1px 2px rgba(0, 0, 0, 0.08));
  color: var(--ink, #23232a);
  backdrop-filter: blur(var(--glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 0px));
}

#dc-loc .dc-loc-glyph { font-size: 1.4rem; line-height: 1; }

/* Scoped state is a RING, never a word — the location name lives in the
   sheet's crumb chain, where it has room to be read. A ring (not a full fill)
   signals "you're scoped here" without reading as an active toggle/select-mode
   (Roughy 2026-07-26: the full purple fill looked like the compass was
   selected). The glyph tints to the accent; the body stays the neutral glass. */
#dc-loc.is-set {
  background: var(--glass-bg, rgba(0, 0, 0, 0.05));
  border: 2px solid var(--accent, #6b4bd6);
  color: var(--accent, #6b4bd6);
  box-shadow: 0 0 0 2px rgba(107, 75, 214, 0.18);
}

#dc-loc:active { transform: scale(0.94); }
#dc-loc:focus-visible { outline: 2px solid var(--accent, #6b4bd6); outline-offset: 2px; }

/* Two controls for one axis is how they ended up stacked on top of each other
   on the device. Wherever the Compass renders, the old location pill does not. */
#dc-loc ~ #loc-pill,
#loc-pill:has(~ #dc-loc) { display: none !important; }

/* ── SP (/library) PHONE MOUNT ─────────────────────────────────────────────
 * SP's own navigator is unusable at phone width for two independent reasons,
 * both measured in source rather than guessed:
 *   · breadcrumb.css:315 caps #breadcrumb-root at max-width:160px ≤768px
 *   · library.html:308 hides it OUTRIGHT at root (body.lib-at-root), which is
 *     exactly where you land
 * The Compass carries the whole job on a phone, so the squeezed horizontal
 * chain stands down rather than competing for the same strip — and critically,
 * the Compass is NOT subject to the at-root hide, because "I am at root and
 * want to go somewhere" is the single most common thing a phone user needs.
 */
@media (max-width: 768px) {
  body.lib-breadcrumb-mode #breadcrumb-root .breadcrumb-nav,
  body.lib-at-root #breadcrumb-root .breadcrumb-nav { display: none !important; }

  body.lib-at-root #dc-loc,
  #dc-loc { display: inline-flex !important; }

  /* MEASURED, not estimated (390x844, real /library?go=sp, Playwright):
   *   .unibar-right  x=260..612  — 222px PAST the right edge of a 390px screen
   *   #density-toggle x=260..338 — sitting directly on top of #dc-loc (254..298)
   *   #breadcrumb-root 0x0       — SP's own navigator, confirmed absent
   * The first Compass mount here was present, visible, and UNCLICKABLE: the
   * density toggle intercepted every pointer event over it. That is the same
   * failure that produced COMPASS-IS-A-GLYPH-V1 (three controls, one slot), and
   * the lesson from it was that a control's slot has to be measured, never
   * assumed. So the row wraps instead of overlapping: the Compass keeps the
   * first line uncontested and the refine cluster drops to its own scrollable
   * line. Nothing is hidden and nothing is stacked — the overflow that was
   * already there just stops landing on top of the navigator. */
  .unibar { flex-wrap: wrap; height: auto; row-gap: 0.25rem; }
  .unibar-center { flex: 0 0 auto; }
  .unibar-right {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .unibar-right::-webkit-scrollbar { display: none; }
}

/* COMPASS-ON-DESKTOP-TOO-V1 (Roughy 2026-07-24). This used to hide the chip
   above 769px on the theory that the horizontal chain is the better control
   when there is room. That was wrong in the one case that matters: the chain
   is capped and TRUNCATES long container names, and container names are user
   data, so the control degrades exactly when the name is most worth reading.
   A glyph never truncates. Desktop now keeps BOTH — the chain for orientation
   (where am I, at a glance, no tap) and the Compass for movement (where can I
   go). They answer different questions, which is why they can share a bar
   without being the two-controls-for-one-axis mistake. */

/* ── SP unibar overflow ────────────────────────────────────────────────────
 * Measured at 390x844 on the real /library?go=sp: .unibar-right ran x=260..612,
 * i.e. 222px PAST the right edge. Wrapping the row stopped it landing on top of
 * the Compass, but the cluster itself still could not be fully reached — the
 * two informational chips (#library-mode-chip, #asset-count) were holding
 * their intrinsic width and pushing the two real BUTTONS off the end.
 * Buttons are load-bearing and text is not, so the text yields: the chips
 * shrink and ellipsize, the 44px targets keep their size. */
@media (max-width: 768px) {
  #library-mode-chip, #asset-count {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #density-toggle, #show-all-toggle { flex: 0 0 auto; }
}