/*
 * Copyright (c) 2026 CompuCom. All rights reserved. PROPRIETARY AND CONFIDENTIAL.
 * Unauthorized copying, distribution, or use of this file is strictly prohibited.
 */
:root {
  --navy: #1F3864;
  --navy-dark: #16294a;
  --navy-tint: #EAF0FA;
  --amber: #B45309;
  --amber-tint: #FDEBD0;
  --green: #2E6B2E;
  --green-tint: #E5F0E5;
  --ink: #1A1F29;
  --gray: #6B7280;
  --gray-light: #9AA1AC;
  --border: #E2E5EA;
  --bg: #F5F6F8;
  --card: #FFFFFF;
  --danger: #B3261E;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

/* ---------- Top bar ---------- */

.topbar {
  background: var(--navy);
  color: white;
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 12px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.brand-text { flex: 1; min-width: 0; }
.brand-text h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand-text p {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
}

.version-tag {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 3px 9px;
  flex-shrink: 0;
}

.doc-download-link {
  flex-shrink: 0;
  font-size: 12.5px;
  color: white;
  text-decoration: none;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.doc-download-link:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 480px) {
  .doc-download-link span { display: none; }
  .brand-text p { display: none; }
}

.progress-track {
  height: 3px;
  background: rgba(255,255,255,0.15);
}
.progress-fill {
  height: 100%;
  background: var(--amber);
  width: 4%;
  transition: width 0.25s ease;
}

/* ---------- Layout ---------- */

.app-shell {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 22px 18px 80px;
}

.step-rail {
  width: 210px;
  flex-shrink: 0;
  position: sticky;
  top: 74px;
  display: none;
}

@media (min-width: 780px) {
  .step-rail { display: block; }
}

/* Tablet portrait / narrow window: give the form column more breathing
   room and slightly larger touch targets than phone, since there's
   more width to work with but the rail is still hidden. */
@media (min-width: 480px) and (max-width: 779px) {
  .app-shell { padding: 24px 28px 90px; }
  .field-grid { gap: 18px; }
}

/* Phone: tighten padding so content isn't squeezed, and make sure
   nothing relies on hover-only affordances. */
@media (max-width: 479px) {
  .app-shell { padding: 16px 12px 90px; }
  .site-id-card, .section-card { padding: 16px 14px 18px; }
  .section-head h2 { font-size: 17px; }
  .step-nav { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0 4px; margin: 0 -12px -8px; padding-left: 12px; padding-right: 12px; }
}

.step-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--gray);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.step-rail-item .dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--gray-light);
}
.step-rail-item.active {
  background: var(--navy-tint);
  color: var(--navy);
  font-weight: 600;
}
.step-rail-item.active .dot {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}
.step-rail-item.done .dot {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.step-rail-item.done .dot::after { content: "✓"; }
.step-rail-item.done .dot { font-size: 0; }
.step-rail-item.done .dot::after { font-size: 11px; }

.form-column {
  flex: 1;
  min-width: 0;
}

/* ---------- Draft banner ---------- */

.draft-banner {
  background: var(--amber-tint);
  border: 1px solid #F0C888;
  color: #7A4A0A;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.link-btn {
  background: none;
  border: none;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13.5px;
  padding: 0;
}

/* ---------- Cards ---------- */

.site-id-card, .section-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 22px;
  margin-bottom: 16px;
}

.site-id-card h2 {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--navy);
}

.section-head {
  margin-bottom: 4px;
}
.section-head h2 {
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--navy);
  color: white;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transform: translateY(1px);
}

.jump-bar {
  background: var(--navy-dark);
  padding: 6px 18px;
  display: flex;
  justify-content: center;
}
.jump-to-step-select-compact {
  width: 100%;
  max-width: 480px;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10);
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font);
}
.jump-to-step-select-compact option {
  color: var(--ink); /* native <option> rendering ignores the dark parent background on most platforms */
  background: white;
}
.section-subnote {
  font-size: 13px;
  color: var(--gray);
  font-style: italic;
  margin: 0 0 18px;
  line-height: 1.5;
}

/* ---------- Fields ---------- */

.field-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field { display: block; }
.field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
  /* Honor explicit newlines in labels (e.g. 4.6's YES/NO paragraph break) while
     still wrapping normally. */
  white-space: pre-line;
}
/* ---------- Required field marker ---------- */
.field-required {
  border-left: 4px solid #C0392B;
  padding-left: 10px;
  margin-left: -2px;
  background: linear-gradient(90deg, rgba(192,57,43,0.05), transparent 60%);
}
.required-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 1px 7px;
  border-radius: 9px;
  background: #C0392B;
  color: #fff;
  vertical-align: middle;
}
.required-badge.done {
  background: var(--green);
}
/* Soft-required (e.g. 5.2b when rack stays): amber, not hard-red — looks
   important and will warn on submit, but won't block. Turns green when filled. */
.required-badge.soft {
  background: #E08A00;
}
.required-badge.soft.done {
  background: var(--green);
}

.field-header {
  margin: 10px 0 2px;
  padding: 8px 10px;
  background: var(--navy-tint);
  border-left: 4px solid var(--navy);
  border-radius: 4px;
}
.field-header-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}
.field-id {
  color: var(--navy);
  font-weight: 700;
  margin-right: 6px;
}

input[type="text"], input[type="date"], input[type="number"], textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--ink);
  background: #FCFCFD;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}
textarea { resize: vertical; min-height: 60px; }

.yesno-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.yesno-btn {
  flex: 1;
  padding: 12px 10px;
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
}
.yesno-btn.selected-yes {
  background: var(--green-tint);
  border-color: var(--green);
  color: var(--green);
}
.yesno-btn.selected-no {
  background: #FBEAEA;
  border-color: var(--danger);
  color: var(--danger);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.chip {
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: white;
  font-size: 13px;
  color: var(--gray);
  cursor: pointer;
}
.chip.selected {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}

/* ---------- Photo requirements ---------- */

.section-photo-tally {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-tint);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 16px;
}

.inline-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin: -6px 0 4px;
}

/* Multi-photo groups (a single required photo that allows several
   uploads, e.g. "all sides of the building"). Spans the full grid row
   so its internal thumbnails have room, even when sitting next to
   single-photo slots in the same inline-photo-grid. */
.photo-slot-group {
  grid-column: 1 / -1;
  border: 1.5px dashed #E8C596;
  background: var(--amber-tint);
  border-radius: 8px;
  padding: 10px 12px 12px;
}
.photo-slot-group.filled {
  border-style: solid;
  border-color: var(--green);
  background: var(--green-tint);
}
.photo-slot-group-label {
  font-size: 12px;
  font-weight: 600;
  color: #7A4A0A;
  margin-bottom: 8px;
}
.photo-slot-group.filled .photo-slot-group-label { color: var(--green); }
.photo-slot-group-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.photo-slot.mini {
  width: 84px;
  height: 84px;
  min-height: 84px;
  padding: 6px;
  flex-shrink: 0;
}
.photo-slot.mini.filled { padding: 0; }
.photo-slot.mini img { height: 100%; }
.photo-slot.mini .photo-slot-icon { font-size: 22px; }

.photo-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.photo-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--amber);
  margin-bottom: 10px;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.photo-slot {
  border: 1.5px dashed #E8C596;
  background: var(--amber-tint);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.photo-slot.drag-over {
  border-style: solid;
  border-color: var(--navy);
  background: var(--navy-tint);
  transform: scale(1.02);
}
.photo-slot.filled {
  border-style: solid;
  border-color: var(--green);
  background: var(--green-tint);
  padding: 0;
  overflow: hidden;
}
.photo-slot img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}
.photo-slot-label {
  font-size: 11px;
  color: #7A4A0A;
  line-height: 1.3;
  padding: 0 4px;
}
.photo-slot.filled .photo-slot-label {
  color: var(--green);
  padding: 4px 6px 6px;
}
.photo-slot-icon { font-size: 20px; }
.photo-slot input[type="file"] { display: none; }
.retake-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
}

/* ---------- Reference / example images (schema referenceImages) ---------- */
.ref-images {
  margin: 4px 0 10px;
  padding: 8px 10px 10px;
  border: 1px solid #d9e0ec;
  border-radius: var(--radius);
  background: #f7f9fc;
}
.ref-images-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.35;
}
.ref-images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ref-image-card {
  width: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid;
  background: #fff;
}
.ref-image-card.good { border-color: var(--green); }
.ref-image-card.bad { border-color: #C0392B; }
.ref-image-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}
.ref-image-caption {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  padding: 4px 6px 6px;
}
.ref-image-card.good .ref-image-caption { color: var(--green); }
.ref-image-card.bad .ref-image-caption { color: #C0392B; }

/* ---------- Emphasised photo (schema emphasis:true) ---------- */
/* Makes a critical shot (e.g. the whole-room rack context) stand out from the
   other prompts: a full-width red callout banner above a highlighted slot. */
.photo-emphasis-wrap {
  grid-column: 1 / -1;      /* span the whole photo grid row */
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber-tint);
  padding: 10px 12px 12px;
  margin: 2px 0 4px;
  box-shadow: 0 0 0 3px rgba(180,83,9,0.12);
}
.photo-emphasis-callout {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--amber);
  line-height: 1.35;
  margin-bottom: 10px;
}
.photo-slot.emphasis {
  border-color: var(--amber);
  border-style: solid;
  background: #fff;
}
.photo-slot.emphasis.filled {
  border-color: var(--green);
}

/* ---------- Duplicate photo warnings ---------- */

.photo-slot.duplicate, .photo-slot.mini.duplicate, .misc-photo-tile.duplicate {
  border-color: #C0392B !important;
  outline: 2px solid #F5B7B1;
  outline-offset: -2px;
}
.duplicate-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #C0392B;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  z-index: 2;
}
.duplicate-badge.mini-badge {
  top: 2px;
  left: 2px;
  padding: 1px 4px;
  font-size: 11px;
}
.misc-photo-tile { position: relative; }
.misc-photo-tile .duplicate-badge { top: 4px; left: 4px; }

.duplicate-summary {
  margin-top: 16px;
  padding: 14px 16px;
  background: #FBEAEA;
  border: 1.5px solid #C0392B;
  border-radius: var(--radius);
}
.duplicate-summary-title {
  font-size: 14px;
  font-weight: 700;
  color: #C0392B;
  margin-bottom: 8px;
}
.duplicate-summary-row {
  font-size: 13px;
  color: #8A2E24;
  padding: 3px 0;
}

