/* xp-linkmode.css — LINK MODE (owner ruling 2026-07-28z). Owned by web/xp-linkmode.js.

   ⚠ DELIBERATELY NOT SCOPED UNDER html.xp, unlike its neighbours in this directory. The
   other xp-* sheets dress an experimental flag; link mode is the ONLY route to embedding a
   post in a comment from the viewer now that the numeric id field is gone, so it must render
   whether or not the flag is on. Every rule is instead gated on `html.lm-on`, which
   LinkMode.mount() adds and unmount() removes — so with no errand in flight this sheet
   matches nothing at all.

   Mobile first: the bar clears the safe area, the ✕ and the + are both >= 44px, and the +
   sits bottom-right of a tile where a thumb already rests. */

/* THE BAR — pinned to the very top, above the app header, because it describes a mode the
   whole page is in rather than a control within it. */
.lm-bar {
  /* --z-sheet: a MODE bar outranks every content surface, including the viewer and the
     hover-card rig. Only the modal-over-viewer rung is above it. */
  position: fixed; left: 0; right: 0; top: 0; z-index: var(--z-sheet, 1400);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px 14px;
  /* THE LINKING BAR IS THE ORANGE ONE (owner 2026-07-29, with a screenshot: "number 1 needs
     to be the orange bar").
     ⚠ CORRECTING MY OWN EARLIER MISREAD: when the owner said "the top bar being all orange is
     pretty obnoxious" I quieted THIS bar. They meant the PHONE'S NOTIFICATION BAR, which was
     picking up an inferred colour because no page declared <meta name="theme-color">. That is
     fixed at its real source in the page heads; this bar goes back to being loud, which is
     right — it is a MODE indicator, and a mode you can forget you are in is a bug. */
  background: var(--accent, #eda733);
  border-bottom: 1px solid var(--accent-deep, #b8791c);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  cursor: pointer;
}
.lm-bar-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* On an ACCENT bar the whole type ramp inverts: these were --faint/--bright/--ink, which are
   tuned for a dark panel and are unreadable on orange. Dark ink on accent instead. */
.lm-bar-k {
  font-size: 9px; letter-spacing: calc(.18em * var(--track, 1)); text-transform: var(--caps, uppercase);
  color: rgba(0, 0, 0, .58);
}
.lm-bar-l {
  font-size: 13px; color: #0d0f12; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-bar-x {
  flex: 0 0 auto; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .13); border: 1px solid rgba(0, 0, 0, .38);
  color: #0d0f12; font: inherit; font-family: var(--ui, monospace);
  font-size: 11px; letter-spacing: calc(.08em * var(--track, 1)); padding: 0 12px; cursor: pointer;
}
.lm-bar-x:active { background: rgba(0, 0, 0, .26); }
/* the bar is fixed, so the page has to make room for it or it covers the header */
html.lm-on body { padding-top: 58px; }

/* THE TILE + . Bottom-right, as asked. It is the ONLY live control on a tile in link mode
   (LinkMode's capture-phase click suppressor cancels everything else), so it is drawn to
   look like the affordance rather than like a decoration. */
html.lm-on a.tile.lm-tile { position: relative; }
html.lm-on .lm-pick {
  position: absolute; right: 6px; bottom: 6px; z-index: 3;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .68);
  border: 1px solid var(--accent, #eda733);
  border-radius: 999px;
  color: var(--accent, #eda733);
  font: inherit; font-family: var(--ui, monospace); font-size: 22px; line-height: 1;
  cursor: pointer;
}
html.lm-on .lm-pick:active { background: var(--accent, #eda733); color: #000; }
/* while an errand is in flight the grid reads as a chooser, not as a place to browse into */
/* Faint enough to read as "these are selectable" without turning the whole grid amber —
   see the quiet-chrome note on .lm-bar. The + disc carries the colour. */
html.lm-on a.tile.lm-tile { outline: 1px solid rgba(237, 167, 51, .11); outline-offset: -1px; }

@media (prefers-reduced-motion: reduce) {
  .lm-bar { box-shadow: none; }
}