/* =========================================================
   mbrd - Find, context menu, fence offer, and connection chip
   Split from overlays.css. Five panels sharing one set of clothes:
   card paper, hairline, shadow, ctx-in entrance.
   ========================================================= */

/* ---------------------------------------------------------
   Find (Ctrl+K)
   Pinned near the top so it does not sit on the destination it is
   about to fly to.
   --------------------------------------------------------- */
#search {
  position: fixed;
  z-index: var(--z-search);
  top: 12vh;
  left: 50%;
  translate: -50% 0;
  width: min(560px, calc(100vw - 32px));
  padding: 6px;
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow-2);
  animation: ctx-in var(--dur-fast) var(--ease);
}
#search-field {
  width: 100%;
  padding: 11px 13px;
  border: 0;
  /* max(0px) because --radius is 0 on the plain tier and a bare
     subtraction gives -6px, which the browser drops entirely. */
  border-radius: max(0px, calc(var(--radius) - 6px));
  background: none;
  font-family: var(--font-display);
  font-size: var(--t-title);
  color: var(--ink);
}
#search-field::placeholder { color: var(--ink-3); font-style: var(--display-italic); }
#search-field:focus { outline: none; }
/* Escape already closes this palette. */
#search-field::-webkit-search-cancel-button { display: none; }

#search-hits {
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#search-hits:not(:empty) {
  margin-top: 6px;
  padding-top: 6px;
  border-top: var(--hairline) solid var(--rule);
}

