/* Vici shared controls - icon buttons, menus, the focus ring.
   The modal is the master copy: rules moved verbatim, in source order, from
   dock/panel/panel.css; loaded after shared-tokens.css and before the host's
   own sheet (panel.css here, styles.css on the web under /panel/).
   The icon button and its drawn glyph, its unread dot and its off state; the
   page's own menu (.ctx-menu) with its rows; the one focus ring every
   control shares. Shell classes stacked on .icon-btn (the floating gear, the
   record and hands chips) and where a menu opens are the host's.
   Shared files (dock/HANDOFF.md, "Shared files"): they hold exactly what the
   modal ships; a host need is a selector in the host's own sheet; no
   transition, animation, filter or blur, and no CSS the board's WebKit has
   not already shipped; every rule renders right with no host-toggled class.
   An edit here is a dock landing (live first) that also deploys the web. */

.icon-btn {
  appearance: none;
  min-width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
/* A drawn icon, not a character from a font: the board's image carries
 * only the DejaVu faces, and a character none of them covers paints as
 * an empty box (the rail's plus did, on the board only — the rig's
 * WebKit falls back to macOS's fonts). test_board_glyphs.py holds the
 * page's characters to the board's fonts. */
.icon-glyph {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover,
.icon-btn.kb-hover {
  /* kb-hover is the probe-driven twin of :hover (injected moves flip
     :hover unreliably — bench round 40). Accent-soft, not surface-2:
     over live video at alpha 242 the old shade read as nothing. */
  color: var(--accent-link);
  background: var(--accent-soft);
}
.icon-btn { position: relative; }
.icon-btn.has-unread::after {
  /* a reply finished in a background thread: static dot, never
     animated — each animation frame would be a shipped dirty band */
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}
/* Vici's own right-click menu (the card owns these pixels). */
.ctx-menu {
  position: absolute;
  min-width: 210px;
  display: none;
  flex-direction: column;
  padding: 5px;
  /* A menu floats over rail rows and bubbles, so it needs a distinctly
     raised opaque slab and edge in either appearance (KAN-334). */
  border: 1px solid var(--raised-border);
  border-radius: 11px;
  background: var(--raised-surface);
  /* A 3 px blur, not the theme's 28-34 px one: the menu's paint on the
     board's CPU rasterizer was the gear click's largest leg (mark to
     callback 17 -> 10 ms, the click 41 -> 36 on the glass, its p95 under
     the 50 ms gate for the first time; fabric 2026-09-09-w13-chrome.md).
     The border and the raised surface still lift it off the page. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 60;                 /* above the floating corner chrome */
}
.ctx-menu.open { display: flex; }
.ctx-menu.dialog-menu { z-index:90; }
.ctx-menu button {
  appearance: none;
  padding: 8px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.ctx-menu button:hover,
.ctx-menu button.kb-hover,
.ctx-menu button.current,
.ctx-menu button:focus-visible {
  /* kb-hover is probe-driven (:hover never flips on these buttons
   * from injected moves), and the old surface-2 shade was DARKER
   * than the menu surface — it fired invisibly (bench round 40).
   * current is the row Enter will pick when focus stays elsewhere
   * (the composer's @ picker) or a pointer put it there (no
   * focus-visible after a click): the highlight Max asked for. */
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  outline: none;
}
.ctx-menu button.suggested { color: var(--accent-link); font-weight: 650; }
.ctx-menu button:disabled {
  color: var(--muted);
  opacity: .45;
  background: transparent;
  cursor: default;
}
:root:not([data-theme="dark"]) .ctx-menu button.suggested {
  /* Light's selected-row wash needs the darker action token; the legacy
   * Dark selector above remains byte-for-byte on --accent. */
  color: var(--accent-hover);
}
/* Destructive rows (the thread menu's Delete) read as such. */
.ctx-menu button.danger { color: var(--danger); }
.ctx-menu button.danger:hover,
.ctx-menu button.danger.kb-hover,
.ctx-menu button.danger:focus-visible {
  color: var(--danger);
  background: var(--danger-soft);
}
.icon-btn.off { opacity: 0.35; }
button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent-mark); outline-offset:2px; }