/* Material Finder, v3's answer (09-29) under the first page's top. styles.css draws the top bar, the headline and photo,
   the white form bar, the settings and the empty page, as on the first page; this file draws only the answer, after
   Claude Design's "Quote line" (design-test/claude-design/Material Finder v3.dc.html), in styles.css's colors and
   faces, and the phone's job line. Every class here starts "v-" so nothing lands on styles.css's own. */

/* The metals the bars are drawn in (09-30; Claude Design's "Mill finish" palette, its hues checked against the page's
   photo; bronze, tool steel, cast iron and "other" added the same way): a highlight, a body and a shadow each, a step
   darker on the light palette, greys in print. The drop's hatch is the body on dark and the shadow on light. */
.v-metal { --m-hatch: var(--m-mid); }
.m-aluminum { --m-hi: #eef0f2; --m-mid: #b8bdc2; --m-lo: #7c8288; }
.m-stainless { --m-hi: #f6f8f9; --m-mid: #9aa2aa; --m-lo: #5c646c; }
.m-carbon { --m-hi: #a4a8ab; --m-mid: #75797d; --m-lo: #4e5256; }
.m-alloy { --m-hi: #aca69e; --m-mid: #7d7770; --m-lo: #524d48; }
.m-tool { --m-hi: #9ea3a8; --m-mid: #6b7075; --m-lo: #45494d; }
.m-iron { --m-hi: #8f8f8d; --m-mid: #5f5f5d; --m-lo: #3d3d3c; }
.m-brass { --m-hi: #f6e39a; --m-mid: #cba745; --m-lo: #8c6c1f; }
.m-bronze { --m-hi: #edc79a; --m-mid: #b07f45; --m-lo: #6f4a20; }
.m-copper { --m-hi: #f8c1a2; --m-mid: #c9744b; --m-lo: #8c4629; }
.m-other { --m-hi: #b5b5b5; --m-mid: #858585; --m-lo: #555555; }
:root[data-theme="light"] .v-metal { --m-hatch: var(--m-lo); }
:root[data-theme="light"] .m-aluminum { --m-hi: #e3e6e9; --m-mid: #a7adb3; --m-lo: #6c7278; }
:root[data-theme="light"] .m-stainless { --m-hi: #dfe3e6; --m-mid: #89919a; --m-lo: #4f575f; }
:root[data-theme="light"] .m-carbon { --m-hi: #8f9397; --m-mid: #62666a; --m-lo: #3d4043; }
:root[data-theme="light"] .m-alloy { --m-hi: #9a948c; --m-mid: #6b655e; --m-lo: #433f3a; }
:root[data-theme="light"] .m-tool { --m-hi: #8a8f94; --m-mid: #5a5f64; --m-lo: #383c40; }
:root[data-theme="light"] .m-iron { --m-hi: #7d7d7b; --m-mid: #525250; --m-lo: #333332; }
:root[data-theme="light"] .m-brass { --m-hi: #ebd177; --m-mid: #b98f2b; --m-lo: #775912; }
:root[data-theme="light"] .m-bronze { --m-hi: #dcb07c; --m-mid: #9c6c33; --m-lo: #5f3d16; }
:root[data-theme="light"] .m-copper { --m-hi: #eba781; --m-mid: #b5603a; --m-lo: #77371c; }
:root[data-theme="light"] .m-other { --m-hi: #a0a0a0; --m-mid: #707070; --m-lo: #454545; }
@media print { .v-metal { --m-hi: #d4d4d4; --m-mid: #9a9a9a; --m-lo: #5a5a5a; --m-hatch: #5a5a5a; } }

/* ---- the phone: once priced, the job folds into one line with "Edit job" (v3), so the answer starts near the top */

.job-line { display: none; }
.is-folded .job-line {
  display: flex; gap: var(--s4); align-items: flex-start; justify-content: space-between;
  padding: var(--s4); background: var(--panel);
}
.job-line p { margin: 0; font-size: var(--t-sm); font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.job-line .btn { flex: 0 0 auto; }
.is-folded .strip { display: none; }

/* ---- the phone's first screen (09-30, adapt): the whole form, "Price it" included, on the first screen of a phone
   with its browser bars showing (Safari leaves about 700px of an 812px screen). The photo is a shorter strip, the
   headline a Title and the lede body size; nothing leaves. Once a job is in, the headline steps aside for the job's
   line, and stays aside while the job is edited, so "Edit job" doesn't push the form down (it says what the empty page
   is for); screen readers still have it. */
@media (max-width: 719px) {
  .intro-photo { height: 96px; }
  .intro-text { padding: var(--s5) var(--gutter) var(--s4); }
  .intro h1 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.025em; }
  .lede { margin-top: var(--s3); font-size: var(--t-base); }
  .has-job .intro { border-bottom: 0; }
  .has-job .intro-text { padding: 0; }
  .has-job .intro h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- the answer ------------------------------------------------------------------------------------------------- */

.v-answer { padding-top: var(--s5); font-size: var(--t-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
.v-answer p, .v-answer h2, .v-answer h3, .v-answer h4 { margin: 0; }
.v-answer a { color: var(--chalk); text-decoration: underline; text-decoration-color: var(--chalk-faint); text-underline-offset: 3px; }
.v-answer a:hover { text-decoration-color: var(--chalk); }
.v-muted { color: var(--chalk-muted); }
.v-strong { color: var(--chalk); }
/* Typography (09-30, the critique's type fixes): the answer takes the spec's roles. Labels (Azeret Mono 0.75rem,
   uppercase) head what they sit over; everything counted or measured is Azeret Mono; seller names are TASA Orbiter;
   reading text is Instrument Sans; every size is on the eight-step scale. */
.l-head h2, .l-head p, .v-small-head, .v-work h4, .v-nobuy h3 {
  font: 400 var(--t-label)/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--chalk-muted);
}
.v-small-head { margin-bottom: var(--s2); }
.v-flag { display: flex; gap: var(--s2); align-items: baseline; margin: 0 0 3px; font: 400 var(--t-label)/1.5 var(--mono); }
.v-flag::before { content: ""; flex: 0 0 6px; height: 6px; background: var(--chalk); position: relative; top: -1px; }

.v-buy-list { list-style: none; margin: 0; padding: 0; }
.v-buy-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s4); padding: 5px 0; border-bottom: 1px solid var(--hairline); font: 500 var(--t-md)/1.3 var(--mono); }
.v-line-flag { flex: 1 1 100%; font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-muted); }
.v-buy-extra { display: flex; justify-content: space-between; gap: var(--s4); padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-sm); }
.v-buy-extra:not(.is-stack) > span:last-child { font-family: var(--mono); white-space: nowrap; }
.v-buy-extra.is-stack { display: block; }
.v-buy-extra.is-stack .v-muted { margin-top: 2px; font-size: var(--t-sm); }
.v-buy-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px var(--s4); margin-top: var(--s2); }
.v-buy-foot p { font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-muted); }
.v-answer .text-button {  /* v3's quiet links, not styles.css's mono buttons */
  min-height: 24px; font: 400 var(--t-label)/1.4 var(--mono); letter-spacing: 0.02em; text-transform: none;
  text-decoration: underline; text-decoration-color: var(--chalk-faint); text-underline-offset: 3px;
}
.v-answer .text-button:hover { text-decoration-color: var(--chalk); }
/* a 44px target drawn around a quiet link, not added to the line (as "Change" has) */
.v-answer .text-button { position: relative; }
.v-answer .text-button::after { content: ""; position: absolute; inset: -10px -8px; }
.v-stock-line { font: 500 var(--t-sm)/1.4 var(--mono); }
.v-cond { display: block; margin-top: 2px; font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-faint); }
.v-stock-link { font-size: var(--t-sm); text-wrap: pretty; }
.v-stock-listed { font-size: var(--t-sm); color: var(--chalk-muted); text-wrap: pretty; }
.v-stock-why { font-size: var(--t-sm); color: var(--chalk-muted); text-wrap: pretty; }
/* Caution Amber, one style wherever it appears (DESIGN.md): Azeret Mono 0.75rem/500 after a 6px amber square */
.v-flag.is-caution, .v-line-flag.is-caution, .v-cost .v-sub.is-caution { font: 500 var(--t-label)/1.5 var(--mono); color: var(--caution); }
.v-flag.is-caution::before { background: var(--caution); }
.v-line-flag.is-caution::before, .v-cost .v-sub.is-caution::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--s2) 1px 0; background: var(--caution); vertical-align: middle; }
.v-also { margin-top: 10px; }
.v-also ul { list-style: none; margin: 0; padding: 0; }
.v-also li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: 6px 0; border-top: 1px solid var(--hairline); font-size: var(--t-sm); }
.v-also li > span { font-family: var(--mono); white-space: nowrap; }

/* the bars, drawn to scale: pieces (a kerf line after each), spare pieces, the drop */
.v-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); font: 400 var(--t-label)/1.4 var(--mono); color: var(--chalk-muted); }
.v-key-label { margin-right: var(--s1); }
.v-k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.v-k svg { flex: 0 0 auto; display: block; }
.v-bar { flex: 0 0 auto; min-width: 1px; }  /* its width is the bar's length to scale; drawBars() draws it (v3.js) */
.v-bar svg { display: block; }
.v-mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 5px 0 7px; padding-right: calc(var(--lab, 9ch) + var(--s3) + 13px); font: 400 var(--t-sm)/1 var(--mono); }  /* room for the longest label ('4 × 93"') beside a bar the column's full width: --lab, in characters, set on the list (v3.js), and the gap with 4px to spare (a ch runs a little under the glyph) */
.v-mini-row { display: flex; align-items: center; gap: var(--s2); }
.l-bars .v-mini-label { white-space: nowrap; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.l-bars .v-mini-label:hover, .l-bars .v-mini-label:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.v-mini-label .ext { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.65; }
.v-mini-label:hover .ext { opacity: 1; }

/* the one list (09-30): every seller with a buy a row, cheapest first. A row: the seller (the cheapest larger and
   tagged), its bars and what they are, its total and price a piece, what could change the order in amber; the rest
   behind Details. A click anywhere on a row opens its working below it */
.l-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s4); padding-bottom: var(--s2); border-bottom: 2px solid var(--chalk); }
.l-head h2:focus { outline: none; }
.v-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.9fr) 64px;
  grid-template-areas: "seller bars total act"; gap: var(--s5); align-items: start;
  padding: var(--s4) var(--s3); margin: 0 calc(-1 * var(--s3)); border-top: 1px solid var(--hairline); cursor: pointer;
}
.l-list .v-row:first-child { border-top: 0; }
.v-row:hover { background: var(--panel-strong); }
.v-row.is-open { background: var(--panel); }
.v-row.is-sliding { z-index: 1; }
.l-seller { grid-area: seller; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.l-seller h3 { font: 500 var(--t-md)/1.25 var(--display); letter-spacing: -0.01em; }
.v-row.is-top .l-seller h3 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.025em; }
.l-tag { font: 400 var(--t-label)/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px 3px; box-shadow: inset 0 0 0 1px var(--chalk); white-space: nowrap; }
.l-bars { grid-area: bars; min-width: 0; }
.v-row .v-mini { margin: 6px 0; }
.v-row.is-top .v-mini { margin-top: 12px; }
.l-total { grid-area: total; min-width: 0; text-align: right; }
.l-sum { font: 500 var(--t-field)/1.1 var(--mono); letter-spacing: -0.02em; white-space: nowrap; }
.v-row.is-top .l-sum { font-size: var(--t-xl); }
.l-total .l-per { margin-top: 4px; font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-muted); }
.l-total .v-flag { justify-content: flex-end; margin: 4px 0 0; }
.l-act { grid-area: act; justify-self: end; }
.l-act .text-button { color: var(--chalk-muted); font-weight: 400; }
@media (max-width: 1079px) {
  .v-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto auto; gap: var(--s4); }
}
@media (max-width: 719px) {
  .v-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seller act" "total total" "bars bars"; gap: var(--s2) var(--s4); padding: var(--s4); margin: 0 calc(-1 * var(--s4)); }
  .l-total { text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); }
  .l-total .l-per { margin-top: 0; }
  .l-total .v-flag { width: 100%; justify-content: flex-start; }
  .v-row.is-top .v-mini { margin-top: 6px; }
}

/* a seller's working, opened in place: how each bar is cut, what it costs, pieces and weight */
.v-work { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s6) var(--s7); }
.v-work.is-hero { padding: var(--s2) 0 28px; border-bottom: 1px solid var(--hairline); }
.v-work.in-row { padding: 20px var(--s5) 28px; margin: 0 calc(-1 * var(--s3)); background: var(--panel); }
.v-work h4 { margin-bottom: var(--s2); }
.v-w-cut > p { margin-bottom: var(--s4); font-size: var(--t-sm); color: var(--chalk-muted); text-wrap: pretty; }
.v-work .v-key { margin-bottom: var(--s3); }
.v-wbars { list-style: none; margin: 0; padding: 0; }
.v-wbars li { padding: var(--s1) 0; }
.v-wbar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px; gap: var(--s3); align-items: center; }
.v-wlabel { font: 400 var(--t-label) var(--mono); white-space: nowrap; }
.v-wprice { font: 400 var(--t-sm) var(--mono); text-align: right; white-space: nowrap; }
.v-math { margin: 6px 0; padding-left: 76px; font: 400 var(--t-label) var(--mono); color: var(--chalk-muted); }
.v-w-side { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.v-w-side p { font-size: var(--t-sm); text-wrap: pretty; }
.v-cost { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: 6px 0; border-top: 1px solid var(--hairline); font-size: var(--t-sm); }
.v-cost > span:last-child { font-family: var(--mono); white-space: nowrap; }
.v-cost .v-sub { display: block; font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-muted); }
.v-cost.is-rule, .v-cost.is-strong { border-top-color: var(--chalk-faint); }
.v-cost.is-strong { font-weight: 500; }
@media (max-width: 719px) {
  .v-work { grid-template-columns: minmax(0, 1fr); }
  .v-work.is-hero { padding: var(--s1) 0 var(--s5); }
  .v-work.in-row { padding: 18px var(--s4) 22px; margin: 0; }
  .v-wbar { grid-template-columns: 48px minmax(0, 1fr) 62px; }
  .v-math { padding-left: 60px; }
}

/* sellers without a buy, and a job no seller can fill */
.v-none-box { margin-top: 20px; padding: 36px var(--s6); background: var(--panel); }
.v-none-title { margin-bottom: var(--s2); font: 500 var(--t-2xl)/1.05 var(--display); letter-spacing: -0.03em; }
.v-none-box p + p { max-width: 60ch; font-size: var(--t-base); color: var(--chalk-muted); text-wrap: pretty; }
.v-nobuy { margin-top: 36px; }
.v-nobuy h3 { margin-bottom: var(--s2); }
.v-nobuy ul { list-style: none; margin: 0; padding: 0; }
.v-nobuy li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 6px var(--s5); align-items: center; padding: 14px 0; border-top: 1px solid var(--hairline); }
.v-nb-name { font: 500 var(--t-md)/1.25 var(--display); letter-spacing: -0.01em; }
.v-nb-reason { color: var(--chalk-muted); text-wrap: pretty; }
.v-nb-fix { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 1079px) { .v-nobuy li { grid-template-columns: 180px minmax(0, 1fr) auto; } }
@media (max-width: 719px) {
  .v-nobuy li { grid-template-columns: minmax(0, 1fr); }
  .v-none-box { padding: 0; background: none; }
  .v-none-title { font-size: var(--t-xl); }
}

@media print {
  .v-answer .text-button, .v-answer .btn, .job-line { display: none !important; }
  .v-row, .v-work { break-inside: avoid; }
}