/* ─────────────────────────────────────────────────────────────
   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);
  /* clip, not hidden: hidden makes the card a scroll container and the sticky
     toolbar below would stick to the card instead of the window. */
  overflow: clip;
}

/* ─── 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);
}

/* The parts list grows with the page (below), so on a long list the toolbar
   with Optimize would scroll away - it stays under the site nav instead. */
@media (min-width: 901px) {
  .v2-toolbar {
    position: sticky;
    top: var(--v2-nav-h, 57px);
    z-index: 5;
  }
}

.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. Here it has no
   window at all - it grows with its rows and the page scrolls, because a list
   inside its own scroll box was the complaint (feedback 2026-10-14: "would be
   great if the required parts list grew and did not require a scroll wheel to
   see the entire list"). Fills the column when short, so there is no empty
   band under it. The header stops being sticky: with no scroll box of its own
   it would stick to the window, under the nav. */
.v2-parts-wrap {
  flex: 1;
  max-height: none;
  overflow: visible;
  min-height: 320px;
}

.v2-parts .parts-table thead { position: static; }

.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; }
/* L, and W's span (the flex item - W sits in it so 1D can hide it), start at
   110px and give way together with the name. A fixed 110px W left L and Qty
   26px each in a narrow column (901-955px, docked at 1600; QA 8200). */
.v2-add-part input[data-optimizer-v2-target="addLength"],
.v2-add-part span[data-optimizer-v2-target="addWidthWrap"] { width: auto; flex: 1 1 110px; min-width: 0; }
.v2-add-part span[data-optimizer-v2-target="addWidthWrap"] { display: inline-flex; }
.v2-add-part span[data-optimizer-v2-target="addWidthWrap"] input { width: 100%; min-width: 0; }
.v2-add-part input[data-optimizer-v2-target="addQty"] { width: 74px; flex: none; }

/* ─── 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);
}

/* Edit list, Pin, five export buttons, the dxfkit link, Share and the cross
   do not fit one row of the 880px card (they wrapped word by word and pushed
   the cross off the card), let alone the pinned column. Two rows: what the
   card does on top, the export row under it whole. The right-hand wrapper
   dissolves so its children can take their own rows. */
.v2-modal-head { flex-wrap: wrap; row-gap: 10px; }
.v2-modal-head-right { display: contents; }
.v2-modal-head .btn-sm { white-space: nowrap; }
.v2-modal-head [data-optimizer-v2-target="modalShareBtn"] { margin-left: auto; }
.v2-pdf-slot { order: 3; flex: 1 1 100%; flex-wrap: wrap; }

.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.
     The 180px floor is for windows where that term goes to zero or below (a
     phone in landscape, 200% zoom): the drawing stays readable and the numbers
     move into .v2-result's scroll instead (task 8199). */
  max-height: max(180px, 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; }
/* Takes the panel's export row whole: PDF, DXF and the dxfkit link. */
.v2-pdf-slot { display: flex; align-items: center; gap: 8px; row-gap: 8px; }
.v2-pdf-slot:empty { display: none; }

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

/* ─── Pinned beside the form (task 7947) ───
   "Can't view and edit at the same time": pinned, the card is a column on the
   right under the nav, the page keeps scrolling, and the form takes what is
   left. From 1100px; below that the form beside a column is too narrow, the
   button hides and the modal stays. */

.v2-modal.is-docked {
  inset: var(--v2-nav-h, 57px) 0 0 auto;
  width: var(--v2-dock-w);
  padding: 12px 12px 12px 0;
  align-items: stretch;
  z-index: 140;
}


.v2-modal.is-docked .v2-modal-backdrop,
.v2-modal.is-docked .v2-edit-list { display: none; }

.v2-modal.is-docked .v2-modal-card {
  width: 100%;
  max-height: none;
  border: 1px solid var(--wood-200);
  box-shadow: var(--shadow-lg);
}

/* The card is as tall as the window, so the drawing gets the room the modal
   gave to the backdrop. Floored like the modal's, for a short window where
   100vh - 400px is a sliver (task 8199). */
.v2-modal.is-docked .v2-result .sheet-svg { max-height: max(240px, calc(100vh - 400px)); }

/* A short window (phone in landscape, 200% zoom, a laptop with the browser
   half-height): the head and the question strip leave .v2-result a 30-150px
   window, so even a full-size drawing is seen through a slot. There the whole
   card scrolls instead - head, drawing, numbers and strip in one column
   (task 8199). */
