/* =============================================================================
 *  Custom styling layered on top of Tailwind (CDN).
 *  Brand accent is driven by the --brand CSS variable (set from config at runtime).
 * ===========================================================================*/
:root { --brand: #E0A53C; --brand-rgb: 224 165 60; --ink: #1a1a1a; }

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif; color: #1f2937; }
/* Buttons */
.btn-primary {
  background: var(--brand); color: #111; font-weight: 700;
  padding: 14px 30px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; border: 0;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.btn-ghost {
  background: transparent; color: #374151; font-weight: 600; padding: 12px 24px;
  border-radius: 999px; border: 1px solid #d1d5db; cursor: pointer; transition: all .12s ease;
}
.btn-ghost:hover { border-color: #9ca3af; background: #f9fafb; }

/* Option cards */
.opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border: 1.5px solid #e5e7eb; border-radius: 12px; background: #fff;
  cursor: pointer; transition: all .12s ease; font-size: 15px; color: #374151;
}
.opt:hover { border-color: color-mix(in srgb, var(--brand) 60%, #e5e7eb); background: #fffdf8; }
.opt.sel { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, #fff); color: #111; font-weight: 600; }
.opt .mark {
  width: 22px; height: 22px; border-radius: 999px; border: 2px solid #d1d5db; flex: none;
  display: grid; place-items: center; transition: all .12s ease;
}
.opt.multi .mark { border-radius: 6px; }
.opt.sel .mark { border-color: var(--brand); background: var(--brand); color: #fff; }
.opt.sel .mark::after { content: '✓'; font-size: 13px; font-weight: 800; }

/* Rating scale */
.rate { display: flex; gap: 8px; flex-wrap: wrap; }
.rate button {
  flex: 1; min-width: 54px; padding: 14px 0; border: 1.5px solid #e5e7eb; border-radius: 12px;
  background: #fff; font-weight: 700; font-size: 18px; color: #6b7280; cursor: pointer; transition: all .12s ease;
}
.rate button:hover { border-color: color-mix(in srgb, var(--brand) 60%, #e5e7eb); }
.rate button.sel { background: var(--brand); border-color: var(--brand); color: #111; }

/* Traffic lights */
.tl-green { color: #16a34a; } .tl-amber { color: #d97706; } .tl-red { color: #dc2626; }
.tl-dot { width: 12px; height: 12px; border-radius: 999px; display: inline-block; }
.tl-dot.tl-green { background: #22c55e; } .tl-dot.tl-amber { background: #f59e0b; } .tl-dot.tl-red { background: #ef4444; }
.bar-fill.tl-green { background: #22c55e; } .bar-fill.tl-amber { background: #f59e0b; } .bar-fill.tl-red { background: #ef4444; }

/* Score dial */
.dial { border-radius: 50%; display: grid; place-items: center; }
.dial .inner { background: #fff; border-radius: 50%; display: grid; place-items: center; }

/* Progress bar animation */
.progress-fill { transition: width .4s cubic-bezier(.4,0,.2,1); background: var(--brand); }

/* Reveal animation */
[x-cloak] { display: none !important; }
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Spinner */
.spinner { width: 44px; height: 44px; border: 4px solid #e5e7eb; border-top-color: var(--brand); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }