/* Lambretta 150 Special reference viewer.
   Colours live here as custom properties. viewer.js reads --g1..--g8, --g-other,
   --tint-*, --select, --match, --stage-bg, --edge, --grid-* for the 3D scene. */

:root {
  color-scheme: light dark;

  --bg: #f3f1ec;
  --panel: #fbfaf7;
  --panel-2: #efece5;
  --ink: #1e1c19;
  --ink-2: #5b564d;
  --line: #d8d3c8;
  --accent: #0a6a86;
  --accent-ink: #ffffff;
  --focus: #0a6a86;
  --warn: #9a5b00;

  /* 3D stage */
  --stage-bg: #e6e3dc;
  --grid-main: #aaa498;
  --grid-line: #cdc8bc;
  --edge: #1e1c19;

  /* Group colours: one hue per group, readable on light and dark stage */
  --g1: #c4453a; /* engine */
  --g2: #d98a2b; /* clutch, gearbox */
  --g3: #b2ae2c; /* fuel, exhaust */
  --g4: #3f9a5b; /* frame, wheels, brakes */
  --g5: #2a9aa8; /* steering, fork */
  --g6: #3f6fd0; /* lights, electrics */
  --g7: #8a5fc9; /* body panels */
  --g8: #c25aa0; /* controls, cables */
  --g-other: #8c877d;

  /* Not-exact tints, used when "Tint" is on */
  --tint-placeholder: #f01f8c;
  --tint-guessing: #ffbf00;
  --tint-muted: #a29d93;

  --select: #12d3ff;
  --match: #ffd92e;

  /* Confidence badges */
  --c-certain: #1f7a3f;
  --c-likely: #1f5fae;
  --c-guessing: #9a5b00;
  --c-placeholder: #b0106a;

  --left-w: 330px;
  --detail-w: 380px;
  --radius: 8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark: explicit choice wins, otherwise follow the OS. color-scheme follows too, so native
   checkboxes, sliders and scrollbars match the page rather than the OS. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121418;
  --panel: #1a1d22;
  --panel-2: #22262c;
  --ink: #ebe8e1;
  --ink-2: #a39f95;
  --line: #2f343b;
  --accent: #5cc8e6;
  --accent-ink: #06222b;
  --focus: #5cc8e6;
  --warn: #f0b24a;
  --stage-bg: #14171b;
  --grid-main: #3b414a;
  --grid-line: #272b32;
  --edge: #ffffff;
  --g1: #e0645a;
  --g2: #ee9f45;
  --g3: #cfcb48;
  --g4: #5bbd78;
  --g5: #46b8c6;
  --g6: #6a93e8;
  --g7: #a98be0;
  --g8: #dd7cbc;
  --g-other: #8f8a80;
  --tint-muted: #5d6169;
  --c-certain: #62c586;
  --c-likely: #7aaaf0;
  --c-guessing: #f0b24a;
  --c-placeholder: #ff6fb8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121418;
    --panel: #1a1d22;
    --panel-2: #22262c;
    --ink: #ebe8e1;
    --ink-2: #a39f95;
    --line: #2f343b;
    --accent: #5cc8e6;
    --accent-ink: #06222b;
    --focus: #5cc8e6;
    --warn: #f0b24a;
    --stage-bg: #14171b;
    --grid-main: #3b414a;
    --grid-line: #272b32;
    --edge: #ffffff;
    --g1: #e0645a;
    --g2: #ee9f45;
    --g3: #cfcb48;
    --g4: #5bbd78;
    --g5: #46b8c6;
    --g6: #6a93e8;
    --g7: #a98be0;
    --g8: #dd7cbc;
    --g-other: #8f8a80;
    --tint-muted: #5d6169;
    --c-certain: #62c586;
    --c-likely: #7aaaf0;
    --c-guessing: #f0b24a;
    --c-placeholder: #ff6fb8;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.mono { font-family: var(--mono); font-size: 0.93em; }
.dim { color: var(--ink-2); }

a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

button, input { font: inherit; color: inherit; }
button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
button:hover { border-color: var(--ink-2); }
button:disabled { opacity: 0.5; cursor: default; }

/* ---------- layout ---------- */
#app {
  display: grid;
  grid-template-columns: var(--left-w) minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
}

