/* Material Finder: "The Cut List" (DESIGN.md). Colors, fonts and square corners are uptool.com's, read 2026-09-24.
   Mobile first; sizes in rem on a fixed scale; spacing on a 4px grid. */

:root {
  /* colors (DESIGN.md) */
  --graphite: #181818;
  --graphite-deep: #141413;
  --graphite-press: #0d0d0c;   /* a dark button under the pointer */
  --panel: rgba(100, 98, 109, 0.12);
  --panel-strong: rgba(100, 98, 109, 0.22);
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.2);
  --chalk: #fff;
  --chalk-muted: rgba(255, 255, 255, 0.7);
  --chalk-faint: rgba(255, 255, 255, 0.5);
  --ink: #181818;
  --ink-muted: rgba(24, 24, 24, 0.7);
  --ink-hairline: rgba(24, 24, 24, 0.14);  /* dividers inside a white bar */
  --layout-blue: #2461ec;
  --layout-blue-bright: #3a74f7;
  --layout-blue-press: #1f57d6;  /* "Price it" on hover (10-05): white on the bright step read 4.2:1, under AA; on this 6.2:1 */
  --caution: #f4b860;
  --error: #ff8f80;

  /* type */
  --display: "TASA Orbiter", "Instrument Sans", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-label: 0.75rem;   /* 12 */
  --t-sm: 0.875rem;     /* 14 */
  --t-base: 1rem;       /* 16 */
  --t-md: 1.125rem;     /* 18 */
  --t-field: 1.375rem;  /* 22: the job's fields from 720px (09-26: bigger, so the form leads) */
  --t-xl: 1.75rem;      /* 28 */
  --t-2xl: 2.5rem;      /* 40 */
  --t-3xl: 3.5rem;      /* 56 */

  /* space, 4px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: var(--s4);
  --field-h: 3.5rem;   /* 56px; in rem, so a larger text setting grows the fields with it */

  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;  /* the footer sits at the foot of the screen when the page is shorter (09-27), so the first screen ends */
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--graphite);
  color: var(--chalk);
  font: 400 var(--t-base)/1.5 var(--sans);
  letter-spacing: 0.01em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--layout-blue); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num, .figure { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

.frame { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.page { flex: 1 0 auto; }

.label {
  display: block;
  margin: 0 0 var(--s2);
  font: 400 var(--t-label)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-muted);
}

/* ---- top bar ---------------------------------------------------------------------------------------------------- */

.topbar { border-bottom: 1px solid var(--hairline); }
.topbar-in { display: flex; align-items: center; gap: var(--s4); height: var(--s8); }
/* the palette switch, at the bar's right (09-28): a text button in the label's type; its 44px touch target drawn around it */
.topbar-theme {
  position: relative;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: 400 var(--t-label)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-muted);
  cursor: pointer;
}
.topbar-theme::after { content: ""; position: absolute; inset: -16px -8px; }
.topbar-theme:focus-visible { outline: 2px solid var(--layout-blue); outline-offset: 2px; }
.topbar-label::after { content: ""; position: absolute; inset: -16px -8px -16px 0; }
/* the finder's own name at the left, as a site of its own (10-02: its own domain, "a little stamp" of Uptool at the right,
   as on USA Machine Shops); it goes back to the starting page (startOver); its 44px touch target drawn around it */
.topbar-label {
  position: relative;
  text-decoration: none;
  font: 500 1.375rem/1 var(--display);
  letter-spacing: -0.03em;
  color: var(--chalk);
}
/* Uptool's own logo, its mark and name, linking home (as USA Machine Shops has it), after the palette switch */
.uptool-mark { display: inline-flex; align-items: center; padding-left: var(--s4); border-left: 1px solid var(--hairline-strong); color: var(--chalk-muted); text-decoration: none; }
.uptool-mark svg { display: block; height: 18px; width: auto; }
.uptool-mark:hover { color: var(--chalk); }
.uptool-mark:focus-visible { outline: 2px solid var(--layout-blue); outline-offset: 4px; }

/* ---- intro ------------------------------------------------------------------------------------------------------ */

/* the first screen is ruled into cells, as uptool.com's pages are (read 09-27): the intro is one, rail to rail (edge to
   edge under 1080px) with a hairline under it, and the form starts a step below the rule */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "photo" "text";
  margin-inline: calc(-1 * var(--gutter));
  border-bottom: 1px solid var(--hairline);
}
.intro-text { grid-area: text; padding: var(--s6) var(--gutter) var(--s5); }
.intro h1 { margin: 0; font: 500 var(--t-2xl)/1 var(--display); letter-spacing: -0.035em; }
.lede { margin: var(--s4) 0 0; max-width: 36em; font-size: var(--t-md); line-height: 1.45; color: var(--chalk-muted); }
/* the empty page's one photo (09-26, made by Gilad with ChatGPT): bar stock in a rack, round, square and flat, in
   aluminum, brass and copper. In a cell of its own with hard edges (09-27; faded into the ground at two edges it read as
   pasted on): a strip above the headline on phones, ruled under; from 720px the right third of the intro, the rail on
   its right, a hairline on its left, its foot on the intro's rule, cropped so all three shelves show. It leaves once a
   job is in, with the lede */
