/* =====================================================================
   FGC Bid Calculator — design system
   Palette: matte black + FGC orange. Industrial, quiet, product-y.
   Loaded from every page; overrides the older inline styles.
   ===================================================================== */

:root {
  color-scheme: dark;
  /* Surfaces — retuned Sep 2026 for legibility on weak phone screens:
     inputs get their own surface, and every border clears ~3:1 against
     the surface it sits on (WCAG non-text contrast). */
  --bg:            #0f1012;
  --card:          #181c21;
  --card-elev:     #21262c;
  --hover:         #2a3038;
  --border:        #3a414b;
  --border-strong: #4b535e;
  --input:         #22272d;
  --input-border:  #6b7584;   /* 3.1:1 on --input */

  /* Text */
  --text:          #f2f3f5;
  --text-muted:    #a0a6b0;
  --text-dim:      #767d88;

  /* Brand */
  --orange:        #c85a1e;
  --orange-hover:  #e06a2a;
  --orange-dim:    #7a3915;
  --orange-fade:   rgba(200, 90, 30, 0.14);

  /* Status */
  --success:       #7cb342;
  --warning:       #e0a800;
  --error:         #e07070;
  --info:          #8ab4e8;

  /* Type */
  --font:          -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono:          "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Sizing */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --gap:       16px;

  /* Shadows (subtle on dark surfaces) */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.35);
}

/* ---------- Light mode ----------
   Same orange, same layout — for bright rooms and job sites. Toggled from the
   top bar; remembered per device in localStorage (see the head script). */
html[data-theme="light"] {
  color-scheme: light;
  --bg:            #f3f2ef;
  --card:          #ffffff;
  --card-elev:     #f7f6f3;
  --hover:         #ecebe7;
  --border:        #cdd2d8;
  --border-strong: #a9b0b9;
  --input:         #ffffff;
  --input-border:  #8b939e;   /* 3.1:1 on white */

  --text:          #14171b;
  --text-muted:    #5a616c;
  --text-dim:      #7d8591;

  --orange:        #c85a1e;
  --orange-hover:  #a94a16;
  --orange-dim:    #e5b89c;
  --orange-fade:   rgba(200, 90, 30, 0.12);

  --success:       #4f8f1f;
  --warning:       #a67a00;
  --error:         #c24a4a;
  --info:          #2f6fc4;

  --shadow-1: 0 1px 2px rgba(20,23,27,0.10);
  --shadow-2: 0 4px 16px rgba(20,23,27,0.10);
}

/* ---------- Reset-ish base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hover); text-decoration: underline; }

/* ---------- Top nav ---------- */
/* Taller nav bar with a subtle orange rule at the bottom, and a soft gradient
   from the card color to the base bg so the header has real presence without
   being loud. The nav links get pill treatments on hover. */
.topnav {
  background: linear-gradient(180deg, var(--card) 0%, var(--card) 78%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(200,90,30,0.35), 0 4px 20px rgba(0,0,0,0.35);
}
.topnav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Logo is black-on-transparent — wrap in a warm off-white circular badge so it
   reads against the dark nav. Slight orange ring picks up the brand accent. */
.topnav-brand img {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  background: #f5f2ec;
  padding: 3px;
  box-shadow:
    0 0 0 1px rgba(200,90,30,0.35),
    0 0 0 3px rgba(200,90,30,0.10),
    0 2px 10px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.topnav-brand:hover img {
  transform: rotate(-6deg) scale(1.05);
  box-shadow:
    0 0 0 1px rgba(200,90,30,0.5),
    0 0 0 4px rgba(200,90,30,0.18),
    0 4px 14px rgba(0,0,0,0.55);
}
.topnav-brand a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}
.topnav-brand a:hover { text-decoration: none; }
.topnav-brand h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.1px;
  color: var(--text);
}
.topnav-brand .subtitle {
  font-size: 10.5px;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin-top: 3px;
}
.topnav-user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.topnav-user > span {
  padding: 6px 10px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
  font-size: 12.5px;
}
.topnav-user strong { color: var(--text); font-weight: 600; }
.topnav-user a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 7px;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.topnav-user a:hover { color: var(--text); background: var(--hover); text-decoration: none; }

/* ---------- Main layout (temporary two-column, sidebar coming later) ---------- */
main {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
  padding: 24px 32px;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 960px) {
  main { grid-template-columns: 1fr; }
}

