/* kapable-dock.css — shared footer dock component (IMP-2598).
 * Promoted from kv2-launchpad/static/styles.css (IMP-2590 lane treatment),
 * then substantially reworked per a K3 design consult (2026-07-22, C0.5):
 * priority+ round-robin overflow collapse + a disclosure-nav "⋯" control,
 * replacing the ⌘K spotlight pill and the old scroll-fallback/tail-drain
 * collapse. At dock-v0.2.0 (operator call, 2026-07-25) the chip strip went
 * away entirely: ALL platform nav lives in the (renamed) menu panel, always,
 * so the collapse engine's rules (.lp-dock-groups/-group/-chips/-sep/-label)
 * are gone and `.lp-dock-overflow-*` is now `.lp-dock-menu-*`.
 * kv2-launchpad remains the reference consumer. Include after
 * kapable-theme.css.
 *
 * The dock's chip markup (kapable-dock.js#renderChip) uses `.lp-chip`, NOT
 * the generic `.chip` (dock-v0.1.1) — a shared asset must not squat a
 * classname a consumer plausibly already owns. Found live: kv2-console
 * defines its own 13 `.chip` rules, and the dock's chips were inheriting
 * them (flex-direction:column, icon stacked over label) instead of this
 * file's inline dock grammar. `.chips` (the flex-wrap grid container used
 * by launchpad's own tool grid, not the dock) was never extracted here —
 * it doesn't belong to the dock component. Since dock-v0.2.0 every `.lp-chip`
 * lives in the menu panel, where it reads as a full-width row rather than a
 * pill — see `.lp-dock-menu-list .lp-chip` below for that context's look.
 */

/* The `hidden` attribute drives all three disclosure panels below (the
 * overflow trigger/panel/sections, the accent panel) plus their empty
 * sections. Author display rules elsewhere in this file carry the SAME
 * specificity as the UA [hidden] default and come later in the cascade, so
 * without this they would silently win and the "hidden" element would still
 * render — this is the one !important in the file, and it's load-bearing. */
[hidden] { display: none !important; }

.lp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0; /* a flex-item chip WOULD otherwise silently compress below its own
    label's width once its flex row runs out of room (the browser "solves" the overflow
    by shrinking instead of overflowing), which reads as a clipped mid-label chip and
    defeats navWrap's scrollWidth/clientWidth measurement entirely (shrinking absorbs the
    overflow before it can ever show up at the ancestor .lp-dock-nav that JS actually
    measures) — verified live in Chrome, 2026-07-22, IMP-2598 C0.5 round 4. */
  border: 1px solid var(--kp-border); border-radius: 3px;
  padding: 6px 11px; font-size: 12.5px; font-weight: 550;
  color: var(--kp-text); background: var(--kp-surface);
  text-decoration: none; cursor: pointer; font-family: var(--kp-font);
  transition: border-color 0.15s, color 0.15s;
}
.lp-chip svg { color: var(--kp-text-dim); flex-shrink: 0; transition: color 0.15s; }
.lp-chip:hover, .lp-chip:focus-visible {
  border-color: var(--kp-accent); color: var(--kp-accent);
  text-decoration: none;
}
.lp-chip:hover svg, .lp-chip:focus-visible svg { color: var(--kp-accent); }
.lp-chip:focus:not(:focus-visible) { outline: none; }
.lp-chip[aria-disabled="true"] { opacity: 0.55; cursor: default; pointer-events: none; }

/* ── Footer dock — the OS-shell concept's grammar (IMP-2590 v2) ───────────
   Fixed platform nav: grouped compact chips (reusing .lp-chip above) + a
   live mono clock. Machined corners (the .lp-chip radius), ink rules, no
   cards. */
