/* ==============================================================
   GreenBay Repair Desk, shared styles

   VENDORED from the AI Evaluator's frontend/styles.css so a customer moving
   between evaluate.greenbay.market and repair.greenbay.market never notices a
   seam. See VENDORED.md for the source commit.

   Taken unchanged: the design tokens, the base typography, the button scale,
   and the wizard components (progress, option cards, form fields, photo
   upload and grid). Rules are copied whole, never by line range.

   Left behind: the Evaluator's negotiation, offer card and chat panel styles.
   Nothing here uses them and the brief sets a payload budget for a low end
   Android on 3G.

   Repair specific components are added at the end, under a marker.
   ============================================================== */

:root {
  --green-primary: #0D9F4F;
  --green-light: #E8F8EF;
  --green-dark: #087A3B;
  --emerald: #10B981;
  --lime: #84CC16;
  --forest: #064E3B;
  --cream: #FDFBF7;
  --slate: #334155;
  --muted: #64748B;
  --white: #FFFFFF;
  --gold: #F59E0B;
  --orange: #F97316;
  --red: #EF4444;
  --warm: #FEF9EF;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .04);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .06);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  --max-width: 1280px;
  --header-height: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--slate);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--forest);
}

h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-size: 1.1rem;
}

p {
  color: var(--slate);
}

a {
  color: var(--green-primary);
  text-decoration: none;
  transition: color .2s;
}

a:hover {
  color: var(--green-dark);
}

img {
  max-width: 100%;
  display: block;
}

button {
  /* Buttons do not inherit colour from their parent, they use the user agent's
     `buttontext`. Several components here are buttons carrying ordinary body
     text, and without this they render near black in dark mode. */
  color: inherit;
  background: none;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: .95rem;
  transition: all .25s ease;
}

input,
textarea,
select {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .95rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--green-primary), var(--emerald));
  color: white;
  box-shadow: 0 4px 14px rgba(13, 159, 79, .3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(13, 159, 79, .4);
}

.btn-secondary {
  background: var(--white);
  color: var(--green-primary);
  border: 2px solid var(--green-primary);
}

.btn-secondary:hover {
  background: var(--green-light);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--slate);
  padding: 10px 20px;
}

.btn-ghost:hover {
  color: var(--green-primary);
}

.btn-sm {
  padding: 8px 18px;
  font-size: .85rem;
}

.btn-lg {
  padding: 16px 36px;
  font-size: 1.05rem;
}

.btn-whatsapp {
  background: #25D366;
  color: white;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .3);
}

.btn-whatsapp:hover {
  background: #20BD5A;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, .4);
}

.btn-outline {
  background: linear-gradient(135deg, #0D9F4F 0%, #064E3B 100%);
  color: #fff;
  border: 2px solid rgba(13, 159, 79, 0.3);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(13, 159, 79, 0.18);
}

.btn-outline:hover {
  border-color: var(--green-primary);
  color: #fff;
  transform: translateY(-2px);
  background: linear-gradient(135deg, #10b860 0%, #0D9F4F 100%);
  box-shadow: 0 4px 16px rgba(13, 159, 79, 0.3);
}

.btn-bug-report {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(13, 159, 79, 0.08);
  color: var(--muted);
  transition: all 0.25s;
  cursor: pointer;
}

.btn-bug-report:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  transform: scale(1.1);
}

.wizard-panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, .05);
  overflow: hidden;
}

.wizard-progress {
  padding: 20px 28px;
  background: var(--green-light);
  border-bottom: 1px solid rgba(13, 159, 79, .1);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.progress-step-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--forest);
}

.progress-count {
  font-size: .8rem;
  color: var(--muted);
}

.progress-bar {
  height: 6px;
  background: rgba(13, 159, 79, .12);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-primary), var(--emerald));
  border-radius: 3px;
  transition: width .5s ease;
  width: 0%;
}

.wizard-body {
  padding: 32px 28px;
  min-height: 400px;
}

.wizard-step {
  display: none;
  animation: wizard-fade-in .4s ease;
}

.wizard-step.active {
  display: block;
}

.wizard-step h3 {
  margin-bottom: 8px;
}

.wizard-step .step-description {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 24px;
}

.option-card {
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.option-card:hover {
  border-color: rgba(13, 159, 79, .3);
  background: var(--green-light);
}

.option-card.selected {
  border-color: var(--green-primary);
  background: var(--green-light);
  box-shadow: 0 0 0 3px rgba(13, 159, 79, .12);
}

.option-card .option-icon {
  font-size: 1.8rem;
}

.option-card .option-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--forest);
}

