/* Glass Doctor brand (MDG Brand Guidelines).
   Light blue is primary. Navy is accent only: thin borders, small chips
   and toggles, focus rings, shadows, and the gauge gradient. */
:root {
  --gd-blue: #06038d;       /* Accent navy */
  --gd-light-blue: #60afe6; /* Primary light blue - Pantone 292C */
  --gd-light-press: #4a9ad4; /* Pressed primary; still AA with heading text */
  --gd-red: #e4002b;        /* Supporting Red - Pantone 185C */
  --gd-red-dark: #b80023;
  --gd-ink: #2c2c2c;        /* Body text */
  --gd-heading: #1f2a37;    /* Headings */
  --gray: #5c5c6b;
  --bg: #f4f7fb;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Gotham", "Gotham A", "Gotham B", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--gd-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4 { color: var(--gd-heading); }
header {
  background: var(--gd-light-blue);
  padding: 30px 20px 26px;
  text-align: center;
}
.logo-panel {
  display: inline-block;
  /* Reversed logo is white. A dark plate keeps that wordmark at AA on the light-blue header. */
  background: #2c2c2c;
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  padding: 18px 30px;
  box-shadow: 0 3px 10px rgba(6, 3, 141, 0.22);
}
.logo-panel img { display: block; width: min(380px, 76vw); height: auto; }
header .tagline {
  margin-top: 14px;
  color: var(--gd-heading);
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: 0.3px;
}
main {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 20px 48px;
}
.back {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--gd-heading);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
}
.back:hover { text-decoration: underline; }

/* cards */
.cards { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .cards.three { grid-template-columns: 1fr 1fr 1fr; }
}
.card {
  background: #fff;
  border-radius: 10px;
  border-top: 5px solid var(--gd-light-blue);
  padding: 26px 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.card .icon { font-size: 2.4rem; margin-bottom: 12px; }
.card-icon {
  width: 72px;
  height: 72px;
  object-fit: contain; /* circular PNGs stay circular — no squashing, no cropping */
  display: block;
  margin: 0 auto 12px;
}
.title-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  vertical-align: -7px;
}
.btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: -4px;
  margin-right: 6px;
}
.card h2 { font-size: 1.12rem; font-weight: 900; margin-bottom: 8px; color: var(--gd-heading); }
.card p { font-size: 0.9rem; color: var(--gray); margin-bottom: 20px; flex: 1; }

/* buttons */
.btn {
  display: block;
  background: var(--gd-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.btn:hover, .btn:active { background: var(--gd-red-dark); }
.btn.disabled { background: #9a9aa5; color: var(--gd-ink); cursor: not-allowed; }
.btn.submit { width: 100%; margin-top: 10px; font-family: inherit; }

/* panels + forms */
.panel {
  background: #fff;
  border-radius: 10px;
  border-top: 5px solid var(--gd-blue);
  padding: 30px 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  max-width: 640px;
  margin: 0 auto;
}
.panel.narrow { max-width: 420px; }
.panel.center { text-align: center; }
.panel-title { font-size: 1.3rem; font-weight: 900; margin-bottom: 6px; }
.panel-sub { color: var(--gray); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }
.panel-sub a { color: var(--gd-red); text-decoration: underline; text-underline-offset: 0.15em; }
.form label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 14px;
}
.form input, .form select, .form textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--gd-ink);
  border: 1.5px solid #c9d6e8;
  border-radius: 8px;
  background: #fbfdff;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--gd-light-blue);
  border-color: var(--gd-light-blue);
}
.row { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 540px) { .row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }
.error { color: var(--gd-red); font-weight: 700; font-size: 0.9rem; margin-bottom: 14px; }
.optional { font-weight: 400; color: var(--gray); font-size: 0.78rem; }

