:root {
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #d7dde6;
  --brand: #2b2b2e;
  --brand-soft: rgba(43, 43, 46, .07);
  --accent: #fff2cc;
  --accent-yellow: #f4c02a;
  --danger: #b91c1c;
  --ok: #065f46;
  --ok-bg: rgba(6, 95, 70, .08);
  --warn-bg: rgba(185, 28, 28, .08);
  --shadow: 0 8px 20px rgba(15, 23, 42, .08);
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.wrap { max-width: 1180px; margin: 24px auto; padding: 0 16px 40px; }
.topbar { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 14px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 24px; }
.sub { color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 900px; }
.banner { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
.banner-ok { background: #eef9f3; border-color: rgba(6,95,70,.18); }
.banner-warn { background: #fff1f1; border-color: rgba(185,28,28,.18); }
.progress { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.progress-step { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; font-size: 12px; color: var(--muted); }
.progress-step.active { background: var(--brand); color: white; border-color: transparent; }
.progress-step.done { background: var(--brand-soft); color: var(--brand); }
.layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
/* Carbon fiber weave — Source: https://stackoverflow.com/a/34556311
   Posted by Harry, modified by community. Retrieved 2026-07-11, CC BY-SA 3.0
   Reserved for the primary action only (DESIGN.md: never more than once per screen). */
button.primary,
.button-link.primary {
  background-color: rgb(32,32,32);
  background-image:
    linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(to bottom, rgb(8,8,8), rgb(32,32,32));
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
  color: white;
}
.card-h { background: var(--card); color: var(--text); padding: 12px 14px; font-size: 14px; font-weight: 700; }
.card-b { padding: 14px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-grid.single { grid-template-columns: 1fr; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field small, .hint { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 4px; }
/* Restore the [hidden] attribute against the display:block above. The UA sheet's
   [hidden]{display:none} is a bare attribute selector, so any class selector outranks it -- which
   silently published forms/index.html's [data-dev-only][hidden] "Current page path" diagnostic to
   every production user. Scoped to these two selectors rather than a global [hidden]{...!important}
   so it cannot surprise the three existing scoped guards further down this file. */
.field small[hidden], .hint[hidden] { display: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field-error { display: block; color: var(--danger); font-size: 12px; line-height: 1.35; margin-top: 4px; font-weight: 600; }
.required-legend { color: var(--muted); font-size: 12px; margin: -4px 0 12px; }
.required-legend .required-mark { color: var(--danger); font-weight: 700; }
input[type="text"], input[type="date"], input[type="number"], textarea, select, button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 14px;
  background: #fff;
  color: var(--text);
}
textarea { min-height: 86px; resize: vertical; }
button { cursor: pointer; font-weight: 700; }
button.primary { border-color: transparent; }
button.secondary { background: #fff; }
button:disabled, select:disabled, input:disabled { background: #f5f7fa; color: #94a3b8; cursor: not-allowed; }
input[readonly], textarea[readonly] { background: #f8fafc; cursor: default; }
.actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.actions .right { display: flex; gap: 10px; flex-wrap: wrap; }
.summary-card { background: var(--accent); border: 1px solid #e6d68f; border-radius: 12px; padding: 12px; margin-top: 12px; }
.summary-card.empty { background: #fafbfd; border-color: var(--line); }
.summary-card h3, .section h3 { margin: 0 0 10px; font-size: 15px; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.kv { background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); border-radius: 10px; padding: 10px; }
.kv .k { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.kv .v { font-size: 13px; line-height: 1.4; word-break: break-word; }
.kv.span-2 { grid-column: span 2; }
.price-input {
  width: 100% !important;
  max-width: 180px;
  padding: 6px 9px !important;
  font-size: 13px !important;
  font-weight: 700;
  border-radius: 8px !important;
}
.price-input-wrap { display: inline-flex; align-items: center; gap: 6px; }
.price-input-wrap .price-prefix { font-weight: 700; color: var(--muted); }
.price-edit-note { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.check-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; }
.choice-card { display: flex; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; }
.choice-card.compact { padding: 10px 12px; }
.choice-card input { margin-top: 4px; }

.single-choice-checks label {
  cursor: pointer;
}
.single-choice-checks input[type="checkbox"] {
  margin-right: 6px;
}

.choice-title { font-weight: 700; font-size: 14px; }
.choice-desc { color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 4px; }
.badge { display: inline-block; font-size: 11px; padding: 6px 10px; border-radius: 999px; background: rgba(0,74,153,.08); color: var(--brand); border: 1px solid rgba(0,74,153,.20); font-weight: 700; white-space: nowrap; }
.status-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.45; }
.section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 14px; }
.inline-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-tools input[type="file"] { display: none; }
ul { margin: 0; padding-left: 18px; }
@page { margin: 0.5in; }
@media print {
  .actions, .banner, .progress { display: none !important; }
  html, body { background: white; }
  body { margin: 0; }
  .wrap { max-width: none; margin: 0; padding: 0; }
  .card, .section { box-shadow: none; }
}
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .wrap { padding: 0 12px 28px; }
  .field-grid, .summary-grid { grid-template-columns: 1fr; }
  .kv.span-2 { grid-column: span 1; }
}

.component-row {
  display: block;
}
.component-row.has-preview {
  display: flex;
  align-items: center;
  gap: 14px;
}
.component-row.has-preview select {
  flex: 1;
}
.component-preview {
  display: none;
  width: 110px;
  max-height: 90px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 6px;
}

.layout-preview-wrap {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.layout-preview {
  display:none;
  width: 100%;
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;
  border:1px solid #d7dde5;
  border-radius:12px;
  background:#fff;
  padding:14px;
}


.total-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.total-row span {
  font-weight: 600;
}
.total-row strong {
  text-align: right;
  min-width: 160px;
}
.total-row.grand {
  background: var(--brand);
  color: white;
  border-color: transparent;
}
@media (max-width: 720px) {
  .total-row {
    grid-template-columns: 1fr;
  }
  .total-row strong {
    min-width: 0;
  }
}


.inventory-variants-block {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.inventory-variants-block h4 {
  margin: 0 0 10px;
  font-size: 15px;
}
/* Labeled field subsection within an existing card — a divider + heading, never a nested card. */
.field-group + .field-group {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.field-group h4 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ei-steel, var(--text));
}
.radio-stack {
  display: grid;
  gap: 10px;
}
.radio-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.radio-row input[type="radio"] {
  margin-top: 2px;
}


.module-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.module-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.module-nav-link.active {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: rgba(0, 74, 153, .25);
}
.misc-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 90px) minmax(0, 160px) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.misc-row-grid .field {
  margin-bottom: 0;
}
.misc-row-actions {
  display: flex;
  align-items: start;
  padding-top: 24px;
}

textarea.misc-description,
.misc-line-description textarea {
  min-height: 90px;
  resize: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.misc-summary-item + .misc-summary-item {
  margin-top: 8px;
}

.summary-misc-description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .misc-row-grid {
    grid-template-columns: 1fr;
  }
}
.engine-lines-container .engine-line-card + .engine-line-card {
  margin-top: 16px;
}
.engine-line-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.engine-line-header h3 {
  margin: 0;
  font-size: 15px;
}
.engine-line-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.engine-line-header .engine-line-include {
  flex: 0 0 auto;
  width: auto;
  min-height: auto;
  padding: 6px 10px;
  font-size: 13px;
  margin: 0;
}
.engine-line-header-actions button {
  width: auto;
  flex: 0 0 auto;
}

.bundle-tabs-wrap {
  margin-bottom: 12px;
}
.bundle-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bundle-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 100px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.bundle-tab.active {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: rgba(0, 74, 153, .25);
}
.bundle-tab-add {
  width: auto;
  padding: 8px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.bundle-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.bundle-actions-row .bundle-include-toggle {
  flex: 0 0 auto;
  width: auto;
  min-height: auto;
  padding: 6px 10px;
  font-size: 13px;
  margin: 0;
}
.bundle-actions-row button {
  width: auto;
  flex: 0 0 auto;
}
.bundle-alternate-note {
  margin-bottom: 12px;
}

/* Quote index and top-level navigation styles. These classes are additive and do not alter quote calculation behavior. */
.launch-wrap { max-width: 1220px; }
.launch-topbar { align-items: flex-start; }
.eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #eef5ff 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
  margin: 18px 0 14px;
}
.hero-card h2 { margin: 8px 0 8px; font-size: 26px; }
.hero-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.hero-actions { display: grid; gap: 10px; }
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  background: #fff;
}
.button-link.primary { border-color: transparent; }
.button-link.secondary { background: #fff; }
.launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.app-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-card.active { border-color: rgba(0, 74, 153, .35); }
.app-card.disabled { opacity: .72; }
.app-card h3 { margin: 8px 0 0; font-size: 18px; }
.app-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.status-pill.live { background: var(--ok-bg); color: var(--ok); }
.status-pill.planned { background: #f3f4f6; color: var(--muted); }
.compact-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.launch-notes { margin-top: 14px; }
@media (max-width: 860px) {
  .hero-card, .launch-grid { grid-template-columns: 1fr; }
}

.topbar-nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.button-link.compact { min-height: 36px; padding: 8px 11px; font-size: 13px; }
@media print { .topbar-nav { display: none !important; } }

/* Quote Module index structure. Additive only; existing quote workflow behavior is unchanged. */
.quote-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-card > .button-link,
.app-card > button { margin-top: auto; }
@media (max-width: 1000px) {
  .quote-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .quote-type-grid { grid-template-columns: 1fr; }
}

/* Phase 11 — Quote Module visual shell alignment.
   Additive styling only: no quote state, calculation, JSON loading, or workflow logic changes. */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #d0d7de;
  --brand: #0b57d0;
  --brand-soft: #eef2f7;
  --accent: #fffdf3;
  --shadow: 0 5px 14px rgba(15, 23, 42, .04);
  --radius: 12px;
  --radius-sm: 8px;
  --page-max: 1400px;
  --nav-width: 260px;
  --page-gap: 20px;
  --field-height: 44px;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background: #fff;
  color: var(--text);
}
.wrap,
.page-wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 20px;
}
.topbar {
  align-items: flex-start;
  margin-bottom: 0;
}
.topbar h1 {
  margin: 0 0 4px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text);
}
.sub,
.nav-subtitle,
.muted,
.field small,
.hint,
.choice-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.quote-shell {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  gap: var(--page-gap);
  align-items: start;
  margin-top: 16px;
}
.quote-main-panel {
  min-width: 0;
}
.quote-workflow-nav {
  position: sticky;
  top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f8fafc;
  padding: 14px;
}
.quote-workflow-nav h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
}
.site-pages-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 4px;
}
.site-page-link {
  display: block;
  padding: 8px 10px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  line-height: 1.35;
}
.site-page-link:hover,
.site-page-link.active {
  background: #eef2f7;
  border-color: var(--line);
}
.site-page-link.active {
  font-weight: 600;
}
.site-nav-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 12px 0;
}
.layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 16px;
}
.card,
.section,
.form-footer,
.summary-card,
.choice-card,
.total-row,
.app-card,
.hero-card,
.banner {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
}
.card {
  overflow: hidden;
}
.card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
}
.card-b,
.section {
  padding: 16px;
}
.section {
  margin-bottom: 16px;
}
.section h3,
.summary-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
}
.field-grid {
  gap: 14px 16px;
}
.field {
  display: grid;
  gap: 6px;
  align-content: start;
  margin-bottom: 14px;
}
.field label,
.choice-title,
.item-label {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
}
input[type="text"],
input[type="date"],
input[type="number"],
textarea,
select,
button,
.button-link,
.module-nav-link {
  min-height: var(--field-height);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
}
input[type="text"],
input[type="date"],
input[type="number"],
textarea,
select {
  padding: 10px 12px;
  border-color: var(--line);
}
button,
.button-link,
.module-nav-link {
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}
.module-nav-link.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
button.secondary,
.button-link.secondary {
  background: #fff;
}
.actions {
  margin-top: 20px;
}
.progress {
  margin: 0 0 14px;
}
.progress-step {
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: #fff;
}
.progress-step.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.progress-step.done {
  background: #eef2f7;
  color: var(--text);
}
.banner {
  padding: 12px 14px;
  margin-bottom: 14px;
}
.summary-card {
  background: #f8fafc;
  padding: 12px;
  margin-top: 12px;
}
.summary-card.empty {
  background: #f8fafc;
}
.choice-card {
  border-radius: var(--radius-sm);
}
.launch-wrap {
  max-width: var(--page-max);
}
.hero-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  margin: 18px 0 14px;
}
.hero-card h2 {
  font-size: 24px;
}
.app-card {
  border-radius: var(--radius);
}
.app-card.active {
  border-color: var(--line);
  background: #f8fafc;
}
.topbar-nav {
  margin-top: 2px;
}
@media (max-width: 960px) {
  .quote-shell,
  .layout {
    grid-template-columns: 1fr;
  }
  .quote-workflow-nav {
    position: static;
  }
}
@media print {
  .quote-workflow-nav,
  .topbar-nav {
    display: none !important;
  }
}

/* Phase 15: Hide test-user clutter while retaining source notes for maintainers */
.sub[data-test-user-hidden] {
  display: none !important;
}
.quote-workflow-nav .nav-subtitle,
.quote-workflow-nav .site-nav-divider[data-build-note-context],
.quote-workflow-nav [data-build-note-context] {
  display: none !important;
}

/* Phase 16: Top action toolbar alignment */
.inline-tools[hidden],
.quote-action-toolbar [hidden] {
  display: none !important;
}
.quote-action-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}
.quote-action-toolbar .inline-tools,
.quote-action-toolbar .topbar-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  width: auto;
  margin-top: 0;
}
.quote-action-toolbar button,
.quote-action-toolbar .button-link {
  width: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .quote-action-toolbar {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
.quote-action-toolbar .inline-tools[hidden],
.quote-action-toolbar [hidden] {
  display: none !important;
}

/* Phase 17: Engines, Inc public-site inspired theme pass.
   CSS-only visual refinement for quote workflow and launcher pages.
   The printable quote summary page keeps its existing inline print layout and is not linked to this stylesheet. */
:root {
  --ei-navy: #2b2b2e;
  --ei-navy-dark: #17171a;
  --ei-navy-soft: rgba(43, 43, 46, .07);
  --ei-gold: #f4c02a;
  --ei-gold-soft: #fff7df;
  --ei-steel: #2f3f4f;
  --ei-page: #f3f5f7;
  --ei-panel: #ffffff;
  --ei-border: #c8d2de;
  --brand: var(--ei-navy);
  --brand-soft: var(--ei-navy-soft);
  --accent: var(--ei-gold-soft);
  --bg: var(--ei-page);
  --line: var(--ei-border);
}
body {
  background: var(--ei-page);
}
.wrap,
.page-wrap {
  padding-top: 18px;
}
/* Carbon fiber weave — Source: https://stackoverflow.com/a/34556311
   Posted by Harry, modified by community. Retrieved 2026-07-11, CC BY-SA 3.0 */
.topbar {
  padding: 16px 18px;
  border: 1px solid #17171a;
  border-top: 5px solid var(--ei-gold);
  border-radius: 14px;
  background-color: rgb(32,32,32);
  background-image:
    linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(to bottom, rgb(8,8,8), rgb(32,32,32));
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}
.topbar h1 {
  color: #fff;
  letter-spacing: .01em;
}
.topbar .sub,
.topbar .muted {
  color: rgba(255,255,255,.78);
}
.topbar .button-link.secondary,
.topbar button.secondary {
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.82);
  color: var(--ei-navy-dark);
}
.topbar .button-link.secondary:hover,
.topbar button.secondary:hover {
  background: #fff;
  border-color: var(--ei-gold);
}
.quote-action-toolbar {
  padding-bottom: 0;
}
.quote-shell {
  margin-top: 18px;
}
.quote-workflow-nav {
  background: #fff;
  border-color: var(--ei-border);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .05);
}
.quote-workflow-nav h3 {
  color: var(--ei-navy-dark);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ei-gold);
}
.site-page-link:hover {
  background: var(--ei-navy-soft);
  border-color: rgba(43, 43, 46, .22);
  color: var(--ei-navy-dark);
}
.site-page-link.active {
  background: var(--ei-navy);
  border-color: var(--ei-navy);
  color: #fff;
}
.card,
.section,
.form-footer,
.summary-card,
.choice-card,
.total-row,
.app-card,
.hero-card,
.banner {
  border-color: var(--ei-border);
  box-shadow: var(--shadow);
}
.section h3,
.summary-card h3,
.app-card h3,
.hero-card h2 {
  color: var(--ei-navy-dark);
}
.field label,
.choice-title,
.item-label {
  color: var(--ei-steel);
}
input[type="text"],
input[type="date"],
input[type="number"],
textarea,
select {
  border-color: var(--ei-border);
}
input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(244, 192, 42, .35);
  border-color: var(--ei-navy);
}
/* Same gold-tinted focus ring as inputs, extended to buttons and links so keyboard/touch
   users get a visible focus state everywhere, not just in text fields. */