.intro-photo { grid-area: photo; position: relative; height: 160px; border-bottom: 1px solid var(--hairline); }
.intro-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
/* once a job is in, the headline gives its room to the answer: a title line, no lede, no photo */
.has-job .intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text"; }
.has-job .intro-text { padding: var(--s5) var(--gutter) var(--s4); }
.has-job .intro h1 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.025em; }
.has-job .lede, .has-job .intro-photo { display: none; }

/* ---- the example: one real job in a sentence under the form, on the empty page (DESIGN.md, "The example") --------- */
/* quiet on purpose, so the form is the thing to do first: plain words, the two totals in mono, "Try this job" a text
   button whose 44px touch target is drawn around it */
.cover.empty { max-width: 68ch; margin: 0; padding: 0; border: 0; font-size: var(--t-base); line-height: 1.6; color: var(--chalk-muted); }
.cover .num { font-weight: 500; color: var(--chalk); }
.cover-try { position: relative; min-height: 0; margin-left: var(--s1); vertical-align: baseline; }
.cover-try::after { content: ""; position: absolute; inset: -13px -8px; }

/* ---- the job strip: one joined bar (09-27) ----------------------------------------------------------------------- */
/* the fields as one white bar, the labels inside the cells and hairline dividers between them, ending in a blue
   "Price it": the job on one line, with a start and an end (Gilad, 09-27: five boxes read as a flat row with neither).
   Each cell keeps its note line under the bar; on phones and tablets the rows of the bar are set apart by those lines */
.job { padding-top: var(--s5); }  /* a step below the intro's rule */
.strip {
  --field-h: 4rem;  /* room for the label inside */
  display: grid;
  column-gap: 6px;  /* each field its own box (10-02, Alex: "a few pixels... between all of the selections"); was a hairline */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: "material material material material material material" "shape shape shape shape shape shape" "a a a length length length" "count count count go go go";
}
/* the job as a cut list reads it (09-28, Gilad: quantity last): material, shape, size, length, then how many, beside the
   button; the example below says it in the same order */
.strip.is-flat { grid-template-areas: "material material material material material material" "shape shape shape shape shape shape" "a a a b b b" "length length length length length length" "count count count go go go"; }
.f-material { grid-area: material; }
.f-shape { grid-area: shape; }
.f-a { grid-area: a; }
.f-b { grid-area: b; }
.f-length { grid-area: length; }
.f-count { grid-area: count; }
.go { grid-area: go; }
.strip:not(.is-flat) .f-b { display: none; }