:root { --lp-dock-h: 56px; }
.lp-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  height: var(--lp-dock-h);
  padding: 0 12px;
  background: var(--kp-surface);
  border-top: 1px solid var(--kp-border);
  max-width: 100vw;
}
/* .lp-dock-nav holds the platform-menu trigger as one flex unit within
   .lp-dock's row. overflow:hidden here is now only a backstop: dock-v0.2.0
   moved every chip into the body-appended menu panel, so there is no chip
   strip left to clip and no width measurement to do (the pre-0.2.0 collapse
   engine measured THIS box's clientWidth against .lp-dock-groups'
   scrollWidth — both that engine and .lp-dock-groups are gone, along with
   .lp-dock-group/-chips/-sep and the strip's mono group kickers). Kept
   because the trigger's label is consumer-supplied text (a tile's
   display_name), which must never be able to shove the clock/accent
   furniture off the dock's edge — see .lp-dock-menu-trigger-label's
   ellipsis, of which this is the second half. */
.lp-dock-nav {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 0%; min-width: 0; max-width: 100%;
  overflow: hidden;
}
/* Status pill (IMP-2590 v3) — honest production-deploy health from data the
   page already fetches (opts.fleet); omitted entirely when there's nothing
   usable (see computeFleetStatus in kapable-dock.js). */
.lp-dock-status {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
  padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--kp-border);
  font-family: var(--kp-font-mono); font-size: 11px; color: var(--kp-text-dim);
  text-decoration: none; white-space: nowrap; transition: color 0.15s;
}
.lp-dock-status:hover, .lp-dock-status:focus-visible { color: var(--kp-text); text-decoration: none; }
.lp-dock-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lp-dock-status-dot.ok { background: var(--kp-success); }
.lp-dock-status-dot.warn { background: var(--kp-warn); }
.lp-dock-status-dot.bad { background: var(--kp-danger); }
.lp-dock-right {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding-left: 10px; border-left: 1px solid var(--kp-border);
}
/* The ⌘K spotlight pill (.lp-dock-cmdk, a plain "launchpad" link on the
   static apps.html/drops.html dock — the launchpad's own index.html shell
   has a real ⌘K palette via app.js, unrelated to this file) was removed in
   IMP-2598: redundant with the shared header's own "jump to a tool…"
   switcher popup. The header keeps its ⌘K behavior (kapable-header.js is
   untouched); the dock no longer duplicates it. */

/* ── Platform menu disclosure control (dock-v0.2.0, operator call
   2026-07-25) ─────────────────────────────────────────────────────────────
   Formerly the "⋯" overflow control — the narrow-width retreat path — now the
   dock's ONLY nav affordance: a labeled trigger at the start of the nav strip
   carrying the current surface's name, and a panel holding every platform
   chip, grouped. The panel is body-appended + position:fixed (NOT nested
   inside .lp-dock, whose .lp-dock-nav overflow:hidden would clip it — a
   fixed element's containing block is the viewport, not that ancestor),
   anchored by JS to the trigger's LEFT edge and clamped to an 8px gutter.
   Disclosure pattern, not role="menu" — see kapable-dock.js's
   createMenuControl doc comment for the full a11y reasoning. */
