/* Should-Cost UI — "Precision Instrument" design language.
   Warm stone neutrals, ink primary, one cobalt accent reserved for live data readings.
   All figures in mono. No external fonts/assets: system stacks keep it fully offline
   (CLAUDE.md §2). Design source: Figma "Should-Cost — Product Design Revision". */

:root {
  --background: #ffffff;
  --surface: #fafaf9;          /* canvas */
  --card: #ffffff;
  --border: #e7e5e4;
  --border-strong: #d6d3d1;
  --foreground: #0a0a0a;       /* ink */
  --muted: #f5f5f4;
  --muted-foreground: #78716c;
  --body: #44403c;
  --primary: #171717;
  --primary-foreground: #fafafa;
  --accent: #1d4ed8;           /* cobalt — live readings, cursors, current qty */
  --accent-soft: #eff4ff;
  --radius: 14px;
  --radius-sm: 9px;
  --high: #dc2626;
  --warn: #d97706;
  --info: #2563eb;
  --ok: #16a34a;
  --ring: #a8a29e;
  --shadow-pop: 0 12px 34px rgba(28, 25, 23, 0.18);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface);
  color: var(--foreground);
  font-size: clamp(14px, 0.92vw, 21px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); }

/* ---------- header ---------- */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: baseline; gap: 0.85rem; }
.brand h1 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.brand .sub { color: var(--muted-foreground); font-size: 0.875rem; letter-spacing: 0.01em; }
.badge {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14); }

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(320px, 26rem) 1fr;
  gap: 1.5rem;
  padding: 1.5rem 2rem 4rem;
  max-width: 96rem;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 920px) { .layout { grid-template-columns: 1fr; } }

.config { position: sticky; top: 4.6rem; }

/* ---------- cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem;
  margin-bottom: 1rem;
  transition: border-color 0.15s;
}
.card h2 { font-size: 1.02rem; font-weight: 600; margin: 0 0 0.15rem; letter-spacing: -0.01em; }
.card .desc { color: var(--muted-foreground); font-size: 0.85rem; margin: 0 0 1rem; }
.card h3 {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-foreground); margin: 1.25rem 0 0.65rem; font-weight: 600;
}

/* numbered workflow steps (config rail) */
.step-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.2rem; }
.step-head h2 { margin: 0; }
.step-n {
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted-foreground);
  background: var(--muted); border-radius: 6px; padding: 0.14rem 0.5rem;
}

/* ---------- form fields ---------- */
.field { margin-bottom: 1rem; }
.field > label {
  display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.4rem;
}
.hint { color: var(--muted-foreground); font-size: 0.78rem; margin-top: 0.35rem; }

select, input[type="number"], input[type="text"],
input[type="password"], input[type="email"] {
  width: 100%;
  height: 2.6rem;
  padding: 0 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input[type="number"] { font-family: var(--mono); font-size: 0.88rem; }
select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* dropzone */
.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: 10px;
  padding: 0.95rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
  background: var(--surface);
  display: block;
}
.dropzone:hover, .dropzone.drag { border-color: var(--foreground); background: var(--muted); }
.dropzone:active { transform: scale(0.995); }
.dropzone .dz-title { font-size: 0.9rem; font-weight: 500; }
.dropzone .dz-sub { color: var(--muted-foreground); font-size: 0.78rem; margin-top: 3px; }
.dropzone.set { border-style: solid; border-color: var(--ok); background: #f4fbf6; }
.dropzone .filename { font-family: var(--mono); font-size: 0.82rem; word-break: break-all; color: #166534; }
.req { color: var(--high); }

/* slider + number combo */
.qty-row { display: flex; gap: 0.7rem; align-items: center; }
.qty-row input[type="number"] { width: 6rem; flex: none; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: var(--border-strong); flex: 1; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); cursor: pointer; border: 2.5px solid var(--background);
  box-shadow: 0 0 0 1px var(--border-strong), 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }

/* segmented control */
.segmented { display: flex; background: var(--muted); border-radius: 10px; padding: 3px; gap: 2px; }
.segmented button {
  flex: 1; border: none; background: transparent; padding: 0.5rem 0.5rem;
  font-size: 0.85rem; font-family: inherit; cursor: pointer; color: var(--muted-foreground);
  border-radius: 8px; font-weight: 500; transition: background 0.12s, color 0.12s;
}
.segmented button:hover { color: var(--foreground); }
.segmented button.active { background: var(--primary); color: var(--primary-foreground); }

/* toggle */
.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider-bg {
  position: absolute; inset: 0; background: var(--border-strong);
  border-radius: 999px; transition: 0.15s; cursor: pointer;
}
.slider-bg::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider-bg { background: var(--primary); }
.switch input:checked + .slider-bg::before { transform: translateX(16px); }

/* advanced disclosure */
details.advanced { border-top: 1px solid var(--border); margin-top: 0.4rem; padding-top: 0.55rem; }
details.advanced > summary {
  cursor: pointer; list-style: none; font-size: 0.85rem; font-weight: 500;
  color: var(--muted-foreground); padding: 0.4rem 0; display: flex; align-items: center; gap: 0.4rem;
}
details.advanced > summary:hover { color: var(--foreground); }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: "▸"; font-size: 10px; transition: transform 0.12s; }
details.advanced[open] > summary::before { transform: rotate(90deg); }