.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.strip .field { position: relative; }
.strip .label { position: absolute; top: 10px; left: var(--s4); z-index: 1; margin: 0; color: var(--ink-muted); pointer-events: none; }
.strip .control input, .strip .control select { padding: 22px var(--s4) 0; }
.strip .select select { padding-right: var(--s7); }  /* the chevron's room */
.strip .control:has(.unit) input { padding-right: 6px; }
.strip .control .unit { margin-top: 22px; padding-right: var(--s4); }
.strip .select::after { right: var(--s4); margin-top: 6px; }
.strip .control:focus-within { box-shadow: inset 0 0 0 2px var(--layout-blue); }
.strip .control.is-invalid { box-shadow: inset 0 0 0 2px var(--error); }
.strip .control:has(:disabled), .strip .segments:has(:disabled) { opacity: 1; }  /* a cell stays white while the prices load; its text is muted */
.strip .note { padding-left: var(--s4); }
/* "Price it": uptool.com's blue button as the bar's last cell, the one thing to do once the job is in */
.go {
  height: var(--field-h);
  margin: 0;
  padding: 0 var(--s5);
  border: 0;
  border-radius: 0;
  background: var(--layout-blue);
  color: var(--chalk);
  font: 500 var(--t-sm)/1 var(--mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms var(--ease-out);
}
.go:focus-visible { outline: 2px solid var(--chalk); outline-offset: -4px; }
.go:disabled { opacity: 0.5; cursor: default; }

.control {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--field-h);
  background: var(--chalk);
  color: var(--ink);
  transition: box-shadow 120ms var(--ease-out);
}
.control:focus-within { box-shadow: 0 0 0 2px var(--layout-blue); }
.control.is-invalid { box-shadow: 0 0 0 2px var(--error); }
.control input, .control select {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 var(--s3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 var(--t-md)/1 var(--sans);
  letter-spacing: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.control input::placeholder { color: var(--ink-muted); opacity: 1; }
.control:has(.unit) input { padding-right: 6px; }  /* the unit brings its own space */
.control .unit { padding-right: var(--s3); font: 400 var(--t-label)/1 var(--mono); color: var(--ink-muted); }
.select select { padding-right: var(--s7); cursor: pointer; text-overflow: ellipsis; }
.select::after {
  content: "";
  position: absolute;
  right: var(--s4);
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.select select:disabled { cursor: progress; color: var(--ink-muted); }
/* the material list, drawn like the page where the browser allows it (Chrome's customizable select, with a mouse; app.js
   adds .is-styled): white like the field and flush under it, square, the grades in mono under small metal labels, a
   Layout Blue check on the chosen one. The field reads as before, "6061 aluminum"; phones and other browsers keep their
   own list */
.select.is-styled select, .select.is-styled select::picker(select) { appearance: base-select; }
.select.is-styled select { display: flex; align-items: center; }
.select.is-styled select::picker-icon { display: none; }  /* the field keeps its own chevron */
.select.is-styled select > button { all: unset; display: block; min-width: 0; flex: 1; }
.select.is-styled selectedcontent { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.select.is-styled select::picker(select) {
  min-inline-size: anchor-size(inline);
  max-block-size: min(28rem, 100%);  /* never past the screen's edge: 100% is the room beside the field */
  margin: 0;
  padding: var(--s1) 0 var(--s2);
  border: 0;
  border-top: 1px solid rgba(24, 24, 24, 0.14);
  border-radius: 0;
  background: var(--chalk);
  color: var(--ink);
  overflow-y: auto;
  position-try-order: most-block-size;
  position-try-fallbacks: flip-block;
}
.select.is-styled optgroup { padding: 0; font: inherit; }
.select.is-styled legend {
  padding: var(--s3) var(--s3) var(--s1);
  font: 400 var(--t-label)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.select.is-styled option {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 40px;
  padding: 0 var(--s3);
  font: 400 var(--t-base)/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
}
.select.is-styled option { white-space: normal; }  /* the browser's own style keeps an option on one line */
.select.is-styled option .opt-grade { min-width: 0; padding-block: var(--s1); overflow-wrap: anywhere; }  /* a long product name wraps in its column */
.select.is-styled option .opt-mat { display: none; }  /* the metal is the heading above it */
.select.is-styled option:checked { font-weight: 500; }
.select.is-styled option::checkmark { order: 1; margin-inline-start: auto; color: var(--layout-blue); }
.select.is-styled option:focus-visible { outline: 2px solid var(--layout-blue); outline-offset: -2px; }
/* from 720px every grade shows at once: the metals flow into columns (three, four from 1080px), none split, in the same
   order the keys move through them */
@media (min-width: 720px) {
  .select.is-styled select::picker(select) {
    inline-size: 36rem;
    max-block-size: min(40rem, 100%);
    columns: 3;
    column-gap: 0;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  }
  .select.is-styled optgroup { break-inside: avoid; }
  .select.is-styled option { min-height: 32px; }  /* a mouse, so tighter rows */
}
@media (min-width: 1080px) {
  .select.is-styled select::picker(select) { inline-size: 48rem; columns: 4; }
}
.control:has(:disabled), .segments:has(:disabled) { opacity: 0.5; }  /* while the prices load, or when they didn't */
/* the material as a search box over its list (10-02, Alex: "a search ahead kind of field where they could start typing
   something like 6061"; "if they want to see it... show them a table and let them pick"): with a mouse the select hides
   behind a text field; focus shows every metal in its own column, typing narrows it; phones keep their own picker */
.select.is-find select { display: none; }
.select.is-find::after { pointer-events: none; }
.select.is-find input[type="search"] { appearance: none; -webkit-appearance: none; padding-right: var(--s7); }
.select.is-find input[type="search"]::-webkit-search-cancel-button { display: none; }
.alloy-list {
  position: absolute; top: 100%; left: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  width: max-content; max-width: min(64rem, calc(100vw - 2 * var(--s4)));
  max-height: min(30rem, 70vh); overflow-y: auto;
  padding: var(--s1) var(--s2) var(--s2);
  background: var(--chalk); color: var(--ink);
  border-top: 1px solid rgba(24, 24, 24, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.alloy-list[hidden] { display: none; }
.alloy-group { min-width: 5.5rem; padding: 0 var(--s1); }
.alloy-group h5 { margin: 0; padding: var(--s3) var(--s2) var(--s1); font: 400 var(--t-label)/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.alloy-opt { display: flex; align-items: center; gap: var(--s2); min-height: 30px; padding: 0 var(--s2); font: 400 var(--t-base)/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.alloy-opt.is-active { background: rgba(24, 24, 24, 0.08); }
.alloy-opt[aria-selected="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--layout-blue); }
.alloy-opt mark { background: none; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alloy-none { padding: var(--s3) var(--s2); font: 400 var(--t-sm)/1.3 var(--sans, inherit); color: var(--ink-muted); }
[data-theme="light"] .alloy-list { background: #fff; box-shadow: 0 8px 24px rgba(24, 24, 24, 0.12), 0 0 0 1px rgba(24, 24, 24, 0.08); }

.note {
  min-height: 1.5em;
  margin: var(--s1) 0 0;
  font: 400 var(--t-label)/1.5 var(--mono);
  color: var(--chalk-faint);
}
.note.is-error { color: var(--error); }

/* the shape: three profile drawings with their names under them (09-28, Gilad: drawings, not words), the chosen one filled
   in ink, the others outlined in grey. The cell's own label is for screen readers: the captions say what the cell is */
.segments { display: flex; align-items: center; gap: var(--s1); height: var(--field-h); padding: 0 var(--s3); background: var(--chalk); }
.strip .f-shape .label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.segment {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: calc(var(--field-h) - 12px);
  font: 500 var(--t-label)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.segment input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
/* each bar a line drawing, 40 by 32px, in one oblique view: the end face nearest (the round one's a circle, so it reads as
   round at this size), the length running up and to the right at 30 degrees, a 1.5px stroke, no fill (09-28, Gilad: "a small
   isometric-style thing where you see the bar", plain white like the others). The chosen one is drawn and named in Ink
   inside a 1px Ink frame; the others in Ink Muted */
.segment svg { width: 40px; height: 32px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.segment.is-on { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* none listed in this material, still pickable: fainter words and the shape drawn dashed, as a drawing shows what isn't there */
.segment.is-off:not(.is-on) { color: rgba(24, 24, 24, 0.4); }
.segment.is-off svg { stroke-dasharray: 2.5 2; }
.segment:has(input:focus-visible) { outline: 2px solid var(--layout-blue); outline-offset: -2px; }

.settings-line {
  margin-top: var(--s3);
  font: 400 var(--t-label)/1.5 var(--mono);
  color: var(--chalk-faint);
}
/* "Change" runs on at the end of the summary; its 44px touch target is drawn around it, not added to the line */
.settings-summary { display: inline; margin: 0 var(--s3) 0 0; }
/* on the empty page the line is only "Settings" (09-27): the summary describes an answer, so it waits for the first one,
   and then the button reads "Change" */
.settings-summary, .settings-line .when-job { display: none; }
.has-job .settings-summary { display: inline; }
.has-job .settings-line .when-job { display: inline; }
.has-job .settings-line .when-empty { display: none; }
#settings-toggle { position: relative; min-height: 0; vertical-align: baseline; }
#settings-toggle::after { content: ""; position: absolute; inset: -13px -8px; }
.text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 var(--t-label)/1.5 var(--mono);
  letter-spacing: 0.02em;
  color: var(--chalk);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}
.text-button:focus-visible { outline: 2px solid var(--layout-blue); outline-offset: 2px; }
.text-button:disabled { opacity: 0.5; cursor: default; }
.text-button .chev {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms var(--ease-out);
}
.text-button[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 3px; }

.settings {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s2);
  padding: var(--s5) 0 var(--s2);
  border-top: 1px solid var(--hairline);
  animation: rise 160ms var(--ease-out);
}
.settings[hidden] { display: none; }
.settings-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.settings-switches { display: grid; gap: var(--s4); }

.switch { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; cursor: pointer; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.switch-track {
  position: relative;
  width: 40px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--hairline-strong);
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--chalk-muted);
  transition: transform 150ms var(--ease-out), background 150ms var(--ease-out);
}
.switch input:checked + .switch-track { background: var(--layout-blue); border-color: var(--layout-blue); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: var(--chalk); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--layout-blue); outline-offset: 2px; }
.switch-text strong { display: block; font: 500 var(--t-base)/1.3 var(--sans); }
.switch-text small { display: block; margin-top: 2px; font-size: var(--t-sm); line-height: 1.4; color: var(--chalk-faint); }

/* ---- results ---------------------------------------------------------------------------------------------------- */

.results { margin-top: var(--s3); scroll-margin-top: var(--s4); }
.results-body:focus { outline: none; }
/* one line, always there, so nothing below it moves: what the job still needs */
.prompt {
  height: 1.25rem;
  margin: 0 0 var(--s2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 var(--t-sm)/1.25rem var(--sans);
  color: var(--chalk);
}
.prompt.is-error { color: var(--error); }
/* a shape change or a setting a fix turned on, said once above the answer, with its one action */
.notice { margin: 0 0 var(--s3); }
.notice[hidden] { display: none; }
.notice p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--chalk-muted); }
.notice p + p { margin-top: var(--s1); }
.notice .caveat { display: inline; }  /* the misfit warning runs into its line (09-28) */
.sheet-warn { margin: var(--s2) 0 0; }
.notice .text-button { min-height: 0; margin-left: var(--s2); vertical-align: baseline; position: relative; }
.notice .text-button::after { content: ""; position: absolute; inset: -13px -8px; }
.results-body { transition: opacity 150ms var(--ease-out); }
.results-body.is-stale { opacity: 0.4; }  /* the last answer, kept in place while the job is being changed */

.skeleton { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: 2px solid var(--hairline-strong); }
.skeleton span { display: block; height: var(--s6); background: var(--panel); }
.skeleton span:nth-child(2) { width: 82%; }
.skeleton span:nth-child(3) { width: 64%; }

.empty { padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.message { margin: 0; padding-top: var(--s4); border-top: 2px solid var(--chalk); }
.message p { margin: 0; max-width: 60ch; color: var(--chalk-muted); }
.message .fixes { margin-top: var(--s3); }

/* uptool.com's section surface (its feature sections sit on this same tint, read 09-26): the seller list sits on a band
   that runs from rail to rail, its content in line with the form */
.compare, .nobuy.is-alone { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); background: var(--panel); }
/* the comparison list: every seller together, cheapest first; the chosen one ringed in Layout Blue. On its band (above),
   a 2px Chalk rule opens it, as wide as the form; the chosen row's tint and the hover lie over the band's */
.compare { padding-bottom: var(--s4); }
.compare > :first-child, .nobuy.is-alone > :first-child { border-top: 2px solid var(--chalk); }
.tabs { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); }  /* every row on one set of columns */
.row-head {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-areas: "seller total" "stock mark" "stock per" "note note";  /* the caveat on its own line on phones (09-28) */
  row-gap: var(--s1);
  align-items: start;
  margin: 0;
  padding: var(--s4) var(--s3);
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.row-head[aria-selected="true"] { background: var(--panel); box-shadow: inset 0 0 0 1px var(--layout-blue); }
/* a re-rank: rows slide to their new places on the band's own color, made opaque, so they don't show through each other
   as they cross, and the one moving up passes over the rest */
.row-head.is-sliding, .row-head.is-sliding:hover { background: linear-gradient(var(--panel), var(--panel)), var(--graphite); transition: none; }
.row-head.is-sliding[aria-selected="true"] { background: linear-gradient(var(--panel), var(--panel)), linear-gradient(var(--panel), var(--panel)), var(--graphite); }
.row-head.is-rising { z-index: 1; }
.row-head:focus-visible { outline: 2px solid var(--layout-blue); outline-offset: -2px; }
.row-seller { font: 500 var(--t-md)/1.25 var(--display); letter-spacing: -0.01em; }
.row-stock { font: 400 var(--t-sm)/1.4 var(--mono); color: var(--chalk-muted); }
.row-buy { display: block; margin-top: 2px; font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-muted); }  /* what the total buys (09-28) */
/* the list's head, under its rule: what the columns are, and that no total here includes shipping (09-28) */
.tabs-head { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s3) 0; font: 400 var(--t-label)/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--chalk-faint); }
@media (max-width: 719px) { .tabs-head span:first-child { display: none; } }  /* on phones only what the totals leave out */
.cond { display: block; margin-top: 2px; font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-faint); }  /* the seller's condition */
.was { display: block; font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-faint); }  /* before a fix changed it */
.pn { margin: 0 -0.14em; }  /* a mono , or . takes a whole cell; set close in a big total */
.row-total { font: 500 var(--t-xl)/1 var(--mono); letter-spacing: -0.02em; text-align: right; }
.row-per { font: 400 var(--t-label)/1.4 var(--mono); color: var(--chalk-muted); text-align: right; white-space: nowrap; }
.row-mark { justify-self: end; }
.row-head .row-seller { grid-area: seller; }
.row-head .row-stock { grid-area: stock; }
.row-head .row-total { grid-area: total; }
.row-head .row-per { grid-area: per; }
.row-head .row-note { grid-area: note; }
.row-note:empty { display: none; }
.row-head .row-mark { grid-area: mark; }
.badge {
  display: inline-block;
  padding: 4px 6px 3px;
  border: 1px solid var(--chalk-muted);
  font: 500 var(--t-label)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk);
}
.diff, .only { font: 400 var(--t-label)/1.4 var(--mono); color: var(--chalk-muted); white-space: nowrap; }
.only { color: var(--chalk-faint); }
/* the seller's warnings, one style wherever they appear: amber mono with a square */
.caveat, .flag { font: 500 var(--t-label)/1.5 var(--mono); color: var(--caution); }
.caveat { display: block; }
.caveat::before, .flag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--s2) 1px 0; background: var(--caution); vertical-align: middle; }
.nobuy { list-style: none; margin: 0; padding: 0; }
.nobuy.is-alone { padding-bottom: var(--s4); }
.row-none { display: grid; gap: var(--s2); padding: var(--s4) var(--s3); border-bottom: 1px solid var(--hairline-strong); }
.row-none .row-seller { margin: 0; }
.row-none .reason { margin: 0; font-size: var(--t-sm); color: var(--chalk-muted); max-width: 60ch; }
.fixes { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }

/* the cut sheet */
.sheet { margin-top: var(--s7); border-top: 2px solid var(--chalk); scroll-margin-top: var(--s4); animation: rise 160ms var(--ease-out); }
.sheet.is-alone { margin-top: 0; animation: none; }
/* the seller's line: who, which stock, and the total, at the top of the sheet */
.sheet-head { display: grid; gap: var(--s3) var(--s5); padding: var(--s4) 0 var(--s3); }
.sheet-seller { margin: 0; font: 500 var(--t-xl)/1 var(--display); letter-spacing: -0.025em; }
.sheet-stock { margin: var(--s2) 0 0; font: 400 var(--t-sm)/1.4 var(--mono); color: var(--chalk-muted); }
.sheet-total { margin: 0; }
.sheet-sum { display: block; font: 500 var(--t-xl)/1 var(--mono); letter-spacing: -0.02em; }
.sheet.is-alone .sheet-sum { font-size: var(--t-2xl); letter-spacing: -0.03em; }
.sheet-per { display: block; margin-top: var(--s2); font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-muted); }
.sheet-why { margin: 0 0 var(--s3); font-size: var(--t-sm); line-height: 1.5; color: var(--chalk-faint); max-width: 50ch; }

.cut { width: 100%; border-collapse: collapse; }
.cut th {
  padding: var(--s3) var(--s4) var(--s2) 0;
  border-bottom: 1px solid var(--hairline);
  font: 400 var(--t-label)/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  color: var(--chalk-faint);
  white-space: nowrap;
}
.cut td { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.cut th:last-child, .cut td:last-child { padding-right: 0; }
.cut .num { text-align: right; white-space: nowrap; }
.c-buy { font: 500 var(--t-md)/1.3 var(--mono); }
.c-buy .x { margin: 0 6px 0 4px; color: var(--chalk-faint); font-weight: 400; }
/* a length with its own page at the seller (NOX, Sequoia) links it, so the bar bought is the bar opened */
.buy-link { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 4px; }
.buy-link .arrow { margin-left: var(--s1); font: 400 var(--t-sm)/1 var(--sans); color: var(--chalk-muted); }
/* the cut math in words, once, under the table */
.cut-key { margin: var(--s3) 0 0; max-width: 60ch; font-size: var(--t-sm); line-height: 1.5; color: var(--chalk-faint); }
.c-buy .sub { display: block; margin-top: var(--s1); font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-muted); }
.c-buy .sub.work { color: var(--chalk-faint); }
.c-yield { font: 400 var(--t-base)/1.3 var(--mono); color: var(--chalk-muted); white-space: nowrap; }
.c-work { font: 400 var(--t-sm)/1.4 var(--mono); color: var(--chalk-faint); }
.c-each { font: 400 var(--t-base)/1.3 var(--mono); color: var(--chalk-muted); }
.c-line { font: 500 var(--t-md)/1.3 var(--mono); }
.c-yield, .c-work, .c-each { display: none; }
.flag-row td { padding-top: 0; }
.flag { display: block; }

.sheet-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s4) var(--s6); padding-top: var(--s5); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: 0; padding: 0; list-style: none; font: 400 var(--t-sm)/1.5 var(--mono); color: var(--chalk-muted); }
.sum { margin-left: auto; text-align: right; }
.sum-label { display: block; margin-bottom: var(--s2); }
.sum-value { display: block; font: 500 var(--t-md)/1 var(--mono); }
.sum-per { display: block; margin-top: var(--s2); font: 400 var(--t-label)/1.5 var(--mono); color: var(--chalk-muted); }

