/* ─────────────────────────────────────────────────────────────
   v2 layout sandbox (/v2). Ships on every page - `stylesheet_link_tag
   :app` is Propshaft's "every stylesheet in the load path" - so every
   rule here is under .v2-, which exists on that page alone. It loads
   after landing.css and can lean on the same tokens.

   The idea it is testing: before the first run the diagram panel is
   an empty half-screen, and the form - the thing the visitor is
   actually working in - is squeezed into 380px. Here the form owns
   the page and the layout opens over it.
   ───────────────────────────────────────────────────────────── */

.v2-page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.tool-v2 {
  background: var(--chalk);
  border: 1px solid var(--wood-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ─── Toolbar ─── */

.v2-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-bottom: 1px solid var(--wood-200);
  background: var(--wood-50);
}

.v2-toolbar-left,
.v2-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Optimize is the one button on this page that has to be findable from
   anywhere in the form, so it sits in the toolbar rather than at the bottom of
   a column that can be scrolled past. */
.btn-optimize.v2-optimize {
  width: auto;
  padding: 12px 22px;
  font-size: 15px;
}

/* ─── The layout the user already ran ─── */

.v2-ready-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  background: var(--green-light);
  border-bottom: 1px solid var(--wood-200);
}

/* The UA rule for [hidden] is display:none at the same specificity as the
   rules above, and a later author rule wins - so say it again, louder, for
   every block this file makes a flex container. */
.v2-ready-bar[hidden],
.v2-modal[hidden] { display: none !important; }

.v2-ready-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-ok);
}

/* ─── The form ─── */

.v2-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: stretch;
}

.v2-col-left {
  padding: 24px;
  border-right: 1px solid var(--wood-200);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.v2-col-right {
  padding: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.v2-parts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* The parts list is the work surface of this page: on the live layout it is a
   220px window onto a list that routinely runs to twenty rows. It takes
   whatever height the column has left rather than a fixed slice of it - the
   empty band under the table would be the same waste this page is about. */
.v2-parts-wrap {
  flex: 1;
  max-height: min(64vh, 680px);
  min-height: 320px;
}

.v2-parts .parts-table th,
.v2-parts .parts-table td { padding-top: 9px; padding-bottom: 9px; }

/* Sizes are read in columns, so they get fixed ones; the name takes the rest.
   Without this the four numbers drift a third of a screen apart. */
.v2-parts .parts-table th:first-child,
.v2-parts .parts-table td:first-child { width: 28px; }
.v2-parts .parts-table th:nth-child(3),
.v2-parts .parts-table th:nth-child(4),
.v2-parts .parts-table th:nth-child(5) { width: 110px; }
.v2-parts .parts-table th:last-child,
.v2-parts .parts-table td:last-child { width: 48px; }

/* Width is what this page has to spare, and the fields people mistype are the
   sizes - a fraction like "23 1/2" has to be readable while it is typed. */
.v2-add-part { gap: 8px; }
.v2-add-part input[data-optimizer-v2-target="addName"] { flex: 2 1 180px; }
.v2-add-part input[data-optimizer-v2-target="addLength"],
.v2-add-part input[data-optimizer-v2-target="addWidth"] { width: 110px; }
.v2-add-part span[data-optimizer-v2-target="addWidthWrap"] { display: inline-flex; }
.v2-add-part input[data-optimizer-v2-target="addQty"] { width: 74px; }

/* ─── The result, over the form ─── */

.v2-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.v2-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 18, 0.55);
}

.v2-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Narrower than the screen on purpose. A sheet is about twice as wide as it
     is tall, the card is height-bound, and a 1320px card drew a 700px picture
     with 300px of empty beige on each side of it. */
  width: min(880px, 94vw);
  max-height: 92vh;
  background: var(--sawdust);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.v2-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--chalk);
  border-bottom: 1px solid var(--wood-200);
}

.v2-modal-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v2-modal-close {
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--steel);
  cursor: pointer;
  padding: 0 4px;
}

.v2-modal-close:hover { color: var(--graphite); }

.v2-result {
  overflow-y: auto;
  padding: 20px 24px 24px;
}

/* The drawing takes the room that is left after the numbers, rather than a
   fixed slice of the viewport. A vh cap cannot know how tall the rest is: the
   question strip appears a beat after the layout renders and takes ~100px with
   it, and at any fixed cap the numbers under the drawing were what fell off the
   bottom. Flex sizing shrinks the picture first and keeps sheets/yield/cost on
   screen, which is the whole reason they are there. */
/* Both dimensions auto with both caps set: the browser shrinks the drawing to
   whichever cap it hits first and keeps the sheet's ratio while doing it. Width
   pinned to 100% instead is what left the drawing letterboxed inside its own
   pale box, and a fixed height is what pushed the numbers off the bottom. */