#left {
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

#viewport {
  position: relative;
  min-height: 0;
  background: var(--stage-bg);
  overflow: hidden;
}
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#status {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 24px; text-align: center;
  pointer-events: none;
  color: var(--ink-2);
}
#status[data-kind="error"] { pointer-events: auto; color: var(--ink); }
#status .big { font-size: 16px; font-weight: 600; color: var(--ink); }
#status .msg { max-width: 56ch; }
#status code { font-family: var(--mono); background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }

#bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--line);
}
#bar label { font-weight: 600; }
#explode { flex: 1 1 160px; min-width: 120px; accent-color: var(--accent); height: 28px; }
#explodeOut { min-width: 3.5ch; text-align: right; font-variant-numeric: tabular-nums; }
#shown { color: var(--ink-2); font-size: 12px; }

#detail {
  width: var(--detail-w);
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 14px 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
#detail > *, #left > * { flex: none; }   /* a capped, scrolling panel must scroll, not squash its sections */

.menu-btn {
  display: none;
  position: absolute; top: 10px; left: 10px; z-index: 5;
  background: var(--panel); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}
#scrim { display: none; }

/* ---------- left panel ---------- */
.brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.brand h1 { font-size: 17px; line-height: 1.2; }
.brand p { color: var(--ink-2); font-size: 12px; margin-top: 3px; }
.brand .tagline { color: var(--ink); font-weight: 600; margin-top: 1px; }

#left h2, #detail h3 {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 700; margin-bottom: 7px;
}
.row-head { display: flex; align-items: center; justify-content: space-between; }
.row-head h2 { margin-bottom: 7px; }
.mini button { padding: 1px 8px; font-size: 12px; }

.search label { display: block; font-weight: 600; margin-bottom: 5px; }
.search-box { position: relative; }
#q {
  width: 100%; padding: 8px 32px 8px 10px; font-size: 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
#q::-webkit-search-cancel-button { display: none; }
#qClear {
  position: absolute; right: 3px; top: 3px; bottom: 3px; width: 30px; padding: 0;
  border: 0; background: transparent; color: var(--ink-2); font-size: 18px; line-height: 1;
}
#qStatus { font-size: 12px; color: var(--ink-2); margin-top: 5px; min-height: 1.2em; }
#results { margin-top: 4px; max-height: 260px; overflow-y: auto; border-radius: 6px; }
#results li + li { border-top: 1px solid var(--line); }
#results button {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 0;
  background: transparent; padding: 6px 4px;
}
#results button:hover, #results button:focus-visible { background: var(--panel-2); }
#results .r-name { display: flex; gap: 6px; align-items: baseline; }
#results .r-name b { font-weight: 600; }
#results .r-sub { font-size: 12px; color: var(--ink-2); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }

#groups li label {
  display: flex; align-items: center; gap: 8px; padding: 5px 2px; cursor: pointer; min-height: 30px;
}
#groups input, .opt input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin: 0; }
#groups .g-key { font-family: var(--mono); font-size: 12px; color: var(--ink-2); width: 2.2em; flex: none; }
#groups .g-name { flex: 1; }
#groups .g-n { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 12px; }

.opt { display: flex; align-items: flex-start; gap: 8px; padding: 4px 2px; cursor: pointer; }
.opt span { flex: 1; }
.opt small { display: block; color: var(--ink-2); font-size: 12px; }

#tintLegend { display: grid; gap: 4px; margin: 4px 0 2px 26px; font-size: 12px; }
#tintLegend div { display: flex; align-items: center; gap: 7px; }

#counts { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
#counts dt { color: var(--ink-2); }
#counts dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
#counts .sep { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 3px 0; }
#checks { margin-top: 8px; display: grid; gap: 5px; font-size: 12px; }
#checks li { padding-left: 14px; position: relative; color: var(--ink-2); }
#checks li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--c-certain); }
#checks li.warn { color: var(--ink); }
#checks li.warn::before { background: var(--warn); }

.help { font-size: 12px; color: var(--ink-2); margin-top: auto; }
.help kbd { font-family: var(--mono); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; background: var(--panel-2); }

