/* Pool Inspection Tool — app styles v2
 * Design tokens + shadcn/ui aesthetic, vanilla CSS.
 * True Flow brand palette is preserved; neutral scale added for surfaces/text.
 * Background stays aqua (True Flow brand). Accent = saffron. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  /* ── Brand (True Flow) — sourced from brand/tokens.css ── */
  --color-accent:        var(--cta-bg);          /* #c9a96e — gold CTA */
  --color-accent-hover:  #b8935e;                /* ⚠ off warm ramp — deferred */
  --color-accent-text:   var(--cta-text);        /* #ffffff */

  /* ── Neutral scale ── */
  --color-bg:            var(--tf-aqua-050);     /* #e4f7fc — aqua page bg KEPT (cream deferred) */
  --color-surface:       var(--app-surface);     /* #ffffff */
  --color-border:        #E5E7EB;                /* ⚠ off warm ramp — deferred */
  --color-border-focus:  #c9a96e;                /* ⚠ maps to --cta-bg value; deferred */
  --color-text-primary:  #111827;                /* ⚠ off warm ramp — deferred */
  --color-text-secondary:#6B7280;                /* ⚠ off warm ramp — deferred */
  --color-text-disabled: #D1D5DB;                /* ⚠ off warm ramp — deferred */

  /* ── Semantic ── */
  --color-danger:        var(--status-danger);        /* #dc2626 */
  --color-danger-hover:  var(--status-danger-hover);  /* #b91c1c */
  --color-warning:       var(--status-warning);       /* #d97706 */
  --color-success:       var(--status-success);       /* #16a34a */
  --color-info:          var(--status-info);          /* #2563eb */

  /* ── Brand dark tones (kept for header/footer) ── */
  --color-navy:          var(--tf-navy);         /* #062840 */
  --color-navy-dark:     var(--tf-navy);         /* #062840 */
  --color-sand:          var(--tf-sand);         /* #f5ead8 */

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Spacing (4px base) ── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px;

  /* ── Type ── */
  --font-sans: var(--font-sans);
  --text-xs:   12px;  --text-sm: 14px;  --text-base: 16px;
  --text-lg:   18px;  --text-xl: 20px;  --text-2xl:  24px;

  /* ── Touch targets (iOS HIG minimum: 44pt) ── */
  --touch-min: 44px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* ── Legacy aliases (used in a few inherited rules below) ── */
  --tap: var(--touch-min);
}

html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  padding-top: env(safe-area-inset-top);
}

/* ── Brand elements ─────────────────────────────────────────────── */
.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-navy);
  display: block;
  font-size: var(--text-lg);
}
.brand-logo { display: block; height: 64px; max-width: 195px; width: auto; object-fit: contain; }
.login-card .brand-logo { height: 80px; max-width: 220px; margin: 0 auto; }
@media (min-width: 600px) {
  .brand-logo { height: 90px; max-width: 260px; }
  .login-card .brand-logo { height: 100px; max-width: 260px; }
}
.brand-sub { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); letter-spacing: .04em; }
.app-user-email { font-size: var(--text-sm); color: var(--color-text-secondary); margin-left: auto; margin-right: var(--space-2); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  min-height: var(--touch-min);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background 120ms ease, opacity 120ms ease, border-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { opacity: 0.75; }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}
.btn-primary:active { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn-soft {
  background: var(--color-sand);
  color: var(--color-navy);
  border-color: transparent;
}
.btn-soft:active { background: #e3d4c6; }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  min-height: 40px;
  font-size: var(--text-sm);
}
.btn-ghost:active { color: var(--color-text-primary); }

.btn-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  text-decoration: underline;
  padding: 0;
}
.btn-link:hover { color: var(--color-navy); }

.btn-block { width: 100%; margin-top: var(--space-5); }

.soon {
  font-size: var(--text-xs);
  background: var(--color-navy);
  color: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  font-weight: 600;
}

