/* Laser Metal Fab — LIVE NEST + LASER CUT stage.
   Additive: a separate stylesheet so the estimator's own inline styles are untouched. Every rule
   is scoped under .lcut, and every colour comes from the site's existing custom properties, so
   the stage reads as the same product as the 3D preview it sits under rather than a bolt-on.

   Deliberately mirrors .lmf3d's card treatment (cream panel, bronze eyebrow, dark render bay,
   bone spec tiles) — a visitor should see one continuous "here is your part" flow, not two
   different widgets stacked. */

.lcut {
  margin-top: 22px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(180deg, #faf4ea, #efe4d0);
  overflow: hidden;
}
.lcut[hidden] { display: none; }

.lcut__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--edge); flex-wrap: wrap;
}
.lcut__title {
  font-family: var(--font-body); font-weight: 700; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bronze);
}
.lcut__tools { display: flex; gap: 6px; flex-wrap: wrap; }
.lcut__tools button {
  font: inherit; font-size: .72rem; font-weight: 600; color: var(--ink-soft);
  background: var(--white); border: 1px solid var(--edge); border-radius: 8px;
  padding: 6px 12px; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .1s ease;
}
.lcut__tools button:hover { border-color: var(--copper); color: var(--ink); }
.lcut__tools button:active { transform: translateY(1px); }
.lcut__tools button[hidden] { display: none; }
/* The primary call — the one that starts the show. */
.lcut__tools button.is-go { background: var(--copper); border-color: var(--copper); color: #fff; }
.lcut__tools button.is-go:hover { filter: brightness(1.07); color: #fff; }

/* ---- THE ONE BUTTON: the 3D render's corner control, while the stage owns it ----
   Zach, 2026-08-06: the Unfold button becomes the Nest & cut button, and after the cut it takes
   you back to the 3D render. estimator3d.js still owns that element — it rewrites the label on
   every frame of the fold tween — so the stage does NOT fight it for the text node. It sets
   data-lcut-cta, and these rules print the attribute instead of the native text. Result: the
   word changes exactly once, when the state changes, and never flickers to "Fold up" mid-unfold.

   The native text is collapsed rather than removed, so nothing about estimator3d's DOM changes;
   laser-stage.js also mirrors the label into aria-label for screen readers. */
.lmf3d__foldbtn[data-lcut-cta] { font-size: 0; letter-spacing: 0; }
.lmf3d__foldbtn[data-lcut-cta]::after {
  content: attr(data-lcut-cta);
  font-size: .74rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
/* estimator.html reserves 100px on the right of the orbit hint for a button that says "Fold up"
   (70px). Ours are longer — "⚡ Nest & cut" is 111px, so 123px from the stage's right edge — and
   MEASURED, the hint ran 23px underneath it. Reserve 145px while the stage owns the button.

   The doubled class is a deliberate specificity bump, not a typo. estimator.html carries its
   100px rule in an inline <style> that sits AFTER this stylesheet's <link>, at exactly the same
   specificity, so an evenly-matched rule here loses the cascade silently. */
.lmf3d__stage:has(.lmf3d__foldbtn[data-lcut-cta]) .lmf3d__hint.lmf3d__hint { padding: 0 145px 0 14px; }

/* The one press that starts the show reads as the primary action — molten, not chrome. */
.lmf3d__foldbtn[data-lcut-state="cut"] {
  background: linear-gradient(180deg, #d9822b, #b8601b);
  border-color: rgba(255, 208, 150, .75); color: #fff;
  box-shadow: 0 8px 24px rgba(180, 90, 20, .45), inset 0 1px 0 rgba(255, 235, 210, .35);
}
.lmf3d__foldbtn[data-lcut-state="cut"]:hover { filter: brightness(1.08); border-color: rgba(255, 224, 180, .95); }
/* Mid-cut it is a status, not a control — the panel's Skip is the control down there. */
.lmf3d__foldbtn[data-lcut-state="running"] {
  cursor: default; background: rgba(18, 15, 12, .62); color: #ffd9a8;
  border-color: rgba(255, 190, 120, .32); box-shadow: none;
}
.lmf3d__foldbtn[data-lcut-state="running"]:active { transform: none; }
.lmf3d__foldbtn[data-lcut-state="back"] { background: rgba(18, 15, 12, .7); border-color: rgba(255, 255, 255, .34); }

/* ---- the render bay ---- */
.lcut__stage {
  position: relative;
  height: clamp(260px, 38vw, 400px);
  background: #0d0d10;
}
.lcut__stage canvas { display: block; width: 100%; height: 100%; }

/* Phase badge — RAPID / PIERCING / CUTTING. Monospaced numerals so it does not jitter as the
   machine time ticks up underneath it. */
.lcut__phase {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  font-family: var(--font-body); font-weight: 700; font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: #ffd9a8;
  background: rgba(12, 10, 8, .62); border: 1px solid rgba(255, 190, 120, .28);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-radius: 999px; padding: 6px 13px; pointer-events: none;
  white-space: nowrap;
}
.lcut__caption {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 3;
  text-align: center; font-size: .74rem; color: rgba(240, 234, 226, .82);
  pointer-events: none; font-feature-settings: "tnum" 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
@media (max-width: 520px) {
  .lcut__phase { font-size: .55rem; padding: 5px 10px; }
  .lcut__caption { font-size: .68rem; }
}

/* ---- readout ---- */
.lcut__body { border-top: 1px solid var(--edge); padding: 16px; background: var(--white); }
.lcut__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.lcut-spec { background: var(--bone); border: 1px solid var(--edge); border-radius: 9px; padding: 11px 13px; }
.lcut-spec .k {
  font-family: var(--font-body); font-weight: 700; font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bronze);
}
.lcut-spec .v {
  font-family: var(--font-display); font-size: 1.18rem; color: var(--ink);
  margin-top: 6px; line-height: 1.15; font-feature-settings: "tnum" 1;
}
.lcut-spec .v .sub {
  display: block; font-family: var(--font-body); font-size: .72rem;
  color: var(--ink-soft); margin-top: 3px;
}
.lcut__note { margin-top: 13px; font-size: .78rem; line-height: 1.55; color: var(--ink-soft); }

/* ---- phones ----
   AUDIT 2026-08-06: on a 390px screen the seven spec tiles fell into a 2-up grid four rows deep,
   which made the whole panel 982px tall — and since the stage sits directly above .est-actions,
   that pushed "Calculate estimate" a FULL EXTRA SCREEN down the page. The animation is the
   flourish; the quote is the product, and on the surface most visitors actually use it had been
   shifted out of reach behind it.

   So on small screens the readout goes 3-up on a tighter rhythm. Every figure is still shown —
   nothing is hidden or truncated — the tiles just stop being desktop-sized on a phone. Measured
   by test/_AUDIT-lcut-cta.mjs, which fails if the CTA is ever pushed more than one screen. */
@media (max-width: 520px) {
  .lcut__head { padding: 10px 12px; }
  /* 238px still reads clearly at phone width (the plate is ~300px wide there) and buys back the
     last of the vertical budget without shrinking the show meaningfully. */
  .lcut__stage { height: 238px; }
  .lcut__body { padding: 12px; }
  .lcut__specs { grid-template-columns: repeat(auto-fit, minmax(101px, 1fr)); gap: 7px; }
  .lcut-spec { padding: 8px 9px; border-radius: 8px; }
  .lcut-spec .k { font-size: .53rem; letter-spacing: .1em; }
  .lcut-spec .v { font-size: .97rem; margin-top: 4px; }
  .lcut-spec .v .sub { font-size: .64rem; margin-top: 2px; line-height: 1.3; }
  .lcut__note { margin-top: 10px; font-size: .73rem; line-height: 1.5; }
}
/* Narrow Androids / older iPhones (360-375px): the explanatory note wraps to noticeably more
   lines down here, which was putting these screens back over budget. Nothing is removed — the
   prose just sets tighter than it does on a 390px phone. */
@media (max-width: 380px) {
  .lcut__stage { height: 224px; }
  .lcut__note { font-size: .70rem; line-height: 1.45; }
  .lcut-spec .v { font-size: .93rem; }
}

/* A visitor who has asked the OS for less motion still gets the finished plate and every
   number — laser-stage.js jumps straight to the end frame rather than animating. */
@media (prefers-reduced-motion: reduce) {
  .lcut__tools button { transition: none; }
}