.eng-review-block {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  background: var(--navy-tint);
}
.eng-review-label {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.eng-review-block textarea {
  margin-top: 10px;
}

.photo-reminder {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--amber-tint);
  border: 1.5px solid var(--amber);
  border-radius: 8px;
  color: #7A4A0A;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Goal block ---------- */

.goal-block {
  margin-top: 20px;
  background: var(--green-tint);
  border: 1px solid #B7D6B7;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--green);
  line-height: 1.5;
}
.goal-block .goal-icon { flex-shrink: 0; }

/* ---------- Per-section "Save & continue on another device" ---------- */
.section-handoff {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed #cbd5e1;
  text-align: center;
}
.section-handoff-btn {
  background: #2a6cb0;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.section-handoff-btn:hover { background: #245e99; }
.section-handoff-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #667;
  line-height: 1.4;
}

/* ---------- Nav buttons ---------- */

.step-nav {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.btn {
  flex: 1;
  padding: 13px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.btn-secondary {
  background: white;
  border: 1.5px solid var(--border);
  color: var(--ink);
}
.btn-primary {
  background: var(--navy);
  color: white;
}
.btn-submit {
  background: var(--amber);
  color: white;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.photo-count-readout {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.submit-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
}
.submit-status.info { background: var(--navy-tint); color: var(--navy); }
.submit-status.success { background: var(--green-tint); color: var(--green); }
.submit-status.error { background: #FBEAEA; color: var(--danger); }

.error-details-label {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
}
.error-details-fallback {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 110px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  padding: 10px;
  border: 1.5px solid var(--danger);
  border-radius: 6px;
  color: var(--ink);
  background: white;
}

.section-card[hidden], .site-id-card[hidden] { display: none; }

/* ---------- Misc / additional photos ---------- */

.misc-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.misc-photo-tile {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: white;
  position: relative;
}
.misc-photo-tile img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}
.misc-label-input {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 10px;
  font-size: 12.5px;
}
.misc-label-input:focus { outline: none; border-top-color: var(--navy); }
.misc-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.misc-add-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 110px;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--gray);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s;
}
.misc-add-tile:hover, .misc-add-tile.drag-over {
  border-color: var(--navy);
  background: var(--navy-tint);
  color: var(--navy);
}
.misc-add-tile input[type="file"] { display: none; }

/* Proprietary/copyright footer — small, muted, unobtrusive. */
.app-footer {
  margin-top: 28px;
  padding: 16px 8px 24px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #9aa3af;
  border-top: 1px solid #e5e7eb;
}

/* --- Submit gate: blocked message + disabled submit button --- */
.submit-blocked {
  margin: 10px 0;
  padding: 10px 14px;
  border: 1px solid #b3261e;
  border-left: 5px solid #b3261e;
  border-radius: 6px;
  background: #fdecea;
  color: #8a1c12;
  font-size: 14px;
}
.submit-blocked strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.btn.btn-submit:disabled,
.btn.btn-submit.blocked {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(35%);
}
.btn-link {
  margin-top: 8px;
  background: none;
  border: none;
  color: #1F3864;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
  font-size: 14px;
}

/* --- Photo required designator --- */
.photo-required-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  background: #b3261e;
  color: #fff;
  vertical-align: middle;
}
.photo-required-badge.done { background: #2e6b2e; }

/* ---------- Hard reset (full form wipe) buttons: top + bottom ---------- */
/* Deliberately alarming (danger red) and NOT stretched like the step-nav
   .btn flex children, so the "wipe everything" action reads as distinct and
   intentional. Guarded by a confirm() in hardReset(). */
.hard-reset-bar {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}
.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn.hard-reset-btn {
  flex: 0 0 auto;          /* override .btn flex:1 so it doesn't span the row */
  width: auto;
  padding: 11px 20px;
  font-size: 14px;
  letter-spacing: .2px;
  border: 1.5px solid #8a1c12;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.btn.hard-reset-btn:hover { background: #9a1f17; }
.btn.hard-reset-btn:active { transform: translateY(1px); }

/* ---------- 6.1b LOCATION flash (rich label emphasis) ---------- */
/* field.labelHtml opts a question into an HTML label; .flash-location makes the
   word LOCATION pulse so the tech registers this question is about the SPOT,
   not the rack hardware. Reduced-motion users get a static highlight. */
.field-label-rich { font-weight: 600; }
.flash-location {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #8a1c12;
  background: #ffe08a;
  animation: flashLocation 1s ease-in-out infinite;
}
@keyframes flashLocation {
  0%, 100% { background: #ffe08a; color: #8a1c12; box-shadow: 0 0 0 0 rgba(180,83,9,0.0); }
  50%      { background: #B45309; color: #fff;    box-shadow: 0 0 0 4px rgba(180,83,9,0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .flash-location { animation: none; background: #ffd666; color: #8a1c12; }
}

/* ---------- International: measurement-unit toggle ---------- */
.unit-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 2px 0 16px;
  padding: 10px 14px;
  background: var(--navy-tint);
  border: 1px solid #c9d6ee;
  border-radius: 8px;
  font-size: 14px;
}
.unit-toggle-label {
  font-weight: 700;
  color: var(--navy);
}
.unit-toggle .unit-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #22384f;
}
.unit-toggle .unit-opt input {
  accent-color: var(--navy);
}