/* ==========================================================================
   IPS.CSS — IPS Duct Panel Configurator Styles
   toilet-cubicle.co.uk — A Paneltech brand (see docs/brand/BRAND.md)

   Clones the wash trough configurator shell (css/washtrough.css) on the
   shared design tokens. Buttons, swatches, kickers, inputs and form
   hints come from css/components.css — nothing shared is duplicated.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Page Layout
   ------------------------------------------------------------------------- */

.ips-page {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  background-color: var(--color-off-white);
}

/* -------------------------------------------------------------------------
   Hero strip — kicker, h1, product sentence, CAD request link
   ------------------------------------------------------------------------- */

.ips-hero {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.ips-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}

.ips-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-grey-900);
  margin-bottom: var(--sp-1);
}

.ips-hero__lede {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  max-width: 58ch;
  margin-bottom: 0;
}

.ips-hero__cad {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;
  padding: 0 var(--sp-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-petrol);
  text-decoration: none;
  white-space: nowrap;
}

.ips-hero__cad:hover {
  color: var(--color-petrol-dark);
  text-decoration: underline;
}

.ips-hero__cad:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   Configurator grid — drawing front-and-centre, options panel right
   ------------------------------------------------------------------------- */

.ips-configurator {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .ips-configurator {
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: stretch;
  }
}

/* -------------------------------------------------------------------------
   SVG Viewport
   ------------------------------------------------------------------------- */

.ips-viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  padding-top: calc(var(--sp-3) + 56px); /* clear the floating view toggle */
  background-color: var(--color-white);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  min-height: 440px;
  /* Belt-and-braces: allow this grid/flex item to shrink below its
     content width so a wide SVG can never widen the page. */
  min-width: 0;
}

@media (min-width: 1024px) {
  .ips-viewport {
    padding: var(--sp-4);
    padding-top: calc(var(--sp-4) + 56px);
    min-height: calc(100vh - var(--header-height) - 160px);
    min-height: calc(100dvh - var(--header-height) - 160px);
  }
}

.ips-viewport svg {
  /* The elevation is portrait, so it must FILL the column WIDTH (the width
     axis governs preserveAspectRatio="meet"). js/ips.js sizes the box height
     to the drawing on desktop/tablet (>=1024px), and the @media block below
     sets a tall fixed height on phones — both make width the governing axis.
     The old min-height:300px / max-height:62vh cap forced a short, wide box
     that letterboxed this portrait drawing into a narrow centred strip. */
  width: 100%;
  /* Belt-and-braces: the SVG can never exceed its container width, and any
     paint that lands outside the viewBox is clipped rather than widening
     the layout. With the renderer's viewBox guard, nothing is clipped. */
  max-width: 100%;
  overflow: hidden;
  flex: 0 0 auto;
  /* No-JS / pre-script fallback box: portrait, so width still governs.
     js/ips.js overrides this with an exact pixel height once it runs. */
  aspect-ratio: 5 / 8;
}

/* Cap the drawing on desktop so it doesn't grow huge on wide monitors. The
   viewport column is full-bleed (viewport width minus the 400px sidebar),
   which on a 2560px screen is ~2100px — filling that with a portrait elevation
   made it excessively large. Hold the drawing to roughly the width it would
   have inside the site's content/title width (container-max 1280px minus the
   400px sidebar) and centre it in the grid canvas. Placed AFTER the base rule
   so it wins on source order. js/ips.js reads this capped width when sizing
   the height, so the whole drawing scales down proportionally. */
@media (min-width: 1024px) {
  .ips-viewport svg {
    max-width: calc(var(--container-max) - 400px);
    align-self: center;
  }
}

/* In-SVG bay hit areas — keyboard focus ring (petrol, never lime) */
.ips-svg-bay {
  cursor: pointer;
}

.ips-svg-bay:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* In-SVG vertical flashgap hit areas — click-to-edit targets. Pointer
   cursor + a subtle teal-tint hover wash (BRAND.md §4: teal-tint hover
   fills); focus ring petrol, never lime. The selected gap's lime highlight
   is drawn by the renderer (.ips-svg-bay-selected outline). */
.ips-fg-hit {
  cursor: pointer;
  fill: transparent;
  transition: fill var(--transition-fast);
}

.ips-fg-hit:hover {
  fill: var(--color-teal-tint);
  fill-opacity: 0.45;
}

.ips-fg-hit:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* View toggle buttons */
.ips-view-toggle {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  z-index: 2;
}

.ips-view-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-grey-200);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ips-view-btn:last-child {
  border-right: none;
}