/* ---------- App shell: sidebar + content + summary ---------- */
.shell {
  display: grid;
  grid-template-columns: 280px 1fr 380px;
  gap: 0;
  min-height: calc(100vh - 57px);
}
@media (max-width: 1200px) {
  .shell { grid-template-columns: 240px 1fr 340px; }
}
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
}

.sidebar {
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
}
.content {
  padding: 24px 32px;
  overflow-y: auto;
}
.summary-col {
  background: var(--card);
  border-left: 1px solid var(--border);
  padding: 24px;
  overflow-y: auto;
}

/* ---------- Sidebar: item list ---------- */
.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 8px;
  margin: 4px 0 6px;
}
.job-total-hero {
  padding: 14px 12px;
  background: var(--card-elev);
  border-radius: var(--radius);
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
.job-total-hero .label {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.job-total-hero .amount {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  margin-top: 4px;
}
.item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.1s, color 0.1s;
  margin-bottom: 2px;
}
.item-row:hover {
  background: var(--hover);
  color: var(--text);
}
.item-row.current {
  background: var(--card-elev);
  color: var(--text);
  border-left: 3px solid var(--orange);
  padding-left: 7px;
}
.item-row .item-name { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.item-row .item-total { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.item-row.current .item-total { color: var(--text); font-weight: 700; }
.type-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--card-elev);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}
.item-row.current .type-icon { background: var(--orange); color: white; }

.sidebar-actions {
  display: flex;
  gap: 6px;
  padding: 12px 4px 4px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

/* ---------- Items footer (moved to bottom of form) ---------- */
/* Sits below Labor as the "finished — what next?" moment. Prominent action
   buttons + running job total so the estimator naturally moves on to the next
   item after completing the current one. */
.items-footer {
  margin-top: 28px;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 40px),
    var(--card-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.items-footer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.items-footer-header .sidebar-actions {
  padding: 0;
  margin: 0;
  border-top: 0;
  flex-shrink: 0;
}
.items-footer-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.items-footer-total {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  margin-top: 2px;
}
.items-footer #items-list { padding: 0; }

/* ---------- Content cards ---------- */
/* Subtle top highlight makes the card feel raised and catches ambient light —
   the reader's eye reads it as "surface". */
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 60px),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 12px rgba(0,0,0,0.25);
}
.card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 14px;
}
.card-title-sub {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-left: 4px;
}

/* ---------- Per-item breakdown cards (summary sidebar) ---------- */
/* One collapsible card per bid item, sits under the main Breakdown card.
   Auto-expands the currently-selected item so its details are visible without
   an extra click. */
/* Job hero: strong orange presence — this is the number the customer pays. */
.job-summary-hero {
  background:
    radial-gradient(circle at 100% 0%, rgba(200,90,30,0.22) 0%, transparent 55%),
    linear-gradient(165deg, var(--card-elev) 0%, var(--card) 100%);
}

/* (this-item hero styling reused the base .bid-summary-hero rules — no
   overrides needed. The hero is hidden entirely on multi-item bids.) */

/* Glass Alternates card — compact price comparison for the 3 shower glass types.
   Currently-selected type gets an orange left-border + tinted background.
   Deltas are colored red-up / green-down so upgrades vs downgrades read at a glance. */