/* deal of the month banner */
.promo-banner {
  max-width: 640px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--gd-red) 0%, #b80023 100%);
  color: #fff;
  border-radius: 10px;
  padding: 18px 24px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(228, 0, 43, 0.35);
  border-bottom: 4px solid var(--gd-blue);
}
.promo-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.promo-offer {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.promo-fine {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
}

/* customer portal steps */
.steps-title { font-size: 1rem; font-weight: 900; color: var(--gd-heading); margin: 6px 0 10px; }
.steps { margin: 0 0 22px 22px; color: var(--gray); font-size: 0.95rem; }
.steps li { margin-bottom: 10px; line-height: 1.5; }
.steps strong { color: var(--gd-heading); }
.steps-help { margin-top: 18px; font-size: 0.88rem; color: var(--gray); line-height: 1.5; }
.steps-help a { color: var(--gd-red); text-decoration: underline; text-underline-offset: 0.15em; }
/* Public home: links in body text are underlined, not identified by color alone. */
.public-home a:not(.btn) { text-decoration: underline; text-underline-offset: 0.15em; }

/* photo upload field */
.photo-field {
  border: 1.5px dashed #c9d6e8;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fbfdff;
}
.photo-title { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 10px; }
.photo-btn {
  display: inline-block;
  background: var(--gd-light-blue);
  color: var(--gd-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 8px;
  cursor: pointer;
}
.photo-btn:active { background: var(--gd-light-press); color: var(--gd-heading); }
.photo-count { margin-left: 12px; font-size: 0.85rem; color: var(--gray); }
.photo-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.photo-thumb { position: relative; }
.photo-thumb img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid #c9d6e8;
  display: block;
}
.photo-x {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--gd-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* employee hub */
.hub-note {
  background: #fff;
  border-left: 5px solid var(--gd-light-blue);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--gray);
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.logout { color: var(--gd-red); font-weight: 700; text-decoration: none; font-size: 0.85rem; white-space: nowrap; }
.group-title { font-size: 1.15rem; font-weight: 900; margin: 26px 0 14px; }
.section-blurb { color: var(--gray); font-size: 0.92rem; margin-bottom: 20px; }

/* presentation thumbnail grid */
.tile-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 620px) { .tile-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 900px) { .tile-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  text-decoration: none;
  color: var(--gd-heading);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, box-shadow 0.1s;
  text-align: center;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 5px 14px rgba(0,0,0,0.16); }
.thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  background: #e8eef7;
  display: block;
}
canvas.thumb { object-fit: contain; background: #fff; border: 1px solid #e2e9f3; }
.icon-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.tile-name {
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 10px;
  text-transform: capitalize;
  line-height: 1.3;
}
.tile-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.empty { color: var(--gray); font-size: 0.95rem; line-height: 1.6; }
.empty code { background: #e8eef7; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; }

/* lightbox slideshow */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 6, 60, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
#lightbox[hidden] { display: none; }
#lb-stage {
  max-width: 92vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lb-stage img, #lb-stage video, #lb-stage canvas {
  max-width: 92vw;
  max-height: 82vh;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
#lb-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.9rem;
  cursor: pointer;
  padding: 8px 12px;
  z-index: 2;
}
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 14px 16px 20px;
  border-radius: 10px;
  z-index: 2;
}
.lb-arrow:hover { background: rgba(255,255,255,0.25); }
#lb-prev { left: 12px; }
#lb-next { right: 12px; }
#lb-caption {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  padding: 0 20px;
}