/* the cut plan opens right under its toggle; "View at" follows it on phones and sits beside the toggle on wider screens */
.sheet-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "toggle" "plan" "view";
  align-items: center;
  column-gap: var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
}
#plan-toggle { grid-area: toggle; justify-self: start; }
.sheet-actions .btn { grid-area: view; margin-top: var(--s3); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 0 var(--s5);
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
  background: var(--graphite-deep);
  font: 500 var(--t-sm)/1 var(--mono);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--layout-blue); outline-offset: 2px; }
.btn .arrow { font-family: var(--sans); font-size: var(--t-md); }
.btn-small { min-height: 44px; padding: 0 var(--s4); font-size: var(--t-label); }

/* the cut plan */
.plan {
  grid-area: plan;
  margin: var(--s2) 0 0;
  padding: var(--s4) var(--s4) var(--s3);
  border: 1px solid var(--hairline);
  background-color: rgba(100, 98, 109, 0.06);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: rise 160ms var(--ease-out);
}
.plan[hidden] { display: none; }
.plan-draw { min-height: 60px; }
.plan-draw svg { display: block; overflow: visible; }
/* the drawing's colors: chalk on the drafting ground, one blue piece; print swaps the ink and the ground */
.plan-draw { --ink: 255 255 255; --ground: #1d1c1d; }
/* each metal in its own color, in the drawings only: a piece's body is solid (a see-through fill turns brass olive on
   the dark ground) and its edge a step lighter; the bar's outline and its hatched drop take the edge (OKLCH lightness,
   chroma, hue). The annotations stay chalk and the first piece stays Layout Blue; print draws every metal in ink */
.plan-draw { --metal: 0.82 0 0; --metal-body: 0.5 0 0; }
.plan-draw[data-metal="aluminum"] { --metal: 0.86 0.01 245; --metal-body: 0.6 0.012 245; }
.plan-draw[data-metal="stainless"] { --metal: 0.8 0.004 75; --metal-body: 0.55 0.004 75; }
.plan-draw[data-metal="steel"] { --metal: 0.7 0.018 250; --metal-body: 0.46 0.018 250; }
.plan-draw[data-metal="alloy steel"] { --metal: 0.66 0.014 262; --metal-body: 0.42 0.014 262; }
.plan-draw[data-metal="tool steel"] { --metal: 0.6 0.01 250; --metal-body: 0.36 0.01 250; }
.plan-draw[data-metal="cast iron"] { --metal: 0.54 0.006 60; --metal-body: 0.32 0.006 60; }
.plan-draw[data-metal="brass"] { --metal: 0.85 0.11 88; --metal-body: 0.64 0.11 86; }
.plan-draw[data-metal="bronze"] { --metal: 0.74 0.08 70; --metal-body: 0.53 0.075 66; }
.plan-draw[data-metal="copper"] { --metal: 0.75 0.12 50; --metal-body: 0.56 0.12 46; }
.plan-draw text { font-family: var(--mono); font-size: 12px; fill: rgb(var(--ink) / 0.78); letter-spacing: 0; }
.plan-draw .p-qty { font-size: 14px; font-weight: 500; fill: rgb(var(--ink)); }
.plan-draw .p-dim { fill: rgb(var(--ink) / 0.85); }
.plan-draw .p-soft { fill: rgb(var(--ink) / 0.55); }
.plan-draw .p-dim-line { stroke: rgb(var(--ink) / 0.8); }
.plan-draw .p-arrow { fill: rgb(var(--ink) / 0.85); }
.plan-draw .p-label { fill: var(--ground); }
.plan-draw .p-ext { stroke: rgb(var(--ink) / 0.35); }
.plan-draw .p-waste { stroke: oklch(var(--metal) / 0.35); }
.plan-draw .p-hatch { stroke: oklch(var(--metal) / 0.5); stroke-width: 1.5; }
.plan-draw .p-piece { fill: oklch(var(--metal-body)); stroke: oklch(var(--metal) / 0.9); }
.plan-draw .p-first { fill: rgb(36 97 236 / 0.75); stroke: oklch(var(--metal) / 0.9); }
.plan-draw .p-first-solid { fill: var(--layout-blue); }
.plan-draw .p-band { stroke: oklch(var(--metal) / 0.75); }
.plan-draw .p-dense { fill: oklch(var(--metal-body)); }
.plan figcaption { max-width: 72ch; margin-top: var(--s3); font: 400 var(--t-label)/1.6 var(--mono); color: var(--chalk-faint); }
.plan figcaption b { font-weight: 500; color: var(--chalk-muted); }

.also { margin-top: var(--s5); }
.also ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.also li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-sm); }
.also a { color: var(--chalk-muted); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.also .num { color: var(--chalk-muted); }

/* the sellers, on the empty page: who is priced and what each lists, on the band where the answer rows will land
   (09-27; the first screen never said several sellers are compared). Set like the comparison list's rows: the seller
   in the display face, its coverage as a stock line, the price date in the caption's mono */
.sellers-band { margin: var(--s5) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) var(--s4); background: var(--panel); }
.sellers { width: 100%; border-collapse: collapse; border-top: 2px solid var(--chalk); }
.sellers th, .sellers td { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--hairline-strong); text-align: left; vertical-align: baseline; }
.sellers thead th {
  padding: var(--s3) var(--s4) var(--s2) 0;
  border-bottom: 1px solid var(--hairline);
  font: 400 var(--t-label)/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  white-space: nowrap;
}
.sellers th:last-child, .sellers td:last-child { padding-right: 0; }
.sellers tbody th { width: 28%; }
.sellers .row-seller a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 4px; }
.sellers .row-date { font: 400 var(--t-sm)/1.4 var(--mono); color: var(--chalk-faint); white-space: nowrap; }
@media (max-width: 719px) {  /* a row stacks: seller and date, then what it lists */
  .sellers, .sellers tbody { display: block; }
  .sellers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sellers tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "seller date" "stock stock";
    column-gap: var(--s4);
    row-gap: var(--s1);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--hairline-strong);
  }
  .sellers th, .sellers td { display: block; padding: 0; border: 0; }
  .sellers tbody th { width: auto; }
  .sellers .row-seller { grid-area: seller; }
  .sellers .row-stock { grid-area: stock; }
  .sellers .row-date { grid-area: date; }
}