.glass-alt-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
}
.glass-alt-row + .glass-alt-row { margin-top: 2px; }
.glass-alt-current {
  background: var(--orange-fade);
  border-left: 3px solid var(--orange);
  padding-left: 7px;
}
.glass-alt-label { color: var(--text); font-weight: 500; }
.glass-alt-current .glass-alt-label { font-weight: 700; }
.glass-alt-badge {
  display: inline-block;
  padding: 1px 6px;
  background: var(--orange);
  color: white;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  vertical-align: 2px;
  margin-left: 4px;
}
.glass-alt-price { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.glass-alt-delta { font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 68px; text-align: right; }
.glass-alt-delta-up   { color: var(--warning); }
.glass-alt-delta-down { color: var(--success); }
.glass-alt-delta-zero { color: var(--text-dim); }
.glass-alt-unavailable {
  opacity: 0.5;
  grid-template-columns: 1fr auto;
}
.glass-alt-reason { font-size: 11.5px; color: var(--text-dim); font-style: italic; }

#per-item-breakdowns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.per-item-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.per-item-card-current {
  border-color: var(--orange-dim);
  box-shadow: 0 0 0 1px var(--orange-dim) inset, 0 2px 12px rgba(200,90,30,0.12);
}
.per-item-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius);
  transition: background 0.12s;
}
.per-item-card > summary::-webkit-details-marker { display: none; }
.per-item-card > summary::before {
  content: "▸";
  color: var(--text-dim);
  font-size: 10px;
  display: inline-block;
  width: 10px;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.per-item-card[open] > summary::before { transform: rotate(90deg); }
.per-item-card > summary:hover { background: var(--hover); }
.per-item-icon {
  width: 30px; height: 24px;
  border-radius: 5px;
  background: var(--card-elev);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.per-item-card-current .per-item-icon { background: var(--orange); color: white; }
.per-item-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.per-item-total {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.per-item-card-current .per-item-total { color: var(--orange); }
.per-item-body {
  padding: 4px 14px 14px 34px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.card h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.2px;
}
.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.card-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.toolbar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.toolbar-actions .action-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
}
.toolbar-actions .action-btn.primary {
  padding: 8px 18px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}
.toolbar-actions .divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 2px;
}
.card h3 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin: 26px 0 14px;
  padding: 20px 0 0 12px;
  border-top: 1px solid var(--border);
  position: relative;
}
/* Small orange accent bar to the left of every section title. Gives the form a
   clear visual rhythm — every section reads as its own labeled zone. */
.card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--orange);
  opacity: 0.9;
}
/* First h3 in a card (or right after a grouped block) doesn't need a divider,
   but keeps the accent bar. */
.card h3:first-child,
.customer-block + .item-setup-block + h3 {
  border-top: 0;
  padding-top: 0;
  margin-top: 8px;
}
.card h3:first-child::before,
.customer-block + .item-setup-block + h3::before { top: 0; }
.card > .item-setup-block + h3 { margin-top: 24px; }