.option-card .option-desc {
  font-size: .78rem;
  color: var(--muted);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: .88rem;
  color: var(--forest);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid rgba(0, 0, 0, .08);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-size: .95rem;
  color: var(--slate);
  transition: all .2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--green-primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(13, 159, 79, .1);
}

.form-input::placeholder {
  color: var(--muted);
}

.form-hint {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 6px;
}

.photo-upload-zone {
  border: 2px dashed rgba(13, 159, 79, .25);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all .3s;
  background: var(--cream);
  position: relative;
}

.photo-upload-zone:hover,
.photo-upload-zone.drag-over {
  border-color: var(--green-primary);
  background: var(--green-light);
}

.photo-upload-zone .upload-icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
}

.photo-upload-zone h4 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.photo-upload-zone p {
  font-size: .85rem;
  color: var(--muted);
}

.photo-upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, .06);
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-thumb .remove-photo {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
}

.photo-thumb:hover .remove-photo {
  opacity: 1;
}

.photo-count {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 12px;
  text-align: center;
}

.photo-count .count-num {
  font-weight: 700;
  color: var(--green-primary);
}

.photo-count.complete .count-num {
  color: var(--emerald);
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: var(--cream);
}

.btn-accept {
  background: var(--emerald);
  color: white;
}

.btn-accept:hover {
  background: #0EA573;
  transform: translateY(-1px);
}

.btn-counter {
  background: rgba(255, 255, 255, .15);
  color: white;
  border: 1px solid rgba(255, 255, 255, .25);
}

.btn-counter:hover {
  background: rgba(255, 255, 255, .25);
}

.btn-icon {
  width: 18px;
  height: 18px;
}

.option-card.has-image {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.option-card.has-image .option-label {
  display: block;
  padding: 10px 12px;
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
}

.option-card .option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card .option-icon i {
  width: 24px;
  height: 24px;
  color: var(--green-primary);
}

/* ==============================================================
   REPAIR DESK COMPONENTS
   Everything below this marker is new. Nothing above it was changed.
   ============================================================== */

:root {
  /* Accessible greens.
     The Evaluator's --green-primary (#0D9F4F) reaches only 3.4:1 against white,
     so it fails WCAG AA both as text and as a background under white text. Its
     gradient partner --emerald (#10B981) is worse, at 2.5:1.
     These tokens are the AA safe pair. --green-primary is kept exactly as the
     Evaluator defines it and is still used for rails, dots, borders and
     progress fills, where contrast rules do not apply. The result is a shade
     deeper than the Evaluator on text and buttons, and identical everywhere
     else. See docs/DESIGN_REPORT.md. */
  --green-accent: #087A3B;    /* green TEXT on a light surface, 5.5:1 on white */
  --green-fill: #087A3B;      /* green FILL under white text, 5.5:1. Same in
                                 dark mode: a fill under white text does not
                                 flip with the theme the way text does. */
  --green-solid-a: #076B34;   /* gradient start under white text, 6.6:1 */
  --green-solid-b: #0A8449;   /* gradient end under white text, 4.8:1 */
  --whatsapp: #0F7A6D;        /* WhatsApp green, darkened to 5.3:1 under white */

  --navy: #0F2942;
  --amber-soft: #FEF3C7;
  --red-soft: #FEE2E2;
  /* Text on the two soft surfaces above. They are tokens rather than hex
     literals because the surfaces flip in dark mode and the text has to
     flip with them, which is the same trap --green-dark was fixed for. */
  --amber-text: #92400E;
  --red-text: #991B1B;
  --green-soft: var(--green-light);
  --border: #E7E2D8;
  --surface: var(--white);
  --page: var(--cream);
  --text: var(--slate);
  --text-muted: var(--muted);
  --focus: #2563EB;
}

/* Respect the reader's system setting. The Evaluator palette has a dark
   counterpart here so the two products still feel like one family. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0E1613;
    --surface: #16211D;
    --cream: #0E1613;
    --white: #16211D;
    --text: #E6EDE9;
    --slate: #E6EDE9;
    --text-muted: #9BB0A6;
    --muted: #9BB0A6;
    --forest: #7EE2A8;
    /* --green-dark is the text colour on --green-light surfaces (badges, the
       active tab). Both were dark in dark mode, giving dark green on dark
       green. */
    --green-dark: #6EE7A0;
    --green-accent: #6EE7A0;
    /* --green-fill is deliberately NOT lightened here. It sits under white
       text, so it must stay dark in both themes. */
    --border: #23332C;
    --warm: #1A2621;
    --green-light: #143026;
    --amber-soft: #3A2E0E;
    --red-soft: #3A1A1A;
    /* 9.2:1 on --amber-soft and 8.2:1 on --red-soft. The light values are
       dark browns and reds, which on these surfaces measured 1.9:1. */
    --amber-text: #FCD34D;
    --red-text: #FCA5A5;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
  }
}

