/* ==========================================================================
 * SHARED·NAV — THE TOOLS SLOT + THE TOOLS PANEL (D-676, 2026-07-29)
 *
 * Behaviour and the reasoning live in web/js/cards/shared/tools-panel.js.
 * This file owns three things: the slot has NO CIRCLE, the glyph ROTATES,
 * and the panel sits ABOVE the bar with the bar still lit.
 * ========================================================================== */

/* ⚠️ THE TOOLS SLOT'S OWN RULES ARE NOT HERE — THEY ARE IN `web/css/app.css`, BESIDE THE REST
 * OF THE BAR. (check 16)
 *
 * They lived here first, and the mirror check was right to reject it: 404 SHARED·NAV registers
 * ONE `css` file and ONE class prefix, and the bar's prefix is `tab`. A `.tab-item.tab-tools`
 * rule in a stylesheet the registry does not name for that card is `.tab-*` styled outside its
 * card CSS — the precise drift check 16 exists to catch, and it caught it.
 *
 * It is also the better split on the merits: the SLOT is part of the bar (same chip, same glyph
 * size, same label, identical to its four neighbours by construction). The PANEL is a separate
 * object that happens to be opened from it. This file owns `.twp-*` only. */

/* ── the scrim ─────────────────────────────────────────────────────────────
 * 🔴 z-index 97 IS THE WHOLE POINT OF THIS FILE. The tab bar is --z-nav (100).
 * The scrim is BELOW it, so the bar is never dimmed and never inert while the
 * panel is open: the × stays lit, stays tappable, and stays exactly where the
 * thumb left it. A scrim at 1000 would have satisfied "the panel doesn't cover
 * the bar" while breaking the reason that mattered.
 * token-exception: z-index is an ordinal scale (see tokens.css). */
.twp-scrim {
  position: fixed;
  inset: 0;
  z-index: 97;
  background: var(--overlay-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-200) var(--ease-standard);
}
.twp-scrim.on { opacity: .36; pointer-events: auto; }

/* The 'Pre-release version' footer tag sits in the same strip the panel now
 * occupies. Two things in one place is not a layering problem to solve with a
 * bigger number — one of them should not be there. */
body.tools-open .footer-tag { opacity: 0; pointer-events: none; }

/* ── the panel ─────────────────────────────────────────────────────────────
 * A CARD ABOVE THE BAR, not a bottom sheet. `--tools-bar-h` is MEASURED at open
 * time (the safe-area inset differs per device and is not knowable here).
 * No grab handle: this does not drag, and a handle that suggests otherwise is
 * a false affordance.
 *
 * The rise reads as coming FROM the +: origin bottom-centre, a small scale and
 * a small lift together, over 200ms. Longer feels like a page; shorter feels
 * like a flicker. (D-422 two-speed: this is the functional end of the scale.) */
.twp {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tools-bar-h, 86px) + var(--space-8));
  /* ⚠️ --dim-24, NOT --space-24. Same 24px, different KIND of number: this is the panel's
   * SIZE, not a gap between things (D-511, check 23). The space scale became unsnappable the
   * last time the two were confused — bumping a gap resized the furniture. */
  width: calc(100% - var(--dim-24));
  max-width: calc(var(--layout-bar-max) - var(--dim-24));
  z-index: 99;
  background: var(--surface-card);
  border-radius: var(--radius-card-lg);
  padding: var(--space-8) 0;
  box-shadow: 0 8px 32px var(--ink-900-a18);
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(10px) scale(.94);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--duration-200) var(--ease-out),
              opacity   var(--duration-150) linear;
}
/* ⚠️ KEEP THE translateX(-50%). Same trap as .tabbar.nav-away in app.css: the
 * panel is centred by `left:50%` + a translate, and a transform is one property,
 * not a list. Dropping it here slides the panel half its own width to the right
 * on every open, which reads as a rendering glitch rather than a CSS mistake. */
.twp.on {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .twp { transition: opacity var(--duration-150) linear; transform: translateX(-50%); }
  .twp.on { transform: translateX(-50%); }
}

/* ── rows ──────────────────────────────────────────────────────────────────
 * ONE LEVEL OF CARDING (D-435): the panel is the card; the rows inside it are
 * plain rows on a hairline, never boxes within a box. */
.twp-row { display: flex; align-items: stretch; }
.twp-hr  { height: 1px; background: var(--border-hairline); margin: 0 var(--space-16); }

.twp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--text-primary);
  /* D-511 — the 44pt touch floor is a SIZE, not a gap. */
  min-height: var(--tap-target);
  padding: var(--space-12) var(--space-8) var(--space-12) var(--space-16);
}
.twp-main:active { background: var(--surface-hover-wash); }
.twp-main:focus-visible { outline: var(--focus-ring); outline-offset: calc(var(--focus-offset) * -1); }
.twp-solo { padding-right: var(--space-16); }
.twp-solo .twp-gl:last-child { margin-left: auto; width: var(--dim-16); height: var(--dim-16); color: var(--text-tertiary); }

.twp-gl { flex: none; width: var(--dim-24); height: var(--dim-24); color: var(--text-secondary); display: block; }
.twp-gl svg { width: 100%; height: 100%; display: block; }

.twp-txt { min-width: 0; }
.twp-nm  { display: block; font-size: var(--size-16); font-weight: var(--weight-600); line-height: var(--leading-120); }
.twp-st  { display: block; margin-top: var(--space-4); font-family: var(--font-label); font-size: var(--size-12);
           color: var(--text-secondary); line-height: var(--leading-120); }

/* THE SECOND TARGET — only drawn for a tool that declares a one-tap log.
 * 44×44 with the row's own hit area beside it; the two must not overlap. */
.twp-door {
  flex: none;
  align-self: center;
  width: var(--tap-target);
  height: var(--tap-target);
  margin-right: var(--space-12);
  border: 0;
  border-radius: var(--radius-round);
  background: var(--surface-well);
  color: var(--text-tertiary);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.twp-door:active { background: var(--cream-400); }
.twp-door:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.twp-door .twp-gl { width: var(--dim-16); height: var(--dim-16); }

/* THE HONEST EMPTY (D-517 · D-541). One line, said plainly. Not a placeholder
 * row, not a "coming soon", not a zero-height box that looks like a crash. */
.twp-empty {
  margin: 0;
  padding: var(--space-16);
  font-family: var(--font-body);
  font-size: var(--size-15);
  color: var(--text-secondary);
  text-align: center;
}