.uptool-line { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.uptool-line p { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--chalk-muted); max-width: 48ch; }
.uptool-line a { color: var(--chalk); text-underline-offset: 3px; }

/* ---- footer ----------------------------------------------------------------------------------------------------- */

.page { padding-bottom: var(--s8); }
.footer { border-top: 1px solid var(--hairline); }
.footer-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  padding-top: var(--s5);
  padding-bottom: max(var(--s6), env(safe-area-inset-bottom));
  font: 400 var(--t-sm)/1.5 var(--sans);
  color: var(--chalk-faint);
}

@keyframes rise { from { opacity: 0; transform: translateY(4px); } }

/* pressed: the one state a touch screen shows */
.row-head:active, .btn:active { background: var(--panel-strong); }
.segment:not(.is-on):active { background: rgba(24, 24, 24, 0.1); }

/* ---- hover, only where there is a pointer that hovers ----------------------------------------------------------- */

@media (hover: hover) {
  .segment:not(.is-on):not(.is-off):hover { color: var(--ink); background: rgba(24, 24, 24, 0.06); }
  .go:hover { background: var(--layout-blue-press); }
  .text-button:hover { color: var(--chalk); text-decoration-color: currentColor; }
  .row-head:hover { background: var(--panel); }
  .select.is-styled option:hover { background: rgba(24, 24, 24, 0.06); }
  .btn:hover { background: var(--graphite-press); border-color: var(--chalk-faint); }
  .also a:hover, .uptool-line a:hover { color: var(--chalk); text-decoration-color: currentColor; }
  .topbar-label:hover, .topbar-theme:hover { color: var(--chalk); }
  .buy-link:hover { text-decoration-color: currentColor; }
}