body {
  background: var(--page);
  color: var(--text);
}

/* The `hidden` attribute must always win. A component rule such as
   `.lightbox { display: grid }` otherwise beats the user agent's
   `[hidden] { display: none }` and the element shows anyway. */
[hidden] {
  display: none !important;
}

/* ---------- app shell ---------- */
.app-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 96px;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 14px;
}

.app-header .brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--forest);
  letter-spacing: -.01em;
}

.app-header .brand span {
  color: var(--green-primary);
}

.app-header .header-note {
  margin-left: auto;
  font-size: .8rem;
  color: var(--text-muted);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

/* ---------- visible focus everywhere, WCAG 2.4.7 ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.option-card:focus-visible,
.check-item:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--forest);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 100;
}

.skip-link:focus {
  left: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- country picker ---------- */
.country-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.country-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}

.country-card:hover {
  border-color: var(--green-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.country-card .flag {
  font-size: 2rem;
  line-height: 1;
}

.country-card .name {
  font-weight: 600;
  color: var(--text);
}

.country-card .sub {
  font-size: .85rem;
  color: var(--text-muted);
}

/* ---------- option cards in a responsive grid ---------- */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.option-grid.tight {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.option-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.option-card .option-note {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

/* ---------- multi select checklist ---------- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: left;
  width: 100%;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.4;
}

.check-item:hover {
  border-color: var(--green-primary);
}

.check-item.selected {
  border-color: var(--green-primary);
  background: var(--green-light);
}

.check-box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--muted);
  border-radius: 5px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  transition: background .15s, border-color .15s;
}

.check-item.selected .check-box {
  background: var(--green-primary);
  border-color: var(--green-primary);
}

.check-box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform .15s ease;
}

.check-item.selected .check-box::after {
  transform: rotate(-45deg) scale(1);
}

/* ---------- chips ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 9px 15px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  cursor: pointer;
  /* The fill is deliberately NOT transitioned. Selecting a chip flips the text
     from dark to white at the same moment the fill goes green; fading the fill
     leaves white text on a pale green midpoint, which is unreadable for about
     150ms. The border still eases, which is what the hover state needs. */
  transition: border-color .15s;
}

.chip:hover {
  border-color: var(--green-primary);
}

.chip.selected {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
  font-weight: 600;
}

/* ---------- notices ---------- */
.notice {
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  font-size: .92rem;
  line-height: 1.55;
  border-left: 4px solid;
}

.notice + .notice {
  margin-top: 10px;
}

.notice-info {
  background: var(--green-light);
  border-color: var(--green-primary);
  color: var(--text);
}

.notice-warn {
  background: var(--amber-soft);
  border-color: var(--gold);
  color: var(--text);
}

.notice-error {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--text);
}

.notice h4 {
  margin-bottom: 6px;
  font-size: 1rem;
}

/* ---------- consent ---------- */
.consent-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: .9rem;
  line-height: 1.5;
  cursor: pointer;
}

.consent-item:first-child {
  border-top: none;
}

.consent-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--green-primary);
  flex: 0 0 auto;
}

/* ---------- inline validation ---------- */
.field-error {
  display: none;
  color: var(--red);
  font-size: .82rem;
  margin-top: 6px;
}

.field-error.show {
  display: block;
}

.form-input.invalid {
  border-color: var(--red);
}

/* ---------- done screen ---------- */
.done-ref {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 9vw, 2.9rem);
  font-weight: 700;
  color: var(--forest);
  letter-spacing: .02em;
  word-break: break-all;
}

.next-steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0;
}

.next-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.next-step .num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 700;
  font-size: .85rem;
  display: grid;
  place-items: center;
}

.next-step p {
  font-size: .93rem;
  line-height: 1.5;
  color: var(--text);
}

/* ---------- status rail ---------- */
.rail {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 22px 0 8px;
}

.rail-node {
  flex: 1;
  text-align: center;
  position: relative;
  min-width: 0;
}

.rail-node::before {
  content: "";
  position: absolute;
  top: 11px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: var(--border);
}

.rail-node:first-child::before {
  display: none;
}

.rail-node.done::before,
.rail-node.current::before {
  background: var(--green-primary);
}