.ips-view-btn:hover:not(.active) {
  background-color: var(--color-grey-100);
  color: var(--color-text-primary);
}

.ips-view-btn:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: -2px;
}

.ips-view-btn.active {
  color: var(--color-white);
  background-color: var(--color-petrol);
}

/* -------------------------------------------------------------------------
   Specification strip + readout — mono figures under the drawing
   ------------------------------------------------------------------------- */

.ips-spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  margin-inline: auto;
  /* Never let the long readout string force the spec strip — and through
     it the viewport and document — wider than the available column. */
  max-width: 100%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-charcoal);
}

.ips-readout {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--color-charcoal);
  /* The readout is a long single string. It was white-space:nowrap, which
     forced .ips-spec — and through it the viewport and document — wider than
     the column (the 375px → 716px shrink-to-fit overflow, and a latent
     overflow at the 1024px breakpoint where the ~634px line exceeds the
     ~560px column). Letting it wrap fixes both while leaving the look intact
     wherever the line does fit on one row. */
  white-space: normal;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ips-spec__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-grey-600);
  white-space: nowrap;
}

.ips-spec__chip {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid var(--color-grey-300);
  background-color: var(--color-white);
}

.ips-caption {
  text-align: center;
  font-size: var(--text-2xs);
  color: var(--color-grey-600);
  line-height: var(--leading-snug);
  max-width: 72ch;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------------- */

.ips-sidebar {
  background-color: var(--color-white);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Belt-and-braces (mirrors .ips-viewport): a grid item defaults to
     min-width:auto (its min-content), which on the single-column mobile
     grid (grid-template-columns:1fr) widened the shared 1fr track — and
     through it the document — to ~391px at a 375 viewport. Letting the
     sidebar shrink to its track removes the overflow. On desktop the
     sidebar track is an explicit 400px, so this is a no-op there. */
  min-width: 0;
}

/* Sidebar header — title + mobile close button */
.ips-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-grey-100);
  flex-shrink: 0;
}

.ips-sidebar__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  margin-bottom: 0;
}

.ips-sidebar__close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-grey-600);
  background: var(--color-grey-100);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ips-sidebar__close:hover {
  background-color: var(--color-grey-200);
  color: var(--color-grey-900);
}

.ips-sidebar__close:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* Tabs */
.ips-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-grey-50);
  position: sticky;
  top: 0;
  z-index: 2;
}

.ips-tabs [role="tab"] {
  flex: 1;
  min-height: 44px;
  padding: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
  text-align: center;
}

.ips-tabs [role="tab"]:hover {
  color: var(--color-text-primary);
}

.ips-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: -2px;
}

.ips-tabs [role="tab"][aria-selected="true"] {
  color: var(--color-petrol);
  border-bottom-color: var(--color-petrol);
  background-color: var(--color-white);
}

/* Tab panels */
.ips-sidebar [role="tabpanel"] {
  padding: var(--sp-3);
  flex: 1;
}

/* Fieldsets */
.ips-sidebar fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--sp-4) 0;
}

.ips-sidebar fieldset:last-child {
  margin-bottom: 0;
}

/* Kicker legends — shared recipe from components.css; normalise legend box */
.ips-sidebar legend.kicker {
  display: inline-flex;
  width: 100%;
  padding: 0;
  border: none;
}

/* -------------------------------------------------------------------------
   Stepper — − / mono value / + (BRAND.md §4)
   ------------------------------------------------------------------------- */

.ips-stepper {
  display: flex;
  align-items: stretch;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius);
  overflow: hidden;
}

.ips-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 44px;
  flex-shrink: 0;
  color: var(--color-petrol);
  background-color: var(--color-grey-50);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ips-stepper__btn:first-child {
  border-right: 1px solid var(--color-grey-200);
}

.ips-stepper__btn:last-child {
  border-left: 1px solid var(--color-grey-200);
}

.ips-stepper__btn:hover:not(:disabled) {
  background-color: var(--color-petrol-tint);
  color: var(--color-petrol-dark);
}

.ips-stepper__btn:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: -2px;
}

.ips-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ips-stepper__value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-grey-900);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Remaining readout — mono; red + role=alert on overflow
   ------------------------------------------------------------------------- */

.ips-remaining {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-grey-600);
  line-height: var(--leading-snug);
}

.ips-remaining--error {
  color: var(--color-error);
}

/* -------------------------------------------------------------------------
   Radio group — height mode (pill pair, teal-tint selected state)
   ------------------------------------------------------------------------- */

.ips-radio-group {
  display: flex;
  gap: var(--sp-1);
}