@media (max-height: 600px) {
  .v2-modal-card { overflow-y: auto; }
  .v2-modal-card > * { flex-shrink: 0; }
  .v2-result { overflow-y: visible; }
}

body.v2-docked { --v2-dock-w: clamp(540px, 40vw, 900px); }
body.v2-docked .v2-page {
  max-width: none;
  margin: 0 var(--v2-dock-w) 0 0;
  padding-right: 16px;
}
body.v2-docked .v2-ask-corner { display: none; }

/* Next to the column the form is ~800px wide at 1440: the stock column and
   the size columns give up width so part names stay readable. */
@media (max-width: 1599px) {
  body.v2-docked .v2-grid { grid-template-columns: 260px 1fr; }
  body.v2-docked .v2-col-left,
  body.v2-docked .v2-col-right { padding: 20px 16px; }
  body.v2-docked .v2-parts .parts-table th:nth-child(3),
  body.v2-docked .v2-parts .parts-table th:nth-child(4),
  body.v2-docked .v2-parts .parts-table th:nth-child(5) { width: 70px; }
  body.v2-docked .v2-add-part input[data-optimizer-v2-target="addLength"],
  body.v2-docked .v2-add-part input[data-optimizer-v2-target="addWidth"] { width: 70px; }
  body.v2-docked .v2-add-part input[data-optimizer-v2-target="addQty"] { width: 56px; }
}

/* Narrower still (a 13" laptop), two form columns beside the panel broke part
   names letter by letter. The form goes to one column instead, the parts list
   first - it is what gets edited against the drawing - and stock and settings
   under it, their fields four to a row. */
@media (max-width: 1439px) {
  body.v2-docked .v2-grid { grid-template-columns: 1fr; }
  body.v2-docked .v2-col-right { order: -1; }
  body.v2-docked .v2-col-left { border-right: none; border-top: 1px solid var(--wood-200); }
  body.v2-docked .v2-col-left .stock-inputs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.v2-docked .v2-parts-wrap { min-height: 0; }
}

@media (max-width: 1099px) {
  .v2-dock-btn { display: none; }
}

/* The list changed under a pinned drawing. Kept on screen so the edit can be
   checked against it, but plainly not current - and not clickable: its sheet
   arrows and tooltips read the result that was just dropped. */
.v2-stale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--amber-light);
  border-bottom: 1px solid var(--wood-300);
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
}

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

.v2-result.is-stale {
  opacity: 0.55;
  filter: grayscale(0.6);
  pointer-events: none;
  user-select: none;
}

/* ─── 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; }
  /* A phone keeps the list in its own window: rows wrap tall there, and a
     list that grows would put Optimize (top of the form) thousands of pixels
     away. The desktop complaint did not come from here. */
  .v2-parts-wrap { max-height: 46vh; min-height: 220px; overflow-y: auto; }
  .v2-parts .parts-table thead { position: sticky; }
  /* 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; }
  /* W sits in a span (hidden in 1D): the span is the flex item, so it shares
     the row with L, and the field fills it. Otherwise W took 189px and left
     L and Qty 30px each on a 360px phone (QA 8200). Qty keeps its 64px. */
  .v2-add-part span[data-optimizer-v2-target="addWidthWrap"] { flex: 1 1 0; }
  .v2-add-part input[data-optimizer-v2-target="addQty"] { width: 64px; }
}

/* The 110px size columns are for the desktop's spare width. On a 360px phone
   they left the name 43px and broke "Side panel" letter by letter, and just
   past the one-column break (905-975px) the right column is ~470px and did
   the same (QA 8059, 8200); the fields are only as wide as the number
   (landing.css .part-cell), so the columns can shrink to them. */
@media (max-width: 1100px) {
  .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: auto; }
  .v2-parts .parts-table th,
  .v2-parts .parts-table td { padding-left: 6px; padding-right: 6px; }
  .v2-parts .parts-table th:last-child,
  .v2-parts .parts-table td:last-child { width: 32px; }
}
/* Pinned beside the layout the form is as narrow again, at any width: 74px
   for the name at 1600 (QA 8200). */
body.v2-docked .v2-parts .parts-table th:nth-child(3),
body.v2-docked .v2-parts .parts-table th:nth-child(4),
body.v2-docked .v2-parts .parts-table th:nth-child(5) { width: auto; }