/* ---------- detail panel ---------- */
.d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.d-kicker { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 12px; margin-bottom: 3px; }
#dNameEn { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
#dNameIt { color: var(--ink-2); font-style: italic; margin-top: 1px; overflow-wrap: anywhere; }
#dClose { width: 34px; height: 34px; padding: 0; font-size: 20px; line-height: 1; flex: none; }

.d-preview { position: relative; background: var(--stage-bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
#pv { display: block; width: 100%; height: 190px; cursor: grab; touch-action: none; }
#pv:active { cursor: grabbing; }
#pvNote { position: absolute; left: 8px; bottom: 6px; right: 8px; font-size: 11px; color: var(--ink-2); pointer-events: none; }

.d-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; align-items: baseline; }
.d-grid dt { color: var(--ink-2); }
.d-grid dd { overflow-wrap: anywhere; }
#dNo { font-size: 16px; font-weight: 600; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px 1px 7px; border-radius: 999px; font-weight: 600; font-size: 12.5px;
  border: 1px solid currentColor; background: transparent;
}
.badge[data-level="Certain"] { color: var(--c-certain); }
.badge[data-level="Likely"] { color: var(--c-likely); }
.badge[data-level="Guessing"] { color: var(--c-guessing); }
.badge[data-level="Placeholder"] { color: var(--c-placeholder); }
.badge[data-level="Unknown"] { color: var(--ink-2); }
.badge .glyph { font-size: 11px; }

#dSources { display: grid; gap: 5px; }
#dSources li { padding-left: 12px; position: relative; overflow-wrap: anywhere; font-size: 13px; }
#dSources li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
#dNotes { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
#dWarn { display: grid; gap: 4px; font-size: 12.5px; color: var(--warn); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--accent); color: var(--accent-ink); text-decoration: none;
  padding: 10px 14px; border-radius: 6px; font-weight: 650; border: 0;
}
.btn:hover { filter: brightness(1.08); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn-row { display: grid; gap: 6px; }
.fine { font-size: 11.5px; color: var(--ink-2); }

/* ---------- narrower than a laptop: the left panel becomes a drawer ---------- */
@media (max-width: 1100px) {
  #app { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-btn { display: inline-flex; }
  #left {
    position: fixed; z-index: 30; top: 0; bottom: 0; left: 0;
    width: min(90vw, 360px);
    transform: translateX(-104%);
    transition: transform 0.18s ease-out;
    box-shadow: 4px 0 24px rgb(0 0 0 / 0.35);
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  #left.open { transform: none; }
  #scrim.open { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.4); }
  #detail { --detail-w: 340px; }
}

/* ---------- phone: the detail panel becomes a sheet under the view ---------- */
@media (max-width: 860px) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  #stage { grid-row: 1; }
  #detail {
    grid-row: 2; width: auto; max-height: 56vh; max-height: 56dvh;
    border-left: 0; border-top: 1px solid var(--line);
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  #pv { height: 150px; }
  #bar { gap: 8px; }
}
@media (pointer: coarse) {
  button { min-height: 40px; }
  .mini button { min-height: 32px; }
  #groups li label { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  #left { transition: none; }
}

