/* Shared process-panel layout for the area-based material calculators.
   Presentation only: groups measurement and ordering steps without changing calculator behavior. */

.process-panel {
  max-width: 880px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.process-panel + .process-panel {
  margin-top: 18px;
}

.process-panel > h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.process-panel .plan-area-builder {
  margin-top: 0;
}

.process-panel .geometry-fields {
  margin-top: 14px;
}

.process-panel .geometry-fields label {
  min-width: 0;
}

.process-panel .geometry-fields input[type="number"] {
  width: min(100%, 9.5rem);
  max-width: 9.5rem;
}

/* Keep shared PlanAreaBuilder units with their descriptors: Length (ft), Width (ft), etc. */
.process-panel .plan-area-builder label:has(> [data-linear-unit]),
.process-panel .plan-area-builder label:has(> [data-area-unit]),
.process-panel .plan-area-builder label:has(> .section-linear-unit) {
  display: block;
}

.process-panel .plan-area-builder [data-linear-unit]::before,
.process-panel .plan-area-builder [data-area-unit]::before,
.process-panel .plan-area-builder .section-linear-unit::before {
  content: " (";
}

.process-panel .plan-area-builder [data-linear-unit]::after,
.process-panel .plan-area-builder [data-area-unit]::after,
.process-panel .plan-area-builder .section-linear-unit::after {
  content: ")";
}

.process-panel .plan-area-builder label:has(> [data-linear-unit]) > input,
.process-panel .plan-area-builder label:has(> [data-area-unit]) > input,
.process-panel .plan-area-builder label:has(> .section-linear-unit) > input {
  display: block;
  margin-top: 4px;
}

[data-plan-area-panel="rectangle"]::before {
  content: "Enter the length and width to calculate the project area.";
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}

[data-plan-area-panel="rectangle"] > .plan-area-live-preview {
  display: none;
}

.plan-area-live-preview small {
  display: none;
}

/* Match Foundation/Footing's concise diagram caption treatment. */
.process-panel .measurement-diagram figcaption > * {
  display: none;
}

.process-panel .measurement-diagram figcaption::before {
  content: "Live measurement check";
  color: var(--muted);
  font-size: .88rem;
  font-weight: 600;
}

.process-panel .measurement-diagram figcaption::after {
  color: var(--navy-deep);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.3;
}

.process-panel .measurement-diagram[data-shape="rectangle"] figcaption::after { content: "rectangle"; }
.process-panel .measurement-diagram[data-shape="triangle"] figcaption::after { content: "triangle"; }
.process-panel .measurement-diagram[data-shape="circle"] figcaption::after { content: "circle"; }
.process-panel .measurement-diagram[data-shape="semicircle"] figcaption::after { content: "semicircle"; }
.process-panel .measurement-diagram[data-shape="trapezoid"] figcaption::after { content: "trapezoid"; }

.setup-controls {
  align-items: end;
  max-width: 620px;
}

.setup-controls select {
  max-width: 240px;
}

@media (min-width: 761px) {
  .process-panel .grid.geometry-fields {
    justify-content: start;
    align-items: start;
    gap: 14px 18px;
    max-width: none;
  }

  [data-plan-area-panel="rectangle"]::before {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
  }

  [data-plan-area-panel="rectangle"] > .grid {
    grid-row: 2;
  }

  [data-plan-area-panel="rectangle"] > .measurement-diagram-host {
    grid-row: 2;
  }

  [data-plan-area-panel="rectangle"] > .plan-area-live-preview {
    grid-row: 3;
  }

  .process-grid-1 {
    grid-template-columns: minmax(145px, 165px);
  }

  .process-grid-2 {
    grid-template-columns: repeat(2, minmax(145px, 165px));
  }

  .process-grid-3 {
    grid-template-columns: repeat(3, minmax(145px, 165px));
  }

  .process-grid-4 {
    grid-template-columns: repeat(4, minmax(145px, 165px));
  }

  .process-grid-5 {
    grid-template-columns: repeat(3, minmax(145px, 165px));
  }

  .setup-controls {
    grid-template-columns: minmax(210px, 240px) auto;
    gap: 18px 24px;
  }
}

@media (max-width: 760px) {
  .process-panel {
    padding: 12px;
  }

  .process-panel .grid.geometry-fields,
  .setup-controls {
    grid-template-columns: 1fr;
  }

  .process-panel .geometry-fields input[type="number"],
  .setup-controls select {
    width: 100%;
    max-width: none;
  }
}

/* Desktop/tablet field rows: descriptor and compact control on one line. */
@media (min-width: 761px) {
  .process-panel > .grid.geometry-fields {
    grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
    max-width: 760px;
    justify-content: start;
  }

  .process-panel > .grid.geometry-fields label:has(> input[type="number"]) {
    display: grid;
    grid-template-columns: minmax(130px, 190px) 9.5rem;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
  }

  .process-panel > .grid.geometry-fields label:has(> input[type="number"]) > input {
    grid-column: 2;
    grid-row: 1;
    width: 9.5rem;
    max-width: 9.5rem;
    margin: 0;
    justify-self: start;
  }

  .process-panel > .grid.geometry-fields label:has(> input[type="number"]) > small {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* The shared area builder has separate text + unit spans, so flex keeps them together. */
  .process-panel .plan-area-builder label:has(> input[type="number"]) {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 0;
  }

  .process-panel .plan-area-builder label:has(> input[type="number"]) > input {
    width: 9.5rem;
    max-width: 9.5rem;
    margin: 0 0 0 12px;
    flex: 0 0 9.5rem;
  }

  [data-plan-area-panel="rectangle"] {
    grid-template-columns: minmax(280px, 310px) minmax(260px, 290px);
    max-width: 630px;
  }

  [data-plan-area-panel="rectangle"] > .grid,
  [data-plan-area-panel="known_area"] > .grid,
  .section-dimensions.grid {
    grid-template-columns: 1fr;
  }

  [data-plan-area-panel="known_area"] > .grid {
    width: min(100%, 320px);
  }
}

/* Design System v0.3 — true inline field rows on tablet/desktop. */
@media (min-width: 761px) {
  .process-panel .plan-area-builder [data-linear-unit]::before,
  .process-panel .plan-area-builder [data-area-unit]::before,
  .process-panel .plan-area-builder .section-linear-unit::before {
    content: "(";
  }

  .process-panel .plan-area-builder [data-linear-unit],
  .process-panel .plan-area-builder [data-area-unit],
  .process-panel .plan-area-builder .section-linear-unit {
    margin-left: .25em;
  }

  .process-panel .plan-area-builder label:has(> input[type="number"]) {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    gap: 0;
  }

  .process-panel .plan-area-builder label:has(> input[type="number"]) > input {
    flex: 0 0 9.5rem;
    width: 9.5rem;
    max-width: 9.5rem;
    margin: 0 0 0 8px;
  }

  .process-panel > .grid.geometry-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    gap: 14px 18px;
  }

  .process-panel > .grid.geometry-fields.process-grid-1 {
    grid-template-columns: minmax(0, 430px);
  }

  .process-panel > .grid.geometry-fields label:has(> input[type="number"]) {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    gap: 8px;
  }

  .process-panel > .grid.geometry-fields label:has(> input[type="number"]) > input {
    flex: 0 0 9.5rem;
    width: 9.5rem;
    max-width: 9.5rem;
    margin: 0;
  }

  .process-panel > .grid.geometry-fields label:has(> input[type="number"]) > small {
    flex: 1 0 100%;
    width: 100%;
    white-space: normal;
  }

  [data-plan-area-panel="rectangle"] {
    grid-template-columns: minmax(260px, 300px) minmax(260px, 290px);
    max-width: 620px;
  }

  [data-plan-area-panel="rectangle"] > .grid,
  [data-plan-area-panel="known_area"] > .grid,
  .section-dimensions.grid {
    width: max-content;
    max-width: 100%;
  }
}