.lp-dock-menu-trigger {
  flex-shrink: 0; min-width: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 10px; border-radius: 3px;
  border: 1px solid var(--kp-border); background: var(--kp-surface);
  color: var(--kp-text); font-family: var(--kp-font);
  font-size: 12px; font-weight: 550; line-height: 1;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.lp-dock-menu-trigger svg { color: var(--kp-text-dim); flex-shrink: 0; transition: color 0.15s; }
.lp-dock-menu-trigger:hover,
.lp-dock-menu-trigger:focus-visible,
.lp-dock-menu-trigger[aria-expanded="true"] {
  border-color: var(--kp-accent); color: var(--kp-accent);
}
.lp-dock-menu-trigger:hover svg,
.lp-dock-menu-trigger:focus-visible svg,
.lp-dock-menu-trigger[aria-expanded="true"] svg { color: var(--kp-accent); }
/* The label is a tile's display_name — ellipsize rather than let a long one
   widen the trigger past the strip (the other half of .lp-dock-nav's clip). */
.lp-dock-menu-trigger-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* On a recognised surface the trigger IS the "you are here" signal (the
   strip's active chip is gone), so it earns a marked resting state — the
   accent glyph + a stronger rule, stopping short of the full filled accent
   treatment so the dock doesn't read as permanently "on". */
.lp-dock-menu-trigger.has-current { border-color: var(--kp-border-strong); }
.lp-dock-menu-trigger.has-current svg { color: var(--kp-accent); }

.lp-dock-menu-panel {
  position: fixed; z-index: 50; /* dock is 40; content stays below both */
  bottom: calc(var(--lp-dock-h) + 8px);
  max-height: calc(100vh - var(--lp-dock-h) - 16px); overflow-y: auto;
  padding: 8px; border-radius: var(--kp-radius, 4px);
  background: var(--kp-surface); border: 1px solid var(--kp-border);
  box-shadow: var(--kp-shadow-lg, 0 8px 24px rgba(15, 23, 42, 0.14));
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
  /* Every group is open at once now, so this is a menu to SCAN, not the
     short overflow list it used to be (a 208px single column would run ~17
     rows tall). Sections lay out as columns side by side; the JS clamp keeps
     the result inside the viewport, and the narrow-viewport rule below
     collapses it back to one column.
     align-items:stretch (not flex-start) is what makes the column rules read
     as deliberate: the groups have wildly different lengths (build 6, operate
     7, more 3), so a shrink-to-fit section leaves each border-left ending at
     a different height — four ragged hairlines instead of columns. Verified
     in Chrome, 2026-07-25.
     flex-wrap + max-width added at dock-v0.3.0: the re-derived DOCK_GROUPS has FIVE
     groups (was three), so at min-width:148px per section the panel wants ~776px. Without
     a cap it would simply exceed a narrow desktop viewport — the JS clamp can only slide
     the panel back to the 8px gutter, it cannot make it narrower. Wrapping to a second row
     is the graceful answer, and it means adding a sixth group later can't break the
     layout either. */
  display: flex; align-items: stretch; gap: 0;
  /* width:max-content is load-bearing, not tidiness. A position:fixed box with
     no width is shrink-to-fit, and with flex-wrap:wrap that intrinsic width
     computed ONE pixel short of its own five columns (sections summed to 740px
     against 739px available), so the last group wrapped to a second row — where
     section heights stop matching and the `+ .lp-dock-menu-section` border-left
     lands on the first item of the wrapped row as a stray hairline. max-content
     sizes the panel to its unwrapped content, so the row either fits or the
     max-width below clamps it. Verified in Chrome, 2026-07-25. */
  width: max-content; flex-wrap: wrap; max-width: calc(100vw - 16px);
}
.lp-dock-menu-panel.is-open { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lp-dock-menu-panel { transition: none; opacity: 1; transform: none; }
}
.lp-dock-menu-section { flex: 0 0 auto; min-width: 148px; padding: 0 4px; }
.lp-dock-menu-section + .lp-dock-menu-section {
  border-left: 1px solid var(--kp-border);
}
.lp-dock-menu-label {
  font-family: var(--kp-font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--kp-text-disabled);
  padding: 4px 10px 6px;
}
/* A real <ul> (list semantics — screen readers announce position/count),
   not a styling div: reset the UA list box model before laying out as a
   column. Each <li> is a plain wrapper around one chip and carries no look
   of its own. */
.lp-dock-menu-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.lp-dock-menu-list li { display: block; }
/* Chips read as full-width rows here, not pills — the base .lp-chip rules
   (border/background/inline-flex) are overridden accordingly. */
.lp-dock-menu-list .lp-chip {
  display: flex; width: 100%;
  border: none; background: none; border-radius: 3px;
  padding: 7px 10px; font-size: 12.5px; font-weight: 500;
  white-space: nowrap;
}
.lp-dock-menu-list .lp-chip:hover, .lp-dock-menu-list .lp-chip:focus-visible {
  background: var(--kp-surface-hi); border-color: transparent;
}
.lp-dock-menu-list .lp-chip.is-active { color: var(--kp-accent); background: var(--kp-accent-bg); }
/* Below the width where multiple columns stop fitting, go back to one 208px
   column and let the panel's own max-height scroll it. Raised 720px → 800px at
   dock-v0.3.0: five groups want ~776px, and the band between the old breakpoint
   and that width would have wrapped to a second row — where the
   `.lp-dock-menu-section + .lp-dock-menu-section` border-left lands on the first
   item of the wrapped row and reads as a stray leading hairline. Folding to one
   column just above the five-column width removes that band entirely; the
   panel's flex-wrap stays as a backstop for a future sixth group. */
@media (max-width: 800px) {
  .lp-dock-menu-panel { display: block; width: 208px; }
  .lp-dock-menu-section { min-width: 0; padding: 0; }
  .lp-dock-menu-section + .lp-dock-menu-section {
    border-left: none; margin-top: 2px;
  }
}

/* ── Accent auditioner (IMP-2590, dropdown redesign IMP-2598, disclosure
   pattern refined by the same K3 consult) ─────────────────────────────────
   A single trigger button showing the currently-painted accent as a dot
   (org default, or the active preview override); opens an upward,
   body-appended panel (same clipping reason as the overflow control above)
   listing the 6 candidates + "Reset to org accent". See
   kapable-accent-audition.js for the a11y mechanics and the derivation. */
.lp-accent-audit { display: flex; align-items: center; flex-shrink: 0; }
.lp-accent-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; padding: 0;
  border: 1px solid var(--kp-border-strong); background: var(--kp-surface);
  cursor: pointer; transition: border-color 0.15s, transform 0.12s;
}
.lp-accent-trigger:hover { transform: scale(1.1); }
.lp-accent-trigger[aria-expanded="true"] { border-color: var(--kp-text); }
.lp-accent-trigger-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--kp-accent);
}
.lp-accent-panel {
  position: fixed; z-index: 50; /* dock is 40; content stays below both */
  bottom: calc(var(--lp-dock-h) + 8px);
  min-width: 200px; padding: 4px;
  border-radius: var(--kp-radius, 4px);
  background: var(--kp-surface); border: 1px solid var(--kp-border);
  box-shadow: var(--kp-shadow-lg, 0 8px 24px rgba(15, 23, 42, 0.14));
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
.lp-accent-panel.is-open { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lp-accent-panel { transition: none; opacity: 1; transform: none; }
}
.lp-accent-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border-radius: 3px; border: none; background: none;
  font-family: var(--kp-font); font-size: 12.5px; color: var(--kp-text);
  cursor: pointer; text-align: left;
}
.lp-accent-item:hover, .lp-accent-item:focus-visible { background: var(--kp-surface-hi); }
.lp-accent-item.is-active { color: var(--kp-accent); background: var(--kp-accent-bg); }
.lp-accent-item-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--kp-border-strong); background: var(--sw);
}
.lp-accent-panel-sep { height: 1px; background: var(--kp-border); margin: 4px 2px; }
.lp-accent-item-reset { color: var(--kp-text-dim); font-weight: 550; }