button:focus-visible,
.button-link:focus-visible {
  outline: 2px solid rgba(244, 192, 42, .55);
  outline-offset: 2px;
}
/* Carbon fiber weave — Source: https://stackoverflow.com/a/34556311
   Posted by Harry, modified by community. Retrieved 2026-07-11, CC BY-SA 3.0 */
.module-nav-link.active,
.progress-step.active {
  background-color: rgb(32,32,32);
  background-image:
    linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(to bottom, rgb(8,8,8), rgb(32,32,32));
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
  border-color: var(--ei-navy);
  color: #fff;
}
button.secondary,
.button-link.secondary,
.module-nav-link {
  background: #fff;
  color: var(--ei-navy-dark);
  border-color: var(--ei-border);
}
button.secondary:hover,
.button-link.secondary:hover,
.module-nav-link:hover {
  border-color: var(--ei-gold);
  box-shadow: inset 0 -2px 0 rgba(244, 192, 42, .35);
}
/* Destructive action: same quiet secondary shape, colored to signal "be careful", not filled solid red. */
button.button-danger,
.button-link.button-danger {
  color: var(--danger);
  border-color: rgba(185, 28, 28, .35);
}
button.button-danger:hover,
.button-link.button-danger:hover {
  border-color: var(--danger);
  box-shadow: inset 0 -2px 0 rgba(185, 28, 28, .35);
}
.progress-step.done,
.app-card.active,
.summary-card,
.banner-ok {
  background: var(--ei-navy-soft);
  border-color: rgba(43, 43, 46, .20);
  color: var(--ei-navy-dark);
}
.status-pill.live {
  background: var(--ei-gold-soft);
  color: var(--ei-navy-dark);
  border: 1px solid rgba(244, 192, 42, .55);
}
.status-pill.planned {
  background: #edf1f5;
  color: #5d6b78;
}
.hero-card {
  background: linear-gradient(135deg, #ffffff 0%, var(--ei-navy-soft) 100%);
  border-top: 5px solid var(--ei-gold);
}
.app-card.active {
  border-top: 5px solid var(--ei-gold);
}
.choice-card:hover {
  border-color: rgba(43, 43, 46, .35);
  background: #fbfdff;
}
.badge {
  background: var(--ei-navy-soft);
  color: var(--ei-navy);
  border-color: rgba(43, 43, 46, .20);
}
/* Carbon fiber weave — Source: https://stackoverflow.com/a/34556311
   Posted by Harry, modified by community. Retrieved 2026-07-11, CC BY-SA 3.0 */
.total-row.grand {
  background-color: rgb(32,32,32);
  background-image:
    linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(to bottom, rgb(8,8,8), rgb(32,32,32));
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
  border-color: var(--ei-navy);
  color: #fff;
}
@media print {
  .topbar {
    background: #fff !important;
    color: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .topbar h1 {
    color: #000 !important;
  }
}

/* Phase 18: Quote Intake workflow selector and new-quote date default support */
.quote-intake-form-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.workflow-selector-panel {
  border: 1px solid var(--ei-border, var(--line));
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.workflow-selector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.workflow-selector-head h3 {
  margin: 0;
  color: var(--ei-navy-dark, var(--text));
  font-size: 16px;
  line-height: 1.35;
}
.workflow-choice-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.workflow-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--ei-border, var(--line));
  border-radius: 999px;
  background: var(--ei-navy-soft, #f8fafc);
  color: var(--ei-navy-dark, var(--text));
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  flex: 1 1 190px;
}
.workflow-choice input {
  flex: 0 0 auto;
}
.workflow-choice-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--ei-navy-dark, var(--text));
  opacity: .6;
}
.workflow-choice:has(input:disabled) {
  cursor: not-allowed;
}
@supports not selector(:has(*)) {
  .workflow-choice input:disabled {
    cursor: not-allowed;
  }
}
/* Selected state: a rare-gold marker, not the carbon-fiber signature (reserved for the
   topbar and the single primary submit action — DESIGN.md's one-per-screen rule). */