.search-hit {
  display: grid;
  /* Fixed kind column so names line up. Wide enough for "sticker". */
  grid-template-columns: 68px 1fr;
  align-items: baseline;
  gap: 2px 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: max(0px, calc(var(--radius) - 6px));
  background: none;
  text-align: left;
  cursor: pointer;
}
.search-kind {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: var(--t-tiny);
  font-style: var(--display-italic);
  letter-spacing: calc(0.14em * var(--ls-scale));
  text-transform: uppercase;
  color: var(--accent-text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-name {
  font-family: var(--font-display);
  font-size: var(--t-body);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-where {
  font-size: var(--t-small);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keyboard-driven highlight; hover only shows it rather than moving it. */
.search-hit.is-at { background: var(--paper-2); }
/* Hover uses the louder wash to distinguish it from the keyboard's. */
@media (hover: hover) {
  .search-hit:hover { background: var(--paper-3); }
}
.search-hit:focus-visible { outline: var(--sel-line) solid var(--select); outline-offset: -2px; }

.search-note {
  margin: 0;
  padding: 9px 10px 10px;
  font-size: var(--t-small);
  font-style: var(--display-italic);
  color: var(--ink-3);
}

/* #ctx-child is the hover submenu -- a separate element only because
   two boxes cannot be one id. See openChild in ui/menu.ts. */
#ctx-menu, #ctx-child {
  position: fixed;
  z-index: var(--z-menu);
  min-width: 208px;
  /* dvh, not vh -- vh is the large viewport and runs under a phone's
     address bar. */
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  border: var(--hairline) solid var(--rule-2);
  /* --leaf, the sidebar's corner: every floating sheet wears the same one. */
  border-radius: var(--leaf);
  background: var(--paper-card);
  box-shadow: var(--shadow-2);
  animation: ctx-in var(--dur-fast) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
/* Focus ring belongs on the entry, not the whole panel. */
:is(#ctx-menu, #ctx-child):focus { outline: none; }
/* Arrives from the side. */
#ctx-child { animation-name: ctx-in-side; }
/* 0.97 scale makes the transform-origin (set from script) meaningful.
   Less would re-hint the text mid-animation. */
@keyframes ctx-in { from { opacity: 0; transform: translateY(-3px) scale(0.97); } }
@keyframes ctx-in-side { from { opacity: 0; transform: translateX(-4px) scale(0.97); } }
/* Exit reverses the spatial entrance. `forwards` holds the last frame
   until ui/menu.ts removes the node. Id-qualified so it beats the
   `animation: ctx-in` rule above. */
:is(#ctx-menu, #ctx-child).is-leaving {
  animation-name: ctx-out;
  animation-fill-mode: forwards;
  /* Pointer-events off so nothing fires on a panel mid-exit. */
  pointer-events: none;
}
#ctx-child.is-leaving { animation-name: ctx-out-side; }
@keyframes ctx-out { to { opacity: 0; transform: translateY(-3px) scale(0.97); } }
@keyframes ctx-out-side { to { opacity: 0; transform: translateX(-4px) scale(0.97); } }
/* The parent row stays lit while its child is open. */
.ctx-item.is-open { background: var(--paper-3); }

/* ── One shape, wherever the panel is opened ─────────────────────────── */

/* Grid: icon, label, trailing indicator, optional swatch. */
.ctx-item {
  display: grid;
  /* Fourth column for palette swatches; collapses when empty. */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  /* Nested radius: the menu's --leaf minus its padding, so highlights sit
     concentric. max(0px) because the corner is 0 on the sharp tier. */
  border-radius: max(0px, calc(var(--leaf) - 5px));
  background: none;
  color: var(--ink);
  font-size: var(--t-small);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ctx-item:hover,
.ctx-item.is-hot,
.ctx-item:focus-visible {
  background: var(--paper-2);
  color: var(--accent-deep);
  outline: none;
}
.ctx-item.is-danger:hover,
.ctx-item.is-danger:focus-visible { color: var(--danger); }
/* Informational row -- greyed, no hover, skipped by arrow keys. */
.ctx-item.is-inert {
  color: var(--ink-3);
  cursor: default;
}
.ctx-item.is-inert:hover { background: none; color: var(--ink-3); }
.ctx-item kbd {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink-3);
  /* 10px: the sub-tiny caption register, off the scale on purpose.
     See research/old/visual-audit-2026-08-12.md item 2. */
  font-size: 10px;
  grid-column: 3;
  justify-self: end;
}

/* Menu icons: dimmed at rest, inherit the row colour on hover. */
.ctx-item .ico {
  width: 15px;
  height: 15px;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease);
}
.ctx-item:hover .ico,
.ctx-item.is-hot .ico,
.ctx-item:focus-visible .ico { color: inherit; }

/* Tick on the trailing edge. Space held whether drawn or not. */
.ctx-item .ctx-tick {
  grid-column: 3;
  justify-self: end;
  width: 13px;
  height: 13px;
  color: var(--accent-text);
  visibility: hidden;
}
.ctx-item.is-checked .ctx-tick { visibility: visible; }
/* Submenu chevron in the same trailing column. */
.ctx-item .ctx-chevron {
  grid-column: 3;
  justify-self: end;
  width: 13px;
  height: 13px;
}

/* Colour chip in the icon column -- note-paper and board pigments.
   Inset ring so --note-4 (near-paper) shows an edge without changing
   the chip's footprint. */
.ctx-chip {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 var(--hairline) color-mix(in srgb, var(--ink) 22%, transparent);
}

/* Trailing swatch for the palette picker. Near-square corner capped at
   3px so the outermost bands are not eaten by a pill radius. */
.ctx-chip.is-end {
  width: 30px;
  height: 14px;
  border-radius: min(3px, var(--radius-xs));
}

/* Slider row (Spacing, under Arrange). Same column grid as ctx-item. */
.ctx-range {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
  padding: 6px 10px 8px;
  font-size: var(--t-small);
  color: var(--ink);
}
.ctx-range span { grid-column: 1; }
.ctx-range output {
  grid-column: 2;
  justify-self: end;
  color: var(--ink-3);
  /* Sub-tiny caption register. */
  font-size: 10px;
  /* Fixed width so the label does not shift as the thumb moves. */
  min-width: 34px;
  text-align: right;
}
/* Slider appearance is in sidebar.css, shared with .field and .np-volume. */
.ctx-range input[type="range"] {
  grid-column: 1 / -1;
  margin: 0;
}

/* Tick does not warm with the row -- it is a state reading, not an
   action icon. */
.ctx-item:hover .ctx-tick,
.ctx-item:focus-visible .ctx-tick { color: var(--accent-text); }

.ctx-sep {
  height: 1px;
  margin: 5px 8px;
  background: var(--rule);
}

/* Fence offer (ui/fence-prompt.ts). Same stock as the menu, but snug --
   it holds one entry so a 208px minimum would look empty. */
#fence-prompt {
  position: fixed;
  z-index: calc(var(--z-menu) + 1);
  padding: 4px;
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow-2);
  animation: ctx-in var(--dur-fast) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
#fence-prompt .ctx-item { white-space: nowrap; }

/* Connection chip (ui/conn-chip.ts). A row of five icon buttons; same
   stock as the menu. Below it in the stack so the menu covers it. */
#conn-chip {
  position: fixed;
  z-index: calc(var(--z-menu) - 1);
  display: flex;
  align-items: stretch;
  padding: 2px;
  border: var(--hairline) solid var(--rule-2);
  border-radius: var(--radius-sm);
  background: var(--paper-card);
  box-shadow: var(--shadow-2);
  animation: ctx-in var(--dur-fast) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
#conn-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button);
  height: var(--icon-button);
  padding: 0;
  border: 0;
  border-radius: max(0px, calc(var(--radius-sm) - 2px));
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* Seams, not gaps -- the chip is one small object. */
#conn-chip button + button { border-left: var(--hairline) solid var(--rule); border-radius: 0; }
#conn-chip button:last-child {
  border-radius: 0 max(0px, calc(var(--radius-sm) - 2px))
                   max(0px, calc(var(--radius-sm) - 2px)) 0;
}
#conn-chip button:focus-visible { background: var(--paper-2); color: var(--accent-deep); }
#conn-chip button.is-danger:focus-visible { color: var(--danger); }
/* Guarded: the chip stays on the board after a tap, so an unguarded
   hover would leave one button lit for as long as it was up. */
@media (hover: hover) {
  #conn-chip button:hover { background: var(--paper-2); color: var(--accent-deep); }
  #conn-chip button.is-danger:hover { color: var(--danger); }
}
#conn-chip .ico {
  width: var(--icon-glyph);
  height: var(--icon-glyph);
  color: var(--accent-text);
  transition: transform var(--dur-base) var(--ease-back);
}
@media (hover: hover) {
  #conn-chip button:hover .ico { transform: scale(var(--btn-grow)) translateY(var(--btn-lift)); }
  #conn-chip button.is-danger:hover .ico { color: var(--danger); }
}

/* Fallback without color-mix() -- see tokens.css section 7. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .ctx-chip { box-shadow: inset 0 0 0 var(--hairline) rgb(var(--ink-c) / 22%); }
}