.rail-dot {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--border);
  display: grid;
  place-items: center;
  font-size: .65rem;
  color: #fff;
}

.rail-node.done .rail-dot {
  background: var(--green-primary);
  border-color: var(--green-primary);
}

.rail-node.current .rail-dot {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 4px var(--green-light);
}

.rail-label {
  font-size: .68rem;
  color: var(--text-muted);
  line-height: 1.3;
  padding: 0 2px;
}

.rail-node.current .rail-label {
  color: var(--forest);
  font-weight: 600;
}

/* ---------- quote table ---------- */
.quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.quote-table th,
.quote-table td {
  padding: 10px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.quote-table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 600;
}

.quote-table td.num,
.quote-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.quote-total {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--forest);
}

/* ---------- loading and empty ---------- */
.spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  vertical-align: -3px;
}

.spinner.dark {
  border-color: var(--border);
  border-top-color: var(--green-primary);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 44px 20px;
  color: var(--text-muted);
}

.empty-state .icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
  opacity: .75;
}

.upload-progress {
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}

.upload-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green-primary);
  transition: width .25s ease;
}

/* ---------- sticky footer ---------- */
.wizard-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--page) 72%, transparent);
  padding: 14px 0 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 5;
}

.wizard-footer .btn {
  flex: 1;
}

.wizard-footer .btn-ghost {
  flex: 0 0 auto;
}

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.badge-review { background: var(--amber-soft); color: var(--amber-text); }
.badge-ok     { background: var(--green-light); color: var(--green-dark); }
.badge-late   { background: var(--red-soft); color: var(--red-text); }
.badge-muted  { background: var(--warm); color: var(--text-muted); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-review { color: #FCD34D; }
  :root:not([data-theme="light"]) .badge-late { color: #FCA5A5; }
}

/* The status rail carries eight nodes. Below about 520px each label gets
   roughly 45px, which is narrower than the words, so they collide and become
   unreadable. The labels are dropped there and the rail keeps only its dots:
   the stage name is already the heading directly underneath, so nothing is
   lost, and the rail still announces "Stage 2 of 8" to a screen reader.

   The base rule comes first so the media query can override it. The other way
   round, equal specificity means the later rule wins and the media query does
   nothing. */
.rail-step-text {
  display: none;
}

@media (max-width: 520px) {
  .rail-label {
    display: none;
  }

  .rail {
    margin-bottom: 4px;
  }

  .rail-step-text {
    display: block;
    font-size: .78rem;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
}

/* ---------- 360px phone ---------- */
@media (max-width: 400px) {
  .app-shell { padding: 0 14px 92px; }
  .option-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .option-grid.tight { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); }
  .card { padding: 16px; }
  .rail-label { font-size: .6rem; }
  .wizard-step h3 { font-size: 1.15rem; }
}

@media (min-width: 560px) {
  .country-grid { grid-template-columns: repeat(3, 1fr); }
  .country-card { flex-direction: column; text-align: center; padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==============================================================
   ACCESSIBILITY OVERRIDES
   Every rule here exists because axe-core flagged the vendored value as a
   WCAG AA failure. e2e/a11y.spec.js is the regression test.
   ============================================================== */

/* White on the Evaluator's green gradient is 2.5:1 to 3.4:1. Deepened. */
.btn-primary {
  background: linear-gradient(135deg, var(--green-solid-a), var(--green-solid-b));
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--green-solid-b), var(--green-solid-a));
}

/* Green text on white was 3.4:1 everywhere it appeared. */
a,
.btn-secondary,
.btn-ghost,
.btn-outline,
.app-header .brand span,
.desk-header .brand span {
  color: var(--green-accent);
}

a:hover {
  color: var(--forest);
}

.btn-outline {
  border-color: var(--green-accent);
}

/* A selected chip put white on --green-primary. */
.chip.selected {
  background: var(--green-fill);
  border-color: var(--green-fill);
  color: #fff;
}

/* Muted grey on the pale green progress bar was 4.2:1. */
.progress-count {
  color: var(--text);
}

/* WhatsApp's own brand green fails AA under white text, as it does in
   WhatsApp itself. Deepened just enough to pass while still reading as
   WhatsApp at a glance. */
.btn-whatsapp {
  background: var(--whatsapp);
  box-shadow: 0 4px 14px rgba(15, 122, 109, .28);
}

.btn-whatsapp:hover {
  background: #0B5F55;
}

/* A scrollable box must be reachable by keyboard. */
.odoo-card {
  outline-offset: 2px;
}