.workflow-choice:has(input:checked) {
  background: var(--ei-gold-soft, #fff7df);
  border-color: var(--ei-gold, #f4c02a);
  color: var(--ei-navy-dark, var(--text));
}
@supports not selector(:has(*)) {
  .workflow-choice {
    background: #fff;
  }
}
@media (max-width: 720px) {
  .workflow-choice-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .workflow-choice {
    flex-basis: auto;
  }
}

/* Phase 19: Keep Reset / New Quote visible in the top intake toolbar, outside hidden developer/build-note containers. */
.quote-action-toolbar-left,
.quote-action-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.quote-action-toolbar-left {
  min-width: 0;
  flex: 1 1 auto;
}
.quote-action-toolbar-right {
  flex: 0 0 auto;
  margin-left: auto;
}
.quote-action-toolbar-right #resetBtn {
  width: auto;
  white-space: nowrap;
}
.quote-intake-form-stack .actions {
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .quote-action-toolbar-left,
  .quote-action-toolbar-right {
    flex-wrap: wrap;
  }
  .quote-action-toolbar-right {
    margin-left: 0;
  }
}

/* Marine Generator quote-type controls remain mutually exclusive; Misc Options stays optional/clickable. */
.workflow-choice.selectable-either-or-section {
  cursor: pointer;
}

/* Phase 3D: Hard-hide inactive Generator Package dependent fields. */
#generatorPackageForm [data-dependent][hidden],
#generatorPackageForm [data-dependent].is-hidden,
#generatorPackageForm [data-active="false"] {
  display: none !important;
}

