/**
 * Make My Desk — Product-specific Styles
 *
 * Shared layout, buttons, inputs, pricing, and preview styles are
 * provided by Core Make My (core-configurator.css).
 * This file contains only desk-specific UI components.
 */

/* Desk's edge-detail / corner-rounding / SVG-preview components live in the
   sibling desk-edge-preview.css, declared as a dep of this sheet (efficiency
   #232 moved them out of Core). The shared, unprefixed callout-leader and
   edge-detail-tooltip chrome stays in core/assets/css/core-edge-preview.css. */

/* The cable gallery (`.desk-cable-gallery` + card / svg / hint) is the same
   control as the corner-rounding gallery, so its rules are comma-joined onto
   that family in desk-edge-preview.css — the padding override below is the one
   thing that differs (efficiency #223). */
.desk-cable-gallery-card {
  padding: 8px 16px;
}

/* =========================================
   Typed per-corner radius list
   (sits below the corner-rounding readout)
   ========================================= */

.desk-corner-typed-header {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  margin-bottom: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-strong);
}

.desk-corner-typed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.desk-corner-typed-row:last-child {
  margin-bottom: 0;
}

.desk-corner-typed-label {
  font-size: var(--fs-13);
  color: var(--ink-soft);
}

.desk-corner-typed-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.desk-corner-typed-unit {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  width: 18px;
}

/* =========================================
   Cable Hole Styles
   ========================================= */

/* No !important needed: SVG presentation attributes lose to any author rule,
   so this class already beat the fill/stroke the renderers used to set — those
   setAttribute calls are gone too (efficiency #222).

   The hole shows the preview's own background through it. It carries no ring:
   the 2D finish (Render2DStyle addHoleWalls) draws the board wall seen down
   the hole and a 1px rim above it, and a ring here would double that rim. */
.cable-hole-indicator {
  fill: var(--core-preview-bg);
  stroke: none;
  cursor: pointer;
}

/* (The `.cable-hole-label` / `.cable-hole-callout-bg` callout pair and the
   `.desk-cable-holes-header` toolbar were left behind when cable holes moved
   into the stepper's per-hole cards — no markup emits them. Deleted,
   efficiency #222.) */

.desk-cable-hole-sections {
  margin-top: var(--sp-4);
}

.desk-cable-hole-section {
  margin-bottom: var(--sp-3);
  padding: 20px 0 12px 0;
  font-family: var(--font-sans);
}

.desk-cable-hole-section + .desk-cable-hole-section {
  border-top: 1px solid var(--rule-strong);
}

.desk-cable-hole-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
}

.desk-cable-hole-error-row {
  margin-top: calc(-1 * var(--sp-2));
  justify-content: center;
}

.desk-cable-hole-row {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  max-width: 100%;
}

/* Reference Grid — sized by its cells (three 32px buttons a side), so the
   frame never disagrees with the rung the cells sit on. */
.desk-reference-grid {
  display: grid;
  grid-template-rows: repeat(3, var(--h-btn-sm));
  gap: 2px;
  background: var(--paper-soft);
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-sm);
  padding: 2px;
  width: max-content;
  box-sizing: border-box;
  flex-shrink: 0;
}

.desk-grid-row {
  display: grid;
  grid-template-columns: repeat(3, var(--h-btn-sm));
  gap: 2px;
}

/* Cells are <button>s (issue #452): zero the UA box so they draw exactly as
   the old divs did; keyboard focus takes the global :focus-visible ring.
   32px — the configurator's one button rung (Design.md §5.4, inc. #340). */
.desk-grid-cell {
  padding: 0;
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  user-select: none;
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  box-sizing: border-box;
}

/* Background + border colours for both states are comma-joined onto Core's
   handle-anchor grid in core-configurator.css (efficiency #223); only the
   lettered cell's text colour is Desk's. Hover firms the letter to Ink — the
   accent border and tint already say "hovered", and a darkened accent is a
   colour the brand doesn't own (Design.md §3.5). */
.desk-grid-cell:hover {
  color: var(--ink);
}

.desk-grid-cell.desk-grid-active {
  color: var(--paper);
}

/* Offset Controls */
.desk-offset-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.desk-offset-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.desk-arrow-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.desk-arrow-vertical {
  transform: rotate(90deg);
}

.desk-offset-input-field {
  width: 100%;
  min-width: 0;
  height: var(--h-control);
  padding: 0 8px;
  border: 1px solid var(--rule-interactive);
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  font-family: inherit;
  background: var(--paper);
  transition: border-color var(--dur-base) var(--ease);
  box-sizing: border-box;
}

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

.desk-offset-input-field::placeholder {
  color: var(--ink-faint);
  font-size: var(--fs-12);
}

/* Body + :hover come from the shared round-"×" rule in core-configurator.css
   (efficiency #223); only the float-above-the-card placement is Desk's. */
.desk-cable-hole-delete-x {
  position: absolute;
  top: calc(-1 * var(--sp-4));
  right: 0;
}

/* Card chrome comes from the shared `.core-validation-messages
   .core-validation-messages--inline` pair, which the markup carries alongside
   this class (inconsistency #95); only the inset placement is Desk's. Left-
   aligned, because the inline variant hangs off a line down its left edge. */
.desk-cable-hole-error-message {
  margin: 2px var(--sp-2);
  width: calc(100% - 2 * var(--sp-2));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 20px;
}

/* Colour and size inherit from the shared card; only the weight is Desk's. */
.desk-error-text {
  font-weight: var(--fw-regular);
}

/* Cable cut-out cards — these classes replaced the inline style= attributes
   the JS-built markup used to carry (efficiency #270). Values are the
   verbatim inline ones; the cards share `.desk-cable-hole-section` chrome
   and the shared round-"×" delete with the cable-hole cards. */
.desk-cutout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* The cut-out "×" sits in the header row, not floated above the card. */
.desk-cutout-header .desk-cable-hole-delete-x {
  position: static;
}

.desk-cutout-edge-row {
  margin-bottom: var(--sp-2);
}

.desk-cutout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.desk-cutout-label {
  font-size: var(--fs-12);
}

.desk-cutout-edge-row .core-select,
.desk-cutout-grid .core-input {
  width: 100%;
}

/* (`.cable-hole-error-indicator` — six !importants — and the
   `.desk-cable-hole-positions` mobile override had no markup left. Deleted,
   efficiency #222; nothing in this file needs !important now.) */

/* The inner corner offsets' readout line (D52): what the two offsets make of
   the corner, e.g. "600mm deep and 800mm wide at the corner". */
.desk-corner-offset-readout {
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    background: var(--paper-soft);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-normal);
}

/* =========================================
   Pre-designed dimensions readout
   The Width / Depth rows under the pre-designed picker
   (Desk_Stepper_Sections) — a Pebble panel, on tokens rather than the
   inline #f9f9f9 it used to carry (efficiency #561).
   ========================================= */

.desk-predesigned-dimensions {
  margin-top: var(--sp-3);
  padding: var(--sp-2);
  background: var(--paper-soft);
  border-radius: var(--r-sm);
}