.ips-radio-group label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  margin-bottom: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background-color: var(--color-grey-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

/* Selected state — teal-tint bg + petrol border (BRAND.md §1, §4) */
.ips-radio-group label.ips-radio-group--selected {
  color: var(--color-petrol-dark);
  font-weight: var(--weight-semibold);
  background-color: var(--color-teal-tint);
  border-color: var(--color-petrol);
  box-shadow: 0 0 0 1px var(--color-petrol);
}

.ips-radio-group input[type="radio"] {
  /* Visually hidden but accessible */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ips-radio-group label:has(input:focus-visible) {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Auto panel count display
   ------------------------------------------------------------------------- */

.ips-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--text-sm);
  background-color: var(--color-grey-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-primary);
}

.ips-display__label {
  color: var(--color-text-secondary);
}

.ips-display__value {
  font-weight: var(--weight-medium);
  font-family: var(--font-mono);
}

/* -------------------------------------------------------------------------
   Fixture run builder — bay cards
   ------------------------------------------------------------------------- */

.ips-bays {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.ips-bays__empty {
  padding: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background-color: var(--color-grey-50);
  border: 1px dashed var(--color-grey-300);
  border-radius: var(--radius);
  text-align: center;
}

.ips-bay {
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
  background-color: var(--color-grey-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ips-bay:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* Selected bay — teal-tint bg + petrol border, matching the drawing's
   lime highlight (BRAND.md §1: configurator selected state) */
.ips-bay--selected {
  background-color: var(--color-teal-tint);
  border-color: var(--color-petrol);
  box-shadow: 0 0 0 1px var(--color-petrol);
}

.ips-bay__head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: 4px;
}

.ips-bay__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-petrol);
}

.ips-bay__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-grey-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ips-bay__btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.ips-bay__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-petrol);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ips-bay__btn:hover:not(:disabled) {
  background-color: var(--color-petrol-tint);
  color: var(--color-petrol-dark);
}

.ips-bay__btn--remove:hover:not(:disabled) {
  background-color: rgba(198, 40, 40, 0.10);
  color: var(--color-error);
}

.ips-bay__btn:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: -2px;
}

.ips-bay__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ips-bay__width {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: 0;
  cursor: pointer;
}