/* ---------- Info blocks (computed geometry, wrap/grid/armor summaries, etc.) ---------- */
.info-block {
  background: var(--card-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.info-block strong { color: var(--text); font-weight: 600; }
.info-block .info-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}

/* ---------- Grouped blocks inside the main card ---------- */
.customer-block, .item-setup-block, .job-options-block {
  background: var(--card-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.customer-block h3, .item-setup-block h3, .job-options-block h3 {
  margin: 0 0 12px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border-top: 0;
}
.customer-block .field:last-child,
.item-setup-block .row:last-child, .item-setup-block .field:last-child,
.job-options-block .option-toggles:last-child { margin-bottom: 0; }

/* Compact toggle rows: bordered pill with checkbox + label + hint */
.option-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .option-toggles { grid-template-columns: 1fr; }
}
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.toggle-row:hover { border-color: var(--border-strong); }
.toggle-row input[type=checkbox] {
  width: auto;
  margin: 2px 0 0;
  accent-color: var(--orange);
  flex-shrink: 0;
}
.toggle-row input[type=checkbox]:checked ~ span strong { color: var(--orange); }
.toggle-row:has(input:checked) { border-color: var(--orange-dim); background: var(--orange-fade); }
.toggle-row > span { display: flex; flex-direction: column; gap: 2px; }
.toggle-row strong { font-weight: 600; }
.toggle-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- Data tables (custom panels, grid bars, panel weights) ---------- */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--card-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 6px 0 12px;
}
.data-table thead th {
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.data-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody input[type=text],
.data-table tbody input[type=number] {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.data-table tbody .row-remove,
.data-table tbody button.mr-remove {
  padding: 4px 10px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
}
.data-table tbody .row-remove:hover,
.data-table tbody button.mr-remove:hover {
  background: rgba(224,112,112,0.08);
  border-color: var(--error);
  color: var(--error);
}
.data-table-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

/* ---------- Dimension reference (annotated diagram next to inputs) ---------- */
/* Side-by-side layout: inputs on the left, big annotated layout diagram on the
   right. The diagram shows the same letters (a, b, c, ...) the input fields are
   labeled with, drawn on the corresponding parts of the shower so estimators
   can see at a glance which measurement is which. */
.dim-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .dim-shell { grid-template-columns: 1fr; }
}
.dim-inputs { margin-bottom: 0; }
.dim-reference {
  background: var(--card-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px 10px;
  position: relative;
}
.dim-reference-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 8px;
}
.dim-reference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dim-reference-head .dim-reference-label { margin-bottom: 0; }
/* Flip: mirrors the drawing (hinge side / return side) to match the room. */
.flip-btn {
  all: unset;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.flip-btn:hover { color: var(--text); border-color: var(--border-strong); }
.flip-btn-on { color: var(--orange); border-color: var(--orange); background: var(--orange-fade); }
.flip-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dim-reference-figure {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dim-reference-figure svg { max-width: 100%; height: auto; }

/* ---------- Layout picker (visual grid of top-down diagrams) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.layout-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.layout-card {
  /* Reset button defaults */
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
  color: var(--text-muted);
  text-align: center;
}
.layout-card:hover {
  border-color: var(--border-strong);
  background: var(--hover);
  color: var(--text);
}
.layout-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.layout-card-selected {
  border-color: var(--orange);
  background: var(--orange-fade);
  color: var(--text);
}
.layout-card-selected .layout-card-name { color: var(--text); font-weight: 600; }
.layout-card-diagram {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layout-card-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.25;
}

/* ---------- Hardware grid ---------- */
/* Compact "label + item select + qty" rows so hardware reads like a picklist,
   not a stack of 6 identical two-column grids. */
.hardware-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.hw-row {
  display: grid;
  grid-template-columns: 160px 1fr 80px;
  gap: 12px;
  align-items: center;
}
@media (max-width: 700px) {
  .hw-row { grid-template-columns: 1fr 70px; }
  .hw-row .hw-label { grid-column: 1 / -1; margin-bottom: -4px; }
}
.hw-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  text-transform: none;
  margin: 0;
  padding: 0;
}
.hw-row select { margin: 0; }
.hw-row .hw-qty {
  width: 100%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 10px 8px;
}
/* Rows where nothing is selected read as "off" — the qty dims to indicate the
   whole row won't contribute to the bid until an item is picked. */
.hw-row:has(select:not([value]):not(:focus)) .hw-qty[value="0"] { color: var(--text-dim); }

/* Collapsible advanced section (Fabrication) */
.fab-details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-elev);
  margin: 24px 0 16px;
  padding: 0;
}
.fab-details[open] { padding-bottom: 12px; }
.fab-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-radius: var(--radius);
  transition: background 0.12s;
}
.fab-details > summary::-webkit-details-marker { display: none; }
.fab-details > summary::before {
  content: "▸";
  color: var(--text-dim);
  font-size: 10px;
  transition: transform 0.15s;
  display: inline-block;
  width: 10px;
}
.fab-details[open] > summary::before { transform: rotate(90deg); }
.fab-details > summary:hover { background: var(--hover); }
.fab-summary-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.fab-summary-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 400;
}
.fab-details[open] > .row-4,
.fab-details[open] > .row-3,
.fab-details[open] > .row { padding: 0 16px; }

/* ---------- Optional sections (Header / Transom / Extra Charges) ----------
   Collapsed into a row of "+ …" chips so the default form is short. A section
   opens on click, or automatically when the loaded item uses that feature. */
.opt-sections { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.opt-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  flex: 0 1 auto;
  min-width: 0;
}
.opt-section[open] { flex-basis: 100%; background: var(--card-elev); }
.opt-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius);
  user-select: none;
  transition: background 0.12s;
}
.opt-section > summary::-webkit-details-marker { display: none; }
.opt-section > summary:hover { background: var(--hover); }
.opt-section[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.opt-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.opt-section[open] .opt-label { color: var(--text); }
.opt-hint { font-size: 11.5px; color: var(--text-dim); font-weight: 400; display: none; }
.opt-section[open] .opt-hint { display: inline; }
.opt-section[open] > *:not(summary) { margin-left: 14px; margin-right: 14px; }
.opt-section[open] > .toggle-row { margin-top: 12px; }
.opt-section[open] > .data-table { width: calc(100% - 28px); margin-top: 12px; }
.opt-section[open] > .action-btn { margin-top: 0; }
/* Additional-charges sits alone below Fabrication — let it span the row. */
#additional-charges-section { display: block; margin-bottom: 18px; }
#additional-charges-section[open] { flex-basis: auto; }
.label-hint {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}
.pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------- Forms ---------- */
label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
input[type=text],
input[type=number],
input[type=password],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--card-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.1s, background 0.1s;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--hover);
}
input[readonly] { background: var(--bg); color: var(--text-muted); }
input::placeholder { color: var(--text-dim); }