/* buttons */
.btn {
  width: 100%; height: 2.9rem; border: none; border-radius: 10px; cursor: pointer;
  background: var(--primary); color: var(--primary-foreground); font-size: 0.98rem;
  font-weight: 600; font-family: inherit; transition: opacity 0.12s, transform 0.08s;
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: scale(0.99); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.secondary {
  background: var(--background); color: var(--foreground); border: 1px solid var(--border-strong);
  font-weight: 500;
}
.btn.secondary:hover { background: var(--muted); opacity: 1; }

/* ---------- results ---------- */
.empty {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  padding: 4.5rem 2rem; text-align: center; color: var(--muted-foreground);
}
.empty .big { font-size: 1.1rem; color: var(--foreground); font-weight: 600; margin-bottom: 0.4rem; }
.empty-steps {
  display: flex; gap: 2rem; justify-content: center; margin-top: 1.6rem; flex-wrap: wrap;
}
.empty-steps div { font-size: 0.82rem; max-width: 12rem; }
.empty-steps .step-n { display: inline-block; margin-bottom: 0.4rem; }

/* staggered card reveal */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#output .card { animation: rise 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) { #output .card { animation: none; } }

/* hero */
/* Hero: three aligned zones — [part thumbnail] [price block] [spec meta] — the price
   block owns the flexible middle; the thumbnail column only exists when a part is shown. */
/* Flex, not grid, and deliberately so: the meta column's values are nowrap and vary in
   length ("series · first-piece + operator checks"), so with `grid-template-columns: 1fr
   auto` a long value claimed the width and starved the price block until the kicker broke
   one word per line. Wrapping on CONTENT means the meta drops to its own row exactly when
   it no longer fits, at any viewport width. */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.hero-thumb[hidden] { display: none; }
.hero-main { flex: 1 1 17rem; min-width: 0; }   /* never squeezed below a readable width */
.hero .meta { flex: 0 1 auto; min-width: 0; }
.hero-kicker {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-foreground); font-weight: 600; margin-bottom: 0.5rem;
}
.hero .total {
  font-family: var(--mono); font-size: clamp(2.1rem, 2.9vw, 3.1rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.chips { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 0.78rem; padding: 0.3rem 0.7rem;
  border-radius: 999px; background: var(--muted); color: var(--muted-foreground);
}
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.chip.pinned { background: #f0fdf4; color: #166534; }

/* quote positioning */
.quote-controls { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.8rem; }
.quote-controls .segmented { flex: 1; min-width: 20rem; }
.quote-controls #quote-target { width: 11rem; flex: none; }
.quote-price { font-family: var(--mono); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.quote-price.danger { color: var(--high); }
.quote-verdict { font-family: inherit; font-size: 0.85rem; font-weight: 500; color: var(--muted-foreground); margin-left: 0.6rem; }
.quote-facts { margin-top: 0.5rem; display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--body); }
.quote-facts b { font-family: var(--mono); }
.quote-warn { color: var(--high); font-weight: 600; }

/* "Your numbers" pin rows */
.pin-row { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.pin-row:last-child { border-bottom: none; }
.pin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.pin-head label { font-size: 0.85rem; font-weight: 500; }
.pin-unit { color: var(--muted-foreground); font-weight: 400; font-size: 0.78rem; }
.pin-band { font-family: var(--mono); font-size: 0.72rem; color: var(--muted-foreground); }
.pin-controls { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.35rem; }
.pin-controls .pin-value { width: 7rem; flex: none; height: 2.2rem; }
.pin-row .hint { margin-top: 0.25rem; }
.profile-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  flex-wrap: wrap; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--border);
}
.profile-bar .hint { margin: 0; flex: 1; min-width: 12rem; }
.profile-actions { display: flex; gap: 0.5rem; flex: none; }
.btn-small { width: auto; height: 2.1rem; padding: 0 0.8rem; font-size: 0.8rem; }
.hero .meta {
  text-align: right; display: grid; gap: 0.35rem; align-self: center;
  border-left: 1px solid var(--border); padding-left: 2rem;
}
/* nowrap keeps "label  value" on one line, but it must still be able to give up and wrap
   rather than overflow the card on a narrow screen. */
.hero .meta > div { font-size: 0.78rem; color: var(--muted-foreground); white-space: nowrap; }
.hero .meta b, .hero .meta .mv {
  color: var(--foreground); font-family: var(--mono); font-weight: 500;
  font-size: 0.85rem; margin-left: 0.5rem;
}
/* Must come AFTER the base .hero .meta rules above: same specificity, so source order
   decides. Declared earlier (next to .hero) it was dead CSS and the meta stayed
   right-aligned with 2rem of padding on a 350px-wide card. */
@media (max-width: 860px) {
  .hero .meta { text-align: left; border-left: none; padding-left: 0; }
}
@media (max-width: 560px) {
  /* let a long value wrap rather than push the card wider than the screen */
  .hero .meta > div { white-space: normal; }
}

/* breakdown */
.bd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.bd-head .sums { font-family: var(--mono); font-size: 0.8rem; color: var(--muted-foreground); }

.comp { display: flex; height: 0.85rem; border-radius: 999px; overflow: hidden; gap: 2px; margin: 0.9rem 0 0.5rem; }
.comp span { background: var(--foreground); transition: opacity 0.15s, flex-grow 0.4s; min-width: 2px; }
.comp span.dim { opacity: 0.18 !important; }

.bd-row {
  position: relative; display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr minmax(9rem, 12rem);
  gap: 0.85rem; align-items: center; padding: 0.62rem 0;
  border-bottom: 1px solid var(--border);
}
.bd-row:last-of-type { border-bottom: none; }
.bd-row.has-explain { cursor: help; }
.bd-row:hover { background: linear-gradient(90deg, transparent, var(--surface) 8%, var(--surface) 92%, transparent); }
.bd-row .lbl { font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 0.55rem; }
.blk {
  font-family: var(--mono); font-size: 0.7rem; color: var(--muted-foreground);
  background: var(--muted); border-radius: 5px; padding: 0.08rem 0.42rem; flex: none;
}
.bd-row .info { color: var(--border-strong); font-size: 0.72rem; transition: color 0.12s; }
.bd-row.has-explain:hover .info { color: var(--accent); }

/* calculation tooltip (dark popover) */
.bd-explain {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  background: #1c1917; color: var(--card);
  border-radius: 12px; padding: 0.85rem 1rem; width: max-content; max-width: 30rem;
  box-shadow: var(--shadow-pop); pointer-events: none;
}
.bd-explain::before {
  content: ""; position: absolute; left: 18px; top: -5px; width: 10px; height: 10px;
  background: #1c1917; transform: rotate(45deg); border-radius: 2px;
}
.bd-explain .formula { font-size: 0.83rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.55rem; }
.bd-explain .step { font-family: var(--mono); font-size: 0.76rem; line-height: 1.7; color: rgba(255,255,255,0.6); }
.bd-explain .gloss {
  font-family: inherit; font-size: 0.78rem; line-height: 1.5; font-style: italic;
  color: rgba(255,255,255,0.75); margin: 0.15rem 0 0.45rem; max-width: 26rem;
}
.bd-explain .result {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: #fff;
  margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid rgba(255,255,255,0.16);
}
.bd-row.has-explain:hover .bd-explain,
.bd-row.has-explain:focus .bd-explain,
.bd-row.has-explain:focus-within .bd-explain { display: block; }

/* part thumbnails: hero (click-through to the 3D viewer) + small order-line variant */
.hero-thumb {
  position: relative; flex: none; width: 128px; height: 128px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  overflow: hidden; align-self: center;
}
.hero-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* a stored thumbnail with no file behind it: show the part, do not promise a 3D view */
.hero-thumb.no-3d, .thumb-s.no-3d { cursor: default; }
.hero-thumb.no-3d .ht-hint { opacity: 0.55; }
.hero-thumb .ht-hint {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 0.68rem; padding: 0.15rem 0; color: var(--muted-foreground);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  opacity: 0; transition: opacity 0.15s;
}
.hero-thumb:hover .ht-hint { opacity: 1; }
.hero-thumb:hover { border-color: var(--accent); }
.thumb-s {
  width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); overflow: hidden; cursor: pointer;
}
.thumb-s img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb-s:hover { border-color: var(--accent); }

/* sample-part links on the empty state + app footer (Phase 0 distribution) */
.samples { margin-top: 1.4rem; font-size: 0.85rem; color: var(--muted-foreground); }
.samples a { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; }
.app-footer {
  margin-top: 2rem; padding: 0.9rem 0 0.4rem; border-top: 1px solid var(--border);
  font-size: 0.72rem; line-height: 1.5; color: var(--muted-foreground);
}

/* multi-part order mode (M5 phase 2) */
.order-line {
  /* Two lines, because five controls do not fit across a narrow config rail: the part name
     needs ~210px to be readable and only had ~107. Since identifying a part is exactly what
     you do before opening its model, the filename gets a full-width line of its own and the
     controls sit underneath. */
  display: grid;
  grid-template-columns: 1fr auto 4rem 1.8rem;
  grid-template-areas:
    "name name name name"
    "pdf  view qty  del"
    "mat  mat  mat  mat";
  gap: 0.35rem 0.4rem; align-items: center;
  padding-bottom: 0.5rem; margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.order-line:last-child { border-bottom: none; }
.ol-file { grid-area: name; }
.ol-pdfsel { grid-area: pdf; }
.ol-view { grid-area: view; }
.ol-qty { grid-area: qty; }
.ol-del { grid-area: del; }
/* Material gets its own full-width line: an RFQ is routinely mixed, and alloy designations
   ("Aluminium 7075-T6") are too long to read in a shared column. */
.ol-mat { grid-area: mat; width: 100%; min-width: 0; }
/* view buttons sit between the drawing picker and the quantity: close to the files they
   open, and out of the way of the fields the shop actually edits */
.ol-view { display: flex; gap: 0.3rem; }
.ol-view .filebtn { padding: 0.3rem 0.4rem; white-space: nowrap; font-size: 0.72rem; }
.ol-view .filebtn:disabled {
  opacity: 0.4; cursor: default; border-color: var(--border); color: var(--muted-foreground);
}

.ol-file {
  border: 1px dashed var(--border-strong); background: var(--surface);
  border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.82rem; cursor: pointer;
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted-foreground);
}
.ol-file.set { border-style: solid; color: var(--foreground); }
.ol-pdfsel { width: 100%; height: 2.2rem; font-size: 0.8rem; padding: 0 0.4rem; }
.ol-qty { width: 100%; }
.ol-del {
  border: none; background: none; color: var(--muted-foreground);
  font-size: 0.95rem; cursor: pointer; padding: 0.3rem;
}
.ol-del:hover { color: var(--high); }
.order-summary { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.order-summary th, .order-summary td {
  padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left;
}
.order-summary .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.order-summary th.num { font-family: inherit; }
.order-summary .dim { color: var(--muted-foreground); font-size: 0.8rem; }
.order-summary tfoot td { border-top: 2px solid var(--foreground); border-bottom: none; }
.order-summary .ol-details { padding: 0.25rem 0.6rem; font-size: 0.78rem; }

/* Editable quantity on the order summary. Scoped to the table and qualified with the
   element, because the shared input[type="number"] rule (an attribute selector) outranks a
   bare class and would stretch it across the column. */
.order-summary input.oq-in {
  width: 5rem; min-width: 0; height: 2rem; padding: 0 0.4rem; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: inherit;
}
.order-summary input.oq-in:hover:not(:disabled) { border-color: var(--border); background: var(--card); }
.order-summary input.oq-in:focus { border-color: var(--foreground); background: var(--card); outline: none; }
.order-summary input.oq-in:disabled { opacity: 1; border-color: transparent; }

/* The approved-price field. Reads as a figure until touched, like the quantity beside it —
   but once a price is entered it must LOOK decided, because that is the number the customer
   will see. An empty field shows the model's price as a greyed placeholder, so the row says
   "this is what we'd charge unless you say otherwise". Scoped to the table for the same
   specificity reason as `.qty-in` above. */
.order-summary input.ap-in {
  width: 6rem; min-width: 0; height: 2rem; padding: 0 0.45rem; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: transparent; color: var(--muted-foreground);
}
.order-summary input.ap-in::placeholder { color: var(--muted-foreground); opacity: 0.55; }
.order-summary input.ap-in:hover:not(:disabled) { background: var(--card); }
.order-summary input.ap-in:focus {
  border-style: solid; border-color: var(--foreground); background: var(--card);
  color: var(--foreground); outline: none;
}
.order-summary input.ap-in.set {
  border-style: solid; border-color: var(--accent, var(--foreground));
  color: var(--foreground); font-weight: 600;
}
.order-summary input.ap-in:disabled { opacity: 0.5; border-color: transparent; }

/* Material on the summary. Wide enough for the longest designation in the catalogue
   ("Titanium Ti6Al4V", "Polycarbonate PC") — a truncated alloy is worse than a wider table,
   because "Stainless 3…" does not say whether the part is 304 or 316. The table already
   scrolls horizontally in its own container. */
.order-summary select.om-in {
  min-width: 9.5rem; height: 2rem; padding: 0 1.6rem 0 0.45rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background-color: transparent; color: inherit;
}
.order-summary select.om-in:hover:not(:disabled) { border-color: var(--border); background-color: var(--card); }
.order-summary select.om-in:focus { border-color: var(--foreground); background-color: var(--card); outline: none; }
.order-summary select.om-in:disabled { opacity: 1; border-color: transparent; }

/* The approve block sits between the table and the downloads: the decision comes before
   the document. */
.approve {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* editable quantity in the RFQ parts table — narrow, right-aligned, reads as a figure
   until you hover or focus it, so the table still scans as a quote rather than a form */
/* `.qty-in` alone loses to the shared `input[type="number"]` rule above (an attribute
   selector outranks a class), so these are scoped to the table to win on specificity. */
.order-summary input.qty-in {
  width: 5.5rem; min-width: 0; height: 2rem; padding: 0 0.45rem; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: inherit;
}
.order-summary input.qty-in:hover:not(:disabled) { border-color: var(--border); background: var(--card); }
.order-summary input.qty-in:focus { border-color: var(--foreground); background: var(--card); outline: none; }
.order-summary input.qty-in:disabled { opacity: 1; }
.qty-src { font-size: 0.72rem; color: var(--muted-foreground); font-family: var(--sans, inherit); }
/* The parts table has seven columns (a material picker among them) and cannot shrink to a
   phone. It scrolls inside its own box: a wide table must never make the PAGE scroll
   sideways, which it did once the Material column was added. */
.table-scroll { overflow-x: auto; }

/* "Your prices" — hand-set unit prices, one row per part */
.pr-head, .pr-row {
  display: grid; align-items: center; gap: 0.6rem;
  grid-template-columns: minmax(6rem, 1fr) 6rem 8rem 4rem minmax(7rem, auto);
}
.pr-head {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted-foreground); padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border); margin-bottom: 0.4rem;
}
.pr-head > span:nth-child(n+2), .pr-row > :nth-child(n+2) { text-align: right; }
.pr-row { padding: 0.22rem 0; }
/* part heading above its tier rows, on a multi-part volume request */
.pr-part { font-size: 0.82rem; font-weight: 600; margin: 0.6rem 0 0.1rem;
           overflow-wrap: anywhere; }
.pr-name { font-size: 0.86rem; overflow-wrap: anywhere; }
.pr-model, .pr-total { font-family: var(--mono); font-size: 0.82rem;
  font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.order-summary .pr-in, .pr-in {
  width: 100%; height: 2rem; padding: 0 0.45rem; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.pr-delta { font-family: var(--mono); font-size: 0.78rem; }
.pr-delta.up { color: var(--ok, #16a34a); }
.pr-delta.down { color: var(--high); }
@media (max-width: 640px) {
  .pr-head { display: none; }
  .pr-row { grid-template-columns: 1fr 6rem; row-gap: 0.15rem; }
  .pr-row .pr-model { display: none; }   /* the model price stays in the parts table */
}

/* per-finish costs and the volume ladder, under a part line */
.fin-list { display: grid; gap: 0.3rem; padding: 0.5rem 0 0.2rem; }
.fin-list > div { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.82rem; }
.fin-name { font-weight: 500; }
.fin-cost { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fin-note { color: var(--muted-foreground); font-size: 0.76rem; }
table.qb { border-collapse: collapse; margin: 0.4rem 0 0.2rem; font-size: 0.82rem; }
table.qb th, table.qb td { padding: 0.22rem 0.9rem 0.22rem 0; text-align: right; }
table.qb th { color: var(--muted-foreground); font-weight: 500; }
table.qb td { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* material picker per part line — same restrained treatment as the quantity field */
.order-summary select.mat-in {
  width: auto; max-width: 13rem; height: 2rem; padding: 0 1.4rem 0 0.4rem;
  font-size: 0.84rem; border: 1px solid transparent; border-radius: var(--radius);
  background-color: transparent;
}
.order-summary select.mat-in:hover:not(:disabled) { border-color: var(--border); background-color: var(--card); }
.order-summary select.mat-in:focus { border-color: var(--foreground); background-color: var(--card); outline: none; }
.order-summary select.mat-in:disabled { opacity: 1; }

/* finishing / coating checkboxes (M8) */
.finish-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.9rem; }
.finish-opt {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; padding: 0.18rem 0; cursor: pointer;
}
.finish-opt input { accent-color: var(--accent); }

.bd-row .val {
  font-family: var(--mono); font-size: 0.85rem; text-align: right; color: var(--foreground);
  font-variant-numeric: tabular-nums; position: relative;
}
.bd-row .val .pct { color: var(--muted-foreground); margin-left: 0.6rem; font-size: 0.78rem; }
/* expected-value ("how the average was derived") tooltip — anchored to the € figure */
.bd-row .val.has-mid { cursor: help; }
.bd-row .val.has-mid > *:not(.bd-explain-mid),
.bd-row .val.has-mid { text-decoration: none; }
.bd-row .val.has-mid:hover { text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; }
.bd-explain-mid {
  left: auto; right: 0; text-align: left; z-index: 31; white-space: normal;
  max-width: min(28rem, 86vw);
}
.bd-explain-mid::before { left: auto; right: 18px; }
.bd-row .val.has-mid:hover .bd-explain-mid,
.bd-row .val.has-mid:focus .bd-explain-mid,
.bd-row .val.has-mid:focus-within .bd-explain-mid { display: block; }
/* while the € figure is hovered, suppress the row-level range tooltip so only one shows */
.bd-row .val.has-mid:hover ~ .bd-explain,
.bd-row .val.has-mid:focus-within ~ .bd-explain { display: none !important; }
.bd-bar { height: 0.45rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.bd-bar > span {
  display: block; height: 100%; background: var(--foreground); border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* two-tier breakdown (M9): direct subtotal + indirect group heading */
.bd-subtotal {
  display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr minmax(9rem, 12rem);
  gap: 0.85rem; padding: 0.55rem 0; align-items: baseline;
  border-top: 1px solid var(--border-strong); font-weight: 600; font-size: 0.9rem;
}
.bd-subtotal .val { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.bd-subtotal .val .pct { color: var(--muted-foreground); margin-left: 0.6rem; font-size: 0.78rem; font-weight: 400; }
.bd-group {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-foreground); padding: 0.7rem 0 0.15rem;
}

.bd-total {
  display: grid; grid-template-columns: minmax(10rem, 14rem) 1fr minmax(9rem, 12rem);
  gap: 0.85rem; padding-top: 0.85rem; margin-top: 0.3rem;
  border-top: 2px solid var(--foreground); font-weight: 600; align-items: baseline;
}
.bd-total .val { font-family: var(--mono); text-align: right; font-size: 1.05rem; }
.bd-total-range {
  text-align: right; color: var(--accent); font-family: var(--mono);
  font-size: 0.78rem; margin-top: 0.3rem;
}

/* spec / kv table */
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: top; }
.kv tr:last-child td { border-bottom: none; }
.kv td.k { color: var(--muted-foreground); }
.kv td.v { text-align: right; font-family: var(--mono); font-size: 0.84rem; font-variant-numeric: tabular-nums; }

/* flags */
.flag {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.85rem 1rem; margin-bottom: 0.7rem; background: var(--card);
}
.flag.high { background: #fffbfb; }
.flag.warn { background: #fffdf7; }
.flag.info { background: #fbfdff; }
.flag .ftitle { font-weight: 600; font-size: 0.94rem; display: flex; align-items: center; gap: 0.55rem; }
.sev {
  font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.16rem 0.5rem; border-radius: 999px; font-weight: 700; flex: none;
}
.sev.high { background: #fef2f2; color: var(--high); }
.sev.warn { background: #fef6e7; color: var(--warn); }
.sev.info { background: #eff6ff; color: var(--info); }
.flag .fdetail { color: var(--body); font-size: 0.85rem; margin: 0.5rem 0; line-height: 1.55; }
.flag .fq {
  font-size: 0.85rem; font-weight: 500; color: var(--accent);
  border-top: 1px dashed var(--border); padding-top: 0.5rem;
}

ol.questions { margin: 0; padding-left: 1.4rem; }
ol.questions li { padding: 0.35rem 0; font-size: 0.9rem; line-height: 1.5; }
ol.questions li::marker { font-family: var(--mono); color: var(--muted-foreground); font-size: 0.8rem; }

.notes-list { list-style: none; padding: 0; margin: 0; }
.notes-list li { font-size: 0.85rem; color: var(--warn); padding: 0.3rem 0 0.3rem 1.2rem; position: relative; line-height: 1.5; }
.notes-list li::before { content: "›"; position: absolute; left: 0.25rem; color: var(--warn); }

/* Toasts carry their meaning in colour, so the colour has to mean one thing. Every message
   used to arrive in the same red as a blocking error — including "quantity set from the file
   name", which is the tool working correctly. A confirmation that looks identical to a
   failure trains the eye to ignore both, and then a real error does not register either.
   Same severity tokens as the DFM flags, so red means the same thing everywhere in the app. */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--foreground); color: #fff; padding: 0.8rem 1.3rem; border-radius: 10px;
  font-size: 0.9rem; box-shadow: var(--shadow-pop); display: none; z-index: 50; max-width: 80vw;
}
.toast.ok { background: var(--ok); }        /* it worked */
.toast.warn { background: var(--warn); }    /* it worked, but check this */
.toast.error { background: var(--high); }   /* it did not work; act */
.toast.info { background: var(--foreground); }

.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%; display: inline-block;
  animation: spin 0.7s linear infinite; vertical-align: -3px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }

/* ---------- charts (shared) ---------- */
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1200px) { .charts-row { grid-template-columns: 1fr; } }
.charts-row .card { margin-bottom: 0; }

.mc-svg { width: 100%; height: auto; display: block; touch-action: none; user-select: none; }
.mc-readout {
  font-size: 0.85rem; color: var(--muted-foreground); margin-bottom: 0.4rem; min-height: 1.5em;
  display: flex; align-items: baseline; gap: 0.6rem;
}
.mc-readout b {
  font-family: var(--mono); font-size: 1.25rem; color: var(--accent); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mc-controls { display: flex; align-items: center; gap: 1rem; margin-top: 0.7rem; flex-wrap: wrap; }
.mc-replay { width: auto; height: 2.2rem; padding: 0 0.95rem; font-size: 0.82rem; flex: none; border-radius: 8px; }
.mc-legend { color: var(--muted-foreground); font-size: 0.78rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.mc-legend .sw { width: 0.8rem; height: 0.8rem; border-radius: 4px; display: inline-block; flex: none; }
.mc-legend .sw.band { background: var(--accent-soft); border: 1px solid #dbe6ff; }
.mc-legend .sw.dot { background: var(--accent); border-radius: 50%; }

/* distribution */
.mc-bar { fill: var(--foreground); opacity: 0.24; transition: y 0.04s linear, height 0.04s linear; }
.mc-bar.in-band { opacity: 0.82; }
.mc-bar.filling { fill: var(--accent); opacity: 0.8; }
.mc-band { fill: var(--accent-soft); }
.mc-pline { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.65; }
.mc-plabel { fill: var(--muted-foreground); font-size: 10.5px; font-family: var(--mono); letter-spacing: 0.05em; }
.mc-axis { stroke: var(--border-strong); stroke-width: 1; }
.mc-tick { fill: var(--muted-foreground); font-size: 10px; font-family: var(--mono); }
.mc-cursor-line { stroke: var(--accent); stroke-width: 2; }
#mc-hit, #pb-hit { cursor: ew-resize; }

/* price curve */
.pb-band { fill: var(--accent-soft); }
.pb-line { fill: none; stroke: var(--foreground); stroke-width: 2; stroke-linejoin: round; }
.pb-dot { fill: var(--foreground); }
.pb-dot.current { fill: var(--accent); stroke: var(--background); stroke-width: 2; }
.pb-grid { stroke: var(--border); stroke-width: 1; }
.pb-tick, .pb-ytick { fill: var(--muted-foreground); font-size: 10px; font-family: var(--mono); }
.pb-axis-label { fill: var(--muted-foreground); font-size: 10px; }
.pb-cursor-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* ---------- preview buttons + viewer modal ---------- */
.preview-btn { margin-top: 0.7rem; height: 2.4rem; font-size: 0.88rem; }
.preview-btn[hidden] { display: none; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 10, 9, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(3px);
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  width: min(1040px, 94vw); height: min(760px, 88vh);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 0.95rem; font-family: var(--mono);
}
/* long filenames must never push the close button off-screen — truncate the title */
#viewer-title { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.modal-actions { display: flex; align-items: center; gap: 1rem; flex: none; }
.modal-hint { color: var(--muted-foreground); font-size: 0.78rem; font-family: inherit; font-weight: 400; }
.modal-close {
  border: none; background: var(--muted); color: var(--foreground);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.modal-close:hover { background: var(--border-strong); }
/* DFM "analysing…" spinner + a dark variant that reads on the light panel bar */
.spinner-dark {
  border-color: var(--border-strong); border-top-color: var(--accent);
  width: 13px; height: 13px; margin-right: 6px;
}
.vs-loading { cursor: default; }
.vs-loading .vs-count { color: var(--accent); background: var(--accent-soft); }
.modal-split { display: flex; flex: 1; min-height: 0; }
.modal-body { flex: 1; position: relative; background: var(--surface); min-height: 0; }

/* rich-viewer sidebar: geometry facts + DFM signals from the real feature recognizer.
   Collapsible — the 3D view is the star; the analysis expands on demand. */
.viewer-side {
  width: 310px; flex: none; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--card); min-height: 0;
}
.viewer-side[hidden] { display: none; }
.vs-toggle {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 0.82rem; font-weight: 600; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border); color: var(--foreground); flex: none;
}
.vs-count {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ok); background: #dcfce7; border-radius: 999px; padding: 0.15rem 0.5rem;
}
.viewer-side.has-warn .vs-count { color: #b45309; background: #fef3c7; }
.vs-chev { margin-left: auto; color: var(--muted-foreground); font-size: 0.7rem; }
.vs-content { overflow-y: auto; padding: 1rem; min-height: 0; }
.viewer-side.collapsed .vs-content { display: none; }
.viewer-side.collapsed { width: auto; }
.viewer-side.collapsed .vs-toggle { border-bottom: none; }
.vs-metrics { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.vs-metrics > div { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.8rem; }
.vs-metrics span { color: var(--muted-foreground); }
.vs-metrics b { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.vs-card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.65rem 0.8rem; margin-bottom: 0.6rem;
}
.vs-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.vs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #16a34a; }
.vs-card.warn .vs-dot { background: #d97706; }
.vs-body { margin-top: 0.4rem; font-size: 0.78rem; line-height: 1.55; color: var(--muted-foreground); }
.vs-body b { color: var(--foreground); font-family: var(--mono); font-weight: 500; }
.vs-body i { font-style: normal; color: var(--accent); font-size: 0.72rem; }
.vs-note { font-size: 0.7rem; color: var(--muted-foreground); margin-top: 0.8rem; }
.vs-clickable { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.vs-clickable:hover { border-color: var(--accent); }
.vs-head { justify-content: flex-start; }
.vs-show {
  margin-left: auto; font-size: 0.66rem; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.vs-card.active { border-color: #ff7a1a; background: color-mix(in srgb, #ff7a1a 8%, transparent); }
.vs-card.active .vs-show { color: #d9631a; }
.vs-card.active .vs-show::after { content: " ✓"; }

/* hole spec popup (click a highlighted hole) */
.viewer-spec {
  position: fixed; z-index: 1000; pointer-events: none;
  background: #1c1917; color: #fff; border-radius: 8px; padding: 0.5rem 0.7rem;
  font-size: 0.75rem; line-height: 1.6; box-shadow: var(--shadow-pop);
}
.viewer-spec[hidden] { display: none; }
.viewer-spec b { display: block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #ff9a4d; margin-bottom: 0.2rem; }

/* floating viewer toolbar */
.viewer-tools {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.4rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.35rem; box-shadow: var(--shadow-pop);
}
.viewer-tools[hidden] { display: none; }
.viewer-tools button {
  border: none; background: none; font-size: 0.78rem; padding: 0.35rem 0.7rem;
  border-radius: 7px; cursor: pointer; color: var(--muted-foreground);
}
.viewer-tools button:hover { background: var(--muted); color: var(--foreground); }
.viewer-tools button.active { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 860px) {
  /* phone: canvas first and dominant; DFM analysis is a bottom sheet */
  .modal-split { flex-direction: column; }
  .modal-body { order: 0; flex: 1; }
  .viewer-side {
    order: 1; width: auto; flex: none; max-height: 55%;
    border-right: none; border-top: 1px solid var(--border);
  }
  .viewer-side.collapsed { max-height: none; }
  .modal-hint { display: none; }          /* orbit instructions — touch users just drag */
  .viewer-tools button { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
  .modal-close { width: 42px; height: 42px; font-size: 18px; }   /* easy tap target to exit */
  .modal-head { padding: 0.7rem 0.9rem; }
}
#three-canvas { display: block; width: 100%; height: 100%; }
#three-canvas[hidden] { display: none; }
#pdf-frame { width: 100%; height: 100%; border: none; background: #fff; }
#pdf-frame[hidden] { display: none; }
.viewer-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted-foreground); font-size: 0.9rem; background: var(--surface);
}
.viewer-loading[hidden] { display: none; }
.viewer-loading .spinner { border-top-color: var(--foreground); border-color: var(--border-strong); }

/* ---------- sub-pages (RFQ Inbox, Calibration): shared components ----------
   Same design language as the estimator: identical radii, type scale, borders and
   the .card / .order-summary components — only compact controls are added here. */
.btn-sm {
  height: 2.35rem; padding: 0 1rem; border-radius: 10px; cursor: pointer;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border-strong);
  font-size: 0.88rem; font-weight: 500; font-family: inherit;
  transition: opacity 0.12s, background 0.12s, transform 0.08s;
}
.btn-sm:hover { background: var(--muted); }
.btn-sm:active { transform: scale(0.99); }
.btn-sm:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm.primary { background: var(--primary); color: var(--primary-foreground);
                  border-color: var(--primary); font-weight: 600; }
.btn-sm.primary:hover { background: var(--primary); opacity: 0.9; }
.btn-sm.accent { background: var(--accent); color: #fff; border-color: var(--accent);
                 font-weight: 600; }
.btn-sm.accent:hover { background: var(--accent); opacity: 0.9; }
.btn-sm.send { background: var(--ok); color: #fff; border-color: var(--ok);
               font-weight: 600; }
.btn-sm.send:hover { background: var(--ok); opacity: 0.9; }

.pill {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 0.2rem 0.6rem; white-space: nowrap;
}
.pill.ready  { background: #dcfce7; color: #15803d; }
.pill.review { background: #fef3c7; color: #b45309; }
.pill.info   { background: var(--accent-soft); color: var(--accent); }
.pill.sent   { background: var(--muted); color: var(--muted-foreground); }
.pill.error  { background: #fee2e2; color: #b91c1c; }

.alert {
  display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.88rem;
  border-left: 3px solid var(--warn); background: #fffbeb;
  border-radius: var(--radius-sm); padding: 0.5rem 0.75rem;
}
.alert.block { border-left-color: var(--accent); background: var(--accent-soft); }

.tile { border: 1px solid var(--border); border-radius: var(--radius-sm);
        padding: 0.9rem 1rem; background: var(--card); }
.tile .v { font-family: var(--mono); font-size: 1.45rem; font-weight: 700;
           font-variant-numeric: tabular-nums; }
.tile .k { font-size: 0.76rem; color: var(--muted-foreground); margin-top: 2px; }
.tile.good .v { color: var(--ok); } .tile.mid .v { color: var(--warn); }
.tile.bad .v { color: var(--high); }

/* part thumbnails + inline file buttons (RFQ review) */
.pthumb { width: 52px; height: 52px; border: 1px solid var(--border);
          border-radius: var(--radius-sm); background: var(--surface);
          cursor: pointer; overflow: hidden; flex: none; }
.pthumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.filebtn { border: 1px solid var(--border); background: var(--surface);
           border-radius: 6px; padding: 0.15rem 0.55rem; font-size: 0.76rem;
           font-weight: 600; cursor: pointer; color: var(--body); font-family: inherit; }
.filebtn:hover { border-color: var(--accent); color: var(--accent); }

/* per-unit cost breakdown */
.bk-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden;
          margin: 0.5rem 0 0.6rem; }
.bk-bar span { height: 100%; }
.bk-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             gap: 3px 14px; font-size: 0.8rem; }
.bk-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
                 margin-right: 6px; }
.bk-legend .v { font-family: var(--mono); float: right;
                font-variant-numeric: tabular-nums; }
details.bk > summary { cursor: pointer; font-size: 0.8rem; font-weight: 600;
                       color: var(--accent); list-style: none; margin-top: 0.3rem; }
details.bk > summary::before { content: "▸ "; }
details.bk[open] > summary::before { content: "▾ "; }

/* quote-time adjustment rows */
.adj-row { display: grid; grid-template-columns: 18px 190px 1fr 92px 34px;
           gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.adj-row label { font-size: 0.84rem; font-weight: 600; }
.adj-row .u { color: var(--muted-foreground); font-weight: 400; font-size: 0.76rem; }
.adj-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.adj-row input[type="number"] { height: 2rem; font-size: 0.84rem; padding: 0 0.5rem; }
.adj-row.off input[type="range"], .adj-row.off input[type="number"] {
  opacity: 0.35; pointer-events: none; }
.adj-note { font-size: 0.78rem; color: var(--muted-foreground); margin: 0.25rem 0 0.75rem; }

/* shop-numbers form (calibration) */
.num-field { margin-bottom: 0.75rem; }
.num-field label { display: block; font-size: 0.82rem; font-weight: 600;
                   margin-bottom: 3px; }
.num-field .unit { color: var(--muted-foreground); font-weight: 400; }
.num-field .hint { font-size: 0.74rem; color: var(--muted-foreground); margin-top: 2px; }

.row-line { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.nav-links a { font-size: 0.86rem; font-weight: 600; color: var(--accent);
               text-decoration: none; margin-left: 0.85rem; }
.err-pos { color: var(--high); } .err-neg { color: var(--accent); }
.err-ok { color: var(--ok); }

/* ============================ mobile ============================ */
/* Phones: collapse the header chrome, stack every multi-column layout, let wide
   tables scroll inside their card instead of blowing out the page width. */
@media (max-width: 640px) {
  header { padding: 0.55rem 0.9rem; flex-wrap: wrap; gap: 0.3rem 0.7rem; }
  .brand { gap: 0.5rem; }
  .brand h1 { font-size: 0.9rem; letter-spacing: 0.1em; }
  .brand .sub { display: none; }          /* decorative tagline — drop on phones */
  .badge { display: none; }               /* "runs locally" chip — drop on phones */
  header a { font-size: 0.82rem !important; margin-left: 0 !important; }
  header > div:last-child { gap: 0.9rem !important; flex-wrap: wrap; }
  .nav-links { margin-left: 0 !important; }
  .nav-links a { margin-left: 0 !important; }

  .layout { padding: 0.9rem 0.9rem 3rem; gap: 1rem; }
  .config { position: static; top: auto; }
  .card { padding: 1rem; }
  h1 { font-size: 1.4rem; }

  .finish-list { grid-template-columns: 1fr 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr !important; }
  .hero .total, .total { font-size: 2rem; }

  /* form controls comfortable to tap */
  select, input[type="number"], input[type="text"],
  input[type="password"], input[type="email"] { height: 2.7rem; font-size: 16px; }

  /* wide data tables: keep them on one row set, scroll horizontally in place */
  .order-summary { min-width: 560px; }
  .empty { padding: 2.5rem 1rem; }

  /* the 3D / PDF viewer modal fills the screen on a phone (panel layout is handled
     by the viewer's own ≤860px rules) */
  .modal-overlay { padding: 0; }
  .modal { width: 100vw; max-width: 100vw; height: 100dvh; border-radius: 0; border: none; }
}

@media (max-width: 380px) {
  .tiles { grid-template-columns: 1fr !important; }
  .finish-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .order-line { grid-template-columns: 1fr 1fr 3.4rem 1.8rem; gap: 0.4rem; }
  .ol-pdfsel { font-size: 0.74rem; }
  .charts-row { grid-template-columns: 1fr; }
}

/* --- cost breakdown on touch/phones: tap-to-expand, one row at a time --- */
/* Desktop keeps hover tooltips. On touch, the expected-€ derivation is dropped
   (desktop-only detail) and the calculation trace expands INLINE under its row —
   readable, scrolls with the page, never covers the table. */
@media (hover: none), (max-width: 640px) {
  .bd-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "lbl val" "bar bar" "exp exp";
    row-gap: 0.35rem;
  }
  .bd-row .lbl { grid-area: lbl; }
  .bd-row .bd-bar { grid-area: bar; }
  .bd-row .val { grid-area: val; }
  .bd-subtotal, .bd-total { grid-template-columns: 1fr auto; }
  .bd-subtotal > span:nth-child(2), .bd-total > span:nth-child(2) { display: none; }

  /* the mid element carries BOTH classes (bd-explain bd-explain-mid) — every rule
     below excludes it explicitly so the .open reveal can never resurrect it */
  .bd-row .bd-explain-mid { display: none !important; }
  .bd-row .val.has-mid { cursor: default; }
  .bd-row .val.has-mid:hover { text-decoration: none; }

  .bd-explain:not(.bd-explain-mid) {
    grid-area: exp; position: static; width: auto; max-width: none;
    pointer-events: auto; margin: 0.15rem 0 0.4rem;
  }
  .bd-explain::before { display: none; }
  .bd-row.has-explain:hover .bd-explain:not(.bd-explain-mid),
  .bd-row.has-explain:focus .bd-explain:not(.bd-explain-mid),
  .bd-row.has-explain:focus-within .bd-explain:not(.bd-explain-mid) { display: none; }
  .bd-row.open .bd-explain:not(.bd-explain-mid) { display: block !important; }
  .bd-row .info { color: var(--accent); }   /* the ⓘ reads as tappable */
}

/* ---- restored / saved estimate banner ---------------------------------------------- */
/* Shown when a result was recovered after navigating away, or opened from history — the
   numbers are real but the part file is not loaded, so say so plainly. */
.restored-banner {
  display: flex; align-items: center; gap: 0.8rem;
  flex-wrap: wrap; margin-bottom: 14px; padding: 0.6rem 0.85rem;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted-foreground); font-size: 0.82rem;
}
/* the way back sits first and keeps its own width; the label takes what is left */
.restored-banner > span { flex: 1 1 12rem; min-width: 0; }
.restored-banner .btn-sm { flex: none; }

/* ---- estimate history -------------------------------------------------------------- */
.hist-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 12px; }
.hist-head h2 { margin: 0; flex: none; }
.hist-head input[type="search"] {
  flex: 1; min-width: 12rem; height: 2.2rem; padding: 0 0.7rem; font-size: 0.86rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--background); color: var(--body);
}
#hist-body { overflow-x: auto; }                /* never widen the page on a phone */
.hist-table { min-width: 34rem; }
.hist-part { max-width: 20rem; min-width: 0; }
.hist-title { display: block; font-weight: 600; font-size: 0.86rem; }
.hist-sub {
  display: block; font-family: var(--mono); font-size: 0.74rem;
  color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-when { font-family: var(--mono); font-size: 0.78rem; color: var(--muted-foreground); }

/* One card for a single part, a fanned stack for a multi-part order. The SHAPE of the row
   says whether this was an order before you read a word of it — which is the thing the
   history was missing when an eleven-part order looked like eleven unrelated estimates. */
.hist-card, .hist-stack {
  position: relative; display: inline-block; width: 22px; height: 28px;
}
.hist-card, .hist-stack > i {
  border: 1px solid var(--border-strong); border-radius: 3px; background: var(--card);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.hist-stack > i { position: absolute; inset: 0; }
.hist-stack > i:nth-child(1) { transform: translate(4px, -3px) rotate(7deg); opacity: 0.45; }
.hist-stack > i:nth-child(2) { transform: translate(2px, -1.5px) rotate(3.5deg); opacity: 0.7; }
.hist-stack > i:nth-child(3) { transform: none; }
.hist-stack > b {
  position: absolute; right: -7px; bottom: -6px; z-index: 2;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--foreground); color: var(--background);
  font-size: 0.62rem; font-weight: 700; line-height: 15px; text-align: center;
}
@media (max-width: 640px) {
  .hist-head h2 { width: 100%; }
  .hist-part { max-width: 11rem; }
}

/* ================================================================= shared navigation ==
   One nav for every page (nav.js). Precision-Instrument language: stone surfaces, a single
   cobalt accent, mono figures. The trigger's three rules are deliberately unequal — a
   measuring-scale mark rather than a generic hamburger — and collapse into a cross when
   open. Items carry 01–05 numerals so the menu reads like the numbered workflow in the
   config rail. */
.nav { position: relative; display: flex; align-items: center; }

.nav-trigger {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.42rem 0.7rem;
  cursor: pointer; color: var(--foreground); font: inherit; font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
  min-height: 38px;
}
.nav-trigger:hover { border-color: var(--border-strong); background: var(--muted); }
.nav-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.nav.open .nav-trigger { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* the mark: three unequal rules → cross */
.nav-bars { position: relative; width: 15px; height: 11px; flex: none; }
.nav-bars i {
  position: absolute; left: 0; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.22s cubic-bezier(.4,.1,.2,1), opacity 0.14s, width 0.22s;
}
.nav-bars i:nth-child(1) { top: 0;    width: 15px; }
.nav-bars i:nth-child(2) { top: 4.7px; width: 10px; }   /* short middle = scale tick */
.nav-bars i:nth-child(3) { top: 9.4px; width: 13px; }
.nav.open .nav-bars i:nth-child(1) { transform: translateY(4.7px) rotate(45deg); width: 15px; }
.nav.open .nav-bars i:nth-child(2) { opacity: 0; width: 0; }
.nav.open .nav-bars i:nth-child(3) { transform: translateY(-4.7px) rotate(-45deg); width: 15px; }

.nav-panel {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 40;
  width: 19.5rem; max-width: calc(100vw - 24px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: 0.5rem; overflow: hidden;
}
.nav-panel[hidden] { display: none; }
.nav.open .nav-panel { animation: navIn 0.16s cubic-bezier(.2,.8,.2,1) both; }
@keyframes navIn { from { opacity: 0; transform: translateY(-5px) scale(0.985); } }

.nav-items { display: flex; flex-direction: column; }
.nav-item {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.6rem 0.65rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--foreground);
  border-left: 2px solid transparent; min-height: 44px;   /* comfortable tap target */
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
/* staggered reveal — one orchestrated moment rather than scattered fidgets */
.nav.open .nav-item { animation: navItem 0.22s ease both; }
.nav.open .nav-item:nth-child(1) { animation-delay: 0.01s; }
.nav.open .nav-item:nth-child(2) { animation-delay: 0.04s; }
.nav.open .nav-item:nth-child(3) { animation-delay: 0.07s; }
.nav.open .nav-item:nth-child(4) { animation-delay: 0.10s; }
.nav.open .nav-item:nth-child(5) { animation-delay: 0.13s; }
@keyframes navItem { from { opacity: 0; transform: translateX(-5px); } }

.nav-item:hover { background: var(--muted); transform: translateX(2px); }
.nav-item:focus-visible { outline: none; background: var(--muted); border-left-color: var(--accent); }
.nav-item.here { border-left-color: var(--accent); background: var(--accent-soft); }
.nav-item.here .nav-label { color: var(--accent); }
.nav-n {
  font-family: var(--mono); font-size: 0.68rem; color: var(--muted-foreground);
  font-variant-numeric: tabular-nums; flex: none; padding-top: 0.1rem;
}
.nav-item.here .nav-n { color: var(--accent); }
.nav-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-label { font-size: 0.92rem; font-weight: 550; letter-spacing: -0.01em; }
.nav-hint { font-size: 0.74rem; color: var(--muted-foreground); }

.nav-foot {
  margin-top: 0.4rem; padding: 0.6rem 0.65rem 0.3rem;
  border-top: 1px solid var(--border); font-size: 0.78rem;
}
.nav-acc-line { display: flex; flex-direction: column; gap: 1px; }
.nav-who { font-family: var(--mono); font-size: 0.8rem; color: var(--foreground); }
.nav-ws { color: var(--muted-foreground); font-size: 0.73rem; }
.nav-signout, .nav-signin {
  margin-top: 0.5rem; display: inline-block; background: none; border: none; padding: 0;
  color: var(--muted-foreground); font: inherit; font-size: 0.78rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.nav-signout:hover, .nav-signin:hover { color: var(--high); }
/* impersonation is a borrowed seat — it should never be ambiguous */
.nav-acting {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin: -0.2rem 0 0.55rem; padding: 0.45rem 0.55rem; border-radius: var(--radius-sm);
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; font-size: 0.76rem;
}
.nav-acting button {
  background: none; border: 1px solid currentColor; border-radius: 6px;
  color: inherit; font: inherit; font-size: 0.72rem; padding: 0.1rem 0.4rem; cursor: pointer;
}

@media (max-width: 640px) {
  .nav-trigger-label { display: none; }          /* the mark alone is enough on a phone */
  .nav-trigger { padding: 0.42rem 0.55rem; min-width: 42px; justify-content: center; }
  .nav-panel { width: min(21rem, calc(100vw - 20px)); }
}
@media (prefers-reduced-motion: reduce) {
  .nav.open .nav-panel, .nav.open .nav-item { animation: none; }
  .nav-item:hover { transform: none; }
}

/* header right cluster: reassurance badge + the nav trigger */
.header-right { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  /* the badge is reassurance copy, the nav is the function — drop the copy first */
  .header-right .badge { display: none; }
}

/* ---- teach the model from the estimate --------------------------------------------- */
/* Sits under the hero because that is where the shop owner is looking when they realise
   the number is wrong. Understated until used — it must not compete with the price. */
.teach {
  margin-top: 1.05rem; padding-top: 0.95rem; border-top: 1px dashed var(--border);
}
.teach-ask { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.teach-q { font-size: 0.86rem; font-weight: 550; }
.teach-in {
  display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.1rem 0.6rem 0.1rem 0.55rem; background: var(--background);
}
.teach-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.teach-cur { font-family: var(--mono); color: var(--muted-foreground); font-size: 0.9rem; }
.teach-in input {
  width: 6.2rem; height: 2.1rem; border: none; background: none; padding: 0;
  font-family: var(--mono); font-size: 0.95rem; color: var(--foreground); outline: none;
}
.teach-unit { font-size: 0.76rem; color: var(--muted-foreground); }
.teach-hint { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.45rem; }

.teach-result {
  margin-top: 0.8rem; padding: 0.75rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.83rem; background: var(--surface); border: 1px solid var(--border);
}
.teach-result.ok { background: #f4fbf6; border-color: #bbf7d0; color: #14532d; }
.teach-result.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.teach-result.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.tr-head { font-weight: 550; }
.tr-moves { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.tr-moves li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  font-size: 0.81rem; padding-bottom: 0.28rem; border-bottom: 1px dotted rgba(0,0,0,0.1);
}
.tr-arrow { font-family: var(--mono); font-size: 0.79rem; }
.tr-note { margin-top: 0.5rem; font-size: 0.81rem; }
.teach-result .btn-sm { margin-top: 0.65rem; }
@media (max-width: 560px) {
  .teach-ask { align-items: stretch; }
  .teach-in { justify-content: space-between; }
  .teach-ask .btn-sm { width: 100%; }
  .tr-moves li { flex-direction: column; gap: 0.1rem; }
}
.tr-quiet { color: inherit; opacity: 0.75; font-size: 0.78rem; }

/* ---- first-run shop setup ----------------------------------------------------------- */
.setup-overlay { display: flex; align-items: center; justify-content: center; padding: 20px; }
.setup-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 1.6rem 1.5rem 1.2rem;
  width: min(34rem, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  animation: setupIn 0.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes setupIn { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
.setup-card h2 { margin: 0 0 0.3rem; font-size: 1.15rem; letter-spacing: -0.015em; }
.setup-lede { margin: 0 0 1.1rem; color: var(--muted-foreground); font-size: 0.86rem; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.setup-field { display: flex; flex-direction: column; gap: 0.28rem; }
.sf-label { font-size: 0.84rem; font-weight: 550; }
.sf-unit { font-family: var(--mono); font-size: 0.74rem; color: var(--muted-foreground); }
.setup-field input {
  height: 2.5rem; padding: 0 0.7rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--background); color: var(--foreground);
  font-family: var(--mono); font-size: 0.95rem; outline: none;
}
.setup-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sf-why { font-size: 0.73rem; color: var(--muted-foreground); line-height: 1.4; }
.setup-actions {
  display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem;
}
.setup-foot {
  margin: 0.85rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--muted-foreground);
}
@media (max-width: 560px) {
  .setup-grid { grid-template-columns: 1fr; }
  .setup-actions { flex-direction: column-reverse; }
  .setup-actions .btn-sm { width: 100%; }
}

/* setup card: machine rows */
.setup-h3 {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-foreground); font-weight: 600; margin: 1.15rem 0 0.15rem;
}
.setup-sub { margin: 0 0 0.65rem; font-size: 0.78rem; color: var(--muted-foreground); }
.setup-machines { display: grid; gap: 0.45rem; }
.sm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.sm-label { font-size: 0.86rem; font-weight: 500; }
.sm-input {
  display: inline-flex; align-items: center; gap: 0.3rem; background: var(--background);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.1rem 0.5rem; flex: none;
}
.sm-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sm-cur, .sm-unit {
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted-foreground);
}
.sm-input input {
  width: 4.6rem; height: 2rem; border: none; background: none; padding: 0; outline: none;
  font-family: var(--mono); font-size: 0.92rem; color: var(--foreground); text-align: right;
}
@media (max-width: 560px) {
  .sm-row { flex-direction: row; }
  .sm-input input { width: 4rem; }
}
.tr-warn {
  margin-top: 0.55rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm);
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.79rem;
}

/* profile: "what your shop does" list, and the yours/reference distinction */
.cap-list { display: grid; gap: 0.5rem; }
.cap-row {
  display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.cap-row:hover { border-color: var(--border-strong); background: var(--surface); }
.cap-row input { margin-top: 0.2rem; flex: none; }
.cap-row span { display: flex; flex-direction: column; gap: 1px; }
.cap-row b { font-size: 0.9rem; font-weight: 550; }
.cap-row em { font-style: normal; font-size: 0.78rem; color: var(--muted-foreground); }
.cap-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* a number the shop actually set, vs one still on the model's reference */
.pin-yours {
  font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.pin-row.set .pin-value { border-color: var(--accent); }
/* a segmented control with a single option isn't a choice — show it as a quiet label */
.segmented.single { background: none; padding: 0; }
.segmented.single button { flex: none; cursor: default; background: none; color: var(--muted-foreground);
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0; }
.segmented.single button.active { background: none; color: var(--foreground); }
/* a row the shop has actually priced — quiet, but distinguishable from the reference */
.svc-row.mine .svc-lo, .svc-row.mine .svc-hi { border-color: var(--accent); }