.ips-bay__width-label {
  flex-shrink: 0;
  width: 48px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.ips-bay__width .input-with-unit {
  flex: 1;
}

/* Mono for numeric dimension fields (BRAND.md §4) */
.ips-bay__width-input {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  height: 44px;
}

.ips-bay__hint {
  margin-top: 4px;
  padding-left: calc(48px + var(--sp-1));
}

/* -------------------------------------------------------------------------
   Horizontal panel splits — run-wide stacked-panel builder.

   The user adds LOWER-panel heights (bottom-up); the TOP panel takes the
   remaining usable height (shown read-only). Rows reuse the bay-card width
   row + stepper-button styling; only the split-specific container and the
   top-panel readout are styled here.
   ------------------------------------------------------------------------- */

.ips-splits {
  list-style: none;
  margin: 0 0 var(--sp-1);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Lower-panel row — a lighter card than the fixture bay cards. The inner
   .ips-bay__width row + .ips-split__input + .ips-split__remove inherit the
   shared bay-card field/button styles. Panels are numbered bottom-up. */
.ips-split {
  padding: 6px var(--sp-1) 6px var(--sp-1);
  background-color: var(--color-grey-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ips-split .ips-bay__width {
  margin-bottom: 0;
}

/* Read-only TOP-panel remainder readout — mono, mirrors the spec strip. */
.ips-splits-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  min-height: 44px;
  margin-top: var(--sp-1);
  padding: 10px 12px;
  font-size: var(--text-sm);
  background-color: var(--color-grey-50);
  border: 1px dashed var(--color-grey-300);
  border-radius: var(--radius);
  color: var(--color-text-primary);
}

.ips-splits-top__label {
  color: var(--color-text-secondary);
}

.ips-splits-top__value {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--color-grey-900);
  white-space: nowrap;
}

/* Split validation note — reuses .ips-remaining (mono; red on error). */
.ips-splits-note {
  margin-top: 6px;
}

/* -------------------------------------------------------------------------
   Add bay row
   ------------------------------------------------------------------------- */

.ips-add__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.ips-add__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.ips-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-petrol);
  background-color: var(--color-white);
  border: 1px solid var(--color-petrol);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ips-add-btn:hover {
  background-color: var(--color-petrol-tint);
  color: var(--color-petrol-dark);
}

.ips-add-btn:focus-visible {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Choice cards — material / access / end conditions
   ------------------------------------------------------------------------- */

.ips-choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.ips-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  min-height: 44px;
  padding: 10px 12px;
  margin-bottom: 0;
  background-color: var(--color-grey-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* Selected state — teal-tint bg + petrol border (BRAND.md §1, §4) */
.ips-choice--selected {
  background-color: var(--color-teal-tint);
  border-color: var(--color-petrol);
  box-shadow: 0 0 0 1px var(--color-petrol);
}

.ips-choice input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.ips-choice__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ips-choice__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-grey-900);
}

.ips-choice--selected .ips-choice__title {
  color: var(--color-petrol-dark);
}

.ips-choice__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

.ips-choice:has(input:focus-visible) {
  outline: 2px solid var(--color-petrol);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Overview / Stepper strip
   ------------------------------------------------------------------------- */

.ips-overview {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-grey-50);
}

.ips-overview__steps {
  display: flex;
  gap: var(--sp-2);
}

.ips-overview__step {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding-top: var(--sp-1);
  border-top: 3px solid var(--color-grey-200);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.ips-overview__step--complete {
  color: var(--color-petrol);
  border-top-color: var(--color-petrol);
}

/* -------------------------------------------------------------------------
   Action Buttons
   ------------------------------------------------------------------------- */

.ips-actions {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  position: sticky;
  bottom: 0;
}

/* -------------------------------------------------------------------------
   Mobile drawer scaffolding — kept in the DOM but inert on phones.

   The drawer toggle / backdrop / close button exist for the legacy
   off-canvas pattern, but on phones the IPS configurator mirrors the
   cubicle reference (css/configurator.css): it ABANDONS the drawer and
   stacks the sidebar inline under the drawing so the whole page scrolls.
   Below 1024px these three are display:none and the inline-stack rules
   in the @media block take over. js/ips.js initSidebarDrawer() still binds
   but is harmless because the toggle is never clickable.
   ------------------------------------------------------------------------- */

.ips-sidebar-toggle {
  display: none;
}

.ips-sidebar-backdrop {
  display: none;
}

/* =========================================================================
   MOBILE / TABLET — Below 1024px
   Stacked layout: drawing on top (height-capped), sidebar inline below,
   the document itself scrolls. Mirrors the cubicle reference pattern.
   ========================================================================= */

@media (max-width: 1023px) {
  /* Undo the desktop "lock the page, scroll inside panes" so the document
     scrolls. The page wrapper is already height:auto below 1024px. */
  .ips-page {
    min-height: auto;
  }

  .ips-configurator {
    grid-template-columns: 1fr;
  }

  /* On phones the drawing must fill the FULL available width and stay
     legible — never the thin centred column that a short height cap +
     "meet" letterboxing produced on the portrait elevation viewBox.
     Drop the height cap so the SVG is sized by WIDTH, not a short height;
     if that makes it tall the page just scrolls (this whole layout is the
     inline-scroll stack). Tighten only the floating-toggle clearance. */
  .ips-viewport {
    min-height: 0;
    padding-top: calc(var(--sp-3) + 52px);
  }

  /* js/ips.js (renderDrawing) sizes the box height to the drawing on EVERY
     screen so the elevation fills the FULL column width — never the thin
     centred strip a short vh cap + "meet" letterboxing produced. No
     max-height cap here: capping the height would re-letterbox the portrait
     drawing. If the drawing is tall the page just scrolls (this whole layout
     is the inline-scroll stack). The aspect-ratio:5/8 fallback from the base
     rule covers the no-JS case. */
  .ips-viewport svg {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
  }

  /* Sidebar flows inline in normal document order below the drawing — no
     off-canvas transform, no overlay, no internal scroll container. Every
     control is reached by scrolling the page (cubicle parity). */
  .ips-sidebar {
    position: relative;
    transform: none;
    visibility: visible;
    border-left: none;
    border-top: 1px solid var(--color-grey-100);
    overflow: visible;
    box-shadow: none;
  }

  /* The Add-to-quote / Download actions are part of the inline scroll on
     mobile — no sticky strip floating over the document. */
  .ips-actions {
    position: static;
  }

  /* The tabs are sticky-to-pane on desktop; on the inline stack a top:0
     sticky bar would slide under the sticky site header and float over the
     drawing. Let it scroll with the document (cubicle parity). */
  .ips-tabs {
    position: static;
  }

  /* No drawer machinery on the stacked layout. */
  .ips-sidebar-toggle {
    display: none;
  }

  .ips-sidebar__close {
    display: none;
  }

  .ips-sidebar-backdrop,
  .ips-sidebar-backdrop[hidden] {
    display: none !important;
  }
}