/* Phase 3E: Hard-hide inactive Generator Package option choices. */
#generatorPackageForm [data-option-dependent][hidden],
#generatorPackageForm [data-option-dependent].is-hidden {
  display: none !important;
}

/* Phase 4 shared quote dashboard */
.folder-warning {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #78350f;
  margin: 10px 0 14px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
}
.saved-quote-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) minmax(180px, 240px);
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.saved-quote-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.saved-quote-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 13px;
}
.saved-quote-table th,
.saved-quote-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: middle;
}
.saved-quote-table th {
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.saved-quote-table tbody tr:last-child td { border-bottom: 0; }
.saved-quote-table .num { text-align: right; white-space: nowrap; }
.saved-quote-actions { display: flex; gap: 6px; white-space: nowrap; }
.empty-state {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 18px;
  color: var(--muted);
  background: var(--soft);
}
.empty-state.error-state {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}
.attachment-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 12px;
}
.attachment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.attachment-table th,
.attachment-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: middle;
}
.attachment-table th {
  background: var(--soft);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.attachment-table tbody tr:last-child td { border-bottom: 0; }
.muted.error-state { color: #b91c1c; }
button.compact,
.button-link.compact {
  padding: 7px 10px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .saved-quote-filters,
  .folder-warning {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
}

.saved-quote-party-cell {
  display: grid;
  gap: 3px;
  line-height: 1.25;
}
.saved-quote-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Phase 5b: quote revisions. A family (00003509, 00003509-R2, ...) is rendered contiguously,
   current first, and every row after the first is superseded. Deliberately NOT a separate
   `.badge` -- app.css's .badge is a count pill sized for the option panels, and theme.css
   section 11.5 restyles it wholesale, so borrowing it would drag both of those in. Tokens
   only, so the themed and unthemed dashboards both come out right. */
.saved-quote-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  vertical-align: middle;
}
/* Superseded rows stay fully legible and fully operable -- they still open, still print and
   still hold their own attachments, which is the entire point of a revision being a new
   record. They are set back, not disabled: a dimmed row a rep cannot read is how the wrong
   quote gets sent because nobody checked which one they had. */
.saved-quote-superseded td { color: var(--muted); }
.saved-quote-superseded .id { padding-left: 26px; }
.saved-quote-superseded .saved-quote-badge.superseded { border-style: dashed; }

/* Optional Transmission / Throttle and Gear Controls add-on */
.optional-addon-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--soft);
}
.transmission-addon-toggle {
  margin-bottom: 0;
}
.optional-addon-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}