/* ── Sync bar ────────────────────────────────────────────────────── */
.sync-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-navy);
  color: var(--color-surface);
  height: 32px;
}
.sync-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  flex: none;
}
.sync-bar.online  .sync-dot { background: #46d17f; }
.sync-bar.offline .sync-dot { background: #f59e0b; }
.sync-bar.pending .sync-dot { background: #f59e0b; }
.sync-btn-manual {
  margin-left: auto;
  padding: 2px var(--space-3);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  min-height: 24px;
}

/* ── Login ───────────────────────────────────────────────────────── */
.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
  background: linear-gradient(160deg, var(--color-bg) 0%, var(--color-sand) 100%);
}
.login-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.login-card .brand { text-align: center; margin-bottom: var(--space-6); }
.login-card .brand-sub { text-transform: uppercase; font-weight: 600; font-size: var(--text-sm); line-height: 1.2; letter-spacing: .12em; margin-top: var(--space-2); }
.login-card label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 var(--space-1);
  display: block;
}
.login-card input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  width: 100%;
  transition: border-color 120ms ease, outline 120ms ease;
}
.login-card input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.login-card .btn { margin-top: var(--space-5); border-radius: 8px; }
.login-card .btn-block { width: 100%; }
.login-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  min-height: 1.1rem;
  margin-top: var(--space-3);
}
.config-warning {
  color: var(--color-warning);
  font-size: var(--text-xs);
  margin-top: var(--space-4);
  text-align: center;
}
.config-warning code {
  background: var(--color-sand);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
}

/* ── Password field with eye toggle ─────────────────────────────── */
.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pw-wrap input { width: 100%; padding-right: 3rem; }
.pw-eye {
  position: absolute;
  right: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--color-text-secondary);
  min-height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pw-eye:focus-visible { outline: 2px solid var(--color-accent); border-radius: var(--radius-sm); }

/* ── Forgot password ─────────────────────────────────────────────── */
.forgot-wrap { text-align: center; margin-top: var(--space-3); }
.forgot-panel {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.forgot-panel label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}
.forgot-panel input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.forgot-panel input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.forgot-msg { color: var(--color-success); font-size: var(--text-sm); margin-top: var(--space-3); text-align: center; }

/* ── Reset success card ──────────────────────────────────────────── */
.reset-success-card { text-align: center; }
.reset-success-msg {
  font-size: var(--text-base);
  color: var(--color-navy);
  margin: var(--space-6) 0 var(--space-2);
  line-height: 1.5;
}

/* ── Standardized login form rhythm (matches field app reference) ──── */
.login-card .brand { margin-bottom: 1.6rem; }
.login-card > label { font-size: 14px; line-height: 1.2; font-weight: 600; color: var(--color-text-primary); margin: 0.85rem 0 6px; }
.login-card .brand + label { margin-top: 0; }
.login-card input { box-sizing: border-box; height: 44px; padding: 0 14px; border-radius: 8px; }
.login-card .pw-wrap input { padding-right: 3rem; }
.login-card .btn { min-height: 0; padding: 0.75rem 1.25rem; margin-top: 0.85rem; border-radius: 8px; border-width: 0; line-height: 1; }
.login-error { margin-top: 0.85rem; min-height: 1.2em; }
.forgot-wrap { margin-top: 0.85rem; line-height: 1.2; }
.forgot-wrap .btn-link { padding: 0; line-height: 1.2; }

/* ── App view ────────────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.app-body { padding: var(--space-6) var(--space-5) var(--space-12); max-width: 640px; margin: 0 auto; }
.welcome { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-navy); }
.muted { color: var(--color-text-secondary); }
.small { font-size: var(--text-sm); }
.empty-state {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.empty-state p { margin: var(--space-1) 0; color: var(--color-text-secondary); }

/* ── Toast ───────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  background: var(--color-navy-dark);
  color: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-md);
  transform: translateY(calc(100% + 4rem));
  transition: transform .25s ease;
  z-index: 50;
}
.toast.show { transform: translateY(0); }
.toast.error { background: var(--color-danger); }

/* ── Inspection list ─────────────────────────────────────────────── */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.insp-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.insp-card {
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--touch-min);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.insp-card:active { background: var(--color-sand); box-shadow: none; }
.insp-title { font-weight: 600; color: var(--color-navy); font-size: var(--text-base); }
.insp-meta { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: capitalize; }
.insp-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: 600;
  vertical-align: middle;
}
.insp-row { display: flex; gap: var(--space-2); align-items: stretch; }
.insp-row .insp-card { flex: 1; }
.insp-share { white-space: nowrap; align-self: stretch; }