/* ---- wider screens ---------------------------------------------------------------------------------------------- */

@media (min-width: 720px) {
  :root { --gutter: var(--s5); --field-h: 3.25rem; }
  .strip { --field-h: 4.5rem; }  /* the job's fields lead the page; the settings keep theirs */
  .strip .label { top: 12px; }
  .strip .control input, .strip .control select { padding-top: 24px; font-size: var(--t-field); }
  .strip .control .unit { margin-top: 24px; }
  .strip .select::after { margin-top: 7px; }
  .go { align-self: start; }
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 30%); grid-template-areas: "text photo"; }
  .intro-text { padding: var(--s8) var(--gutter) var(--s7); }
  .intro-photo { height: auto; min-height: 0; border-bottom: 0; border-left: 1px solid var(--hairline); }
  .intro-photo img { object-position: 50% 30%; }
  .has-job .intro-text { padding: var(--s6) var(--gutter) var(--s5); }
  .job { padding-top: var(--s6); }
  /* one set of columns for every shape (09-28, Gilad: the cells shifted between round and flat): the size area is two
     columns, one Diameter cell across both for round and square, Thickness beside Width for flat; nothing else moves */
  .strip, .strip.is-flat { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-areas: "material material material material material shape shape shape shape shape" "a a b b length length count count go go"; }
  .strip:not(.is-flat) .f-a { grid-row: 2; grid-column: 1 / 5; }
  .settings-sizes { grid-template-columns: repeat(2, minmax(0, 220px)); }
  .settings-switches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto auto auto; }
  .row-head { grid-template-areas: "seller stock mark total per" "seller stock mark total note"; align-items: center; }
  .row-per, .row-note { text-align: left; }
  .sheet-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .sheet-total { text-align: right; }
  .sheet-actions { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "toggle view" "plan plan"; }
  .sheet-actions .btn { margin-top: 0; }
  .c-yield, .c-each { display: table-cell; }
  .c-buy .sub.meta { display: none; }
}