/* quoting tool */
.quote-panel { max-width: 520px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.btn.secondary { background: var(--gd-light-blue); color: var(--gd-heading); }
.btn.secondary:hover, .btn.secondary:active { background: var(--gd-light-press); color: var(--gd-heading); }
.btn.ghost {
  background: none;
  color: var(--gray);
  font-size: 0.85rem;
  margin-top: 12px;
  padding: 8px;
  width: 100%;
}
.btn.ghost:hover { background: #eef2f9; color: var(--gd-heading); }
.quote-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e8eef7;
  transition: opacity 0.15s;
}
.quote-row.off .q-label,
.quote-row.off .q-input { opacity: 0.35; }
.quote-row.off .q-input input { text-decoration: line-through; }
.q-label { flex: 1; font-weight: 700; font-size: 1rem; }
.q-sub { font-weight: 400; color: var(--gray); font-size: 0.85rem; }
.q-input {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.q-dollar { color: var(--gray); }
.q-input input {
  width: 110px;
  padding: 10px 12px;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--gd-ink);
  text-align: right;
  border: 1.5px solid #c9d6e8;
  border-radius: 8px;
  background: #fbfdff;
}
.q-input input:focus { outline: 2px solid var(--gd-light-blue); border-color: var(--gd-light-blue); }
.q-input.computed { font-size: 1.05rem; color: var(--gd-ink); padding-right: 12px; }
.quote-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--gd-heading);
  padding: 20px 2px 8px;
}
.quote-total span:last-child { color: #0f7d4a; }

/* price sheet */
.sheet-panel { max-width: 100%; padding: 20px; }
.sheet-search {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--gd-ink);
  border: 1.5px solid #c9d6e8;
  border-radius: 8px;
  background: #fbfdff;
  margin-bottom: 14px;
}
.sheet-search:focus { outline: 2px solid var(--gd-light-blue); border-color: var(--gd-light-blue); }
#sheet-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sheet-tab {
  border: 1.5px solid #c9d6e8;
  background: #fbfdff;
  color: var(--gd-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.sheet-tab.active { background: var(--gd-blue); color: #fff; border-color: var(--gd-blue); }
.sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.sheet { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
table.sheet th {
  background: var(--gd-light-blue);
  color: var(--gd-heading);
  text-align: left;
  padding: 10px 12px;
  position: sticky;
  top: 0;
  white-space: nowrap;
}
table.sheet td { padding: 9px 12px; border-bottom: 1px solid #e8eef7; }
table.sheet tbody tr:nth-child(even) { background: #f4f8fd; }
table.sheet tbody tr:hover { background: #e7f1fb; }

/* tint estimator */
.est-table th, .est-table td { vertical-align: middle; }
.est-table .switch { width: 44px; height: 26px; }
.est-table .slider:before { height: 20px; width: 20px; }
.est-table .switch input:checked + .slider:before { transform: translateX(18px); }
.est-input {
  width: 68px; padding: 8px; font-size: 0.95rem; font-family: inherit; font-weight: 700;
  color: var(--gd-ink); text-align: right;
  border: 1.5px solid #c9d6e8; border-radius: 6px; background: #fbfdff;
}
.est-input:focus { outline: 2px solid var(--gd-light-blue); border-color: var(--gd-light-blue); }
.est-table tr.row-off { opacity: 0.4; }
.est-table tr.row-off .est-input { text-decoration: line-through; }
.internal-col { background: #f7f9fd; }
.est-table th.internal-col { background: var(--gd-light-blue); color: var(--gd-heading); }
.est-table th.internal-col::after { content: " •"; color: var(--gd-heading); }

/* tint calculator */
.tint-panel { max-width: 100%; margin-bottom: 20px; }
.tint-row { margin-bottom: 20px; }
.tint-label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; }
.tint-row select {
  display: block; width: 100%; margin-top: 5px; padding: 12px;
  font-size: 1rem; font-family: inherit; color: var(--gd-ink);
  border: 1.5px solid #c9d6e8; border-radius: 8px; background: #fbfdff;
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  border: 1.5px solid #c9d6e8; background: #fbfdff; color: var(--gd-ink);
  font-family: inherit; font-weight: 700; font-size: 0.82rem;
  padding: 9px 14px; border-radius: 20px; cursor: pointer;
}
.chip:hover { border-color: var(--gd-light-blue); }
.chip.active { background: var(--gd-blue); color: #fff; border-color: var(--gd-blue); }
.tint-input-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tint-input-wrap input {
  width: 130px; padding: 12px; font-size: 1.15rem; font-family: inherit; font-weight: 700;
  color: var(--gd-ink); text-align: right;
  border: 1.5px solid #c9d6e8; border-radius: 8px; background: #fbfdff;
}
.tint-input-wrap input:focus { outline: 2px solid var(--gd-light-blue); border-color: var(--gd-light-blue); }
.tint-pct { font-weight: 700; color: var(--gray); font-size: 1.05rem; }
.tint-hint { font-size: 0.78rem; color: var(--gray); flex: 1; min-width: 180px; }
.tint-note { font-size: 0.86rem; color: var(--gray); line-height: 1.55; margin-top: 10px; }
.tint-note a { color: var(--gd-red); }
.tint-note-inline { font-size: 0.82rem; color: var(--gray); font-weight: 400; }

.tint-best { border-top: 5px solid var(--gd-light-blue); }
.tint-alert { border-top: 5px solid var(--gd-red); }
.tint-eyebrow {
  display: block; font-size: 0.7rem; font-weight: 900; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gd-heading); margin-bottom: 6px;
}
.tint-headline { font-size: 1.55rem; font-weight: 900; color: var(--gd-heading); margin-bottom: 4px; }
.tint-big { font-size: 1.1rem; color: var(--gd-heading); }
.tint-big strong { font-size: 1.4rem; color: var(--gd-red); }
.tint-delta { font-size: 0.9rem; color: var(--gray); font-weight: 400; }
.tint-legal-line { margin-top: 12px; font-weight: 700; font-size: 0.95rem; }
.tint-warn {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: #fff2f4; border-left: 4px solid var(--gd-red);
  color: var(--gd-ink); font-size: 0.9rem; line-height: 1.5;
}
.tint-meter { border-top: 1px solid #e8eef7; padding-top: 12px; }
.tint-strip-note {
  background: #eef4fc; border-left: 4px solid var(--gd-light-blue);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 20px;
  font-size: 0.88rem; line-height: 1.55; color: var(--gd-ink);
}
.tint-strip-note[hidden] { display: none; }
.legal-ok { color: #0a7d34; font-weight: 700; font-size: 0.82rem; }
.legal-no { color: var(--gd-red); font-weight: 700; font-size: 0.82rem; }
.tint-tag {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  background: var(--gd-light-blue); color: var(--gd-heading); padding: 2px 6px; border-radius: 4px;
}
table.sheet tr.row-best { background: #e7f1fb !important; }
table.sheet tr.row-best td { font-weight: 700; }
.law-table td { vertical-align: top; line-height: 1.5; }
.law-table td:first-child { white-space: nowrap; font-weight: 700; }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  inset: 0;
  background: #c3cddd;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.15s;
}
.slider:before {
  content: "";
  position: absolute;
  height: 24px;
  width: 24px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.switch input:checked + .slider { background: var(--gd-blue); }
.switch input:checked + .slider:before { transform: translateX(22px); }

footer {
  background: #2c2c2c;
  color: #fff;
  text-align: center;
  padding: 16px;
  font-size: 0.8rem;
}

/* ---- onsite roster (Client Tools) ---- */
.roster { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.roster th { text-align: left; padding: 8px 6px; border-bottom: 2px solid rgba(6,3,141,.15); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.roster td { padding: 10px 6px; border-bottom: 1px solid rgba(6,3,141,.08); vertical-align: top; }
.roster .muted { color: #6b7280; font-size: 12.5px; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.danger { background: #e4002b; border-color: #e4002b; color: #fff; }
.btn.active { outline: 2px solid var(--gd-blue, #06038d); outline-offset: 1px; }
.day-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
/* Author rules that set `display` beat the browser's own [hidden] rule, so a
   .btn or a flex container stays visible no matter what the JS sets. Everything
   in here relies on hidden actually hiding - so make it win. */
[hidden] { display: none !important; }

.waiver-ok   { color: #15803d; font-weight: 600; white-space: nowrap; }
.waiver-wait { color: #b45309; font-weight: 600; white-space: nowrap; }
.waiver-none { color: #6b7280; }
/* Stacked, not inline: a select plus two buttons across a table cell pushed the
   card sideways on every screen narrower than a desktop. */
.confirm-box { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 160px; }
.confirm-box .btn { width: 100%; }
.roster-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.roster tr.done td { background: #f0fdf4; }
.roster tr.done .name-cell strong { text-decoration: line-through; opacity: .75; }
.done-tag { color: #15803d; font-weight: 600; white-space: nowrap; }

@media print {
  /* The technician's sheet: just the list, big enough to read on a clipboard. */
  body * { visibility: hidden; }
  .roster-print, .roster-print * { visibility: visible; }
  .roster-print { position: absolute; left: 0; top: 0; width: 100%; }
  .roster-print .no-print, .no-print { display: none !important; }
  .roster { font-size: 12pt; }
  .roster th, .roster td { padding: 6px 4px; }
  .roster tr { page-break-inside: avoid; }
  .print-sign { border-bottom: 1px solid #000; display: inline-block; min-width: 130px; }
}
.confirm-box select { padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(6,3,141,.25); font-size: 12px; }
.inline-msg { margin: 10px 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.inline-msg.good { background: #e6f7f2; border-left: 3px solid #1D9E75; color: #0a6b52; }
.inline-msg.bad { background: #fdeaee; border-left: 3px solid #e4002b; color: #8d0019; }

/* ============================================================
   ONSITE ROSTER — redesigned 2026-09-15
   Deliberately off-brand: Glass Doctor blue/red are overused across the
   portal and this is an internal working screen used outdoors on a tablet.
   Slate neutrals carry the structure; teal is the only accent and is
   reserved for "this is handled". Red appears ONLY on a destructive
   confirmation, never on an ordinary button.
   ============================================================ */
/* Repointed 2026-09-16 onto the house brand — the roster now matches the Tint
   Estimator. Teal is kept for "handled" and green for positive outcomes, per the
   glassdoctormidvale-web-design standard: red only ever means danger. */
:root {
  --r-ink: #2c2c2c;          /* dark neutral */
  --r-ink-soft: #5c5c6b;
  --r-ink-faint: #5f7386;     /* muted, still AA on white and the roster canvas */
  --r-line: #dde4ef;
  --r-line-soft: #e8eef7;
  --r-surface: #ffffff;
  --r-canvas: #f4f8fd;
  --r-teal: #0f7d6b;
  --r-teal-soft: #e2f2ef;
  --r-green: #0f7d4a;
  --r-amber-soft: #fdf2dc;
  --r-amber-ink: #8a5d09;
  --r-danger: #e4002b;
}

.roster-shell { color: var(--r-ink); }
.roster-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.roster-title { font-size: 1.45rem; font-weight: 900; letter-spacing: -0.01em; margin: 0; color: var(--gd-heading); }
.roster-sub { color: var(--r-ink-soft); font-size: 0.9rem; margin: 4px 0 0; }
.roster-tools { display: flex; gap: 8px; }

/* buttons: neutral by default, teal only for the affirmative action */
.rbtn {
  display: inline-block; font-family: inherit; font-size: 0.85rem; font-weight: 700;
  padding: 9px 14px; border-radius: 8px; cursor: pointer; text-decoration: none;
  background: var(--r-surface); color: var(--r-ink);
  border: 1px solid var(--r-line); transition: background .12s, border-color .12s;
}
.rbtn:hover { background: var(--r-canvas); border-color: #9fb4d0; }
.rbtn-go { background: var(--gd-light-blue); border-color: var(--gd-light-blue); color: var(--gd-heading); }
.rbtn-go:hover { background: var(--gd-light-press); border-color: var(--gd-light-press); color: var(--gd-heading); }
.rbtn-quiet { color: var(--r-ink-soft); }
.rbtn-danger { background: var(--r-danger); border-color: var(--r-danger); color: #fff; }
.rbtn-danger:hover { background: #8f2725; border-color: #8f2725; }

/* day tabs */
.rday-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.rtab {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 0.85rem; font-weight: 700; padding: 9px 14px; border-radius: 999px;
  background: var(--r-surface); color: var(--r-ink-soft); border: 1px solid var(--r-line);
}
.rtab:hover { border-color: var(--gd-light-blue); color: var(--gd-heading); }
.rtab.is-on { background: var(--gd-light-blue); border-color: var(--gd-light-blue); color: var(--gd-heading); }
.rtab-count { font-weight: 400; font-variant-numeric: tabular-nums; }

/* day group */
.rday { margin-bottom: 30px; }
.rday-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--r-line-soft);
}
.rday-title {
  font-size: 0.78rem; font-weight: 900; margin: 0; color: var(--gd-heading);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.rday-sub { font-size: 0.82rem; color: var(--r-ink-soft); margin: 5px 0 0; }
.rday-gauge {
  width: 120px; height: 6px; border-radius: 999px; background: var(--r-line);
  overflow: hidden; flex-shrink: 0;
}
.rday-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gd-light-blue) 0%, var(--gd-blue) 100%);
}

/* vehicle cards */
.rcards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.rcard {
  background: var(--r-surface); border: 1px solid var(--r-line); border-radius: 12px;
  padding: 18px 20px; transition: border-color .12s, box-shadow .12s;
}
.rcard:hover { border-color: #9fb4d0; box-shadow: 0 2px 10px rgba(6,3,141,0.06); }
.rcard.is-done { background: var(--r-canvas); }
.rcard.is-done .rcard-who h3 { text-decoration: line-through; color: var(--r-ink-soft); }
.rcard-main { display: flex; justify-content: space-between; gap: 14px; }
.rcard-who { min-width: 0; }
.rcard-who h3 { font-size: 1.08rem; font-weight: 900; margin: 0 0 2px; color: var(--gd-heading); }
.rcard-phone {
  font-size: 0.85rem; color: var(--r-teal); text-decoration: none; font-weight: 700;
}
.rcard-vehicle { font-size: 0.9rem; color: var(--r-ink-soft); margin: 6px 0 0; }
.rcard-plate {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem; letter-spacing: 0.06em; color: var(--r-ink-faint);
  margin: 3px 0 0; text-transform: uppercase;
}
.rcard-meta { text-align: right; flex-shrink: 0; }
.rcard-chips { font-size: 0.85rem; color: var(--r-ink-soft); margin: 9px 0 0; }
.rcard-chips strong { font-size: 1.15rem; color: var(--gd-heading); font-weight: 900; }
.rcard-plan { font-size: 0.78rem; color: var(--r-ink-faint); margin: 3px 0 0; }
.rcard-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--r-line-soft); }
.roster-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* status pills */
.pill {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pill-ok { background: var(--r-teal-soft); color: #0e6f60; }
.pill-wait { background: var(--r-amber-soft); color: var(--r-amber-ink); }
.pill-none { background: var(--r-canvas); color: var(--r-ink-faint); border: 1px solid var(--r-line); }
.pill-done { background: #e4f3ea; color: var(--r-green); }

/* removal confirm */
.confirm-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.confirm-label { font-size: 0.82rem; font-weight: 700; color: var(--r-ink-soft); }
.confirm-box .reason {
  font-family: inherit; font-size: 0.85rem; padding: 8px 10px;
  border: 1px solid var(--r-line); border-radius: 8px; background: var(--r-surface);
  color: var(--r-ink);
}
.rempty { color: var(--r-ink-faint); font-size: 0.95rem; padding: 26px 0; text-align: center; }
.rnote { font-size: 0.82rem; color: var(--r-ink-faint); margin-top: 6px; }

/* screen vs paper: cards are for fingers, the table is for the clipboard */
.print-only { display: none; }
@media print {
  .no-print { display: none !important; }
  .rcards { display: none; }
  .print-only { display: table; width: 100%; border-collapse: collapse; font-size: 11pt; }
  .print-only th, .print-only td {
    border: 1px solid #999; padding: 6px 8px; text-align: left; vertical-align: top;
  }
  .print-only th { background: #eee; font-size: 9pt; text-transform: uppercase; }
  .tickbox { width: 40px; }
  .rday { page-break-inside: avoid; margin-bottom: 18px; }
  .rday-gauge { display: none; }
  .roster-shell { color: #000; }
}

/* follow-up table, same language as the roster cards */
.rtable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.rtable th {
  text-align: left; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--r-ink-faint); font-weight: 700; padding: 8px 12px;
  border-bottom: 1px solid var(--r-line);
}
.rtable td { padding: 12px; border-bottom: 1px solid var(--r-line); color: var(--r-ink); vertical-align: middle; }
.rtable tr:last-child td { border-bottom: none; }
.rtable .muted { color: var(--r-ink-faint); font-size: 0.8rem; }

/* ============================================================
   TINT ESTIMATOR — customer / vehicle / film / notes blocks
   The inputs here previously inherited nothing (the .form input rules
   need a .form ancestor, which these panels never had), so they rendered
   as raw browser controls next to a styled table. These are dedicated.
   ============================================================ */
.est-block {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #dde4ef;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.est-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.est-head h3 {
  font-size: 0.78rem; font-weight: 900; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gd-heading); margin: 0;
}
.est-step {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray);
  background: #f1f5fb; padding: 3px 9px; border-radius: 999px;
}
.est-divider { height: 1px; background: #e8eef7; margin: 22px 0 18px; }

.est-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .est-grid { grid-template-columns: 1fr 1fr; }
  .est-grid.tight { grid-template-columns: repeat(4, 1fr); }
  .est-field.wide { grid-column: span 1; }
}
@media (min-width: 760px) {
  .est-grid { grid-template-columns: 1fr 1fr 1fr; }
  .est-field.wide { grid-column: span 2; }
}

.est-field { display: block; }
.est-field > span {
  display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--gd-heading); margin-bottom: 6px;
}
.est-field > span em {
  font-style: normal; font-weight: 400; color: var(--gray);
  text-transform: none; letter-spacing: 0;
}
.est-field input,
.est-field select,
.est-field textarea {
  display: block; width: 100%;
  padding: 11px 12px;
  font-size: 1rem; font-family: inherit;
  color: var(--gd-ink);
  background: #fbfdff;
  border: 1.5px solid #c9d6e8;
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.est-field textarea { resize: vertical; line-height: 1.55; min-height: 96px; }
.est-field input::placeholder,
.est-field textarea::placeholder { color: #5c6b7a; }
.est-field input:hover,
.est-field select:hover,
.est-field textarea:hover { border-color: #9fb4d0; }
.est-field input:focus,
.est-field select:focus,
.est-field textarea:focus {
  outline: none;
  border-color: var(--gd-light-blue);
  box-shadow: 0 0 0 3px rgba(96, 175, 230, 0.28);
  background: #fff;
}
.plate-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.est-hint { font-size: 0.8rem; color: var(--gray); margin-top: 10px; }

.est-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid #e8eef7;
}
.est-btn {
  font-family: inherit; font-size: 0.92rem; font-weight: 700;
  padding: 12px 20px; border-radius: 8px; cursor: pointer;
  background: #fff; color: var(--gd-heading);
  border: 1.5px solid #c9d6e8;
  transition: background .12s, border-color .12s;
}
.est-btn:hover { background: #f4f8fd; border-color: #9fb4d0; }
.est-btn-go {
  background: var(--gd-light-blue); border-color: var(--gd-light-blue); color: var(--gd-heading);
}
.est-btn-go:hover { background: var(--gd-light-press); border-color: var(--gd-light-press); color: var(--gd-heading); }
.est-btn:disabled { opacity: .55; cursor: default; }
.est-status { font-size: 0.86rem; color: var(--gray); margin-top: 12px; line-height: 1.5; }
.est-status a { color: var(--gd-red); font-weight: 700; }

/* tint install mode — per-window before/after capture */
.ins-row { padding: 16px 0; border-bottom: 1px solid #e8eef7; }
.ins-row:last-child { border-bottom: none; padding-bottom: 0; }
.ins-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.ins-head h4 { font-size: 1rem; font-weight: 900; color: var(--gd-heading); margin: 0; }
.ins-spec { font-size: 0.8rem; color: var(--gray); margin: 4px 0 0; }
.ins-spec strong { color: var(--gd-heading); }
.ins-measured { text-align: right; flex-shrink: 0; }
.ins-measured > span:first-child {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 5px;
}
.ins-measured-wrap { display: inline-flex; align-items: center; gap: 5px; }
.ins-measured-wrap b { color: var(--gray); font-weight: 700; }
.ins-after-vlt {
  width: 78px; padding: 9px 10px; font-family: inherit; font-size: 1.05rem;
  font-weight: 700; text-align: right; color: var(--gd-ink);
  border: 1.5px solid #c9d6e8; border-radius: 8px; background: #fbfdff;
  transition: border-color .2s, box-shadow .2s;
}
.ins-after-vlt:focus {
  outline: none; border-color: var(--gd-light-blue);
  box-shadow: 0 0 0 3px rgba(96,175,230,.28); background: #fff;
}
.ins-after-vlt.is-saved { border-color: #0f7d6b; box-shadow: 0 0 0 3px rgba(15,125,107,.2); }

.ins-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ins-shot { display: flex; flex-direction: column; gap: 5px; }
.ins-shot-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gray);
}
.ins-drop { display: block; cursor: pointer; }
.ins-drop-inner {
  display: flex; align-items: center; justify-content: center;
  height: 132px; border-radius: 10px; overflow: hidden;
  background: #f4f8fd; border: 1.5px dashed #c9d6e8;
  transition: border-color .12s, background .12s;
}
.ins-drop:hover .ins-drop-inner { border-color: var(--gd-light-blue); background: #eef5fc; }
.ins-drop-inner img { width: 100%; height: 100%; object-fit: cover; }
.ins-drop-hint { font-size: 0.82rem; font-weight: 700; color: var(--r-ink-faint); }
.ins-shot.is-set .ins-drop-inner { border-style: solid; border-color: #bfe0d7; }
.ins-shot.is-busy .ins-drop-inner { opacity: .55; }
.ins-shot-state { font-size: 0.74rem; color: #0f7d6b; font-weight: 700; min-height: 14px; }
.saved-actions { display: flex; gap: 6px; white-space: nowrap; }

/* ---- Onsite roster: signups stranded on a date that no longer exists -------
   This is a money problem, not a cosmetic one: uncounted signups mean the
   booking form keeps selling spots that are already taken. Styled to be
   impossible to scroll past, and warm amber rather than alarm red because it
   is fixable in one click, not broken. */
.orphan-warn {
  margin-bottom: 20px; padding: 18px 20px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 176, 32, 0.16), rgba(255, 122, 24, 0.09));
  border: 1px solid rgba(214, 126, 0, 0.35);
  border-left: 5px solid #e08600;
  box-shadow: 0 4px 16px rgba(180, 105, 0, 0.10);
}
.orphan-warn h3 {
  margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; color: #8a4b00;
}
.orphan-warn > p {
  margin: 0 0 14px; font-size: 0.9rem; line-height: 1.55; color: #6b4200;
}
.orphan-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 12px 14px; margin-top: 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(214, 126, 0, 0.22);
}
.orphan-who { font-size: 0.92rem; color: var(--gd-ink); }
.orphan-names {
  display: block; margin-top: 3px;
  font-size: 0.8rem; color: var(--gray); font-weight: 400;
}
.orphan-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.orphan-to {
  padding: 8px 10px; border-radius: 8px; font-size: 0.85rem;
  border: 1px solid rgba(214, 126, 0, 0.35); background: #fff; color: var(--gd-ink);
}
.btn-move {
  background: linear-gradient(135deg, #0f7d4a, #0b6339) !important;
  color: #fff !important; border: none !important; font-weight: 700;
}
.btn-move:hover { filter: brightness(1.08); }
@media (max-width: 560px) {
  .orphan-row { flex-direction: column; align-items: stretch; }
  .orphan-act { justify-content: stretch; }
  .orphan-to, .btn-move { flex: 1; }
}

/* Success banner — the "all clear" counterpart to .tint-warn. Green, because
   totals and good news are green in this house; red means danger. */
.tint-ok {
  margin-bottom: 18px; padding: 12px 16px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(15, 125, 74, 0.14), rgba(15, 125, 74, 0.06));
  border-left: 4px solid #0f7d4a; color: #0b5433;
  font-size: 0.92rem; line-height: 1.5;
}
.docuseal-status { font-weight: 700; white-space: nowrap; }
.docuseal-status.attached { color: #0f7d4a; }
.docuseal-status.failed { color: var(--gd-red); }
.docuseal-status.skipped,
.docuseal-status.waiting,
.docuseal-status.ignored,
.docuseal-status.unrouted { color: var(--gray); font-weight: 600; }

/* ---- Onsite roster: mobile-first card rework (2026-09-23) -----------------
   Built after a real 15-car day: the long plan text was overlapping other
   fields on a phone, and there was no way to tell which cars had actually
   arrived, so the tech scrolled up and down hunting. */

/* Compact plan badge replacing the full "$75 Lifetime Rock Chip Repair
   Program" string, which simply does not fit a phone card. */
.rplan {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
}
.rplan-one  { background: rgba(96, 175, 230, 0.20); color: #0a4b7a; }
.rplan-life { background: linear-gradient(135deg, rgba(15,125,74,0.22), rgba(15,125,74,0.12)); color: #0b5433; }
.rpay { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--gray); }

/* A car that is physically in the lot. Blue, not green — green means finished. */
.rcard.is-here { border-left: 5px solid var(--gd-light-blue); background: rgba(96, 175, 230, 0.07); }
.here-tag {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 5px;
  background: var(--gd-light-blue); color: var(--gd-heading);
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em; vertical-align: middle;
}
.rbtn-here.is-on { background: var(--gd-light-blue); color: var(--gd-heading); }
.sub-here { color: #0a4b7a; }

/* Finished work: green, de-emphasised, and sorted to the bottom of its day. */
.rcard.is-done {
  border-left: 5px solid #0f7d4a;
  background: linear-gradient(135deg, rgba(15,125,74,0.12), rgba(15,125,74,0.04));
  opacity: 0.82;
}
.rcard.is-done .rcard-who h3 { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Tech note — the "customer said 2 chips, only 1 there" case. */
.rnote-shown {
  margin: 8px 12px 0; padding: 8px 10px; border-radius: 8px;
  background: rgba(255, 176, 32, 0.12); border-left: 3px solid #e08600;
  font-size: 0.84rem; line-height: 1.45; color: #6b4200;
}
.note-box { margin-top: 10px; }
.note-input {
  width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 0.9rem;
  border: 1px solid #cfd8e8; font-family: inherit; resize: vertical;
}
.note-actions { display: flex; gap: 8px; margin-top: 6px; }
.nobill {
  display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 5px;
  background: var(--gd-red); color: #fff; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.06em;
}

/* Collapsible day sections — 15 cards is a lot of thumb. */
details.rday > summary.rday-head {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.rday > summary.rday-head::-webkit-details-marker { display: none; }
details.rday > summary.rday-head::after {
  content: "▾"; font-size: 0.9rem; color: var(--gray);
  transition: transform 0.15s ease; flex: none;
}
details.rday:not([open]) > summary.rday-head::after { transform: rotate(-90deg); }
details.rday:not([open]) { padding-bottom: 4px; }

@media (max-width: 560px) {
  /* Stack the card instead of letting the meta column collide with the name. */
  .rcard-main { flex-direction: column; gap: 8px; }
  .rcard-meta { align-items: flex-start; text-align: left; flex-direction: row;
                flex-wrap: wrap; gap: 8px; align-items: center; }
  .rcard-meta .rcard-chips, .rcard-meta .rcard-plan { margin: 0; }
  .rpay { display: inline; margin-left: 6px; }
  .roster-actions { flex-wrap: wrap; }
  .roster-actions .rbtn { flex: 1 1 auto; min-width: 46%; }
  .rday-gauge { display: none; }
}

/* Finished event days — present but out of the way. Muted so the eye goes to
   today's work first; still fully interactive if the office needs to look back. */
.past-wrap > summary.rday-head { opacity: 0.75; }
.rday-past { opacity: 0.8; margin-top: 14px; }
.rday-past .rcard { background: rgba(0, 0, 0, 0.015); }

/* Public compliance pages (brand site + login). Light blue is primary;
   navy is accent only. Body copy is a dark neutral. */
.legal h1 { font-size: 1.45rem; font-weight: 900; margin-bottom: 8px; color: var(--gd-heading); }
.legal h2 { font-size: 1.12rem; font-weight: 900; margin: 22px 0 8px; color: var(--gd-heading); }
.legal p, .legal li { font-size: 0.95rem; line-height: 1.55; margin-bottom: 12px; }
.legal ul { margin: 0 0 12px 1.25rem; }
.legal a { color: var(--gd-red); font-weight: 700; text-decoration: underline; text-underline-offset: 0.12em; }
.legal a:hover { text-decoration: underline; }
.legal blockquote {
  background: #eef4fc;
  border-left: 4px solid var(--gd-light-blue);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gd-ink);
}
.form label.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5;
}
.form label.consent input[type="checkbox"] {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0.55rem 0 0;
  vertical-align: top;
  accent-color: var(--gd-light-blue);
}
mark.todo-placeholder {
  background: #ffe14a;
  color: var(--gd-ink);
  font-weight: 700;
  padding: 0 0.2em;
  border-radius: 3px;
}
footer.site-legal { padding: 22px 16px; line-height: 1.5; }
footer.site-legal p,
footer.site-legal nav { margin: 0 auto 8px; max-width: 760px; }
footer.site-legal a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.12em; }

/* Parts Wait — mobile cards. Light blue is the primary action.
   Navy is the accent: focus rings, the dialog edge, the quiet button border. */
main.wide { max-width: 1100px; }
.parts-heading {
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0 0 6px;
  color: var(--gd-heading);
}
.parts-lead {
  margin: 0 0 16px;
  color: var(--gd-ink);
  font-size: 0.95rem;
  line-height: 1.45;
}
.parts-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.parts-updated {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--gd-ink);
  font-size: 0.95rem;
  line-height: 1.4;
}
.parts-list {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .parts-list { grid-template-columns: 1fr 1fr; }
}
.parts-card {
  background: #fff;
  border-radius: 10px;
  border-top: 5px solid var(--gd-light-blue);
  padding: 16px 16px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.parts-card.is-red {
  border-top-color: #b80023;
  background: #fff8f8;
}
.parts-flag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fde8ec;
  color: #7a0018;
  border: 1px solid #b80023;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.parts-name {
  font-size: 1.28rem;
  font-weight: 900;
  margin: 0;
  color: var(--gd-heading);
  overflow-wrap: anywhere;
}
.parts-vehicle {
  margin: 4px 0 0;
  color: var(--gd-ink);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.parts-facts {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}
.parts-facts div {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: 8px;
  align-items: baseline;
}
.parts-facts dt {
  font-weight: 700;
  color: var(--gd-heading);
  font-size: 0.82rem;
}
.parts-facts dd {
  margin: 0;
  color: var(--gd-ink);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}
.parts-actions {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.parts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--gd-light-blue);
  color: var(--gd-heading);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.parts-btn:hover,
.parts-btn:active {
  background: var(--gd-light-press);
  color: var(--gd-heading);
}
.parts-btn:focus {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #06038d;
  outline-offset: 3px;
}
.parts-btn:disabled {
  background: #e4e7ee;
  color: #2c2c2c;
  cursor: not-allowed;
}
.parts-btn-ghost {
  width: auto;
  min-width: 8.5rem;
  background: #fff;
  color: var(--gd-heading);
  border-color: var(--gd-blue);
}
.parts-btn-ghost:hover,
.parts-btn-ghost:active {
  background: #eef6fd;
  color: var(--gd-heading);
}
.parts-state .parts-btn { margin-top: 4px; }
.parts-empty {
  background: #fff;
  border-radius: 10px;
  border-top: 5px solid var(--gd-light-blue);
  padding: 28px 18px;
  text-align: center;
  color: var(--gd-ink);
}
.parts-msg {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.4;
}
.parts-msg.is-bad {
  background: #fde8ec;
  color: #7a0018;
  border: 1px solid #b80023;
}
.parts-msg.is-good {
  background: #e7f6ee;
  color: #0b5433;
  border: 1px solid #0f7d4a;
}
.parts-dialog {
  /* The site reset clears the browser's margin:auto, which is what centers a modal. */
  margin: auto;
  border: none;
  border-top: 5px solid var(--gd-light-blue);
  border-radius: 12px;
  padding: 0;
  width: min(480px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(6, 3, 141, 0.25);
}
.parts-dialog[open] {
  display: flex;
  flex-direction: column;
}
.parts-dialog[hidden],
.parts-dialog [hidden] { display: none !important; }
.parts-dialog[open] form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: 0;
  overflow: hidden;
}
.parts-dialog::backdrop { background: rgba(31, 42, 55, 0.62); }
.parts-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 16px 8px;
}
.parts-dialog .panel-title { margin-bottom: 6px; }
.parts-dialog .panel-sub { margin-bottom: 12px; }
.parts-names {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.parts-names legend {
  padding: 0;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gd-heading);
}
.parts-name-options {
  display: grid;
  gap: 8px;
}
.parts-dialog .parts-name-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid #c9d6e8;
  border-radius: 8px;
  background: #fff;
  color: var(--gd-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.parts-dialog .parts-name-option input {
  display: inline-block;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex: 0 0 24px;
  margin: 0;
  padding: 0;
  accent-color: #06038d;
}
.parts-dialog .parts-name-option:focus-within {
  outline: 3px solid #06038d;
  outline-offset: 2px;
}
.parts-name-option.is-selected,
.parts-name-option:has(input:checked) {
  border-color: var(--gd-light-blue);
  background: #e8f4fc;
  box-shadow: inset 4px 0 0 var(--gd-light-blue);
}
.parts-dialog .parts-custom-name {
  margin: 8px 0 0;
}
.parts-dialog .parts-custom-name input {
  min-height: 48px;
  font-size: 1rem;
}
.parts-dialog .parts-custom-name input:focus,
.parts-dialog textarea:focus {
  outline-style: solid;
  outline-width: 3px;
  outline-color: #06038d;
  outline-offset: 2px;
  border-color: #06038d;
}
.parts-dialog #parts-picker-error {
  flex: 0 0 auto;
  margin: 8px 16px 0;
}
.parts-dialog-actions {
  display: grid;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #e4e7ee;
  background: #fff;
}
@media (max-width: 560px) {
  .parts-btn-ghost { width: 100%; }
}

.badge-new {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #b80023;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  vertical-align: middle;
}
.tint-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid #b80023;
  background: #fff8f8;
}
.tint-banner ul { margin: 6px 0 0; padding-left: 20px; }
.parts-card.is-new {
  border-top-color: #b80023;
  background: #fff8f8;
  box-shadow: 0 0 0 2px #b80023, 0 2px 8px rgba(0, 0, 0, 0.10);
}
.tint-new-tag, .tint-prep, .tint-glass {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}
.tint-new-tag { background: #b80023; color: #fff; text-transform: uppercase; }
.tint-prep { background: #fff3cd; color: #664d03; border: 1px solid #c79100; }
.tint-glass { background: #e7f1ff; color: #0a3d7a; border: 1px solid #5b8fd1; }
.tint-flags { margin: 0; }