/* ── Share / Send panel ──────────────────────────────────────────── */
.share-h { font-family: var(--font-display); color: var(--color-navy); font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.share-status { margin: var(--space-3) 0; font-size: var(--text-sm); min-height: 1.2em; }
.share-status.ok  { color: var(--color-success); }
.share-status.err { color: var(--color-danger); }
.recip-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-1) 0; }
.recip-check { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-base); color: var(--color-text-primary); min-height: var(--touch-min); }
.recip-check input { width: 22px; height: 22px; accent-color: var(--color-accent); }

/* ── Form fields ─────────────────────────────────────────────────── */
.detail-form { display: flex; flex-direction: column; }
.detail-form label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin: var(--space-4) 0 var(--space-1); display: block; }
.field-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-1); }

.field-input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  min-height: var(--touch-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  width: 100%;
  transition: border-color 120ms ease, outline 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
textarea.field-input {
  min-height: 80px;
  padding: var(--space-3);
  resize: vertical;
  line-height: 1.5;
}
select.field-input {
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
.field-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* Field wrapper (no mic in v2 — native keyboard dictation) */
.field-with-mic { display: flex; gap: var(--space-2); align-items: stretch; }
.field-with-mic .field-input { flex: 1 1 auto; }

/* ── Progress header ─────────────────────────────────────────────── */
.walk-prog { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.walk-step { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.walk-secname { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-navy); flex: 1 1 auto; }
.def-badge {
  background: var(--color-danger);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
}
.walk-progbar { height: 3px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-5); }
.walk-progbar-fill { height: 100%; background: var(--color-accent); transition: width .25s ease; }
.walk-blurb { color: var(--color-text-secondary); margin-bottom: var(--space-4); font-size: var(--text-sm); }

/* ── Item cards ──────────────────────────────────────────────────── */
.walk-body { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: 6rem; }
.item-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.item-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.item-title { font-size: var(--text-lg); color: var(--color-navy); font-weight: 600; }
.equip-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--color-navy);
  color: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.limit-para { margin: var(--space-2) 0; line-height: 1.6; color: var(--color-text-primary); font-size: var(--text-sm); }

/* ── Condition chip row ──────────────────────────────────────────── */
.cond-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  role: group;
}
.cond-btn {
  min-height: var(--touch-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: var(--space-2);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.cond-btn:active { opacity: 0.75; }
.cond-btn[aria-pressed="true"],
.cond-btn.on { color: var(--color-surface); border-color: transparent; }
.cond-btn.cond-operating.on    { background: var(--color-success); }
.cond-btn.cond-typical_wear.on { background: var(--color-info); }
.cond-btn.cond-excessive_wear.on { background: var(--color-warning); }
.cond-btn.cond-defective.on    { background: var(--color-danger); }
.cond-btn.cond-missing.on      { background: var(--color-danger); }
.cond-btn.cond-not_present.on  { background: var(--color-text-secondary); }

/* ── Comments ────────────────────────────────────────────────────── */
.comments-wrap { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.comment {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.comment.is-def { border-left-color: var(--color-danger); }

.kind-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.kind-btn {
  min-height: var(--touch-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0 var(--space-3);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.kind-btn.on { background: var(--color-navy); color: var(--color-surface); border-color: var(--color-navy); }

.comment-del {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}
.comment-del:active { color: var(--color-danger); }

.diag-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0;
}
.diag-check input { width: 20px; height: 20px; accent-color: var(--color-accent); }

.add-comment {
  margin-top: var(--space-3);
  min-height: var(--touch-min);
  font-size: var(--text-sm);
  width: 100%;
}
.photo-btn {
  margin-top: var(--space-3);
  min-height: 56px;
  width: 100%;
  border: 2px dashed var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-bg) !important;
  color: var(--color-text-secondary) !important;
  font-size: var(--text-sm);
  gap: var(--space-2);
}
.photo-btn:active { border-color: var(--color-accent) !important; color: var(--color-accent) !important; }

/* ── Photo thumbnails ────────────────────────────────────────────── */
.thumb-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.thumb {
  position: relative;
  width: 80px; height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x {
  position: absolute; top: var(--space-1); right: var(--space-1);
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.65);
  color: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* ── Equipment identity block ────────────────────────────────────── */
.equip-block {
  margin: var(--space-3) 0 var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.equip-block-head {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-3);
}
.equip-block .field-label { margin-top: var(--space-3); }
.equip-block .field-label:first-of-type { margin-top: 0; }
.equip-block .field-input { margin-bottom: 0; }
.equip-hint { font-size: var(--text-xs); color: var(--color-text-secondary); margin: var(--space-3) 0 var(--space-2); line-height: 1.5; }
.equip-age {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

/* ── Footer nav ──────────────────────────────────────────────────── */
.walk-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 calc(env(safe-area-inset-bottom) + 60px) 0 60px var(--color-surface);
}
.walk-foot > * { max-width: 640px; }
.walk-nav { display: flex; gap: var(--space-2); }
.walk-foot .btn { padding: 0 var(--space-5); }
.detail-form { padding-bottom: 6rem; }

/* ── v2 Component library ─────────────────────────────────────────── */

/* Sync icon (replaces sync-dot; icon SVG injected by components.js) */
.sync-icon {
  display: flex;
  align-items: center;
  flex: none;
}
.sync-bar {
  /* Override: v2 uses dynamic background + color set by renderSyncBar() */
  background: var(--color-navy);
  color: var(--color-surface);
  /* Keep existing layout */
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.sync-bar--syncing .sync-icon svg {
  animation: spin 1s linear infinite;
}
/* Failed state: abandoned ops the tech must retry. Light-red bar + a danger
   retry button (overrides the white-on-navy .sync-btn-manual defaults). */
.sync-bar--failed {
  background: #FEE2E2;
  color: var(--color-text-primary);
}
.sync-bar--failed .sync-btn-manual {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.sync-bar--failed .sync-btn-manual:active {
  background: var(--color-danger);
  color: #fff;
}

/* Number stepper */
.stepper-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0;
}
.stepper-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.stepper-btn:active { background: var(--color-bg); }
.stepper-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.stepper-display {
  font-size: var(--text-xl);
  font-weight: 600;
  min-width: 48px;
  text-align: center;
  color: var(--color-text-primary);
}

/* Native select — AI suggested state */
select.ai-suggested {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.select-ai-hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}
.field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Comment — information variant */
.comment.is-info { border-left-color: var(--color-info); }

/* Plate scan button (equipment variant — dashed like photo-btn but secondary) */
.plate-scan-btn {
  margin-top: var(--space-2) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}
.plate-scan-btn:active { background: var(--color-bg) !important; }

/* Danger button (used in confirmation sheets) */
.btn-danger {
  background: var(--color-danger);
  color: var(--color-surface);
  border-color: var(--color-danger);
}
.btn-danger:active { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }

/* Bottom sheet */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgb(0 0 0 / 0.4);
  display: flex;
  align-items: flex-end;
}
.bottom-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  margin: var(--space-3) auto 0;
}
.sheet-body {
  padding: var(--space-4) var(--space-5) var(--space-6);
}
.sheet-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.sheet-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Progress header */
.progress-header {
  position: sticky;
  top: 32px; /* below sync bar */
  z-index: 10;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  cursor: default;
}
.progress-header[role="button"] { cursor: pointer; }
.progress-header[role="button"]:active { background: var(--color-bg); }
.progress-header-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.progress-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.progress-section-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
}
.progress-item-name {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.progress-count {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  margin-left: var(--space-4);
}
.progress-bar-wrap {
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width 250ms ease;
}

/* ── Section step nav ────────────────────────────────────────────── */
.step-nav {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding: var(--space-2) var(--space-5) var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.step-nav::-webkit-scrollbar { display: none; }
.step-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--space-1);
  font-family: var(--font-sans);
  min-width: 52px;
  -webkit-tap-highlight-color: transparent;
}
.step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  border: 2px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  transition: background 150ms, border-color 150ms, color 150ms;
}
.step-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color 150ms;
}
.step-chip.done .step-num { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-surface); }
.step-chip.done .step-lbl { color: var(--color-navy); }
.step-chip.current .step-num { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }
.step-chip.current .step-lbl { color: var(--color-navy); font-weight: 700; }