@media (min-width: 1080px) {
  :root { --gutter: 40px; }
  .page { border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
  .intro h1 { font-size: var(--t-3xl); line-height: 0.95; }
  .settings { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .settings-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-work { display: table-cell; }
  .c-buy .sub.work { display: none; }
}

/* the bar on one row once the frame reaches its full 1200px (at 1080 to 1199px "4140 alloy steel" was cut short beside
   the size cells, so the two-row bar holds until then); the same columns for every shape, the size area two of them */
@media (min-width: 1200px) {
  .strip, .strip.is-flat { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 0.7fr) auto; grid-template-areas: "material shape a b length count go"; }  /* shape 1.5fr: "Rectangular" needs 87px (10-02) */
  .strip:not(.is-flat) .f-a { grid-row: 1; grid-column: 3 / 5; }
}

/* ---- the light palette, to compare against the house dark one (09-28, Gilad: "something is so dark"; not uptool.com's
   look, kept behind the top bar's switch): paper ground, ink text, white cells with a faint edge, the same Layout Blue --- */

:root[data-theme="light"] {
  --graphite: #f4f3f0; --graphite-deep: #e8e6e1; --graphite-press: #dedbd4;
  --panel: rgba(24, 24, 24, 0.045); --panel-strong: rgba(24, 24, 24, 0.09);
  --hairline: rgba(24, 24, 24, 0.12); --hairline-strong: rgba(24, 24, 24, 0.22);
  --chalk: #181818; --chalk-muted: rgba(24, 24, 24, 0.7); --chalk-faint: rgba(24, 24, 24, 0.64);  /* 10-05: 0.55 read 3.8:1 on paper; 0.64 is 4.8:1 on a row open over the band */
  --caution: #8a5300; --error: #b3261e;
  color-scheme: light;
}
[data-theme="light"] .control, [data-theme="light"] .segments { background: #fff; box-shadow: inset 0 0 0 1px rgba(24, 24, 24, 0.1); }
[data-theme="light"] .strip .control:focus-within { box-shadow: inset 0 0 0 2px var(--layout-blue); }
[data-theme="light"] .strip .control.is-invalid { box-shadow: inset 0 0 0 2px var(--error); }
[data-theme="light"] .control:focus-within { box-shadow: 0 0 0 2px var(--layout-blue); }
[data-theme="light"] .control.is-invalid { box-shadow: 0 0 0 2px var(--error); }
[data-theme="light"] .select.is-styled select::picker(select) { background: #fff; box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1), 0 0 0 1px rgba(24, 24, 24, 0.1); }
[data-theme="light"] .segment.is-on { color: var(--ink); }
[data-theme="light"] .btn { color: var(--chalk); }
[data-theme="light"] .plan-draw { --ink: 24 24 24; --ground: #fbfaf8; }
[data-theme="light"] .plan { background-image: linear-gradient(rgba(24, 24, 24, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 24, 24, 0.05) 1px, transparent 1px); }
[data-theme="light"] .intro-photo { border-bottom: 1px solid var(--hairline); }
[data-theme="light"] .switch-track::after { background: rgba(24, 24, 24, 0.55); }
[data-theme="light"] .switch input:checked + .switch-track::after { background: #fff; }
[data-theme="light"] .go { color: #fff; }
[data-theme="light"] .go:focus-visible { outline-color: #fff; }

/* ---- print: the cut sheet on paper, for the quote file: ink on white, only what the estimator would file ------- */

@media print {
  :root, :root[data-theme="light"] {
    --graphite: #fff; --graphite-deep: #fff; --panel: transparent; --panel-strong: transparent;
    --chalk: #181818; --chalk-muted: rgba(24, 24, 24, 0.75); --chalk-faint: rgba(24, 24, 24, 0.6);
    --hairline: rgba(24, 24, 24, 0.18); --hairline-strong: rgba(24, 24, 24, 0.35);
    --caution: #8a5300; --error: #b3261e;
    color-scheme: light;
  }
  @page { margin: 14mm; }
  body { min-height: 0; display: block; }
  .page { border: 0; padding-bottom: var(--s5); }
  .intro { border: 0; }
  .intro-text { padding: 0 var(--gutter) var(--s4); }
  .job { padding-top: 0; }
  .control, .segments { border: 1px solid var(--hairline-strong); }
  .control, .segments, .segment.is-on { background: none; color: var(--chalk); }
  .strip .label, .segment { color: var(--chalk-muted); }
  .segment.is-on { outline: 1px solid var(--chalk); outline-offset: -1px; font-weight: 700; }
  .settings, #settings-toggle, .prompt, #plan-toggle, .sheet-actions .btn, .fixes, .empty, .uptool-line, .chev,
  .notice .text-button, .cover, .intro-photo, .sellers-band, .go, .topbar-theme { display: none !important; }
  .sheet-actions { border: 0; margin-top: 0; }
  .plan-draw { --ink: 24 24 24; --ground: #fff; }
  .plan-draw, .plan-draw[data-metal] { --metal: 0.25 0 0; --metal-body: 0.92 0 0; }
  .row-head, .cut tr, .plan, .sheet-head { break-inside: avoid; }
  .sheet { margin-top: var(--s6); animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}