/* Teardown controls share the existing responsive parts drawer. */
#teardown { padding: 14px 0; border-bottom: 1px solid var(--edge, #d6d0c7); }
.td-modes { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.td-modes button { font:inherit; font-size:12px; padding:7px 10px; }
.td-modes button[aria-pressed="true"] { background:#246673; color:white; border-color:#246673; }
#tdCaption { font-size:13px; line-height:1.45; margin:10px 0; min-height:3em; }
.td-note,.td-credit { font-size:11px; line-height:1.4; opacity:.8; }
#tdTour { white-space:nowrap; }

/* One 300px ad placement, contained in the scrolling sidebar. */
.ad-placement { width: 300px; max-width: calc(100vw - 20px); align-self: center; }
.ad-label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
#ad-slot { width: 100%; height: var(--ad-height, 350px); background: var(--panel-2); outline: 1px solid var(--line); overflow: hidden; }
#ad-slot > :is(img, iframe, video) { display: block; width: 100%; max-width: 100%; height: 100%; border: 0; }
@media (max-width: 365px) { #left { width: min(100vw, 330px); } }
/* Workshop: compact tool drawers keep the model in view. */
#workshop details{border-top:1px solid var(--line,#45494b);padding:12px 0}
#workshop summary{cursor:pointer;font-weight:650;list-style-position:outside;margin-left:15px}
#workshop details[open] summary{margin-bottom:14px}
.edition{font:10px monospace;letter-spacing:.14em;border:1px solid currentColor;padding:3px 6px;color:#6cb9c3}
.field{display:grid;grid-template-columns:1fr;gap:6px;margin:12px 0}
#workshop select,#partWorkshop select,#partWorkshop textarea,.fit-grid input{width:100%;min-width:0;background:var(--bg,#171a1d);color:inherit;border:1px solid var(--line,#45494b);border-radius:5px;padding:9px;font:inherit}
#paintColor{width:100%;height:38px;padding:2px;background:transparent;border:1px solid #666;border-radius:5px}
#workshop .btn-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
#workshop .fine,#partWorkshop p{font-size:12px;line-height:1.5;opacity:.8}
#partWorkshop{border-top:1px solid #666;padding-top:16px;overflow-wrap:anywhere}
#partWorkshop h3{margin:20px 0 9px}#partWorkshop textarea{height:110px;resize:vertical;margin:10px 0}
#partWorkshop>a{display:block;margin:12px 0}#partWorkshop button{margin:8px 6px 0 0}
.review-status{padding:10px;border-left:3px solid #ed9e42;background:#ed9e4212}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.fit-grid label{font-size:12px}
.workshop-image{display:block;width:100%;border-radius:5px;margin:12px 0}
#buildStatus{overflow-wrap:anywhere}#fitFile{max-width:100%;font-size:12px}

#mechanism select{width:100%;padding:8px;background:var(--bg);color:inherit;border:1px solid #777;border-radius:5px}#mechanism .fine{font-size:12px;line-height:1.5;opacity:.8}#motionOverlay{position:absolute;top:16px;left:50%;transform:translateX(-50%);max-width:75%;padding:8px 12px;background:var(--panel,#f4f1eb);color:var(--fg,#222);border:1px solid #888;border-radius:6px;font-size:12px;pointer-events:none;text-align:center}
/* A single sample-ad placement on the right; part details take its place. */
#app{grid-template-columns:var(--left-w) minmax(0,1fr) 321px}
#adRail{grid-column:3;grid-row:1;background:var(--panel);border-left:1px solid var(--line);padding:18px 10px;overflow-y:auto;min-width:0}
#adRail .ad-placement{width:300px;max-width:100%;margin:0 auto}
#detail{grid-column:3;grid-row:1;--detail-w:321px}
#app:has(#detail:not([hidden])) #adRail{display:none}
#ad-slot{height:350px;box-sizing:border-box;padding:22px;display:flex;flex-direction:column;position:relative;background:#f0dfb9;color:#382b24;outline:none;border:1px solid #382b2426;isolation:isolate}
.sample-brand{font:700 10px monospace;letter-spacing:.17em}
#adHeadline{font:bold 32px/1.02 Georgia,serif;letter-spacing:-.03em;margin:17px 0 8px;white-space:pre-line;text-transform:none;color:inherit}
#adCopy{font-size:12px;max-width:200px;line-height:1.4;margin-top:auto}
.sample-cta{display:block;font-weight:700;font-size:12px;margin-top:12px;padding-top:10px;border-top:1px solid currentColor}
#ad-slot small{font-size:9px;margin-top:10px;opacity:.7}
.ad-art{position:relative;height:105px;margin:4px 0 0}.ad-wheel{position:absolute;left:85px;top:0;width:86px;height:86px;border:17px solid #bb442f;border-radius:50%;box-shadow:inset 0 0 0 5px #382b24;transform:rotate(-20deg)}.ad-wheel:after{content:'';position:absolute;inset:18px;background:#382b24;border-radius:50%}.ad-wheel.small{width:58px;height:58px;left:20px;top:35px;border-width:11px}.ad-wheel.small:after{inset:9px}.ad-spark{position:absolute;right:10px;top:4px;font-size:38px;color:#bb442f}
#ad-slot[data-creative="1"]{background:#173d43;color:#e9f0d5}#ad-slot[data-creative="1"] .ad-wheel{border-color:#cfb36a;box-shadow:inset 0 0 0 5px #e9f0d5;border-radius:12px}#ad-slot[data-creative="1"] .ad-spark{color:#cfb36a}
#ad-slot[data-creative="2"]{background:#d6d8f0;color:#31284d}#ad-slot[data-creative="2"] .ad-wheel{border-color:#e48a5c}#ad-slot[data-creative="2"] .ad-spark{color:#8d4c93}
.ad-preview-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--ink-2);margin-top:9px}.ad-preview-controls button{font-size:11px;padding:6px 9px}
@media(max-width:1100px){#app{grid-template-columns:minmax(0,1fr) 321px}#adRail,#detail{grid-column:2}}
@media(max-width:860px){#app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}#adRail{grid-column:1;grid-row:2;padding:5px 10px;border-left:0;border-top:1px solid var(--line)}#detail{grid-column:1;grid-row:2}#adRail .ad-label{font-size:8px;margin-bottom:3px}#ad-slot{height:68px;padding:9px 12px}#adHeadline{font-size:18px;margin:4px 0;white-space:normal}#ad-slot .sample-brand{font-size:8px}#ad-slot .ad-art,#adCopy,.sample-cta,#ad-slot small{display:none}#adRail .ad-preview-controls{margin-top:3px;font-size:9px}#adRail .ad-preview-controls button{min-height:24px;padding:2px 7px;font-size:10px}}
@media(min-width:861px){#adHeadline{font-size:28px}.ad-art{flex:0 0 70px;height:70px;overflow:hidden}.ad-wheel{transform:scale(.7) rotate(-20deg);transform-origin:top left}.ad-wheel.small{top:25px}.ad-spark{font-size:30px}#adCopy{margin-bottom:0}}

/* Second placement: a 300 x 600 half page under the 300 x 250, plus a link to the parts list. */
.ad-tall-placement{margin-top:18px}
#ad-tall{height:600px;box-sizing:border-box;padding:26px 22px;display:flex;flex-direction:column;gap:10px;background:#1f3a35;color:#efe7d2;border:1px solid #1f3a3526}
#ad-tall .sample-brand{font-size:11px;letter-spacing:.14em;opacity:.8}
#ad-tall h2{margin:6px 0 0;font-size:40px;line-height:1.02;letter-spacing:-.02em}
#ad-tall p{margin:0;font-size:15px;line-height:1.4;opacity:.9}
.ad-tall-art{flex:1;position:relative;min-height:120px}
.ad-tall-art span{position:absolute;border-radius:50%;border:14px solid #d9a441;box-shadow:inset 0 0 0 4px #efe7d2}
.ad-tall-art span:nth-child(1){width:120px;height:120px;left:18px;bottom:18px}
.ad-tall-art span:nth-child(2){width:70px;height:70px;right:24px;bottom:60px;border-color:#c4432f}
.ad-tall-art span:nth-child(3){width:40px;height:40px;right:70px;top:10px;border-width:8px}
#ad-tall .sample-cta{align-self:flex-start;background:#efe7d2;color:#1f3a35;padding:9px 14px;border-radius:4px;font-weight:700;font-size:14px}
#ad-tall small{font-size:9px;opacity:.7}
.ad-parts-link{margin:14px 0 0;text-align:center;font-size:13px}.ad-parts-link a{color:inherit}
@media(max-width:860px){.ad-tall-placement{display:none}.ad-parts-link{margin:4px 0 0;font-size:11px}}

/* Submit-a-change form in the part commentary section. */
#partWorkshop input:not([type]){width:100%;min-width:0;background:var(--bg,#171a1d);color:inherit;border:1px solid var(--line,#45494b);border-radius:5px;padding:9px;font:inherit}
#partWorkshop .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
#partWorkshop .submit-change{display:block;width:100%;margin:10px 0 0;padding:10px;font-weight:700}

/* Standalone build: no ad rail, so the third column is the part detail only (as before the ads). */
#app{grid-template-columns:var(--left-w) minmax(0,1fr) auto}
@media(max-width:1100px){#app{grid-template-columns:minmax(0,1fr) auto}#detail{grid-column:2}}
@media(max-width:860px){#app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}#detail{grid-column:1}}
.brand-links{margin-top:6px}.brand-links a{color:inherit}