/* =========================================================================
   Core — shared 2D-preview annotation chrome (callout leaders + edge-detail
   tooltip). Both Desk and Table declare this handle.

   Every selector here is unprefixed and painted by Core's own JS, which is
   what keeps it in Core: the `.callout-leader-group` / `.callout-label` /
   `.callout-leader` / `.callout-tick` family comes from
   assets/js/core-callout-leader.js, and the `.edge-detail-tooltip` family
   from assets/js/rendering/features/EdgeDetailFeature.js. Both modules reach
   that JS through the `core-feature-registry` / `core-rendering` chain, so
   both need these rules.

   The `.desk-*` half of this sheet moved to desk/assets/css/
   desk-edge-preview.css and the `.table-*` pair to table-configurator.css
   (efficiency #232) — module CSS hosted here hid each module's true
   footprint. Don't re-add a module-prefixed rule to this file: put it in the
   module's own sheet, which declares this handle as a dep so these rules
   still print first.
   ========================================================================= */

/* Unified callout leader line styles */
.callout-leader-group {
  transition: opacity var(--dur-fast) var(--ease);
}

.callout-leader-group[data-callout-type="corner"] {
  cursor: pointer;
}

.callout-leader-group[data-callout-type="corner"]:hover .callout-label {
  fill: var(--ink);
}

.callout-leader-group[data-callout-type="corner"]:hover .callout-leader,
.callout-leader-group[data-callout-type="corner"]:hover .callout-tick {
  stroke: var(--ink);
}

/* Desk's 2D finish (Render2DStyle applyMarks): the callouts stay hidden and
   the drawing carries a quiet mark each — a letter off a profiled edge run,
   R100 off a rounded corner. Hovering an edge opens its profile card;
   hovering a corner thickens its arc and opens the matching corner card.
   The caption under the drawing keys the letters. */
.callout-leader-group.is-hover-callout {
  display: none;
}

.core-2d-style-mark {
  fill: var(--ink);
}

.core-2d-style-arc-hot {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.core-2d-style-arc-hot.is-shown {
  opacity: 1;
}

.core-2d-caption.core-2d-style-edge-key {
  right: auto;
  max-width: calc(100% - 10rem);
  pointer-events: auto;
}

.core-2d-style-key-row + .core-2d-style-key-row::before {
  content: "\00b7";
  margin: 0 var(--sp-2);
}

.core-2d-style-key-letter {
  color: var(--ink);
  margin-right: var(--sp-1);
}

.core-preview-container.is-3d-mode .core-2d-style-edge-key {
  display: none;
}

/* Edge detail hover tooltip */
.edge-detail-tooltip {
  position: absolute;
  z-index: var(--z-overlay);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-2);
  max-width: 200px;
  pointer-events: none;
  font-family: var(--font-sans);
}

.edge-detail-tooltip-header {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: 8px;
}

.edge-detail-tooltip-body {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.edge-detail-tooltip-illustration {
  flex-shrink: 0;
}

/* One column per face (Top / Bottom), built by EdgeDetailFeature.js —
   classes on tokens rather than the inline greys it used to write
   (efficiency #561). */
.edge-detail-tooltip-faces {
  display: flex;
  gap: var(--sp-3);
}

.edge-detail-tooltip-face {
  text-align: center;
}

.edge-detail-tooltip-face-label {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
}

.edge-detail-tooltip-face-name {
  margin-top: var(--sp-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--ink);
}

.edge-detail-tooltip-face-desc {
  margin-top: 2px;
  font-size: var(--fs-11);
  color: var(--ink-muted);
}