/* ── v2 Step 5 — Admin panel ─────────────────────────────────────── */

.admin-only-btn { padding: var(--space-2); }

.admin-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-panel[hidden] { display: none; }

.admin-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
.admin-panel-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Tab nav */
.admin-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-tab {
  flex: 1;
  min-width: 72px;
  padding: var(--space-3) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
  white-space: nowrap;
}
.admin-tab.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* Tab panels */
.admin-tab-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4);
}
.admin-tab-content[hidden] { display: none; }

.admin-section { margin-bottom: var(--space-6); }
.admin-section-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.admin-section-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.admin-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  margin-top: var(--space-3);
}
.admin-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-sizing: border-box;
}
.admin-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.admin-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
  margin-bottom: var(--space-3);
}
.admin-textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* Logo */
.logo-preview-wrap {
  width: 120px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.logo-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* Color picker */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.color-input {
  width: 48px;
  height: 48px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-surface);
}
.color-preview-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.color-preview-btn {
  pointer-events: none;
  background: var(--color-accent) !important;
}
.color-preview-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0 var(--space-3);
}
.color-preview-bar {
  flex: 1;
  height: 6px;
  min-width: 60px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* Users table */
.users-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.users-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.users-td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  vertical-align: middle;
}
.users-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.role-badge.role-admin {
  background: var(--color-accent);
  color: var(--color-accent-text);
}
.role-badge.role-tech {
  background: var(--color-border);
  color: var(--color-text-secondary);
}
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  min-height: 32px;
}
.field-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* Invite sheet body */
.admin-sheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