/* Kill Chrome/Safari autofill white background on dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--card-elev) inset !important;
  caret-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

/* Inputs inside the grouped Customer / Item / Job Options blocks feel like they
   belong to the card: wider corner radius matching the container, comfortable
   padding, and value text that starts muted and darkens once you type. */
.customer-block .field input,
.customer-block .field textarea,
.item-setup-block .field input:not([type=hidden]),
.item-setup-block .field select,
.item-setup-block .field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-family: var(--font);
  background: var(--card);           /* dark, distinct from card-elev container */
  color: var(--text);                /* full contrast whenever typing */
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
/* Placeholders read as "muted" until you type. */
.customer-block .field input::placeholder,
.customer-block .field textarea::placeholder,
.item-setup-block .field input::placeholder,
.item-setup-block .field textarea::placeholder { color: var(--text-dim); }

/* Focused fields deepen further so the active field is unmistakable. */
.customer-block input:focus,
.customer-block textarea:focus,
.item-setup-block input:focus,
.item-setup-block select:focus,
.item-setup-block textarea:focus { background: var(--bg); }

.row, .row-3, .row-4 { display: grid; gap: 12px; margin-bottom: 12px; }
.row { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }
.row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.field { margin-bottom: 12px; }

/* ---------- Buttons ---------- */
button, .btn {
  padding: 8px 14px;
  background: var(--card-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  font-family: inherit;
}
button:hover, .btn:hover { background: var(--hover); border-color: var(--border-strong); }
button.primary, .btn.primary {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}
button.primary:hover, .btn.primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
button.danger, .btn.danger {
  color: var(--error);
  background: transparent;
  border-color: var(--border);
}
button.danger:hover, .btn.danger:hover { background: rgba(224, 112, 112, 0.1); border-color: var(--error); }
button.ghost, .btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
button.ghost:hover, .btn.ghost:hover { background: var(--hover); color: var(--text); }
.action-btn { /* legacy compat with existing markup */
  padding: 8px 14px;
  background: var(--card-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s, border-color 0.12s, box-shadow 0.15s;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.action-btn:hover {
  background: var(--hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.action-btn:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.action-btn.primary {
  background: linear-gradient(180deg, var(--orange-hover) 0%, var(--orange) 100%);
  color: white;
  border-color: var(--orange);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
.action-btn.primary:hover {
  background: linear-gradient(180deg, #eb7a3d 0%, var(--orange-hover) 100%);
  border-color: var(--orange-hover);
  box-shadow: 0 4px 14px rgba(200,90,30,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.action-btn.danger  { background: transparent; color: var(--error); border-color: var(--border); }
.action-btn.danger:hover {
  background: rgba(224, 112, 112, 0.1);
  border-color: var(--error);
  box-shadow: 0 3px 8px rgba(224,112,112,0.15);
}

/* ---------- Segmented toggles (customer_type, product_type) ---------- */
.customer-type, .product-type, .margin-preset {
  padding: 8px 14px;
  background: var(--card-elev);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.1s;
}
.customer-type:hover, .product-type:hover, .margin-preset:hover {
  color: var(--text);
  background: var(--hover);
  border-color: var(--border-strong);
}
.customer-type.active, .product-type.active, .margin-preset.active {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}

/* ---------- Stepper (± buttons around numeric inputs) ---------- */
.stepper { display: flex; align-items: stretch; }
.stepper input {
  border-radius: 0;
  text-align: center;
}
.step-btn {
  width: 36px;
  padding: 0;
  border-radius: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card-elev);
  border: 1px solid var(--border);
}
.step-btn:hover { background: var(--hover); color: var(--text); }
.step-btn:first-child { border-radius: 8px 0 0 8px; border-right: none; }
.step-btn:last-child { border-radius: 0 8px 8px 0; border-left: none; }

/* ---------- Bid Summary (right panel) — the "product" ---------- */
.bid-summary {
  position: sticky;
  top: 80px;
}
.bid-summary-hero {
  padding: 24px 26px 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200,90,30,0.14) 0%, transparent 55%),
    linear-gradient(165deg, var(--card-elev) 0%, var(--card) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(200,90,30,0.06) inset;
}
.bid-summary-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange-hover), var(--orange) 40%, var(--orange-dim));
}
/* Small pulsing orange dot signals "live" recalculation. Kept subtle. */
.bid-summary-hero .label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bid-summary-hero .label::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(200,90,30,0.7);
  animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0    rgba(200,90,30,0.55); }
  70%  { box-shadow: 0 0 0 8px  rgba(200,90,30,0);    }
  100% { box-shadow: 0 0 0 0    rgba(200,90,30,0);    }
}
.bid-summary-hero .amount {
  font-size: 46px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  margin-top: 6px;
  line-height: 1.05;
  transition: color 0.2s;
}
.bid-summary-hero .amount .cents { color: var(--text-muted); font-size: 24px; font-weight: 500; }
.bid-summary-hero .margin-row {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.bid-summary-hero .margin-row strong { color: var(--text); font-weight: 700; }

.summary-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 4px;
  font-size: 13.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.summary-line.muted { color: var(--text-muted); font-size: 12.5px; }
.summary-line.divider { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 10px; }

.internal-block {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: transparent;
}
.internal-block .internal-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 8px;
}

/* Real-margin warning banner */
#real-margin-warning {
  background: rgba(224, 168, 0, 0.08);
  color: var(--warning);
  border-left: 3px solid var(--warning);
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 8px;
}

/* ---------- Advisories ---------- */
.advisory {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
  border-left: 3px solid;
}
.advisory.error   { background: rgba(224, 112, 112, 0.08); color: var(--error);   border-color: var(--error); }
.advisory.warning { background: rgba(224, 168, 0, 0.08);   color: var(--warning); border-color: var(--warning); }
.advisory.info    { background: rgba(120, 160, 220, 0.08); color: var(--info);    border-color: var(--info); }

/* ---------- Status pills ---------- */
.status-pill {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.status-draft    { background: var(--hover);              color: var(--text-muted); }
.status-sent     { background: rgba(90,139,216,0.15);      color: var(--info); }
.status-accepted { background: rgba(124,179,66,0.15);      color: var(--success); }
.status-rejected { background: rgba(224,112,112,0.15);     color: var(--error); }

/* ---------- Tables (mirror rows, grid rows, etc.) ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 600;
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(5,6,8,0.75);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 560px;
  max-width: 780px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2);
}
.bid-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.bid-row:last-child { border-bottom: 0; }
.bid-row:hover { background: var(--hover); }
.bid-row-main { min-width: 0; flex: 1; }
/* Legacy formula reference — a dim, italicized cross-check to help estimators
   compare against the old Glass Experts spreadsheet. Deliberately subdued so
   it never gets mistaken for the real customer total. */
.legacy-ref-line {
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px dashed var(--border);
  font-style: italic;
  color: var(--text-dim) !important;
  font-size: 11.5px !important;
}
.legacy-ref-line .mono { color: var(--text-dim); }
.legacy-ref-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange-fade);
  color: var(--orange);
  border: 1px solid var(--orange-dim);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
  margin-left: 4px;
  vertical-align: -1px;
  transition: background 0.12s, color 0.12s;
}
.legacy-ref-help:hover {
  background: var(--orange);
  color: white;
  text-decoration: none;
}

