/* =========================================================================
   Make My Desk — edge-detail / corner-rounding / SVG-preview components

   Lived in core/assets/css/core-edge-preview.css until efficiency #232.
   Every rule here is `.desk-*`: it is Desk's 2D editing surface, not shared
   chrome, and hosting it in Core made "which sheets does Desk own?" wrong by
   default. What stayed behind in core-edge-preview.css is the genuinely
   shared, unprefixed layer that Core's own JS paints — the
   `.callout-leader-group` family (core-callout-leader.js) and the
   `.edge-detail-tooltip` family (rendering/features/EdgeDetailFeature.js) —
   which Table loads too. This sheet declares that handle as a dep, so the
   Core layer still prints ahead of it.

   Selectors are unchanged from the move. Several bodies are comma-joined with
   Desk's cable-hole gallery, whose one differing declaration lives in
   desk-configurator.css (efficiency #223).
   ========================================================================= */

/* =========================================
   Edge Hover & Detail Styles
   ========================================= */

.desk-edge-details {
  margin-top: var(--sp-3);
}

/* Gallery card / svg / hint family. Three galleries share it: the edge-detail
   gallery here, the corner-rounding gallery below, and Desk's cable-hole
   gallery (desk-configurator.css) — previously byte-identical copies, now
   comma-joined (efficiency #223). Only the card's padding and flex behaviour
   differ: the edge gallery lays two cards side by side, the other two centre a
   single card, so those two declarations stay with each variant. */
.desk-edge-gallery {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: 12px;
}

.desk-edge-gallery-card,
.desk-corner-gallery-card,
.desk-cable-gallery-card {
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-sm);
  text-align: center;
  background: var(--paper-soft);
}

.desk-edge-gallery-card {
  flex: 1;
  padding: 8px;
}

.desk-corner-gallery-card {
  padding: 8px 16px;
}

.desk-edge-gallery-svg {
  filter: grayscale(1);
  margin: 0 auto 4px;
  display: flex;
  justify-content: center;
}

.desk-edge-gallery-label {
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  color: var(--ink);
}

.desk-edge-gallery-face {
  font-size: var(--fs-11);
  color: var(--ink-muted);
}

.desk-edge-gallery-hint,
.desk-corner-gallery-hint,
.desk-cable-gallery-hint {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

.desk-no-edge-details {
  color: var(--ink-soft);
  padding: 8px 0;
}

.desk-edge-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0 0 8px 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: var(--fs-14);
}

/* The detail name and its "×", held together at the row's right. */
.desk-edge-detail-value {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* The round "×" dismiss body comes from `.core-btn--close` (core-controls.css,
   efficiency #229), which the markup carries. This rule never actually painted
   the control: desk-ui.js wrote the whole box model — plus a hardcoded `#999`
   and a pair of `onmouseover`/`onmouseout` hover handlers — into an inline
   `style=` attribute that outranked every declaration here. Both are gone. */
.desk-edge-detail-remove {
  margin-left: 8px;
}

/* =========================================
   Corner Rounding (sidebar tab)
   ========================================= */

.desk-corner-rounding {
  margin-top: var(--sp-3);
}

/* The corner gallery is centred rather than a row of flex:1 cards, so it keeps
   its own container rule; the card / hint bodies are shared above. Desk's
   cable-hole gallery (desk-configurator.css) is the same shape and joins here. */
.desk-corner-gallery,
.desk-cable-gallery {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.desk-corner-gallery-svg,
.desk-cable-gallery-svg {
  display: block;
}

.desk-corner-rounding-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0 0 8px 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: var(--fs-14);
}

/* The round "×" dismiss button body is shared with `.core-popup-close` and
   Desk's `.desk-cable-hole-delete-x` — see core-configurator.css, where all
   three are comma-joined (efficiency #223). */

/* =========================================
   Empty State (shared by Corner Rounding & Edge Details)
   ========================================= */

.desk-empty-state {
  color: var(--ink-soft);
  font-size: var(--fs-14);
  padding: 4px 0;
}

.desk-empty-state ol {
  margin: 0;
  padding-left: 20px;
}

.desk-empty-state li {
  margin-bottom: 4px;
  line-height: 1.4;
}

/* =========================================
   Corner Radius
   ========================================= */

/* The typed corner-radius list sits below the drawing, not on it, so it is an
   ordinary field on the 44px rung — not the §7.12 inline-input exception
   (Design.md §5.4, inc. #340). 16px text on phones stops the zoom. */
.desk-corner-input {
  width: 72px;
  height: var(--h-control);
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  text-align: center;
  transition: background-color var(--dur-base) var(--ease);
}

@media (width < 768px) {
  .desk-corner-input {
    font-size: var(--fs-16);
  }
}

.desk-corner-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--focus-ring);
}

/* A corner a flush cut-out has taken away: nothing to round, so the field
   steps back to a structural rule and Ink Faint (Design.md §3.3). */
.desk-corner-input:disabled {
  border-color: var(--rule);
  background: var(--paper-soft);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* =========================================
   SVG Preview Styles
   ========================================= */

.desk-desktop-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  overflow: hidden;
}

.desk-desktop-svg > * {
  transform-origin: center;
}

.desk-dimension-labels {
  font-family: var(--font-sans);
}

.desk-dimension-labels text {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  fill: var(--ink-soft);
  text-anchor: middle;
}

/* SVG pointer events */
.desk-desktop-svg circle,
.desk-desktop-svg rect,
.desk-desktop-svg text {
  pointer-events: all;
}

.desk-preview-container svg {
  pointer-events: all;
}