/* ── v2 Step 6 — Card-based walkthrough ─────────────────────────────────── */

.walk-job-setup {
  padding: var(--space-4);
  max-width: 480px;
  margin: 0 auto;
}
.walk-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.walk-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.tech-name-display {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}
.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.btn-full { width: 100%; justify-content: center; }
.btn-link {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--space-1) 0;
  text-decoration: underline;
}

/* Walk card */
.walk-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.card-section-tag {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.card-item-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}
.card-subfields {
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cond-section { margin-bottom: var(--space-4); }
.photo-section { margin-bottom: var(--space-2); }
.comment-section { margin-top: var(--space-2); }

/* Chemical range hint */
.chem-range-hint {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Toggle (Yes/No) */
.toggle-row {
  display: flex;
  gap: var(--space-2);
}
.toggle-btn {
  flex: 1;
  min-height: var(--touch-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.toggle-btn.on {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  font-weight: 600;
}

/* Gallons */
.gallons-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.gallons-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
}
.gallons-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* Spa sub-fields */
.spa-subfields {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Equipment identity sub-card */
.equip-identity {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.equip-identity-head {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  font-weight: 600;
}
.equip-age {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Multi-select chips */
.multiselect-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.multiselect-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  cursor: pointer;
  background: var(--color-surface);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  transition: background 120ms ease;
}
.multiselect-chip.on {
  background: var(--color-accent);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  font-weight: 600;
}

/* Review card */
.review-stats {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.review-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2);
}
.review-stat-val {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
}
.review-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-1);
}
.review-warn {
  background: #FEF3C7;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

/* Section nav sheet */
.nav-sheet-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
}
.nav-sheet-row {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.nav-sheet-row:last-child { border-bottom: none; }
.nav-sheet-row:active { background: var(--color-bg); }
.nav-sheet-name { font-weight: 600; color: var(--color-text-primary); }

/* Walk body padding */
.walk-body { padding: var(--space-4); padding-top: var(--space-2); }

/* ── Step 7 — smart-fill UI ───────────────────────────────────────────────── */

/* 7a — Chemical out-of-range flag banner (Component 3.8) */
.chem-flag-host { margin-top: var(--space-3); }
.chem-flag {
  background: #FEF3C7;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-sm);
  animation: chem-flag-in 160ms ease-out;
}
@keyframes chem-flag-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chem-flag-text { margin: 0 0 var(--space-3); color: var(--color-text-primary); }
.chem-flag-btns { display: flex; gap: var(--space-2); }
.chem-flag-btn {
  height: auto;
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

/* Deficiency / information comment editor (chemical flag "Add comment") */
.def-block {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-left: 4px solid var(--color-danger);
  background: #FFFFFF;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.def-block.is-info { border-left-color: var(--color-info); }
.chem-comment-host { margin-top: var(--space-2); }

/* 7b — OCR confirm card (Component 3.7) */
.ocr-confirm {
  border: 1px solid var(--color-warning);
  background: #FFFBEB;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.ocr-confirm-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.ocr-confirm-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-warning);
  background: #FEF3C7;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.ocr-confirm-title { font-weight: 600; color: var(--color-text-primary); }
.ocr-confirm .field-input:disabled { background: #FFFFFF; color: var(--color-text-primary); opacity: 1; }
.ocr-confirm-btns { display: flex; gap: var(--space-2); margin-top: var(--space-4); }

/* 7d — Pool shape photo capture */
.shape-photo-section { margin-top: var(--space-4); }

/* ── 7b — Pool profile quiz, confirm, and gating (SPEC §7.5) ──────────────── */

/* Quiz: one question per screen, large tap targets, slide between screens. */
.profile-quiz { max-width: 560px; margin: 0 auto; padding: var(--space-4); }

.quiz-dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-6); }
.quiz-dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-border); transition: background 150ms ease; }
.quiz-dot.active { background: var(--color-accent); }

.quiz-stage { overflow: hidden; }
.quiz-screen { animation-duration: 220ms; animation-timing-function: ease; animation-fill-mode: both; }
.quiz-screen.slide-from-right { animation-name: quizInRight; }
.quiz-screen.slide-from-left  { animation-name: quizInLeft; }
@keyframes quizInRight { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes quizInLeft  { from { transform: translateX(-28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.quiz-step { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-2); }
.quiz-title { font-size: var(--text-2xl); line-height: 1.25; margin: 0 0 var(--space-6); color: var(--color-text-primary); }

.quiz-options { display: flex; flex-direction: column; gap: var(--space-3); }
.quiz-answer {
  width: 100%;
  min-height: 64px;
  padding: var(--space-4);
  font-size: var(--text-lg);
  text-align: left;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.quiz-answer:hover { border-color: var(--color-accent); }
.quiz-answer.selected { border-color: var(--color-accent); background: #faf5ec; }

.quiz-foot { margin-top: var(--space-6); }

/* Confirm screen (return visit). */
.profile-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}
.profile-summary-text { margin: 0; font-size: var(--text-base); color: var(--color-text-primary); line-height: 1.5; }
.profile-edit-btn { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; min-height: 44px; }

/* Equipment end-of-life flag (equipment_age: 10_plus). */
.equip-age-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-warning);
  background: #fef6e7;
  border: 1px solid #f5d9a8;
  border-radius: var(--radius-full);
}
.equip-age-badge svg { stroke: var(--color-warning); }

/* Required-email inline error. */
.field-error { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-danger); }
.input-error { border-color: var(--color-danger) !important; }

/* Pencil edit button on the inspection list row. */
.insp-edit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: var(--space-2);
}