/* Link-styled button — used for "Override thickness per panel" and similar
   subtle actions inside a field. Reads as a hyperlink, not a chunky button. */
.link-btn {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--orange);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(200,90,30,0.35);
  text-underline-offset: 3px;
  letter-spacing: 0.2px;
}
.link-btn:hover { color: var(--orange-hover); text-decoration-color: var(--orange); }

/* Per-panel thickness override table (predefined layouts only). Compact so it
   doesn't crowd the Glass row. One line per panel with a small thickness select. */
.per-panel-thickness {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--card-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pptt-header {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.pptt-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.pptt-row + .pptt-row { border-top: 1px solid var(--border); }
.pptt-name { font-size: 13px; color: var(--text); font-weight: 500; }
.pptt-select { padding: 5px 8px; font-size: 12.5px; }

/* Glass add-on chip grid — like the option-toggles but denser. Multiple addons
   can be checked at once; the estimator gets full control. */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.addon-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  transition: border-color 0.12s, background 0.12s;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.addon-chip:hover { border-color: var(--border-strong); }
.addon-chip input[type=checkbox] {
  width: auto;
  margin: 0;
  accent-color: var(--orange);
  flex-shrink: 0;
}
.addon-chip:has(input:checked) {
  border-color: var(--orange-dim);
  background: var(--orange-fade);
}
.addon-chip:has(input:checked) span { color: var(--orange); font-weight: 600; }

.bid-row-name { font-weight: 600; font-size: 14px; color: var(--text); }
.bid-row-est {
  display: inline-block;
  padding: 2px 8px;
  background: var(--orange-fade);
  color: var(--orange);
  border: 1px solid var(--orange-dim);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-right: 6px;
  vertical-align: 1px;
}
.bid-row-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 12px; color: var(--text-muted); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.bid-row-date {
  font-size: 11.5px; color: var(--text-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

/* ---------- Toast ---------- */
.toast {
  /* Sits above the "? Ask" button (bottom 18px) and never intercepts clicks —
     at opacity 0 it was an invisible box swallowing taps on that button. */
  position: fixed; bottom: 76px; right: 24px;
  pointer-events: none;
  background: var(--card-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 200;
  box-shadow: var(--shadow-2);
}
.toast.show { opacity: 1; }

/* ---------- Utility ---------- */
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Phone-width pass (≤ 700px). The field guys bid from their phones — this
   collapses multi-column rows, shrinks the layout cards, and keeps the
   totals reachable. Desktop rules above are untouched.
   ===================================================================== */
@media (max-width: 700px) {
  main { padding: 12px 12px 96px; gap: 14px; }
  .card { padding: 14px 12px; }
  .card-toolbar { flex-wrap: wrap; gap: 6px; }
  .card-toolbar .action-btn { flex: 1 1 auto; padding: 10px 8px; font-size: 12.5px; }
  .card h2 { font-size: 18px; }

  /* Multi-column input rows -> two columns (or one for the 4-up rows) */
  .row-3, .row-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .row-4 > div:nth-child(3):last-child { grid-column: 1 / -1; }

  /* Product-type + customer-type pills wrap instead of overflowing */
  .pill-row { flex-wrap: wrap; }
  .pill-row > button { flex: 1 1 calc(33.33% - 6px); min-width: 0; text-align: center; }

  /* Layout cards: three per row, tighter */
  .layout-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .layout-card { padding: 8px 6px 6px; }
  .layout-card-name { font-size: 10.5px; }

  /* Dimension reference figure stacks under the inputs */
  .dim-shell { grid-template-columns: 1fr; }
  .dim-reference-figure { min-height: 110px; }

  /* Optional-section chips: full-width rows are easier to tap */
  .opt-sections { gap: 6px; }
  .opt-section { flex: 1 1 100%; }
  .opt-section > summary { padding: 11px 12px; }

  /* Hardware rows: label above, select + qty on one line */
  .hw-row { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; }
  .hw-row .hw-label { grid-column: 1 / -1; margin-bottom: -2px; }
  .hw-row .hw-qty { padding: 10px 4px; }

  /* Bigger tap targets everywhere */
  input, select, textarea { font-size: 16px; }   /* also stops iOS zoom-on-focus */
  .toggle-row { padding: 12px; }

  /* Summary sidebar becomes a normal stacked card under the editor */
  .bid-summary { position: static; }
  .items-footer-header { flex-wrap: wrap; gap: 8px; }
  .sidebar-actions { flex-wrap: wrap; }
  .sidebar-actions .action-btn { flex: 1 1 auto; }
}

/* =====================================================================
   Dictate-a-bid
   ===================================================================== */
.voice-btn { border-color: var(--orange-dim); }
.voice-btn:hover { border-color: var(--orange); color: var(--text); }
.voice-modal { max-width: 640px; }
.voice-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.voice-hint em { color: var(--text); font-style: normal; }
.voice-mic-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.voice-mic {
  all: unset;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--card-elev);
  color: var(--text);
  font-weight: 600; font-size: 14px;
  transition: border-color 0.12s, background 0.12s;
}
.voice-mic:hover { border-color: var(--orange); }
.voice-mic-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-dim);
  box-shadow: 0 0 0 0 rgba(200,90,30,0);
}
.voice-mic-on { border-color: var(--orange); background: var(--orange-fade); }
.voice-mic-on .voice-mic-dot { background: var(--orange); animation: voice-pulse 1.2s ease-out infinite; }
@keyframes voice-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,90,30,0.55); }
  100% { box-shadow: 0 0 0 12px rgba(200,90,30,0); }
}
.voice-unsupported { font-size: 12.5px; color: var(--warning); }
#voice-transcript {
  width: 100%; resize: vertical; min-height: 110px;
  font-size: 15px; line-height: 1.5;
  padding: 12px; margin-bottom: 12px;
}
.voice-newitem-row { margin-bottom: 12px; }
.voice-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.voice-status { font-size: 12.5px; color: var(--text-muted); }