/* Marine Controls interactive diagram selection */
#configSvg.layout-preview {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: none;
  min-height: 320px;
  overflow: visible;
}
#configSvg svg.controls-diagram {
  display: block;
  width: 100%;
  height: auto;
  /* The redesigned diagrams are 760x800 (760x620 for single-station), taller than
     the 760x560 they replaced -- the engine/ECU photos and the ~1.8x panel photos
     need the room. A 620px cap would letterbox them and undo the size increase. */
  max-height: 880px;
}
.layout-preview-image-fallback {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;
}
.diagram-loading,
.diagram-unavailable {
  display: grid;
  min-height: 280px;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
}
#dynamicWrap.diagram-mode {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.controls-diagram .hot { cursor: pointer; }
.controls-diagram .hot:focus-visible .node,
.controls-diagram .hot:hover .node { stroke-width: 3; }
.controls-diagram .hot:focus-visible .run,
.controls-diagram .hot:hover .run { stroke-width: 4; }
.controls-diagram .hot.selected .node,
.controls-diagram .hot.selected .run { stroke: #BA7517 !important; stroke-width: 3; }
.controls-diagram .slot { font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: #0C2A40; }
.diagram-option-menu {
  position: absolute;
  z-index: 20;
  width: min(340px, calc(100% - 16px));
  padding: 8px;
  background: #fff;
  border: 1px solid var(--ei-border, var(--line));
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}
.diagram-option-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: auto;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  text-align: left;
  color: var(--text);
}
.diagram-option-menu button:hover,
.diagram-option-menu button.active {
  background: var(--ei-navy-soft, rgba(0, 74, 153, .07));
}
.diagram-option-menu button:focus-visible {
  outline: 2px solid var(--ei-navy, var(--brand));
  outline-offset: -2px;
  background: var(--ei-navy-soft, rgba(0, 74, 153, .07));
}
.diagram-option-label {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-weight: 600;
}
.diagram-option-label strong {
  color: var(--ei-navy, var(--brand));
  font-size: 12px;
}
.diagram-option-price {
  white-space: nowrap;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

/* Shared utility classes: replace repeated one-off inline styles on form pages */
.section.section-flat {
  margin: 0 0 12px 0;
  box-shadow: none;
}
.actions.actions-inline {
  margin-top: 12px;
}
.controls-total-amount {
  font-size: 28px;
  font-weight: 700;
}

/* Dealers quote one package per quote (spec 5.2). Engines, Inc. staff keep
   multi-bundle/multi-line for internal comparison quotes. Presentation only --
   the handler guards in propulsion-bundles.js and engine-only.html enforce it.

   The whole #bundleTabs container goes, not just the add button. Hiding "+ Add
   Bundle" alone still left a dealer looking at a lone "Bundle 1" tab, an "Include
   in package total" checkbox and a permanently greyed-out "Remove Bundle" -- the
   controls of a feature they cannot use. propulsion-bundles.js renders all of it
   into that one container, so taking the container retires the whole surface and
   cannot fall out of step with a future edit the way an enumerated selector list
   would.

   Consequence, accepted: a dealer cannot toggle included_in_total. New bundles
   default to included, and this was confirmed with the owner on 2026-08-07 to
   affect no existing quote -- the tool has not been rolled out to dealers. A
   dealer capped at one bundle who could exclude it would only ever produce a
   zero-dollar quote. */
html.facility-dealer #bundleTabs,
html.facility-dealer .bundle-tab-add,
html.facility-dealer #genAddLineBtn {
  display: none;
}

/* Same reasoning on the generator engine-only page: each line card's header
   carries the include toggle and a disabled "Remove". The "Engine Line 1"
   heading itself stays -- it labels the card and reads correctly on its own. */
html.facility-dealer .engine-line-header-actions {
  display: none;
}

/* When the Reports module ships, gate its tile on the existing users.can_reports
   capability instead of facility type -- this rule is presentation, not permission. */

/* Dealers do not see modules that aren't built yet (spec 5.2). Engines, Inc.
   staff keep the "Coming Soon"/"Planned" tiles as a roadmap cue. Application
   Review is an ACTIVE module and is deliberately not hidden. */
html.facility-dealer .home-card.disabled,
html.facility-dealer .app-card.disabled {
  display: none;
}

/* --- Launch-page grids re-fitted to the tile count a dealer actually sees. ---
   The two rules above hide tiles but leave the column counts they were sized for,
   so a dealer got a left-shifted 2-of-4 dashboard and a 3+1 orphan row on the quote
   launch page. Both fixes key off the same facility class -- no second mechanism,
   no JS. Engines, Inc. keeps every base rule untouched: 4 dashboard columns for its
   4 tiles, 3 quote columns for its 6 (a balanced 3+3; four columns would orphan two).

   1) Dashboard (index.html, .home-grid is defined in that page's inline <style>).
   A dealer sees 2 tiles. Centre the pair and cap each track so they read as two
   cards, not two banners: 320px is ~22% wider than the 261px four-column track,
   and the pair spans 658px of the grid's 1100px content box. minmax(0, 320px)
   means the tracks still shrink rather than overflow once the viewport is narrower
   than the pair. */
html.facility-dealer .home-grid {
  grid-template-columns: repeat(2, minmax(0, 320px));
  justify-content: center;
}
/* Two ~150px cards on a phone is not a field-readable dashboard; one centred
   card is. Dealer-only, so index.html's 2-column-at-900px rule is unchanged for
   Engines, Inc. */
@media (max-width: 640px) {
  html.facility-dealer .home-grid {
    grid-template-columns: minmax(0, 320px);
  }
}

/* 2) Quote launch page (quote_index.html). A dealer sees 4 tiles, which wrapped
   3+1 under the base 3-column rule. Four columns puts them on one row.
   Padding drops 16px -> 12px only in this band: 12/276 is the same proportion as
   16/373 in the three-column layout, and 12px is the design system's md spacing
   step, so the card's internal rhythm is preserved rather than improvised.
   Measured against the real strings at the narrow end of the band (1121px
   viewport -> 259.75px track -> 233.75px content): the longest heading
   ("Marine Generator Quote", ~206px) and the longest bullet ("Misc Options and
   printable summary", ~211px inside the 18px list indent) each still hold one
   line, and nothing overflows. Button height is untouched -- buttons and
   .button-link carry min-height: var(--field-height) (44px) and stretch to the
   full card width as flex-column children, so the 44x44 minimum survives the
   shrink at every width below. .app-card > .button-link { margin-top: auto }
   still lands every "Start Quote" on one baseline. */
html.facility-dealer .quote-type-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html.facility-dealer .quote-type-grid > .app-card {
  padding: 12px;
}
/* 1120px is where the fourth column stops paying for itself -- below it a track
   can no longer hold those two strings on one line. Raised from the base 1000px
   for exactly that reason. A tablet in portrait (~768-834px) therefore gets a
   balanced 2+2, never four cramped columns. */
@media (max-width: 1120px) {
  html.facility-dealer .quote-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html.facility-dealer .quote-type-grid > .app-card {
    padding: 16px;
  }
}
/* Matches the base rule's 640px single-column drop; restated because the
   dealer-scoped selectors above outrank it. */
@media (max-width: 640px) {
  html.facility-dealer .quote-type-grid {
    grid-template-columns: 1fr;
  }
}

/* A dealer never quotes on behalf of another dealer, so the Quote Intake "Dealer"
   identity group (forms/index.html, [data-dealer-identity]) is noise for them and an
   invitation to type the wrong name -- quote 00003525 was saved with dealer_name
   "Test dealer" by an Allemand user. Engines, Inc. staff keep the group; they do quote
   on a dealer's behalf.

   `display: none` on the GROUP, not the inputs: the inputs must stay in the layout tree
   only as far as the form is concerned, and they do -- a display:none input is still in
   form.elements, still carries a value, and is still read by page-landing.js's
   onFormChange(). Presentation only. The value that actually prints is written in JS by
   applyDealerIdentityFromSession(), because CSS cannot populate anything. */
html.facility-dealer [data-dealer-identity] {
  display: none;
}

/* The mark-up panel is dealer-cost-facing and screen-only. The printed quote must
   never carry the percentage or the margin dollars (spec 6.5). NOTE: forms/summary.html
   -- the only page that renders #marginOptions today -- loads no external stylesheet,
   so this rule is a safety net for any future page that adopts app.css; the effective
   rule for the summary page is the one in its own inline @media print block. */
@media print {
  #marginOptions { display: none !important; }

  /* Interactive affordances on the controls diagram are configuration aids, not part
     of the arrangement being documented. The decorator is already told
     interactive: false on the print path and emits none of this, so these rules are a
     second line of defence for any future page that prints a live diagram. */
  .controls-diagram .select-hint,
  .controls-diagram .required-flag,
  .controls-diagram .edit-glyph { display: none !important; }
  .controls-diagram .hot { cursor: default; }
}

.language-toggle { display: inline-flex; align-items: center; gap: 6px; }
.language-toggle-label { font-size: 12px; color: var(--muted); }
/* width: auto overrides the bare `select` rule above (line ~64), which sets width: 100% --
   a class selector only wins for the properties it actually declares, so without this the
   toggle stretched to fill its flex row. min-height: 36px overrides that same bare `select`
   rule's min-height: var(--field-height) (44px) so the toggle matches its .button-link.compact
   siblings (36px, line ~477) in the topbar-nav flex row instead of standing 8px taller than
   them; the declared padding: 4px 8px was inert without this, since min-height still won.
   No max-width here on purpose: width: auto already sizes to content, so a max-width was
   dead weight, and an absolute px cap cannot scale under text-only browser zoom anyway. */
.language-toggle-select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; width: auto; min-height: 36px; }