.v2-result .sheet-svg {
  width: auto;
  height: auto;
  max-width: 100%;
  /* Sized so sheets/yield/waste/cost still sit under it after the question
     strip appears and takes ~100px of the card with it. The second term is what
     holds on a short window, where a percentage of a small number is still too
     much: everything around the drawing costs about 420px whatever the height. */
  max-height: min(44vh, calc(100vh - 420px));
  display: block;
  margin: 0 auto;
}

/* Hidden, not deleted: the button inside it is moved into the modal head by the
   controller, and the panel is the same markup the home page renders. */
.v2-result .result-header { display: none; }
.v2-pdf-slot:empty { display: none; }

body.v2-modal-open { overflow: hidden; }

/* ─── The question ─── */

/* Pinned to the viewport, not placed after the tool: the form is a screenful on
   its own and a card below it was never reached. Bottom-right so it never
   covers the parts table or the toolbar. */
.v2-ask-corner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  width: min(380px, calc(100vw - 40px));
  padding: 14px 16px;
  background: var(--chalk);
  border: 1.5px solid var(--wood-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* While the layout is open the question is asked inside it, so the corner copy
   steps aside rather than sitting on top of the thing being judged. */
body.v2-modal-open .v2-ask-corner { display: none; }

/* The copy inside the modal: a strip under the numbers, part of the card. */
.v2-ask-inline {
  padding: 14px 24px 18px;
  background: var(--wood-50);
  border-top: 1.5px solid var(--wood-200);
}

.v2-ask[hidden],
.v2-ask [hidden] { display: none !important; }

.v2-ask-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.v2-ask-q {
  flex: 1 1 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
}

.v2-verdict {
  flex: 1;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
  background: var(--sawdust);
  border: 1.5px solid var(--wood-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.v2-verdict:hover { background: var(--wood-100); border-color: var(--wood-300); }
.v2-verdict:disabled { opacity: 0.5; cursor: default; }

.v2-ask-close {
  flex: none;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--steel);
  cursor: pointer;
  padding: 0 2px;
}

.v2-ask-close:hover { color: var(--graphite); }

.v2-ask-detail strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--green-ok);
}

.v2-ask textarea {
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--graphite);
  background: var(--sawdust);
  border: 1.5px solid var(--wood-200);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.v2-ask-done { font-size: 14px; font-weight: 600; color: var(--green-ok); }

.v2-ask-error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--blade);
}

@media (max-width: 700px) {
  .v2-ask-corner { right: 10px; left: 10px; bottom: 10px; width: auto; }
  .v2-ask-inline { padding: 12px 14px 16px; }
}

/* The way in, on the home page: a strip directly above the tool. The first
   version sat inside the unit toggles and could not be found - which is the
   whole job of this element. */
.v2-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 14px;
  padding: 12px 18px;
  background: var(--amber-light);
  border: 1.5px solid var(--wood-300);
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.v2-banner:hover { border-color: var(--blade); background: var(--wood-100); }

.v2-banner-tag {
  flex: none;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--chalk);
  background: var(--blade);
  border-radius: 999px;
}

.v2-banner-text {
  font-size: 14px;
  color: var(--pencil);
  line-height: 1.5;
}

.v2-banner-cta {
  flex: none;
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--blade);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .v2-banner { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .v2-banner-text { flex: 1 1 100%; order: 3; font-size: 13px; }
  .v2-banner-cta { margin-left: 0; }
}

/* ─── Phone ─── */

@media (max-width: 900px) {
  .v2-page { padding: 16px 12px 48px; }
  .v2-grid { grid-template-columns: 1fr; }
  .v2-col-left { border-right: none; border-bottom: 1px solid var(--wood-200); }
  .v2-toolbar { padding: 12px 14px; }
  .v2-toolbar-right { width: 100%; }
  .btn-optimize.v2-optimize { flex: 1; }
  .v2-ready-bar { padding: 10px 14px; }
  .v2-col-left, .v2-col-right { padding: 16px 14px; }
  .v2-parts-wrap { max-height: 46vh; min-height: 220px; }
  /* A phone has no room for a floating card: the layout takes the screen. */
  .v2-modal { padding: 0; }
  .v2-modal-card { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .v2-add-part { flex-wrap: wrap; }
  .v2-add-part input[data-optimizer-v2-target="addName"] { flex: 1 1 100%; }
  .v2-add-part input[data-optimizer-v2-target="addLength"],
  .v2-add-part input[data-optimizer-v2-target="addWidth"] { width: auto; flex: 1 1 0; }
  .v2-add-part input[data-optimizer-v2-target="addQty"] { width: 64px; }
}