/* Review banner + field highlight after a dictated bid lands in the form */
.voice-review {
  border: 1px solid var(--orange);
  background: var(--orange-fade);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.voice-review-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.voice-review ul { margin: 8px 0 0; padding-left: 4px; list-style: none; color: var(--text-muted); }
.voice-review li { padding: 2px 0; }
.voice-review li.voice-q { color: var(--warning); }
.voice-filled { box-shadow: inset 0 0 0 2px var(--orange) !important; transition: box-shadow 0.6s; }
.layout-card.voice-filled { box-shadow: none !important; }

@media (max-width: 700px) {
  .modal { min-width: 0; width: calc(100vw - 24px); padding: 16px 14px; max-height: 88vh; }
  .voice-mic { width: 100%; justify-content: center; padding: 14px; }
}

/* =====================================================================
   Legibility overrides (Sep 2026). Inputs on their own surface with a
   border that clears 3:1, an unmistakable focus ring, readable placeholders.
   Appended last so they win over the older form rules above.
   ===================================================================== */
input[type=text], input[type=number], input[type=password], input[type=email],
select, textarea {
  background: var(--input);
  border: 1px solid var(--input-border);
  color: var(--text);
}
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, input[type=email]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-fade);
}
input[readonly] { background: var(--card-elev); color: var(--text-muted); border-style: dashed; }
::placeholder { color: var(--text-dim); opacity: 1; }
label { color: var(--text-muted); }
.data-table tbody input[type=text], .data-table tbody input[type=number] {
  background: var(--input); border: 1px solid var(--input-border);
}
.card { border: 1px solid var(--border); }
.toggle-row { background: var(--input); border-color: var(--input-border); }
.addon-chip { border-color: var(--input-border); }
.hw-row select { border-color: var(--input-border); }