.lp-dock-clock {
  font-family: var(--kp-font-mono); font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--kp-text-disabled);
}
/* Reserve room so the fixed dock never overlaps content or the in-flow
   footer; lift the concierge FAB and toast host above it too. */
body.has-lp-dock { padding-bottom: var(--lp-dock-h); }
body.has-lp-dock #kp-toast-host { bottom: calc(var(--lp-dock-h) + 16px) !important; }
/* min-width guard: below 601px the FAB already gets relocated to
   top:105px/bottom:auto (mobile override in the consumer's own stylesheet,
   pinned to the onboarding rail) — this rule must not fight that one. Higher
   specificity here would otherwise win over that lower-specificity mobile
   rule even though both carry !important. */
@media (min-width: 601px) {
  body.has-lp-dock [data-kpc-launcher] { bottom: calc(var(--lp-dock-h) + 16px) !important; }
}
@media print {
  .lp-dock { display: none !important; }
}
/* NOTE: the pre-0.2.0 `.lp-dock-label { display: none }` rule lived here — it
   hid the STRIP's mono group kickers on narrow viewports. Those kickers are
   gone; the surviving `.lp-dock-menu-label` is inside the panel and must
   stay visible at every width (it's what makes the menu scannable). */
@media (max-width: 760px) {
  .lp-dock { gap: 10px; padding: 0 12px; }
  .lp-dock-right { gap: 8px; padding-left: 8px; }
  .lp-dock-status { padding-right: 8px; }
}
@media (max-width: 560px) {
  .lp-dock-clock { display: none; }
}
@media (max-width: 460px) {
  .lp-dock-status-label { display: none; } /* dot only */
}