/* Theme toggle in the top bar */
.theme-toggle {
  all: unset;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-right: 4px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--hover); }
.theme-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Light-mode touch-ups for things that assumed a dark ground */
html[data-theme="light"] .topnav { box-shadow: 0 1px 0 rgba(200,90,30,0.35), 0 2px 10px rgba(20,23,27,0.08); }
html[data-theme="light"] .topnav-brand img { box-shadow: 0 0 0 1px rgba(200,90,30,0.35), 0 0 0 3px rgba(200,90,30,0.08); }
html[data-theme="light"] .modal-backdrop { background: rgba(20,23,27,0.45); }
html[data-theme="light"] .action-btn.primary { color: #fff; }
html[data-theme="light"] .layout-card-diagram,
html[data-theme="light"] .dim-reference-figure { background: var(--card-elev); }

/* =====================================================================
   Ask about this bid (read-only helper)
   ===================================================================== */
.ask-fab {
  all: unset; cursor: pointer;
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  padding: 12px 16px; border-radius: 999px;
  background: var(--orange); color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.ask-fab:hover { background: var(--orange-hover); }
.ask-panel {
  position: fixed; right: 18px; bottom: 70px; z-index: 91;
  width: min(420px, calc(100vw - 24px)); max-height: min(70vh, 640px);
  display: none; flex-direction: column;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.ask-panel.open { display: flex; }
.ask-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ask-sub { font-size: 11.5px; color: var(--text-muted); }
.ask-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.ask-msg { padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; max-width: 92%; }
.ask-user { align-self: flex-end; background: var(--orange-fade); border: 1px solid var(--orange-dim); }
.ask-assistant { align-self: flex-start; background: var(--card-elev); border: 1px solid var(--border); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.ask-chip { all: unset; cursor: pointer; font-size: 11.5px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); }
.ask-chip:hover { border-color: var(--orange); color: var(--text); }
.ask-form { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.ask-form input { flex: 1; margin: 0; }
@media (max-width: 700px) { .ask-panel { right: 12px; left: 12px; width: auto; bottom: 66px; } }
.ask-report { display: flex; align-items: center; gap: 10px; padding: 0 14px 12px; font-size: 12px; }
/* Explanatory notes under summary lines (labor-not-in-price, $700 minimum). */
.summary-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; margin: -4px 0 10px; }
.summary-note strong { color: var(--text-muted); }